@sumup/design-tokens - npm Package Compare versions

Comparing version 7.2.0-next.3 to 7.2.0

dist/cjs/themes/light.d.ts

@@ -553,4 +553,4 @@ /**
     name: "--cui-border-focus";
-    value: "#3064e3";
+    value: "#0f131a";
     type: "color";
 })[];

dist/cjs/themes/light.js

@@ -710,5 +710,5 @@ "use strict";
         name: '--cui-border-focus',
-        value: '#3064e3',
+        value: '#0f131a',
         type: 'color',
     },
 ];

dist/es/themes/light.d.ts

@@ -553,4 +553,4 @@ /**
     name: "--cui-border-focus";
-    value: "#3064e3";
+    value: "#0f131a";
     type: "color";
 })[];

dist/es/themes/light.js

@@ -707,5 +707,5 @@ /**
         name: '--cui-border-focus',
-        value: '#3064e3',
+        value: '#0f131a',
         type: 'color',
     },
 ];

package.json

 {
   "name": "@sumup/design-tokens",
-  "version": "7.2.0-next.3",
+  "version": "7.2.0",
   "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -25,12 +25,6 @@ <div align="center">
 
-The [legacy JavaScript theme](#legacy-javascript-theme) for Emotion.js is being replaced by [CSS custom properties](#css-custom-properties) (aka CSS variables) to improve performance and compatibility with other frameworks. We recommend installing the [`@sumup/eslint-plugin-circuit-ui`](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) ESLint plugin and turning on the `prefer-custom-properties` and `no-invalid-custom-properties` rules to help with the migration.
+The design tokens are exported as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Choose a [color scheme](#color-schemes), then import the corresponding CSS file globally in your application, such as in Next.js' `app/layout.tsx` file:
 
-Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/features-theme--docs) for a full reference of the available tokens.
-
-### CSS custom properties
-
-The `@sumup/design-tokens/light.css` CSS file contains all CSS custom properties that are used by Circuit UI. Import it globally in your application, such as in Next.js' `_app.tsx` file:
-
 ```tsx
-// _app.tsx
+// app/layout.tsx
 import '@sumup/design-tokens/light.css';
@@ -45,4 +39,25 @@
 
+Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/features-theme--docs) for a complete reference of the available tokens.
+
+### Color schemes
+
+#### Single color scheme
+
+For applications that support a single color scheme, import the `@sumup/design-tokens/light.css` or `@sumup/design-tokens/dark.css` themes. They contain the complete set of design tokens, in light and dark mode respectively. The tokens are defined globally on the `:root` element. The themes can be used independently or with a [scoped theme](#scoped-color-scheme).
+
+#### Scoped color scheme
+
+To apply a different color scheme to a subset of an application, import the `@sumup/design-tokens/light-scoped.css` or `@sumup/design-tokens/dark-scoped.css` themes. They contain only color tokens which are scoped to the `data-color-scheme="light"` and `data-color-scheme="dark"` selectors respectively. The themes must be used alongside a [full theme](#single-color-scheme) to ensure that all design tokens are defined.
+
+#### Multiple color schemes
+
+For applications that support switching between light and dark color schemes, import the `@sumup/design-tokens/dynamic.css` theme. It contains all tokens defined globally on the `:root` element, the dark color tokens scoped to the `prefers-color-scheme: dark` media query, and the [scoped themes](#scoped-color-scheme). By default, the color scheme follows the system settings. Add the `data-color-scheme` attribute on the document root to set a specific color scheme.
+
+Ensure that users have full control over their preferred color mode: dark, light, or match system. Their choice should be persisted between devices and sessions. There should be no [Flash of inAccurate coloR Theme (FART)](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/), regardless of whether the app is client-side or server-side rendered.
+
 ### Legacy JavaScript theme
 
+> [!WARNING]
+> The JavaScript theme is being replaced by [CSS custom properties](#usage) (aka CSS variables) to improve performance and compatibility with other frameworks. We recommend installing the [`@sumup/eslint-plugin-circuit-ui`](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) ESLint plugin and turning on the `prefer-custom-properties` and `no-invalid-custom-properties` rules to help with the migration.
+
 The `light` theme is meant to be used with Emotion.js' [`ThemeProvider`](https://emotion.sh/docs/theming):
@@ -80,3 +95,3 @@
 function ComponentWithInlineStyles({ theme, label }) {
-  return <div style={{ color: theme.colors.p500 }}>{label}</div>;
+  return <div style={{ borderRadius: theme.borderRadius.kilo }}>{label}</div>;
 }
@@ -98,3 +113,3 @@
 import '@emotion/react';
-import { Theme as CircuitUITheme } from '@sumup/design-tokens';
+import type { Theme as CircuitUITheme } from '@sumup/design-tokens';
 
@@ -101,0 +116,0 @@ declare module '@emotion/react' {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

332151

increased by0.53%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

116

increased by14.85%

No dependency changes