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

package/dynamic.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: initial;
+  --lightningcss-dark: ;
+  color-scheme: light;
+  --cui-bg-normal: #fff;
+  --cui-bg-normal-hovered: #e9edf2;
+  --cui-bg-normal-pressed: #bfc6cf;
+  --cui-bg-normal-disabled: rgba(255, 255, 255, .4);
+  --cui-bg-subtle: #f0f1f5;
+  --cui-bg-subtle-hovered: #e0e2ea;
+  --cui-bg-subtle-pressed: #9da7b1;
+  --cui-bg-subtle-disabled: rgba(227, 231, 235, .4);
+  --cui-bg-highlight: #e3e7eb;
+  --cui-bg-highlight-hovered: #c2c9d1;
+  --cui-bg-highlight-pressed: #9da7b1;
+  --cui-bg-highlight-disabled: rgba(15, 19, 26, .08);
+  --cui-bg-strong: #000;
+  --cui-bg-strong-hovered: #313941;
+  --cui-bg-strong-pressed: #4f5a65;
+  --cui-bg-strong-disabled: rgba(23, 29, 36, .4);
+  --cui-bg-accent: #eef0f2;
+  --cui-bg-accent-hovered: #e3e7eb;
+  --cui-bg-accent-pressed: #c2c9d1;
+  --cui-bg-accent-disabled: rgba(238, 240, 242, .4);
+  --cui-bg-accent-strong: #0f131a;
+  --cui-bg-accent-strong-hovered: #3b3f46;
+  --cui-bg-accent-strong-pressed: #6a737c;
+  --cui-bg-accent-strong-disabled: rgba(15, 19, 26, .4);
+  --cui-bg-success: #e9fbe9;
+  --cui-bg-success-hovered: #d7f8d7;
+  --cui-bg-success-pressed: #c1e8c1;
+  --cui-bg-success-disabled: rgba(233, 251, 233, .4);
+  --cui-bg-success-strong: #018850;
+  --cui-bg-success-strong-hovered: #007a4e;
+  --cui-bg-success-strong-pressed: #016c26;
+  --cui-bg-success-strong-disabled: rgba(1, 136, 80, .4);
+  --cui-bg-warning: #fdf4db;
+  --cui-bg-warning-hovered: #faeec6;
+  --cui-bg-warning-pressed: #f5dea3;
+  --cui-bg-warning-disabled: rgba(253, 244, 219, .4);
+  --cui-bg-warning-strong: #e87c00;
+  --cui-bg-warning-strong-hovered: #cc6d00;
+  --cui-bg-warning-strong-pressed: #b25c00;
+  --cui-bg-warning-strong-disabled: rgba(232, 124, 0, .4);
+  --cui-bg-danger: #fbe9e7;
+  --cui-bg-danger-hovered: #fcddd9;
+  --cui-bg-danger-pressed: #f2bbb5;
+  --cui-bg-danger-disabled: rgba(251, 233, 231, .64);
+  --cui-bg-danger-strong: #de331d;
+  --cui-bg-danger-strong-hovered: #bd2c19;
+  --cui-bg-danger-strong-pressed: #9e2415;
+  --cui-bg-danger-strong-disabled: rgba(222, 51, 29, .4);
+  --cui-bg-promo: #f5edfe;
+  --cui-bg-promo-hovered: #ede0fc;
+  --cui-bg-promo-pressed: #e0c9f8;
+  --cui-bg-promo-disabled: rgba(245, 237, 254, .4);
+  --cui-bg-promo-strong: #9e33e0;
+  --cui-bg-promo-strong-hovered: #8a1ecc;
+  --cui-bg-promo-strong-pressed: #7219a9;
+  --cui-bg-promo-strong-disabled: rgba(158, 51, 224, .4);
+  --cui-fg-normal: #0f131a;
+  --cui-fg-normal-hovered: #0f131a;
+  --cui-fg-normal-pressed: #0f131a;
+  --cui-fg-normal-disabled: rgba(15, 19, 26, .4);
+  --cui-fg-subtle: #6a737c;
+  --cui-fg-subtle-hovered: #6a737c;
+  --cui-fg-subtle-pressed: #6a737c;
+  --cui-fg-subtle-disabled: rgba(106, 115, 124, .4);
+  --cui-fg-placeholder: #929396;
+  --cui-fg-placeholder-hovered: #787a7c;
+  --cui-fg-placeholder-pressed: #484a51;
+  --cui-fg-placeholder-disabled: rgba(146, 147, 150, .4);
+  --cui-fg-on-strong: #fff;
+  --cui-fg-on-strong-hovered: #fff;
+  --cui-fg-on-strong-pressed: #fff;
+  --cui-fg-on-strong-disabled: rgba(255, 255, 255, .4);
+  --cui-fg-on-strong-subtle: rgba(255, 255, 255, .7);
+  --cui-fg-on-strong-subtle-hovered: rgba(255, 255, 255, .7);
+  --cui-fg-on-strong-subtle-pressed: rgba(255, 255, 255, .7);
+  --cui-fg-on-strong-subtle-disabled: rgba(255, 255, 255, .3);
+  --cui-fg-accent: #0f131a;
+  --cui-fg-accent-hovered: #52565d;
+  --cui-fg-accent-pressed: #676e7a;
+  --cui-fg-accent-disabled: rgba(15, 19, 26, .4);
+  --cui-fg-success: #018850;
+  --cui-fg-success-hovered: #007a4e;
+  --cui-fg-success-pressed: #016c26;
+  --cui-fg-success-disabled: rgba(1, 136, 80, .4);
+  --cui-fg-warning: #e27900;
+  --cui-fg-warning-hovered: #cc6d00;
+  --cui-fg-warning-pressed: #b25c00;
+  --cui-fg-warning-disabled: rgba(226, 121, 0, .4);
+  --cui-fg-danger: #de331d;
+  --cui-fg-danger-hovered: #bd2c19;
+  --cui-fg-danger-pressed: #9e2415;
+  --cui-fg-danger-disabled: rgba(222, 51, 29, .64);
+  --cui-fg-promo: #9e33e0;
+  --cui-fg-promo-hovered: #8a1ecc;
+  --cui-fg-promo-pressed: #7219a9;
+  --cui-fg-promo-disabled: rgba(158, 51, 224, .4);
+  --cui-border-normal: #aeb6be;
+  --cui-border-normal-hovered: #85919e;
+  --cui-border-normal-pressed: #687686;
+  --cui-border-normal-disabled: rgba(194, 201, 209, .4);
+  --cui-border-subtle: #e3e7ec;
+  --cui-border-subtle-hovered: #c2c9d1;
+  --cui-border-subtle-pressed: #9da7b1;
+  --cui-border-subtle-disabled: rgba(230, 230, 230, .4);
+  --cui-border-divider: #e3e7eb;
+  --cui-border-divider-hovered: #9da7b1;
+  --cui-border-divider-pressed: #6a737c;
+  --cui-border-divider-disabled: rgba(194, 201, 209, .4);
+  --cui-border-strong: #0f131a;
+  --cui-border-strong-hovered: #494a4a;
+  --cui-border-strong-pressed: #696969;
+  --cui-border-strong-disabled: rgba(15, 19, 26, .4);
+  --cui-border-accent: #0f131a;
+  --cui-border-accent-hovered: #52565d;
+  --cui-border-accent-pressed: #676e7a;
+  --cui-border-accent-disabled: rgba(15, 19, 26, .4);
+  --cui-border-success: #018850;
+  --cui-border-success-hovered: #007a4e;
+  --cui-border-success-pressed: #016c26;
+  --cui-border-success-disabled: rgba(1, 136, 80, .4);
+  --cui-border-warning: #e87c00;
+  --cui-border-warning-hovered: #cc6d00;
+  --cui-border-warning-pressed: #b25c00;
+  --cui-border-warning-disabled: rgba(226, 121, 0, .4);
+  --cui-border-danger: #de331d;
+  --cui-border-danger-hovered: #bd2c19;
+  --cui-border-danger-pressed: #9e2415;
+  --cui-border-danger-disabled: rgba(222, 51, 29, .4);
+  --cui-border-promo: #9e33e0;
+  --cui-border-promo-hovered: #8a1ecc;
+  --cui-border-promo-pressed: #7219a9;
+  --cui-border-promo-disabled: rgba(158, 51, 224, .4);
+  --cui-bg-overlay: rgba(0, 0, 0, .4);
+  --cui-bg-elevated: #fff;
+  --cui-border-focus: #0f131a;
+  --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;
@@ -374,6 +609,147 @@
     --cui-bg-elevated: #2f3438;
     --cui-border-focus: #fff;
   }
