oneslash-design-system 2.0.5 → 2.1.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.
Files changed (10) hide show
  1. package/README.md +1 -0
  2. package/dist/designTokens.d.ts +918 -0
  3. package/dist/designTokens.js +47 -2
  4. package/dist/themes/clay-auto.css +251 -0
  5. package/dist/themes/clay.css +167 -0
  6. package/dist/themes/indigo-auto.css +251 -0
  7. package/dist/themes/indigo.css +167 -0
  8. package/dist/themes/wine-auto.css +251 -0
  9. package/dist/themes/wine.css +167 -0
  10. package/package.json +1 -1
package/dist/designTokens.js CHANGED
@@ -331,7 +331,47 @@ var forestDark = override(baseColors.dark, {
331
331
  secondary: { main: '#6E7A5A', dark: '#5D6849', light: '#828D6B' },
332
332
  background: { default: '#1C2213', accent100: '#27301B', accent200: '#364228', accent300: '#424F34' },
333
333
  });
334
- // The derived light info.text (#006BAB) is 4.33:1 on forest's background; #0068A3 is the lightest step that reaches 4.5.
334
+ // Clay, Indigo and Wine follow default's shape (tinted secondary per mode, so secondary buttons keep the
335
+ // text.primary label) with the brand hue in text, accent, secondary and background.
336
+ var clayLight = override(baseColors.light, {
337
+ text: { primary: '#2B1F12', secondary: '#6B5640', disabled: '#A8957C' },
338
+ accent: { main: '#D9B26A', dark: '#B8904A', light: '#F2D57E', contrast: '#2B1F12' },
339
+ secondary: { main: '#CDB49A', dark: '#B89A7C', light: '#E2D1BE' },
340
+ background: { default: '#EDE0CC', accent100: '#F2E8D9', accent200: '#F7F0E6', accent300: '#FCF8F2' },
341
+ });
342
+ var clayDark = override(baseColors.dark, {
343
+ text: { primary: '#F2E2CE', secondary: '#C2AD93', disabled: '#7A6A57' },
344
+ accent: { main: '#F2D57E', dark: '#D9B26A', light: '#F7E4A8', contrast: '#2B1F12' },
345
+ secondary: { main: '#5C4630', dark: '#4D3A27', light: '#75593D' },
346
+ background: { default: '#2A2119', accent100: '#362A1F', accent200: '#45362A', accent300: '#514034' },
347
+ });
348
+ var indigoLight = override(baseColors.light, {
349
+ text: { primary: '#111A2E', secondary: '#4A5670', disabled: '#8F99AD' },
350
+ accent: { main: '#204F8C', dark: '#162D59', light: '#548DBF', contrast: '#FFFFFF' },
351
+ secondary: { main: '#B4C6DC', dark: '#8EA6C4', light: '#CFDCEA' },
352
+ background: { default: '#DDE6F0', accent100: '#E6EDF5', accent200: '#EEF3F9', accent300: '#F7F9FC' },
353
+ });
354
+ var indigoDark = override(baseColors.dark, {
355
+ text: { primary: '#E3ECF5', secondary: '#A3B2C8', disabled: '#637089' },
356
+ accent: { main: '#C2E0F2', dark: '#9FC6E3', light: '#DCEEF8', contrast: '#162D59' },
357
+ secondary: { main: '#344566', dark: '#2B3A57', light: '#44587F' },
358
+ background: { default: '#141C2E', accent100: '#1C263B', accent200: '#29354D', accent300: '#33405A' },
359
+ });
360
+ var wineLight = override(baseColors.light, {
361
+ text: { primary: '#2A1622', secondary: '#6A4A5C', disabled: '#A68B99' },
362
+ accent: { main: '#8C2668', dark: '#6E1D52', light: '#A66086', contrast: '#F2EDE4' },
363
+ secondary: { main: '#D5BCC8', dark: '#BF93A8', light: '#E6D4DC' },
364
+ background: { default: '#EEE4E4', accent100: '#F3EBEA', accent200: '#F7F2F0', accent300: '#FCF9F7' },
365
+ });
366
+ var wineDark = override(baseColors.dark, {
367
+ text: { primary: '#F2EDE4', secondary: '#C2AAB6', disabled: '#7D6672' },
368
+ accent: { main: '#E2B4CC', dark: '#BF93A8', light: '#F0D2E1', contrast: '#2C1A26' },
369
+ secondary: { main: '#4E3346', dark: '#43293C', light: '#634257' },
370
+ background: { default: '#2A1F28', accent100: '#352833', accent200: '#453541', accent300: '#51404D' },
371
+ });
372
+ /** @param {typeof base.colors.light} light @param {typeof base.colors.light} dark */
373
+ var themeSets = function (light, dark) { return withTooltips(withSemanticKeys(light, 'light'), withSemanticKeys(dark, 'dark')); };
374
+ // The derived light info.text (#006BAB) is 4.33:1 on forest's background (4.37 on clay's); #0068A3 is the lightest step that reaches 4.5.
335
375
  /**
336
376
  * @template {typeof base.colors.light} S
337
377
  * @param {S} set
@@ -360,4 +400,9 @@ var withTooltips = function (light, dark) { return ({
360
400
  }); };
361
401
  var defaultSets = withTooltips(withSemanticKeys(baseColors.light, 'light'), withSemanticKeys(baseColors.dark, 'dark'));
362
402
  var forestSets = withTooltips(withSecondaryContrast(withForestInfoText(withSemanticKeys(forestLight, 'light')), '#FFFFFF'), withSecondaryContrast(withSemanticKeys(forestDark, 'dark'), '#FFFFFF'));
363
- module.exports = __assign(__assign({}, base), { colors: defaultSets, themes: { forest: forestSets } });
403
+ module.exports = __assign(__assign({}, base), { colors: defaultSets, themes: {
404
+ forest: forestSets,
405
+ clay: withTooltips(withForestInfoText(withSemanticKeys(clayLight, 'light')), withSemanticKeys(clayDark, 'dark')),
406
+ indigo: themeSets(indigoLight, indigoDark),
407
+ wine: themeSets(wineLight, wineDark),
408
+ } });
package/dist/themes/clay-auto.css ADDED
@@ -0,0 +1,251 @@
1
+ /* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
2
+ /* Theme "clay". 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: 43 31 18;
7
+ --os-color-text-secondary: 107 86 64;
8
+ --os-color-text-disabled: 168 149 124;
9
+ --os-color-text-contrast: 255 255 255;
10
+ --os-color-accent-main: 217 178 106;
11
+ --os-color-accent-dark: 184 144 74;
12
+ --os-color-accent-light: 242 213 126;
13
+ --os-color-accent-contrast: 43 31 18;
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: 205 180 154;
19
+ --os-color-secondary-dark: 184 154 124;
20
+ --os-color-secondary-light: 226 209 190;
21
+ --os-color-secondary-contrast: 43 31 18;
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 104 163;
50
+ --os-color-info-textHover: 0 104 163;
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: 237 224 204;
63
+ --os-color-background-accent100: 242 232 217;
64
+ --os-color-background-accent200: 247 240 230;
65
+ --os-color-background-accent300: 252 248 242;
66
+ --os-color-background-elevated: 237 224 204;
67
+ --os-color-background-overlay: 252 248 242;
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 52;
84
+ --os-color-misc-tooltipText: 242 226 206;
85
+ }
86
+ .dark {
87
+ --os-mode: dark;
88
+ --os-color-text-primary: 242 226 206;
89
+ --os-color-text-secondary: 194 173 147;
90
+ --os-color-text-disabled: 122 106 87;
91
+ --os-color-text-contrast: 0 0 0;
92
+ --os-color-accent-main: 242 213 126;
93
+ --os-color-accent-dark: 217 178 106;
94
+ --os-color-accent-light: 247 228 168;
95
+ --os-color-accent-contrast: 43 31 18;
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: 92 70 48;
101
+ --os-color-secondary-dark: 77 58 39;
102
+ --os-color-secondary-light: 117 89 61;
103
+ --os-color-secondary-contrast: 242 226 206;
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 33 25;
145
+ --os-color-background-accent100: 54 42 31;
146
+ --os-color-background-accent200: 69 54 42;
147
+ --os-color-background-accent300: 81 64 52;
148
+ --os-color-background-elevated: 54 42 31;
149
+ --os-color-background-overlay: 54 42 31;
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 248 242;
166
+ --os-color-misc-tooltipText: 43 31 18;
167
+ }
168
+ @media (prefers-color-scheme: dark) {
169
+ :root:not(.light) {
170
+ --os-mode: dark;
171
+ --os-color-text-primary: 242 226 206;
172
+ --os-color-text-secondary: 194 173 147;
173
+ --os-color-text-disabled: 122 106 87;
174
+ --os-color-text-contrast: 0 0 0;
175
+ --os-color-accent-main: 242 213 126;
176
+ --os-color-accent-dark: 217 178 106;
177
+ --os-color-accent-light: 247 228 168;
178
+ --os-color-accent-contrast: 43 31 18;
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: 92 70 48;
184
+ --os-color-secondary-dark: 77 58 39;
185
+ --os-color-secondary-light: 117 89 61;
186
+ --os-color-secondary-contrast: 242 226 206;
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 33 25;
228
+ --os-color-background-accent100: 54 42 31;
229
+ --os-color-background-accent200: 69 54 42;
230
+ --os-color-background-accent300: 81 64 52;
231
+ --os-color-background-elevated: 54 42 31;
232
+ --os-color-background-overlay: 54 42 31;
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 248 242;
249
+ --os-color-misc-tooltipText: 43 31 18;
250
+ }
251
+ }
package/dist/themes/clay.css ADDED
@@ -0,0 +1,167 @@
1
+ /* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
2
+ /* Theme "clay". 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: 43 31 18;
7
+ --os-color-text-secondary: 107 86 64;
8
+ --os-color-text-disabled: 168 149 124;
9
+ --os-color-text-contrast: 255 255 255;
10
+ --os-color-accent-main: 217 178 106;
11
+ --os-color-accent-dark: 184 144 74;
12
+ --os-color-accent-light: 242 213 126;
13
+ --os-color-accent-contrast: 43 31 18;
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: 205 180 154;
19
+ --os-color-secondary-dark: 184 154 124;
20
+ --os-color-secondary-light: 226 209 190;
21
+ --os-color-secondary-contrast: 43 31 18;
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 104 163;
50
+ --os-color-info-textHover: 0 104 163;
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: 237 224 204;
63
+ --os-color-background-accent100: 242 232 217;
64
+ --os-color-background-accent200: 247 240 230;
65
+ --os-color-background-accent300: 252 248 242;
66
+ --os-color-background-elevated: 237 224 204;
67
+ --os-color-background-overlay: 252 248 242;
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 52;
84
+ --os-color-misc-tooltipText: 242 226 206;
85
+ }
86
+ .dark {
87
+ --os-mode: dark;
88
+ --os-color-text-primary: 242 226 206;
89
+ --os-color-text-secondary: 194 173 147;
90
+ --os-color-text-disabled: 122 106 87;
91
+ --os-color-text-contrast: 0 0 0;
92
+ --os-color-accent-main: 242 213 126;
93
+ --os-color-accent-dark: 217 178 106;
94
+ --os-color-accent-light: 247 228 168;
95
+ --os-color-accent-contrast: 43 31 18;
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: 92 70 48;
101
+ --os-color-secondary-dark: 77 58 39;
102
+ --os-color-secondary-light: 117 89 61;
103
+ --os-color-secondary-contrast: 242 226 206;
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 33 25;
145
+ --os-color-background-accent100: 54 42 31;
146
+ --os-color-background-accent200: 69 54 42;
147
+ --os-color-background-accent300: 81 64 52;
148
+ --os-color-background-elevated: 54 42 31;
149
+ --os-color-background-overlay: 54 42 31;
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 248 242;
166
+ --os-color-misc-tooltipText: 43 31 18;
167
+ }