feat(SW-375): new tokens
new asset generation logic BREAKING CHANGE: New tokens.
This commit is contained in:
Michael Zetterberg
@@ -0,0 +1,117 @@
|
||||
import {
|
||||
Meta,
|
||||
Title,
|
||||
Subtitle,
|
||||
Description,
|
||||
Controls,
|
||||
Stories,
|
||||
} from '@storybook/blocks'
|
||||
|
||||
import * as TypographyStories from './Typography.stories.tsx'
|
||||
|
||||
<Meta of={TypographyStories} />
|
||||
|
||||
<Title />
|
||||
|
||||
The source of the design system lives in Figma. Here, source means design tokens _and_ Figma styles.
|
||||
|
||||
Figma styles are a collection of design tokens that together define a style. For the most part it is used for typography. Design tokens define things like font family, font weight, font size, etc. On their own they don't do much as their meaning is lost without context of each other. Together though they define the typography to render.
|
||||
|
||||
To help communication between designers and developers it helps to have the same nomenclature. To achieve this goal the technical implementation of the design system in this repository uses two approaches; a `Typography` component and a higher order function.
|
||||
|
||||
<Subtitle>The component</Subtitle>
|
||||
|
||||
> The approach described in this section is platform agnostic. However this documentation is for the implementation aimed at web. The same can be achived for other platforms but currently it is only implemented for web.
|
||||
|
||||
The `Typography` component implements all the Figma styles for typography with [Class Variance Authority](https://cva.style/). This allows the consumers to use this component to apply typography styling to any component that accepts a class (the `className` prop) by wrapping them. The implementation is also supported by code completion furthering promoting the same nomenclature.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
import { Typography } from '@scandic-hotels/design-system'
|
||||
|
||||
function SomeTitleComponent () {
|
||||
return (
|
||||
<Typography variant="Title/lg">
|
||||
<h1>A title with proper typography</h1>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
It also takes care of merging with any class already present.
|
||||
|
||||
```
|
||||
import { Typography } from '@scandic-hotels/design-system'
|
||||
|
||||
import styles from './my-component.module.css'
|
||||
|
||||
function MyComponent () {
|
||||
return (
|
||||
<Typography variant="Title/lg">
|
||||
<h1 className={styles.title}>A title with proper typography</h1>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
<Subtitle>The higher order function</Subtitle>
|
||||
|
||||
> The approach described in this section is platform agnostic. However this documentation is for the implementation aimed at web. The same can be achived for other platforms but currently it is only implemented for web.
|
||||
|
||||
The higher order function for typography implements all the Figma styles for typography with Class Variance Authority. The implementation merges any components CVA variants with the CVA variants for typography. It does this by exporting a higher order function named `withTypography`.
|
||||
|
||||
The higher order function named `withTypography` accepts a CVA config and returns a new CVA config enhanced with a `typography` variant. This will give the component implementing the CVA config a prop named `typography`. This prop works the same as the `variant` prop for the `Typography` component with handling merging of classes already preset, code completion and everything.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
// variants.ts
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
import { withTypography } from '@scandic-hotels/design-system'
|
||||
|
||||
import styles from './my-component.module.css'
|
||||
|
||||
export const config = {
|
||||
variants: {
|
||||
...
|
||||
},
|
||||
defaultVariants: {
|
||||
...
|
||||
},
|
||||
} as const
|
||||
|
||||
export const variants = cva(styles.myComponent, withTypography(config))
|
||||
```
|
||||
|
||||
```
|
||||
// MyComponent.tsx
|
||||
import { variants } from './variants'
|
||||
|
||||
export function MyComponent (props) {
|
||||
const classNames = variants(...)
|
||||
return <div {...props} className={classNames} />
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
// OtherComponent.tsx
|
||||
...
|
||||
<MyComponent typography="Title/lg">
|
||||
...
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
The component accepts the following props.
|
||||
|
||||
> For the component to work the nested child component needs to handle `className` prop.
|
||||
|
||||
<Controls />
|
||||
|
||||
---
|
||||
|
||||
## All typography styles
|
||||
|
||||
<Stories />
|
||||
@@ -0,0 +1,189 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { Typography } from './Typography.tsx'
|
||||
|
||||
import TypographyDocs from './Typography.docs.mdx'
|
||||
|
||||
import { config as typographyConfig } from './variants'
|
||||
|
||||
const meta: Meta<typeof Typography> = {
|
||||
title: 'Components/Typography',
|
||||
component: Typography,
|
||||
args: { variant: typographyConfig.defaultVariants.variant },
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: Object.keys(typographyConfig.variants.variant),
|
||||
table: {
|
||||
defaultValue: { summary: typographyConfig.defaultVariants.variant },
|
||||
},
|
||||
},
|
||||
},
|
||||
parameters: { docs: { toc: true, page: TypographyDocs } },
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof Typography>
|
||||
|
||||
export const TitleLg: Story = {
|
||||
name: 'Title/lg',
|
||||
args: {
|
||||
variant: 'Title/lg',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleMd: Story = {
|
||||
name: 'Title/md',
|
||||
args: {
|
||||
variant: 'Title/md',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleMdRegular: Story = {
|
||||
name: 'Title/mdRegular',
|
||||
args: {
|
||||
variant: 'Title/mdRegular',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleSm: Story = {
|
||||
name: 'Title/sm',
|
||||
args: {
|
||||
variant: 'Title/sm',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleSmRegular: Story = {
|
||||
name: 'Title/smRegular',
|
||||
args: {
|
||||
variant: 'Title/smRegular',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleXs: Story = {
|
||||
name: 'Title/xs',
|
||||
args: {
|
||||
variant: 'Title/xs',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleDecorativeLg: Story = {
|
||||
name: 'Title/Decorative/lg',
|
||||
args: {
|
||||
variant: 'Title/Decorative/lg',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleDecorativeMd: Story = {
|
||||
name: 'Title/Decorative/md',
|
||||
args: {
|
||||
variant: 'Title/Decorative/md',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleSubtitleLg: Story = {
|
||||
name: 'Title/Subtitle/lg',
|
||||
args: {
|
||||
variant: 'Title/Subtitle/lg',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleSubtitleMd: Story = {
|
||||
name: 'Title/Subtitle/md',
|
||||
args: {
|
||||
variant: 'Title/Subtitle/md',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleOverlineSm: Story = {
|
||||
name: 'Title/Overline/sm',
|
||||
args: {
|
||||
variant: 'Title/Overline/sm',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const BodyLeadtext: Story = {
|
||||
name: 'Body/Lead text',
|
||||
args: {
|
||||
variant: 'Body/Lead text',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodyParagraphMdRegular: Story = {
|
||||
name: 'Body/Paragraph/mdRegular',
|
||||
args: {
|
||||
variant: 'Body/Paragraph/mdRegular',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodyParagraphMdBold: Story = {
|
||||
name: 'Body/Paragraph/mdBold',
|
||||
args: {
|
||||
variant: 'Body/Paragraph/mdBold',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodySupportingtextCaptionSmRegular: Story = {
|
||||
name: 'Body/Supporting text (caption)/smRegular',
|
||||
args: {
|
||||
variant: 'Body/Supporting text (caption)/smRegular',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodySupportingtextCaptionSmBold: Story = {
|
||||
name: 'Body/Supporting text (caption)/smBold',
|
||||
args: {
|
||||
variant: 'Body/Supporting text (caption)/smBold',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodyUnderlineMd: Story = {
|
||||
name: 'Body/Underline/md',
|
||||
args: {
|
||||
variant: 'Body/Underline/md',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodyUnderlineSm: Story = {
|
||||
name: 'Body/Underline/sm',
|
||||
args: {
|
||||
variant: 'Body/Underline/sm',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const TagSm: Story = {
|
||||
name: 'Tag/sm',
|
||||
args: {
|
||||
variant: 'Tag/sm',
|
||||
children: <span>The quick brown fox jumps over the lazy dog</span>,
|
||||
},
|
||||
}
|
||||
export const LinkMd: Story = {
|
||||
name: 'Link/md',
|
||||
args: {
|
||||
variant: 'Link/md',
|
||||
children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
|
||||
},
|
||||
}
|
||||
export const LinkSm: Story = {
|
||||
name: 'Link/sm',
|
||||
args: {
|
||||
variant: 'Link/sm',
|
||||
children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
|
||||
},
|
||||
}
|
||||
export const LabelXsRegular: Story = {
|
||||
name: 'Label/xsRegular',
|
||||
args: {
|
||||
variant: 'Label/xsRegular',
|
||||
children: <span>The quick brown fox jumps over the lazy dog</span>,
|
||||
},
|
||||
}
|
||||
export const LabelXsBold: Story = {
|
||||
name: 'Label/xsBold',
|
||||
args: {
|
||||
variant: 'Label/xsBold',
|
||||
children: <span>The quick brown fox jumps over the lazy dog</span>,
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { cloneElement, isValidElement } from 'react'
|
||||
|
||||
import { variants } from './variants'
|
||||
|
||||
import type { TypographyProps } from './types'
|
||||
|
||||
export function Typography({ variant, children }: TypographyProps) {
|
||||
if (!isValidElement(children)) return null
|
||||
|
||||
const classNames = variants({
|
||||
variant,
|
||||
})
|
||||
|
||||
return cloneElement(children, {
|
||||
...children.props,
|
||||
className: [children.props.className, classNames].filter(Boolean).join(' '),
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export { Typography } from './Typography'
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export { withTypography } from './variants'
|
||||
@@ -0,0 +1,9 @@
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
|
||||
import type { variants } from './variants'
|
||||
|
||||
export interface TypographyProps
|
||||
extends Pick<React.HTMLAttributes<HTMLElement>, 'className'>,
|
||||
VariantProps<typeof variants> {
|
||||
children: React.ReactElement<{ className?: string }>
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
.Title-lg {
|
||||
font-family: var(--Title-lg-Font-family), var(--Title-lg-Font-fallback);
|
||||
font-size: var(--Title-lg-Size);
|
||||
font-weight: var(--Title-lg-Font-weight);
|
||||
letter-spacing: var(--Title-lg-Letter-spacing);
|
||||
text-transform: var(--Title-lg-Text-Transform);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-md {
|
||||
font-family: var(--Title-md-Font-family), var(--Title-md-Font-fallback);
|
||||
font-size: var(--Title-md-Size);
|
||||
font-weight: var(--Title-md-Font-weight);
|
||||
letter-spacing: var(--Title-md-Letter-spacing);
|
||||
text-transform: var(--Title-md-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-mdRegular {
|
||||
font-family: var(--Title-md-Font-family), var(--Title-md-Font-fallback);
|
||||
font-size: var(--Title-md-Size);
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--Title-md-Letter-spacing);
|
||||
text-transform: var(--Title-md-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-sm {
|
||||
font-family: var(--Title-sm-Font-family), var(--Title-sm-Font-fallback);
|
||||
font-size: var(--Title-sm-Size);
|
||||
font-weight: var(--Title-sm-Font-weight);
|
||||
letter-spacing: var(--Title-sm-Letter-spacing);
|
||||
text-transform: var(--Title-sm-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-smRegular {
|
||||
font-family:
|
||||
var(--Title-sm-LowCase-Font-family), var(--Title-sm-LowCase-Font-fallback);
|
||||
font-size: var(--Title-sm-LowCase-Size);
|
||||
font-weight: var(--Title-sm-LowCase-Font-weight);
|
||||
letter-spacing: var(--Title-sm-LowCase-Letter-spacing);
|
||||
text-transform: var(--Title-sm-LowCase-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-xs {
|
||||
font-family: var(--Title-xs-Font-family), var(--Title-xs-Font-fallback);
|
||||
font-size: var(--Title-xs-Size);
|
||||
font-weight: var(--Title-xs-Font-weight);
|
||||
letter-spacing: var(--Title-xs-Letter-spacing);
|
||||
text-transform: var(--Title-xs-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Decorative-lg {
|
||||
font-family:
|
||||
var(--Title-Decorative-lg-Font-family),
|
||||
var(--Title-Decorative-lg-Font-fallback);
|
||||
font-size: var(--Title-Decorative-lg-Size);
|
||||
font-weight: var(--Title-Decorative-lg-Font-weight);
|
||||
letter-spacing: var(--Title-Decorative-lg-Letter-spacing);
|
||||
text-transform: var(--Title-Decorative-lg-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Decorative-md {
|
||||
font-family:
|
||||
var(--Title-Decorative-md-Font-family),
|
||||
var(--Title-Decorative-md-Font-fallback);
|
||||
font-size: var(--Title-Decorative-md-Size);
|
||||
font-weight: var(--Title-Decorative-md-Font-weight);
|
||||
letter-spacing: var(--Title-Decorative-md-Letter-spacing);
|
||||
text-transform: var(--Title-Decorative-md-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Subtitle-lg {
|
||||
font-family:
|
||||
var(--Title-Subtitle-lg-Font-family), var(--Title-Subtitle-lg-Font-fallback);
|
||||
font-size: var(--Title-Subtitle-lg-Size);
|
||||
font-weight: var(--Title-Subtitle-lg-Font-weight);
|
||||
letter-spacing: var(--Title-Subtitle-lg-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Subtitle-md {
|
||||
font-family:
|
||||
var(--Title-Subtitle-md-Font-family), var(--Title-Subtitle-md-Font-fallback);
|
||||
font-size: var(--Title-Subtitle-md-Size);
|
||||
font-weight: var(--Title-Subtitle-md-Font-weight);
|
||||
letter-spacing: var(--Title-Subtitle-md-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Overline-sm {
|
||||
font-family:
|
||||
var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
|
||||
font-size: var(--Title-Overline-sm-Size);
|
||||
font-weight: var(--Title-Overline-sm-Font-weight);
|
||||
letter-spacing: var(--Title-Overline-sm-Letter-spacing);
|
||||
text-transform: var(--Title-Overline-sm-Text-Transform);
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Lead-text {
|
||||
font-family:
|
||||
var(--Body-Lead-text-Font-family), var(--Body-Lead-text-Font-fallback);
|
||||
font-size: var(--Body-Lead-text-Size);
|
||||
font-weight: var(--Body-Lead-text-Font-weight);
|
||||
letter-spacing: var(--Body-Lead-text-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Paragraph-mdRegular {
|
||||
font-family:
|
||||
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
|
||||
font-size: var(--Body-Paragraph-Size);
|
||||
font-weight: var(--Body-Paragraph-Font-weight);
|
||||
letter-spacing: var(--Body-Paragraph-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Paragraph-mdBold {
|
||||
font-family:
|
||||
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
|
||||
font-size: var(--Body-Paragraph-Size);
|
||||
font-weight: var(--Body-Paragraph-Font-weight-2);
|
||||
letter-spacing: var(--Body-Paragraph-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Supporting-text-caption-smRegular {
|
||||
font-family:
|
||||
var(--Body-Supporting-text-Font-family),
|
||||
var(--Body-Supporting-text-Font-fallback);
|
||||
font-size: var(--Body-Supporting-text-Size);
|
||||
font-weight: var(--Body-Supporting-text-Font-weight);
|
||||
letter-spacing: var(--Body-Supporting-text-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Supporting-text-caption-smBold {
|
||||
font-family:
|
||||
var(--Body-Supporting-text-Font-family),
|
||||
var(--Body-Supporting-text-Font-fallback);
|
||||
font-size: var(--Body-Supporting-text-Size);
|
||||
font-weight: var(--Body-Supporting-text-Font-weight-2);
|
||||
letter-spacing: var(--Body-Supporting-text-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Underline-md {
|
||||
font-family:
|
||||
var(--Body-Underline-md-Font-family), var(--Body-Underline-md-Font-fallback);
|
||||
font-size: var(--Body-Underline-md-Size);
|
||||
font-weight: var(--Body-Underline-md-Font-weight);
|
||||
letter-spacing: var(--Body-Underline-md-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.Body-Underline-sm {
|
||||
font-family:
|
||||
var(--Body-Underline-sm-Font-family), var(--Body-Underline-sm-Font-fallback);
|
||||
font-size: var(--Body-Underline-sm-Size);
|
||||
font-weight: var(--Body-Underline-sm-Font-weight);
|
||||
letter-spacing: var(--Body-Underline-sm-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.Tag-sm {
|
||||
font-family: var(--Tag-Font-family), var(--Tag-Font-fallback);
|
||||
font-size: var(--Tag-Size);
|
||||
font-weight: var(--Tag-Font-weight);
|
||||
letter-spacing: var(--Tag-Letter-spacing);
|
||||
text-transform: var(--Tag-Text-Transform);
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Link-md {
|
||||
font-family: var(--Link-md-Font-family), var(--Link-md-Font-fallback);
|
||||
font-size: var(--Link-md-Size);
|
||||
font-weight: var(--Link-md-Font-weight);
|
||||
letter-spacing: var(--Link-md-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.Link-sm {
|
||||
font-family: var(--Link-sm-Font-family), var(--Link-sm-Font-fallback);
|
||||
font-size: var(--Link-sm-Size);
|
||||
font-weight: var(--Link-sm-Font-weight);
|
||||
letter-spacing: var(--Link-sm-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.Label-xsRegular {
|
||||
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
|
||||
font-size: var(--Label-Size);
|
||||
font-weight: var(--Label-Font-weight);
|
||||
letter-spacing: var(--Label-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Label-xsBold {
|
||||
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
|
||||
font-size: var(--Label-Size);
|
||||
font-weight: var(--Label-Font-weight-2);
|
||||
letter-spacing: var(--Label-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
52
packages/design-system/lib/components/Typography/variants.ts
Normal file
52
packages/design-system/lib/components/Typography/variants.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { cva } from 'class-variance-authority'
|
||||
import { deepmerge } from 'deepmerge-ts'
|
||||
|
||||
import styles from './typography.module.css'
|
||||
|
||||
export const config = {
|
||||
variants: {
|
||||
variant: {
|
||||
'Title/lg': styles['Title-lg'],
|
||||
'Title/md': styles['Title-md'],
|
||||
'Title/mdRegular': styles['Title-mdRegular'],
|
||||
'Title/sm': styles['Title-sm'],
|
||||
'Title/smRegular': styles['Title-smRegular'],
|
||||
'Title/xs': styles['Title-xs'],
|
||||
'Title/Decorative/lg': styles['Title-Decorative-lg'],
|
||||
'Title/Decorative/md': styles['Title-Decorative-md'],
|
||||
'Title/Subtitle/lg': styles['Title-Subtitle-lg'],
|
||||
'Title/Subtitle/md': styles['Title-Subtitle-md'],
|
||||
'Title/Overline/sm': styles['Title-Overline-sm'],
|
||||
'Body/Lead text': styles['Body-Lead-text'],
|
||||
'Body/Paragraph/mdRegular': styles['Body-Paragraph-mdRegular'],
|
||||
'Body/Paragraph/mdBold': styles['Body-Paragraph-mdBold'],
|
||||
'Body/Supporting text (caption)/smRegular':
|
||||
styles['Body-Supporting-text-caption-smRegular'],
|
||||
'Body/Supporting text (caption)/smBold':
|
||||
styles['Body-Supporting-text-caption-smBold'],
|
||||
'Body/Underline/md': styles['Body-Underline-md'],
|
||||
'Body/Underline/sm': styles['Body-Underline-sm'],
|
||||
'Tag/sm': styles['Tag-sm'],
|
||||
'Link/md': styles['Link-md'],
|
||||
'Link/sm': styles['Link-sm'],
|
||||
'Label/xsRegular': styles['Label-xsRegular'],
|
||||
'Label/xsBold': styles['Label-xsBold'],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'Body/Paragraph/mdRegular',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const variants = cva({}, config)
|
||||
|
||||
const typographyConfig = {
|
||||
variants: {
|
||||
typography: config.variants.variant,
|
||||
},
|
||||
defaultVariants: config.defaultVariants,
|
||||
} as const
|
||||
|
||||
export function withTypography<T>(config: T) {
|
||||
return deepmerge(typographyConfig, config)
|
||||
}
|
||||
Reference in New Issue
Block a user