@lumx/core 2.1.8-alpha.0 → 2.1.8
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 +99 -154
- package/js/constants/design-tokens.js +210 -210
- 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 +210 -210
- package/js/custom-colors.min.js.map +1 -1
- package/js/date-picker.min.js.map +1 -1
- 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 +99 -159
- package/scss/components/badge/_index.scss +1 -5
- package/scss/components/chip/_index.scss +0 -6
- package/scss/components/flag/_index.scss +3 -8
- package/scss/components/icon/_index.scss +0 -22
- package/scss/components/icon/_mixins.scss +3 -12
- package/scss/components/list/_mixins.scss +1 -2
- package/scss/components/message/_index.scss +5 -1
- package/scss/components/notification/_index.scss +1 -6
- package/scss/components/side-navigation/_mixins.scss +1 -0
- package/scss/components/thumbnail/_variables.scss +1 -1
- package/scss/components/uploader/_index.scss +2 -2
- package/scss/core/state/_mixins.scss +6 -32
|
@@ -2,12 +2,7 @@
|
|
|
2
2
|
@if $state == lumx-base-const('state', 'DEFAULT') {
|
|
3
3
|
@if $theme == lumx-base-const('theme', 'LIGHT') {
|
|
4
4
|
background-color: lumx-color-variant($color, 'N');
|
|
5
|
-
|
|
6
|
-
@if $color == 'yellow' {
|
|
7
|
-
color: lumx-color-variant('dark', 'L1');
|
|
8
|
-
} @else {
|
|
9
|
-
color: lumx-color-variant('light', 'N');
|
|
10
|
-
}
|
|
5
|
+
color: lumx-color-variant('light', 'N');
|
|
11
6
|
} @else if $theme == lumx-base-const('theme', 'DARK') {
|
|
12
7
|
background-color: lumx-color-variant('light', 'N');
|
|
13
8
|
color: lumx-color-variant($color, 'N');
|
|
@@ -36,18 +31,7 @@
|
|
|
36
31
|
@mixin lumx-state-medium($state, $color, $has-focus-inset: false) {
|
|
37
32
|
@if $state == lumx-base-const('state', 'DEFAULT') {
|
|
38
33
|
background-color: lumx-color-variant($color, 'L5');
|
|
39
|
-
|
|
40
|
-
@if $color == 'yellow' {
|
|
41
|
-
color: lumx-color-variant('dark', 'L1');
|
|
42
|
-
} @else {
|
|
43
|
-
color: lumx-color-variant($color, 'N');
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@if $color == 'dark' {
|
|
47
|
-
.#{$lumx-base-prefix}-icon {
|
|
48
|
-
color: lumx-color-variant('dark', 'L1');
|
|
49
|
-
}
|
|
50
|
-
}
|
|
34
|
+
color: lumx-color-variant($color, 'N');
|
|
51
35
|
} @else if $state == lumx-base-const('state', 'HOVER') {
|
|
52
36
|
background-color: lumx-color-variant($color, 'L4');
|
|
53
37
|
} @else if $state == lumx-base-const('state', 'ACTIVE') {
|
|
@@ -66,14 +50,12 @@
|
|
|
66
50
|
@if $state == lumx-base-const('state', 'DEFAULT') {
|
|
67
51
|
background-color: lumx-color-variant('primary', 'L5');
|
|
68
52
|
color: lumx-color-variant('primary', 'D2');
|
|
69
|
-
|
|
70
|
-
.#{$lumx-base-prefix}-icon {
|
|
71
|
-
color: lumx-color-variant('primary', 'D2');
|
|
72
|
-
}
|
|
73
53
|
} @else if $state == lumx-base-const('state', 'HOVER') {
|
|
74
54
|
background-color: lumx-color-variant('primary', 'L4');
|
|
55
|
+
color: lumx-color-variant('primary', 'D2');
|
|
75
56
|
} @else if $state == lumx-base-const('state', 'ACTIVE') {
|
|
76
57
|
background-color: lumx-color-variant('primary', 'L3');
|
|
58
|
+
color: lumx-color-variant('primary', 'D2');
|
|
77
59
|
} @else if $state == lumx-base-const('state', 'FOCUS') {
|
|
78
60
|
@if $has-focus-inset == true {
|
|
79
61
|
box-shadow: inset 0 0 0 2px lumx-color-variant('primary', 'L3');
|
|
@@ -85,14 +67,12 @@
|
|
|
85
67
|
@if $state == lumx-base-const('state', 'DEFAULT') {
|
|
86
68
|
background-color: lumx-color-variant('light', 'L3');
|
|
87
69
|
color: lumx-color-variant('light', 'N');
|
|
88
|
-
|
|
89
|
-
.#{$lumx-base-prefix}-icon {
|
|
90
|
-
color: lumx-color-variant('light', 'N');
|
|
91
|
-
}
|
|
92
70
|
} @else if $state == lumx-base-const('state', 'HOVER') {
|
|
93
71
|
background-color: lumx-color-variant('light', 'L4');
|
|
72
|
+
color: lumx-color-variant('light', 'N');
|
|
94
73
|
} @else if $state == lumx-base-const('state', 'ACTIVE') {
|
|
95
74
|
background-color: lumx-color-variant('light', 'L5');
|
|
75
|
+
color: lumx-color-variant('light', 'N');
|
|
96
76
|
} @else if $state == lumx-base-const('state', 'FOCUS') {
|
|
97
77
|
@if $has-focus-inset == true {
|
|
98
78
|
box-shadow: inset 0 0 0 2px lumx-color-variant('light', 'L3');
|
|
@@ -107,12 +87,6 @@
|
|
|
107
87
|
@if $state == lumx-base-const('state', 'DEFAULT') {
|
|
108
88
|
background-color: transparent;
|
|
109
89
|
color: lumx-color-variant($color, 'N');
|
|
110
|
-
|
|
111
|
-
@if $color == 'dark' {
|
|
112
|
-
.#{$lumx-base-prefix}-icon {
|
|
113
|
-
color: lumx-color-variant('dark', 'L1');
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
90
|
} @else if $state == lumx-base-const('state', 'HOVER') {
|
|
117
91
|
background-color: lumx-color-variant($color, 'L5');
|
|
118
92
|
} @else if $state == lumx-base-const('state', 'ACTIVE') {
|