CHANGELOG.md

@sumup-oss/design-tokens

8.2.0

Minor Changes

• #2909 8f9df8d Thanks @connor-baer! - Added the --cui-letter-spacing-tight token. Use it for very large typography.

8.1.0

Minor Changes

• #2873 f7e1557 Thanks @connor-baer! - Updated the --cui-fg-placeholder-* color tokens to meet contrast requirements.

8.0.1

Patch Changes

• #2782 0a6ec4e Thanks @connor-baer! - Updated the legacy JavaScript theme to the latest typography token values to match the modern CSS custom variables.

8.0.0

Major Changes

• #2707 f8016eb Thanks @sirineJ! - Raised the minimum Node.js version to 20+.

• #2648 f583d05 Thanks @connor-baer! - Renamed the package scope from @sumup to @sumup-oss. Replace @sumup/design-tokens with @sumup-oss/design-tokens in your package.json file, then update all imports:

  -import '@sumup/design-tokens/light.css';
  +import '@sumup-oss/design-tokens/light.css';

  Circuit UI's ESLint plugin offers the renamed-package-scope rule to automate updating the package imports.

• #2654 55bf9ad Thanks @connor-baer! - Changed the default font from Aktiv Grotesk to Inter, a variable font. Variable fonts combine a continuous range of weights and other "axes" into a single file. This speeds up page load times and enables more creative freedom. Inter is a close match to Aktiv Grotesk, so users shouldn't notice a difference.

• #2654 55bf9ad Thanks @connor-baer! - Added a new @sumup-oss/design-tokens/fonts.css file containing the @font-face declarations to load the Inter font family. Refer to the documentation on how to load fonts in your application.

Minor Changes

• #2653 33435cf Thanks @connor-baer! - 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

7.3.1

Patch Changes

• #2613 a1f877a Thanks @connor-baer! - Matched the interactive variants of the fg-normal, fg-subtle, fg-on-strong, and fg-on-strong-subtle color tokens to their default values.

7.3.0

Minor Changes

• #2551 d2115fb Thanks @connor-baer! - Updated the bg-normal-disabled, bg-subtle-hovered, bg-subtle-pressed, bg-highlight-disabled, bg-accent-hovered,bg-accent-pressed, bg-accent-strong-hovered, bg-accent-strong-pressed, bg-danger-hovered, bg-danger-pressed, bg-danger-disabled, bg-danger-strong-hovered, bg-danger-strong-pressed, fg-subtle-hovered, fg-danger-hovered, fg-danger-disabled, border-normal, border-subtle-hovered, border-danger, border-danger-hovered, and border-danger-disabled color tokens.

7.2.0

Minor Changes

• 779a911 Thanks @connor-baer! - Added a dark theme. Import @sumup/design-tokens/dark.css for the standalone dark theme. Import @sumup/design-tokens/dynamic.css to switch between the light and dark themes automatically based on the system settings or explicitly using the data-color-scheme attribute.

• 779a911 Thanks @connor-baer! - Added scoped light and dark themes. Import @sumup/design-tokens/light-scoped.css or @sumup/design-tokens/dark-scoped.css to theme a subset of an application marked up with the data-color-scheme attribute.

Patch Changes

• 779a911 Thanks @connor-baer! - Fixed the border-focus color token value.

7.1.0

Minor Changes

• #2416 dcb816e Thanks @connor-baer! - Changed the order of the default font stack to prefer web safe fonts over system fonts. This provides a more consistent user experience across platforms, reduces layout shift when switching to SumUp's brand font, Aktiv Grotesk, and works around a (supposedly fixed) Chrome bug.

7.0.0

Major Changes

• #2355 43f357b Thanks @connor-baer! - Removed all colors from the legacy JavaScript theme object and theme prop type. Use the semantic color tokens instead:

  -color: ${theme.colors.p500};
  +color: var(--cui-fg-accent);

• #2356 bc5e753 Thanks @connor-baer! - Changed the color scheme from blue to black & white.

6.2.0

Minor Changes

• #2302 815ae9d2 Thanks @connor-baer! - Added the --cui-fg-on-strong-subtle, --cui-fg-on-strong-subtle-hovered, --cui-fg-on-strong-subtle-pressed, and --cui-fg-on-strong-subtle-disabled color tokens. Use them for secondary content that provides additional information on backgrounds ending with -strong in order to achieve the necessary contrast for accessibility.

6.1.0

Minor Changes

• #2296 bd4e7ec0 Thanks @connor-baer! - Updated the --cui-border-focus color token to meet contrast requirements.

6.0.0

Minor Changes

• #2158 415c73dd Thanks @connor-baer! - Exported all CSS custom properties as @sumup/design-tokens/light.css.

• #2158 415c73dd Thanks @connor-baer! - Deprecated the Emotion.js theme in favor of CSS custom properties. Use the circuit-ui/prefer-custom-properties ESLint rule to automatically migrate your code.

5.3.0

Minor Changes

• #2040 fc006c27 Thanks @connor-baer! - Added a schema export that describes the shape of the new CSS custom properties.

5.2.0

Minor Changes

• d4898da9 Thanks @connor-baer! - Updated fontStack.mono to include more system fonts.

Patch Changes

• #2091 3334873d Thanks @connor-baer! - Upgraded all dependencies to their latest minor.

5.1.1

Patch Changes

• #2051 6b82b360 Thanks @connor-baer! - Refactored the theme to be fully static.

5.1.0

Minor Changes

• #1951 197f6851 Thanks @connor-baer @robinmetral! - Deprecated the legacy color tokens. Migrate to semantic color tokens instead. For context, refer to the Figma documentation (internal link). The new tokens are available as CSS custom properties, listed in the Circuit UI theme documentation.

5.0.0

Major Changes

• #1760 b8f129ee Thanks @robinmetral! - Switched to rem units for typography design tokens. Do not override the root font-size in your global styles. See The Surprising Truth About Pixels and Accessibility.

4.0.1

Patch Changes

• #1846 e08e252e Thanks @robinmetral! - Adjusted the confirm, notify and alert brand colors.

4.0.0

Major Changes

• #1509 c7dfe6a4 Thanks @robinmetral! - Removed the deprecated zIndex.sidebar token. Use zIndex.navigation instead.

• #1526 ba059828 Thanks @amelako! - Removed the deprecated success, warning and danger legacy color names. Use confirm, notify and alert instead.

3.4.0

Minor Changes

• #1431 3f9585a4 Thanks @amelako! - Added new info, confirm, alert, and notify colors and deprecated the success, warning, and danger colors.

3.3.0

Minor Changes

• #1359 5804fd8d Thanks @amelako! - Added a new zIndex.toast value for the NotificationToast component in Circuit UI.

3.2.0

Minor Changes

• #1273 ed0c4f83 Thanks @robinmetral! - Added new typography.title and typography.bodyLarge values to the theme.

3.1.1

Patch Changes

• #1262 d619b6e1 Thanks @hris27! - Updated themePropType to match the current state of the Circuit UI theme.

3.1.0

Minor Changes

• #1108 c077b900 Thanks @connor-baer! - Added a new zIndex.navigation token and deprecated the zIndex.sidebar token.

3.0.1

Patch Changes

• #1097 7f52ad7d Thanks @robinmetral! - Bumped package versions to release the stable v3.

3.0.0

Major Changes

• #995 bd234296 Thanks @robinmetral! - Removed the drawer and select z-index values from the design tokens. Use input instead of select.

• #884 eb9e0b47 Thanks @amelako! - Replaced the typography design tokens' heading, subHeading and text properties by headline, subHeadline, and body. These are used by the new semantic Headline, SubHeadline, and Body components in Circuit UI.

• #980 900e6bc4 Thanks @robinmetral! - Updated the design token's borderRadius properties. The 1px and 6px values are removed and a 16px value is added, and the sizes are renamed.

• #1039 9a35c9a7 Thanks @connor-baer! - Changed all breakpoints to media query strings. The consistency helps predictability and allows the breakpoint values to be passed to window.matchMedia directly.

Minor Changes

• #984 7879a990 Thanks @amelako! - Added a new icon size tera (48px).

• #1039 9a35c9a7 Thanks @connor-baer! - Added untilGiga and untilTera breakpoints and media queries.

2.2.0

Minor Changes

• #890 e6c39366 Thanks @connor-baer! - Updated the body background color to white and darkened the overlay color.

• #962 35ce0033 Thanks @robinmetral! - Add a new peta borderRadius size of 12px

2.1.2

Patch Changes

• #933 e4c940bc Thanks @connor-baer! - Fixed two typos in the theme prop type: theme.breakpoint → theme.breakpoints and theme.mx → theme.mq.