@cregis/tokens 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +165 -19
  2. package/package.json +1 -1
  3. package/src/desktop/.claude/settings.local.json +8 -0
  4. package/src/desktop/color-definition.css +148 -148
  5. package/src/desktop/index.css +1 -1
  6. package/src/desktop/theme.css +68 -0
  7. package/src/mobile/color-definition.css +148 -148
  8. package/src/mobile/index.css +1 -1
  9. package/src/mobile/theme.css +68 -0
  10. package/src/web/color-definition.css +148 -148
  11. package/src/web/index.css +1 -1
  12. package/src/web/theme.css +68 -0
  13. package/src/desktop/theme/default.css +0 -69
  14. package/src/mobile/theme/default.css +0 -69
  15. package/src/web/theme/default.css +0 -69
package/README.md CHANGED
@@ -1,42 +1,188 @@
1
1
  # @cregis/tokens
2
2
 
3
- Cregis 设计令牌（Design Tokens）—— 主题色、业务语义变量、尺寸及字体体系。
3
+ Cregis 设计令牌（Design Tokens）—— 面向桌面端、Web 端、移动端三平台的 CSS 自定义属性体系，涵盖主题色、语义颜色、尺寸刻度、图标、阴影及排版。
4
4
 
5
- ## 分层结构
5
+ ## 目录结构
6
6
 
7
7
  ```
8
8
  src/
9
- ├── theme/ Layer 1 主题色（--eds-*），项目可覆盖
10
- ├── semantic/ Layer 2 业务语义变量，引用 Layer 1，项目间统一
11
- ├── scale/ 尺寸刻度、间距、圆角、描边
12
- └── typography/ 字体族、字号、字重、行高
9
+ ├── desktop/
10
+ │ ├── index.css 入口，汇总导入以下模块
11
+ │ ├── theme.css 主题色定义（--eds-* 变量，亮色 / 暗色 / 跟随系统）
12
+ │ ├── color-definition.css 语义颜色（box / text / material / stroke / effect / event / data-table）
13
+ │ ├── size/
14
+ │ │ ├── base.css 基础刻度（--scale-*）、描边宽度（--stroke-*）
15
+ │ │ ├── spacing.css 间距（--spacing-*）
16
+ │ │ ├── radius.css 圆角（--radius-*）
17
+ │ │ ├── blur.css 模糊（--blur-*）
18
+ │ │ ├── depth.css 阴影深度层级（--depth-*）
19
+ │ │ └── icon.css 图标尺寸（--icon-*）
20
+ │ └── typography/
21
+ │ ├── font-family.css 字体族
22
+ │ ├── font-size.css 字号
23
+ │ ├── font-weight.css 字重
24
+ │ ├── line-height.css 行高
25
+ │ └── combination.css 排版组合（display / headline / title / body / footnote / bar）
26
+ ├── web/ Web 端（结构同 desktop）
27
+ └── mobile/ 移动端（结构同 desktop）
28
+ ```
29
+
30
+ ## 安装
31
+
32
+ ```bash
33
+ npm install @cregis/tokens
13
34
  ```
14
35
 
15
36
  ## 使用
16
37
 
17
38
  ```css
18
- /* 引入全部 token */
19
- @import '@cregis/tokens';
39
+ /* 引入桌面端全部 token */
40
+ @import '@cregis/tokens/desktop/index.css';
41
+
42
+ /* 引入 Web 端全部 token */
43
+ @import '@cregis/tokens/web/index.css';
44
+
45
+ /* 引入移动端全部 token */
46
+ @import '@cregis/tokens/mobile/index.css';
20
47
 
21
- /* 按需引入 */
22
- @import '@cregis/tokens/theme';
23
- @import '@cregis/tokens/semantic';
24
- @import '@cregis/tokens/scale';
25
- @import '@cregis/tokens/typography';
48
+ /* 按需引入模块 */
49
+ @import '@cregis/tokens/desktop/theme.css';
50
+ @import '@cregis/tokens/desktop/color-definition.css';
51
+ @import '@cregis/tokens/desktop/size/index.css';
52
+ @import '@cregis/tokens/desktop/typography/index.css';
26
53
  ```
27
54
 
28
55
  ## 换肤
29
56
 
30
- 业务项目在引入 token 后，覆盖 `--eds-*` 变量即可：
57
+ 引入 token 后，覆盖 `--eds-*` 主题变量即可完成换肤。语义颜色变量（`color-definition.css`）通过 `color-mix()` 引用主题变量并叠加透明度，自动跟随主题变化，无需额外覆盖。
58
+
59
+ ### 亮色 / 暗色模式
60
+
61
+ `theme.css` 在 `:root` 定义亮色主题，同时提供 `.dark` 类切换暗色：
31
62
 
32
63
  ```css
33
- @import '@cregis/tokens';
64
+ @import '@cregis/tokens/desktop/index.css';
34
65
 
66
+ /* 自定义品牌色（覆盖 :root 中的 --eds-brand） */
35
67
  :root {
36
- --eds-brand: display-p3 0.8 0.2 0.2; /* 你的品牌色 */
37
- --eds-success: display-p3 0.2 0.8 0.2;
38
- /* ... 仅覆盖需要变更的主题色 */
68
+ --eds-brand: color(display-p3 0.8 0.2 0.2);
39
69
  }
40
70
  ```
