@lumx/core 2.1.6 → 2.1.9-alpha-thumbnail

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 +27 -82
  2. package/js/constants/design-tokens.js +21 -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 +21 -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 +1 -0
  13. package/scss/_design-tokens.scss +27 -87
  14. package/scss/components/chip/_index.scss +0 -6
  15. package/scss/components/flag/_index.scss +3 -8
  16. package/scss/components/icon/_mixins.scss +1 -5
  17. package/scss/components/list/_mixins.scss +1 -2
  18. package/scss/components/side-navigation/_mixins.scss +1 -0
  19. package/scss/components/skeleton/_index.scss +4 -7
  20. package/scss/components/skeleton/_mixins.scss +10 -0
  21. package/scss/components/text-field/_index.scss +1 -1
  22. package/scss/components/thumbnail/_index.scss +112 -43
  23. package/scss/components/thumbnail/_variables.scss +1 -1
  24. package/scss/components/uploader/_index.scss +2 -2
  25. package/scss/core/state/_mixins.scss +4 -20
package/css/design-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 30 Nov 2021 09:20:09 GMT
3
+ * Generated on Tue, 19 Oct 2021 08:35:24 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -48,12 +48,7 @@
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(
52
- 0,
53
- 0,
54
- 0,
55
- 0.7
56
- ); /* Base dark color with 70% opacity */
51
+ --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
57
52
  --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
58
53
  --lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
59
54
  255,
@@ -71,12 +66,7 @@
71
66
  0,
72
67
  0.2
73
68
  ); /* Base dark color with 20% opacity */
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 */
69
+ --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
80
70
  --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
81
71
  --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
82
72
  255,
@@ -94,12 +84,7 @@
94
84
  0,
95
85
  0.38
96
86
  ); /* Base dark color with 38% opacity */
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 */
87
+ --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
103
88
  --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
104
89
  --lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
105
90
  255,
@@ -112,12 +97,7 @@
112
97
  --lumx-button-emphasis-low-state-default-padding-horizontal: 8px;
113
98
  --lumx-button-emphasis-low-state-default-border-width: 0;
114
99
  --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
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 */
100
+ --lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
121
101
  --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
122
102
  --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
123
103
  --lumx-button-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -130,7 +110,7 @@
130
110
  0,
131
111
  0.12
132
112
  ); /* Base dark color with 12% opacity */
133
- --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
113
+ --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
134
114
  --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
135
115
  --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
136
116
  255,
@@ -148,12 +128,7 @@
148
128
  0,
149
129
  0.2
150
130
  ); /* Base dark color with 20% opacity */
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 */
131
+ --lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
157
132
  --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
158
133
  --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
159
134
  255,
@@ -255,8 +230,8 @@
255
230
  0,
256
231
  0,
257
232
  0,
258
- 0.7
259
- ); /* Base dark color with 70% opacity */
233
+ 0.87
234
+ ); /* Neutral dark color */
260
235
  --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
261
236
  0,
262
237
  0,
@@ -268,8 +243,8 @@
268
243
  0,
269
244
  0,
270
245
  0,
271
- 0.7
272
- ); /* Base dark color with 70% opacity */
246
+ 0.87
247
+ ); /* Neutral dark color */
273
248
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
274
249
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
275
250
  255,
@@ -301,8 +276,8 @@
301
276
  0,
302
277
  0,
303
278
  0,
304
- 0.7
305
- ); /* Base dark color with 70% opacity */
279
+ 0.87
280
+ ); /* Neutral dark color */
306
281
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
307
282
  0,
308
283
  0,
@@ -319,8 +294,8 @@
319
294
  0,
320
295
  0,
321
296
  0,
322
- 0.7
323
- ); /* Base dark color with 70% opacity */
297
+ 0.87
298
+ ); /* Neutral dark color */
324
299
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
325
300
  255,
326
301
  255,
@@ -362,8 +337,8 @@
362
337
  0,
363
338
  0,
364
339
  0,
365
- 0.7
366
- ); /* Base dark color with 70% opacity */
340
+ 0.87
341
+ ); /* Neutral dark color */
367
342
  --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
368
343
  0,
369
344
  0,
@@ -380,8 +355,8 @@
380
355
  0,
381
356
  0,
382
357
  0,
383
- 0.7
384
- ); /* Base dark color with 70% opacity */
358
+ 0.87
359
+ ); /* Neutral dark color */
385
360
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
386
361
  255,
387
362
  255,
@@ -502,12 +477,7 @@
502
477
  --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
503
478
  --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
504
479
  --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
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 */
480
+ --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
511
481
  --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
512
482
  0,
513
483
  0,
@@ -532,12 +502,7 @@
532
502
  0,
533
503
  0.12
534
504
  ); /* Base dark color with 12% opacity */
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 */
505
+ --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
541
506
  --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
