@sumup-oss/design-tokens 8.2.0 → 9.0.0-next.1

package/README.md

@@ -103,27 +103,6 @@ function App() {
 
 The theme is a plain JavaScript object, so you can use it in other ways, too.
 
-#### With prop types
-
-The package exports a `themePropType` which can be used to check the `theme` prop:
-
-```tsx
-import PropTypes from 'prop-types';
-import { withTheme } from '@emotion/react';
-import { themePropType } from '@sumup-oss/design-tokens';
-
-function ComponentWithInlineStyles({ theme, label }) {
-  return <div style={{ borderRadius: theme.borderRadius.kilo }}>{label}</div>;
-}
-
-ComponentWithInlineStyles.propTypes = {
-  theme: themePropType.isRequired,
-  label: PropTypes.string,
-};
-
-export default function withTheme(ComponentWithInlineStyles);
-```
-
 #### With TypeScript
 
 The package exports a `Theme` interface that can be used to augment Emotion.js' types as described in the [Emotion.js docs](https://emotion.sh/docs/typescript#define-a-theme):

package/dark.css

@@ -224,7 +224,242 @@
   --cui-z-index-default: 0;
   --cui-z-index-absolute: 1;
   --cui-z-index-input: 20;
-  --cui-z-index-popover: 30;
+  --cui-z-index-popover: 1000;
+  --cui-z-index-tooltip: 40;
+  --cui-z-index-header: 600;
+  --cui-z-index-backdrop: 700;
+  --cui-z-index-navigation: 800;
+  --cui-z-index-modal: 1000;
+  --cui-z-index-toast: 1100;
+}
+
+::backdrop {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
+  color-scheme: dark;
+  --cui-bg-normal: #171d24;
+  --cui-bg-normal-hovered: #212831;
+  --cui-bg-normal-pressed: #28313c;
+  --cui-bg-normal-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-subtle: #0c0f12;
+  --cui-bg-subtle-hovered: #212b31;
+  --cui-bg-subtle-pressed: #36434a;
+  --cui-bg-subtle-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-highlight: #363c41;
+  --cui-bg-highlight-hovered: #3d4249;
+  --cui-bg-highlight-pressed: #424950;
+  --cui-bg-highlight-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-strong: #fff;
+  --cui-bg-strong-hovered: #f6f8f9;
+  --cui-bg-strong-pressed: #e3e7eb;
+  --cui-bg-strong-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-accent: #0c0f12;
+  --cui-bg-accent-hovered: #20292e;
+  --cui-bg-accent-pressed: #313d43;
+  --cui-bg-accent-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-accent-strong: #e1e7ef;
+  --cui-bg-accent-strong-hovered: #fff;
+  --cui-bg-accent-strong-pressed: #fff;
+  --cui-bg-accent-strong-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-success: rgba(12, 211, 104, .2);
+  --cui-bg-success-hovered: rgba(12, 211, 104, .25);
+  --cui-bg-success-pressed: rgba(12, 211, 104, .3);
+  --cui-bg-success-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-success-strong: #0cd368;
+  --cui-bg-success-strong-hovered: #13e072;
+  --cui-bg-success-strong-pressed: #25e980;
+  --cui-bg-success-strong-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-warning: rgba(245, 158, 28, .2);
+  --cui-bg-warning-hovered: rgba(245, 158, 28, .25);
+  --cui-bg-warning-pressed: rgba(245, 158, 28, .3);
+  --cui-bg-warning-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-warning-strong: #f5b81c;
+  --cui-bg-warning-strong-hovered: #f7c440;
+  --cui-bg-warning-strong-pressed: #f7cb59;
+  --cui-bg-warning-strong-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-danger: rgba(255, 76, 53, .2);
+  --cui-bg-danger-hovered: rgba(255, 76, 53, .2);
+  --cui-bg-danger-pressed: rgba(255, 76, 53, .4);
+  --cui-bg-danger-disabled: rgba(255, 69, 60, .13);
+  --cui-bg-danger-strong: #ff4e37;
+  --cui-bg-danger-strong-hovered: #ff6259;
+  --cui-bg-danger-strong-pressed: #ff827b;
+  --cui-bg-danger-strong-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-promo: rgba(195, 83, 247, .2);
+  --cui-bg-promo-hovered: rgba(195, 83, 247, .25);
+  --cui-bg-promo-pressed: rgba(195, 83, 247, .3);
+  --cui-bg-promo-disabled: rgba(216, 232, 248, .08);
+  --cui-bg-promo-strong: #c353f7;
+  --cui-bg-promo-strong-hovered: #c768f3;
+  --cui-bg-promo-strong-pressed: #ce72f8;
+  --cui-bg-promo-strong-disabled: rgba(216, 232, 248, .08);
+  --cui-fg-normal: #fff;
+  --cui-fg-normal-hovered: rgba(255, 255, 255, .8);
+  --cui-fg-normal-pressed: #e3e7eb;
+  --cui-fg-normal-disabled: rgba(230, 224, 233, .2);
+  --cui-fg-subtle: rgba(223, 232, 241, .6);
+  --cui-fg-subtle-hovered: rgba(223, 232, 241, .7);
+  --cui-fg-subtle-pressed: rgba(223, 232, 241, .8);
+  --cui-fg-subtle-disabled: rgba(216, 232, 248, .2);
+  --cui-fg-placeholder: #555d62;
+  --cui-fg-placeholder-hovered: #687278;
+  --cui-fg-placeholder-pressed: #7c878d;
+  --cui-fg-placeholder-disabled: rgba(85, 93, 98, .5);
+  --cui-fg-on-strong: #0f131a;
+  --cui-fg-on-strong-hovered: #0f131a;
+  --cui-fg-on-strong-pressed: #0f131a;
+  --cui-fg-on-strong-disabled: rgba(216, 232, 248, .3);
+  --cui-fg-on-strong-subtle: rgba(15, 19, 26, .7);
+  --cui-fg-on-strong-subtle-hovered: rgba(15, 19, 26, .7);
+  --cui-fg-on-strong-subtle-pressed: rgba(15, 19, 26, .7);
+  --cui-fg-on-strong-subtle-disabled: rgba(216, 232, 248, .2);
+  --cui-fg-accent: #e1e7ef;
+  --cui-fg-accent-hovered: #fff;
+  --cui-fg-accent-pressed: #fff;
+  --cui-fg-accent-disabled: rgba(216, 232, 248, .3);
+  --cui-fg-success: #17db72;
+  --cui-fg-success-hovered: #13e072;
+  --cui-fg-success-pressed: #25e980;
+  --cui-fg-success-disabled: rgba(216, 232, 248, .3);
+  --cui-fg-warning: #f5b81c;
+  --cui-fg-warning-hovered: #f7c440;
+  --cui-fg-warning-pressed: #f7cb59;
+  --cui-fg-warning-disabled: rgba(216, 232, 248, .3);
+  --cui-fg-danger: #ff634e;
+  --cui-fg-danger-hovered: #ff5c47;
+  --cui-fg-danger-pressed: #ff6a57;
+  --cui-fg-danger-disabled: rgba(255, 178, 167, .7);
+  --cui-fg-promo: #cf7bf6;
+  --cui-fg-promo-hovered: #c768f3;
+  --cui-fg-promo-pressed: #ce72f8;
+  --cui-fg-promo-disabled: rgba(216, 232, 248, .3);
+  --cui-border-normal: rgba(223, 232, 241, .3);
+  --cui-border-normal-hovered: rgba(223, 232, 241, .35);
+  --cui-border-normal-pressed: rgba(223, 232, 241, .45);
+  --cui-border-normal-disabled: rgba(216, 232, 248, .3);
+  --cui-border-subtle: rgba(223, 232, 241, .15);
+  --cui-border-subtle-hovered: rgba(223, 232, 241, .2);
+  --cui-border-subtle-pressed: rgba(223, 232, 241, .3);
+  --cui-border-subtle-disabled: rgba(216, 232, 248, .1);
+  --cui-border-divider: rgba(216, 232, 248, .3);
+  --cui-border-divider-hovered: rgba(223, 232, 241, .35);
+  --cui-border-divider-pressed: rgba(223, 232, 241, .45);
+  --cui-border-divider-disabled: rgba(216, 232, 248, .15);
+  --cui-border-strong: #fff;
+  --cui-border-strong-hovered: #f6f8f9;
+  --cui-border-strong-pressed: #e3e7eb;
+  --cui-border-strong-disabled: rgba(216, 232, 248, .15);
+  --cui-border-accent: #fff;
+  --cui-border-accent-hovered: #f6f8f9;
+  --cui-border-accent-pressed: #e3e7eb;
+  --cui-border-accent-disabled: rgba(216, 232, 248, .15);
+  --cui-border-success: #0cd368;
+  --cui-border-success-hovered: #13e072;
+  --cui-border-success-pressed: #25e980;
+  --cui-border-success-disabled: rgba(216, 232, 248, .15);
+  --cui-border-warning: #f5b81c;
+  --cui-border-warning-hovered: #f7c440;
+  --cui-border-warning-pressed: #f7cb59;
+  --cui-border-warning-disabled: rgba(216, 232, 248, .15);
+  --cui-border-danger: #ff634e;
+  --cui-border-danger-hovered: #ff5c47;
+  --cui-border-danger-pressed: #ff6a57;
+  --cui-border-danger-disabled: rgba(255, 178, 167, .7);
+  --cui-border-promo: #c353f7;
+  --cui-border-promo-hovered: #c768f3;
+  --cui-border-promo-pressed: #ce72f8;
+  --cui-border-promo-disabled: rgba(216, 232, 248, .15);
+  --cui-bg-overlay: rgba(0, 0, 0, .7);
+  --cui-bg-elevated: #2f3438;
+  --cui-border-focus: #fff;
+  --cui-border-radius-bit: 4px;
+  --cui-border-radius-byte: 8px;
+  --cui-border-radius-kilo: 12px;
+  --cui-border-radius-mega: 16px;
+  --cui-border-radius-circle: 100%;
+  --cui-border-radius-pill: 999999px;
+  --cui-border-width-kilo: 1px;
+  --cui-border-width-mega: 2px;
+  --cui-font-stack-default: "Inter", "Inter-Fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --cui-font-stack-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+  --cui-font-weight-regular: 375;
+  --cui-font-weight-semibold: 560;
+  --cui-font-weight-bold: 630;
+  --cui-letter-spacing: -.01375rem;
+  --cui-letter-spacing-tight: -.08rem;
+  --cui-icon-sizes-kilo: 16px;
+  --cui-icon-sizes-mega: 24px;
+  --cui-icon-sizes-giga: 32px;
+  --cui-icon-sizes-tera: 48px;
+  --cui-spacings-bit: 4px;
+  --cui-spacings-byte: 8px;
+  --cui-spacings-kilo: 12px;
+  --cui-spacings-mega: 16px;
+  --cui-spacings-giga: 24px;
+  --cui-spacings-tera: 32px;
+  --cui-spacings-peta: 40px;
+  --cui-spacings-exa: 48px;
+  --cui-spacings-zetta: 56px;
+  --cui-transitions-default: .12s ease-in-out;
+  --cui-transitions-slow: .3s ease-in-out;
+  --cui-display-l-font-size: 4rem;
+  --cui-display-l-line-height: 4.5rem;
+  --cui-display-m-font-size: 3rem;
+  --cui-display-m-line-height: 3.5rem;
+  --cui-display-s-font-size: 2.5rem;
+  --cui-display-s-line-height: 2.875rem;
+  --cui-headline-l-font-size: 2rem;
+  --cui-headline-l-line-height: 2.25rem;
+  --cui-headline-m-font-size: 1.5rem;
+  --cui-headline-m-line-height: 1.625rem;
+  --cui-headline-s-font-size: 1.125rem;
+  --cui-headline-s-line-height: 1.375rem;
+  --cui-body-l-font-size: 1.25rem;
+  --cui-body-l-line-height: 1.5rem;
+  --cui-body-m-font-size: 1rem;
+  --cui-body-m-line-height: 1.375rem;
+  --cui-body-s-font-size: .875rem;
+  --cui-body-s-line-height: 1.25rem;
+  --cui-compact-l-font-size: 1.125rem;
+  --cui-compact-l-line-height: 1.5rem;
+  --cui-compact-m-font-size: .9375rem;
+  --cui-compact-m-line-height: 1.0625rem;
+  --cui-compact-s-font-size: .8125rem;
+  --cui-compact-s-line-height: .9375rem;
+  --cui-numeral-l-font-size: 3rem;
+  --cui-numeral-l-line-height: 3.375rem;
+  --cui-numeral-m-font-size: 1.5rem;
+  --cui-numeral-m-line-height: 1.75rem;
+  --cui-numeral-s-font-size: 1rem;
+  --cui-numeral-s-line-height: 1.375rem;
+  --cui-typography-headline-one-font-size: 2rem;
+  --cui-typography-headline-one-line-height: 2.25rem;
+  --cui-typography-headline-two-font-size: 1.375rem;
+  --cui-typography-headline-two-line-height: 1.625rem;
+  --cui-typography-headline-three-font-size: 1.375rem;
+  --cui-typography-headline-three-line-height: 1.625rem;
+  --cui-typography-headline-four-font-size: 1.125rem;
+  --cui-typography-headline-four-line-height: 1.375rem;
+  --cui-typography-title-one-font-size: 4rem;
+  --cui-typography-title-one-line-height: 4.5rem;
+  --cui-typography-title-two-font-size: 3rem;
+  --cui-typography-title-two-line-height: 3.5rem;
+  --cui-typography-title-three-font-size: 3rem;
+  --cui-typography-title-three-line-height: 3.5rem;
+  --cui-typography-title-four-font-size: 2.5rem;
+  --cui-typography-title-four-line-height: 2.875rem;
+  --cui-typography-sub-headline-font-size: 1.125rem;
+  --cui-typography-sub-headline-line-height: 1.375rem;
+  --cui-typography-body-one-font-size: 1rem;
+  --cui-typography-body-one-line-height: 1.375rem;
+  --cui-typography-body-two-font-size: .875rem;
+  --cui-typography-body-two-line-height: 1.25rem;
+  --cui-typography-body-large-font-size: 1.25rem;
+  --cui-typography-body-large-line-height: 1.5rem;
+  --cui-z-index-default: 0;
+  --cui-z-index-absolute: 1;
+  --cui-z-index-input: 20;
+  --cui-z-index-popover: 1000;
   --cui-z-index-tooltip: 40;
   --cui-z-index-header: 600;
   --cui-z-index-backdrop: 700;

package/dist/cjs/index.d.ts

@@ -14,7 +14,6 @@
  */
 import type { Theme } from './types/index.js';
 export { schema } from './themes/schema.js';
-export { themePropType } from './utils/theme-prop-type.js';
 /**
  * @deprecated
  *

package/dist/cjs/index.js

@@ -47,12 +47,10 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.light = exports.themePropType = exports.schema = void 0;
+exports.light = exports.schema = void 0;
 const legacy = __importStar(require("./themes/legacy/light.js"));
 var schema_js_1 = require("./themes/schema.js");
 Object.defineProperty(exports, "schema", { enumerable: true, get: function () { return schema_js_1.schema; } });
-var theme_prop_type_js_1 = require("./utils/theme-prop-type.js");
-Object.defineProperty(exports, "themePropType", { enumerable: true, get: function () { return theme_prop_type_js_1.themePropType; } });
 /**
  * @deprecated
  *

package/dist/cjs/scripts/build.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateTokens = validateTokens;
 exports.createCSSCustomProperties = createCSSCustomProperties;
 exports.createFontFaceDeclarations = createFontFaceDeclarations;
+/* eslint-disable import/no-extraneous-dependencies */
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const browserslist_1 = __importDefault(require("browserslist"));
@@ -36,7 +37,7 @@ function main() {
             {
                 type: 'tokens',
                 tokens: [...light_js_1.light, ...shared_js_1.shared],
-                selectors: [':root'],
+                selectors: [':root, ::backdrop'],
                 colorScheme: 'light',
             },
         ],
@@ -44,7 +45,7 @@ function main() {
             {
                 type: 'tokens',
                 tokens: [...dark_js_1.dark, ...shared_js_1.shared],
-                selectors: [':root'],
+                selectors: [':root, ::backdrop'],
                 colorScheme: 'dark',
             },
         ],
@@ -68,13 +69,13 @@ function main() {
             {
                 type: 'tokens',
                 tokens: [...light_js_1.light, ...shared_js_1.shared],
-                selectors: [':root'],
+                selectors: [':root, ::backdrop'],
                 colorScheme: 'light',
             },
             {
                 type: 'tokens',
                 tokens: dark_js_1.dark,
-                selectors: ['@media (prefers-color-scheme: dark)', ':root'],
+                selectors: ['@media (prefers-color-scheme: dark)', ':root, ::backdrop'],
                 colorScheme: 'dark',
             },
             {

package/dist/cjs/themes/shared.js

@@ -464,7 +464,7 @@ exports.shared = [
     },
     {
         name: '--cui-z-index-popover',
-        value: 30,
+        value: 1000,
         type: 'number',
     },
     {

package/dist/es/index.d.ts

@@ -14,7 +14,6 @@
  */
 import type { Theme } from './types/index.js';
 export { schema } from './themes/schema.js';
-export { themePropType } from './utils/theme-prop-type.js';
 /**
  * @deprecated
  *

package/dist/es/index.js

@@ -14,7 +14,6 @@
  */
 import * as legacy from './themes/legacy/light.js';
 export { schema } from './themes/schema.js';
-export { themePropType } from './utils/theme-prop-type.js';
 /**
  * @deprecated
  *

package/dist/es/scripts/build.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-disable import/no-extraneous-dependencies */
 import fs from 'node:fs';
 import path from 'node:path';
 import browserslist from 'browserslist';
@@ -28,7 +29,7 @@ function main() {
             {
                 type: 'tokens',
                 tokens: [...light, ...shared],
-                selectors: [':root'],
+                selectors: [':root, ::backdrop'],
                 colorScheme: 'light',
             },
         ],
@@ -36,7 +37,7 @@ function main() {
             {
                 type: 'tokens',
                 tokens: [...dark, ...shared],
-                selectors: [':root'],
+                selectors: [':root, ::backdrop'],
                 colorScheme: 'dark',
             },
         ],
@@ -60,13 +61,13 @@ function main() {
             {
                 type: 'tokens',
                 tokens: [...light, ...shared],
-                selectors: [':root'],
+                selectors: [':root, ::backdrop'],
                 colorScheme: 'light',
             },
             {
                 type: 'tokens',
                 tokens: dark,
-                selectors: ['@media (prefers-color-scheme: dark)', ':root'],
+                selectors: ['@media (prefers-color-scheme: dark)', ':root, ::backdrop'],
                 colorScheme: 'dark',
             },
             {

package/dist/es/themes/shared.js

@@ -461,7 +461,7 @@ export const shared = [
     },
     {
         name: '--cui-z-index-popover',
-        value: 30,
+        value: 1000,
         type: 'number',
     },
     {