41
71
 
42
- Layer 2 的业务语义变量会自动跟随新的主题色计算，无需额外覆盖。
72
+ ```html
73
+ <!-- 亮色模式（默认） -->
74
+ <body>...</body>
75
+
76
+ <!-- 暗色模式 -->
77
+ <body class="dark">...</body>
78
+ ```
79
+
80
+ ### 跟随系统
81
+
82
+ 使用 `.system` 类，主题会通过 `prefers-color-scheme: dark` 媒体查询自动切换：
83
+
84
+ ```html
85
+ <body class="system">...</body>
86
+ ```
87
+
88
+ ## 色彩体系
89
+
90
+ 颜色使用 `display-p3` 色彩空间定义。主题色在 `theme.css` 中定义为 `--eds-*` 变量，语义颜色在 `color-definition.css` 中通过 `color-mix(in oklch, ...)` 引用主题变量并混合透明度，例如：
91
+
92
+ ```css
93
+ --text-brand-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
94
+ --text-brand-secondary: color-mix(in oklch, var(--eds-brand) 60%, transparent);
95
+ ```
96
+
97
+ ### 主题色变量（--eds-*）
98
+
99
+ | 变量 | 说明 |
100
+ |------|------|
101
+ | `--eds-brand` | 品牌色 |
102
+ | `--eds-match` | 匹配/强调色 |
103
+ | `--eds-decor` | 装饰色 |
104
+ | `--eds-success` | 成功/正向 |
105
+ | `--eds-danger` | 危险/错误 |
106
+ | `--eds-warning` | 警告 |
107
+ | `--eds-base` | 基础内容色（亮色模式黑，暗色模式白） |
108
+ | `--eds-face` | 基础表面色（亮色模式白，暗色模式黑） |
109
+ | `--eds-same-black` | 恒定黑色 |
110
+ | `--eds-same-white` | 恒定白色 |
111
+ | `--eds-container` | 容器背景 |
112
+ | `--eds-menu` | 菜单背景 |
113
+ | `--eds-page` | 页面背景 |
114
+ | `--eds-popup` | 弹出层背景 |
115
+ | `--eds-flotation` | 浮层背景 |
116
+ | `--eds-inner-glow` | 内阴影发光色 |
117
+ | `--eds-vulvar-glow` | 外阴影发光色 |
118
+ | `--eds-data-table` | 数据表格背景 |
119
+ | `--eds-module-stroke` | 模块描边色 |
120
+
121
+ ### 语义变量类别
122
+
123
+ | 类别 | 前缀 | 说明 |
124
+ |------|------|------|
125
+ | box | `--box-*` | 容器背景色（container / menu / page / flotation） |
126
+ | text | `--text-*` | 文本颜色（brand / success / danger / warning 等，含多级透明度） |
127
+ | material | `--material-*` | 材质/组件色（brand / match / decor / success / danger 等，含多级透明度） |
128
+ | stroke | `--stroke-*` | 描边颜色（base / face / divider / outline / brand 等） |
129
+ | effect | `--effect-*` | 效果颜色（shadow / popup / mask / prompt 等） |
130
+ | event | `--event-*` | 交互状态色（hover / focus） |
131
+ | data-table | `--data-table-*` | 数据表格相关颜色 |
132
+
133
+ ## 尺寸体系
134
+
135
+ 基于 4px 步进的刻度系统，覆盖 0 到 888px。
136
+
137
+ ### 刻度（--scale-*）
138
+
139
+ | 变量 | 值 |
140
+ |------|-----|
141
+ | `--scale-0` | 0px |
142
+ | `--scale-1` | 4px |
143
+ | `--scale-2` | 8px |
144
+ | `--scale-3` | 12px |
145
+ | `--scale-4` | 16px |
146
+ | `--scale-8` | 32px |
147
+ | `--scale-16` | 64px |
148
+ | `--scale-20` | 80px |
149
+ | `--scale-full` | 888px |
150
+
151
+ ### 间距（--spacing-*）
152
+
153
+ `--spacing-0` 至 `--spacing-20`，与刻度一一对应。
154
+
155
+ ### 圆角（--radius-*）
156
+
157
+ | 变量 | 值 |
158
+ |------|-----|
159
+ | `--radius-xs` | 4px |
160
+ | `--radius-sm` | 8px |
161
+ | `--radius-md` | 12px |
162
+ | `--radius-lg` | 16px |
163
+ | `--radius-frame` | 32px |
164
+ | `--radius-full` | 888px（胶囊形） |
165
+
166
+ ### 其他
167
+
168
+ - **图标**：`--icon-sm`(12px) / `--icon-md`(16px) / `--icon-lg`(20px) / `--icon-xl`(24px) / `--icon-root`(32px)
169
+ - **模糊**：`--blur-subtle`(16px) / `--blur-deep`(48px) / `--blur-shallow`(80px)
170
+ - **阴影深度**：`--depth-subtle`(6px) / `--depth-deep`(8px) / `--depth-shallow`(24px)
171
+ - **描边宽度**：`--stroke-xs`(0.5) 至 `--stroke-xl`(2)
172
+
173
+ ## 排版
174
+
175
+ 提供字体族、字号、字重、行高的原子变量，通过 `combination.css` 组合为语义化排版样式：
176
+
177
+ | 组合变量 | 用途 |
178
+ |----------|------|
179
+ | `--display-*` | 展示/大标题 |
180
+ | `--headline-*` | 标题 |
181
+ | `--title-*` | 次级标题 |
182
+ | `--body-*` | 正文（large / medium / small） |
183
+ | `--footnote-*` | 脚注 |
184
+ | `--bar-*` | 标签栏/辅助文字 |
185
+
186
+ ## License
187
+
188
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cregis/tokens",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Design tokens for frontend projects",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/desktop/.claude/settings.local.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "permissions": {
3
+ "allow": [
4
+ "Bash(git:*)",
5
+ "Bash(python3:*)"
6
+ ]
7
+ }
8
+ }
package/src/desktop/color-definition.css CHANGED
@@ -1,172 +1,172 @@
1
1
  :root {
2
- --box-container: color(var(--eds-container) / 0.8);
3
- --box-menu: color(var(--eds-menu) / 1);
4
- --box-page: color(var(--eds-page) / 1);
5
- --box-flotation: color(var(--eds-flotation) / 1);
6
-
7
- --event-hover-primary: color(var(--eds-brand) / 1);
8
- --event-hover-secondary: color(var(--eds-base) / 0.05);
9
- --event-hover-tertiary: color(var(--eds-page) / 1);
10
- --event-focus-primary: color(var(--eds-brand) / 1);
11
- --event-focus-secondary: color(var(--eds-base) / 0.07);
12
- --event-focus-tertiary: color(var(--eds-brand) / 0.2);
13
-
14
- --text-brand-primary: color(var(--eds-brand) / 1);
15
- --text-brand-secondary: color(var(--eds-brand) / 0.6);
16
- --text-brand-tertiary: color(var(--eds-brand) / 0.4);
17
- --text-brand-quaternary: color(var(--eds-brand) / 0.2);
18
- --text-match: color(var(--eds-match) / 1);
19
- --text-success: color(var(--eds-success) / 1);
20
- --text-danger-primary: color(var(--eds-danger) / 1);
21
- --text-danger-secondary: color(var(--eds-danger) / 0.6);
22
- --text-danger-disable: color(var(--eds-danger) / 0.2);
23
- --text-warning: color(var(--eds-warning) / 1);
24
- --text-same-black-primary: color(var(--eds-same-black) / 1);
25
- --text-same-black-secondary: color(var(--eds-same-black) / 0.6);
26
- --text-same-white-primary: color(var(--eds-same-white) / 1);
27
- --text-same-white-secondary: color(var(--eds-same-white) / 0.6);
28
- --text-base-primary: color(var(--eds-base) / 1);
29
- --text-base-secondary: color(var(--eds-base) / 0.6);
30
- --text-base-tertiary: color(var(--eds-base) / 0.4);
31
- --text-base-quaternary: color(var(--eds-base) / 0.2);
32
- --text-face-primary: color(var(--eds-face) / 1);
33
- --text-face-secondary: color(var(--eds-face) / 0.6);
34
- --text-face-tertiary: color(var(--eds-face) / 0.4);
35
- --text-face-quaternary: color(var(--eds-face) / 0.2);
36
-
37
- --material-hide: color(var(--eds-base) / 0);
38
- --material-brand-primary: color(var(--eds-brand) / 1);
39
- --material-brand-tertiary: color(var(--eds-brand) / 0.4);
40
- --material-brand-quaternary: color(var(--eds-brand) / 0.2);
41
- --material-brand-subtle: color(var(--eds-brand) / 0.1);
42
- --material-match-primary: color(var(--eds-match) / 1);
43
- --material-match-quaternary: color(var(--eds-match) / 0.2);
44
- --material-decor-primary: color(var(--eds-decor) / 1);
45
- --material-decor-quaternary: color(var(--eds-decor) / 0.2);
46
- --material-decor-primary-10: color(var(--eds-decor) / 0.1);
47
- --material-success-primary: color(var(--eds-success) / 1);
48
- --material-success-quaternary: color(var(--eds-success) / 0.2);
49
- --material-danger-primary: color(var(--eds-danger) / 1);
50
- --material-danger-quaternary: color(var(--eds-danger) / 0.2);
51
- --material-warning-primary: color(var(--eds-warning) / 1);
52
- --material-warning-quaternary: color(var(--eds-warning) / 0.2);
53
- --material-same-black: color(var(--eds-same-black) / 1);
54
- --material-same-white-primary: color(var(--eds-same-white) / 1);
55
- --material-same-white-secondary: color(var(--eds-same-white) / 0.6);
56
- --material-same-white-quaternary: color(var(--eds-same-white) / 0.8);
57
- --material-card-shallow: color(var(--eds-base) / 0.02);
58
- --material-card-moderate: color(var(--eds-base) / 0.05);
59
- --material-card-subtle: color(var(--eds-base) / 0.04);
60
- --material-card-deep: color(var(--eds-base) / 0.1);
61
- --material-base-primary: color(var(--eds-base) / 1);
62
- --material-base-secondary: color(var(--eds-base) / 0.6);
63
- --material-base-tertiary: color(var(--eds-base) / 0.4);
64
- --material-base-quaternary: color(var(--eds-base) / 0.2);
65
- --material-face-primary: color(var(--eds-face) / 1);
66
- --material-face-secondary: color(var(--eds-face) / 0.6);
67
- --material-face-tertiary: color(var(--eds-face) / 0.4);
68
- --material-face-quaternary: color(var(--eds-face) / 0.2);
69
-
70
- --eds-data-table-head: color(var(--eds-data-table) / 0.9);
71
- --eds-data-table-scroll-bar-background: color(var(--eds-data-table) / 0.9);
72
- --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.04);
73
- --eds-data-table-scroll-bar-indicator-hover: color(var(--eds-base) / 0.2);
74
-
75
- --data-table-head: color(var(--eds-data-table) / 0.9);
76
- --data-table-scroll-bar-background: color(var(--eds-data-table) / 0.9);
77
- --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.04);
78
- --data-table-scroll-bar-indicator-hover: color(var(--eds-base) / 0.2);
79
-
80
- --effect-shadow-deep: color(var(--eds-same-black) / 0.2);
81
- --effect-shadow-shallow: color(var(--eds-same-black) / 0.1);
82
- --effect-popup-background: color(var(--eds-same-black) / 0.5);
83
- --effect-popup-box: color(var(--eds-flotation) / 1);
84
- --effect-flotation-box: color(var(--eds-flotation) / 1);
85
- --effect-mask: color(var(--eds-page) / 0.6);
86
- --effect-prompt: color(var(--eds-base) / 0.9);
87
- --effect-subtle-shadow: color(var(--eds-same-black) / 0.03);
88
- --effect-vulvar-shadow: color(var(--eds-same-black) / 0.2);
89
- --effect-vulvar-shadow-glow: color(var(--eds-vulvar-glow) / 1);
90
- --effect-inner-shadow: color(var(--eds-same-black) / 1);
91
- --effect-inner-shadow-glow: color(var(--eds-inner-glow) / 1);
92
-
93
- --stroke-hide: color(var(--eds-base) / 0);
94
- --stroke-base-primary: color(var(--eds-base) / 1);
95
- --stroke-base-secondary: color(var(--eds-base) / 0.6);
96
- --stroke-base-tertiary: color(var(--eds-base) / 0.4);
97
- --stroke-base-quaternary: color(var(--eds-base) / 0.2);
98
- --stroke-face-primary: color(var(--eds-face) / 1);
99
- --stroke-face-secondary: color(var(--eds-face) / 0.6);
100
- --stroke-divider-module: color(var(--eds-module-stroke) / 1);
101
- --stroke-divider-page: color(var(--eds-base) / 0.1);
102
- --stroke-divider-table: color(var(--eds-base) / 0.09);
103
- --stroke-outline-shallow: color(var(--eds-base) / 0.12);
104
- --stroke-outline-deep: color(var(--eds-base) / 0.18);
105
- --stroke-outline-subtle: color(var(--eds-base) / 0.06);
106
- --stroke-color-brand: color(var(--eds-brand) / 1);
107
- --stroke-color-brand-active: color(var(--eds-brand) / 0.6);
108
- --stroke-color-table-hover: color(var(--eds-brand) / 0.4);
109
- --stroke-color-success: color(var(--eds-success) / 1);
110
- --stroke-color-decor: color(var(--eds-decor) / 1);
111
- --stroke-color-danger: color(var(--eds-danger) / 1);
112
- --stroke-color-danger-active: color(var(--eds-danger) / 0.6);
113
- --stroke-same-white-primary: color(var(--eds-same-white) / 1);
114
- --stroke-same-white-secondary: color(var(--eds-same-white) / 0.6);
115
- --stroke-same-black-primary: color(var(--eds-same-black) / 1);
116
- --stroke-same-black-secondary: color(var(--eds-same-black) / 0.6);
2
+ --box-container: color-mix(in oklch, var(--eds-container) 80%, transparent);
3
+ --box-menu: color-mix(in oklch, var(--eds-menu) 100%, transparent);
4
+ --box-page: color-mix(in oklch, var(--eds-page) 100%, transparent);
5
+ --box-flotation: color-mix(in oklch, var(--eds-flotation) 100%, transparent);
6
+
7
+ --event-hover-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
8
+ --event-hover-secondary: color-mix(in oklch, var(--eds-base) 5%, transparent);
9
+ --event-hover-tertiary: color-mix(in oklch, var(--eds-page) 100%, transparent);
10
+ --event-focus-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
11
+ --event-focus-secondary: color-mix(in oklch, var(--eds-base) 7%, transparent);
12
+ --event-focus-tertiary: color-mix(in oklch, var(--eds-brand) 20%, transparent);
13
+
14
+ --text-brand-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
15
+ --text-brand-secondary: color-mix(in oklch, var(--eds-brand) 60%, transparent);
16
+ --text-brand-tertiary: color-mix(in oklch, var(--eds-brand) 40%, transparent);
17
+ --text-brand-quaternary: color-mix(in oklch, var(--eds-brand) 20%, transparent);
18
+ --text-match: color-mix(in oklch, var(--eds-match) 100%, transparent);
19
+ --text-success: color-mix(in oklch, var(--eds-success) 100%, transparent);
20
+ --text-danger-primary: color-mix(in oklch, var(--eds-danger) 100%, transparent);
21
+ --text-danger-secondary: color-mix(in oklch, var(--eds-danger) 60%, transparent);
22
+ --text-danger-disable: color-mix(in oklch, var(--eds-danger) 20%, transparent);
23
+ --text-warning: color-mix(in oklch, var(--eds-warning) 100%, transparent);
24
+ --text-same-black-primary: color-mix(in oklch, var(--eds-same-black) 100%, transparent);
25
+ --text-same-black-secondary: color-mix(in oklch, var(--eds-same-black) 60%, transparent);
26
+ --text-same-white-primary: color-mix(in oklch, var(--eds-same-white) 100%, transparent);
27
+ --text-same-white-secondary: color-mix(in oklch, var(--eds-same-white) 60%, transparent);
28
+ --text-base-primary: color-mix(in oklch, var(--eds-base) 100%, transparent);
29
+ --text-base-secondary: color-mix(in oklch, var(--eds-base) 60%, transparent);
30
+ --text-base-tertiary: color-mix(in oklch, var(--eds-base) 40%, transparent);
31
+ --text-base-quaternary: color-mix(in oklch, var(--eds-base) 20%, transparent);
32
+ --text-face-primary: color-mix(in oklch, var(--eds-face) 100%, transparent);
33
+ --text-face-secondary: color-mix(in oklch, var(--eds-face) 60%, transparent);
34
+ --text-face-tertiary: color-mix(in oklch, var(--eds-face) 40%, transparent);
35
+ --text-face-quaternary: color-mix(in oklch, var(--eds-face) 20%, transparent);
36
+
37
+ --material-hide: color-mix(in oklch, var(--eds-base) 0%, transparent);
38
+ --material-brand-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
39
+ --material-brand-tertiary: color-mix(in oklch, var(--eds-brand) 40%, transparent);
40
+ --material-brand-quaternary: color-mix(in oklch, var(--eds-brand) 20%, transparent);
41
+ --material-brand-subtle: color-mix(in oklch, var(--eds-brand) 10%, transparent);
42
+ --material-match-primary: color-mix(in oklch, var(--eds-match) 100%, transparent);
43
+ --material-match-quaternary: color-mix(in oklch, var(--eds-match) 20%, transparent);
44
+ --material-decor-primary: color-mix(in oklch, var(--eds-decor) 100%, transparent);
45
+ --material-decor-quaternary: color-mix(in oklch, var(--eds-decor) 20%, transparent);
46
+ --material-decor-primary-10: color-mix(in oklch, var(--eds-decor) 10%, transparent);
47
+ --material-success-primary: color-mix(in oklch, var(--eds-success) 100%, transparent);
48
+ --material-success-quaternary: color-mix(in oklch, var(--eds-success) 20%, transparent);
49
+ --material-danger-primary: color-mix(in oklch, var(--eds-danger) 100%, transparent);
50
+ --material-danger-quaternary: color-mix(in oklch, var(--eds-danger) 20%, transparent);
51
+ --material-warning-primary: color-mix(in oklch, var(--eds-warning) 100%, transparent);
52
+ --material-warning-quaternary: color-mix(in oklch, var(--eds-warning) 20%, transparent);
53
+ --material-same-black: color-mix(in oklch, var(--eds-same-black) 100%, transparent);
54
+ --material-same-white-primary: color-mix(in oklch, var(--eds-same-white) 100%, transparent);
55
+ --material-same-white-secondary: color-mix(in oklch, var(--eds-same-white) 60%, transparent);
56
+ --material-same-white-quaternary: color-mix(in oklch, var(--eds-same-white) 80%, transparent);
57
+ --material-card-shallow: color-mix(in oklch, var(--eds-base) 2%, transparent);
58
+ --material-card-moderate: color-mix(in oklch, var(--eds-base) 5%, transparent);
59
+ --material-card-subtle: color-mix(in oklch, var(--eds-base) 4%, transparent);
60
+ --material-card-deep: color-mix(in oklch, var(--eds-base) 10%, transparent);
61
+ --material-base-primary: color-mix(in oklch, var(--eds-base) 100%, transparent);
62
+ --material-base-secondary: color-mix(in oklch, var(--eds-base) 60%, transparent);
63
+ --material-base-tertiary: color-mix(in oklch, var(--eds-base) 40%, transparent);
64
+ --material-base-quaternary: color-mix(in oklch, var(--eds-base) 20%, transparent);
65
+ --material-face-primary: color-mix(in oklch, var(--eds-face) 100%, transparent);
66
+ --material-face-secondary: color-mix(in oklch, var(--eds-face) 60%, transparent);
67
+ --material-face-tertiary: color-mix(in oklch, var(--eds-face) 40%, transparent);
68
+ --material-face-quaternary: color-mix(in oklch, var(--eds-face) 20%, transparent);
69
+
70
+ --eds-data-table-head: color-mix(in oklch, var(--eds-data-table) 90%, transparent);
71
+ --eds-data-table-scroll-bar-background: color-mix(in oklch, var(--eds-data-table) 90%, transparent);
72
+ --eds-data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 4%, transparent);
73
+ --eds-data-table-scroll-bar-indicator-hover: color-mix(in oklch, var(--eds-base) 20%, transparent);
74
+
75
+ --data-table-head: color-mix(in oklch, var(--eds-data-table) 90%, transparent);
76
+ --data-table-scroll-bar-background: color-mix(in oklch, var(--eds-data-table) 90%, transparent);
77
+ --data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 4%, transparent);
78
+ --data-table-scroll-bar-indicator-hover: color-mix(in oklch, var(--eds-base) 20%, transparent);
79
+
80
+ --effect-shadow-deep: color-mix(in oklch, var(--eds-same-black) 20%, transparent);
81
+ --effect-shadow-shallow: color-mix(in oklch, var(--eds-same-black) 10%, transparent);
82
+ --effect-popup-background: color-mix(in oklch, var(--eds-same-black) 50%, transparent);
83
+ --effect-popup-box: color-mix(in oklch, var(--eds-flotation) 100%, transparent);
84
+ --effect-flotation-box: color-mix(in oklch, var(--eds-flotation) 100%, transparent);
85
+ --effect-mask: color-mix(in oklch, var(--eds-page) 60%, transparent);
86
+ --effect-prompt: color-mix(in oklch, var(--eds-base) 90%, transparent);
87
+ --effect-subtle-shadow: color-mix(in oklch, var(--eds-same-black) 3%, transparent);
88
+ --effect-vulvar-shadow: color-mix(in oklch, var(--eds-same-black) 20%, transparent);
89
+ --effect-vulvar-shadow-glow: color-mix(in oklch, var(--eds-vulvar-glow) 100%, transparent);
90
+ --effect-inner-shadow: color-mix(in oklch, var(--eds-same-black) 100%, transparent);
91
+ --effect-inner-shadow-glow: color-mix(in oklch, var(--eds-inner-glow) 100%, transparent);
92
+
93
+ --stroke-hide: color-mix(in oklch, var(--eds-base) 0%, transparent);
94
+ --stroke-base-primary: color-mix(in oklch, var(--eds-base) 100%, transparent);
95
+ --stroke-base-secondary: color-mix(in oklch, var(--eds-base) 60%, transparent);
96
+ --stroke-base-tertiary: color-mix(in oklch, var(--eds-base) 40%, transparent);
97
+ --stroke-base-quaternary: color-mix(in oklch, var(--eds-base) 20%, transparent);
98
+ --stroke-face-primary: color-mix(in oklch, var(--eds-face) 100%, transparent);
99
+ --stroke-face-secondary: color-mix(in oklch, var(--eds-face) 60%, transparent);
100
+ --stroke-divider-module: color-mix(in oklch, var(--eds-module-stroke) 100%, transparent);
101
+ --stroke-divider-page: color-mix(in oklch, var(--eds-base) 10%, transparent);
102
+ --stroke-divider-table: color-mix(in oklch, var(--eds-base) 9%, transparent);
103
+ --stroke-outline-shallow: color-mix(in oklch, var(--eds-base) 12%, transparent);
104
+ --stroke-outline-deep: color-mix(in oklch, var(--eds-base) 18%, transparent);
105
+ --stroke-outline-subtle: color-mix(in oklch, var(--eds-base) 6%, transparent);
106
+ --stroke-color-brand: color-mix(in oklch, var(--eds-brand) 100%, transparent);
107
+ --stroke-color-brand-active: color-mix(in oklch, var(--eds-brand) 60%, transparent);
108
+ --stroke-color-table-hover: color-mix(in oklch, var(--eds-brand) 40%, transparent);
109
+ --stroke-color-success: color-mix(in oklch, var(--eds-success) 100%, transparent);
110
+ --stroke-color-decor: color-mix(in oklch, var(--eds-decor) 100%, transparent);
111
+ --stroke-color-danger: color-mix(in oklch, var(--eds-danger) 100%, transparent);
112
+ --stroke-color-danger-active: color-mix(in oklch, var(--eds-danger) 60%, transparent);
113
+ --stroke-same-white-primary: color-mix(in oklch, var(--eds-same-white) 100%, transparent);
114
+ --stroke-same-white-secondary: color-mix(in oklch, var(--eds-same-white) 60%, transparent);
115
+ --stroke-same-black-primary: color-mix(in oklch, var(--eds-same-black) 100%, transparent);
116
+ --stroke-same-black-secondary: color-mix(in oklch, var(--eds-same-black) 60%, transparent);
117
117
  }
