@lumx/core 2.1.3 → 2.1.4
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.
- package/css/design-tokens.css +88 -33
- package/js/constants/design-tokens.js +22 -22
- package/js/constants/design-tokens.min.js +1 -1
- package/js/constants/design-tokens.min.js.map +1 -1
- package/js/constants/design-tokens.ts +22 -22
- package/js/utils.min.js.map +1 -1
- package/lumx.css +1 -1
- package/lumx.min.css +1 -1
- package/package.json +2 -2
- package/scss/_design-tokens.scss +93 -33
- package/scss/components/flag/_index.scss +8 -3
- package/scss/components/list/_mixins.scss +2 -1
- package/scss/components/side-navigation/_mixins.scss +0 -1
- package/scss/components/thumbnail/_variables.scss +1 -1
- package/scss/components/uploader/_index.scss +2 -2
- package/scss/core/state/_mixins.scss +12 -2
package/package.json
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"prepublishOnly": "yarn build"
|
|
43
43
|
},
|
|
44
44
|
"sideEffects": false,
|
|
45
|
-
"version": "2.1.
|
|
45
|
+
"version": "2.1.4",
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@babel/core": "^7.8.3",
|
|
48
48
|
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"moment": "^2.24.0",
|
|
80
80
|
"moment-range": "^4.0.2"
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "de78ddf378468c55a56149bcb4568e66a9a88f32"
|
|
83
83
|
}
|
package/scss/_design-tokens.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 18 Nov 2021 15:14:46 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
$lumx-button-height: 36px !default;
|
|
@@ -47,7 +47,12 @@ $lumx-button-emphasis-medium-state-default-theme-light-background-color: rgba(
|
|
|
47
47
|
0,
|
|
48
48
|
0.12
|
|
49
49
|
) !default; // Base dark color with 12% opacity
|
|
50
|
-
$lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
|
|
50
|
+
$lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
|
|
51
|
+
0,
|
|
52
|
+
0,
|
|
53
|
+
0,
|
|
54
|
+
0.7
|
|
55
|
+
) !default; // Base dark color with 80% opacity
|
|
51
56
|
$lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
|
|
52
57
|
$lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
|
|
53
58
|
255,
|
|
@@ -65,7 +70,12 @@ $lumx-button-emphasis-medium-state-hover-theme-light-background-color: rgba(
|
|
|
65
70
|
0,
|
|
66
71
|
0.2
|
|
67
72
|
) !default; // Base dark color with 20% opacity
|
|
68
|
-
$lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
|
|
73
|
+
$lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
|
|
74
|
+
0,
|
|
75
|
+
0,
|
|
76
|
+
0,
|
|
77
|
+
0.7
|
|
78
|
+
) !default; // Base dark color with 80% opacity
|
|
69
79
|
$lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
|
|
70
80
|
$lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
|
|
71
81
|
255,
|
|
@@ -83,7 +93,12 @@ $lumx-button-emphasis-medium-state-active-theme-light-background-color: rgba(
|
|
|
83
93
|
0,
|
|
84
94
|
0.38
|
|
85
95
|
) !default; // Base dark color with 38% opacity
|
|
86
|
-
$lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
|
|
96
|
+
$lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
|
|
97
|
+
0,
|
|
98
|
+
0,
|
|
99
|
+
0,
|
|
100
|
+
0.7
|
|
101
|
+
) !default; // Base dark color with 80% opacity
|
|
87
102
|
$lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
|
|
88
103
|
$lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
|
|
89
104
|
255,
|
|
@@ -96,7 +111,12 @@ $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !
|
|
|
96
111
|
$lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
|
|
97
112
|
$lumx-button-emphasis-low-state-default-border-width: 0 !default;
|
|
98
113
|
$lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
|
|
99
|
-
$lumx-button-emphasis-low-state-default-theme-light-color: rgba(
|
|
114
|
+
$lumx-button-emphasis-low-state-default-theme-light-color: rgba(
|
|
115
|
+
0,
|
|
116
|
+
0,
|
|
117
|
+
0,
|
|
118
|
+
0.7
|
|
119
|
+
) !default; // Base dark color with 80% opacity
|
|
100
120
|
$lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
|
|
101
121
|
$lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
|
|
102
122
|
$lumx-button-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
|
|
@@ -109,7 +129,12 @@ $lumx-button-emphasis-low-state-hover-theme-light-background-color: rgba(
|
|
|
109
129
|
0,
|
|
110
130
|
0.12
|
|
111
131
|
) !default; // Base dark color with 12% opacity
|
|
112
|
-
$lumx-button-emphasis-low-state-hover-theme-light-color: rgba(
|
|
132
|
+
$lumx-button-emphasis-low-state-hover-theme-light-color: rgba(
|
|
133
|
+
0,
|
|
134
|
+
0,
|
|
135
|
+
0,
|
|
136
|
+
0.7
|
|
137
|
+
) !default; // Base dark color with 80% opacity
|
|
113
138
|
$lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
|
|
114
139
|
$lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
|
|
115
140
|
255,
|
|
@@ -127,7 +152,12 @@ $lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
|
|
|
127
152
|
0,
|
|
128
153
|
0.2
|
|
129
154
|
) !default; // Base dark color with 20% opacity
|
|
130
|
-
$lumx-button-emphasis-low-state-active-theme-light-color: rgba(
|
|
155
|
+
$lumx-button-emphasis-low-state-active-theme-light-color: rgba(
|
|
156
|
+
0,
|
|
157
|
+
0,
|
|
158
|
+
0,
|
|
159
|
+
0.7
|
|
160
|
+
) !default; // Base dark color with 80% opacity
|
|
131
161
|
$lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
|
|
132
162
|
$lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
|
|
133
163
|
255,
|
|
@@ -229,21 +259,21 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
|
|
|
229
259
|
0,
|
|
230
260
|
0,
|
|
231
261
|
0,
|
|
232
|
-
0.
|
|
233
|
-
) !default; //
|
|
262
|
+
0.7
|
|
263
|
+
) !default; // Base dark color with 80% opacity
|
|
234
264
|
$lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
|
|
235
265
|
0,
|
|
236
266
|
0,
|
|
237
267
|
0,
|
|
238
|
-
0.
|
|
239
|
-
) !default; //
|
|
268
|
+
0.7
|
|
269
|
+
) !default; // Base dark color with 80% opacity
|
|
240
270
|
$lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent !default;
|
|
241
271
|
$lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba(
|
|
242
272
|
0,
|
|
243
273
|
0,
|
|
244
274
|
0,
|
|
245
|
-
0.
|
|
246
|
-
) !default; //
|
|
275
|
+
0.7
|
|
276
|
+
) !default; // Base dark color with 80% opacity
|
|
247
277
|
$lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
|
|
248
278
|
$lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
|
|
249
279
|
255,
|
|
@@ -275,14 +305,14 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
|
|
|
275
305
|
0,
|
|
276
306
|
0,
|
|
277
307
|
0,
|
|
278
|
-
0.
|
|
279
|
-
) !default; //
|
|
308
|
+
0.7
|
|
309
|
+
) !default; // Base dark color with 80% opacity
|
|
280
310
|
$lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
|
|
281
311
|
0,
|
|
282
312
|
0,
|
|
283
313
|
0,
|
|
284
|
-
0.
|
|
285
|
-
) !default; //
|
|
314
|
+
0.7
|
|
315
|
+
) !default; // Base dark color with 80% opacity
|
|
286
316
|
$lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
|
|
287
317
|
0,
|
|
288
318
|
0,
|
|
@@ -293,8 +323,8 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
|
|
|
293
323
|
0,
|
|
294
324
|
0,
|
|
295
325
|
0,
|
|
296
|
-
0.
|
|
297
|
-
) !default; //
|
|
326
|
+
0.7
|
|
327
|
+
) !default; // Base dark color with 80% opacity
|
|
298
328
|
$lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
|
|
299
329
|
255,
|
|
300
330
|
255,
|
|
@@ -336,14 +366,14 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
|
|
|
336
366
|
0,
|
|
337
367
|
0,
|
|
338
368
|
0,
|
|
339
|
-
0.
|
|
340
|
-
) !default; //
|
|
369
|
+
0.7
|
|
370
|
+
) !default; // Base dark color with 80% opacity
|
|
341
371
|
$lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
|
|
342
372
|
0,
|
|
343
373
|
0,
|
|
344
374
|
0,
|
|
345
|
-
0.
|
|
346
|
-
) !default; //
|
|
375
|
+
0.7
|
|
376
|
+
) !default; // Base dark color with 80% opacity
|
|
347
377
|
$lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
|
|
348
378
|
0,
|
|
349
379
|
0,
|
|
@@ -354,8 +384,8 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
|
|
|
354
384
|
0,
|
|
355
385
|
0,
|
|
356
386
|
0,
|
|
357
|
-
0.
|
|
358
|
-
) !default; //
|
|
387
|
+
0.7
|
|
388
|
+
) !default; // Base dark color with 80% opacity
|
|
359
389
|
$lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
|
|
360
390
|
255,
|
|
361
391
|
255,
|
|
@@ -480,7 +510,12 @@ $lumx-tabs-link-emphasis-low-state-default-border-right-width: 0 !default;
|
|
|
480
510
|
$lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
|
|
481
511
|
$lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
|
|
482
512
|
$lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
|
|
483
|
-
$lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
|
|
513
|
+
$lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
|
|
514
|
+
0,
|
|
515
|
+
0,
|
|
516
|
+
0,
|
|
517
|
+
0.7
|
|
518
|
+
) !default; // Base dark color with 80% opacity
|
|
484
519
|
$lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
|
|
485
520
|
0,
|
|
486
521
|
0,
|
|
@@ -505,7 +540,12 @@ $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: rgba(
|
|
|
505
540
|
0,
|
|
506
541
|
0.12
|
|
507
542
|
) !default; // Base dark color with 12% opacity
|
|
508
|
-
$lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
|
|
543
|
+
$lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
|
|
544
|
+
0,
|
|
545
|
+
0,
|
|
546
|
+
0,
|
|
547
|
+
0.7
|
|
548
|
+
) !default; // Base dark color with 80% opacity
|
|
509
549
|
$lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
|
|
510
550
|
0,
|
|
511
551
|
0,
|
|
@@ -535,7 +575,12 @@ $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: rgba(
|
|
|
535
575
|
0,
|
|
536
576
|
0.2
|
|
537
577
|
) !default; // Base dark color with 20% opacity
|
|
538
|
-
$lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
|
|
578
|
+
$lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
|
|
579
|
+
0,
|
|
580
|
+
0,
|
|
581
|
+
0,
|
|
582
|
+
0.7
|
|
583
|
+
) !default; // Base dark color with 80% opacity
|
|
539
584
|
$lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
|
|
540
585
|
0,
|
|
541
586
|
0,
|
|
@@ -560,7 +605,12 @@ $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
|
|
|
560
605
|
$lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
|
|
561
606
|
$lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0 !default;
|
|
562
607
|
$lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent !default;
|
|
563
|
-
$lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
|
|
608
|
+
$lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
|
|
609
|
+
0,
|
|
610
|
+
0,
|
|
611
|
+
0,
|
|
612
|
+
0.7
|
|
613
|
+
) !default; // Base dark color with 80% opacity
|
|
564
614
|
$lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
|
|
565
615
|
$lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
|
|
566
616
|
$lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
|
|
@@ -575,7 +625,12 @@ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: rgba
|
|
|
575
625
|
0,
|
|
576
626
|
0.12
|
|
577
627
|
) !default; // Base dark color with 12% opacity
|
|
578
|
-
$lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
|
|
628
|
+
$lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
|
|
629
|
+
0,
|
|
630
|
+
0,
|
|
631
|
+
0,
|
|
632
|
+
0.7
|
|
633
|
+
) !default; // Base dark color with 80% opacity
|
|
579
634
|
$lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
|
|
580
635
|
$lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
|
|
581
636
|
255,
|
|
@@ -595,7 +650,12 @@ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: rgb
|
|
|
595
650
|
0,
|
|
596
651
|
0.2
|
|
597
652
|
) !default; // Base dark color with 20% opacity
|
|
598
|
-
$lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
|
|
653
|
+
$lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
|
|
654
|
+
0,
|
|
655
|
+
0,
|
|
656
|
+
0,
|
|
657
|
+
0.7
|
|
658
|
+
) !default; // Base dark color with 80% opacity
|
|
599
659
|
$lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
|
|
600
660
|
$lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
|
|
601
661
|
255,
|
|
@@ -730,7 +790,7 @@ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
|
|
|
730
790
|
) !default; // Base light color with 80% opacity
|
|
731
791
|
$lumx-border-radius: 4px !default;
|
|
732
792
|
$lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
733
|
-
$lumx-color-dark-L1: rgba(0, 0, 0, 0.
|
|
793
|
+
$lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 80% opacity
|
|
734
794
|
$lumx-color-dark-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
|
|
735
795
|
$lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
|
|
736
796
|
$lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
|
|
@@ -814,7 +874,7 @@ $lumx-color-accent-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with
|
|
|
814
874
|
$lumx-color-accent-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
|
|
815
875
|
$lumx-color-accent-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
|
|
816
876
|
$lumx-color-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
817
|
-
$lumx-color-black-L1: rgba(0, 0, 0, 0.
|
|
877
|
+
$lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 80% opacity
|
|
818
878
|
$lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
|
|
819
879
|
$lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
|
|
820
880
|
$lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
|
|
@@ -25,9 +25,14 @@
|
|
|
25
25
|
@each $key, $color in $lumx-color-palette {
|
|
26
26
|
.#{$lumx-base-prefix}-flag--color-#{$key} {
|
|
27
27
|
border: 2px solid lumx-color-variant($key, 'L4');
|
|
28
|
-
}
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
.#{$lumx-base-prefix}-flag__label,
|
|
30
|
+
.#{$lumx-base-prefix}-flag__icon {
|
|
31
|
+
@if $key == 'dark' {
|
|
32
|
+
color: lumx-color-variant($key, 'L1');
|
|
33
|
+
} @else {
|
|
34
|
+
color: lumx-color-variant($key, 'D2');
|
|
35
|
+
}
|
|
36
|
+
}
|
|
32
37
|
}
|
|
33
38
|
}
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
margin-bottom: $lumx-spacing-unit;
|
|
74
74
|
|
|
75
75
|
#{$self}--theme-light & {
|
|
76
|
-
color: lumx-color-variant('dark', '
|
|
76
|
+
color: lumx-color-variant('dark', 'L1');
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
#{$self}--theme-dark & {
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
text-align: center;
|
|
88
88
|
|
|
89
89
|
#{$self}--theme-light & {
|
|
90
|
-
color: lumx-color-variant('dark', '
|
|
90
|
+
color: lumx-color-variant('dark', 'L1');
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
#{$self}--theme-dark & {
|
|
@@ -31,7 +31,12 @@
|
|
|
31
31
|
@mixin lumx-state-medium($state, $color, $has-focus-inset: false) {
|
|
32
32
|
@if $state == lumx-base-const('state', 'DEFAULT') {
|
|
33
33
|
background-color: lumx-color-variant($color, 'L5');
|
|
34
|
-
|
|
34
|
+
|
|
35
|
+
@if $color == 'dark' {
|
|
36
|
+
color: lumx-color-variant($color, 'L1');
|
|
37
|
+
} @else {
|
|
38
|
+
color: lumx-color-variant($color, 'N');
|
|
39
|
+
}
|
|
35
40
|
} @else if $state == lumx-base-const('state', 'HOVER') {
|
|
36
41
|
background-color: lumx-color-variant($color, 'L4');
|
|
37
42
|
} @else if $state == lumx-base-const('state', 'ACTIVE') {
|
|
@@ -86,7 +91,12 @@
|
|
|
86
91
|
@mixin lumx-state-low($state, $color, $has-focus-inset: false) {
|
|
87
92
|
@if $state == lumx-base-const('state', 'DEFAULT') {
|
|
88
93
|
background-color: transparent;
|
|
89
|
-
|
|
94
|
+
|
|
95
|
+
@if $color == 'dark' {
|
|
96
|
+
color: lumx-color-variant($color, 'L1');
|
|
97
|
+
} @else {
|
|
98
|
+
color: lumx-color-variant($color, 'N');
|
|
99
|
+
}
|
|
90
100
|
} @else if $state == lumx-base-const('state', 'HOVER') {
|
|
91
101
|
background-color: lumx-color-variant($color, 'L5');
|
|
92
102
|
} @else if $state == lumx-base-const('state', 'ACTIVE') {
|