@sumup-oss/design-tokens 8.0.1 → 8.2.0

package/dark-scoped.css

@@ -66,10 +66,10 @@
   --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: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-hovered: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-pressed: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-disabled: rgba(216, 232, 248, .15);
+  --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;

package/dark.css

@@ -66,10 +66,10 @@
   --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: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-hovered: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-pressed: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-disabled: rgba(216, 232, 248, .15);
+  --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;
@@ -151,6 +151,7 @@
   --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;

package/dist/cjs/index.js

@@ -29,13 +29,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.light = exports.themePropType = exports.schema = void 0;
 const legacy = __importStar(require("./themes/legacy/light.js"));

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

@@ -270,19 +270,19 @@ export declare const dark: ({
     type: "color";
 } | {
     name: "--cui-fg-placeholder";
-    value: "rgba(223, 232, 241, 0.4000)";
+    value: "#555D62";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-hovered";
-    value: "rgba(223, 232, 241, 0.4000)";
+    value: "#687278";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-pressed";
-    value: "rgba(223, 232, 241, 0.4000)";
+    value: "#7C878D";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-disabled";
-    value: "rgba(216, 232, 248, 0.1500)";
+    value: "rgba(85, 93, 98, 0.500)";
     type: "color";
 } | {
     name: "--cui-fg-on-strong";

package/dist/cjs/themes/dark.js

@@ -338,22 +338,22 @@ exports.dark = [
     },
     {
         name: '--cui-fg-placeholder',
-        value: 'rgba(223, 232, 241, 0.4000)',
+        value: '#555D62',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-hovered',
-        value: 'rgba(223, 232, 241, 0.4000)',
+        value: '#687278',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-pressed',
-        value: 'rgba(223, 232, 241, 0.4000)',
+        value: '#7C878D',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-disabled',
-        value: 'rgba(216, 232, 248, 0.1500)',
+        value: 'rgba(85, 93, 98, 0.500)',
         type: 'color',
     },
     {

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

@@ -270,19 +270,19 @@ export declare const light: ({
     type: "color";
 } | {
     name: "--cui-fg-placeholder";
-    value: "#9da7b1";
+    value: "#929396";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-hovered";
-    value: "#9da7b1";
+    value: "#787A7C";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-pressed";
-    value: "#9da7b1";
+    value: "#484A51";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-disabled";
-    value: "rgba(157, 167, 177, 0.4000)";
+    value: "rgba(146, 147, 150, 0.4000)";
     type: "color";
 } | {
     name: "--cui-fg-on-strong";

package/dist/cjs/themes/light.js

@@ -338,22 +338,22 @@ exports.light = [
     },
     {
         name: '--cui-fg-placeholder',
-        value: '#9da7b1',
+        value: '#929396',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-hovered',
-        value: '#9da7b1',
+        value: '#787A7C',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-pressed',
-        value: '#9da7b1',
+        value: '#484A51',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-disabled',
-        value: 'rgba(157, 167, 177, 0.4000)',
+        value: 'rgba(146, 147, 150, 0.4000)',
         type: 'color',
     },
     {

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

@@ -788,6 +788,10 @@ export declare const schema: ({
     name: "--cui-letter-spacing";
     type: "dimension";
     deprecation?: undefined;
+} | {
+    name: "--cui-letter-spacing-tight";
+    type: "dimension";
+    deprecation?: undefined;
 } | {
     name: "--cui-typography-headline-one-font-size";
     type: "dimension";

package/dist/cjs/themes/schema.js

@@ -237,6 +237,7 @@ exports.schema = [
     { name: '--cui-numeral-s-font-size', type: 'dimension' },
     { name: '--cui-numeral-s-line-height', type: 'dimension' },
     { name: '--cui-letter-spacing', type: 'dimension' },
+    { name: '--cui-letter-spacing-tight', type: 'dimension' },
     /* eslint-disable @sumup-oss/circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-typography-headline-one-font-size',

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

@@ -68,6 +68,10 @@ export declare const shared: ({
     name: "--cui-letter-spacing";
     value: "-0.01375rem";
     type: "dimension";
+} | {
+    name: "--cui-letter-spacing-tight";
+    value: "-0.08rem";
+    type: "dimension";
 } | {
     name: "--cui-icon-sizes-kilo";
     value: "16px";

package/dist/cjs/themes/shared.js

@@ -90,6 +90,11 @@ exports.shared = [
         value: '-0.01375rem',
         type: 'dimension',
     },
+    {
+        name: '--cui-letter-spacing-tight',
+        value: '-0.08rem',
+        type: 'dimension',
+    },
     /* Icon sizes */
     {
         name: '--cui-icon-sizes-kilo',

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

@@ -270,19 +270,19 @@ export declare const dark: ({
     type: "color";
 } | {
     name: "--cui-fg-placeholder";
-    value: "rgba(223, 232, 241, 0.4000)";
+    value: "#555D62";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-hovered";
-    value: "rgba(223, 232, 241, 0.4000)";
+    value: "#687278";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-pressed";
-    value: "rgba(223, 232, 241, 0.4000)";
+    value: "#7C878D";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-disabled";
-    value: "rgba(216, 232, 248, 0.1500)";
+    value: "rgba(85, 93, 98, 0.500)";
     type: "color";
 } | {
     name: "--cui-fg-on-strong";

package/dist/es/themes/dark.js

@@ -335,22 +335,22 @@ export const dark = [
     },
     {
         name: '--cui-fg-placeholder',
-        value: 'rgba(223, 232, 241, 0.4000)',
+        value: '#555D62',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-hovered',
-        value: 'rgba(223, 232, 241, 0.4000)',
+        value: '#687278',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-pressed',
-        value: 'rgba(223, 232, 241, 0.4000)',
+        value: '#7C878D',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-disabled',
-        value: 'rgba(216, 232, 248, 0.1500)',
+        value: 'rgba(85, 93, 98, 0.500)',
         type: 'color',
     },
     {

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

@@ -270,19 +270,19 @@ export declare const light: ({
     type: "color";
 } | {
     name: "--cui-fg-placeholder";
-    value: "#9da7b1";
+    value: "#929396";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-hovered";
-    value: "#9da7b1";
+    value: "#787A7C";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-pressed";
-    value: "#9da7b1";
+    value: "#484A51";
     type: "color";
 } | {
     name: "--cui-fg-placeholder-disabled";
-    value: "rgba(157, 167, 177, 0.4000)";
+    value: "rgba(146, 147, 150, 0.4000)";
     type: "color";
 } | {
     name: "--cui-fg-on-strong";

package/dist/es/themes/light.js

@@ -335,22 +335,22 @@ export const light = [
     },
     {
         name: '--cui-fg-placeholder',
-        value: '#9da7b1',
+        value: '#929396',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-hovered',
-        value: '#9da7b1',
+        value: '#787A7C',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-pressed',
-        value: '#9da7b1',
+        value: '#484A51',
         type: 'color',
     },
     {
         name: '--cui-fg-placeholder-disabled',
-        value: 'rgba(157, 167, 177, 0.4000)',
+        value: 'rgba(146, 147, 150, 0.4000)',
         type: 'color',
     },
     {

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

@@ -788,6 +788,10 @@ export declare const schema: ({
     name: "--cui-letter-spacing";
     type: "dimension";
     deprecation?: undefined;
+} | {
+    name: "--cui-letter-spacing-tight";
+    type: "dimension";
+    deprecation?: undefined;
 } | {
     name: "--cui-typography-headline-one-font-size";
     type: "dimension";

package/dist/es/themes/schema.js

@@ -234,6 +234,7 @@ export const schema = [
     { name: '--cui-numeral-s-font-size', type: 'dimension' },
     { name: '--cui-numeral-s-line-height', type: 'dimension' },
     { name: '--cui-letter-spacing', type: 'dimension' },
+    { name: '--cui-letter-spacing-tight', type: 'dimension' },
     /* eslint-disable @sumup-oss/circuit-ui/no-deprecated-custom-properties */
     {
         name: '--cui-typography-headline-one-font-size',

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

@@ -68,6 +68,10 @@ export declare const shared: ({
     name: "--cui-letter-spacing";
     value: "-0.01375rem";
     type: "dimension";
+} | {
+    name: "--cui-letter-spacing-tight";
+    value: "-0.08rem";
+    type: "dimension";
 } | {
     name: "--cui-icon-sizes-kilo";
     value: "16px";

package/dist/es/themes/shared.js

@@ -87,6 +87,11 @@ export const shared = [
         value: '-0.01375rem',
         type: 'dimension',
     },
+    {
+        name: '--cui-letter-spacing-tight',
+        value: '-0.08rem',
+        type: 'dimension',
+    },
     /* Icon sizes */
     {
         name: '--cui-icon-sizes-kilo',

package/dynamic.css

@@ -66,10 +66,10 @@
   --cui-fg-subtle-hovered: #6a737c;
   --cui-fg-subtle-pressed: #6a737c;
   --cui-fg-subtle-disabled: rgba(106, 115, 124, .4);
-  --cui-fg-placeholder: #9da7b1;
-  --cui-fg-placeholder-hovered: #9da7b1;
-  --cui-fg-placeholder-pressed: #9da7b1;
-  --cui-fg-placeholder-disabled: rgba(157, 167, 177, .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;
@@ -151,6 +151,7 @@
   --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;
@@ -301,10 +302,10 @@
     --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: rgba(223, 232, 241, .4);
-    --cui-fg-placeholder-hovered: rgba(223, 232, 241, .4);
-    --cui-fg-placeholder-pressed: rgba(223, 232, 241, .4);
-    --cui-fg-placeholder-disabled: rgba(216, 232, 248, .15);
+    --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;
@@ -443,10 +444,10 @@
   --cui-fg-subtle-hovered: #6a737c;
   --cui-fg-subtle-pressed: #6a737c;
   --cui-fg-subtle-disabled: rgba(106, 115, 124, .4);
-  --cui-fg-placeholder: #9da7b1;
-  --cui-fg-placeholder-hovered: #9da7b1;
-  --cui-fg-placeholder-pressed: #9da7b1;
-  --cui-fg-placeholder-disabled: rgba(157, 167, 177, .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;
@@ -584,10 +585,10 @@
   --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: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-hovered: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-pressed: rgba(223, 232, 241, .4);
-  --cui-fg-placeholder-disabled: rgba(216, 232, 248, .15);
+  --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;

package/light-scoped.css

@@ -66,10 +66,10 @@
   --cui-fg-subtle-hovered: #6a737c;
   --cui-fg-subtle-pressed: #6a737c;
   --cui-fg-subtle-disabled: rgba(106, 115, 124, .4);
-  --cui-fg-placeholder: #9da7b1;
-  --cui-fg-placeholder-hovered: #9da7b1;
-  --cui-fg-placeholder-pressed: #9da7b1;
-  --cui-fg-placeholder-disabled: rgba(157, 167, 177, .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;

package/light.css

@@ -66,10 +66,10 @@
   --cui-fg-subtle-hovered: #6a737c;
   --cui-fg-subtle-pressed: #6a737c;
   --cui-fg-subtle-disabled: rgba(106, 115, 124, .4);
-  --cui-fg-placeholder: #9da7b1;
-  --cui-fg-placeholder-hovered: #9da7b1;
-  --cui-fg-placeholder-pressed: #9da7b1;
-  --cui-fg-placeholder-disabled: rgba(157, 167, 177, .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;
@@ -151,6 +151,7 @@
   --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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup-oss/design-tokens",
-  "version": "8.0.1",
+  "version": "8.2.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",
@@ -31,14 +31,14 @@
     "test": "vitest"
   },
   "dependencies": {
-    "browserslist": "^4.24.2",
-    "lightningcss": "^1.27.0",
+    "browserslist": "^4.24.4",
+    "lightningcss": "^1.29.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.10.7",
     "@types/prop-types": "^15.7.13",
     "tsx": "^4.19.2",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.3"
   }
 }