118
118
 
119
119
  .dark {
120
- --box-container: color(var(--eds-container) / 0.8);
120
+ --box-container: color-mix(in oklch, var(--eds-container) 80%, transparent);
121
121
 
122
- --event-hover-secondary: color(var(--eds-base) / 0.07);
123
- --event-focus-secondary: color(var(--eds-base) / 0.1);
122
+ --event-hover-secondary: color-mix(in oklch, var(--eds-base) 7%, transparent);
123
+ --event-focus-secondary: color-mix(in oklch, var(--eds-base) 10%, transparent);
124
124
 
125
- --stroke-divider-table: color(var(--eds-base) / 0.07);
125
+ --stroke-divider-table: color-mix(in oklch, var(--eds-base) 7%, transparent);
126
126
 
127
- --material-same-white-quaternary: color(var(--eds-same-white) / 0.2);
128
- --material-card-shallow: color(var(--eds-base) / 0.02);
129
- --material-card-moderate: color(var(--eds-base) / 0.07);
130
- --material-card-subtle: color(var(--eds-base) / 0.06);
127
+ --material-same-white-quaternary: color-mix(in oklch, var(--eds-same-white) 20%, transparent);
128
+ --material-card-shallow: color-mix(in oklch, var(--eds-base) 2%, transparent);
129
+ --material-card-moderate: color-mix(in oklch, var(--eds-base) 7%, transparent);
130
+ --material-card-subtle: color-mix(in oklch, var(--eds-base) 6%, transparent);
131
131
 
132
- --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
132
+ --eds-data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 7%, transparent);
133
133
 
