@sumup-oss/design-tokens 8.0.0-next.0

package/light-scoped.css

@@ -0,0 +1,140 @@
+[data-color-scheme="light"] {
+  --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: #9da7b1;
+  --cui-fg-placeholder-hovered: #9da7b1;
+  --cui-fg-placeholder-pressed: #9da7b1;
+  --cui-fg-placeholder-disabled: rgba(157, 167, 177, .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;
+}

package/light.css

@@ -0,0 +1,201 @@
+:root {
+  --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: #9da7b1;
+  --cui-fg-placeholder-hovered: #9da7b1;
+  --cui-fg-placeholder-pressed: #9da7b1;
+  --cui-fg-placeholder-disabled: rgba(157, 167, 177, .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: aktiv-grotesk, Helvetica, 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: 400;
+  --cui-font-weight-bold: 700;
+  --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-typography-headline-one-font-size: 2rem;
+  --cui-typography-headline-one-line-height: 2.25rem;
+  --cui-typography-headline-two-font-size: 1.5rem;
+  --cui-typography-headline-two-line-height: 1.75rem;
+  --cui-typography-headline-three-font-size: 1.25rem;
+  --cui-typography-headline-three-line-height: 1.5rem;
+  --cui-typography-headline-four-font-size: 1.125rem;
+  --cui-typography-headline-four-line-height: 1.5rem;
+  --cui-typography-title-one-font-size: 7.5rem;
+  --cui-typography-title-one-line-height: 7.5rem;
+  --cui-typography-title-two-font-size: 6rem;
+  --cui-typography-title-two-line-height: 6rem;
+  --cui-typography-title-three-font-size: 4rem;
+  --cui-typography-title-three-line-height: 4rem;
+  --cui-typography-title-four-font-size: 3.5rem;
+  --cui-typography-title-four-line-height: 3.5rem;
+  --cui-typography-sub-headline-font-size: .875rem;
+  --cui-typography-sub-headline-line-height: 1.25rem;
+  --cui-typography-body-one-font-size: 1rem;
+  --cui-typography-body-one-line-height: 1.5rem;
+  --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.75rem;
+  --cui-z-index-default: 0;
+  --cui-z-index-absolute: 1;
+  --cui-z-index-input: 20;
+  --cui-z-index-popover: 30;
+  --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;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sumup-oss/design-tokens",
+  "version": "8.0.0-next.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",
+  "types": "dist/es/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "*.css"
+  ],
+  "repository": {
+    "type": "git",
+    "directory": "packages/design-tokens",
+    "url": "git+https://github.com/sumup-oss/circuit-ui.git"
+  },
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/sumup-oss/circuit-ui/issues"
+  },
+  "homepage": "https://github.com/sumup-oss/circuit-ui/tree/main/packages/design-tokens/README.md",
+  "scripts": {
+    "start": "tsc --watch",
+    "build": "npm run build:es && npm run build:cjs && npm run build:styles",
+    "build:es": "tsc",
+    "build:cjs": "tsc --project tsconfig.cjs.json",
+    "build:styles": "tsx ./scripts/build.ts",
+    "lint": "foundry run eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "browserslist": "^4.23.2",
+    "lightningcss": "^1.25.1",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.39",
+    "@types/prop-types": "^15.7.12",
+    "tsx": "^4.16.5",
+    "typescript": "^5.5.4"
+  }
+}