@cregis/tokens 1.0.0

package/README.md

@@ -0,0 +1,42 @@
+# @cregis/tokens
+
+Cregis 设计令牌（Design Tokens）—— 主题色、业务语义变量、尺寸及字体体系。
+
+## 分层结构
+
+```
+src/
+├── theme/          Layer 1  主题色（--eds-*），项目可覆盖
+├── semantic/       Layer 2  业务语义变量，引用 Layer 1，项目间统一
+├── scale/          尺寸刻度、间距、圆角、描边
+└── typography/     字体族、字号、字重、行高
+```
+
+## 使用
+
+```css
+/* 引入全部 token */
+@import '@cregis/tokens';
+
+/* 按需引入 */
+@import '@cregis/tokens/theme';
+@import '@cregis/tokens/semantic';
+@import '@cregis/tokens/scale';
+@import '@cregis/tokens/typography';
+```
+
+## 换肤
+
+业务项目在引入 token 后，覆盖 `--eds-*` 变量即可：
+
+```css
+@import '@cregis/tokens';
+
+:root {
+  --eds-brand: display-p3 0.8 0.2 0.2;      /* 你的品牌色 */
+  --eds-success: display-p3 0.2 0.8 0.2;
+  /* ... 仅覆盖需要变更的主题色 */
+}
+```
+
+Layer 2 的业务语义变量会自动跟随新的主题色计算，无需额外覆盖。

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@cregis/tokens",
+  "version": "1.0.0",
+  "description": "Design tokens for frontend projects",
+  "type": "module",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./desktop/*": "./src/desktop/*",
+    "./web/*": "./src/web/*",
+    "./mobile/*": "./src/mobile/*"
+  }
+}

package/src/desktop/color-definition.css

@@ -0,0 +1,172 @@
+:root {
+  --box-container: color(var(--eds-container) / 0.8);
+  --box-menu: color(var(--eds-menu) / 1);
+  --box-page: color(var(--eds-page) / 1);
+  --box-flotation: color(var(--eds-flotation) / 1);
+
+  --event-hover-primary: color(var(--eds-brand) / 1);
+  --event-hover-secondary: color(var(--eds-base) / 0.05);
+  --event-hover-tertiary: color(var(--eds-page) / 1);
+  --event-focus-primary: color(var(--eds-brand) / 1);
+  --event-focus-secondary: color(var(--eds-base) / 0.07);
+  --event-focus-tertiary: color(var(--eds-brand) / 0.2);
+
+  --text-brand-primary: color(var(--eds-brand) / 1);
+  --text-brand-secondary: color(var(--eds-brand) / 0.6);
+  --text-brand-tertiary: color(var(--eds-brand) / 0.4);
+  --text-brand-quaternary: color(var(--eds-brand) / 0.2);
+  --text-match: color(var(--eds-match) / 1);
+  --text-success: color(var(--eds-success) / 1);
+  --text-danger-primary: color(var(--eds-danger) / 1);
+  --text-danger-secondary: color(var(--eds-danger) / 0.6);
+  --text-danger-disable: color(var(--eds-danger) / 0.2);
+  --text-warning: color(var(--eds-warning) / 1);
+  --text-same-black-primary: color(var(--eds-same-black) / 1);
+  --text-same-black-secondary: color(var(--eds-same-black) / 0.6);
+  --text-same-white-primary: color(var(--eds-same-white) / 1);
+  --text-same-white-secondary: color(var(--eds-same-white) / 0.6);
+  --text-base-primary: color(var(--eds-base) / 1);
+  --text-base-secondary: color(var(--eds-base) / 0.6);
+  --text-base-tertiary: color(var(--eds-base) / 0.4);
+  --text-base-quaternary: color(var(--eds-base) / 0.2);
+  --text-face-primary: color(var(--eds-face) / 1);
+  --text-face-secondary: color(var(--eds-face) / 0.6);
+  --text-face-tertiary: color(var(--eds-face) / 0.4);
+  --text-face-quaternary: color(var(--eds-face) / 0.2);
+
+  --material-hide: color(var(--eds-base) / 0);
+  --material-brand-primary: color(var(--eds-brand) / 1);
+  --material-brand-tertiary: color(var(--eds-brand) / 0.4);
+  --material-brand-quaternary: color(var(--eds-brand) / 0.2);
+  --material-brand-subtle: color(var(--eds-brand) / 0.1);
+  --material-match-primary: color(var(--eds-match) / 1);
+  --material-match-quaternary: color(var(--eds-match) / 0.2);
+  --material-decor-primary: color(var(--eds-decor) / 1);
+  --material-decor-quaternary: color(var(--eds-decor) / 0.2);
+  --material-decor-primary-10: color(var(--eds-decor) / 0.1);
+  --material-success-primary: color(var(--eds-success) / 1);
+  --material-success-quaternary: color(var(--eds-success) / 0.2);
+  --material-danger-primary: color(var(--eds-danger) / 1);
+  --material-danger-quaternary: color(var(--eds-danger) / 0.2);
+  --material-warning-primary: color(var(--eds-warning) / 1);
+  --material-warning-quaternary: color(var(--eds-warning) / 0.2);
+  --material-same-black: color(var(--eds-same-black) / 1);
+  --material-same-white-primary: color(var(--eds-same-white) / 1);
+  --material-same-white-secondary: color(var(--eds-same-white) / 0.6);
+  --material-same-white-quaternary: color(var(--eds-same-white) / 0.8);
+  --material-card-shallow: color(var(--eds-base) / 0.02);
+  --material-card-moderate: color(var(--eds-base) / 0.05);
+  --material-card-subtle: color(var(--eds-base) / 0.04);
+  --material-card-deep: color(var(--eds-base) / 0.1);
+  --material-base-primary: color(var(--eds-base) / 1);
+  --material-base-secondary: color(var(--eds-base) / 0.6);
+  --material-base-tertiary: color(var(--eds-base) / 0.4);
+  --material-base-quaternary: color(var(--eds-base) / 0.2);
+  --material-face-primary: color(var(--eds-face) / 1);
+  --material-face-secondary: color(var(--eds-face) / 0.6);
+  --material-face-tertiary: color(var(--eds-face) / 0.4);
+  --material-face-quaternary: color(var(--eds-face) / 0.2);
+
+  --eds-data-table-head: color(var(--eds-data-table) / 0.9);
+  --eds-data-table-scroll-bar-background: color(var(--eds-data-table) / 0.9);
+  --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.04);
+  --eds-data-table-scroll-bar-indicator-hover: color(var(--eds-base) / 0.2);
+
+  --data-table-head: color(var(--eds-data-table) / 0.9);
+  --data-table-scroll-bar-background: color(var(--eds-data-table) / 0.9);
+  --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.04);
+  --data-table-scroll-bar-indicator-hover: color(var(--eds-base) / 0.2);
+
+  --effect-shadow-deep: color(var(--eds-same-black) / 0.2);
+  --effect-shadow-shallow: color(var(--eds-same-black) / 0.1);
+  --effect-popup-background: color(var(--eds-same-black) / 0.5);
+  --effect-popup-box: color(var(--eds-flotation) / 1);
+  --effect-flotation-box: color(var(--eds-flotation) / 1);
+  --effect-mask: color(var(--eds-page) / 0.6);
+  --effect-prompt: color(var(--eds-base) / 0.9);
+  --effect-subtle-shadow: color(var(--eds-same-black) / 0.03);
+  --effect-vulvar-shadow: color(var(--eds-same-black) / 0.2);
+  --effect-vulvar-shadow-glow: color(var(--eds-vulvar-glow) / 1);
+  --effect-inner-shadow: color(var(--eds-same-black) / 1);
+  --effect-inner-shadow-glow: color(var(--eds-inner-glow) / 1);
+
+  --stroke-hide: color(var(--eds-base) / 0);
+  --stroke-base-primary: color(var(--eds-base) / 1);
+  --stroke-base-secondary: color(var(--eds-base) / 0.6);
+  --stroke-base-tertiary: color(var(--eds-base) / 0.4);
+  --stroke-base-quaternary: color(var(--eds-base) / 0.2);
+  --stroke-face-primary: color(var(--eds-face) / 1);
+  --stroke-face-secondary: color(var(--eds-face) / 0.6);
+  --stroke-divider-module: color(var(--eds-module-stroke) / 1);
+  --stroke-divider-page: color(var(--eds-base) / 0.1);
+  --stroke-divider-table: color(var(--eds-base) / 0.09);
+  --stroke-outline-shallow: color(var(--eds-base) / 0.12);
+  --stroke-outline-deep: color(var(--eds-base) / 0.18);
+  --stroke-outline-subtle: color(var(--eds-base) / 0.06);
+  --stroke-color-brand: color(var(--eds-brand) / 1);
+  --stroke-color-brand-active: color(var(--eds-brand) / 0.6);
+  --stroke-color-table-hover: color(var(--eds-brand) / 0.4);
+  --stroke-color-success: color(var(--eds-success) / 1);
+  --stroke-color-decor: color(var(--eds-decor) / 1);
+  --stroke-color-danger: color(var(--eds-danger) / 1);
+  --stroke-color-danger-active: color(var(--eds-danger) / 0.6);
+  --stroke-same-white-primary: color(var(--eds-same-white) / 1);
+  --stroke-same-white-secondary: color(var(--eds-same-white) / 0.6);
+  --stroke-same-black-primary: color(var(--eds-same-black) / 1);
+  --stroke-same-black-secondary: color(var(--eds-same-black) / 0.6);
+}
+
+.dark {
+  --box-container: color(var(--eds-container) / 0.8);
+
+  --event-hover-secondary: color(var(--eds-base) / 0.07);
+  --event-focus-secondary: color(var(--eds-base) / 0.1);
+
+  --stroke-divider-table: color(var(--eds-base) / 0.07);
+
+  --material-same-white-quaternary: color(var(--eds-same-white) / 0.2);
+  --material-card-shallow: color(var(--eds-base) / 0.02);
+  --material-card-moderate: color(var(--eds-base) / 0.07);
+  --material-card-subtle: color(var(--eds-base) / 0.06);
+
+  --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
+
+  --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
+
+  --effect-shadow-deep: color(var(--eds-same-black) / 0.6);
+  --effect-shadow-shallow: color(var(--eds-same-black) / 0.3);
+  --effect-prompt: color(var(--eds-base) / 0.2);
+  --effect-subtle-shadow: color(var(--eds-same-black) / 0.2);
+
+  --stroke-outline-shallow: color(var(--eds-base) / 0.14);
+  --stroke-outline-deep: color(var(--eds-base) / 0.2);
+  --stroke-outline-subtle: color(var(--eds-base) / 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .system {
+    --box-container: color(var(--eds-container) / 0.8);
+
+    --event-hover-secondary: color(var(--eds-base) / 0.07);
+    --event-focus-secondary: color(var(--eds-base) / 0.1);
+
+    --stroke-divider-table: color(var(--eds-base) / 0.07);
+
+    --material-same-white-quaternary: color(var(--eds-same-white) / 0.2);
+    --material-card-shallow: color(var(--eds-base) / 0.02);
+    --material-card-moderate: color(var(--eds-base) / 0.07);
+    --material-card-subtle: color(var(--eds-base) / 0.06);
+
+    --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
+
+    --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
+
+    --effect-shadow-deep: color(var(--eds-same-black) / 0.6);
+    --effect-prompt: color(var(--eds-base) / 0.2);
+    --effect-subtle-shadow: color(var(--eds-same-black) / 0.2);
+
+    --stroke-outline-shallow: color(var(--eds-base) / 0.14);
+    --stroke-outline-deep: color(var(--eds-base) / 0.2);
+    --stroke-outline-subtle: color(var(--eds-base) / 0.1);
+  }
+}

package/src/desktop/index.css

@@ -0,0 +1,4 @@
+@import "./theme/default.css";
+@import "./color-definition.css";
+@import "./size/index.css";
+@import "./typography/index.css";

package/src/desktop/size/base.css

@@ -0,0 +1,37 @@
+:root {
+  --scale-0: 0px;
+  --scale-025: 1px;
+  --scale-05: 2px;
+  --scale-1: 4px;
+  --scale-1-5: 6px;
+  --scale-2: 8px;
+  --scale-2-5: 10px;
+  --scale-3: 12px;
+  --scale-4: 16px;
+  --scale-5: 20px;
+  --scale-6: 24px;
+  --scale-7: 28px;
+  --scale-8: 32px;
+  --scale-9: 36px;
+  --scale-10: 40px;
+  --scale-11: 44px;
+  --scale-12: 48px;
+  --scale-13: 52px;
+  --scale-14: 56px;
+  --scale-15: 60px;
+  --scale-16: 64px;
+  --scale-17: 68px;
+  --scale-18: 72px;
+  --scale-19: 76px;
+  --scale-20: 80px;
+  --scale-30: 120px;
+  --scale-40: 160px;
+  --scale-50: 200px;
+  --scale-full: 888px;
+
+  --stroke-xl: 2;
+  --stroke-lg: 1.4;
+  --stroke-md: 1.1;
+  --stroke-sm: 1;
+  --stroke-xs: 0.5;
+}

package/src/desktop/size/blur.css

@@ -0,0 +1,5 @@
+:root {
+  --blur-shallow: var(--scale-20);
+  --blur-deep: var(--scale-12);
+  --blur-subtle: var(--scale-4);
+}

package/src/desktop/size/depth.css

@@ -0,0 +1,5 @@
+:root {
+  --depth-shallow: var(--scale-6);
+  --depth-deep: var(--scale-2);
+  --depth-subtle: var(--scale-1-5);
+}

package/src/desktop/size/icon.css

@@ -0,0 +1,7 @@
+:root {
+  --icon-root: var(--scale-8);
+  --icon-xl: var(--scale-6);
+  --icon-lg: var(--scale-5);
+  --icon-md: var(--scale-4);
+  --icon-sm: var(--scale-3);
+}

package/src/desktop/size/index.css

@@ -0,0 +1,6 @@
+@import './base.css';
+@import './spacing.css';
+@import './radius.css';
+@import './blur.css';
+@import './depth.css';
+@import './icon.css';

package/src/desktop/size/radius.css

@@ -0,0 +1,9 @@
+:root {
+  --radius-0: var(--scale-0);
+  --radius-xs: var(--scale-1);
+  --radius-sm: var(--scale-2);
+  --radius-md: var(--scale-3);
+  --radius-lg: var(--scale-4);
+  --radius-frame: var(--scale-8);
+  --radius-full: var(--scale-full);
+}

package/src/desktop/size/spacing.css

@@ -0,0 +1,23 @@
+:root {
+  --spacing-0: var(--scale-0);
+  --spacing-025: var(--scale-025);
+  --spacing-0-5: var(--scale-05);
+  --spacing-1: var(--scale-1);
+  --spacing-1-5: var(--scale-1-5);
+  --spacing-2: var(--scale-2);
+  --spacing-2-5: var(--scale-2-5);
+  --spacing-3: var(--scale-3);
+  --spacing-4: var(--scale-4);
+  --spacing-5: var(--scale-5);
+  --spacing-6: var(--scale-6);
+  --spacing-7: var(--scale-7);
+  --spacing-8: var(--scale-8);
+  --spacing-9: var(--scale-9);
+  --spacing-10: var(--scale-10);
+  --spacing-11: var(--scale-11);
+  --spacing-12: var(--scale-12);
+  --spacing-14: var(--scale-14);
+  --spacing-16: var(--scale-16);
+  --spacing-18: var(--scale-18);
+  --spacing-20: var(--scale-20);
+}

package/src/desktop/theme/default.css

@@ -0,0 +1,69 @@
+:root {
+  /* 使用P3色彩空间定义颜色 */
+  --eds-brand: display-p3 0.1216 0.7647 0.3529;
+  --eds-match: display-p3 0 0.2275 0.4275;
+  --eds-decor: display-p3 0.0078 0.1765 0.0510;
+  --eds-success: display-p3 0.1216 0.7647 0.3529;
+  --eds-danger: display-p3 0.8431 0.2745 0.1765;
+  --eds-warning: display-p3 0.9216 0.5686 0.0784;
+  --eds-base: display-p3 0.0078 0.0118 0.0157;
+  --eds-face: display-p3 1 1 1;
+  --eds-same-black: display-p3 0.0078 0.0118 0.0157;
+  --eds-same-white: display-p3 1 1 1;
+  --eds-container: display-p3 0.9020 0.9059 0.9098;
+  --eds-menu: display-p3 0.9804 0.9843 0.9882;
+  --eds-page: display-p3 1 1 1;
+  --eds-popup: display-p3 1 1 1;
+  --eds-flotation: display-p3 1 1 1;
+  --eds-inner-glow: display-p3 0.1569 0.1569 0.1569;
+  --eds-vulvar-glow: display-p3 0.8627 0.8627 0.8627;
+  --eds-data-table: display-p3 0.9569 0.9608 0.9647;
+  --eds-module-stroke: display-p3 0.9216 0.9255 0.9294;
+}
+
+.dark {
+  --eds-brand: display-p3 0.1216 0.7647 0.3529;
+  --eds-match: display-p3 0 0.2549 0.4706;
+  --eds-decor: display-p3 1 1 1;
+  --eds-success: display-p3 0.1216 0.7647 0.3529;
+  --eds-danger: display-p3 0.9804 0.4118 0.3137;
+  --eds-warning: display-p3 1 0.6667 0.1961;
+  --eds-base: display-p3 1 1 1;
+  --eds-face: display-p3 0.0078 0.0118 0.0157;
+  --eds-same-black: display-p3 0.0078 0.0118 0.0157;
+  --eds-same-white: display-p3 1 1 1;
+  --eds-container: display-p3 0.1647 0.1765 0.1882;
+  --eds-menu: display-p3 0.1451 0.1569 0.1647;
+  --eds-page: display-p3 0.1176 0.1294 0.1373;
+  --eds-popup: display-p3 0.1373 0.1451 0.1529;
+  --eds-flotation: display-p3 0.1373 0.1451 0.1529;
+  --eds-inner-glow: display-p3 0.2353 0.2353 0.2353;
+  --eds-vulvar-glow: display-p3 0.8627 0.8627 0.8627;
+  --eds-data-table: display-p3 0.0941 0.0980 0.1020;
+  --eds-module-stroke: display-p3 0 0 0;
+}
+
+/* 当系统偏好为dark时, system class下的变量完整复刻dark class下的变量 */
+@media (prefers-color-scheme: dark) {
+  .system {
+    --eds-brand: display-p3 0.1216 0.7647 0.3529;
+    --eds-match: display-p3 0 0.2549 0.4706;
+    --eds-decor: display-p3 1 1 1;
+    --eds-success: display-p3 0.1216 0.7647 0.3529;
+    --eds-danger: display-p3 0.9804 0.4118 0.3137;
+    --eds-warning: display-p3 1 0.6667 0.1961;
+    --eds-base: display-p3 1 1 1;
+    --eds-face: display-p3 0.0078 0.0118 0.0157;
+    --eds-same-black: display-p3 0.0078 0.0118 0.0157;
+    --eds-same-white: display-p3 1 1 1;
+    --eds-container: display-p3 0.1647 0.1765 0.1882;
+    --eds-menu: display-p3 0.1451 0.1569 0.1647;
+    --eds-page: display-p3 0.1176 0.1294 0.1373;
+    --eds-popup: display-p3 0.1373 0.1451 0.1529;
+    --eds-flotation: display-p3 0.1373 0.1451 0.1529;
+    --eds-inner-glow: display-p3 0.2353 0.2353 0.2353;
+    --eds-vulvar-glow: display-p3 0.8627 0.8627 0.8627;
+    --eds-data-table: display-p3 0.0941 0.0980 0.1020;
+    --eds-module-stroke: display-p3 0 0 0;
+  }
+}