134
- --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
134
+ --data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 7%, transparent);
135
135
 
136
- --effect-shadow-deep: color(var(--eds-same-black) / 0.6);
137
- --effect-shadow-shallow: color(var(--eds-same-black) / 0.3);
138
- --effect-prompt: color(var(--eds-base) / 0.2);
139
- --effect-subtle-shadow: color(var(--eds-same-black) / 0.2);
136
+ --effect-shadow-deep: color-mix(in oklch, var(--eds-same-black) 60%, transparent);
137
+ --effect-shadow-shallow: color-mix(in oklch, var(--eds-same-black) 30%, transparent);
138
+ --effect-prompt: color-mix(in oklch, var(--eds-base) 20%, transparent);
139
+ --effect-subtle-shadow: color-mix(in oklch, var(--eds-same-black) 20%, transparent);
140
140
 
141
- --stroke-outline-shallow: color(var(--eds-base) / 0.14);
142
- --stroke-outline-deep: color(var(--eds-base) / 0.2);
143
- --stroke-outline-subtle: color(var(--eds-base) / 0.1);
141
+ --stroke-outline-shallow: color-mix(in oklch, var(--eds-base) 14%, transparent);
142
+ --stroke-outline-deep: color-mix(in oklch, var(--eds-base) 20%, transparent);
143
+ --stroke-outline-subtle: color-mix(in oklch, var(--eds-base) 10%, transparent);
144
144
  }
