Deprecate typography props and legacy Emotion components (#3440)

connor-baer · web-flow · commit 4acb03f95fe9 · 2026-01-29T23:41:46.000+01:00
diff --git a/.changeset/bitter-candles-pick.md b/.changeset/bitter-candles-pick.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Deprecated the InlineElements component. Use [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) or [CSS Grid](https://css-tricks.com/css-grid-layout-guide/) instead.
diff --git a/.changeset/gold-pants-grab.md b/.changeset/gold-pants-grab.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Deprecated the style mixins. Use the `utilClasses` instead. We strongly recommend migrating from Emotion.js to CSS Modules.
diff --git a/.changeset/thirty-moles-heal.md b/.changeset/thirty-moles-heal.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Deprecated the Body and Numeral components' italic decoration value. Since the brand refresh, italic text is no longer supported and the value will be removed in the next major release.
diff --git a/.changeset/wild-trams-pull.md b/.changeset/wild-trams-pull.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Deprecated the Display component's `weight` prop. Since the brand refresh, only `bold` is supported. The `weight` prop will be removed in the next major version.
diff --git a/packages/circuit-ui/components/Body/Body.mdx b/packages/circuit-ui/components/Body/Body.mdx
@@ -30,7 +30,7 @@ The Body component comes in three weights. Use the default `regular` weight in m
 
 ### Decorations
 
-The Body component comes in two styles. Use the `as` prop to render the component as the `em` or `del` HTML elements if appropriate.
+The Body component supports a strikethrough style. Use the `as` prop to render the component as the `del` HTML element if appropriate.
 
 <Story of={Stories.Decorations} />
 
diff --git a/packages/circuit-ui/components/Body/Body.module.css b/packages/circuit-ui/components/Body/Body.module.css
@@ -36,10 +36,6 @@
 
 /* Decorations & styles */
 
-.italic {
-  font-style: italic;
-}
-
 .strikethrough {
   text-decoration: line-through;
 }
diff --git a/packages/circuit-ui/components/Body/Body.stories.tsx b/packages/circuit-ui/components/Body/Body.stories.tsx
@@ -49,14 +49,11 @@ export const Weights = (args: BodyProps) =>
     </Body>
   ));
 
