@bethinkpl/design-system 34.0.9 → 34.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 (16) hide show
  1. package/lib/styles/settings/colors/_raw-bodywork.json +1 -1
  2. package/lib/styles/settings/colors/_raw-bodywork.scss +0 -2
  3. package/lib/styles/settings/colors/_raw-wnl.json +1 -1
  4. package/lib/styles/settings/colors/_raw-wnl.scss +4 -6
  5. package/lib/styles/settings/colors/_raw.json +1 -1
  6. package/lib/styles/settings/colors/_raw.scss +84 -64
  7. package/lib/styles/settings/colors/_tokens-bodywork-variables.scss +22 -8
  8. package/lib/styles/settings/colors/_tokens-bodywork.json +1 -1
  9. package/lib/styles/settings/colors/_tokens-bodywork.scss +15 -1
  10. package/lib/styles/settings/colors/_tokens-variables.scss +89 -60
  11. package/lib/styles/settings/colors/_tokens-wnl-variables.scss +15 -1
  12. package/lib/styles/settings/colors/_tokens-wnl.json +1 -1
  13. package/lib/styles/settings/colors/_tokens-wnl.scss +15 -1
  14. package/lib/styles/settings/colors/_tokens.json +1 -1
  15. package/lib/styles/settings/colors/_tokens.scss +29 -0
  16. package/package.json +3 -3
package/lib/styles/settings/colors/_tokens-variables.scss CHANGED
@@ -25,6 +25,10 @@
25
25
  --color-inverted-shadow-strong: rgba(var(--raw-white-rgb), 0.94);
26
26
  --color-inverted-shadow: rgba(var(--raw-white-rgb), 0.92);
27
27
  --color-inverted-shadow-weak: rgba(var(--raw-white-rgb), 0.88);
28
+ --color-primary-text-strong: var(--theme-700);
29
+ --color-primary-text-strong-hovered: var(--theme-900);
30
+ --color-primary-text-strong-focused: var(--theme-900);
31
+ --color-primary-text-strong-disabled: var(--theme-200);
28
32
  --color-primary-text: var(--theme-600);
29
33
  --color-primary-text-hovered: var(--theme-800);
30
34
  --color-primary-text-focused: var(--theme-800);
@@ -66,6 +70,7 @@
66
70
  --color-primary-background-ghost-focused: rgba(var(--theme-500-rgb), 0.12);
67
71
  --color-primary-background-ghost-pressed: rgba(var(--theme-500-rgb), 0.18);
68
72
  --color-primary-background-ghost-disabled: rgba(var(--theme-500-rgb), 0);
73
+ --color-primary-overlay: rgba(var(--theme-100-rgb), 0.8);
69
74
  --color-primary-border: var(--theme-500);
70
75
  --color-primary-border-hovered: var(--theme-700);
71
76
  --color-primary-border-focused: var(--theme-700);
@@ -146,8 +151,8 @@
146
151
  --color-neutral-border-strong-focused: var(--raw-gray-600);
147
152
  --color-neutral-border-strong-disabled: var(--raw-gray-300);
148
153
  --color-neutral-border: var(--raw-gray-300);
149
- --color-neutral-border-hovered: var(--raw-gray-500);
150
- --color-neutral-border-focused: var(--raw-gray-500);
154
+ --color-neutral-border-hovered: var(--raw-gray-400);
155
+ --color-neutral-border-focused: var(--raw-gray-400);
151
156
  --color-neutral-border-disabled: var(--raw-gray-200);
152
157
  --color-neutral-border-weak: var(--raw-gray-200);
153
158
  --color-neutral-border-weak-hovered: var(--raw-gray-400);
@@ -157,10 +162,14 @@
157
162
  --color-neutral-divider-strong: var(--raw-gray-300);
158
163
  --color-neutral-divider: var(--raw-gray-200);
159
164
  --color-neutral-divider-weak: var(--raw-gray-100);