145
145
 
146
146
  @media (prefers-color-scheme: dark) {
147
147
  .system {
148
- --box-container: color(var(--eds-container) / 0.8);
148
+ --box-container: color-mix(in oklch, var(--eds-container) 80%, transparent);
149
149
 
150
- --event-hover-secondary: color(var(--eds-base) / 0.07);
151
- --event-focus-secondary: color(var(--eds-base) / 0.1);
150
+ --event-hover-secondary: color-mix(in oklch, var(--eds-base) 7%, transparent);
151
+ --event-focus-secondary: color-mix(in oklch, var(--eds-base) 10%, transparent);
152
152
 
153
- --stroke-divider-table: color(var(--eds-base) / 0.07);
153
+ --stroke-divider-table: color-mix(in oklch, var(--eds-base) 7%, transparent);
154
154
 
155
- --material-same-white-quaternary: color(var(--eds-same-white) / 0.2);
156
- --material-card-shallow: color(var(--eds-base) / 0.02);
157
- --material-card-moderate: color(var(--eds-base) / 0.07);
158
- --material-card-subtle: color(var(--eds-base) / 0.06);
155
+ --material-same-white-quaternary: color-mix(in oklch, var(--eds-same-white) 20%, transparent);
156
+ --material-card-shallow: color-mix(in oklch, var(--eds-base) 2%, transparent);
157
+ --material-card-moderate: color-mix(in oklch, var(--eds-base) 7%, transparent);
158
+ --material-card-subtle: color-mix(in oklch, var(--eds-base) 6%, transparent);
159
159
 
160
- --eds-data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
160
+ --eds-data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 7%, transparent);
161
161
 
162
- --data-table-scroll-bar-indicator: color(var(--eds-base) / 0.07);
162
+ --data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 7%, transparent);
163
163
 
