@lumx/core 2.1.4 → 2.1.5

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 (17) hide show
  1. package/css/design-tokens.css +27 -27
  2. package/js/constants/design-tokens.js +24 -24
  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 +24 -24
  6. package/lumx.css +1 -1
  7. package/lumx.js +96 -0
  8. package/lumx.min.css +1 -1
  9. package/lumx.min.js +2 -0
  10. package/lumx.min.js.map +1 -0
  11. package/package.json +2 -3
  12. package/scss/_design-tokens.scss +27 -27
  13. package/scss/components/chip/_index.scss +6 -0
  14. package/scss/components/icon/_mixins.scss +5 -1
  15. package/scss/components/thumbnail/_index.scss +7 -5
  16. package/scss/components/user-block/_index.scss +1 -1
  17. package/scss/core/state/_mixins.scss +16 -10
package/css/design-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Nov 2021 15:14:46 GMT
3
+ * Generated on Tue, 30 Nov 2021 09:20:09 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -53,7 +53,7 @@
53
53
  0,
54
54
  0,
55
55
  0.7
56
- ); /* Base dark color with 80% opacity */
56
+ ); /* Base dark color with 70% opacity */
57
57
  --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
58
58
  --lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
59
59
  255,
@@ -76,7 +76,7 @@
76
76
  0,
77
77
  0,
78
78
  0.7
79
- ); /* Base dark color with 80% opacity */
79
+ ); /* Base dark color with 70% opacity */
80
80
  --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
81
81
  --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
82
82
  255,
@@ -99,7 +99,7 @@
99
99
  0,
100
100
  0,
101
101
  0.7
102
- ); /* Base dark color with 80% opacity */
102
+ ); /* Base dark color with 70% opacity */
103
103
  --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
104
104
  --lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
105
105
  255,
@@ -117,7 +117,7 @@
117
117
  0,
118
118
  0,
119
119
  0.7
120
- ); /* Base dark color with 80% opacity */
120
+ ); /* Base dark color with 70% opacity */
121
121
  --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
122
122
  --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
123
123
  --lumx-button-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -130,7 +130,7 @@
130
130
  0,
131
131
  0.12
132
132
  ); /* 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 80% opacity */
133
+ --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
134
134
  --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
135
135
  --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
136
136
  255,
@@ -153,7 +153,7 @@
153
153
  0,
154
154
  0,
155
155
  0.7
156
- ); /* Base dark color with 80% opacity */
156
+ ); /* Base dark color with 70% opacity */
157
157
  --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
158
158
  --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
159
159
  255,
@@ -256,20 +256,20 @@
256
256
  0,
257
257
  0,
258
258
  0.7
259
- ); /* Base dark color with 80% opacity */
259
+ ); /* Base dark color with 70% opacity */
260
260
  --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
261
261
  0,
262
262
  0,
263
263
  0,
264
- 0.7
265
- ); /* Base dark color with 80% opacity */
264
+ 0.87
265
+ ); /* Neutral dark color */
266
266
  --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent;
267
267
  --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba(
268
268
  0,
269
269
  0,
270
270
  0,
271
271
  0.7
272
- ); /* Base dark color with 80% opacity */
272
+ ); /* Base dark color with 70% opacity */
273
273
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
274
274
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
275
275
  255,
@@ -302,13 +302,13 @@
302
302
  0,
303
303
  0,
304
304
  0.7
305
- ); /* Base dark color with 80% opacity */
305
+ ); /* Base dark color with 70% opacity */
306
306
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
307
307
  0,
308
308
  0,
309
309
  0,
310
- 0.7
311
- ); /* Base dark color with 80% opacity */
310
+ 0.87
311
+ ); /* Neutral dark color */
312
312
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
313
313
  0,
314
314
  0,
@@ -320,7 +320,7 @@
320
320
  0,
321
321
  0,
322
322
  0.7
323
- ); /* Base dark color with 80% opacity */
323
+ ); /* Base dark color with 70% opacity */
324
324
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
325
325
  255,
326
326
  255,
@@ -363,13 +363,13 @@
363
363
  0,
364
364
  0,
365
365
  0.7
366
- ); /* Base dark color with 80% opacity */
366
+ ); /* Base dark color with 70% opacity */
367
367
  --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
368
368
  0,
369
369
  0,
370
370
  0,
371
- 0.7
372
- ); /* Base dark color with 80% opacity */
371
+ 0.87
372
+ ); /* Neutral dark color */
373
373
  --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
374
374
  0,
375
375
  0,
@@ -381,7 +381,7 @@
381
381
  0,
382
382
  0,
