@sumup-oss/design-tokens 10.0.3 → 10.1.0

package/consumer-scoped.css

@@ -180,6 +180,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;

package/consumer.css

@@ -180,6 +180,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;
@@ -449,6 +453,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;

package/dark.css

@@ -180,6 +180,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;
@@ -449,6 +453,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;

package/dist/cjs/themes/consumer.js

@@ -116,6 +116,7 @@ exports.consumer = [
         value: 'rgba(58, 16, 55, 0.6000)',
         type: 'color',
     },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-accent-strong',
         value: '#fbfbf9',
@@ -136,6 +137,7 @@ exports.consumer = [
         value: 'rgba(251, 251, 249, 0.1500)',
         type: 'color',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-neutral',
         value: 'rgba(104, 79, 98, 0.3500)',

package/dist/cjs/themes/dark.js

@@ -116,6 +116,7 @@ exports.dark = [
         value: 'rgba(26, 24, 22, 0.6000)',
         type: 'color',
     },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-accent-strong',
         value: '#f5f4ed',
@@ -136,6 +137,7 @@ exports.dark = [
         value: 'rgba(245, 244, 237, 0.1000)',
         type: 'color',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-neutral',
         value: '#2b2927',

package/dist/cjs/themes/light.js

@@ -116,6 +116,7 @@ exports.light = [
         value: 'rgba(227, 226, 214, 0.6000)',
         type: 'color',
     },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-accent-strong',
         value: '#1e1c1c',
@@ -136,6 +137,7 @@ exports.light = [
         value: 'rgba(30, 28, 28, 0.1000)',
         type: 'color',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-neutral',
         value: '#f0eee7',

package/dist/cjs/themes/schema.d.ts

@@ -95,19 +95,31 @@ export declare const schema: ({
 } | {
     name: "--cui-bg-accent-strong";
     type: "color";
-    deprecation?: undefined;
+    deprecation: {
+        replacement: "--cui-bg-strong";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-bg-accent-strong-hovered";
     type: "color";
-    deprecation?: undefined;
+    deprecation: {
+        replacement: "--cui-bg-strong-hovered";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-bg-accent-strong-pressed";
     type: "color";
-    deprecation?: undefined;
+    deprecation: {
+        replacement: "--cui-bg-strong-pressed";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-bg-accent-strong-disabled";
     type: "color";
-    deprecation?: undefined;
+    deprecation: {
+        replacement: "--cui-bg-strong-disabled";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-bg-neutral";
     type: "color";
@@ -717,21 +729,49 @@ export declare const schema: ({
     type: "fontWeight";
     deprecation?: undefined;
 } | {
-    name: "--cui-icon-sizes-kilo";
+    name: "--cui-icon-sizes-s";
     type: "dimension";
     deprecation?: undefined;
 } | {
-    name: "--cui-icon-sizes-mega";
+    name: "--cui-icon-sizes-m";
     type: "dimension";
     deprecation?: undefined;
 } | {
-    name: "--cui-icon-sizes-giga";
+    name: "--cui-icon-sizes-l";
     type: "dimension";
     deprecation?: undefined;
 } | {
-    name: "--cui-icon-sizes-tera";
+    name: "--cui-icon-sizes-xl";
     type: "dimension";
     deprecation?: undefined;
+} | {
+    name: "--cui-icon-sizes-kilo";
+    type: "dimension";
+    deprecation: {
+        replacement: "--cui-icon-sizes-s";
+        additionalInfo?: undefined;
+    };
+} | {
+    name: "--cui-icon-sizes-mega";
+    type: "dimension";
+    deprecation: {
+        replacement: "--cui-icon-sizes-m";
+        additionalInfo?: undefined;
+    };
+} | {
+    name: "--cui-icon-sizes-giga";
+    type: "dimension";
+    deprecation: {
+        replacement: "--cui-icon-sizes-l";
+        additionalInfo?: undefined;
+    };
+} | {
+    name: "--cui-icon-sizes-tera";
+    type: "dimension";
+    deprecation: {
+        replacement: "--cui-icon-sizes-xl";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-spacings-bit";
     type: "dimension";
@@ -937,144 +977,168 @@ export declare const schema: ({
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-l-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-one-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-l-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-two-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-two-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-three-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-three-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-four-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-s-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-four-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-s-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-one-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-l-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-one-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-l-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-two-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-two-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-three-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-three-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-four-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-s-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-four-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-s-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-sub-headline-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-s-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-sub-headline-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-s-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-one-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-one-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-two-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-s-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-two-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-s-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-large-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-l-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-large-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-l-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-z-index-default";
@@ -1111,5 +1175,8 @@ export declare const schema: ({
 } | {
     name: "--cui-z-index-toast";
     type: "number";
-    deprecation?: undefined;
+    deprecation: {
+        additionalInfo: string;
+        replacement?: undefined;
+    };
 })[];

package/dist/cjs/themes/schema.js

@@ -38,10 +38,28 @@ exports.schema = [
     { name: '--cui-bg-accent-hovered', type: 'color' },
     { name: '--cui-bg-accent-pressed', type: 'color' },
     { name: '--cui-bg-accent-disabled', type: 'color' },
-    { name: '--cui-bg-accent-strong', type: 'color' },
-    { name: '--cui-bg-accent-strong-hovered', type: 'color' },
-    { name: '--cui-bg-accent-strong-pressed', type: 'color' },
-    { name: '--cui-bg-accent-strong-disabled', type: 'color' },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
+    {
+        name: '--cui-bg-accent-strong',
+        type: 'color',
+        deprecation: { replacement: '--cui-bg-strong' },
+    },
+    {
+        name: '--cui-bg-accent-strong-hovered',
+        type: 'color',
+        deprecation: { replacement: '--cui-bg-strong-hovered' },
+    },
+    {
+        name: '--cui-bg-accent-strong-pressed',
+        type: 'color',
+        deprecation: { replacement: '--cui-bg-strong-pressed' },
+    },
+    {
+        name: '--cui-bg-accent-strong-disabled',
+        type: 'color',
+        deprecation: { replacement: '--cui-bg-strong-disabled' },
+    },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     /* Neutral backgrounds */
     { name: '--cui-bg-neutral', type: 'color' },
     { name: '--cui-bg-neutral-hovered', type: 'color' },
@@ -221,10 +239,32 @@ exports.schema = [
     { name: '--cui-font-weight-semibold', type: 'fontWeight' },
     { name: '--cui-font-weight-bold', type: 'fontWeight' },
     /* Icon sizes */
-    { name: '--cui-icon-sizes-kilo', type: 'dimension' },
-    { name: '--cui-icon-sizes-mega', type: 'dimension' },
-    { name: '--cui-icon-sizes-giga', type: 'dimension' },
-    { name: '--cui-icon-sizes-tera', type: 'dimension' },
+    { name: '--cui-icon-sizes-s', type: 'dimension' },
+    { name: '--cui-icon-sizes-m', type: 'dimension' },
+    { name: '--cui-icon-sizes-l', type: 'dimension' },
+    { name: '--cui-icon-sizes-xl', type: 'dimension' },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
+    {
+        name: '--cui-icon-sizes-kilo',
+        type: 'dimension',
+        deprecation: { replacement: '--cui-icon-sizes-s' },
+    },
+    {
+        name: '--cui-icon-sizes-mega',
+        type: 'dimension',
+        deprecation: { replacement: '--cui-icon-sizes-m' },
+    },
+    {
+        name: '--cui-icon-sizes-giga',
+        type: 'dimension',
+        deprecation: { replacement: '--cui-icon-sizes-l' },
+    },
+    {
+        name: '--cui-icon-sizes-tera',
+        type: 'dimension',
+        deprecation: { replacement: '--cui-icon-sizes-xl' },
+    },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     /* Spacings */
     { name: '--cui-spacings-bit', type: 'dimension' },
     { name: '--cui-spacings-byte', type: 'dimension' },
@@ -457,5 +497,13 @@ exports.schema = [
     { name: '--cui-z-index-tooltip', type: 'number' },
     { name: '--cui-z-index-header', type: 'number' },
     { name: '--cui-z-index-navigation', type: 'number' },
-    { name: '--cui-z-index-toast', type: 'number' },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
+    {
+        name: '--cui-z-index-toast',
+        type: 'number',
+        deprecation: {
+            additionalInfo: 'Use one of the existing z-index tokens instead.',
+        },
+    },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
 ];

package/dist/cjs/themes/shared.d.ts

@@ -88,6 +88,22 @@ export declare const shared: ({
     name: "--cui-letter-spacing-tight";
     value: "0rem";
     type: "dimension";
+} | {
+    name: "--cui-icon-sizes-s";
+    value: "1rem";
+    type: "dimension";
+} | {
+    name: "--cui-icon-sizes-m";
+    value: "1.5rem";
+    type: "dimension";
+} | {
+    name: "--cui-icon-sizes-l";
+    value: "2rem";
+    type: "dimension";
+} | {
+    name: "--cui-icon-sizes-xl";
+    value: "3rem";
+    type: "dimension";
 } | {
     name: "--cui-icon-sizes-kilo";
     value: "16px";

package/dist/cjs/themes/shared.js

@@ -117,6 +117,27 @@ exports.shared = [
         type: 'dimension',
     },
     /* Icon sizes */
+    {
+        name: '--cui-icon-sizes-s',
+        value: '1rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-m',
+        value: '1.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-l',
+        value: '2rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-xl',
+        value: '3rem',
+        type: 'dimension',
+    },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-icon-sizes-kilo',
         value: '16px',
@@ -137,6 +158,7 @@ exports.shared = [
         value: '48px',
         type: 'dimension',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     /* Spacings */
     {
         name: '--cui-spacings-bit',
@@ -543,11 +565,13 @@ exports.shared = [
         value: 800,
         type: 'number',
     },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-z-index-toast',
         value: 1100,
         type: 'number',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
 ];
 exports.sharedUntilGiga = [
     /* Typography */

package/dist/es/themes/consumer.js

@@ -113,6 +113,7 @@ export const consumer = [
         value: 'rgba(58, 16, 55, 0.6000)',
         type: 'color',
     },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-accent-strong',
         value: '#fbfbf9',
@@ -133,6 +134,7 @@ export const consumer = [
         value: 'rgba(251, 251, 249, 0.1500)',
         type: 'color',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-neutral',
         value: 'rgba(104, 79, 98, 0.3500)',

package/dist/es/themes/dark.js

@@ -113,6 +113,7 @@ export const dark = [
         value: 'rgba(26, 24, 22, 0.6000)',
         type: 'color',
     },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-accent-strong',
         value: '#f5f4ed',
@@ -133,6 +134,7 @@ export const dark = [
         value: 'rgba(245, 244, 237, 0.1000)',
         type: 'color',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-neutral',
         value: '#2b2927',

package/dist/es/themes/light.js

@@ -113,6 +113,7 @@ export const light = [
         value: 'rgba(227, 226, 214, 0.6000)',
         type: 'color',
     },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-accent-strong',
         value: '#1e1c1c',
@@ -133,6 +134,7 @@ export const light = [
         value: 'rgba(30, 28, 28, 0.1000)',
         type: 'color',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-bg-neutral',
         value: '#f0eee7',

package/dist/es/themes/schema.d.ts

@@ -95,19 +95,31 @@ export declare const schema: ({
 } | {
     name: "--cui-bg-accent-strong";
     type: "color";
-    deprecation?: undefined;
+    deprecation: {
+        replacement: "--cui-bg-strong";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-bg-accent-strong-hovered";
     type: "color";
-    deprecation?: undefined;
+    deprecation: {
+        replacement: "--cui-bg-strong-hovered";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-bg-accent-strong-pressed";
     type: "color";
-    deprecation?: undefined;
+    deprecation: {
+        replacement: "--cui-bg-strong-pressed";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-bg-accent-strong-disabled";
     type: "color";
-    deprecation?: undefined;
+    deprecation: {
+        replacement: "--cui-bg-strong-disabled";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-bg-neutral";
     type: "color";
@@ -717,21 +729,49 @@ export declare const schema: ({
     type: "fontWeight";
     deprecation?: undefined;
 } | {
-    name: "--cui-icon-sizes-kilo";
+    name: "--cui-icon-sizes-s";
     type: "dimension";
     deprecation?: undefined;
 } | {
-    name: "--cui-icon-sizes-mega";
+    name: "--cui-icon-sizes-m";
     type: "dimension";
     deprecation?: undefined;
 } | {
-    name: "--cui-icon-sizes-giga";
+    name: "--cui-icon-sizes-l";
     type: "dimension";
     deprecation?: undefined;
 } | {
-    name: "--cui-icon-sizes-tera";
+    name: "--cui-icon-sizes-xl";
     type: "dimension";
     deprecation?: undefined;
+} | {
+    name: "--cui-icon-sizes-kilo";
+    type: "dimension";
+    deprecation: {
+        replacement: "--cui-icon-sizes-s";
+        additionalInfo?: undefined;
+    };
+} | {
+    name: "--cui-icon-sizes-mega";
+    type: "dimension";
+    deprecation: {
+        replacement: "--cui-icon-sizes-m";
+        additionalInfo?: undefined;
+    };
+} | {
+    name: "--cui-icon-sizes-giga";
+    type: "dimension";
+    deprecation: {
+        replacement: "--cui-icon-sizes-l";
+        additionalInfo?: undefined;
+    };
+} | {
+    name: "--cui-icon-sizes-tera";
+    type: "dimension";
+    deprecation: {
+        replacement: "--cui-icon-sizes-xl";
+        additionalInfo?: undefined;
+    };
 } | {
     name: "--cui-spacings-bit";
     type: "dimension";
@@ -937,144 +977,168 @@ export declare const schema: ({
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-l-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-one-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-l-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-two-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-two-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-three-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-three-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-four-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-s-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-headline-four-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-s-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-one-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-l-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-one-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-l-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-two-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-two-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-three-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-three-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-four-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-s-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-title-four-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-display-s-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-sub-headline-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-s-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-sub-headline-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-headline-s-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-one-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-m-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-one-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-m-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-two-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-s-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-two-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-s-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-large-font-size";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-l-font-size";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-typography-body-large-line-height";
     type: "dimension";
     deprecation: {
         replacement: "--cui-body-l-line-height";
+        additionalInfo?: undefined;
     };
 } | {
     name: "--cui-z-index-default";
@@ -1111,5 +1175,8 @@ export declare const schema: ({
 } | {
     name: "--cui-z-index-toast";
     type: "number";
-    deprecation?: undefined;
+    deprecation: {
+        additionalInfo: string;
+        replacement?: undefined;
+    };
 })[];

package/dist/es/themes/schema.js

@@ -35,10 +35,28 @@ export const schema = [
     { name: '--cui-bg-accent-hovered', type: 'color' },
     { name: '--cui-bg-accent-pressed', type: 'color' },
     { name: '--cui-bg-accent-disabled', type: 'color' },
-    { name: '--cui-bg-accent-strong', type: 'color' },
-    { name: '--cui-bg-accent-strong-hovered', type: 'color' },
-    { name: '--cui-bg-accent-strong-pressed', type: 'color' },
-    { name: '--cui-bg-accent-strong-disabled', type: 'color' },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
+    {
+        name: '--cui-bg-accent-strong',
+        type: 'color',
+        deprecation: { replacement: '--cui-bg-strong' },
+    },
+    {
+        name: '--cui-bg-accent-strong-hovered',
+        type: 'color',
+        deprecation: { replacement: '--cui-bg-strong-hovered' },
+    },
+    {
+        name: '--cui-bg-accent-strong-pressed',
+        type: 'color',
+        deprecation: { replacement: '--cui-bg-strong-pressed' },
+    },
+    {
+        name: '--cui-bg-accent-strong-disabled',
+        type: 'color',
+        deprecation: { replacement: '--cui-bg-strong-disabled' },
+    },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     /* Neutral backgrounds */
     { name: '--cui-bg-neutral', type: 'color' },
     { name: '--cui-bg-neutral-hovered', type: 'color' },
@@ -218,10 +236,32 @@ export const schema = [
     { name: '--cui-font-weight-semibold', type: 'fontWeight' },
     { name: '--cui-font-weight-bold', type: 'fontWeight' },
     /* Icon sizes */
-    { name: '--cui-icon-sizes-kilo', type: 'dimension' },
-    { name: '--cui-icon-sizes-mega', type: 'dimension' },
-    { name: '--cui-icon-sizes-giga', type: 'dimension' },
-    { name: '--cui-icon-sizes-tera', type: 'dimension' },
+    { name: '--cui-icon-sizes-s', type: 'dimension' },
+    { name: '--cui-icon-sizes-m', type: 'dimension' },
+    { name: '--cui-icon-sizes-l', type: 'dimension' },
+    { name: '--cui-icon-sizes-xl', type: 'dimension' },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
+    {
+        name: '--cui-icon-sizes-kilo',
+        type: 'dimension',
+        deprecation: { replacement: '--cui-icon-sizes-s' },
+    },
+    {
+        name: '--cui-icon-sizes-mega',
+        type: 'dimension',
+        deprecation: { replacement: '--cui-icon-sizes-m' },
+    },
+    {
+        name: '--cui-icon-sizes-giga',
+        type: 'dimension',
+        deprecation: { replacement: '--cui-icon-sizes-l' },
+    },
+    {
+        name: '--cui-icon-sizes-tera',
+        type: 'dimension',
+        deprecation: { replacement: '--cui-icon-sizes-xl' },
+    },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     /* Spacings */
     { name: '--cui-spacings-bit', type: 'dimension' },
     { name: '--cui-spacings-byte', type: 'dimension' },
@@ -454,5 +494,13 @@ export const schema = [
     { name: '--cui-z-index-tooltip', type: 'number' },
     { name: '--cui-z-index-header', type: 'number' },
     { name: '--cui-z-index-navigation', type: 'number' },
-    { name: '--cui-z-index-toast', type: 'number' },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
+    {
+        name: '--cui-z-index-toast',
+        type: 'number',
+        deprecation: {
+            additionalInfo: 'Use one of the existing z-index tokens instead.',
+        },
+    },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
 ];

package/dist/es/themes/shared.d.ts

@@ -88,6 +88,22 @@ export declare const shared: ({
     name: "--cui-letter-spacing-tight";
     value: "0rem";
     type: "dimension";
+} | {
+    name: "--cui-icon-sizes-s";
+    value: "1rem";
+    type: "dimension";
+} | {
+    name: "--cui-icon-sizes-m";
+    value: "1.5rem";
+    type: "dimension";
+} | {
+    name: "--cui-icon-sizes-l";
+    value: "2rem";
+    type: "dimension";
+} | {
+    name: "--cui-icon-sizes-xl";
+    value: "3rem";
+    type: "dimension";
 } | {
     name: "--cui-icon-sizes-kilo";
     value: "16px";

package/dist/es/themes/shared.js

@@ -114,6 +114,27 @@ export const shared = [
         type: 'dimension',
     },
     /* Icon sizes */
+    {
+        name: '--cui-icon-sizes-s',
+        value: '1rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-m',
+        value: '1.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-l',
+        value: '2rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-xl',
+        value: '3rem',
+        type: 'dimension',
+    },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-icon-sizes-kilo',
         value: '16px',
@@ -134,6 +155,7 @@ export const shared = [
         value: '48px',
         type: 'dimension',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
     /* Spacings */
     {
         name: '--cui-spacings-bit',
@@ -540,11 +562,13 @@ export const shared = [
         value: 800,
         type: 'number',
     },
+    /* eslint-disable circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-z-index-toast',
         value: 1100,
         type: 'number',
     },
+    /* eslint-enable circuit-ui/no-deprecated-custom-properties */
 ];
 export const sharedUntilGiga = [
     /* Typography */

package/dynamic.css

@@ -180,6 +180,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;
@@ -449,6 +453,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;

package/light.css

@@ -180,6 +180,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;
@@ -449,6 +453,10 @@
   --cui-font-weight-bold: 650;
   --cui-letter-spacing: 0rem;
   --cui-letter-spacing-tight: 0rem;
+  --cui-icon-sizes-s: 1rem;
+  --cui-icon-sizes-m: 1.5rem;
+  --cui-icon-sizes-l: 2rem;
+  --cui-icon-sizes-xl: 3rem;
   --cui-icon-sizes-kilo: 16px;
   --cui-icon-sizes-mega: 24px;
   --cui-icon-sizes-giga: 32px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup-oss/design-tokens",
-  "version": "10.0.3",
+  "version": "10.1.0",
   "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@types/node": "^25.9.1",
     "browserslist": "^4.28.2",
-    "lightningcss": "^1.30.2",
+    "lightningcss": "^1.32.0",
     "tsx": "^4.22.3",
     "typescript": "^6.0.3",
     "vitest": "^4.1.5"