Merge branch 'next' into main

.changeset/fuzzy-actors-marry.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Changed the CloseButton to use the _tertiary_ instead of the _secondary_ Button variant.

.changeset/lazy-dingos-look.md

@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': minor
+---
+
+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.

.changeset/nasty-owls-collect.md

@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': minor
+---
+
+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.

.changeset/pre.json

@@ -0,0 +1,21 @@
+{
+  "mode": "exit",
+  "tag": "next",
+  "initialVersions": {
+    "@sumup/astro-template-circuit-ui": "2.0.0",
+    "@sumup/circuit-ui": "8.3.0",
+    "@sumup/cna-template": "5.1.0",
+    "@sumup/design-tokens": "7.1.0",
+    "@sumup/eslint-plugin-circuit-ui": "4.1.0",
+    "@sumup/icons": "3.4.0",
+    "@sumup/remix-template-circuit-ui": "3.0.0",
+    "@sumup/stylelint-plugin-circuit-ui": "1.0.0"
+  },
+  "changesets": [
+    "clever-laws-wait",
+    "fuzzy-actors-marry",
+    "lazy-dingos-look",
+    "nasty-owls-collect",
+    "swift-readers-retire"
+  ]
+}

.changeset/shaggy-points-think.md

@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': patch
+---
+
+Fixed the `border-focus` color token value.

.changeset/swift-readers-retire.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Changed the background color of the active Toggle to green to better distinguish its states.

.storybook/components/DocsContainer.tsx

@@ -1,32 +1,29 @@
-// import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
 
-import * as themes from '../themes';
+import { dark, light, listenToColorScheme } from '../themes';
+
+const themes = { light, dark };
 
 /**
- * Automatically switch light/dark theme based on system preferences
+ * Switch color scheme based on the global types or system preferences
  */
 const DocsContainer: typeof BaseContainer = ({ children, context }) => {
-  // TODO: Re-enable automatic theme switching once there is a proper
-  // dark theme for Circuit UI.
-  // const query = window?.matchMedia('(prefers-color-scheme: dark)');
-
-  // const [theme, setTheme] = useState(getTheme(query.matches));
+  const [colorScheme, setColorScheme] = useState('light');
 
-  // useEffect(() => {
-  //   const handleChange = (event: MediaQueryListEvent) => {
-  //     setTheme(getTheme(event.matches));
-  //   };
+  useEffect(
+    () => listenToColorScheme(context.channel, setColorScheme),
+    [context.channel],
+  );
 
-  //   query.addEventListener('change', handleChange);
+  useEffect(() => {
+    document.documentElement.dataset.colorScheme = colorScheme;
+  }, [colorScheme]);
 
-  //   return () => {
-  //     query.removeEventListener('change', handleChange);
-  //   };
-  // }, []);
+  const theme = themes[colorScheme];
 
   return (
-    <BaseContainer context={context} theme={themes.light}>
+    <BaseContainer context={context} theme={theme}>
       {children}
     </BaseContainer>
   );

.storybook/components/Image.module.css

@@ -0,0 +1,13 @@
+.dark {
+  display: none;
+}
+
+/* Show dark image in dark mode */
+[data-color-scheme="dark"] .dark {
+  display: block;
+}
+
+/* Hide light image in dark mode when dark image is present */
+[data-color-scheme="dark"] .dark + .light {
+  display: none;
+}

.storybook/components/Image.tsx

@@ -13,11 +13,34 @@
  * limitations under the License.
  */
 
+import { Fragment } from 'react';
 import {
+  clsx,
   Image as BaseImage,
-  ImageProps,
+  type ImageProps as BaseImageProps,
 } from '../../packages/circuit-ui/index.js';
 
-const Image = ({ children, ...props }: ImageProps) => <BaseImage {...props} />;
+import classes from './Image.module.css';
+
+interface ImageProps extends BaseImageProps {
+  darkSrc?: string;
+}
+
+const Image = ({ children, src, darkSrc, ...props }: ImageProps) => (
+  <Fragment>
+    {darkSrc && (
+      <BaseImage
+        src={darkSrc}
+        {...props}
+        className={clsx(classes.dark, props.className)}
+      />
+    )}
+    <BaseImage
+      src={src}
+      {...props}
+      className={clsx(classes.light, props.className)}
+    />
+  </Fragment>
+);
 
 export default Image;

.storybook/decorators/withThemeProvider.tsx

@@ -3,12 +3,34 @@ import { ThemeProvider } from '@emotion/react';
 import type { Decorator } from '@storybook/react';
 import { light } from '@sumup/design-tokens';
 
+function setColorScheme(colorScheme: 'light' | 'dark') {
+  document.documentElement.dataset.colorScheme = colorScheme;
+}
+
 export const withThemeProvider: Decorator = (Story, context) => {
-  const theme = context.parameters.theme || context.globals.theme;
+  const colorScheme =
+    context.parameters.colorScheme || context.globals.colorScheme;
 
   useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-  }, [theme]);