383
383
  0.7
384
- ); /* Base dark color with 80% opacity */
384
+ ); /* Base dark color with 70% opacity */
385
385
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
386
386
  255,
387
387
  255,
@@ -507,7 +507,7 @@
507
507
  0,
508
508
  0,
509
509
  0.7
510
- ); /* Base dark color with 80% opacity */
510
+ ); /* Base dark color with 70% opacity */
511
511
  --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
512
512
  0,
513
513
  0,
@@ -537,7 +537,7 @@
537
537
  0,
538
538
  0,
539
539
  0.7
540
- ); /* Base dark color with 80% opacity */
540
+ ); /* Base dark color with 70% opacity */
541
541
  --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
542
542
  0,
543
543
  0,
@@ -572,7 +572,7 @@
572
572
  0,
573
573
  0,
574
574
  0.7
575
- ); /* Base dark color with 80% opacity */
575
+ ); /* Base dark color with 70% opacity */
576
576
  --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
577
577
  0,
578
578
  0,
@@ -602,7 +602,7 @@
602
602
  0,
603
603
  0,
604
604
  0.7
605
- ); /* Base dark color with 80% opacity */
605
+ ); /* Base dark color with 70% opacity */
606
606
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
607
607
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
608
608
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -622,7 +622,7 @@
622
622
  0,
623
623
  0,
624
624
  0.7
625
- ); /* Base dark color with 80% opacity */
625
+ ); /* Base dark color with 70% opacity */
626
626
  --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
627
627
  --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
628
628
  255,
@@ -647,7 +647,7 @@
647
647
  0,
648
648
  0,
649
649
  0.7
650
- ); /* Base dark color with 80% opacity */
650
+ ); /* Base dark color with 70% opacity */
651
651
  --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
652
652
  --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
653
653
  255,
@@ -782,7 +782,7 @@
782
782
  ); /* Base light color with 80% opacity */
783
783
  --lumx-border-radius: 4px;
784
784
  --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 80% opacity */
785
+ --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
786
786
  --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
787
787
  --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
788
788
  --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
@@ -866,7 +866,7 @@
866
866
  --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
867
867
  --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
868
868
  --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 80% opacity */
869
+ --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
870
870
  --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
871
871
  --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
872
872
  --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 Thu, 18 Nov 2021 15:14:46 GMT
97
+ * Generated on Tue, 30 Nov 2021 09:20:10 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 80% opacity',
349
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
421
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
493
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
565
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
635
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
707
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
1329
+ comment: 'Base dark color with 70% opacity',
1330
1330
  attributes: {
1331
1331
  category: 'navigation',
1332
1332
  type: 'item',
@@ -1335,7 +1335,7 @@ var DESIGN_TOKENS = {
1335
1335
  },
1336
1336
  'label-color': {
1337
1337
  version: '0.22',
1338
- comment: 'Base dark color with 80% opacity',
1338
+ comment: 'Neutral dark color',
1339
1339
  attributes: {
1340
1340
  category: 'navigation',
1341
1341
  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 80% opacity',
1354
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
1475
+ comment: 'Base dark color with 70% opacity',
1476
1476
  attributes: {
1477
1477
  category: 'navigation',
1478
1478
  type: 'item',
@@ -1481,7 +1481,7 @@ var DESIGN_TOKENS = {
1481
1481
  },
1482
1482
  'label-color': {
1483
1483
  version: '0.22',
1484
- comment: 'Base dark color with 80% opacity',
1484
+ comment: 'Neutral dark color',
1485
1485
  attributes: {
1486
1486
  category: 'navigation',
1487
1487
  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 80% opacity',
1502
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
1627
+ comment: 'Base dark color with 70% opacity',
1628
1628
  attributes: {
1629
1629
  category: 'navigation',
1630
1630
  type: 'item',
@@ -1633,7 +1633,7 @@ var DESIGN_TOKENS = {
1633
1633
  },
1634
1634
  'label-color': {
1635
1635
  version: '0.22',
1636
- comment: 'Base dark color with 80% opacity',
1636
+ comment: 'Neutral dark color',
1637
1637
  attributes: {
1638
1638
  category: 'navigation',
1639
1639
  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 80% opacity',
1654
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
2208
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
2304
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
2402
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
2500
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
2594
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
2690
+ comment: 'Base dark color with 70% opacity',
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 80% opacity',
3230
+ comment: 'Base dark color with 70% 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 80% opacity',
4594
+ comment: 'Base dark color with 70% opacity',
4595
4595
  attributes: {
4596
4596
  category: 'color',
4597
4597
  type: 'black',