164
- --effect-shadow-deep: color(var(--eds-same-black) / 0.6);
165
- --effect-prompt: color(var(--eds-base) / 0.2);
166
- --effect-subtle-shadow: color(var(--eds-same-black) / 0.2);
164
+ --effect-shadow-deep: color-mix(in oklch, var(--eds-same-black) 60%, transparent);
165
+ --effect-prompt: color-mix(in oklch, var(--eds-base) 20%, transparent);
166
+ --effect-subtle-shadow: color-mix(in oklch, var(--eds-same-black) 20%, transparent);
167
167
 
168
- --stroke-outline-shallow: color(var(--eds-base) / 0.14);
169
- --stroke-outline-deep: color(var(--eds-base) / 0.2);
170
- --stroke-outline-subtle: color(var(--eds-base) / 0.1);
168
+ --stroke-outline-shallow: color-mix(in oklch, var(--eds-base) 14%, transparent);
169
+ --stroke-outline-deep: color-mix(in oklch, var(--eds-base) 20%, transparent);
170
+ --stroke-outline-subtle: color-mix(in oklch, var(--eds-base) 10%, transparent);
171
171
  }
172
172
  }
package/src/desktop/index.css CHANGED
@@ -1,4 +1,4 @@
1
- @import "./theme/default.css";
1
+ @import "./theme.css";
2
2
  @import "./color-definition.css";
3
3
  @import "./size/index.css";
4
4
  @import "./typography/index.css";
package/src/desktop/theme.css ADDED
@@ -0,0 +1,68 @@
1
+ :root {
2
+ --eds-brand: color(display-p3 0.1216 0.7647 0.3529);
3
+ --eds-match: color(display-p3 0 0.2275 0.4275);
4
+ --eds-decor: color(display-p3 0.0078 0.1765 0.051);
5
+ --eds-success: color(display-p3 0.1216 0.7647 0.3529);
6
+ --eds-danger: color(display-p3 0.8431 0.2745 0.1765);
7
+ --eds-warning: color(display-p3 0.9216 0.5686 0.0784);
8
+ --eds-base: color(display-p3 0.0078 0.0118 0.0157);
9
+ --eds-face: color(display-p3 1 1 1);
10
+ --eds-same-black: color(display-p3 0.0078 0.0118 0.0157);
11
+ --eds-same-white: color(display-p3 1 1 1);
12
+ --eds-container: color(display-p3 0.902 0.9059 0.9098);
13
+ --eds-menu: color(display-p3 0.9804 0.9843 0.9882);
14
+ --eds-page: color(display-p3 1 1 1);
15
+ --eds-popup: color(display-p3 1 1 1);
16
+ --eds-flotation: color(display-p3 1 1 1);
17
+ --eds-inner-glow: color(display-p3 0.1569 0.1569 0.1569);
18
+ --eds-vulvar-glow: color(display-p3 0.8627 0.8627 0.8627);
19
+ --eds-data-table: color(display-p3 0.9569 0.9608 0.9647);
20
+ --eds-module-stroke: color(display-p3 0.9216 0.9255 0.9294);
21
+ }
22
+
23
+ .dark {
24
+ --eds-brand: color(display-p3 0.1216 0.7647 0.3529);
25
+ --eds-match: color(display-p3 0 0.2549 0.4706);
26
+ --eds-decor: color(display-p3 1 1 1);
27
+ --eds-success: color(display-p3 0.1216 0.7647 0.3529);
28
+ --eds-danger: color(display-p3 0.9804 0.4118 0.3137);
29
+ --eds-warning: color(display-p3 1 0.6667 0.1961);
30
+ --eds-base: color(display-p3 1 1 1);
31
+ --eds-face: color(display-p3 0.0078 0.0118 0.0157);
32
+ --eds-same-black: color(display-p3 0.0078 0.0118 0.0157);
33
+ --eds-same-white: color(display-p3 1 1 1);
34
+ --eds-container: color(display-p3 0.1647 0.1765 0.1882);
35
+ --eds-menu: color(display-p3 0.1451 0.1569 0.1647);
36
+ --eds-page: color(display-p3 0.1176 0.1294 0.1373);
37
+ --eds-popup: color(display-p3 0.1373 0.1451 0.1529);
38
+ --eds-flotation: color(display-p3 0.1373 0.1451 0.1529);
39
+ --eds-inner-glow: color(display-p3 0.2353 0.2353 0.2353);
40
+ --eds-vulvar-glow: color(display-p3 0.8627 0.8627 0.8627);
41
+ --eds-data-table: color(display-p3 0.0941 0.098 0.102);
42
+ --eds-module-stroke: color(display-p3 0 0 0);
43
+ }
44
+
45
+ /* 当系统偏好为dark时, system class下的变量完整复刻dark class下的变量 */
46
+ @media (prefers-color-scheme: dark) {
47
+ .system {
48
+ --eds-brand: color(display-p3 0.1216 0.7647 0.3529);
49
+ --eds-match: color(display-p3 0 0.2549 0.4706);
50
+ --eds-decor: color(display-p3 1 1 1);
51
+ --eds-success: color(display-p3 0.1216 0.7647 0.3529);
52
+ --eds-danger: color(display-p3 0.9804 0.4118 0.3137);
53
+ --eds-warning: color(display-p3 1 0.6667 0.1961);
54
+ --eds-base: color(display-p3 1 1 1);
55
+ --eds-face: color(display-p3 0.0078 0.0118 0.0157);
56
+ --eds-same-black: color(display-p3 0.0078 0.0118 0.0157);
57
+ --eds-same-white: color(display-p3 1 1 1);
58
+ --eds-container: color(display-p3 0.1647 0.1765 0.1882);
59
+ --eds-menu: color(display-p3 0.1451 0.1569 0.1647);
60
+ --eds-page: color(display-p3 0.1176 0.1294 0.1373);
61
+ --eds-popup: color(display-p3 0.1373 0.1451 0.1529);
62
+ --eds-flotation: color(display-p3 0.1373 0.1451 0.1529);
63
+ --eds-inner-glow: color(display-p3 0.2353 0.2353 0.2353);
64
+ --eds-vulvar-glow: color(display-p3 0.8627 0.8627 0.8627);
65
+ --eds-data-table: color(display-p3 0.0941 0.098 0.102);
66
+ --eds-module-stroke: color(display-p3 0 0 0);
67
+ }
68
+ }