+    if (colorScheme !== 'system') {
+      setColorScheme(colorScheme);
+      return undefined;
+    }
+
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+
+    setColorScheme(query.matches ? 'dark' : 'light');
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setColorScheme(event.matches ? 'dark' : 'light');
+    };
+
+    query.addEventListener('change', handleChange);
+
+    return () => {
+      query.removeEventListener('change', handleChange);
+    };
+  }, [colorScheme]);
 
   return (
     <ThemeProvider theme={light}>

.storybook/manager-head.html

@@ -1,2 +1,9 @@
 <meta name="description" content="SumUp's React UI component library" />
 <link rel="icon" type="image/png" href="/images/logo-icon.png" />
+
+<style>
+  [data-color-scheme='dark'] .sidebar-item[data-selected='true'],
+  [data-color-scheme='dark'] .sidebar-item[data-selected='true'] svg {
+    color: #0f131a; /* var(--cui-fg-on-strong) */
+  }
+</style>

.storybook/manager.tsx

@@ -1,6 +1,6 @@
 import { addons, types } from '@storybook/addons';
 
-import { getTheme } from './themes';
+import { dark, light, listenToColorScheme } from './themes.js';
 import { PARAM_KEY as VERSIONS_PARAM_KEY, Versions } from './addons/versions';
 
 addons.setConfig({
@@ -11,21 +11,15 @@ addons.setConfig({
 });
 
 /**
- * Automatically switch light/dark theme based on system preferences
+ * Switch color scheme based on the global types or system preferences
  */
-addons.register('auto-theme-switcher', (api) => {
-  const setTheme = (prefersDark: boolean) => {
-    api.setOptions({ theme: getTheme(prefersDark) });
-    document.documentElement.dataset.theme = prefersDark ? 'dark' : 'light';
+addons.register('color-scheme', (api) => {
+  const setTheme = (colorScheme: 'dark' | 'light') => {
+    api.setOptions({ theme: colorScheme === 'dark' ? dark : light });
+    document.documentElement.dataset.colorScheme = colorScheme;
   };
 
-  const query = window?.matchMedia('(prefers-color-scheme: dark)');
-
-  setTheme(query.matches);
-
-  query.addEventListener('change', (event) => {
-    setTheme(event.matches);
-  });
+  listenToColorScheme(api, setTheme);
 });
 
 /**

.storybook/modes.ts

@@ -1,3 +1,12 @@
+const colorSchemes = {
+  dark: {
+    colorScheme: 'dark',
+  },
+  light: {
+    colorScheme: 'light',
+  },
+};
+
 const viewports = {
   smallMobile: {
     viewport: 'smallMobile',
@@ -14,5 +23,6 @@ const viewports = {
 };
 
 export const modes = {
+  ...colorSchemes,
   ...viewports,
 };

.storybook/preview.tsx

@@ -1,10 +1,11 @@
-import '@sumup/design-tokens/light.css';
+import '@sumup/design-tokens/dynamic.css';
 import '../packages/circuit-ui/styles/base.css';
 
 import { light, components } from './themes';
 import { withThemeProvider } from './decorators/withThemeProvider';
 import { withUnmountWhenHidden } from './decorators/withUnmountWhenHidden';
 import { DocsContainer } from './components';
+import { modes } from './modes';
 
 export const parameters = {
   layout: 'centered',
@@ -16,6 +17,12 @@ export const parameters = {
       { name: 'v5', url: 'https://circuit-v5.sumup-vercel.app' },
     ],
   },
+  chromatic: {
+    modes: {
+      light: modes.light,
+      dark: modes.dark,
+    },
+  },
   viewport: {
     viewports: {
       smallMobile: {
@@ -53,29 +60,33 @@ export const parameters = {
   },
 };
 
-// TODO: Re-enable once a dark theme exists
-// export const globalTypes = {
-//   theme: {
-//     name: 'Theme',
-//     description: 'Global theme for components',
-//     defaultValue: 'light',
-//     toolbar: {
-//       title: 'Theme',
-//       icon: 'paintbrush',
-//       items: [
-//         {
-//           title: 'Light',
-//           value: 'light',
-//           icon: 'circle',
-//         },
-//         {
-//           title: 'Dark (WIP)',
-//           value: 'dark',
-//           icon: 'circlehollow',
-//         },
-//       ],
-//     },
-//   },
-// };
+export const globalTypes = {
+  colorScheme: {
+    name: 'Color Scheme',
+    description: 'Global theme for components',
+    defaultValue: 'system',
+    toolbar: {
+      title: 'Color Scheme',
+      icon: 'paintbrush',
+      items: [
+        {
+          title: 'Match system',
+          value: 'system',
+          icon: 'mirror',
+        },
+        {
+          title: 'Light',
+          value: 'light',
+          icon: 'circlehollow',
+        },
+        {
+          title: 'Dark (WIP)',
+          value: 'dark',
+          icon: 'circle',
+        },
+      ],
+    },
+  },
+};
 
 export const decorators = [withThemeProvider, withUnmountWhenHidden];