@lumx/core 2.1.9-alpha-thumbnail2 → 2.1.9-fix-design-tokens

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 (25) hide show
  1. package/css/design-tokens.css +82 -27
  2. package/js/constants/design-tokens.js +547 -21
  3. package/js/constants/design-tokens.min.js +1 -1
  4. package/js/constants/design-tokens.min.js.map +1 -1
  5. package/js/constants/design-tokens.ts +548 -21
  6. package/js/custom-colors.min.js.map +1 -1
  7. package/js/date-picker.min.js.map +1 -1
  8. package/js/utils.min.js.map +1 -1
  9. package/lumx.css +1 -1
  10. package/lumx.min.css +1 -1
  11. package/package.json +2 -2
  12. package/scss/_components.scss +0 -1
  13. package/scss/_design-tokens.scss +87 -27
  14. package/scss/components/chip/_index.scss +6 -0
  15. package/scss/components/flag/_index.scss +8 -3
  16. package/scss/components/icon/_mixins.scss +5 -1
  17. package/scss/components/list/_mixins.scss +2 -1
  18. package/scss/components/side-navigation/_mixins.scss +0 -1
  19. package/scss/components/skeleton/_index.scss +7 -4
  20. package/scss/components/thumbnail/_index.scss +48 -121
  21. package/scss/components/thumbnail/_variables.scss +1 -1
  22. package/scss/components/uploader/_index.scss +2 -2
  23. package/scss/components/user-block/_index.scss +1 -1
  24. package/scss/core/state/_mixins.scss +0 -4
  25. package/scss/components/skeleton/_mixins.scss +0 -10
package/css/design-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 19 Oct 2021 08:35:24 GMT
3
+ * Generated on Thu, 16 Dec 2021 09:34:25 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -48,7 +48,12 @@
48
48
  0,
49
49
  0.12
50
50
  ); /* Base dark color with 12% opacity */
51
- --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
51
+ --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
52
+ 0,
53
+ 0,
54
+ 0,
55
+ 0.7
56
+ ); /* Base dark color with 70% opacity */
52
57
  --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
53
58
  --lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
54
59
  255,
@@ -66,7 +71,12 @@
66
71
  0,
67
72
  0.2
68
73
  ); /* Base dark color with 20% opacity */
69
- --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
74
+ --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
75
+ 0,
76
+ 0,
77
+ 0,
78
+ 0.7
79
+ ); /* Base dark color with 70% opacity */
70
80
  --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
71
81
  --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
72
82
  255,
@@ -84,7 +94,12 @@
84
94
  0,
85
95
  0.38
86
96
  ); /* Base dark color with 38% opacity */
87
- --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
97
+ --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
98
+ 0,
99
+ 0,
100
+ 0,
101
+ 0.7
102
+ ); /* Base dark color with 70% opacity */
88
103
  --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
89
104
  --lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
90
105
  255,
@@ -97,7 +112,12 @@
97
112
  --lumx-button-emphasis-low-state-default-padding-horizontal: 8px;
98
113
  --lumx-button-emphasis-low-state-default-border-width: 0;
99
114
  --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
100
- --lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
115
+ --lumx-button-emphasis-low-state-default-theme-light-color: rgba(
116
+ 0,
117
+ 0,
118
+ 0,
119
+ 0.7
120
+ ); /* Base dark color with 70% opacity */
101
121
  --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
102
122
  --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
103
123
  --lumx-button-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -110,7 +130,7 @@
110
130
  0,
111
131
  0.12
112
132
  ); /* Base dark color with 12% opacity */
113
- --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
133
+ --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
114
134
  --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
115
135
  --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
116
136
  255,
@@ -128,7 +148,12 @@
128
148
  0,
129
149
  0.2
130
150
  ); /* Base dark color with 20% opacity */
131
- --lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
151
+ --lumx-button-emphasis-low-state-active-theme-light-color: rgba(
152
+ 0,
153
+ 0,
154
+ 0,
155
+ 0.7
156
+ ); /* Base dark color with 70% opacity */
132
157
  --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
133
158
  --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
134
159
  255,
@@ -230,8 +255,8 @@
230
255
  0,
231
256
  0,
232
257
  0,
233
- 0.87
234
- ); /* Neutral dark color */
258
+ 0.7
259
+ ); /* Base dark color with 70% opacity */
235
260
  --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
236
261
  0,
237
262
  0,
@@ -243,8 +268,8 @@
243
268
  0,
244
269
  0,
245
270
  0,
246
- 0.87
247
- ); /* Neutral dark color */
271
+ 0.7
272
+ ); /* Base dark color with 70% opacity */
248
273
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
249
274
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
250
275
  255,
@@ -276,8 +301,8 @@
276
301
  0,
277
302
  0,
278
303
  0,
279
- 0.87
280
- ); /* Neutral dark color */
304
+ 0.7
305
+ ); /* Base dark color with 70% opacity */
281
306
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
282
307
  0,
283
308
  0,
@@ -294,8 +319,8 @@
294
319
  0,
295
320
  0,
296
321
  0,
297
- 0.87
298
- ); /* Neutral dark color */
322
+ 0.7
323
+ ); /* Base dark color with 70% opacity */
299
324
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
300
325
  255,
301
326
  255,
@@ -337,8 +362,8 @@
337
362
  0,
338
363
  0,
339
364
  0,
340
- 0.87
341
- ); /* Neutral dark color */
365
+ 0.7
366
+ ); /* Base dark color with 70% opacity */
342
367
  --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
343
368
  0,
344
369
  0,
@@ -355,8 +380,8 @@
355
380
  0,
356
381
  0,
357
382
  0,
358
- 0.87
359
- ); /* Neutral dark color */
383
+ 0.7
384
+ ); /* Base dark color with 70% opacity */
360
385
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
361
386
  255,
362
387
  255,
@@ -477,7 +502,12 @@
477
502
  --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
478
503
  --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
479
504
  --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
480
- --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
505
+ --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
506
+ 0,
507
+ 0,
508
+ 0,
509
+ 0.7
510
+ ); /* Base dark color with 70% opacity */
481
511
  --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
482
512
  0,
483
513
  0,
@@ -502,7 +532,12 @@
502
532
  0,
503
533
  0.12
504
534
  ); /* Base dark color with 12% opacity */
505
- --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
535
+ --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
536
+ 0,
537
+ 0,
538
+ 0,
539
+ 0.7
540
+ ); /* Base dark color with 70% opacity */
506
541
  --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
507
542
  0,
508
543
  0,
@@ -532,7 +567,12 @@
532
567
  0,
533
568
  0.2
534
569
  ); /* Base dark color with 20% opacity */
535
- --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
570
+ --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
571
+ 0,
572
+ 0,
573
+ 0,
574
+ 0.7
575
+ ); /* Base dark color with 70% opacity */
536
576
  --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
537
577
  0,
538
578
  0,
@@ -557,7 +597,12 @@
557
597
  --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
558
598
  --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
559
599
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
560
- --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
600
+ --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
601
+ 0,
602
+ 0,
603
+ 0,
604
+ 0.7
605
+ ); /* Base dark color with 70% opacity */
561
606
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
562
607
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
563
608
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -572,7 +617,12 @@
572
617
  0,
573
618
  0.12
574
619
  ); /* Base dark color with 12% opacity */
575
- --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
620
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
621
+ 0,
622
+ 0,
623
+ 0,
624
+ 0.7
625
+ ); /* Base dark color with 70% opacity */
576
626
  --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
577
627
  --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
578
628
  255,
@@ -592,7 +642,12 @@
592
642
  0,
593
643
  0.2
594
644
  ); /* Base dark color with 20% opacity */
595
- --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
645
+ --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
646
+ 0,
647
+ 0,
648
+ 0,
649
+ 0.7
650
+ ); /* Base dark color with 70% opacity */
596
651
  --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
597
652
  --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
598
653
  255,
@@ -727,7 +782,7 @@
727
782
  ); /* Base light color with 80% opacity */
728
783
  --lumx-border-radius: 4px;
729
784
  --lumx-color-dark-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
730
- --lumx-color-dark-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
785
+ --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
731
786
  --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
732
787
  --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
733
788
  --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
@@ -811,7 +866,7 @@
811
866
  --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
812
867
  --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
813
868
  --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
814
- --lumx-color-black-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
869
+ --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
815
870
  --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
816
871
  --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
817
872
  --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */