Merge branch 'main' into next

.storybook/components/index.ts

@@ -25,7 +25,6 @@ export { default as DocsContainer } from './DocsContainer';
 export { default as Status } from './Statuses';
 export { default as Preview } from './Preview';
 export { default as Story } from './Story';
-export { default as Swatch } from './Swatch';
 export { default as Type } from './Type';
 export { default as Spacing } from './Spacing';
 export { default as MediaQueriesTable } from './MediaQueriesTable';

docs/features/1-theme.mdx

@@ -2,7 +2,6 @@ import {
   Intro,
   Meta,
   Preview,
-  Swatch,
   Spacing,
   IconSize,
   BorderRadius,
@@ -25,15 +24,13 @@ The theme used throughout Circuit UI comes from SumUp's design token library, [`
 
 ## Colors
 
-### New semantic colors
+Circuit UI colors have moved from color scales (e.g. `g900`) to semantic color tokens (e.g. `fg-success`). This makes theme customizations easier and more reliable, and enables theming for sub-brands or for supporting multiple color modes. For details and usage guidelines, refer to the [Figma documentation](https://www.figma.com/file/OgPQeoNZ2QoY7hZvy0ybk2/%F0%9F%8C%88-COLOR-TOKENS?node-id=913%3A3903&t=b9BsTOJnzKDomZ9E-4) (_internal link_). Uses of legacy colors (e.g. `color: ${theme.colors.g900};`) should be replaced with semantic color tokens (e.g. `color: --cui-fg-success`).
 
-The Circuit UI theme is moving from color scales (e.g. `g900`) to semantic colors (e.g. `fg-success`). This makes theme customizations easier and more reliable, and enables theming for sub-brands or for supporting multiple color modes. For detailed documentation on the new semantic colors, refer to the [Figma documentation](https://www.figma.com/file/OgPQeoNZ2QoY7hZvy0ybk2/%F0%9F%8C%88-COLOR-TOKENS?node-id=913%3A3903&t=b9BsTOJnzKDomZ9E-4) (_internal link_).
-
-Additionally, color tokens are moving from the JS theme (exported from `@sumup/design-tokens`) to [CSS custom properties](https://www.w3.org/TR/css-variables-1/), declared in the Circuit UI `BaseStyles` from version 6.1.0. This has performance benefits over CSS-in-JS theming. Eventually, all design tokens will be declared as CSS custom properties.
+While legacy colors are part of the JS theme (exported from `@sumup/design-tokens`), semantic color tokens are declared as [CSS custom properties](https://www.w3.org/TR/css-variables-1/) (CSS variables). This has performance benefits over CSS-in-JS theming. The custom properties are declared in the Circuit UI `BaseStyles` from version 6.1.0. Eventually, all design tokens will be declared as CSS custom properties and imported as a CSS stylesheet.
 
 To make it easier to work with custom properties, we recommend using the [`@sumup/eslint-plugin-circuit-ui`](Packages/eslint-plugin-circuit-ui/Docs) ESLint plugin, and turning on the `no-invalid-custom-properties` rule.
 
-#### Background colors
+### Background colors
 
 <ColorsTable
   customProperties={[
@@ -102,7 +99,7 @@ To make it easier to work with custom properties, we recommend using the [`@sumu
   ]}
 />
 
-#### Foreground colors
+### Foreground colors
 
 <ColorsTable
   customProperties={[
@@ -151,7 +148,7 @@ To make it easier to work with custom properties, we recommend using the [`@sumu
   ]}
 />
 
-#### Border colors
+### Border colors
 
 <ColorsTable
   customProperties={[
@@ -200,7 +197,7 @@ To make it easier to work with custom properties, we recommend using the [`@sumu
   ]}
 />
 
-#### Special colors
+### Special colors
 
 <ColorsTable
   customProperties={[
@@ -211,104 +208,6 @@ To make it easier to work with custom properties, we recommend using the [`@sumu
   ]}
 />
 
-### Legacy colors
-
-Legacy colors remain available on the JS theme, but semantic colors (see above) should be used on new pages from now on. The following legacy colors will eventually be deprecated and removed from the theme.
-
-```
-theme.colors.<COLOR_NAME>
-```
-
-When referring to a color that should be treated as _primary_ (such as a button or a link), be sure to use the "p" (primary) family of colors rather than the "b" (blue) family of colors.
-
-#### Primary
-
-<Swatch colorName="p100" />
-<Swatch colorName="p200" />
-<Swatch colorName="p300" />
-<Swatch colorName="p400" />
-<Swatch colorName="p500" />
-<Swatch colorName="p700" />
-<Swatch colorName="p900" />
-
-#### Neutrals
-
-<Swatch colorName="n100" />
-<Swatch colorName="n200" />
-<Swatch colorName="n300" />
-<Swatch colorName="n500" />
-<Swatch colorName="n700" />
-<Swatch colorName="n800" />
-<Swatch colorName="n900" />
-
-#### Blues
-
-<Swatch colorName="b100" />
-<Swatch colorName="b200" />
-<Swatch colorName="b300" />
-<Swatch colorName="b400" />
-<Swatch colorName="b500" />
-<Swatch colorName="b700" />
-<Swatch colorName="b900" />
-
-#### Greens
-
-<Swatch colorName="g100" />
-<Swatch colorName="g200" />
-<Swatch colorName="g300" />
-<Swatch colorName="g500" />
-<Swatch colorName="g700" />
-<Swatch colorName="g900" />
-
-#### Yellows
-
-<Swatch colorName="y100" />
-<Swatch colorName="y200" />
-<Swatch colorName="y300" />
-<Swatch colorName="y500" />
-<Swatch colorName="y700" />
-<Swatch colorName="y900" />
-
-#### Oranges
-
-<Swatch colorName="o100" />
-<Swatch colorName="o200" />
-<Swatch colorName="o300" />
-<Swatch colorName="o500" />
-<Swatch colorName="o700" />
-<Swatch colorName="o900" />
-
-#### Reds
-
-<Swatch colorName="r100" />
-<Swatch colorName="r200" />
-<Swatch colorName="r300" />
-<Swatch colorName="r500" />
-<Swatch colorName="r700" />
-<Swatch colorName="r900" />
-
-#### Violets
-
-<Swatch colorName="v100" />
-<Swatch colorName="v200" />
-<Swatch colorName="v300" />
-<Swatch colorName="v500" />
-<Swatch colorName="v700" />
-<Swatch colorName="v900" />
-
-#### Application colors
-
-<Swatch colorName="bodyBg" />
-<Swatch colorName="bodyColor" />
-<Swatch colorName="shadow" />
-<Swatch colorName="overlay" />
-
-#### Semantic colors
-
-<Swatch colorName="alert" />
-<Swatch colorName="confirm" />
-<Swatch colorName="notify" />
-
 ## Spacings
 
 ```