542
507
  0,
543
508
  0,
@@ -567,12 +532,7 @@
567
532
  0,
568
533
  0.2
569
534
  ); /* Base dark color with 20% opacity */
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 */
535
+ --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
576
536
  --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
577
537
  0,
578
538
  0,
@@ -597,12 +557,7 @@
597
557
  --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
598
558
  --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
599
559
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
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 */
560
+ --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
606
561
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
607
562
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
608
563
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -617,12 +572,7 @@
617
572
  0,
618
573
  0.12
619
574
  ); /* Base dark color with 12% opacity */
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 */
575
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
626
576
  --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
627
577
  --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
628
578
  255,
@@ -642,12 +592,7 @@
642
592
  0,
643
593
  0.2
644
594
  ); /* Base dark color with 20% opacity */
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 */
595
+ --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
651
596
  --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
652
597
  --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
653
598
  255,
@@ -782,7 +727,7 @@
782
727
  ); /* Base light color with 80% opacity */
783
728
  --lumx-border-radius: 4px;
784
729
  --lumx-color-dark-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
785
- --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
730
+ --lumx-color-dark-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
786
731
  --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
787
732
  --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
788
733
  --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
@@ -866,7 +811,7 @@
866
811
  --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
867
812
  --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
868
813
  --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
869
- --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
814
+ --lumx-color-black-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
870
815
  --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
871
816
  --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
872
817
  --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
package/js/constants/design-tokens.js CHANGED
@@ -94,7 +94,7 @@ __webpack_require__.r(__webpack_exports__);
94
94
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DESIGN_TOKENS", function() { return DESIGN_TOKENS; });
95
95
  /**
96
96
  * Do not edit directly
97
- * Generated on Tue, 30 Nov 2021 09:20:10 GMT
97
+ * Generated on Tue, 19 Oct 2021 08:35:25 GMT
98
98
  */
