New typography (#2653)

* Update typography tokens with new values

* Add new sizes to Body

* Add new sizes to Headline

* Add new sizes to Title

* Deprecate the BodyLarge component

* Deprecate the SubHeadline component

* Replace SubHeadline component in SideNavigation

* Add explicit color to Body component

* Rename Title component to Display

* Add weight prop to Body component

* Add new typography tokens and deprecate old ones

* Add ESLint rule to flag deprecated custom properties

* Add Stylelint rule to flag deprecated custom properties

* Migrate deprecated custom properties

* Visualize typography tokens in the theme docs and show deprecation warnings

* Migrate deprecated custom properties in JS

* Apply suggestions from code review

* Add new typography size names to no-renamed-props ESLint rule

* Add changesets

* Deprecate Body variant prop

* Add Compact and Numeral components

* Add letter-spacing to typography components

* Map SubHeadline to Headline component

* Add color prop to Body, Compact and Numeral components

* Add migration for Body variants

* Fix copyright year

.changeset/brown-cobras-invite.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Added a new `weight` prop to the Body component. Choose between the `regular` and `bold` font weights.

.changeset/clever-pugs-sing.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Added a new Compact component for text in space-constraint contexts.

.changeset/dry-cheetahs-tap.md

@@ -0,0 +1,32 @@
+---
+'@sumup-oss/design-tokens': minor
+---
+
+Consolidated and renamed the `typography` tokens:
+
+| Old                                     | New                                 |
+| --------------------------------------- | ----------------------------------- |
+| `typography-title-one-font-size`        | `typography-display-l-font-size`    |
+| `typography-title-one-line-height`      | `typography-display-l-line-height`  |
+| `typography-title-two-font-size`        | `typography-display-m-font-size`    |
+| `typography-title-two-line-height`      | `typography-display-m-line-height`  |
+| `typography-title-three-font-size`      | `typography-display-m-font-size`    |
+| `typography-title-three-line-height`    | `typography-display-m-line-height`  |
+| `typography-title-four-font-size`       | `typography-display-s-font-size`    |
+| `typography-title-four-line-height`     | `typography-display-s-line-height`  |
+| `typography-headline-one-font-size`     | `typography-headline-l-font-size`   |
+| `typography-headline-one-line-height`   | `typography-headline-l-line-height` |
+| `typography-headline-two-font-size`     | `typography-headline-m-font-size`   |
+| `typography-headline-two-line-height`   | `typography-headline-m-line-height` |
+| `typography-headline-three-font-size`   | `typography-headline-m-font-size`   |
+| `typography-headline-three-line-height` | `typography-headline-m-line-height` |
+| `typography-headline-four-font-size`    | `typography-headline-s-font-size`   |
+| `typography-headline-four-line-height`  | `typography-headline-s-line-height` |
+| `typography-sub-headline-font-size`     | `typography-headline-s-font-size`   |
+| `typography-sub-headline-line-height`   | `typography-headline-s-line-height` |
+| `typography-body-large-font-size`       | `typography-body-l-font-size`       |
+| `typography-body-large-line-height`     | `typography-body-l-line-height`     |
+| `typography-body-one-font-size`         | `typography-body-m-font-size`       |
+| `typography-body-one-line-height`       | `typography-body-m-line-height`     |
+| `typography-body-two-font-size`         | `typography-body-s-font-size`       |
+| `typography-body-two-line-height`       | `typography-body-s-line-height`     |

.changeset/five-elephants-travel.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Added a new Numeral component for numeric content such as currency values.

.changeset/fluffy-lobsters-sin.md

@@ -0,0 +1,21 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Consolidated and renamed the sizes of the Display (formerly Title), Headline, and Body components:
+
+**Display & Headline**
+
+| Old   | New |
+| ----- | --- |
+| one   | l   |
+| two   | m   |
+| three | m   |
+| four  | s   |
+
+**Body**
+
+| Old | New |
+| --- | --- |
+| one | m   |
+| two | s   |

.changeset/friendly-falcons-turn.md

@@ -0,0 +1,6 @@
+---
+"@sumup-oss/stylelint-plugin-circuit-ui": minor
+"@sumup-oss/eslint-plugin-circuit-ui": minor
+---
+
+Added `circuit-ui/no-deprecated-custom-properties` rule to flag uses of deprecated custom properties.

.changeset/grumpy-coins-sip.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Deprecated the BodyLarge component. Use the Body component in size `l` instead.

.changeset/plenty-chicken-deny.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Added an explicit foreground color to the Body component (`fg-normal`) to better support localized dark mode. Previously, the component inherited its color from its parent.

.changeset/pretty-tigers-run.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/eslint-plugin-circuit-ui": major
+---
+
+Added a migration for the Display (formerly Title), Headline and Body components' `size` prop to the `circuit-ui/no-renamed-props` rule.

.changeset/rich-phones-attend.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Deprecated the SubHeadline component. Use the Headline component in size `s` instead.

.changeset/shiny-dragons-sip.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": major
+---
+
+Renamed the Title component to Display for consistency with other platforms.

.changeset/soft-drinks-accept.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Deprecated the Body component's `variant` prop. Use the new `color` prop instead of the `alert`, `confirm` and `subtle` variants. Use the new `weight` prop instead of the `highlight` variant. Use custom CSS for the `quote` variant.

.changeset/tiny-suits-smile.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Added a new `color` prop to the Body component. Choose any foreground color.

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = require('@sumup-oss/foundry/eslint')({
   },
   rules: {
     '@sumup-oss/circuit-ui/no-invalid-custom-properties': 'error',
+    '@sumup-oss/circuit-ui/no-deprecated-custom-properties': 'error',
     '@sumup-oss/circuit-ui/prefer-custom-properties': 'warn',
     'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },

.storybook/components/Icons.tsx

@@ -191,7 +191,7 @@ export function Icons() {
                           <Badge
                             {...props}
                             tabIndex={0}
-                            variant="danger"
+                            variant="warning"
                             className={classes.badge}
                           >
                             Deprecated

.storybook/components/Theme.tsx

@@ -20,32 +20,33 @@ import { light, schema } from '@sumup-oss/design-tokens';
 import { SumUpLogomark } from '@sumup-oss/icons';
 import {
   Anchor,
+  Badge,
   Table,
   ToastProvider,
   useNotificationToast,
   type TableHeaderCell,
   type TableRow,
 } from '../../packages/circuit-ui/index.js';
+import { Tooltip } from '../../packages/circuit-ui/experimental.js';
 
 type CustomPropertyName = `--cui-${string}`;
 type CustomPropertyValue = string;
-type CustomProperty = [CustomPropertyName, CustomPropertyValue];
+type CustomProperty = {
+  name: CustomPropertyName;
+  value: CustomPropertyValue;
+  deprecation?: { replacement: CustomPropertyName };
+};
 type CustomProperties = CustomProperty[];
 
 type PreviewProps = { name: CustomPropertyName };
 type PreviewComponent = ComponentType<PreviewProps>;
 
-function filterCustomProperties(
-  namespace: string,
-  type?: string,
-): CustomPropertyName[] {
-  return schema
-    .filter((token) => {
-      const isNamespace = token.name.startsWith(`--cui-${namespace}`);
-      const isType = type ? token.type === type : true;
-      return isNamespace && isType;
-    })
-    .map((token) => token.name);
+function filterCustomProperties(namespace: string, type?: string) {
+  return schema.filter((token) => {
+    const isNamespace = token.name.startsWith(`--cui-${namespace}`);
+    const isType = type ? token.type === type : true;
+    return isNamespace && isType;
+  });
 }
 
 function getCustomPropertyValue(name: CustomPropertyName): CustomPropertyValue {
@@ -73,13 +74,29 @@ function getRows(
   customProperties: CustomProperties,
   Preview?: PreviewComponent,
 ) {
-  return customProperties.map(([name, value]) => {
+  return customProperties.map(({ name, value, deprecation }) => {
     const row: TableRow = [
       {
         children: (
           <div style={{ display: 'flex' }}>
             <code style={{ whiteSpace: 'nowrap' }}>{name}</code>
             <CopyButton name={name} />
+            {deprecation && (
+              <Tooltip
+                type="description"
+                label={`Use the \`${deprecation.replacement}\` custom property instead.`}
+                component={(props) => (
+                  <Badge
+                    {...props}
+                    tabIndex={0}
+                    variant="warning"
+                    style={{ marginLeft: '1rem' }}
+                  >
+                    Deprecated
+                  </Badge>
+                )}
+              />
+            )}
           </div>
         ),
       },
@@ -111,9 +128,12 @@ export function CustomPropertiesTable({
   const [customProperties, setCustomProperties] = useState<CustomProperties>();
 
   useEffect(() => {
-    const names = filterCustomProperties(namespace, type);
+    const tokens = filterCustomProperties(namespace, type);
     setCustomProperties(
-      names.map((name) => [name, getCustomPropertyValue(name)]),
+      tokens.map((token) => ({
+        ...token,
+        value: getCustomPropertyValue(token.name),
+      })),
     );
   }, [namespace, type]);
 
@@ -194,12 +214,28 @@ export function FontStack({ name }: PreviewProps) {
 
 export function FontWeight({ name }: PreviewProps) {
   return (
+    // @ts-expect-error A CSS custom property is a valid font weight
     <p style={{ fontWeight: `var(${name})`, whiteSpace: 'nowrap' }}>
       Lorem ipsum
     </p>
   );
 }
 
+export function Typography({ name }: PreviewProps) {
+  if (name.includes('font-size')) {
+    return (
+      <p style={{ fontSize: `var(${name})`, lineHeight: 1 }}>Lorem ipsum</p>
+    );
+  }
+  if (name.includes('line-height')) {
+    return <p style={{ lineHeight: `var(${name})` }}>Lorem ipsum</p>;
+  }
+  if (name.includes('letter-spacing')) {
+    return <p style={{ letterSpacing: `var(${name})` }}>Lorem ipsum</p>;
+  }
+  return null;
+}
+
 export function IconSize({ name }: PreviewProps) {
   return (
     <SumUpLogomark
@@ -263,7 +299,9 @@ function TableWrapper() {
         headers={HEADERS}
         rows={Object.keys(theme.mq).map((bp) => [
           { children: <code>{`theme.mq.${bp}`}</code> },
-          { children: <code>{theme.mq[bp]}</code> },
+          {
+            children: <code>{theme.mq[bp as keyof typeof theme.mq]}</code>,
+          },
         ])}
       />
     </Unstyled>

.storybook/components/index.ts

@@ -40,6 +40,7 @@ export {
   BorderWidth,
   FontStack,
   FontWeight,
+  Typography,
   Transition,
   MediaQueriesTable,
 } from './Theme.js';

.stylelintrc.js

@@ -1,6 +1,12 @@
 module.exports = require('@sumup-oss/foundry/stylelint')({
   extends: ['stylelint-prettier/recommended', 'stylelint-config-css-modules'],
+  plugins: [
+    // TODO: Remove once Foundry has been updated
+    '@sumup-oss/stylelint-plugin-circuit-ui',
+  ],
   rules: {
+    'circuit-ui/no-invalid-custom-properties': true,
+    'circuit-ui/no-deprecated-custom-properties': true,
     'selector-class-pattern': [
       '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
       {

docs/features/1-theme.mdx

@@ -11,9 +11,9 @@ import {
   BorderWidth,
   FontStack,
   FontWeight,
+  Typography,
   Transition,
 } from '../../.storybook/components';
-import { Headline, SubHeadline, Body } from '@sumup-oss/circuit-ui';
 
 <Meta title="Features/Theme" />
 
@@ -43,7 +43,7 @@ Circuit UI's [ESLint plugin](Packages/eslint-plugin-circuit-ui/Docs)  includes r
 
 ## Spacings
 
-Use spacings for gutters, margins, and paddings. Don't use it for border width, border radius, icon size, font size, or line height. Use the dedicated theme properties instead.
+Use spacings for gutters, margins, and paddings. Don't use it for border width, border radius, icon size, font size, or line height. Use the dedicated design tokens instead.
 
 <CustomPropertiesTable namespace="spacings" preview={Spacing} />
 
@@ -61,7 +61,9 @@ 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 [`Title`](Typography/Title/Docs), [`Headline`](Typography/Headline/Docs), [`SubHeadline`](Typography/SubHeadline/Docs), [`Body`](Typography/Body/Docs), and [`BodyLarge`](Typography/BodyLarge/Docs).
+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).
+
+<CustomPropertiesTable namespace="typography" preview={Typography} />
 
 ## Font stack
 

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-two-font-size);
+  font-size: var(--cui-typography-body-s-font-size);
   font-weight: var(--cui-font-weight-bold);
-  line-height: var(--cui-typography-body-two-line-height);
+  line-height: var(--cui-typography-body-s-line-height);
   text-align: center;
   letter-spacing: 0.25px;
   border-radius: var(--cui-border-radius-pill);

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

@@ -18,12 +18,26 @@ The Body component is used to present content to our users.
 
 ### Sizes
 
-The Body component comes in two sizes. Use the default `one` size in most cases. Consider using the [BodyLarge component](Typography/BodyLarge) for large typography in specific cases.
+The Body component comes in three sizes. Use the default `m` size in most cases.
 
 <Story of={Stories.Sizes} />
 
+### Weights
+
+The Body component comes in two weights. Use the default `regular` weight in most cases.
+
+<Story of={Stories.Weights} />
+
+### Colors
+
+The Body component accepts any foreground color. Use the default `normal` color in most cases.
+
+<Story of={Stories.Colors} />
+
 ### Variants
 
+<Status variant="deprecated" />
+
 The Body component accepts five different variants—`highlight`, `quote`, `confirm`, `alert` and `subtle`—to tailor it according to the content we are presenting.
 
 Different variants will render different HTML elements by default: