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.
sumup-oss · Oct 13, 2024 · c61d10c · c61d10c
1 parent 00727aa
commit c61d10c
Show file tree

Hide file tree

Showing 36 changed files with 251 additions and 312 deletions.
diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx
@@ -42,8 +42,20 @@ type PreviewProps = { name: CustomPropertyName };
 type PreviewComponent = ComponentType<PreviewProps>;
 
 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: (
           <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"

diff --git a/docs/features/1-theme.mdx b/docs/features/1-theme.mdx
@@ -61,7 +61,7 @@ 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 CSS typography 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} />
 
@@ -73,7 +73,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
 

diff --git 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
@@ -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
@@ -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
@@ -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;

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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));
 }