160
- --color-neutral-ripple: rgba(var(--raw-gray-600-rgb), 0.12);
161
- --color-danger-text: var(--raw-red-500);
162
- --color-danger-text-hovered: var(--raw-red-700);
163
- --color-danger-text-focused: var(--raw-red-700);
165
+ --color-neutral-ripple: rgba(var(--raw-gray-700-rgb), 0.12);
166
+ --color-danger-text-strong: var(--raw-red-700);
167
+ --color-danger-text-strong-hovered: var(--raw-red-900);
168
+ --color-danger-text-strong-focused: var(--raw-red-900);
169
+ --color-danger-text-strong-disabled: var(--raw-red-200);
170
+ --color-danger-text: var(--raw-red-600);
171
+ --color-danger-text-hovered: var(--raw-red-800);
172
+ --color-danger-text-focused: var(--raw-red-800);
164
173
  --color-danger-text-disabled: var(--raw-red-200);
165
174
  --color-danger-text-weak: var(--raw-red-400);
166
175
  --color-danger-text-weak-hovered: var(--raw-red-600);
@@ -204,9 +213,13 @@
204
213
  --color-danger-border-weak-focused: var(--raw-red-300);
205
214
  --color-danger-border-weak-disabled: var(--raw-red-100);
206
215
  --color-danger-ripple: rgba(var(--raw-red-500-rgb), 0.12);
207
- --color-fail-text: var(--raw-orange-500);
208
- --color-fail-text-hovered: var(--raw-orange-700);
209
- --color-fail-text-focused: var(--raw-orange-700);
216
+ --color-fail-text-strong: var(--raw-orange-700);
217
+ --color-fail-text-strong-hovered: var(--raw-orange-900);
218
+ --color-fail-text-strong-focused: var(--raw-orange-900);
219
+ --color-fail-text-strong-disabled: var(--raw-orange-200);
220
+ --color-fail-text: var(--raw-orange-600);
221
+ --color-fail-text-hovered: var(--raw-orange-800);
222
+ --color-fail-text-focused: var(--raw-orange-800);
210
223
  --color-fail-text-disabled: var(--raw-orange-200);
211
224
  --color-fail-text-weak: var(--raw-orange-400);
212
225
  --color-fail-text-weak-hovered: var(--raw-orange-600);
@@ -234,7 +247,7 @@
234
247
  --color-fail-background-hovered: var(--raw-orange-100);
235
248
  --color-fail-background-focused: var(--raw-orange-100);
236
249
  --color-fail-background-pressed: var(--raw-orange-200);
237
- --color-fail-background-disabled: var(--raw-orange-50);
250
+ --color-fail-background-disabled: var(--raw-orange-100);
238
251
  --color-fail-background-weak: var(--raw-white);
239
252
  --color-fail-background-weak-hovered: var(--raw-orange-100);
240
253
  --color-fail-background-weak-focused: var(--raw-orange-100);
@@ -252,11 +265,15 @@
252
265
  --color-fail-border-weak: var(--raw-orange-100);
253
266
  --color-fail-border-weak-hovered: var(--raw-orange-300);
254
267
  --color-fail-border-weak-focused: var(--raw-orange-300);
255
- --color-fail-border-weak-disabled: var(--raw-orange-200);
268
+ --color-fail-border-weak-disabled: var(--raw-orange-100);
256
269
  --color-fail-ripple: rgba(var(--raw-orange-500-rgb), 0.12);
257
- --color-warning-text: var(--raw-gold-500);
258
- --color-warning-text-hovered: var(--raw-gold-700);
259
- --color-warning-text-focused: var(--raw-gold-700);
270
+ --color-warning-text-strong: var(--raw-gold-700);
271
+ --color-warning-text-strong-hovered: var(--raw-gold-900);
272
+ --color-warning-text-strong-focused: var(--raw-gold-900);
273
+ --color-warning-text-strong-disabled: var(--raw-gold-200);
274
+ --color-warning-text: var(--raw-gold-600);
275
+ --color-warning-text-hovered: var(--raw-gold-800);
276
+ --color-warning-text-focused: var(--raw-gold-800);
260
277
  --color-warning-text-disabled: var(--raw-gold-200);
261
278
  --color-warning-text-weak: var(--raw-gold-400);
262
279
  --color-warning-text-weak-hovered: var(--raw-gold-600);
@@ -304,9 +321,13 @@
304
321
  --color-warning-border-weak-focused: var(--raw-gold-300);
305
322
  --color-warning-border-weak-disabled: var(--raw-gold-100);
306
323
  --color-warning-ripple: rgba(var(--raw-gold-500-rgb), 0.12);
