@cregis/tokens 1.0.0 → 1.0.1

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 (14) 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/theme.css +68 -0
  12. package/src/desktop/theme/default.css +0 -69
  13. package/src/mobile/theme/default.css +0 -69
  14. package/src/web/theme/default.css +0 -69
package/src/mobile/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/mobile/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/mobile/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
+ }