+
+  ::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;
+  }
 }
 
 [data-color-scheme="light"] {

package/light.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: initial;
+  --lightningcss-dark: ;
+  color-scheme: light;
+  --cui-bg-normal: #fff;
+  --cui-bg-normal-hovered: #e9edf2;
+  --cui-bg-normal-pressed: #bfc6cf;
+  --cui-bg-normal-disabled: rgba(255, 255, 255, .4);
+  --cui-bg-subtle: #f0f1f5;
+  --cui-bg-subtle-hovered: #e0e2ea;
+  --cui-bg-subtle-pressed: #9da7b1;
+  --cui-bg-subtle-disabled: rgba(227, 231, 235, .4);
+  --cui-bg-highlight: #e3e7eb;
+  --cui-bg-highlight-hovered: #c2c9d1;
+  --cui-bg-highlight-pressed: #9da7b1;
+  --cui-bg-highlight-disabled: rgba(15, 19, 26, .08);
+  --cui-bg-strong: #000;
+  --cui-bg-strong-hovered: #313941;
+  --cui-bg-strong-pressed: #4f5a65;
+  --cui-bg-strong-disabled: rgba(23, 29, 36, .4);
+  --cui-bg-accent: #eef0f2;
+  --cui-bg-accent-hovered: #e3e7eb;
+  --cui-bg-accent-pressed: #c2c9d1;
+  --cui-bg-accent-disabled: rgba(238, 240, 242, .4);
+  --cui-bg-accent-strong: #0f131a;
+  --cui-bg-accent-strong-hovered: #3b3f46;
+  --cui-bg-accent-strong-pressed: #6a737c;
+  --cui-bg-accent-strong-disabled: rgba(15, 19, 26, .4);
+  --cui-bg-success: #e9fbe9;
+  --cui-bg-success-hovered: #d7f8d7;
+  --cui-bg-success-pressed: #c1e8c1;
+  --cui-bg-success-disabled: rgba(233, 251, 233, .4);
+  --cui-bg-success-strong: #018850;
+  --cui-bg-success-strong-hovered: #007a4e;
+  --cui-bg-success-strong-pressed: #016c26;
+  --cui-bg-success-strong-disabled: rgba(1, 136, 80, .4);
+  --cui-bg-warning: #fdf4db;
+  --cui-bg-warning-hovered: #faeec6;
+  --cui-bg-warning-pressed: #f5dea3;
+  --cui-bg-warning-disabled: rgba(253, 244, 219, .4);
+  --cui-bg-warning-strong: #e87c00;
+  --cui-bg-warning-strong-hovered: #cc6d00;
+  --cui-bg-warning-strong-pressed: #b25c00;
+  --cui-bg-warning-strong-disabled: rgba(232, 124, 0, .4);
+  --cui-bg-danger: #fbe9e7;
+  --cui-bg-danger-hovered: #fcddd9;
+  --cui-bg-danger-pressed: #f2bbb5;
+  --cui-bg-danger-disabled: rgba(251, 233, 231, .64);
+  --cui-bg-danger-strong: #de331d;
+  --cui-bg-danger-strong-hovered: #bd2c19;
+  --cui-bg-danger-strong-pressed: #9e2415;
+  --cui-bg-danger-strong-disabled: rgba(222, 51, 29, .4);
+  --cui-bg-promo: #f5edfe;
+  --cui-bg-promo-hovered: #ede0fc;
+  --cui-bg-promo-pressed: #e0c9f8;
+  --cui-bg-promo-disabled: rgba(245, 237, 254, .4);
+  --cui-bg-promo-strong: #9e33e0;
+  --cui-bg-promo-strong-hovered: #8a1ecc;
+  --cui-bg-promo-strong-pressed: #7219a9;
+  --cui-bg-promo-strong-disabled: rgba(158, 51, 224, .4);
+  --cui-fg-normal: #0f131a;
+  --cui-fg-normal-hovered: #0f131a;
+  --cui-fg-normal-pressed: #0f131a;
+  --cui-fg-normal-disabled: rgba(15, 19, 26, .4);
+  --cui-fg-subtle: #6a737c;
+  --cui-fg-subtle-hovered: #6a737c;
+  --cui-fg-subtle-pressed: #6a737c;
+  --cui-fg-subtle-disabled: rgba(106, 115, 124, .4);
+  --cui-fg-placeholder: #929396;
+  --cui-fg-placeholder-hovered: #787a7c;
+  --cui-fg-placeholder-pressed: #484a51;
+  --cui-fg-placeholder-disabled: rgba(146, 147, 150, .4);
+  --cui-fg-on-strong: #fff;
+  --cui-fg-on-strong-hovered: #fff;
+  --cui-fg-on-strong-pressed: #fff;
+  --cui-fg-on-strong-disabled: rgba(255, 255, 255, .4);
+  --cui-fg-on-strong-subtle: rgba(255, 255, 255, .7);
+  --cui-fg-on-strong-subtle-hovered: rgba(255, 255, 255, .7);
+  --cui-fg-on-strong-subtle-pressed: rgba(255, 255, 255, .7);
+  --cui-fg-on-strong-subtle-disabled: rgba(255, 255, 255, .3);
+  --cui-fg-accent: #0f131a;
+  --cui-fg-accent-hovered: #52565d;
+  --cui-fg-accent-pressed: #676e7a;
+  --cui-fg-accent-disabled: rgba(15, 19, 26, .4);
+  --cui-fg-success: #018850;
+  --cui-fg-success-hovered: #007a4e;
+  --cui-fg-success-pressed: #016c26;
+  --cui-fg-success-disabled: rgba(1, 136, 80, .4);
+  --cui-fg-warning: #e27900;
+  --cui-fg-warning-hovered: #cc6d00;
+  --cui-fg-warning-pressed: #b25c00;
+  --cui-fg-warning-disabled: rgba(226, 121, 0, .4);
+  --cui-fg-danger: #de331d;
+  --cui-fg-danger-hovered: #bd2c19;
+  --cui-fg-danger-pressed: #9e2415;
+  --cui-fg-danger-disabled: rgba(222, 51, 29, .64);
+  --cui-fg-promo: #9e33e0;
+  --cui-fg-promo-hovered: #8a1ecc;
+  --cui-fg-promo-pressed: #7219a9;
+  --cui-fg-promo-disabled: rgba(158, 51, 224, .4);
+  --cui-border-normal: #aeb6be;
+  --cui-border-normal-hovered: #85919e;
+  --cui-border-normal-pressed: #687686;
+  --cui-border-normal-disabled: rgba(194, 201, 209, .4);
+  --cui-border-subtle: #e3e7ec;
+  --cui-border-subtle-hovered: #c2c9d1;
+  --cui-border-subtle-pressed: #9da7b1;
+  --cui-border-subtle-disabled: rgba(230, 230, 230, .4);
+  --cui-border-divider: #e3e7eb;
+  --cui-border-divider-hovered: #9da7b1;
+  --cui-border-divider-pressed: #6a737c;
+  --cui-border-divider-disabled: rgba(194, 201, 209, .4);
+  --cui-border-strong: #0f131a;
+  --cui-border-strong-hovered: #494a4a;
+  --cui-border-strong-pressed: #696969;
+  --cui-border-strong-disabled: rgba(15, 19, 26, .4);
+  --cui-border-accent: #0f131a;
+  --cui-border-accent-hovered: #52565d;
+  --cui-border-accent-pressed: #676e7a;
+  --cui-border-accent-disabled: rgba(15, 19, 26, .4);
+  --cui-border-success: #018850;
+  --cui-border-success-hovered: #007a4e;
+  --cui-border-success-pressed: #016c26;
+  --cui-border-success-disabled: rgba(1, 136, 80, .4);
+  --cui-border-warning: #e87c00;
+  --cui-border-warning-hovered: #cc6d00;
+  --cui-border-warning-pressed: #b25c00;
+  --cui-border-warning-disabled: rgba(226, 121, 0, .4);
+  --cui-border-danger: #de331d;
+  --cui-border-danger-hovered: #bd2c19;
+  --cui-border-danger-pressed: #9e2415;
+  --cui-border-danger-disabled: rgba(222, 51, 29, .4);
+  --cui-border-promo: #9e33e0;
+  --cui-border-promo-hovered: #8a1ecc;
+  --cui-border-promo-pressed: #7219a9;
+  --cui-border-promo-disabled: rgba(158, 51, 224, .4);
+  --cui-bg-overlay: rgba(0, 0, 0, .4);
+  --cui-bg-elevated: #fff;
+  --cui-border-focus: #0f131a;
+  --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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup-oss/design-tokens",
-  "version": "8.2.0",
+  "version": "9.0.0-next.1",
   "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -30,15 +30,11 @@
     "lint:fix": "npm run lint -- --fix",
     "test": "vitest"
   },
-  "dependencies": {
-    "browserslist": "^4.24.4",
-    "lightningcss": "^1.29.1",
-    "prop-types": "^15.8.1"
-  },
   "devDependencies": {
-    "@types/node": "^22.10.7",
-    "@types/prop-types": "^15.7.13",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.3"
+    "@types/node": "^22.13.11",
+    "browserslist": "^4.24.4",
+    "lightningcss": "^1.29.3",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2"
   }
 }