307
- --color-success-text: var(--raw-green-500);
308
- --color-success-text-hovered: var(--raw-green-700);
309
- --color-success-text-focused: var(--raw-green-700);
324
+ --color-success-text-strong: var(--raw-green-700);
325
+ --color-success-text-strong-hovered: var(--raw-green-900);
326
+ --color-success-text-strong-focused: var(--raw-green-900);
327
+ --color-success-text-strong-disabled: var(--raw-green-200);
328
+ --color-success-text: var(--raw-green-600);
329
+ --color-success-text-hovered: var(--raw-green-800);
330
+ --color-success-text-focused: var(--raw-green-800);
310
331
  --color-success-text-disabled: var(--raw-green-200);
311
332
  --color-success-text-weak: var(--raw-green-400);
312
333
  --color-success-text-weak-hovered: var(--raw-green-600);
@@ -354,9 +375,13 @@
354
375
  --color-success-border-weak-focused: var(--raw-green-300);
355
376
  --color-success-border-weak-disabled: var(--raw-green-100);
356
377
  --color-success-ripple: rgba(var(--raw-green-500-rgb), 0.12);
357
- --color-info-text: var(--raw-blue-500);
358
- --color-info-text-hovered: var(--raw-blue-700);
359
- --color-info-text-focused: var(--raw-blue-700);
378
+ --color-info-text-strong: var(--raw-blue-700);
379
+ --color-info-text-strong-hovered: var(--raw-blue-900);
380
+ --color-info-text-strong-focused: var(--raw-blue-900);
381
+ --color-info-text-strong-disabled: var(--raw-blue-200);
382
+ --color-info-text: var(--raw-blue-600);
383
+ --color-info-text-hovered: var(--raw-blue-800);
384
+ --color-info-text-focused: var(--raw-blue-800);
360
385
  --color-info-text-disabled: var(--raw-blue-200);
361
386
  --color-info-icon: var(--raw-blue-500);
362
387
  --color-info-icon-hovered: var(--raw-blue-700);
@@ -400,48 +425,52 @@
400
425
  --color-info-border-weak-focused: var(--raw-blue-300);
401
426
  --color-info-border-weak-disabled: var(--raw-blue-100);
402
427
  --color-info-ripple: rgba(var(--raw-blue-500-rgb), 0.12);
403
- --color-accent-text: var(--raw-violet-500);
404
- --color-accent-text-hovered: var(--raw-violet-700);
405
- --color-accent-text-focused: var(--raw-violet-700);
406
- --color-accent-text-disabled: var(--raw-violet-200);
407
- --color-accent-icon: var(--raw-violet-500);
408
- --color-accent-icon-hovered: var(--raw-violet-700);
409
- --color-accent-icon-focused: var(--raw-violet-700);
410
- --color-accent-icon-disabled: var(--raw-violet-200);
411
- --color-accent-background-strong: var(--raw-violet-500);
412
- --color-accent-background-strong-hovered: var(--raw-violet-600);
413
- --color-accent-background-strong-focused: var(--raw-violet-600);
414
- --color-accent-background-strong-pressed: var(--raw-violet-700);
415
- --color-accent-background-strong-disabled: var(--raw-violet-200);
416
- --color-accent-background-medium: var(--raw-violet-100);
417
- --color-accent-background-medium-hovered: var(--raw-violet-200);
418
- --color-accent-background-medium-focused: var(--raw-violet-200);
419
- --color-accent-background-medium-pressed: var(--raw-violet-300);
420
- --color-accent-background-medium-disabled: var(--raw-violet-50);
421
- --color-accent-background: var(--raw-violet-50);
422
- --color-accent-background-hovered: var(--raw-violet-100);
423
- --color-accent-background-focused: var(--raw-violet-100);
424
- --color-accent-background-pressed: var(--raw-violet-200);
425
- --color-accent-background-disabled: var(--raw-violet-50);
428
+ --color-accent-text-strong: var(--raw-indigo-700);
429
+ --color-accent-text-strong-hovered: var(--raw-indigo-900);
430
+ --color-accent-text-strong-focused: var(--raw-indigo-900);
431
+ --color-accent-text-strong-disabled: var(--raw-indigo-200);
432
+ --color-accent-text: var(--raw-indigo-600);
433
+ --color-accent-text-hovered: var(--raw-indigo-800);
434
+ --color-accent-text-focused: var(--raw-indigo-800);
435
+ --color-accent-text-disabled: var(--raw-indigo-200);
436
+ --color-accent-icon: var(--raw-indigo-500);
437
+ --color-accent-icon-hovered: var(--raw-indigo-700);
438
+ --color-accent-icon-focused: var(--raw-indigo-700);
439
+ --color-accent-icon-disabled: var(--raw-indigo-200);
440
+ --color-accent-background-strong: var(--raw-indigo-500);
441
+ --color-accent-background-strong-hovered: var(--raw-indigo-600);
442
+ --color-accent-background-strong-focused: var(--raw-indigo-600);
443
+ --color-accent-background-strong-pressed: var(--raw-indigo-700);
444
+ --color-accent-background-strong-disabled: var(--raw-indigo-200);
445
+ --color-accent-background-medium: var(--raw-indigo-100);
446
+ --color-accent-background-medium-hovered: var(--raw-indigo-200);
447
+ --color-accent-background-medium-focused: var(--raw-indigo-200);
448
+ --color-accent-background-medium-pressed: var(--raw-indigo-300);
449
+ --color-accent-background-medium-disabled: var(--raw-indigo-50);
450
+ --color-accent-background: var(--raw-indigo-50);
451
+ --color-accent-background-hovered: var(--raw-indigo-100);
452
+ --color-accent-background-focused: var(--raw-indigo-100);
453
+ --color-accent-background-pressed: var(--raw-indigo-200);
454
+ --color-accent-background-disabled: var(--raw-indigo-50);
426
455
  --color-accent-background-weak: var(--raw-white);