-const decorations = ['italic', 'strikethrough'] as const;
-
-export const Decorations = (args: BodyProps) =>
-  decorations.map((decoration) => (
-    <Body key={decoration} {...args} decoration={decoration}>
-      {content}
-    </Body>
-  ));
+export const Decorations = (args: BodyProps) => (
+  <Body {...args} decoration="strikethrough">
+    {content}
+  </Body>
+);
 
 const colors = [
   'normal',
diff --git a/packages/circuit-ui/components/Body/Body.tsx b/packages/circuit-ui/components/Body/Body.tsx
@@ -52,7 +52,13 @@ export interface BodyProps extends HTMLAttributes<HTMLParagraphElement> {
    * Use the `as` prop to render the component as the `em` or `del` HTML
    * elements if appropriate.
    */
-  decoration?: 'italic' | 'strikethrough';
+  decoration?:
+    | 'strikethrough'
+    /**
+     * @deprecated Since the brand refresh, italic text is no longer supported.
+     * The `italic` decoration value will be removed in the next major version.
+     */
+    | 'italic';
   /**
    * Choose a foreground color token name. Default: `normal`.
    */
@@ -163,7 +169,7 @@ export const Body = forwardRef<HTMLParagraphElement, BodyProps>(
           classes[size],
           classes[weight],
           classes[color],
-          decoration && classes[decoration],
+          decoration === 'strikethrough' && classes.strikethrough,
           variant && classes[variant],
           className,
         )}
diff --git a/packages/circuit-ui/components/Display/Display.mdx b/packages/circuit-ui/components/Display/Display.mdx
@@ -20,12 +20,6 @@ The Display component comes in three sizes. In most cases, use the [Headline com
 
 <Story of={Stories.Sizes} />
 
-### Weights
-
-The Display component comes in three weight. Use the default `bold` weight in most cases.
-
-<Story of={Stories.Weights} />
-
 ---
 
 ## Accessibility
diff --git a/packages/circuit-ui/components/Display/Display.module.css b/packages/circuit-ui/components/Display/Display.module.css
@@ -1,24 +1,11 @@
 .base {
   margin: 0;
   font-family: var(--cui-font-stack-display);
+  font-weight: var(--cui-font-weight-bold);
   color: var(--cui-fg-normal);
   letter-spacing: var(--cui-letter-spacing-tight, var(--cui-letter-spacing));
 }
 
-/* Weights */
-
-.regular {
-  font-weight: var(--cui-font-weight-regular);
-}
-
-.semibold {
-  font-weight: var(--cui-font-weight-semibold);
-}
-
-.bold {
-  font-weight: var(--cui-font-weight-bold);
-}
-
 /* Sizes */
 
 .l {
diff --git a/packages/circuit-ui/components/Display/Display.stories.tsx b/packages/circuit-ui/components/Display/Display.stories.tsx
@@ -41,16 +41,3 @@ export const Sizes = (args: DisplayProps) =>
 Sizes.args = {
   as: 'h1',
 };
-
-const weights = ['regular', 'semibold', 'bold'] as const;
-
-export const Weights = (args: DisplayProps) =>
-  weights.map((weight) => (
-    <Display key={weight} {...args} weight={weight}>
-      This is weight {weight}
-    </Display>
-  ));
-
-Weights.args = {
-  as: 'h1',
-};
diff --git a/packages/circuit-ui/components/Display/Display.tsx b/packages/circuit-ui/components/Display/Display.tsx
@@ -24,7 +24,10 @@ import classes from './Display.module.css';
 
 export interface DisplayProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * Choose from three font weights. Default: `regular`.
+   * @deprecated Since the brand refresh, only `bold` is supported.
+   * The `weight` prop will be removed in the next major version.
+   *
+   * Choose from three font weights. Default: `bold`.
    */
   weight?: 'regular' | 'semibold' | 'bold';
   /**
@@ -69,10 +72,7 @@ const deprecatedSizeMap: Record<string, string> = {
  * A flexible title component capable of rendering any HTML heading element.
  */
 export const Display = forwardRef<HTMLHeadingElement, DisplayProps>(
-  (
-    { className, as, size: legacySize = 'm', weight = 'bold', ...props },
-    ref,
-  ) => {
+  ({ className, as, size: legacySize = 'm', weight, ...props }, ref) => {
     if (
       process.env.NODE_ENV !== 'production' &&
       process.env.NODE_ENV !== 'test' &&
@@ -103,12 +103,7 @@ export const Display = forwardRef<HTMLHeadingElement, DisplayProps>(
       <Element
         {...props}
         ref={ref}
-        className={clsx(
-          classes.base,
-          classes[size],
-          classes[weight],
-          className,
-        )}
+        className={clsx(classes.base, classes[size], className)}
       />
     );
   },
diff --git a/packages/circuit-ui/components/Numeral/Numeral.module.css b/packages/circuit-ui/components/Numeral/Numeral.module.css
@@ -66,10 +66,6 @@
 
 /* Decorations & styles */
 
-.italic {
-  font-style: italic;
-}
-
 .strikethrough {
   text-decoration: line-through;
 }
diff --git a/packages/circuit-ui/components/Numeral/Numeral.stories.tsx b/packages/circuit-ui/components/Numeral/Numeral.stories.tsx
@@ -54,8 +54,6 @@ const colors = [
   'promo',
 ] as const;
 
-const decorations = ['italic', 'strikethrough'] as const;
-
 export const Colors = (args: NumeralProps) =>
   colors.map((color) => (
     <Numeral
@@ -72,9 +70,8 @@ export const Colors = (args: NumeralProps) =>
     </Numeral>
   ));
 
-export const Decorations = (args: NumeralProps) =>
-  decorations.map((decoration) => (
-    <Numeral key={decoration} {...args} decoration={decoration}>
-      {decoration}: {content}.
-    </Numeral>
-  ));
+export const Decorations = (args: NumeralProps) => (
+  <Numeral {...args} decoration="strikethrough">
+    {content}
+  </Numeral>
+);
diff --git a/packages/circuit-ui/components/Numeral/Numeral.tsx b/packages/circuit-ui/components/Numeral/Numeral.tsx
@@ -49,7 +49,13 @@ export interface NumeralProps extends HTMLAttributes<HTMLParagraphElement> {
    * Use the `as` prop to render the component as the `em` or `del` HTML
    * elements if appropriate.
    */
-  decoration?: 'italic' | 'strikethrough';
+  decoration?:
+    | 'strikethrough'
+    /**
+     * @deprecated Since the brand refresh, italic text is no longer supported.
+     * The `italic` decoration value will be removed in the next major version.
+     */
+    | 'italic';
 }
 
 /**
@@ -75,7 +81,7 @@ export const Numeral = forwardRef<HTMLParagraphElement, NumeralProps>(
         classes.base,
         classes[size],
         classes[color],
-        decoration && classes[decoration],
+        decoration === 'strikethrough' && classes.strikethrough,
         className,
       )}
     />
diff --git a/packages/circuit-ui/components/legacy/InlineElements/InlineElements.stories.tsx b/packages/circuit-ui/components/legacy/InlineElements/InlineElements.stories.tsx
@@ -26,7 +26,7 @@ import { InlineElements } from './InlineElements.js';
 export default {
   title: 'Layout/InlineElements',
   component: InlineElements,
-  tags: ['status:legacy'],
+  tags: ['status:deprecated'],
   parameters: {
     controls: { hideNoControlsWarning: true },
     chromatic: {
diff --git a/packages/circuit-ui/components/legacy/InlineElements/InlineElements.tsx b/packages/circuit-ui/components/legacy/InlineElements/InlineElements.tsx
@@ -18,7 +18,7 @@
 import { Children, type ReactElement } from 'react';
 import { css } from '@emotion/react';
 
-import styled, { type StyleProps } from '../../../styles/styled.js';
+import styled from '../../../styles/styled.js';
 import { clearfix } from '../../../styles/style-mixins.js';
 
 export interface InlineElementsProps {
@@ -37,36 +37,26 @@ export interface InlineElementsProps {
   inlineMobile?: boolean;
 }
 
-const fallbackBaseStyles = ({
-  theme,
-  children,
-}: StyleProps & InlineElementsProps) => {
+const fallbackBaseStyles = ({ children }: InlineElementsProps) => {
   const childrenCount = Children.count(children);
-  const width = `(100% - ${childrenCount - 1} * ${
-    theme.spacings.byte
-  }) / ${childrenCount}`;
 
   return css`
     > * {
       display: block;
       width: 100%;
     }
-    ${theme.mq.kilo} {
+    @media (min-width: 480px) {
       > * {
         float: left;
         width: ${(1 / childrenCount) * 95}%;
-        width: calc(${width});
+        width: calc((100% - ${childrenCount - 1} * var(--cui-spacings-byte)) / ${childrenCount});
       }
       ${clearfix()};
     }
   `;
 };
 
-const baseStyles = ({
-  theme,
-  ratios = [],
-  children,
-}: StyleProps & InlineElementsProps) => {
+const baseStyles = ({ ratios = [], children }: InlineElementsProps) => {
   const flexGrows =
     ratios.length &&
     Children.map(
@@ -90,7 +80,7 @@ const baseStyles = ({
       }
     }
 
-    ${theme.mq.kilo} {
+    @media (min-width: 480px) {
       align-items: stretch;
       flex-direction: row;
       justify-content: stretch;
@@ -111,38 +101,31 @@ const baseStyles = ({
 };
 
 const fallbackInlineMobileStyles = ({
-  theme,
   inlineMobile,
   children,
-}: StyleProps & InlineElementsProps) => {
+}: InlineElementsProps) => {
   if (!inlineMobile) {
     return null;
   }
 
   const childrenCount = Children.count(children);
-  const width = `(100% - ${childrenCount - 1} * ${
-    theme.spacings.byte
-  }) / ${childrenCount}`;
 
   return css`
-    ${theme.mq.untilKilo} {
+    @media (max-width: 479px) {
       > * {
         float: left;
         width: ${(1 / childrenCount) * 95}%;
-        width: calc(${width});
+        width: calc((100% - ${childrenCount - 1} * var(--cui-spacings-byte)) / ${childrenCount});
       }
       ${clearfix()};
     }
   `;
 };
 
-const inlineMobileStyles = ({
-  theme,
-  inlineMobile,
-}: StyleProps & InlineElementsProps) =>
+const inlineMobileStyles = ({ inlineMobile }: InlineElementsProps) =>
   inlineMobile &&
   css`
-    ${theme.mq.untilKilo} {
+    @media (max-width: 479px) {
       flex-direction: row;
       flex-grow: 1;
       width: auto;
@@ -157,7 +140,7 @@ const inlineMobileStyles = ({
   `;
 
 /**
- * @legacy
+ * @deprecated Use [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) or [CSS Grid](https://css-tricks.com/css-grid-layout-guide/) instead.
  *
  * Layout helper that displays child elements inline. Useful for form elements.
  */
diff --git a/packages/circuit-ui/components/legacy/InlineElements/__snapshots__/InlineElements.spec.tsx.snap b/packages/circuit-ui/components/legacy/InlineElements/__snapshots__/InlineElements.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`InlineElements > should render with default styles 1`] = `
   .circuit-0>* {
     float: left;
     width: 47.5%;
-    width: calc((100% - 1 * 8px) / 2);
+    width: calc((100% - 1 * var(--cui-spacings-byte)) / 2);
   }
 
   .circuit-0::before,
@@ -99,7 +99,7 @@ exports[`InlineElements > should render with inlineMobile styles 1`] = `
   .circuit-0>* {
     float: left;
     width: 47.5%;
-    width: calc((100% - 1 * 8px) / 2);
+    width: calc((100% - 1 * var(--cui-spacings-byte)) / 2);
   }
 
   .circuit-0::before,
@@ -150,7 +150,7 @@ exports[`InlineElements > should render with inlineMobile styles 1`] = `
   .circuit-0>* {
     float: left;
     width: 47.5%;
-    width: calc((100% - 1 * 8px) / 2);
+    width: calc((100% - 1 * var(--cui-spacings-byte)) / 2);
   }
 
   .circuit-0::before,
@@ -213,7 +213,7 @@ exports[`InlineElements > should render with ratio styles 1`] = `
   .circuit-0>* {
     float: left;
     width: 47.5%;
-    width: calc((100% - 1 * 8px) / 2);
+    width: calc((100% - 1 * var(--cui-spacings-byte)) / 2);
   }
 
   .circuit-0::before,
diff --git a/packages/circuit-ui/styles/style-mixins.mdx b/packages/circuit-ui/styles/style-mixins.mdx
diff --git a/packages/circuit-ui/styles/style-mixins.stories.tsx b/packages/circuit-ui/styles/style-mixins.stories.tsx
diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts
diff --git a/packages/design-tokens/themes/legacy/light.ts b/packages/design-tokens/themes/legacy/light.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@sumup-oss/circuit-ui": minor
 +---
++
 +Deprecated the InlineElements component. Use [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) or [CSS Grid](https://css-tricks.com/css-grid-layout-guide/) instead.
Original file line number	Diff line number	Diff line change
`@@ -36,10 +36,6 @@`
`36`	`36`
`37`	`37`	`/* Decorations & styles */`
`38`	`38`
`39`		`-.italic {`
`40`		`- font-style: italic;`
`41`		`-}`
`42`		`-`
`43`	`39`	`.strikethrough {`
`44`	`40`	`text-decoration: line-through;`
`45`	`41`	`}`