99
99
  var DESIGN_TOKENS = {
100
100
  button: {
@@ -346,7 +346,7 @@ var DESIGN_TOKENS = {
346
346
  },
347
347
  color: {
348
348
  version: '0.22',
349
- comment: 'Base dark color with 70% opacity',
349
+ comment: 'Neutral dark color',
350
350
  attributes: {
351
351
  category: 'button',
352
352
  type: 'emphasis-medium',
@@ -418,7 +418,7 @@ var DESIGN_TOKENS = {
418
418
  },
419
419
  color: {
420
420
  version: '0.22',
421
- comment: 'Base dark color with 70% opacity',
421
+ comment: 'Neutral dark color',
422
422
  attributes: {
423
423
  category: 'button',
424
424
  type: 'emphasis-medium',
@@ -490,7 +490,7 @@ var DESIGN_TOKENS = {
490
490
  },
491
491
  color: {
492
492
  version: '0.22',
493
- comment: 'Base dark color with 70% opacity',
493
+ comment: 'Neutral dark color',
494
494
  attributes: {
495
495
  category: 'button',
496
496
  type: 'emphasis-medium',
@@ -562,7 +562,7 @@ var DESIGN_TOKENS = {
562
562
  },
563
563
  color: {
564
564
  version: '0.22',
565
- comment: 'Base dark color with 70% opacity',
565
+ comment: 'Neutral dark color',
566
566
  attributes: {
567
567
  category: 'button',
568
568
  type: 'emphasis-low',
@@ -632,7 +632,7 @@ var DESIGN_TOKENS = {
632
632
  },
633
633
  color: {
634
634
  version: '0.22',
635
- comment: 'Base dark color with 70% opacity',
635
+ comment: 'Neutral dark color',
636
636
  attributes: {
637
637
  category: 'button',
638
638
  type: 'emphasis-low',
@@ -704,7 +704,7 @@ var DESIGN_TOKENS = {
704
704
  },
705
705
  color: {
706
706
  version: '0.22',
707
- comment: 'Base dark color with 70% opacity',
707
+ comment: 'Neutral dark color',
708
708
  attributes: {
709
709
  category: 'button',
710
710
  type: 'emphasis-low',
@@ -1326,7 +1326,7 @@ var DESIGN_TOKENS = {
1326
1326
  },
1327
1327
  'icon-color': {
1328
1328
  version: '0.22',
1329
- comment: 'Base dark color with 70% opacity',
1329
+ comment: 'Neutral dark color',
1330
1330
  attributes: {
1331
1331
  category: 'navigation',
1332
1332
  type: 'item',
@@ -1351,7 +1351,7 @@ var DESIGN_TOKENS = {
1351
1351
  },
1352
1352
  'chevron-color': {
1353
1353
  version: '0.22',
1354
- comment: 'Base dark color with 70% opacity',
1354
+ comment: 'Neutral dark color',
1355
1355
  attributes: {
1356
1356
  category: 'navigation',
1357
1357
  type: 'item',
@@ -1472,7 +1472,7 @@ var DESIGN_TOKENS = {
1472
1472
  },
1473
1473
  'icon-color': {
1474
1474
  version: '0.22',
1475
- comment: 'Base dark color with 70% opacity',
1475
+ comment: 'Neutral dark color',
1476
1476
  attributes: {
1477
1477
  category: 'navigation',
1478
1478
  type: 'item',
@@ -1499,7 +1499,7 @@ var DESIGN_TOKENS = {
1499
1499
  },
1500
1500
  'chevron-color': {
1501
1501
  version: '0.22',
1502
- comment: 'Base dark color with 70% opacity',
1502
+ comment: 'Neutral dark color',
1503
1503
  attributes: {
1504
1504
  category: 'navigation',
1505
1505
  type: 'item',
@@ -1624,7 +1624,7 @@ var DESIGN_TOKENS = {
1624
1624
  },
1625
1625
  'icon-color': {
1626
1626
  version: '0.22',
1627
- comment: 'Base dark color with 70% opacity',
1627
+ comment: 'Neutral dark color',
1628
1628
  attributes: {
1629
1629
  category: 'navigation',
1630
1630
  type: 'item',
@@ -1651,7 +1651,7 @@ var DESIGN_TOKENS = {
1651
1651
  },
1652
1652
  'chevron-color': {
1653
1653
  version: '0.22',
1654
- comment: 'Base dark color with 70% opacity',
1654
+ comment: 'Neutral dark color',
1655
1655
  attributes: {
1656
1656
  category: 'navigation',
1657
1657
  type: 'item',
@@ -2205,7 +2205,7 @@ var DESIGN_TOKENS = {
2205
2205
  },
2206
2206
  color: {
2207
2207
  version: '0.22',
2208
- comment: 'Base dark color with 70% opacity',
2208
+ comment: 'Neutral dark color',
2209
2209
  attributes: {
2210
2210
  category: 'tabs',
2211
2211
  type: 'link',
@@ -2301,7 +2301,7 @@ var DESIGN_TOKENS = {
2301
2301
  },
2302
2302
  color: {
2303
2303
  version: '0.22',
2304
- comment: 'Base dark color with 70% opacity',
2304
+ comment: 'Neutral dark color',
2305
2305
  attributes: {
2306
2306
  category: 'tabs',
2307
2307
  type: 'link',
@@ -2399,7 +2399,7 @@ var DESIGN_TOKENS = {
2399
2399
  },
2400
2400
  color: {
2401
2401
  version: '0.22',
2402
- comment: 'Base dark color with 70% opacity',
2402
+ comment: 'Neutral dark color',
2403
2403
  attributes: {
2404
2404
  category: 'tabs',
2405
2405
  type: 'link',
@@ -2497,7 +2497,7 @@ var DESIGN_TOKENS = {
2497
2497
  },
2498
2498
  color: {
2499
2499
  version: '0.22',
2500
- comment: 'Base dark color with 70% opacity',
2500
+ comment: 'Neutral dark color',
2501
2501
  attributes: {
2502
2502
  category: 'tabs',
2503
2503
  type: 'link',
@@ -2591,7 +2591,7 @@ var DESIGN_TOKENS = {
2591
2591
  },
2592
2592
  color: {
2593
2593
  version: '0.22',
2594
- comment: 'Base dark color with 70% opacity',
2594
+ comment: 'Neutral dark color',
2595
2595
  attributes: {
2596
2596
  category: 'tabs',
2597
2597
  type: 'link',
@@ -2687,7 +2687,7 @@ var DESIGN_TOKENS = {
2687
2687
  },
2688
2688
  color: {
2689
2689
  version: '0.22',
2690
- comment: 'Base dark color with 70% opacity',
2690
+ comment: 'Neutral dark color',
2691
2691
  attributes: {
2692
2692
  category: 'tabs',
2693
2693
  type: 'link',
@@ -3227,7 +3227,7 @@ var DESIGN_TOKENS = {
3227
3227
  },
3228
3228
  L1: {
3229
3229
  version: '0.22',
3230
- comment: 'Base dark color with 70% opacity',
3230
+ comment: 'Base dark color with 80% opacity',
3231
3231
  attributes: {
3232
3232
  category: 'color',
3233
3233
  type: 'dark',
@@ -4591,7 +4591,7 @@ var DESIGN_TOKENS = {
4591
4591
  },
4592
4592
  L1: {
4593
4593
  version: '0.22',
4594
- comment: 'Base dark color with 70% opacity',
4594
+ comment: 'Base dark color with 80% opacity',
4595
4595
  attributes: {
4596
4596
  category: 'color',
4597
4597
  type: 'black',