427
- --color-accent-background-weak-hovered: var(--raw-violet-100);
428
- --color-accent-background-weak-focused: var(--raw-violet-100);
429
- --color-accent-background-weak-pressed: var(--raw-violet-200);
456
+ --color-accent-background-weak-hovered: var(--raw-indigo-100);
457
+ --color-accent-background-weak-focused: var(--raw-indigo-100);
458
+ --color-accent-background-weak-pressed: var(--raw-indigo-200);
430
459
  --color-accent-background-weak-disabled: var(--raw-white);
431
- --color-accent-background-ghost: rgba(var(--raw-violet-500-rgb), 0);
432
- --color-accent-background-ghost-hovered: rgba(var(--raw-violet-500-rgb), 0.12);
433
- --color-accent-background-ghost-focused: rgba(var(--raw-violet-500-rgb), 0.12);
434
- --color-accent-background-ghost-pressed: rgba(var(--raw-violet-500-rgb), 0.18);
435
- --color-accent-background-ghost-disabled: rgba(var(--raw-violet-500-rgb), 0);
436
- --color-accent-border: var(--raw-violet-500);
437
- --color-accent-border-hovered: var(--raw-violet-700);
438
- --color-accent-border-focused: var(--raw-violet-700);
439
- --color-accent-border-disabled: var(--raw-violet-200);
440
- --color-accent-border-weak: var(--raw-violet-100);
441
- --color-accent-border-weak-hovered: var(--raw-violet-300);
442
- --color-accent-border-weak-focused: var(--raw-violet-300);
443
- --color-accent-border-weak-disabled: var(--raw-violet-100);
444
- --color-accent-ripple: rgba(var(--raw-violet-500-rgb), 0.12);
460
+ --color-accent-background-ghost: rgba(var(--raw-indigo-500-rgb), 0);
461
+ --color-accent-background-ghost-hovered: rgba(var(--raw-indigo-500-rgb), 0.12);
462
+ --color-accent-background-ghost-focused: rgba(var(--raw-indigo-500-rgb), 0.12);
463
+ --color-accent-background-ghost-pressed: rgba(var(--raw-indigo-500-rgb), 0.18);
464
+ --color-accent-background-ghost-disabled: rgba(var(--raw-indigo-500-rgb), 0);
465
+ --color-accent-border: var(--raw-indigo-500);
466
+ --color-accent-border-hovered: var(--raw-indigo-700);
467
+ --color-accent-border-focused: var(--raw-indigo-700);
468
+ --color-accent-border-disabled: var(--raw-indigo-200);
469
+ --color-accent-border-weak: var(--raw-indigo-100);
470
+ --color-accent-border-weak-hovered: var(--raw-indigo-300);
471
+ --color-accent-border-weak-focused: var(--raw-indigo-300);
472
+ --color-accent-border-weak-disabled: var(--raw-indigo-100);
473
+ --color-accent-ripple: rgba(var(--raw-indigo-500-rgb), 0.12);
445
474
  --color-highlight-icon: var(--raw-yellow-500);
