oneslash-design-system 2.0.5 → 2.2.0
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.
- package/README.md +8 -0
- package/dist/designTokens.d.ts +919 -0
- package/dist/designTokens.js +48 -2
- package/dist/tailwind-preset-auto.js +2 -1
- package/dist/tailwind-preset.js +2 -1
- package/dist/themes/clay-auto.css +251 -0
- package/dist/themes/clay.css +167 -0
- package/dist/themes/indigo-auto.css +251 -0
- package/dist/themes/indigo.css +167 -0
- package/dist/themes/wine-auto.css +251 -0
- package/dist/themes/wine.css +167 -0
- package/dist/typography.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
/* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
|
|
2
|
+
/* Theme "indigo". Variables hold RGB channels: use rgb(var(--os-color-…) / <alpha>). */
|
|
3
|
+
@import "../tokens.css";
|
|
4
|
+
:root {
|
|
5
|
+
--os-mode: light;
|
|
6
|
+
--os-color-text-primary: 17 26 46;
|
|
7
|
+
--os-color-text-secondary: 74 86 112;
|
|
8
|
+
--os-color-text-disabled: 143 153 173;
|
|
9
|
+
--os-color-text-contrast: 255 255 255;
|
|
10
|
+
--os-color-accent-main: 32 79 140;
|
|
11
|
+
--os-color-accent-dark: 22 45 89;
|
|
12
|
+
--os-color-accent-light: 84 141 191;
|
|
13
|
+
--os-color-accent-contrast: 255 255 255;
|
|
14
|
+
--os-color-primary-main: 69 69 69;
|
|
15
|
+
--os-color-primary-dark: 38 38 38;
|
|
16
|
+
--os-color-primary-light: 136 136 136;
|
|
17
|
+
--os-color-primary-contrast: 255 255 255;
|
|
18
|
+
--os-color-secondary-main: 180 198 220;
|
|
19
|
+
--os-color-secondary-dark: 142 166 196;
|
|
20
|
+
--os-color-secondary-light: 207 220 234;
|
|
21
|
+
--os-color-secondary-contrast: 17 26 46;
|
|
22
|
+
--os-color-error-main: 211 47 47;
|
|
23
|
+
--os-color-error-dark: 168 33 33;
|
|
24
|
+
--os-color-error-light: 242 119 119;
|
|
25
|
+
--os-color-error-alertBg: 242 196 196;
|
|
26
|
+
--os-color-error-contrast: 255 255 255;
|
|
27
|
+
--os-color-error-fill: 168 33 33;
|
|
28
|
+
--os-color-error-onFill: 255 255 255;
|
|
29
|
+
--os-color-error-text: 168 33 33;
|
|
30
|
+
--os-color-error-textHover: 168 33 33;
|
|
31
|
+
--os-color-error-tint: 242 119 119;
|
|
32
|
+
--os-color-warning-main: 239 108 0;
|
|
33
|
+
--os-color-warning-dark: 168 70 0;
|
|
34
|
+
--os-color-warning-light: 255 167 50;
|
|
35
|
+
--os-color-warning-alertBg: 245 213 176;
|
|
36
|
+
--os-color-warning-contrast: 255 255 255;
|
|
37
|
+
--os-color-warning-fill: 168 70 0;
|
|
38
|
+
--os-color-warning-onFill: 255 255 255;
|
|
39
|
+
--os-color-warning-text: 168 70 0;
|
|
40
|
+
--os-color-warning-textHover: 168 70 0;
|
|
41
|
+
--os-color-warning-tint: 255 167 50;
|
|
42
|
+
--os-color-info-main: 0 135 212;
|
|
43
|
+
--os-color-info-dark: 0 107 171;
|
|
44
|
+
--os-color-info-light: 44 193 255;
|
|
45
|
+
--os-color-info-alertBg: 184 217 240;
|
|
46
|
+
--os-color-info-contrast: 255 255 255;
|
|
47
|
+
--os-color-info-fill: 0 107 171;
|
|
48
|
+
--os-color-info-onFill: 255 255 255;
|
|
49
|
+
--os-color-info-text: 0 107 171;
|
|
50
|
+
--os-color-info-textHover: 0 107 171;
|
|
51
|
+
--os-color-info-tint: 44 193 255;
|
|
52
|
+
--os-color-success-main: 50 135 54;
|
|
53
|
+
--os-color-success-dark: 42 107 45;
|
|
54
|
+
--os-color-success-light: 103 193 107;
|
|
55
|
+
--os-color-success-alertBg: 196 226 197;
|
|
56
|
+
--os-color-success-contrast: 255 255 255;
|
|
57
|
+
--os-color-success-fill: 42 107 45;
|
|
58
|
+
--os-color-success-onFill: 255 255 255;
|
|
59
|
+
--os-color-success-text: 42 107 45;
|
|
60
|
+
--os-color-success-textHover: 42 107 45;
|
|
61
|
+
--os-color-success-tint: 103 193 107;
|
|
62
|
+
--os-color-background-default: 221 230 240;
|
|
63
|
+
--os-color-background-accent100: 230 237 245;
|
|
64
|
+
--os-color-background-accent200: 238 243 249;
|
|
65
|
+
--os-color-background-accent300: 247 249 252;
|
|
66
|
+
--os-color-background-elevated: 221 230 240;
|
|
67
|
+
--os-color-background-overlay: 247 249 252;
|
|
68
|
+
--os-color-action-active: 136 136 136;
|
|
69
|
+
--os-color-action-hover: 243 243 243;
|
|
70
|
+
--os-color-action-selected: 227 227 227;
|
|
71
|
+
--os-color-action-disabledBackground: 209 209 209;
|
|
72
|
+
--os-color-action-disabled: 176 176 176;
|
|
73
|
+
--os-color-actionBackground-enabled: 255 255 255;
|
|
74
|
+
--os-color-actionBackground-hovered: 255 255 255;
|
|
75
|
+
--os-color-actionBackground-selected: 255 255 255;
|
|
76
|
+
--os-color-actionBackground-disabled: 238 238 238;
|
|
77
|
+
--os-color-actionOutlinedBorder-enabled: 136 136 136;
|
|
78
|
+
--os-color-actionOutlinedBorder-hovered: 205 205 205;
|
|
79
|
+
--os-color-actionOutlinedBorder-selected: 232 232 232;
|
|
80
|
+
--os-color-actionOutlinedBorder-disabled: 176 176 176;
|
|
81
|
+
--os-color-misc-divider: 209 209 209;
|
|
82
|
+
--os-color-misc-scrim: 0 0 0;
|
|
83
|
+
--os-color-misc-tooltipBg: 51 64 90;
|
|
84
|
+
--os-color-misc-tooltipText: 227 236 245;
|
|
85
|
+
}
|
|
86
|
+
.dark {
|
|
87
|
+
--os-mode: dark;
|
|
88
|
+
--os-color-text-primary: 227 236 245;
|
|
89
|
+
--os-color-text-secondary: 163 178 200;
|
|
90
|
+
--os-color-text-disabled: 99 112 137;
|
|
91
|
+
--os-color-text-contrast: 0 0 0;
|
|
92
|
+
--os-color-accent-main: 194 224 242;
|
|
93
|
+
--os-color-accent-dark: 159 198 227;
|
|
94
|
+
--os-color-accent-light: 220 238 248;
|
|
95
|
+
--os-color-accent-contrast: 22 45 89;
|
|
96
|
+
--os-color-primary-main: 213 213 213;
|
|
97
|
+
--os-color-primary-dark: 233 233 233;
|
|
98
|
+
--os-color-primary-light: 154 154 154;
|
|
99
|
+
--os-color-primary-contrast: 0 0 0;
|
|
100
|
+
--os-color-secondary-main: 52 69 102;
|
|
101
|
+
--os-color-secondary-dark: 43 58 87;
|
|
102
|
+
--os-color-secondary-light: 68 88 127;
|
|
103
|
+
--os-color-secondary-contrast: 227 236 245;
|
|
104
|
+
--os-color-error-main: 231 76 76;
|
|
105
|
+
--os-color-error-dark: 178 35 35;
|
|
106
|
+
--os-color-error-light: 242 119 119;
|
|
107
|
+
--os-color-error-alertBg: 92 26 26;
|
|
108
|
+
--os-color-error-contrast: 0 0 0;
|
|
109
|
+
--os-color-error-fill: 231 76 76;
|
|
110
|
+
--os-color-error-onFill: 0 0 0;
|
|
111
|
+
--os-color-error-text: 242 119 119;
|
|
112
|
+
--os-color-error-textHover: 242 119 119;
|
|
113
|
+
--os-color-error-tint: 178 35 35;
|
|
114
|
+
--os-color-warning-main: 255 140 10;
|
|
115
|
+
--os-color-warning-dark: 204 83 2;
|
|
116
|
+
--os-color-warning-light: 255 167 50;
|
|
117
|
+
--os-color-warning-alertBg: 92 46 10;
|
|
118
|
+
--os-color-warning-contrast: 255 255 255;
|
|
119
|
+
--os-color-warning-fill: 255 140 10;
|
|
120
|
+
--os-color-warning-onFill: 0 0 0;
|
|
121
|
+
--os-color-warning-text: 255 140 10;
|
|
122
|
+
--os-color-warning-textHover: 255 167 50;
|
|
123
|
+
--os-color-warning-tint: 204 83 2;
|
|
124
|
+
--os-color-info-main: 0 175 255;
|
|
125
|
+
--os-color-info-dark: 0 107 171;
|
|
126
|
+
--os-color-info-light: 44 193 255;
|
|
127
|
+
--os-color-info-alertBg: 10 58 92;
|
|
128
|
+
--os-color-info-contrast: 255 255 255;
|
|
129
|
+
--os-color-info-fill: 0 175 255;
|
|
130
|
+
--os-color-info-onFill: 0 0 0;
|
|
131
|
+
--os-color-info-text: 0 175 255;
|
|
132
|
+
--os-color-info-textHover: 44 193 255;
|
|
133
|
+
--os-color-info-tint: 0 107 171;
|
|
134
|
+
--os-color-success-main: 66 165 71;
|
|
135
|
+
--os-color-success-dark: 42 107 45;
|
|
136
|
+
--os-color-success-light: 103 193 107;
|
|
137
|
+
--os-color-success-alertBg: 26 74 29;
|
|
138
|
+
--os-color-success-contrast: 255 255 255;
|
|
139
|
+
--os-color-success-fill: 66 165 71;
|
|
140
|
+
--os-color-success-onFill: 0 0 0;
|
|
141
|
+
--os-color-success-text: 66 165 71;
|
|
142
|
+
--os-color-success-textHover: 103 193 107;
|
|
143
|
+
--os-color-success-tint: 42 107 45;
|
|
144
|
+
--os-color-background-default: 20 28 46;
|
|
145
|
+
--os-color-background-accent100: 28 38 59;
|
|
146
|
+
--os-color-background-accent200: 41 53 77;
|
|
147
|
+
--os-color-background-accent300: 51 64 90;
|
|
148
|
+
--os-color-background-elevated: 28 38 59;
|
|
149
|
+
--os-color-background-overlay: 28 38 59;
|
|
150
|
+
--os-color-action-active: 23 23 23;
|
|
151
|
+
--os-color-action-hover: 61 61 61;
|
|
152
|
+
--os-color-action-selected: 78 78 78;
|
|
153
|
+
--os-color-action-disabledBackground: 60 60 60;
|
|
154
|
+
--os-color-action-disabled: 56 56 56;
|
|
155
|
+
--os-color-actionBackground-enabled: 255 255 255;
|
|
156
|
+
--os-color-actionBackground-hovered: 255 255 255;
|
|
157
|
+
--os-color-actionBackground-selected: 255 255 255;
|
|
158
|
+
--os-color-actionBackground-disabled: 56 56 56;
|
|
159
|
+
--os-color-actionOutlinedBorder-enabled: 123 123 123;
|
|
160
|
+
--os-color-actionOutlinedBorder-hovered: 47 47 47;
|
|
161
|
+
--os-color-actionOutlinedBorder-selected: 64 64 64;
|
|
162
|
+
--os-color-actionOutlinedBorder-disabled: 56 56 56;
|
|
163
|
+
--os-color-misc-divider: 64 64 64;
|
|
164
|
+
--os-color-misc-scrim: 0 0 0;
|
|
165
|
+
--os-color-misc-tooltipBg: 247 249 252;
|
|
166
|
+
--os-color-misc-tooltipText: 17 26 46;
|
|
167
|
+
}
|
|
168
|
+
@media (prefers-color-scheme: dark) {
|
|
169
|
+
:root:not(.light) {
|
|
170
|
+
--os-mode: dark;
|
|
171
|
+
--os-color-text-primary: 227 236 245;
|
|
172
|
+
--os-color-text-secondary: 163 178 200;
|
|
173
|
+
--os-color-text-disabled: 99 112 137;
|
|
174
|
+
--os-color-text-contrast: 0 0 0;
|
|
175
|
+
--os-color-accent-main: 194 224 242;
|
|
176
|
+
--os-color-accent-dark: 159 198 227;
|
|
177
|
+
--os-color-accent-light: 220 238 248;
|
|
178
|
+
--os-color-accent-contrast: 22 45 89;
|
|
179
|
+
--os-color-primary-main: 213 213 213;
|
|
180
|
+
--os-color-primary-dark: 233 233 233;
|
|
181
|
+
--os-color-primary-light: 154 154 154;
|
|
182
|
+
--os-color-primary-contrast: 0 0 0;
|
|
183
|
+
--os-color-secondary-main: 52 69 102;
|
|
184
|
+
--os-color-secondary-dark: 43 58 87;
|
|
185
|
+
--os-color-secondary-light: 68 88 127;
|
|
186
|
+
--os-color-secondary-contrast: 227 236 245;
|
|
187
|
+
--os-color-error-main: 231 76 76;
|
|
188
|
+
--os-color-error-dark: 178 35 35;
|
|
189
|
+
--os-color-error-light: 242 119 119;
|
|
190
|
+
--os-color-error-alertBg: 92 26 26;
|
|
191
|
+
--os-color-error-contrast: 0 0 0;
|
|
192
|
+
--os-color-error-fill: 231 76 76;
|
|
193
|
+
--os-color-error-onFill: 0 0 0;
|
|
194
|
+
--os-color-error-text: 242 119 119;
|
|
195
|
+
--os-color-error-textHover: 242 119 119;
|
|
196
|
+
--os-color-error-tint: 178 35 35;
|
|
197
|
+
--os-color-warning-main: 255 140 10;
|
|
198
|
+
--os-color-warning-dark: 204 83 2;
|
|
199
|
+
--os-color-warning-light: 255 167 50;
|
|
200
|
+
--os-color-warning-alertBg: 92 46 10;
|
|
201
|
+
--os-color-warning-contrast: 255 255 255;
|
|
202
|
+
--os-color-warning-fill: 255 140 10;
|
|
203
|
+
--os-color-warning-onFill: 0 0 0;
|
|
204
|
+
--os-color-warning-text: 255 140 10;
|
|
205
|
+
--os-color-warning-textHover: 255 167 50;
|
|
206
|
+
--os-color-warning-tint: 204 83 2;
|
|
207
|
+
--os-color-info-main: 0 175 255;
|
|
208
|
+
--os-color-info-dark: 0 107 171;
|
|
209
|
+
--os-color-info-light: 44 193 255;
|
|
210
|
+
--os-color-info-alertBg: 10 58 92;
|
|
211
|
+
--os-color-info-contrast: 255 255 255;
|
|
212
|
+
--os-color-info-fill: 0 175 255;
|
|
213
|
+
--os-color-info-onFill: 0 0 0;
|
|
214
|
+
--os-color-info-text: 0 175 255;
|
|
215
|
+
--os-color-info-textHover: 44 193 255;
|
|
216
|
+
--os-color-info-tint: 0 107 171;
|
|
217
|
+
--os-color-success-main: 66 165 71;
|
|
218
|
+
--os-color-success-dark: 42 107 45;
|
|
219
|
+
--os-color-success-light: 103 193 107;
|
|
220
|
+
--os-color-success-alertBg: 26 74 29;
|
|
221
|
+
--os-color-success-contrast: 255 255 255;
|
|
222
|
+
--os-color-success-fill: 66 165 71;
|
|
223
|
+
--os-color-success-onFill: 0 0 0;
|
|
224
|
+
--os-color-success-text: 66 165 71;
|
|
225
|
+
--os-color-success-textHover: 103 193 107;
|
|
226
|
+
--os-color-success-tint: 42 107 45;
|
|
227
|
+
--os-color-background-default: 20 28 46;
|
|
228
|
+
--os-color-background-accent100: 28 38 59;
|
|
229
|
+
--os-color-background-accent200: 41 53 77;
|
|
230
|
+
--os-color-background-accent300: 51 64 90;
|
|
231
|
+
--os-color-background-elevated: 28 38 59;
|
|
232
|
+
--os-color-background-overlay: 28 38 59;
|
|
233
|
+
--os-color-action-active: 23 23 23;
|
|
234
|
+
--os-color-action-hover: 61 61 61;
|
|
235
|
+
--os-color-action-selected: 78 78 78;
|
|
236
|
+
--os-color-action-disabledBackground: 60 60 60;
|
|
237
|
+
--os-color-action-disabled: 56 56 56;
|
|
238
|
+
--os-color-actionBackground-enabled: 255 255 255;
|
|
239
|
+
--os-color-actionBackground-hovered: 255 255 255;
|
|
240
|
+
--os-color-actionBackground-selected: 255 255 255;
|
|
241
|
+
--os-color-actionBackground-disabled: 56 56 56;
|
|
242
|
+
--os-color-actionOutlinedBorder-enabled: 123 123 123;
|
|
243
|
+
--os-color-actionOutlinedBorder-hovered: 47 47 47;
|
|
244
|
+
--os-color-actionOutlinedBorder-selected: 64 64 64;
|
|
245
|
+
--os-color-actionOutlinedBorder-disabled: 56 56 56;
|
|
246
|
+
--os-color-misc-divider: 64 64 64;
|
|
247
|
+
--os-color-misc-scrim: 0 0 0;
|
|
248
|
+
--os-color-misc-tooltipBg: 247 249 252;
|
|
249
|
+
--os-color-misc-tooltipText: 17 26 46;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
/* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
|
|
2
|
+
/* Theme "indigo". Variables hold RGB channels: use rgb(var(--os-color-…) / <alpha>). */
|
|
3
|
+
@import "../tokens.css";
|
|
4
|
+
:root {
|
|
5
|
+
--os-mode: light;
|
|
6
|
+
--os-color-text-primary: 17 26 46;
|
|
7
|
+
--os-color-text-secondary: 74 86 112;
|
|
8
|
+
--os-color-text-disabled: 143 153 173;
|
|
9
|
+
--os-color-text-contrast: 255 255 255;
|
|
10
|
+
--os-color-accent-main: 32 79 140;
|
|
11
|
+
--os-color-accent-dark: 22 45 89;
|
|
12
|
+
--os-color-accent-light: 84 141 191;
|
|
13
|
+
--os-color-accent-contrast: 255 255 255;
|
|
14
|
+
--os-color-primary-main: 69 69 69;
|
|
15
|
+
--os-color-primary-dark: 38 38 38;
|
|
16
|
+
--os-color-primary-light: 136 136 136;
|
|
17
|
+
--os-color-primary-contrast: 255 255 255;
|
|
18
|
+
--os-color-secondary-main: 180 198 220;
|
|
19
|
+
--os-color-secondary-dark: 142 166 196;
|
|
20
|
+
--os-color-secondary-light: 207 220 234;
|
|
21
|
+
--os-color-secondary-contrast: 17 26 46;
|
|
22
|
+
--os-color-error-main: 211 47 47;
|
|
23
|
+
--os-color-error-dark: 168 33 33;
|
|
24
|
+
--os-color-error-light: 242 119 119;
|
|
25
|
+
--os-color-error-alertBg: 242 196 196;
|
|
26
|
+
--os-color-error-contrast: 255 255 255;
|
|
27
|
+
--os-color-error-fill: 168 33 33;
|
|
28
|
+
--os-color-error-onFill: 255 255 255;
|
|
29
|
+
--os-color-error-text: 168 33 33;
|
|
30
|
+
--os-color-error-textHover: 168 33 33;
|
|
31
|
+
--os-color-error-tint: 242 119 119;
|
|
32
|
+
--os-color-warning-main: 239 108 0;
|
|
33
|
+
--os-color-warning-dark: 168 70 0;
|
|
34
|
+
--os-color-warning-light: 255 167 50;
|
|
35
|
+
--os-color-warning-alertBg: 245 213 176;
|
|
36
|
+
--os-color-warning-contrast: 255 255 255;
|
|
37
|
+
--os-color-warning-fill: 168 70 0;
|
|
38
|
+
--os-color-warning-onFill: 255 255 255;
|
|
39
|
+
--os-color-warning-text: 168 70 0;
|
|
40
|
+
--os-color-warning-textHover: 168 70 0;
|
|
41
|
+
--os-color-warning-tint: 255 167 50;
|
|
42
|
+
--os-color-info-main: 0 135 212;
|
|
43
|
+
--os-color-info-dark: 0 107 171;
|
|
44
|
+
--os-color-info-light: 44 193 255;
|
|
45
|
+
--os-color-info-alertBg: 184 217 240;
|
|
46
|
+
--os-color-info-contrast: 255 255 255;
|
|
47
|
+
--os-color-info-fill: 0 107 171;
|
|
48
|
+
--os-color-info-onFill: 255 255 255;
|
|
49
|
+
--os-color-info-text: 0 107 171;
|
|
50
|
+
--os-color-info-textHover: 0 107 171;
|
|
51
|
+
--os-color-info-tint: 44 193 255;
|
|
52
|
+
--os-color-success-main: 50 135 54;
|
|
53
|
+
--os-color-success-dark: 42 107 45;
|
|
54
|
+
--os-color-success-light: 103 193 107;
|
|
55
|
+
--os-color-success-alertBg: 196 226 197;
|
|
56
|
+
--os-color-success-contrast: 255 255 255;
|
|
57
|
+
--os-color-success-fill: 42 107 45;
|
|
58
|
+
--os-color-success-onFill: 255 255 255;
|
|
59
|
+
--os-color-success-text: 42 107 45;
|
|
60
|
+
--os-color-success-textHover: 42 107 45;
|
|
61
|
+
--os-color-success-tint: 103 193 107;
|
|
62
|
+
--os-color-background-default: 221 230 240;
|
|
63
|
+
--os-color-background-accent100: 230 237 245;
|
|
64
|
+
--os-color-background-accent200: 238 243 249;
|
|
65
|
+
--os-color-background-accent300: 247 249 252;
|
|
66
|
+
--os-color-background-elevated: 221 230 240;
|
|
67
|
+
--os-color-background-overlay: 247 249 252;
|
|
68
|
+
--os-color-action-active: 136 136 136;
|
|
69
|
+
--os-color-action-hover: 243 243 243;
|
|
70
|
+
--os-color-action-selected: 227 227 227;
|
|
71
|
+
--os-color-action-disabledBackground: 209 209 209;
|
|
72
|
+
--os-color-action-disabled: 176 176 176;
|
|
73
|
+
--os-color-actionBackground-enabled: 255 255 255;
|
|
74
|
+
--os-color-actionBackground-hovered: 255 255 255;
|
|
75
|
+
--os-color-actionBackground-selected: 255 255 255;
|
|
76
|
+
--os-color-actionBackground-disabled: 238 238 238;
|
|
77
|
+
--os-color-actionOutlinedBorder-enabled: 136 136 136;
|
|
78
|
+
--os-color-actionOutlinedBorder-hovered: 205 205 205;
|
|
79
|
+
--os-color-actionOutlinedBorder-selected: 232 232 232;
|
|
80
|
+
--os-color-actionOutlinedBorder-disabled: 176 176 176;
|
|
81
|
+
--os-color-misc-divider: 209 209 209;
|
|
82
|
+
--os-color-misc-scrim: 0 0 0;
|
|
83
|
+
--os-color-misc-tooltipBg: 51 64 90;
|
|
84
|
+
--os-color-misc-tooltipText: 227 236 245;
|
|
85
|
+
}
|
|
86
|
+
.dark {
|
|
87
|
+
--os-mode: dark;
|
|
88
|
+
--os-color-text-primary: 227 236 245;
|
|
89
|
+
--os-color-text-secondary: 163 178 200;
|
|
90
|
+
--os-color-text-disabled: 99 112 137;
|
|
91
|
+
--os-color-text-contrast: 0 0 0;
|
|
92
|
+
--os-color-accent-main: 194 224 242;
|
|
93
|
+
--os-color-accent-dark: 159 198 227;
|
|
94
|
+
--os-color-accent-light: 220 238 248;
|
|
95
|
+
--os-color-accent-contrast: 22 45 89;
|
|
96
|
+
--os-color-primary-main: 213 213 213;
|
|
97
|
+
--os-color-primary-dark: 233 233 233;
|
|
98
|
+
--os-color-primary-light: 154 154 154;
|
|
99
|
+
--os-color-primary-contrast: 0 0 0;
|
|
100
|
+
--os-color-secondary-main: 52 69 102;
|
|
101
|
+
--os-color-secondary-dark: 43 58 87;
|
|
102
|
+
--os-color-secondary-light: 68 88 127;
|
|
103
|
+
--os-color-secondary-contrast: 227 236 245;
|
|
104
|
+
--os-color-error-main: 231 76 76;
|
|
105
|
+
--os-color-error-dark: 178 35 35;
|
|
106
|
+
--os-color-error-light: 242 119 119;
|
|
107
|
+
--os-color-error-alertBg: 92 26 26;
|
|
108
|
+
--os-color-error-contrast: 0 0 0;
|
|
109
|
+
--os-color-error-fill: 231 76 76;
|
|
110
|
+
--os-color-error-onFill: 0 0 0;
|
|
111
|
+
--os-color-error-text: 242 119 119;
|
|
112
|
+
--os-color-error-textHover: 242 119 119;
|
|
113
|
+
--os-color-error-tint: 178 35 35;
|
|
114
|
+
--os-color-warning-main: 255 140 10;
|
|
115
|
+
--os-color-warning-dark: 204 83 2;
|
|
116
|
+
--os-color-warning-light: 255 167 50;
|
|
117
|
+
--os-color-warning-alertBg: 92 46 10;
|
|
118
|
+
--os-color-warning-contrast: 255 255 255;
|
|
119
|
+
--os-color-warning-fill: 255 140 10;
|
|
120
|
+
--os-color-warning-onFill: 0 0 0;
|
|
121
|
+
--os-color-warning-text: 255 140 10;
|
|
122
|
+
--os-color-warning-textHover: 255 167 50;
|
|
123
|
+
--os-color-warning-tint: 204 83 2;
|
|
124
|
+
--os-color-info-main: 0 175 255;
|
|
125
|
+
--os-color-info-dark: 0 107 171;
|
|
126
|
+
--os-color-info-light: 44 193 255;
|
|
127
|
+
--os-color-info-alertBg: 10 58 92;
|
|
128
|
+
--os-color-info-contrast: 255 255 255;
|
|
129
|
+
--os-color-info-fill: 0 175 255;
|
|
130
|
+
--os-color-info-onFill: 0 0 0;
|
|
131
|
+
--os-color-info-text: 0 175 255;
|
|
132
|
+
--os-color-info-textHover: 44 193 255;
|
|
133
|
+
--os-color-info-tint: 0 107 171;
|
|
134
|
+
--os-color-success-main: 66 165 71;
|
|
135
|
+
--os-color-success-dark: 42 107 45;
|
|
136
|
+
--os-color-success-light: 103 193 107;
|
|
137
|
+
--os-color-success-alertBg: 26 74 29;
|
|
138
|
+
--os-color-success-contrast: 255 255 255;
|
|
139
|
+
--os-color-success-fill: 66 165 71;
|
|
140
|
+
--os-color-success-onFill: 0 0 0;
|
|
141
|
+
--os-color-success-text: 66 165 71;
|
|
142
|
+
--os-color-success-textHover: 103 193 107;
|
|
143
|
+
--os-color-success-tint: 42 107 45;
|
|
144
|
+
--os-color-background-default: 20 28 46;
|
|
145
|
+
--os-color-background-accent100: 28 38 59;
|
|
146
|
+
--os-color-background-accent200: 41 53 77;
|
|
147
|
+
--os-color-background-accent300: 51 64 90;
|
|
148
|
+
--os-color-background-elevated: 28 38 59;
|
|
149
|
+
--os-color-background-overlay: 28 38 59;
|
|
150
|
+
--os-color-action-active: 23 23 23;
|
|
151
|
+
--os-color-action-hover: 61 61 61;
|
|
152
|
+
--os-color-action-selected: 78 78 78;
|
|
153
|
+
--os-color-action-disabledBackground: 60 60 60;
|
|
154
|
+
--os-color-action-disabled: 56 56 56;
|
|
155
|
+
--os-color-actionBackground-enabled: 255 255 255;
|
|
156
|
+
--os-color-actionBackground-hovered: 255 255 255;
|
|
157
|
+
--os-color-actionBackground-selected: 255 255 255;
|
|
158
|
+
--os-color-actionBackground-disabled: 56 56 56;
|
|
159
|
+
--os-color-actionOutlinedBorder-enabled: 123 123 123;
|
|
160
|
+
--os-color-actionOutlinedBorder-hovered: 47 47 47;
|
|
161
|
+
--os-color-actionOutlinedBorder-selected: 64 64 64;
|
|
162
|
+
--os-color-actionOutlinedBorder-disabled: 56 56 56;
|
|
163
|
+
--os-color-misc-divider: 64 64 64;
|
|
164
|
+
--os-color-misc-scrim: 0 0 0;
|
|
165
|
+
--os-color-misc-tooltipBg: 247 249 252;
|
|
166
|
+
--os-color-misc-tooltipText: 17 26 46;
|
|
167
|
+
}
|
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
/* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
|
|
2
|
+
/* Theme "wine". Variables hold RGB channels: use rgb(var(--os-color-…) / <alpha>). */
|
|
3
|
+
@import "../tokens.css";
|
|
4
|
+
:root {
|
|
5
|
+
--os-mode: light;
|
|
6
|
+
--os-color-text-primary: 42 22 34;
|
|
7
|
+
--os-color-text-secondary: 106 74 92;
|
|
8
|
+
--os-color-text-disabled: 166 139 153;
|
|
9
|
+
--os-color-text-contrast: 255 255 255;
|
|
10
|
+
--os-color-accent-main: 140 38 104;
|
|
11
|
+
--os-color-accent-dark: 110 29 82;
|
|
12
|
+
--os-color-accent-light: 166 96 134;
|
|
13
|
+
--os-color-accent-contrast: 242 237 228;
|
|
14
|
+
--os-color-primary-main: 69 69 69;
|
|
15
|
+
--os-color-primary-dark: 38 38 38;
|
|
16
|
+
--os-color-primary-light: 136 136 136;
|
|
17
|
+
--os-color-primary-contrast: 255 255 255;
|
|
18
|
+
--os-color-secondary-main: 213 188 200;
|
|
19
|
+
--os-color-secondary-dark: 191 147 168;
|
|
20
|
+
--os-color-secondary-light: 230 212 220;
|
|
21
|
+
--os-color-secondary-contrast: 42 22 34;
|
|
22
|
+
--os-color-error-main: 211 47 47;
|
|
23
|
+
--os-color-error-dark: 168 33 33;
|
|
24
|
+
--os-color-error-light: 242 119 119;
|
|
25
|
+
--os-color-error-alertBg: 242 196 196;
|
|
26
|
+
--os-color-error-contrast: 255 255 255;
|
|
27
|
+
--os-color-error-fill: 168 33 33;
|
|
28
|
+
--os-color-error-onFill: 255 255 255;
|
|
29
|
+
--os-color-error-text: 168 33 33;
|
|
30
|
+
--os-color-error-textHover: 168 33 33;
|
|
31
|
+
--os-color-error-tint: 242 119 119;
|
|
32
|
+
--os-color-warning-main: 239 108 0;
|
|
33
|
+
--os-color-warning-dark: 168 70 0;
|
|
34
|
+
--os-color-warning-light: 255 167 50;
|
|
35
|
+
--os-color-warning-alertBg: 245 213 176;
|
|
36
|
+
--os-color-warning-contrast: 255 255 255;
|
|
37
|
+
--os-color-warning-fill: 168 70 0;
|
|
38
|
+
--os-color-warning-onFill: 255 255 255;
|
|
39
|
+
--os-color-warning-text: 168 70 0;
|
|
40
|
+
--os-color-warning-textHover: 168 70 0;
|
|
41
|
+
--os-color-warning-tint: 255 167 50;
|
|
42
|
+
--os-color-info-main: 0 135 212;
|
|
43
|
+
--os-color-info-dark: 0 107 171;
|
|
44
|
+
--os-color-info-light: 44 193 255;
|
|
45
|
+
--os-color-info-alertBg: 184 217 240;
|
|
46
|
+
--os-color-info-contrast: 255 255 255;
|
|
47
|
+
--os-color-info-fill: 0 107 171;
|
|
48
|
+
--os-color-info-onFill: 255 255 255;
|
|
49
|
+
--os-color-info-text: 0 107 171;
|
|
50
|
+
--os-color-info-textHover: 0 107 171;
|
|
51
|
+
--os-color-info-tint: 44 193 255;
|
|
52
|
+
--os-color-success-main: 50 135 54;
|
|
53
|
+
--os-color-success-dark: 42 107 45;
|
|
54
|
+
--os-color-success-light: 103 193 107;
|
|
55
|
+
--os-color-success-alertBg: 196 226 197;
|
|
56
|
+
--os-color-success-contrast: 255 255 255;
|
|
57
|
+
--os-color-success-fill: 42 107 45;
|
|
58
|
+
--os-color-success-onFill: 255 255 255;
|
|
59
|
+
--os-color-success-text: 42 107 45;
|
|
60
|
+
--os-color-success-textHover: 42 107 45;
|
|
61
|
+
--os-color-success-tint: 103 193 107;
|
|
62
|
+
--os-color-background-default: 238 228 228;
|
|
63
|
+
--os-color-background-accent100: 243 235 234;
|
|
64
|
+
--os-color-background-accent200: 247 242 240;
|
|
65
|
+
--os-color-background-accent300: 252 249 247;
|
|
66
|
+
--os-color-background-elevated: 238 228 228;
|
|
67
|
+
--os-color-background-overlay: 252 249 247;
|
|
68
|
+
--os-color-action-active: 136 136 136;
|
|
69
|
+
--os-color-action-hover: 243 243 243;
|
|
70
|
+
--os-color-action-selected: 227 227 227;
|
|
71
|
+
--os-color-action-disabledBackground: 209 209 209;
|
|
72
|
+
--os-color-action-disabled: 176 176 176;
|
|
73
|
+
--os-color-actionBackground-enabled: 255 255 255;
|
|
74
|
+
--os-color-actionBackground-hovered: 255 255 255;
|
|
75
|
+
--os-color-actionBackground-selected: 255 255 255;
|
|
76
|
+
--os-color-actionBackground-disabled: 238 238 238;
|
|
77
|
+
--os-color-actionOutlinedBorder-enabled: 136 136 136;
|
|
78
|
+
--os-color-actionOutlinedBorder-hovered: 205 205 205;
|
|
79
|
+
--os-color-actionOutlinedBorder-selected: 232 232 232;
|
|
80
|
+
--os-color-actionOutlinedBorder-disabled: 176 176 176;
|
|
81
|
+
--os-color-misc-divider: 209 209 209;
|
|
82
|
+
--os-color-misc-scrim: 0 0 0;
|
|
83
|
+
--os-color-misc-tooltipBg: 81 64 77;
|
|
84
|
+
--os-color-misc-tooltipText: 242 237 228;
|
|
85
|
+
}
|
|
86
|
+
.dark {
|
|
87
|
+
--os-mode: dark;
|
|
88
|
+
--os-color-text-primary: 242 237 228;
|
|
89
|
+
--os-color-text-secondary: 194 170 182;
|
|
90
|
+
--os-color-text-disabled: 125 102 114;
|
|
91
|
+
--os-color-text-contrast: 0 0 0;
|
|
92
|
+
--os-color-accent-main: 226 180 204;
|
|
93
|
+
--os-color-accent-dark: 191 147 168;
|
|
94
|
+
--os-color-accent-light: 240 210 225;
|
|
95
|
+
--os-color-accent-contrast: 44 26 38;
|
|
96
|
+
--os-color-primary-main: 213 213 213;
|
|
97
|
+
--os-color-primary-dark: 233 233 233;
|
|
98
|
+
--os-color-primary-light: 154 154 154;
|
|
99
|
+
--os-color-primary-contrast: 0 0 0;
|
|
100
|
+
--os-color-secondary-main: 78 51 70;
|
|
101
|
+
--os-color-secondary-dark: 67 41 60;
|
|
102
|
+
--os-color-secondary-light: 99 66 87;
|
|
103
|
+
--os-color-secondary-contrast: 242 237 228;
|
|
104
|
+
--os-color-error-main: 231 76 76;
|
|
105
|
+
--os-color-error-dark: 178 35 35;
|
|
106
|
+
--os-color-error-light: 242 119 119;
|
|
107
|
+
--os-color-error-alertBg: 92 26 26;
|
|
108
|
+
--os-color-error-contrast: 0 0 0;
|
|
109
|
+
--os-color-error-fill: 231 76 76;
|
|
110
|
+
--os-color-error-onFill: 0 0 0;
|
|
111
|
+
--os-color-error-text: 242 119 119;
|
|
112
|
+
--os-color-error-textHover: 242 119 119;
|
|
113
|
+
--os-color-error-tint: 178 35 35;
|
|
114
|
+
--os-color-warning-main: 255 140 10;
|
|
115
|
+
--os-color-warning-dark: 204 83 2;
|
|
116
|
+
--os-color-warning-light: 255 167 50;
|
|
117
|
+
--os-color-warning-alertBg: 92 46 10;
|
|
118
|
+
--os-color-warning-contrast: 255 255 255;
|
|
119
|
+
--os-color-warning-fill: 255 140 10;
|
|
120
|
+
--os-color-warning-onFill: 0 0 0;
|
|
121
|
+
--os-color-warning-text: 255 140 10;
|
|
122
|
+
--os-color-warning-textHover: 255 167 50;
|
|
123
|
+
--os-color-warning-tint: 204 83 2;
|
|
124
|
+
--os-color-info-main: 0 175 255;
|
|
125
|
+
--os-color-info-dark: 0 107 171;
|
|
126
|
+
--os-color-info-light: 44 193 255;
|
|
127
|
+
--os-color-info-alertBg: 10 58 92;
|
|
128
|
+
--os-color-info-contrast: 255 255 255;
|
|
129
|
+
--os-color-info-fill: 0 175 255;
|
|
130
|
+
--os-color-info-onFill: 0 0 0;
|
|
131
|
+
--os-color-info-text: 0 175 255;
|
|
132
|
+
--os-color-info-textHover: 44 193 255;
|
|
133
|
+
--os-color-info-tint: 0 107 171;
|
|
134
|
+
--os-color-success-main: 66 165 71;
|
|
135
|
+
--os-color-success-dark: 42 107 45;
|
|
136
|
+
--os-color-success-light: 103 193 107;
|
|
137
|
+
--os-color-success-alertBg: 26 74 29;
|
|
138
|
+
--os-color-success-contrast: 255 255 255;
|
|
139
|
+
--os-color-success-fill: 66 165 71;
|
|
140
|
+
--os-color-success-onFill: 0 0 0;
|
|
141
|
+
--os-color-success-text: 66 165 71;
|
|
142
|
+
--os-color-success-textHover: 103 193 107;
|
|
143
|
+
--os-color-success-tint: 42 107 45;
|
|
144
|
+
--os-color-background-default: 42 31 40;
|
|
145
|
+
--os-color-background-accent100: 53 40 51;
|
|
146
|
+
--os-color-background-accent200: 69 53 65;
|
|
147
|
+
--os-color-background-accent300: 81 64 77;
|
|
148
|
+
--os-color-background-elevated: 53 40 51;
|
|
149
|
+
--os-color-background-overlay: 53 40 51;
|
|
150
|
+
--os-color-action-active: 23 23 23;
|
|
151
|
+
--os-color-action-hover: 61 61 61;
|
|
152
|
+
--os-color-action-selected: 78 78 78;
|
|
153
|
+
--os-color-action-disabledBackground: 60 60 60;
|
|
154
|
+
--os-color-action-disabled: 56 56 56;
|
|
155
|
+
--os-color-actionBackground-enabled: 255 255 255;
|
|
156
|
+
--os-color-actionBackground-hovered: 255 255 255;
|
|
157
|
+
--os-color-actionBackground-selected: 255 255 255;
|
|
158
|
+
--os-color-actionBackground-disabled: 56 56 56;
|
|
159
|
+
--os-color-actionOutlinedBorder-enabled: 123 123 123;
|
|
160
|
+
--os-color-actionOutlinedBorder-hovered: 47 47 47;
|
|
161
|
+
--os-color-actionOutlinedBorder-selected: 64 64 64;
|
|
162
|
+
--os-color-actionOutlinedBorder-disabled: 56 56 56;
|
|
163
|
+
--os-color-misc-divider: 64 64 64;
|
|
164
|
+
--os-color-misc-scrim: 0 0 0;
|
|
165
|
+
--os-color-misc-tooltipBg: 252 249 247;
|
|
166
|
+
--os-color-misc-tooltipText: 42 22 34;
|
|
167
|
+
}
|
|
168
|
+
@media (prefers-color-scheme: dark) {
|
|
169
|
+
:root:not(.light) {
|
|
170
|
+
--os-mode: dark;
|
|
171
|
+
--os-color-text-primary: 242 237 228;
|
|
172
|
+
--os-color-text-secondary: 194 170 182;
|
|
173
|
+
--os-color-text-disabled: 125 102 114;
|
|
174
|
+
--os-color-text-contrast: 0 0 0;
|
|
175
|
+
--os-color-accent-main: 226 180 204;
|
|
176
|
+
--os-color-accent-dark: 191 147 168;
|
|
177
|
+
--os-color-accent-light: 240 210 225;
|
|
178
|
+
--os-color-accent-contrast: 44 26 38;
|
|
179
|
+
--os-color-primary-main: 213 213 213;
|
|
180
|
+
--os-color-primary-dark: 233 233 233;
|
|
181
|
+
--os-color-primary-light: 154 154 154;
|
|
182
|
+
--os-color-primary-contrast: 0 0 0;
|
|
183
|
+
--os-color-secondary-main: 78 51 70;
|
|
184
|
+
--os-color-secondary-dark: 67 41 60;
|
|
185
|
+
--os-color-secondary-light: 99 66 87;
|
|
186
|
+
--os-color-secondary-contrast: 242 237 228;
|
|
187
|
+
--os-color-error-main: 231 76 76;
|
|
188
|
+
--os-color-error-dark: 178 35 35;
|
|
189
|
+
--os-color-error-light: 242 119 119;
|
|
190
|
+
--os-color-error-alertBg: 92 26 26;
|
|
191
|
+
--os-color-error-contrast: 0 0 0;
|
|
192
|
+
--os-color-error-fill: 231 76 76;
|
|
193
|
+
--os-color-error-onFill: 0 0 0;
|
|
194
|
+
--os-color-error-text: 242 119 119;
|
|
195
|
+
--os-color-error-textHover: 242 119 119;
|
|
196
|
+
--os-color-error-tint: 178 35 35;
|
|
197
|
+
--os-color-warning-main: 255 140 10;
|
|
198
|
+
--os-color-warning-dark: 204 83 2;
|
|
199
|
+
--os-color-warning-light: 255 167 50;
|
|
200
|
+
--os-color-warning-alertBg: 92 46 10;
|
|
201
|
+
--os-color-warning-contrast: 255 255 255;
|
|
202
|
+
--os-color-warning-fill: 255 140 10;
|
|
203
|
+
--os-color-warning-onFill: 0 0 0;
|
|
204
|
+
--os-color-warning-text: 255 140 10;
|
|
205
|
+
--os-color-warning-textHover: 255 167 50;
|
|
206
|
+
--os-color-warning-tint: 204 83 2;
|
|
207
|
+
--os-color-info-main: 0 175 255;
|
|
208
|
+
--os-color-info-dark: 0 107 171;
|
|
209
|
+
--os-color-info-light: 44 193 255;
|
|
210
|
+
--os-color-info-alertBg: 10 58 92;
|
|
211
|
+
--os-color-info-contrast: 255 255 255;
|
|
212
|
+
--os-color-info-fill: 0 175 255;
|
|
213
|
+
--os-color-info-onFill: 0 0 0;
|
|
214
|
+
--os-color-info-text: 0 175 255;
|
|
215
|
+
--os-color-info-textHover: 44 193 255;
|
|
216
|
+
--os-color-info-tint: 0 107 171;
|
|
217
|
+
--os-color-success-main: 66 165 71;
|
|
218
|
+
--os-color-success-dark: 42 107 45;
|
|
219
|
+
--os-color-success-light: 103 193 107;
|
|
220
|
+
--os-color-success-alertBg: 26 74 29;
|
|
221
|
+
--os-color-success-contrast: 255 255 255;
|
|
222
|
+
--os-color-success-fill: 66 165 71;
|
|
223
|
+
--os-color-success-onFill: 0 0 0;
|
|
224
|
+
--os-color-success-text: 66 165 71;
|
|
225
|
+
--os-color-success-textHover: 103 193 107;
|
|
226
|
+
--os-color-success-tint: 42 107 45;
|
|
227
|
+
--os-color-background-default: 42 31 40;
|
|
228
|
+
--os-color-background-accent100: 53 40 51;
|
|
229
|
+
--os-color-background-accent200: 69 53 65;
|
|
230
|
+
--os-color-background-accent300: 81 64 77;
|
|
231
|
+
--os-color-background-elevated: 53 40 51;
|
|
232
|
+
--os-color-background-overlay: 53 40 51;
|
|
233
|
+
--os-color-action-active: 23 23 23;
|
|
234
|
+
--os-color-action-hover: 61 61 61;
|
|
235
|
+
--os-color-action-selected: 78 78 78;
|
|
236
|
+
--os-color-action-disabledBackground: 60 60 60;
|
|
237
|
+
--os-color-action-disabled: 56 56 56;
|
|
238
|
+
--os-color-actionBackground-enabled: 255 255 255;
|
|
239
|
+
--os-color-actionBackground-hovered: 255 255 255;
|
|
240
|
+
--os-color-actionBackground-selected: 255 255 255;
|
|
241
|
+
--os-color-actionBackground-disabled: 56 56 56;
|
|
242
|
+
--os-color-actionOutlinedBorder-enabled: 123 123 123;
|
|
243
|
+
--os-color-actionOutlinedBorder-hovered: 47 47 47;
|
|
244
|
+
--os-color-actionOutlinedBorder-selected: 64 64 64;
|
|
245
|
+
--os-color-actionOutlinedBorder-disabled: 56 56 56;
|
|
246
|
+
--os-color-misc-divider: 64 64 64;
|
|
247
|
+
--os-color-misc-scrim: 0 0 0;
|
|
248
|
+
--os-color-misc-tooltipBg: 252 249 247;
|
|
249
|
+
--os-color-misc-tooltipText: 42 22 34;
|
|
250
|
+
}
|
|
251
|
+
}
|