chore(design-tokens): DSYS-819 | update typography tokens (#2717)

* 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.

* chore: changeset

* add new sizes for the list component

* use correct letter-spacing value

* add new semibold font-weight token

* missing classes

.changeset/dry-melons-bake.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/design-tokens": minor
+---
+
+Updated several typography token values and replaced the component-specific letter spacing tokens with a unified one.

.changeset/lazy-icons-beg.md

@@ -0,0 +1,8 @@
+---
+"@sumup-oss/stylelint-plugin-circuit-ui": minor
+"@sumup-oss/eslint-plugin-circuit-ui": minor
+"@sumup-oss/circuit-ui": minor
+"@sumup-oss/design-tokens": minor
+---
+
+Updated new typography design tokens names by removing the `-typography` infix.

.changeset/shiny-pumpkins-jog.md

@@ -0,0 +1,6 @@
+---
+"@sumup-oss/eslint-plugin-circuit-ui": minor
+"@sumup-oss/circuit-ui": minor
+---
+
+Introduced new sizes to the List component and deprecated old sizes. Updated `no-renamed-props` ESlint rule.

.storybook/components/Theme.tsx

@@ -41,9 +41,12 @@ type CustomProperties = CustomProperty[];
 type PreviewProps = { name: CustomPropertyName };
 type PreviewComponent = ComponentType<PreviewProps>;
 
-function filterCustomProperties(namespace: string, type?: string) {
+function filterCustomProperties(namespace: string | string[], type?: string) {
   return schema.filter((token) => {
-    const isNamespace = token.name.startsWith(`--cui-${namespace}`);
+    const isNamespace =
+      typeof namespace === 'string'
+        ? token.name.startsWith(`--cui-${namespace}`)
+        : namespace.some((ns) => token.name.startsWith(`--cui-${ns}`));
     const isType = type ? token.type === type : true;
     return isNamespace && isType;
   });
@@ -79,8 +82,17 @@ function getRows(
       {
         children: (
           <div style={{ display: 'flex' }}>
-            <code style={{ whiteSpace: 'nowrap' }}>{name}</code>
-            <CopyButton name={name} />
+            <code
+              style={{
+                whiteSpace: 'nowrap',
+                maxWidth: '320px',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+              }}
+            >
+              {name}
+            </code>
+            {!deprecation && <CopyButton name={name} />}
             {deprecation && (
               <Tooltip
                 type="description"
@@ -115,7 +127,7 @@ function getRows(
 }
 
 interface CustomPropertiesTableProps {
-  namespace: string;
+  namespace: string | string[];
   preview?: PreviewComponent;
   type?: string;
 }

docs/features/1-theme.mdx

@@ -1,7 +1,6 @@
 import {
   Intro,
   Meta,
-  Preview,
   MediaQueriesTable,
   CustomPropertiesTable,
   Color,
@@ -61,9 +60,19 @@ Use spacings for gutters, margins, and paddings. Don't use it for border width,
 
 ## Typography
 
-Avoid using the `var(--cui-typography-*)` CSS custom properties directly in your styles. Instead, use the typography components [`Display`](Typography/Display/Docs), [`Headline`](Typography/Headline/Docs), and [`Body`](Typography/Body/Docs).
+Avoid using the typography CSS custom properties directly in your styles. Instead, use the typography components [`Display`](Typography/Display/Docs), [`Headline`](Typography/Headline/Docs), [`Body`](Typography/Body/Docs) and [`Numeral`](Typography/Numeral/Docs).
 
-<CustomPropertiesTable namespace="typography" preview={Typography} />
+<CustomPropertiesTable
+  namespace={[
+    'body',
+    'display',
+    'headline',
+    'compact',
+    'numeral',
+    'typography',
+  ]}
+  preview={Typography}
+/>
 
 ## Font stack
 
@@ -73,7 +82,7 @@ Avoid using the `var(--cui-typography-*)` CSS custom properties directly in your
 
 <CustomPropertiesTable namespace="font-weight" preview={FontWeight} />
 
-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
 

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);

packages/circuit-ui/components/Body/Body.module.css

@@ -1,21 +1,22 @@
+.base {
+  letter-spacing: var(--cui-letter-spacing);
+}
+
 /* 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);
 }
 
 .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);
 }
 
 .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);
 }
 
 /* Weights */

packages/circuit-ui/components/Body/Body.tsx

@@ -89,7 +89,7 @@ function getHTMLElement(variant?: Variant): AsPropType {
   return 'p';
 }
 
-const deprecatedSizeMap: Record<string, string> = {
+export const deprecatedSizeMap: Record<string, string> = {
   'one': 'm',
   'two': 's',
 };
@@ -152,6 +152,7 @@ export const Body = forwardRef<HTMLParagraphElement, BodyProps>(
         {...props}
         ref={ref}
         className={clsx(
+          classes.base,
           classes[size],
           classes[weight],
           classes[color],

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);
 }
 

packages/circuit-ui/components/Calendar/Calendar.module.css

@@ -80,19 +80,19 @@
   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 {
   width: 100%;
   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;

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);
   }
 }

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;

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}

packages/circuit-ui/components/Compact/Compact.module.css

@@ -1,21 +1,22 @@
+.base {
+  letter-spacing: var(--cui-letter-spacing);
+}
+
 /* 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);
 }
 
 .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);
 }
 
 .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);
 }
 
 /* Weights */

packages/circuit-ui/components/Compact/Compact.tsx

@@ -69,6 +69,7 @@ export const Compact = forwardRef<HTMLParagraphElement, CompactProps>(
       {...props}
       ref={ref}
       className={clsx(
+        classes.base,
         classes[size],
         classes[weight],
         classes[color],

packages/circuit-ui/components/Display/Display.module.css

@@ -1,25 +1,22 @@
 .base {
   font-weight: var(--cui-font-weight-bold);
   color: var(--cui-fg-normal);
-  letter-spacing: -0.03em;
+  letter-spacing: var(--cui-letter-spacing);
 }
 
 /* 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);
 }
 
 .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);
 }
 
 .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);
 }

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);
 }

packages/circuit-ui/components/Headline/Headline.module.css

@@ -1,25 +1,22 @@
 .base {
   font-weight: var(--cui-font-weight-bold);
   color: var(--cui-fg-normal);
-  letter-spacing: -0.03em;
+  letter-spacing: var(--cui-letter-spacing);
 }
 
 /* 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);
 }
 
 .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);
 }
 
 .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);
 }