446
475
  --color-highlight-icon-hovered: var(--raw-yellow-700);
447
476
  --color-highlight-icon-focused: var(--raw-yellow-700);
package/lib/styles/settings/colors/_tokens-wnl-variables.scss CHANGED
@@ -1,4 +1,8 @@
1
1
  .-ds-theme-wnl {
2
+ --color-primary-text-strong: var(--theme-700);
3
+ --color-primary-text-strong-hovered: var(--theme-900);
4
+ --color-primary-text-strong-focused: var(--theme-900);
5
+ --color-primary-text-strong-disabled: var(--theme-200);
2
6
  --color-primary-text: var(--theme-600);
3
7
  --color-primary-text-hovered: var(--theme-800);
4
8
  --color-primary-text-focused: var(--theme-800);
@@ -18,13 +22,18 @@
18
22
  --color-primary-background-strong: var(--theme-500);
19
23
  --color-primary-background-strong-hovered: var(--theme-600);
20
24
  --color-primary-background-strong-focused: var(--theme-600);
25
+ --color-primary-background-strong-pressed: var(--theme-700);
21
26
  --color-primary-background-strong-disabled: var(--theme-200);
22
27
  --color-primary-background-medium: var(--theme-100);
28
+ --color-primary-background-medium-hovered: var(--theme-200);
29
+ --color-primary-background-medium-focused: var(--theme-200);
30
+ --color-primary-background-medium-pressed: var(--theme-300);
31
+ --color-primary-background-medium-disabled: var(--theme-50);
23
32
  --color-primary-background: var(--theme-50);
24
33
  --color-primary-background-hovered: var(--theme-100);
25
34
  --color-primary-background-focused: var(--theme-100);
35
+ --color-primary-background-pressed: var(--theme-200);
26
36
  --color-primary-background-disabled: var(--theme-50);
27
- --color-primary-background-weak: var(--raw-white);
28
37
  --color-primary-background-weak-hovered: var(--theme-100);
29
38
  --color-primary-background-weak-focused: var(--theme-100);
30
39
  --color-primary-background-weak-pressed: var(--theme-200);
@@ -33,9 +42,14 @@
33
42
  --color-primary-background-ghost-focused: rgba(var(--theme-500-rgb), 0.12);
34
43
  --color-primary-background-ghost-pressed: rgba(var(--theme-500-rgb), 0.18);
35
44
  --color-primary-background-ghost-disabled: rgba(var(--theme-500-rgb), 0);
45
+ --color-primary-overlay: rgba(var(--theme-100-rgb), 0.8);
36
46
  --color-primary-border: var(--theme-500);
37
47
  --color-primary-border-hovered: var(--theme-700);
38
48
  --color-primary-border-focused: var(--theme-700);
39
49
  --color-primary-border-disabled: var(--theme-200);
50
+ --color-primary-border-weak: var(--theme-100);
51
+ --color-primary-border-weak-hovered: var(--theme-300);
52
+ --color-primary-border-weak-focused: var(--theme-300);
53
+ --color-primary-border-weak-disabled: var(--theme-100);
40
54
  --color-primary-ripple: rgba(var(--theme-500-rgb), 0.12);
41
55
  }