package/src/desktop/typography/combination.css

@@ -0,0 +1,31 @@
+:root {
+  --display-size: var(--font-size-4xl);
+  --display-line-height: var(--line-height-4xl);
+  --display-font-weight: var(--font-weight-bold);
+
+  --headline-size: var(--font-size-3xl);
+  --headline-line-height: var(--line-height-3xl);
+  --headline-font-weight: var(--font-weight-bold);
+
+  --title-size: var(--font-size-2xl);
+  --title-line-height: var(--line-height-2xl);
+  --title-font-weight: var(--font-weight-bold);
+
+  --body-size-large: var(--font-size-xl);
+  --body-size-medium: var(--font-size-lg);
+  --body-size-small: var(--font-size-md);
+  --body-line-height-large: var(--line-height-xl);
+  --body-line-height-medium: var(--line-height-lg);
+  --body-line-height-small: var(--line-height-md);
+  --body-font-weight: var(--font-weight-regular);
+  --body-font-weight-bold: var(--font-weight-medium);
+
+  --footnote-size: var(--font-size-sm);
+  --footnote-line-height: var(--line-height-sm);
+  --footnote-font-weight: var(--font-weight-regular);
+  --footnote-font-weight-strong: var(--font-weight-medium);
+
+  --bar-size: var(--font-size-xs);
+  --bar-line-height: var(--line-height-xs);
+  --bar-font-weight: var(--font-weight-medium);
+}

