From c61d10c6461309bf4273e1c9d6953785f2fe9ace Mon Sep 17 00:00:00 2001 From: sirineJ <112706079+sirineJ@users.noreply.github.com> Date: Sun, 13 Oct 2024 23:41:02 +0200 Subject: [PATCH] chore: * remove 'typography' infix from typography tokens. * remove old letter-spacing tokens and introduce unique --cui-letter-spacing token. * update typography tokens to their final values. * update some readme files. * Update theme page. --- .storybook/components/Theme.tsx | 27 +++- docs/features/1-theme.mdx | 4 +- .../components/Badge/Badge.module.css | 4 +- .../components/Body/Body.module.css | 18 +-- .../components/Button/base.module.css | 10 +- .../components/Calendar/Calendar.module.css | 8 +- .../components/Status/Status.module.css | 4 +- .../components/Checkbox/Checkbox.module.css | 2 +- .../components/Checkbox/Checkbox.stories.tsx | 4 +- .../components/Compact/Compact.module.css | 18 +-- .../components/Display/Display.module.css | 18 +-- .../components/Field/Field.module.css | 14 +- .../components/Headline/Headline.module.css | 18 +-- .../components/Input/Input.module.css | 4 +- packages/circuit-ui/components/List/List.mdx | 1 + .../components/List/List.module.css | 8 +- .../components/ListItem/ListItem.module.css | 4 +- .../NotificationBanner.module.css | 16 +- .../components/Numeral/Numeral.module.css | 18 +-- .../components/Popover/Popover.module.css | 4 +- .../ProgressBar/ProgressBar.module.css | 4 +- .../RadioButton/RadioButton.module.css | 4 +- .../components/Select/Select.module.css | 4 +- .../PrimaryLink/PrimaryLink.module.css | 4 +- .../components/SubHeadline/SubHeadline.mdx | 2 +- .../components/TableCell/TableCell.module.css | 12 +- .../TableHeader/TableHeader.module.css | 8 +- .../Tabs/components/Tab/Tab.module.css | 4 +- .../circuit-ui/components/Tag/Tag.module.css | 4 +- .../components/Toggle/Toggle.module.css | 4 +- .../components/Tooltip/Tooltip.module.css | 4 +- packages/circuit-ui/styles/base.css | 4 +- packages/design-tokens/themes/schema.ts | 124 +++++++-------- packages/design-tokens/themes/shared.ts | 149 +++++------------- .../index.spec.ts | 10 +- .../index.spec.ts | 18 +-- 36 files changed, 251 insertions(+), 312 deletions(-) diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx index d861679f37..ffbae18e7b 100644 --- a/.storybook/components/Theme.tsx +++ b/.storybook/components/Theme.tsx @@ -42,8 +42,20 @@ type PreviewProps = { name: CustomPropertyName }; type PreviewComponent = ComponentType; function filterCustomProperties(namespace: string, type?: string) { + const typographyPrefixes = [ + 'body', + 'display', + 'headline', + 'compact', + 'numeral', + 'typography', + ]; //kept 'typography' for deprecated tokens + return schema.filter((token) => { - const isNamespace = token.name.startsWith(`--cui-${namespace}`); + const isNamespace = + namespace === 'typography' + ? typographyPrefixes.some((el) => token.name.startsWith(`--cui-${el}`)) + : token.name.startsWith(`--cui-${namespace}`); const isType = type ? token.type === type : true; return isNamespace && isType; }); @@ -79,8 +91,17 @@ function getRows( { children: (
- {name} - + + {name} + + {!deprecation && } {deprecation && ( @@ -73,7 +73,7 @@ Avoid using the `var(--cui-typography-*)` CSS custom properties directly in your -Pass `variant="highlight"` to the `Body` component to make it bold. The font weight of the `Title`, `Headline` and `SubHeadline` components is bold by default and should not be overwritten. +Pass the `weight` prop to the `Body` component to adjust its font-weight styling. The font weight of the `Display`, `Headline` and the `Numeral` components is bold by default and should not be overwritten. ## Transitions diff --git a/packages/circuit-ui/components/Badge/Badge.module.css b/packages/circuit-ui/components/Badge/Badge.module.css index c33329cd2c..90edd749b6 100644 --- a/packages/circuit-ui/components/Badge/Badge.module.css +++ b/packages/circuit-ui/components/Badge/Badge.module.css @@ -1,9 +1,9 @@ .base { display: inline-block; padding: 2px var(--cui-spacings-byte); - font-size: var(--cui-typography-body-s-font-size); + font-size: var(--cui-body-s-font-size); font-weight: var(--cui-font-weight-bold); - line-height: var(--cui-typography-body-s-line-height); + line-height: var(--cui-body-s-line-height); text-align: center; letter-spacing: 0.25px; border-radius: var(--cui-border-radius-pill); diff --git a/packages/circuit-ui/components/Body/Body.module.css b/packages/circuit-ui/components/Body/Body.module.css index 3b78208a1e..bec35cb008 100644 --- a/packages/circuit-ui/components/Body/Body.module.css +++ b/packages/circuit-ui/components/Body/Body.module.css @@ -1,21 +1,21 @@ /* Sizes */ .l { - font-size: var(--cui-typography-body-l-font-size); - line-height: var(--cui-typography-body-l-line-height); - letter-spacing: var(--cui-typography-body-l-letter-spacing); + font-size: var(--cui-body-l-font-size); + line-height: var(--cui-body-l-line-height); + letter-spacing: var(--cui-letter-spacing); } .m { - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); - letter-spacing: var(--cui-typography-body-m-letter-spacing); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); + letter-spacing: var(--cui-letter-spacing); } .s { - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); - letter-spacing: var(--cui-typography-body-s-letter-spacing); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); + letter-spacing: var(--cui-letter-spacing); } /* Weights */ diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css index 4320581beb..c36f133904 100644 --- a/packages/circuit-ui/components/Button/base.module.css +++ b/packages/circuit-ui/components/Button/base.module.css @@ -6,7 +6,7 @@ width: auto; height: auto; margin: 0; - font-size: var(--cui-typography-body-m-font-size); + font-size: var(--cui-body-m-font-size); font-weight: var(--cui-font-weight-bold); text-align: center; text-decoration: none; @@ -165,8 +165,8 @@ --loader-gap: 3px; --loader-transform: scale(150%); - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); border-radius: var(--cui-border-radius-byte); } @@ -177,8 +177,8 @@ --loader-gap: 5px; --loader-transform: scale(133%); - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); border-radius: var(--cui-border-radius-byte); } diff --git a/packages/circuit-ui/components/Calendar/Calendar.module.css b/packages/circuit-ui/components/Calendar/Calendar.module.css index c0ab955545..caa581146d 100644 --- a/packages/circuit-ui/components/Calendar/Calendar.module.css +++ b/packages/circuit-ui/components/Calendar/Calendar.module.css @@ -80,9 +80,9 @@ align-items: center; justify-content: center; aspect-ratio: 1 / 1; - font-size: var(--cui-typography-body-m-font-size); + font-size: var(--cui-body-m-font-size); font-weight: var(--cui-font-weight-bold); - line-height: var(--cui-typography-body-m-line-height); + line-height: var(--cui-body-m-line-height); } .day { @@ -90,9 +90,9 @@ height: 100%; aspect-ratio: 1 / 1; padding: 0; - font-size: var(--cui-typography-body-m-font-size); + font-size: var(--cui-body-m-font-size); font-variant-numeric: tabular-nums; - line-height: var(--cui-typography-body-m-line-height); + line-height: var(--cui-body-m-line-height); color: var(--cui-fg-normal); touch-action: manipulation; cursor: pointer; diff --git a/packages/circuit-ui/components/Carousel/components/Status/Status.module.css b/packages/circuit-ui/components/Carousel/components/Status/Status.module.css index d0e1b5726c..39da1f6761 100644 --- a/packages/circuit-ui/components/Carousel/components/Status/Status.module.css +++ b/packages/circuit-ui/components/Carousel/components/Status/Status.module.css @@ -1,6 +1,6 @@ @media (max-width: 479px) { .base { - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); } } diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.module.css b/packages/circuit-ui/components/Checkbox/Checkbox.module.css index 1d489d1e1b..ee7d88ff16 100644 --- a/packages/circuit-ui/components/Checkbox/Checkbox.module.css +++ b/packages/circuit-ui/components/Checkbox/Checkbox.module.css @@ -9,7 +9,7 @@ .base + .label::before { position: absolute; - top: calc(var(--cui-typography-body-m-line-height) / 2); + top: calc(var(--cui-body-m-line-height) / 2); left: 0; box-sizing: border-box; display: block; diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.stories.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.stories.tsx index c4229427ef..478f2c52d7 100644 --- a/packages/circuit-ui/components/Checkbox/Checkbox.stories.tsx +++ b/packages/circuit-ui/components/Checkbox/Checkbox.stories.tsx @@ -107,8 +107,8 @@ export const Indeterminate = (args: { style={{ display: 'block', marginBottom: 'var(--cui-spacings-bit)', - fontSize: 'var(--cui-typography-body-s-font-size)', - lineHeight: 'var(--cui-typography-body-s-line-height)', + fontSize: 'var(--cui-body-s-font-size)', + lineHeight: 'var(--cui-body-s-line-height)', }} > {label} diff --git a/packages/circuit-ui/components/Compact/Compact.module.css b/packages/circuit-ui/components/Compact/Compact.module.css index 02ccf82f40..398b7ab0fe 100644 --- a/packages/circuit-ui/components/Compact/Compact.module.css +++ b/packages/circuit-ui/components/Compact/Compact.module.css @@ -1,21 +1,21 @@ /* Sizes */ .l { - font-size: var(--cui-typography-compact-l-font-size); - line-height: var(--cui-typography-compact-l-line-height); - letter-spacing: var(--cui-typography-compact-l-letter-spacing); + font-size: var(--cui-compact-l-font-size); + line-height: var(--cui-compact-l-line-height); + letter-spacing: var(--cui-letter-spacing); } .m { - font-size: var(--cui-typography-compact-m-font-size); - line-height: var(--cui-typography-compact-m-line-height); - letter-spacing: var(--cui-typography-compact-m-letter-spacing); + font-size: var(--cui-compact-m-font-size); + line-height: var(--cui-compact-m-line-height); + letter-spacing: var(--cui-letter-spacing); } .s { - font-size: var(--cui-typography-compact-s-font-size); - line-height: var(--cui-typography-compact-s-line-height); - letter-spacing: var(--cui-typography-compact-s-letter-spacing); + font-size: var(--cui-compact-s-font-size); + line-height: var(--cui-compact-s-line-height); + letter-spacing: var(--cui-letter-spacing); } /* Weights */ diff --git a/packages/circuit-ui/components/Display/Display.module.css b/packages/circuit-ui/components/Display/Display.module.css index 2e589a0762..f8c9944a84 100644 --- a/packages/circuit-ui/components/Display/Display.module.css +++ b/packages/circuit-ui/components/Display/Display.module.css @@ -7,19 +7,19 @@ /* Sizes */ .l { - font-size: var(--cui-typography-display-l-font-size); - line-height: var(--cui-typography-display-l-line-height); - letter-spacing: var(--cui-typography-display-l-letter-spacing); + font-size: var(--cui-display-l-font-size); + line-height: var(--cui-display-l-line-height); + letter-spacing: var(--cui-letter-spacing); } .m { - font-size: var(--cui-typography-display-m-font-size); - line-height: var(--cui-typography-display-m-line-height); - letter-spacing: var(--cui-typography-display-m-letter-spacing); + font-size: var(--cui-display-m-font-size); + line-height: var(--cui-display-m-line-height); + letter-spacing: var(--cui-letter-spacing); } .s { - font-size: var(--cui-typography-display-s-font-size); - line-height: var(--cui-typography-display-s-line-height); - letter-spacing: var(--cui-typography-display-s-letter-spacing); + font-size: var(--cui-display-s-font-size); + line-height: var(--cui-display-s-line-height); + letter-spacing: var(--cui-letter-spacing); } diff --git a/packages/circuit-ui/components/Field/Field.module.css b/packages/circuit-ui/components/Field/Field.module.css index 058cf3f34b..c5b3fce0ed 100644 --- a/packages/circuit-ui/components/Field/Field.module.css +++ b/packages/circuit-ui/components/Field/Field.module.css @@ -8,8 +8,8 @@ .label, .legend { display: block; - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); } .label-text { @@ -33,8 +33,8 @@ .description { display: block; - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); color: var(--cui-fg-subtle); } @@ -46,8 +46,8 @@ .validation-hint { display: flex; margin-top: var(--cui-spacings-bit); - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); color: var(--cui-fg-subtle); transition: color var(--cui-transitions-default); } @@ -91,7 +91,7 @@ width: var(--cui-icon-sizes-kilo); height: var(--cui-icon-sizes-kilo); margin-top: calc( - (var(--cui-typography-body-s-line-height) - var(--cui-icon-sizes-kilo)) / 2 + (var(--cui-body-s-line-height) - var(--cui-icon-sizes-kilo)) / 2 ); margin-right: var(--cui-spacings-bit); } diff --git a/packages/circuit-ui/components/Headline/Headline.module.css b/packages/circuit-ui/components/Headline/Headline.module.css index a890f773bc..c6777b1dcd 100644 --- a/packages/circuit-ui/components/Headline/Headline.module.css +++ b/packages/circuit-ui/components/Headline/Headline.module.css @@ -7,19 +7,19 @@ /* Sizes */ .l { - font-size: var(--cui-typography-headline-l-font-size); - line-height: var(--cui-typography-headline-l-line-height); - letter-spacing: var(--cui-typography-headline-l-letter-spacing); + font-size: var(--cui-headline-l-font-size); + line-height: var(--cui-headline-l-line-height); + letter-spacing: var(--cui-letter-spacing); } .m { - font-size: var(--cui-typography-headline-m-font-size); - line-height: var(--cui-typography-headline-m-line-height); - letter-spacing: var(--cui-typography-headline-m-letter-spacing); + font-size: var(--cui-headline-m-font-size); + line-height: var(--cui-headline-m-line-height); + letter-spacing: var(--cui-letter-spacing); } .s { - font-size: var(--cui-typography-headline-s-font-size); - line-height: var(--cui-typography-headline-s-line-height); - letter-spacing: var(--cui-typography-headline-s-letter-spacing); + font-size: var(--cui-headline-s-font-size); + line-height: var(--cui-headline-s-line-height); + letter-spacing: var(--cui-letter-spacing); } diff --git a/packages/circuit-ui/components/Input/Input.module.css b/packages/circuit-ui/components/Input/Input.module.css index fe7abf9c29..4358f4317b 100644 --- a/packages/circuit-ui/components/Input/Input.module.css +++ b/packages/circuit-ui/components/Input/Input.module.css @@ -6,8 +6,8 @@ width: 100%; padding: var(--cui-spacings-kilo) var(--cui-spacings-mega); margin: 0; - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); appearance: none; background-color: var(--cui-bg-normal); border: none; diff --git a/packages/circuit-ui/components/List/List.mdx b/packages/circuit-ui/components/List/List.mdx index 54d4f3ca3e..b34b56bb73 100644 --- a/packages/circuit-ui/components/List/List.mdx +++ b/packages/circuit-ui/components/List/List.mdx @@ -25,6 +25,7 @@ The List component comes in two variants, `ordered` or `unordered`. ### Sizes +[//]: # (TODO Body no longer comes in two sizes) The List component has two available sizes, `one` and `two`, matching the [`Body` component](Typography/Body)'s sizes. For consistency, the list's size should be the same as the surrounding content's size. diff --git a/packages/circuit-ui/components/List/List.module.css b/packages/circuit-ui/components/List/List.module.css index 1334d18211..84c9318113 100644 --- a/packages/circuit-ui/components/List/List.module.css +++ b/packages/circuit-ui/components/List/List.module.css @@ -6,8 +6,8 @@ .one { padding-left: var(--cui-spacings-kilo); - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); } .one li { @@ -32,8 +32,8 @@ .two { padding-left: var(--cui-spacings-kilo); - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); } .two li { diff --git a/packages/circuit-ui/components/ListItem/ListItem.module.css b/packages/circuit-ui/components/ListItem/ListItem.module.css index 6637057a64..2d566f2b32 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.module.css +++ b/packages/circuit-ui/components/ListItem/ListItem.module.css @@ -118,7 +118,7 @@ button.base:active { display: flex; align-items: center; max-width: 100%; - min-height: var(--cui-typography-body-m-line-height); + min-height: var(--cui-body-m-line-height); } .trailing { @@ -150,6 +150,6 @@ button.base:active { } .navigation .trailing .details { - height: var(--cui-typography-body-m-line-height); + height: var(--cui-body-m-line-height); margin-right: calc(var(--cui-spacings-mega) + var(--cui-spacings-bit)); } diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css index c44255cef7..171da566a2 100644 --- a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css +++ b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css @@ -35,27 +35,27 @@ .base .headline { margin-bottom: var(--cui-spacings-byte); - font-size: var(--cui-typography-headline-s-font-size); - line-height: var(--cui-typography-headline-s-line-height); + font-size: var(--cui-headline-s-font-size); + line-height: var(--cui-headline-s-line-height); } @media (min-width: 768px) { .base .headline { - font-size: var(--cui-typography-headline-m-font-size); - line-height: var(--cui-typography-headline-m-line-height); + font-size: var(--cui-headline-m-font-size); + line-height: var(--cui-headline-m-line-height); } } .base .body { margin-bottom: var(--cui-spacings-byte); - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); } @media (min-width: 768px) { .base .body { - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); } } diff --git a/packages/circuit-ui/components/Numeral/Numeral.module.css b/packages/circuit-ui/components/Numeral/Numeral.module.css index 7f4b54a4f0..3c0ca946c2 100644 --- a/packages/circuit-ui/components/Numeral/Numeral.module.css +++ b/packages/circuit-ui/components/Numeral/Numeral.module.css @@ -5,21 +5,21 @@ /* Sizes */ .l { - font-size: var(--cui-typography-numeral-l-font-size); - line-height: var(--cui-typography-numeral-l-line-height); - letter-spacing: var(--cui-typography-numeral-l-letter-spacing); + font-size: var(--cui-numeral-l-font-size); + line-height: var(--cui-numeral-l-line-height); + letter-spacing: var(--cui-letter-spacing); } .m { - font-size: var(--cui-typography-numeral-m-font-size); - line-height: var(--cui-typography-numeral-m-line-height); - letter-spacing: var(--cui-typography-numeral-m-letter-spacing); + font-size: var(--cui-numeral-m-font-size); + line-height: var(--cui-numeral-m-line-height); + letter-spacing: var(--cui-letter-spacing); } .s { - font-size: var(--cui-typography-numeral-s-font-size); - line-height: var(--cui-typography-numeral-s-line-height); - letter-spacing: var(--cui-typography-numeral-s-letter-spacing); + font-size: var(--cui-numeral-s-font-size); + line-height: var(--cui-numeral-s-line-height); + letter-spacing: var(--cui-letter-spacing); } /* Weights */ diff --git a/packages/circuit-ui/components/Popover/Popover.module.css b/packages/circuit-ui/components/Popover/Popover.module.css index 72b7ba7ccc..44540369e1 100644 --- a/packages/circuit-ui/components/Popover/Popover.module.css +++ b/packages/circuit-ui/components/Popover/Popover.module.css @@ -3,8 +3,8 @@ align-items: center; justify-content: flex-start; width: 100%; - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); text-align: left; background: var(--cui-bg-elevated); } diff --git a/packages/circuit-ui/components/ProgressBar/ProgressBar.module.css b/packages/circuit-ui/components/ProgressBar/ProgressBar.module.css index 5a81904c90..5694da425d 100644 --- a/packages/circuit-ui/components/ProgressBar/ProgressBar.module.css +++ b/packages/circuit-ui/components/ProgressBar/ProgressBar.module.css @@ -90,6 +90,6 @@ .label { flex-shrink: 0; margin-left: var(--cui-spacings-byte); - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); } diff --git a/packages/circuit-ui/components/RadioButton/RadioButton.module.css b/packages/circuit-ui/components/RadioButton/RadioButton.module.css index 60fd3c5ef5..9f396fccc8 100644 --- a/packages/circuit-ui/components/RadioButton/RadioButton.module.css +++ b/packages/circuit-ui/components/RadioButton/RadioButton.module.css @@ -8,7 +8,7 @@ .label::before { position: absolute; - top: calc(var(--cui-typography-body-m-line-height) / 2); + top: calc(var(--cui-body-m-line-height) / 2); left: 0; box-sizing: border-box; display: block; @@ -27,7 +27,7 @@ .label::after { position: absolute; - top: calc(var(--cui-typography-body-m-line-height) / 2); + top: calc(var(--cui-body-m-line-height) / 2); left: var(--cui-spacings-bit); box-sizing: border-box; display: block; diff --git a/packages/circuit-ui/components/Select/Select.module.css b/packages/circuit-ui/components/Select/Select.module.css index 59c84b6edf..4ec4c92407 100644 --- a/packages/circuit-ui/components/Select/Select.module.css +++ b/packages/circuit-ui/components/Select/Select.module.css @@ -14,8 +14,8 @@ padding-left: var(--cui-spacings-mega); margin: 0; overflow-x: hidden; - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); color: var(--cui-fg-normal); text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.module.css b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.module.css index 998f552b96..18422e03f1 100644 --- a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.module.css +++ b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.module.css @@ -84,8 +84,8 @@ @media (max-width: 1279px) { .label { - font-size: var(--cui-typography-headline-m-font-size); - line-height: var(--cui-typography-headline-m-line-height); + font-size: var(--cui-headline-m-font-size); + line-height: var(--cui-headline-m-line-height); } } diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx b/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx index ebf2627ab0..59174acf03 100644 --- a/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx +++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx @@ -18,4 +18,4 @@ The SubHeadline component helps break up larger related chunks of content in the ## Accessibility -All accessibility guidelines for the [Headline component](Typography/Headline) also apply to the SubHeadline component. +All accessibility guidelines for the [Headline component](Typography/Headline) also apply to the [Display component](Typography/Display) component. diff --git a/packages/circuit-ui/components/Table/components/TableCell/TableCell.module.css b/packages/circuit-ui/components/Table/components/TableCell/TableCell.module.css index 5dc46c9b08..35d13e52de 100644 --- a/packages/circuit-ui/components/Table/components/TableCell/TableCell.module.css +++ b/packages/circuit-ui/components/Table/components/TableCell/TableCell.module.css @@ -28,8 +28,8 @@ .condensed { padding: var(--cui-spacings-kilo) var(--cui-spacings-mega) var(--cui-spacings-kilo) var(--cui-spacings-giga); - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); } .presentation { @@ -47,17 +47,17 @@ .presentation.header { padding: var(--cui-spacings-byte) var(--cui-spacings-giga); - font-size: var(--cui-typography-body-s-font-size); + font-size: var(--cui-body-s-font-size); font-weight: var(--cui-font-weight-bold); - line-height: var(--cui-typography-body-s-line-height); + line-height: var(--cui-body-s-line-height); white-space: nowrap; } .condensed.presentation { padding: var(--cui-spacings-kilo) var(--cui-spacings-mega) var(--cui-spacings-kilo) var(--cui-spacings-giga); - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); } .condensed.presentation.header { diff --git a/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css b/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css index 6fbce52f76..bdda2d92ed 100644 --- a/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css +++ b/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css @@ -9,9 +9,9 @@ .base[scope="col"] { padding: var(--cui-spacings-byte) var(--cui-spacings-giga); - font-size: var(--cui-typography-body-s-font-size); + font-size: var(--cui-body-s-font-size); font-weight: var(--cui-font-weight-bold); - line-height: var(--cui-typography-body-s-line-height); + line-height: var(--cui-body-s-line-height); color: var(--cui-fg-subtle); white-space: nowrap; vertical-align: middle; @@ -44,8 +44,8 @@ .condensed { padding: var(--cui-spacings-kilo) var(--cui-spacings-mega) var(--cui-spacings-kilo) var(--cui-spacings-giga); - font-size: var(--cui-typography-body-s-font-size); - line-height: var(--cui-typography-body-s-line-height); + font-size: var(--cui-body-s-font-size); + line-height: var(--cui-body-s-line-height); vertical-align: middle; } diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css b/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css index 63406bc225..23c574344c 100644 --- a/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css +++ b/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css @@ -6,8 +6,8 @@ float: left; height: 100%; padding: var(--cui-spacings-kilo) var(--cui-spacings-tera); - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); color: var(--cui-fg-subtle); text-decoration: none; white-space: nowrap; diff --git a/packages/circuit-ui/components/Tag/Tag.module.css b/packages/circuit-ui/components/Tag/Tag.module.css index 445fb1c225..32176f2809 100644 --- a/packages/circuit-ui/components/Tag/Tag.module.css +++ b/packages/circuit-ui/components/Tag/Tag.module.css @@ -10,8 +10,8 @@ align-items: center; padding: calc(var(--cui-spacings-bit) - 1px) var(--cui-spacings-kilo); margin: 0; - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); word-break: break-word; cursor: default; background-color: var(--cui-bg-normal); diff --git a/packages/circuit-ui/components/Toggle/Toggle.module.css b/packages/circuit-ui/components/Toggle/Toggle.module.css index 5873d1a79e..92b85b6479 100644 --- a/packages/circuit-ui/components/Toggle/Toggle.module.css +++ b/packages/circuit-ui/components/Toggle/Toggle.module.css @@ -96,9 +96,9 @@ .label { display: block; margin-left: var(--cui-spacings-kilo); - font-size: var(--cui-typography-body-m-font-size); + font-size: var(--cui-body-m-font-size); font-weight: var(--cui-font-weight-regular); - line-height: var(--cui-typography-body-m-line-height); + line-height: var(--cui-body-m-line-height); cursor: pointer; } diff --git a/packages/circuit-ui/components/Tooltip/Tooltip.module.css b/packages/circuit-ui/components/Tooltip/Tooltip.module.css index 420efc0083..ecd2dcafff 100644 --- a/packages/circuit-ui/components/Tooltip/Tooltip.module.css +++ b/packages/circuit-ui/components/Tooltip/Tooltip.module.css @@ -73,9 +73,9 @@ .content { padding: var(--cui-spacings-byte) var(--cui-spacings-kilo); - font-size: var(--cui-typography-body-s-font-size); + font-size: var(--cui-body-s-font-size); font-weight: var(--cui-font-weight-regular); - line-height: var(--cui-typography-body-s-line-height); + line-height: var(--cui-body-s-line-height); color: var(--cui-fg-normal); background-color: var(--cui-bg-elevated); border: var(--cui-border-width-kilo) solid var(--cui-border-subtle); diff --git a/packages/circuit-ui/styles/base.css b/packages/circuit-ui/styles/base.css index 6492bcff1a..1182aea08c 100644 --- a/packages/circuit-ui/styles/base.css +++ b/packages/circuit-ui/styles/base.css @@ -156,8 +156,8 @@ html { } body { - font-size: var(--cui-typography-body-m-font-size); - line-height: var(--cui-typography-body-m-line-height); + font-size: var(--cui-body-m-font-size); + line-height: var(--cui-body-m-line-height); color: var(--cui-fg-normal); background-color: var(--cui-bg-normal); } diff --git a/packages/design-tokens/themes/schema.ts b/packages/design-tokens/themes/schema.ts index bf08483dac..2329fcb55b 100644 --- a/packages/design-tokens/themes/schema.ts +++ b/packages/design-tokens/themes/schema.ts @@ -205,218 +205,204 @@ export const schema = [ { name: '--cui-transitions-default', type: 'duration' }, { name: '--cui-transitions-slow', type: 'duration' }, /* Typography */ - { name: '--cui-typography-display-l-font-size', type: 'dimension' }, - { name: '--cui-typography-display-l-line-height', type: 'dimension' }, - { name: '--cui-typography-display-l-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-display-m-font-size', type: 'dimension' }, - { name: '--cui-typography-display-m-line-height', type: 'dimension' }, - { name: '--cui-typography-display-m-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-display-s-font-size', type: 'dimension' }, - { name: '--cui-typography-display-s-line-height', type: 'dimension' }, - { name: '--cui-typography-display-s-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-headline-l-font-size', type: 'dimension' }, - { name: '--cui-typography-headline-l-line-height', type: 'dimension' }, - { name: '--cui-typography-headline-l-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-headline-m-font-size', type: 'dimension' }, - { name: '--cui-typography-headline-m-line-height', type: 'dimension' }, - { name: '--cui-typography-headline-m-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-headline-s-font-size', type: 'dimension' }, - { name: '--cui-typography-headline-s-line-height', type: 'dimension' }, - { name: '--cui-typography-headline-s-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-body-l-font-size', type: 'dimension' }, - { name: '--cui-typography-body-l-line-height', type: 'dimension' }, - { name: '--cui-typography-body-l-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-body-m-font-size', type: 'dimension' }, - { name: '--cui-typography-body-m-line-height', type: 'dimension' }, - { name: '--cui-typography-body-m-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-body-s-font-size', type: 'dimension' }, - { name: '--cui-typography-body-s-line-height', type: 'dimension' }, - { name: '--cui-typography-body-s-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-compact-l-font-size', type: 'dimension' }, - { name: '--cui-typography-compact-l-line-height', type: 'dimension' }, - { name: '--cui-typography-compact-l-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-compact-m-font-size', type: 'dimension' }, - { name: '--cui-typography-compact-m-line-height', type: 'dimension' }, - { name: '--cui-typography-compact-m-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-compact-s-font-size', type: 'dimension' }, - { name: '--cui-typography-compact-s-line-height', type: 'dimension' }, - { name: '--cui-typography-compact-s-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-numeral-l-font-size', type: 'dimension' }, - { name: '--cui-typography-numeral-l-line-height', type: 'dimension' }, - { name: '--cui-typography-numeral-l-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-numeral-m-font-size', type: 'dimension' }, - { name: '--cui-typography-numeral-m-line-height', type: 'dimension' }, - { name: '--cui-typography-numeral-m-letter-spacing', type: 'dimension' }, - { name: '--cui-typography-numeral-s-font-size', type: 'dimension' }, - { name: '--cui-typography-numeral-s-line-height', type: 'dimension' }, - { name: '--cui-typography-numeral-s-letter-spacing', type: 'dimension' }, + { name: '--cui-display-l-font-size', type: 'dimension' }, + { name: '--cui-display-l-line-height', type: 'dimension' }, + { name: '--cui-display-m-font-size', type: 'dimension' }, + { name: '--cui-display-m-line-height', type: 'dimension' }, + { name: '--cui-display-s-font-size', type: 'dimension' }, + { name: '--cui-display-s-line-height', type: 'dimension' }, + { name: '--cui-headline-l-font-size', type: 'dimension' }, + { name: '--cui-headline-l-line-height', type: 'dimension' }, + { name: '--cui-headline-m-font-size', type: 'dimension' }, + { name: '--cui-headline-m-line-height', type: 'dimension' }, + { name: '--cui-headline-s-font-size', type: 'dimension' }, + { name: '--cui-headline-s-line-height', type: 'dimension' }, + { name: '--cui-body-l-font-size', type: 'dimension' }, + { name: '--cui-body-l-line-height', type: 'dimension' }, + { name: '--cui-body-m-font-size', type: 'dimension' }, + { name: '--cui-body-m-line-height', type: 'dimension' }, + { name: '--cui-body-s-font-size', type: 'dimension' }, + { name: '--cui-body-s-line-height', type: 'dimension' }, + { name: '--cui-compact-l-font-size', type: 'dimension' }, + { name: '--cui-compact-l-line-height', type: 'dimension' }, + { name: '--cui-compact-m-font-size', type: 'dimension' }, + { name: '--cui-compact-m-line-height', type: 'dimension' }, + { name: '--cui-compact-s-font-size', type: 'dimension' }, + { name: '--cui-compact-s-line-height', type: 'dimension' }, + { name: '--cui-numeral-l-font-size', type: 'dimension' }, + { name: '--cui-numeral-l-line-height', type: 'dimension' }, + { name: '--cui-numeral-m-font-size', type: 'dimension' }, + { name: '--cui-numeral-m-line-height', type: 'dimension' }, + { name: '--cui-numeral-s-font-size', type: 'dimension' }, + { name: '--cui-numeral-s-line-height', type: 'dimension' }, + { name: '--cui-letter-spacing', type: 'dimension' }, /* eslint-disable @sumup-oss/circuit-ui/no-deprecated-custom-properties */ { name: '--cui-typography-headline-one-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-l-font-size', + replacement: '--cui-headline-l-font-size', }, }, { name: '--cui-typography-headline-one-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-l-line-height', + replacement: '--cui-headline-l-line-height', }, }, { name: '--cui-typography-headline-two-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-m-font-size', + replacement: '--cui-headline-m-font-size', }, }, { name: '--cui-typography-headline-two-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-m-line-height', + replacement: '--cui-headline-m-line-height', }, }, { name: '--cui-typography-headline-three-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-m-font-size', + replacement: '--cui-headline-m-font-size', }, }, { name: '--cui-typography-headline-three-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-m-line-height', + replacement: '--cui-headline-m-line-height', }, }, { name: '--cui-typography-headline-four-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-s-font-size', + replacement: '--cui-headline-s-font-size', }, }, { name: '--cui-typography-headline-four-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-s-line-height', + replacement: '--cui-headline-s-line-height', }, }, { name: '--cui-typography-title-one-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-display-l-font-size', + replacement: '--cui-display-l-font-size', }, }, { name: '--cui-typography-title-one-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-display-l-line-height', + replacement: '--cui-display-l-line-height', }, }, { name: '--cui-typography-title-two-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-display-m-font-size', + replacement: '--cui-display-m-font-size', }, }, { name: '--cui-typography-title-two-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-display-m-line-height', + replacement: '--cui-display-m-line-height', }, }, { name: '--cui-typography-title-three-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-display-m-font-size', + replacement: '--cui-display-m-font-size', }, }, { name: '--cui-typography-title-three-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-display-m-line-height', + replacement: '--cui-display-m-line-height', }, }, { name: '--cui-typography-title-four-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-display-s-font-size', + replacement: '--cui-display-s-font-size', }, }, { name: '--cui-typography-title-four-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-display-s-line-height', + replacement: '--cui-display-s-line-height', }, }, { name: '--cui-typography-sub-headline-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-s-font-size', + replacement: '--cui-headline-s-font-size', }, }, { name: '--cui-typography-sub-headline-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-headline-s-line-height', + replacement: '--cui-headline-s-line-height', }, }, { name: '--cui-typography-body-one-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-body-m-font-size', + replacement: '--cui-body-m-font-size', }, }, { name: '--cui-typography-body-one-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-body-m-line-height', + replacement: '--cui-body-m-line-height', }, }, { name: '--cui-typography-body-two-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-body-s-font-size', + replacement: '--cui-body-s-font-size', }, }, { name: '--cui-typography-body-two-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-body-s-line-height', + replacement: '--cui-body-s-line-height', }, }, { name: '--cui-typography-body-large-font-size', type: 'dimension', deprecation: { - replacement: '--cui-typography-body-l-font-size', + replacement: '--cui-body-l-font-size', }, }, { name: '--cui-typography-body-large-line-height', type: 'dimension', deprecation: { - replacement: '--cui-typography-body-l-line-height', + replacement: '--cui-body-l-line-height', }, }, /* eslint-disable @sumup-oss/circuit-ui/no-deprecated-custom-properties */ diff --git a/packages/design-tokens/themes/shared.ts b/packages/design-tokens/themes/shared.ts index 70c6a20b50..323f957355 100644 --- a/packages/design-tokens/themes/shared.ts +++ b/packages/design-tokens/themes/shared.ts @@ -73,14 +73,20 @@ export const shared = [ /* Font weights */ { name: '--cui-font-weight-regular', - value: '400', + value: '375', type: 'fontWeight', }, { name: '--cui-font-weight-bold', - value: '700', + value: '650', type: 'fontWeight', }, + /* Letter spacing */ + { + name: '--cui-letter-spacing', + value: '-0.01375rem', + type: 'dimension', + }, /* Icon sizes */ { name: '--cui-icon-sizes-kilo', @@ -161,228 +167,153 @@ export const shared = [ }, /* Typography */ { - name: '--cui-typography-display-l-font-size', + name: '--cui-display-l-font-size', value: '4rem', type: 'dimension', }, { - name: '--cui-typography-display-l-line-height', + name: '--cui-display-l-line-height', value: '4.5rem', type: 'dimension', }, { - name: '--cui-typography-display-l-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-display-m-font-size', + name: '--cui-display-m-font-size', value: '3rem', type: 'dimension', }, { - name: '--cui-typography-display-m-line-height', + name: '--cui-display-m-line-height', value: '3.5rem', type: 'dimension', }, { - name: '--cui-typography-display-m-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-display-s-font-size', + name: '--cui-display-s-font-size', value: '2.5rem', type: 'dimension', }, { - name: '--cui-typography-display-s-line-height', + name: '--cui-display-s-line-height', value: '2.875rem', type: 'dimension', }, { - name: '--cui-typography-display-s-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-headline-l-font-size', + name: '--cui-headline-l-font-size', value: '2rem', type: 'dimension', }, { - name: '--cui-typography-headline-l-line-height', + name: '--cui-headline-l-line-height', value: '2.25rem', type: 'dimension', }, { - name: '--cui-typography-headline-l-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-headline-m-font-size', + name: '--cui-headline-m-font-size', value: '1.375rem', type: 'dimension', }, { - name: '--cui-typography-headline-m-line-height', + name: '--cui-headline-m-line-height', value: '1.625rem', type: 'dimension', }, { - name: '--cui-typography-headline-m-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-headline-s-font-size', + name: '--cui-headline-s-font-size', value: '1.125rem', type: 'dimension', }, { - name: '--cui-typography-headline-s-line-height', + name: '--cui-headline-s-line-height', value: '1.375rem', type: 'dimension', }, { - name: '--cui-typography-headline-s-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-body-l-font-size', + name: '--cui-body-l-font-size', value: '1.25rem', type: 'dimension', }, { - name: '--cui-typography-body-l-line-height', + name: '--cui-body-l-line-height', value: '1.5rem', type: 'dimension', }, { - name: '--cui-typography-body-l-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-body-m-font-size', + name: '--cui-body-m-font-size', value: '1rem', type: 'dimension', }, { - name: '--cui-typography-body-m-line-height', + name: '--cui-body-m-line-height', value: '1.375rem', type: 'dimension', }, { - name: '--cui-typography-body-m-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-body-s-font-size', + name: '--cui-body-s-font-size', value: '0.875rem', type: 'dimension', }, { - name: '--cui-typography-body-s-line-height', - value: '1.24rem', - type: 'dimension', - }, - { - name: '--cui-typography-body-s-letter-spacing', - value: '0px', + name: '--cui-body-s-line-height', + value: '1.25rem', type: 'dimension', }, { - name: '--cui-typography-compact-l-font-size', + name: '--cui-compact-l-font-size', value: '1.125rem', type: 'dimension', }, { - name: '--cui-typography-compact-l-line-height', + name: '--cui-compact-l-line-height', value: '1.5rem', type: 'dimension', }, { - name: '--cui-typography-compact-l-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-compact-m-font-size', + name: '--cui-compact-m-font-size', value: '0.9375rem', type: 'dimension', }, { - name: '--cui-typography-compact-m-line-height', + name: '--cui-compact-m-line-height', value: '1.0625rem', type: 'dimension', }, { - name: '--cui-typography-compact-m-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-compact-s-font-size', + name: '--cui-compact-s-font-size', value: '0.8125rem', type: 'dimension', }, { - name: '--cui-typography-compact-s-line-height', + name: '--cui-compact-s-line-height', value: '0.9375rem', type: 'dimension', }, { - name: '--cui-typography-compact-s-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-numeral-l-font-size', + name: '--cui-numeral-l-font-size', value: '3rem', type: 'dimension', }, { - name: '--cui-typography-numeral-l-line-height', + name: '--cui-numeral-l-line-height', value: '3.375rem', type: 'dimension', }, { - name: '--cui-typography-numeral-l-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-numeral-m-font-size', + name: '--cui-numeral-m-font-size', value: '1.5rem', type: 'dimension', }, { - name: '--cui-typography-numeral-m-line-height', + name: '--cui-numeral-m-line-height', value: '1.75rem', type: 'dimension', }, { - name: '--cui-typography-numeral-m-letter-spacing', - value: '0px', - type: 'dimension', - }, - { - name: '--cui-typography-numeral-s-font-size', - value: '1rem', - type: 'dimension', - }, - { - name: '--cui-typography-numeral-s-line-height', + name: '--cui-numeral-s-font-size', value: '1rem', type: 'dimension', }, { - name: '--cui-typography-numeral-s-letter-spacing', - value: '0px', + name: '--cui-numeral-s-line-height', + value: '1.375rem', type: 'dimension', }, /* eslint-disable @sumup-oss/circuit-ui/no-deprecated-custom-properties */ diff --git a/packages/eslint-plugin-circuit-ui/no-deprecated-custom-properties/index.spec.ts b/packages/eslint-plugin-circuit-ui/no-deprecated-custom-properties/index.spec.ts index e154e65adc..85c3e1210d 100644 --- a/packages/eslint-plugin-circuit-ui/no-deprecated-custom-properties/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/no-deprecated-custom-properties/index.spec.ts @@ -40,8 +40,8 @@ ruleTester.run( name: 'custom properties in a JS object', code: ` const typography = { - fontSize: "var(--cui-typography-headline-l-font-size)", - lineHeight: "var(--cui-typography-headline-l-line-height)", + fontSize: "var(--cui-headline-l-font-size)", + lineHeight: "var(--cui-headline-l-line-height)", } `, }, @@ -49,8 +49,8 @@ ruleTester.run( name: 'custom properties in a tagged template literal', code: ` const styles = css\` - font-size: var(--cui-typography-headline-l-font-size); - line-height: var(--cui-typography-headline-l-line-height); + font-size: var(--cui-headline-l-font-size); + line-height: var(--cui-headline-l-line-height); \`; `, }, @@ -60,7 +60,7 @@ ruleTester.run( function Component() { return (

Success

diff --git a/packages/stylelint-plugin-circuit-ui/no-deprecated-custom-properties/index.spec.ts b/packages/stylelint-plugin-circuit-ui/no-deprecated-custom-properties/index.spec.ts index 146bd41a8d..e888361fa1 100644 --- a/packages/stylelint-plugin-circuit-ui/no-deprecated-custom-properties/index.spec.ts +++ b/packages/stylelint-plugin-circuit-ui/no-deprecated-custom-properties/index.spec.ts @@ -29,13 +29,13 @@ testRule({ accept: [ { code: `.class { - font-size: var(--cui-typography-headline-l-font-size); + font-size: var(--cui-headline-l-font-size); }`, description: 'Allow valid custom properties', }, { code: `.class { - margin-bottom: calc(var(--cui-spacings-bit) - var(--cui-typography-headline-l-line-height)); + margin-bottom: calc(var(--cui-spacings-bit) - var(--cui-headline-l-line-height)); }`, description: 'Allow valid custom properties in complex style rules', }, @@ -47,12 +47,12 @@ testRule({ font-size: var(--cui-typography-headline-one-font-size); }`, fixed: `.class { - font-size: var(--cui-typography-headline-l-font-size); + font-size: var(--cui-headline-l-font-size); }`, description: 'Disallow deprecated custom properties', message: messages.deprecated( '--cui-typography-headline-one-font-size', - '--cui-typography-headline-l-font-size', + '--cui-headline-l-font-size', ), line: 2, column: 9, @@ -64,13 +64,13 @@ testRule({ margin-bottom: calc(var(--cui-spacings-bit) - var(--cui-typography-headline-one-line-height)); }`, fixed: `.class { - margin-bottom: calc(var(--cui-spacings-bit) - var(--cui-typography-headline-l-line-height)); + margin-bottom: calc(var(--cui-spacings-bit) - var(--cui-headline-l-line-height)); }`, description: 'Disallow deprecated custom properties in complex style rules', message: messages.deprecated( '--cui-typography-headline-one-line-height', - '--cui-typography-headline-l-line-height', + '--cui-headline-l-line-height', ), line: 2, column: 9, @@ -82,7 +82,7 @@ testRule({ margin-bottom: calc(var(--cui-spacings-bit) - var(--cui-typography-headline-one-line-height) - var(--cui-typography-headline-two-line-height)); }`, fixed: `.class { - margin-bottom: calc(var(--cui-spacings-bit) - var(--cui-typography-headline-l-line-height) - var(--cui-typography-headline-m-line-height)); + margin-bottom: calc(var(--cui-spacings-bit) - var(--cui-headline-l-line-height) - var(--cui-headline-m-line-height)); }`, description: 'Disallow multiple deprecated custom properties in complex style rules', @@ -90,7 +90,7 @@ testRule({ { message: messages.deprecated( '--cui-typography-headline-one-line-height', - '--cui-typography-headline-l-line-height', + '--cui-headline-l-line-height', ), line: 2, column: 9, @@ -100,7 +100,7 @@ testRule({ { message: messages.deprecated( '--cui-typography-headline-two-line-height', - '--cui-typography-headline-m-line-height', + '--cui-headline-m-line-height', ), line: 2, column: 9,