package/lib/styles/settings/colors/_tokens-wnl.json CHANGED
@@ -1 +1 @@
1
- {"text":[{"id":"_tokens-wnl.scss_color-primary-text","label":"color-primary-text","value":"var(--theme-600)"},{"id":"_tokens-wnl.scss_color-primary-text-hovered","label":"color-primary-text-hovered","value":"var(--theme-800)"},{"id":"_tokens-wnl.scss_color-primary-text-focused","label":"color-primary-text-focused","value":"var(--theme-800)"},{"id":"_tokens-wnl.scss_color-primary-text-disabled","label":"color-primary-text-disabled","value":"var(--theme-200)"}],"icon":[{"id":"_tokens-wnl.scss_color-primary-icon","label":"color-primary-icon","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-icon-hovered","label":"color-primary-icon-hovered","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-icon-focused","label":"color-primary-icon-focused","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-icon-disabled","label":"color-primary-icon-disabled","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-icon-weak","label":"color-primary-icon-weak","value":"var(--theme-300)"},{"id":"_tokens-wnl.scss_color-primary-icon-weak-hovered","label":"color-primary-icon-weak-hovered","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-icon-weak-focused","label":"color-primary-icon-weak-focused","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-icon-weak-disabled","label":"color-primary-icon-weak-disabled","value":"var(--theme-100)"}],"data":[{"id":"_tokens-wnl.scss_color-primary-data-medium","label":"color-primary-data-medium","value":"var(--theme-600)"},{"id":"_tokens-wnl.scss_color-primary-data","label":"color-primary-data","value":"var(--theme-400)"},{"id":"_tokens-wnl.scss_color-primary-data-weak","label":"color-primary-data-weak","value":"var(--theme-300)"},{"id":"_tokens-wnl.scss_color-primary-data-ghost","label":"color-primary-data-ghost","value":"var(--theme-200)"}],"background":[{"id":"_tokens-wnl.scss_color-primary-background-strong","label":"color-primary-background-strong","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-background-strong-hovered","label":"color-primary-background-strong-hovered","value":"var(--theme-600)"},{"id":"_tokens-wnl.scss_color-primary-background-strong-focused","label":"color-primary-background-strong-focused","value":"var(--theme-600)"},{"id":"_tokens-wnl.scss_color-primary-background-strong-disabled","label":"color-primary-background-strong-disabled","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-background-medium","label":"color-primary-background-medium","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background","label":"color-primary-background","value":"var(--theme-50)"},{"id":"_tokens-wnl.scss_color-primary-background-hovered","label":"color-primary-background-hovered","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-focused","label":"color-primary-background-focused","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-disabled","label":"color-primary-background-disabled","value":"var(--theme-50)"},{"id":"_tokens-wnl.scss_color-primary-background-weak","label":"color-primary-background-weak","value":"var(--raw-white)"},{"id":"_tokens-wnl.scss_color-primary-background-weak-hovered","label":"color-primary-background-weak-hovered","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-weak-focused","label":"color-primary-background-weak-focused","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-weak-pressed","label":"color-primary-background-weak-pressed","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost","label":"color-primary-background-ghost","value":"rgba(var(--theme-500-rgb), 0)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost-hovered","label":"color-primary-background-ghost-hovered","value":"rgba(var(--theme-500-rgb), 0.12)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost-focused","label":"color-primary-background-ghost-focused","value":"rgba(var(--theme-500-rgb), 0.12)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost-pressed","label":"color-primary-background-ghost-pressed","value":"rgba(var(--theme-500-rgb), 0.18)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost-disabled","label":"color-primary-background-ghost-disabled","value":"rgba(var(--theme-500-rgb), 0)"}],"border":[{"id":"_tokens-wnl.scss_color-primary-border","label":"color-primary-border","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-border-hovered","label":"color-primary-border-hovered","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-border-focused","label":"color-primary-border-focused","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-border-disabled","label":"color-primary-border-disabled","value":"var(--theme-200)"}],"ripple":[{"id":"_tokens-wnl.scss_color-primary-ripple","label":"color-primary-ripple","value":"rgba(var(--theme-500-rgb), 0.12)"}]}
1
+ {"text":[{"id":"_tokens-wnl.scss_color-primary-text-strong","label":"color-primary-text-strong","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-text-strong-hovered","label":"color-primary-text-strong-hovered","value":"var(--theme-900)"},{"id":"_tokens-wnl.scss_color-primary-text-strong-focused","label":"color-primary-text-strong-focused","value":"var(--theme-900)"},{"id":"_tokens-wnl.scss_color-primary-text-strong-disabled","label":"color-primary-text-strong-disabled","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-text","label":"color-primary-text","value":"var(--theme-600)"},{"id":"_tokens-wnl.scss_color-primary-text-hovered","label":"color-primary-text-hovered","value":"var(--theme-800)"},{"id":"_tokens-wnl.scss_color-primary-text-focused","label":"color-primary-text-focused","value":"var(--theme-800)"},{"id":"_tokens-wnl.scss_color-primary-text-disabled","label":"color-primary-text-disabled","value":"var(--theme-200)"}],"icon":[{"id":"_tokens-wnl.scss_color-primary-icon","label":"color-primary-icon","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-icon-hovered","label":"color-primary-icon-hovered","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-icon-focused","label":"color-primary-icon-focused","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-icon-disabled","label":"color-primary-icon-disabled","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-icon-weak","label":"color-primary-icon-weak","value":"var(--theme-300)"},{"id":"_tokens-wnl.scss_color-primary-icon-weak-hovered","label":"color-primary-icon-weak-hovered","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-icon-weak-focused","label":"color-primary-icon-weak-focused","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-icon-weak-disabled","label":"color-primary-icon-weak-disabled","value":"var(--theme-100)"}],"data":[{"id":"_tokens-wnl.scss_color-primary-data-medium","label":"color-primary-data-medium","value":"var(--theme-600)"},{"id":"_tokens-wnl.scss_color-primary-data","label":"color-primary-data","value":"var(--theme-400)"},{"id":"_tokens-wnl.scss_color-primary-data-weak","label":"color-primary-data-weak","value":"var(--theme-300)"},{"id":"_tokens-wnl.scss_color-primary-data-ghost","label":"color-primary-data-ghost","value":"var(--theme-200)"}],"background":[{"id":"_tokens-wnl.scss_color-primary-background-strong","label":"color-primary-background-strong","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-background-strong-hovered","label":"color-primary-background-strong-hovered","value":"var(--theme-600)"},{"id":"_tokens-wnl.scss_color-primary-background-strong-focused","label":"color-primary-background-strong-focused","value":"var(--theme-600)"},{"id":"_tokens-wnl.scss_color-primary-background-strong-pressed","label":"color-primary-background-strong-pressed","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-background-strong-disabled","label":"color-primary-background-strong-disabled","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-background-medium","label":"color-primary-background-medium","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-medium-hovered","label":"color-primary-background-medium-hovered","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-background-medium-focused","label":"color-primary-background-medium-focused","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-background-medium-pressed","label":"color-primary-background-medium-pressed","value":"var(--theme-300)"},{"id":"_tokens-wnl.scss_color-primary-background-medium-disabled","label":"color-primary-background-medium-disabled","value":"var(--theme-50)"},{"id":"_tokens-wnl.scss_color-primary-background","label":"color-primary-background","value":"var(--theme-50)"},{"id":"_tokens-wnl.scss_color-primary-background-hovered","label":"color-primary-background-hovered","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-focused","label":"color-primary-background-focused","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-pressed","label":"color-primary-background-pressed","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-background-disabled","label":"color-primary-background-disabled","value":"var(--theme-50)"},{"id":"_tokens-wnl.scss_color-primary-background-weak-hovered","label":"color-primary-background-weak-hovered","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-weak-focused","label":"color-primary-background-weak-focused","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-background-weak-pressed","label":"color-primary-background-weak-pressed","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost","label":"color-primary-background-ghost","value":"rgba(var(--theme-500-rgb), 0)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost-hovered","label":"color-primary-background-ghost-hovered","value":"rgba(var(--theme-500-rgb), 0.12)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost-focused","label":"color-primary-background-ghost-focused","value":"rgba(var(--theme-500-rgb), 0.12)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost-pressed","label":"color-primary-background-ghost-pressed","value":"rgba(var(--theme-500-rgb), 0.18)"},{"id":"_tokens-wnl.scss_color-primary-background-ghost-disabled","label":"color-primary-background-ghost-disabled","value":"rgba(var(--theme-500-rgb), 0)"}],"overlay":[{"id":"_tokens-wnl.scss_color-primary-overlay","label":"color-primary-overlay","value":"rgba(var(--theme-100-rgb), 0.8)"}],"border":[{"id":"_tokens-wnl.scss_color-primary-border","label":"color-primary-border","value":"var(--theme-500)"},{"id":"_tokens-wnl.scss_color-primary-border-hovered","label":"color-primary-border-hovered","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-border-focused","label":"color-primary-border-focused","value":"var(--theme-700)"},{"id":"_tokens-wnl.scss_color-primary-border-disabled","label":"color-primary-border-disabled","value":"var(--theme-200)"},{"id":"_tokens-wnl.scss_color-primary-border-weak","label":"color-primary-border-weak","value":"var(--theme-100)"},{"id":"_tokens-wnl.scss_color-primary-border-weak-hovered","label":"color-primary-border-weak-hovered","value":"var(--theme-300)"},{"id":"_tokens-wnl.scss_color-primary-border-weak-focused","label":"color-primary-border-weak-focused","value":"var(--theme-300)"},{"id":"_tokens-wnl.scss_color-primary-border-weak-disabled","label":"color-primary-border-weak-disabled","value":"var(--theme-100)"}],"ripple":[{"id":"_tokens-wnl.scss_color-primary-ripple","label":"color-primary-ripple","value":"rgba(var(--theme-500-rgb), 0.12)"}]}
package/lib/styles/settings/colors/_tokens-wnl.scss CHANGED
@@ -1,3 +1,7 @@
1
+ $color-primary-text-strong: var(--color-primary-text-strong);
2
+ $color-primary-text-strong-hovered: var(--color-primary-text-strong-hovered);
3
+ $color-primary-text-strong-focused: var(--color-primary-text-strong-focused);
4
+ $color-primary-text-strong-disabled: var(--color-primary-text-strong-disabled);
1
5
  $color-primary-text: var(--color-primary-text);