package/src/desktop/typography/font-family.css

@@ -0,0 +1,4 @@
+:root {
+  --eds-family-sans: "Cregis Display Sans", "PingFang SC", SourceHanSansSC-VF,
+  "Apple Color Emoji", "Segoe UI Emoji"
+}

package/src/desktop/typography/font-size.css

@@ -0,0 +1,10 @@
+:root {
+  --font-size-4xl: 40px;
+  --font-size-3xl: 25px;
+  --font-size-2xl: 21px;
+  --font-size-xl: 17px;
+  --font-size-lg: 15px;
+  --font-size-md: 13px;
+  --font-size-sm: 12px;
+  --font-size-xs: 11px;
+}

package/src/desktop/typography/font-weight.css

@@ -0,0 +1,5 @@
+:root {
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+}

package/src/desktop/typography/index.css

@@ -0,0 +1,5 @@
+@import './font-size.css';
+@import './font-weight.css';
+@import './line-height.css';
+@import './font-family.css';
+@import './combination.css';

package/src/desktop/typography/line-height.css

@@ -0,0 +1,10 @@
+:root {
+  --line-height-4xl: 48px;
+  --line-height-3xl: 32px;
+  --line-height-2xl: 28px;
+  --line-height-xl: 24px;
+  --line-height-lg: 22px;
+  --line-height-md: 18px;
+  --line-height-sm: 16px;
+  --line-height-xs: 14px;
+}