2
6
  $color-primary-text-hovered: var(--color-primary-text-hovered);
3
7
  $color-primary-text-focused: var(--color-primary-text-focused);
@@ -17,13 +21,18 @@ $color-primary-data-ghost: var(--color-primary-data-ghost);
17
21
  $color-primary-background-strong: var(--color-primary-background-strong);
18
22
  $color-primary-background-strong-hovered: var(--color-primary-background-strong-hovered);
19
23
  $color-primary-background-strong-focused: var(--color-primary-background-strong-focused);
24
+ $color-primary-background-strong-pressed: var(--color-primary-background-strong-pressed);
20
25
  $color-primary-background-strong-disabled: var(--color-primary-background-strong-disabled);
21
26
  $color-primary-background-medium: var(--color-primary-background-medium);
27
+ $color-primary-background-medium-hovered: var(--color-primary-background-medium-hovered);
28
+ $color-primary-background-medium-focused: var(--color-primary-background-medium-focused);
29
+ $color-primary-background-medium-pressed: var(--color-primary-background-medium-pressed);
30
+ $color-primary-background-medium-disabled: var(--color-primary-background-medium-disabled);
22
31
  $color-primary-background: var(--color-primary-background);
23
32
  $color-primary-background-hovered: var(--color-primary-background-hovered);
24
33
  $color-primary-background-focused: var(--color-primary-background-focused);
34
+ $color-primary-background-pressed: var(--color-primary-background-pressed);
25
35
  $color-primary-background-disabled: var(--color-primary-background-disabled);
26
- $color-primary-background-weak: var(--color-primary-background-weak);
27
36
  $color-primary-background-weak-hovered: var(--color-primary-background-weak-hovered);
28
37
  $color-primary-background-weak-focused: var(--color-primary-background-weak-focused);
29
38
  $color-primary-background-weak-pressed: var(--color-primary-background-weak-pressed);
@@ -32,8 +41,13 @@ $color-primary-background-ghost-hovered: var(--color-primary-background-ghost-ho
32
41
  $color-primary-background-ghost-focused: var(--color-primary-background-ghost-focused);
33
42
  $color-primary-background-ghost-pressed: var(--color-primary-background-ghost-pressed);
34
43
  $color-primary-background-ghost-disabled: var(--color-primary-background-ghost-disabled);
44
+ $color-primary-overlay: var(--color-primary-overlay);
35
45
  $color-primary-border: var(--color-primary-border);
36
46
  $color-primary-border-hovered: var(--color-primary-border-hovered);
37
47
  $color-primary-border-focused: var(--color-primary-border-focused);
38
48
  $color-primary-border-disabled: var(--color-primary-border-disabled);
49
+ $color-primary-border-weak: var(--color-primary-border-weak);
50
+ $color-primary-border-weak-hovered: var(--color-primary-border-weak-hovered);
51
+ $color-primary-border-weak-focused: var(--color-primary-border-weak-focused);
52
+ $color-primary-border-weak-disabled: var(--color-primary-border-weak-disabled);
39
53
  $color-primary-ripple: var(--color-primary-ripple);