package/src/mobile/color-definition.css

@@ -0,0 +1,172 @@
+:root {
+  --box-container: color(var(--eds-container) / 0.8);
+  --box-menu: color(var(--eds-menu) / 1);
+  --box-page: color(var(--eds-page) / 1);
+  --box-flotation: color(var(--eds-flotation) / 1);
+
+  --event-hover-primary: color(var(--eds-brand) / 1);
+  --event-hover-secondary: color(var(--eds-base) / 0.05);
+  --event-hover-tertiary: color(var(--eds-page) / 1);
+  --event-focus-primary: color(var(--eds-brand) / 1);
+  --event-focus-secondary: color(var(--eds-base) / 0.07);
+  --event-focus-tertiary: color(var(--eds-brand) / 0.2);
+
+  --text-brand-primary: color(var(--eds-brand) / 1);
+  --text-brand-secondary: color(var(--eds-brand) / 0.6);
+  --text-brand-tertiary: color(var(--eds-brand) / 0.4);
+  --text-brand-quaternary: color(var(--eds-brand) / 0.2);
+  --text-match: color(var(--eds-match) / 1);
+  --text-success: color(var(--eds-success) / 1);
+  --text-danger-primary: color(var(--eds-danger) / 1);
+  --text-danger-secondary: color(var(--eds-danger) / 0.6);
+  --text-danger-disable: color(var(--eds-danger) / 0.2);
+  --text-warning: color(var(--eds-warning) / 1);
+  --text-same-black-primary: color(var(--eds-same-black) / 1);
+  --text-same-black-secondary: color(var(--eds-same-black) / 0.6);
+  --text-same-white-primary: color(var(--eds-same-white) / 1);
+  --text-same-white-secondary: color(var(--eds-same-white) / 0.6);
+  --text-base-primary: color(var(--eds-base) / 1);
+  --text-base-secondary: color(var(--eds-base) / 0.6);
+  --text-base-tertiary: color(var(--eds-base) / 0.4);
+  --text-base-quaternary: color(var(--eds-base) / 0.2);
+  --text-face-primary: color(var(--eds-face) / 1);
+  --text-face-secondary: color(var(--eds-face) / 0.6);
+  --text-face-tertiary: color(var(--eds-face) / 0.4);
+  --text-face-quaternary: color(var(--eds-face) / 0.2);
+
+  --material-hide: color(var(--eds-base) / 0);
+  --material-brand-primary: color(var(--eds-brand) / 1);
+  --material-brand-tertiary: color(var(--eds-brand) / 0.4);
+  --material-brand-quaternary: color(var(--eds-brand) / 0.2);
+  --material-brand-subtle: color(var(--eds-brand) / 0.1);
+  --material-match-primary: color(var(--eds-match) / 1);
+  --material-match-quaternary: color(var(--eds-match) / 0.2);
+  --material-decor-primary: color(var(--eds-decor) / 1);
+  --material-decor-quaternary: color(var(--eds-decor) / 0.2);
+  --material-decor-primary-10: color(var(--eds-decor) / 0.1);
+  --material-success-primary: color(var(--eds-success) / 1);
+  --material-success-quaternary: color(var(--eds-success) / 0.2);
+  --material-danger-primary: color(var(--eds-danger) / 1);
+  --material-danger-quaternary: color(var(--eds-danger) / 0.2);
+  --material-warning-primary: color(var(--eds-warning) / 1);
+  --material-warning-quaternary: color(var(--eds-warning) / 0.2);
+  --material-same-black: color(var(--eds-same-black) / 1);
+  --material-same-white-primary: color(var(--eds-same-white) / 1);
+  --material-same-white-secondary: color(var(--eds-same-white) / 0.6);
+  --material-same-white-quaternary: color(var(--eds-same-white) / 0.8);
+  --material-card-shallow: color(var(--eds-base) / 0.02);
+  --material-card-moderate: color(var(--eds-base) / 0.05);
+  --material-card-subtle: color(var(--eds-base) / 0.04);
+  --material-card-deep: color(var(--eds-base) / 0.1);
+  --material-base-primary: color(var(--eds-base) / 1);
+  --material-base-secondary: color(var(--eds-base) / 0.6);
+  --material-base-tertiary: color(var(--eds-base) / 0.4);
+  --material-base-quaternary: color(var(--eds-base) / 0.2);
+  --material-face-primary: color(var(--eds-face) / 1);
+  --material-face-secondary: color(var(--eds-face) / 0.6);
+  --material-face-tertiary: color(var(--eds-face) / 0.4);
+  --material-face-quaternary: color(var(--eds-face) / 0.2);
+
+  --eds-data-table-head: color(var(--eds-data-table) / 0.9);
+  --eds-data-table-scroll-bar-background: color(var(--eds-data-table) / 0.9);
+  --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.04);
+  --eds-data-table-scroll-bar-indicator-hover: color(var(--eds-base) / 0.2);
+
+  --data-table-head: color(var(--eds-data-table) / 0.9);
+  --data-table-scroll-bar-background: color(var(--eds-data-table) / 0.9);
+  --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.04);
+  --data-table-scroll-bar-indicator-hover: color(var(--eds-base) / 0.2);
+
+  --effect-shadow-deep: color(var(--eds-same-black) / 0.2);
+  --effect-shadow-shallow: color(var(--eds-same-black) / 0.1);
+  --effect-popup-background: color(var(--eds-same-black) / 0.5);
+  --effect-popup-box: color(var(--eds-flotation) / 1);
+  --effect-flotation-box: color(var(--eds-flotation) / 1);
+  --effect-mask: color(var(--eds-page) / 0.6);
+  --effect-prompt: color(var(--eds-base) / 0.9);
+  --effect-subtle-shadow: color(var(--eds-same-black) / 0.03);
+  --effect-vulvar-shadow: color(var(--eds-same-black) / 0.2);
+  --effect-vulvar-shadow-glow: color(var(--eds-vulvar-glow) / 1);
+  --effect-inner-shadow: color(var(--eds-same-black) / 1);
+  --effect-inner-shadow-glow: color(var(--eds-inner-glow) / 1);
+
+  --stroke-hide: color(var(--eds-base) / 0);
+  --stroke-base-primary: color(var(--eds-base) / 1);
+  --stroke-base-secondary: color(var(--eds-base) / 0.6);
+  --stroke-base-tertiary: color(var(--eds-base) / 0.4);
+  --stroke-base-quaternary: color(var(--eds-base) / 0.2);
+  --stroke-face-primary: color(var(--eds-face) / 1);
+  --stroke-face-secondary: color(var(--eds-face) / 0.6);
+  --stroke-divider-module: color(var(--eds-module-stroke) / 1);
+  --stroke-divider-page: color(var(--eds-base) / 0.1);
+  --stroke-divider-table: color(var(--eds-base) / 0.09);
+  --stroke-outline-shallow: color(var(--eds-base) / 0.12);
+  --stroke-outline-deep: color(var(--eds-base) / 0.18);
+  --stroke-outline-subtle: color(var(--eds-base) / 0.06);
+  --stroke-color-brand: color(var(--eds-brand) / 1);
+  --stroke-color-brand-active: color(var(--eds-brand) / 0.6);
+  --stroke-color-table-hover: color(var(--eds-brand) / 0.4);
+  --stroke-color-success: color(var(--eds-success) / 1);
+  --stroke-color-decor: color(var(--eds-decor) / 1);
+  --stroke-color-danger: color(var(--eds-danger) / 1);
+  --stroke-color-danger-active: color(var(--eds-danger) / 0.6);
+  --stroke-same-white-primary: color(var(--eds-same-white) / 1);
+  --stroke-same-white-secondary: color(var(--eds-same-white) / 0.6);
+  --stroke-same-black-primary: color(var(--eds-same-black) / 1);
+  --stroke-same-black-secondary: color(var(--eds-same-black) / 0.6);
+}
+
+.dark {
+  --box-container: color(var(--eds-container) / 0.8);
+
+  --event-hover-secondary: color(var(--eds-base) / 0.07);
+  --event-focus-secondary: color(var(--eds-base) / 0.1);
+
+  --stroke-divider-table: color(var(--eds-base) / 0.07);
+
+  --material-same-white-quaternary: color(var(--eds-same-white) / 0.2);
+  --material-card-shallow: color(var(--eds-base) / 0.02);
+  --material-card-moderate: color(var(--eds-base) / 0.07);
+  --material-card-subtle: color(var(--eds-base) / 0.06);
+
+  --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
+
+  --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
+
+  --effect-shadow-deep: color(var(--eds-same-black) / 0.6);
+  --effect-shadow-shallow: color(var(--eds-same-black) / 0.3);
+  --effect-prompt: color(var(--eds-base) / 0.2);
+  --effect-subtle-shadow: color(var(--eds-same-black) / 0.2);
+
+  --stroke-outline-shallow: color(var(--eds-base) / 0.14);
+  --stroke-outline-deep: color(var(--eds-base) / 0.2);
+  --stroke-outline-subtle: color(var(--eds-base) / 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .system {
+    --box-container: color(var(--eds-container) / 0.8);
+
+    --event-hover-secondary: color(var(--eds-base) / 0.07);
+    --event-focus-secondary: color(var(--eds-base) / 0.1);
+
+    --stroke-divider-table: color(var(--eds-base) / 0.07);
+
+    --material-same-white-quaternary: color(var(--eds-same-white) / 0.2);
+    --material-card-shallow: color(var(--eds-base) / 0.02);
+    --material-card-moderate: color(var(--eds-base) / 0.07);
+    --material-card-subtle: color(var(--eds-base) / 0.06);
+
+    --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
+
+    --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
+
+    --effect-shadow-deep: color(var(--eds-same-black) / 0.6);
+    --effect-prompt: color(var(--eds-base) / 0.2);
+    --effect-subtle-shadow: color(var(--eds-same-black) / 0.2);
+
+    --stroke-outline-shallow: color(var(--eds-base) / 0.14);
+    --stroke-outline-deep: color(var(--eds-base) / 0.2);
+    --stroke-outline-subtle: color(var(--eds-base) / 0.1);
+  }
+}

package/src/mobile/index.css

@@ -0,0 +1,4 @@
+@import "./theme/default.css";
+@import "./color-definition.css";
+@import "./size/index.css";
+@import "./typography/index.css";