@lumx/core 3.18.1 → 3.18.2-alpha.1

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 (13) hide show
  1. package/lumx.css +88 -265
  2. package/lumx.min.css +1 -1
  3. package/package.json +1 -1
  4. package/scss/components/button/_mixins.scss +0 -3
  5. package/scss/components/checkbox/_index.scss +71 -73
  6. package/scss/components/chip/_index.scss +37 -33
  7. package/scss/components/link/_mixins.scss +6 -4
  8. package/scss/components/list/_index.scss +1 -2
  9. package/scss/components/list/_mixins.scss +11 -9
  10. package/scss/components/radio-button/_index.scss +26 -28
  11. package/scss/components/switch/_index.scss +71 -73
  12. package/scss/components/text-field/_index.scss +4 -4
  13. package/scss/core/state/_mixins.scss +0 -3
package/package.json CHANGED
@@ -33,7 +33,7 @@
33
33
  "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
34
34
  },
35
35
  "sideEffects": false,
36
- "version": "3.18.1",
36
+ "version": "3.18.2-alpha.1",
37
37
  "devDependencies": {
38
38
  "@rollup/plugin-commonjs": "^19.0.2",
39
39
  "@rollup/plugin-terser": "^0.4.4",
package/scss/components/button/_mixins.scss CHANGED
@@ -192,9 +192,6 @@
192
192
  &:disabled,
193
193
  &[aria-disabled="true"] {
194
194
  @include lumx-state-disabled-input;
195
- // Enabling pointer-events to display label tooltips on hover
196
- // @TODO: should be moved in the mixin when all disabled states will be aligned
197
- pointer-events: all;
198
195
  }
199
196
  }
200
197
 
package/scss/components/checkbox/_index.scss CHANGED
@@ -86,10 +86,6 @@
86
86
 
87
87
  // Disabled state
88
88
  .#{$lumx-base-prefix}-checkbox--is-disabled {
89
- .#{$lumx-base-prefix}-checkbox__input-native {
90
- pointer-events: none;
91
- }
92
-
93
89
  .#{$lumx-base-prefix}-checkbox__input-placeholder {
94
90
  @include lumx-state-disabled-input;
95
91
  }
@@ -109,89 +105,91 @@
109
105
  }
110
106
  }
111
107
 
112
- // Hover state
113
- .#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked
114
- .#{$lumx-base-prefix}-checkbox__input-native:hover
115
- + .#{$lumx-base-prefix}-checkbox__input-placeholder {
116
- .#{$lumx-base-prefix}-checkbox__input-background {
117
- @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
108
+ :not(.#{$lumx-base-prefix}-checkbox--is-disabled) {
109
+ // Hover state
110
+ &.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked
111
+ .#{$lumx-base-prefix}-checkbox__input-native:hover
112
+ + .#{$lumx-base-prefix}-checkbox__input-placeholder {
113
+ .#{$lumx-base-prefix}-checkbox__input-background {
114
+ @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
115
+ }
118
116
  }
119
- }
120
117
 
121
- .#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked
122
- .#{$lumx-base-prefix}-checkbox__input-native:hover
123
- + .#{$lumx-base-prefix}-checkbox__input-placeholder {
124
- .#{$lumx-base-prefix}-checkbox__input-background {
125
- @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
118
+ &.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked
119
+ .#{$lumx-base-prefix}-checkbox__input-native:hover
120
+ + .#{$lumx-base-prefix}-checkbox__input-placeholder {
121
+ .#{$lumx-base-prefix}-checkbox__input-background {
122
+ @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
123
+ }
126
124
  }
127
- }
128
125
 
129
- .#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked
130
- .#{$lumx-base-prefix}-checkbox__input-native:hover
131
- + .#{$lumx-base-prefix}-checkbox__input-placeholder {
132
- .#{$lumx-base-prefix}-checkbox__input-indicator {
133
- @include lumx-state(
134
- lumx-base-const("state", "HOVER"),
135
- lumx-base-const("emphasis", "HIGH"),
136
- "primary",
137
- lumx-base-const("theme", "LIGHT")
138
- );
126
+ &.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked
127
+ .#{$lumx-base-prefix}-checkbox__input-native:hover
128
+ + .#{$lumx-base-prefix}-checkbox__input-placeholder {
129
+ .#{$lumx-base-prefix}-checkbox__input-indicator {
130
+ @include lumx-state(
131
+ lumx-base-const("state", "HOVER"),
132
+ lumx-base-const("emphasis", "HIGH"),
133
+ "primary",
134
+ lumx-base-const("theme", "LIGHT")
135
+ );
136
+ }
139
137
  }
140
- }
141
138
 
142
- .#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked
143
- .#{$lumx-base-prefix}-checkbox__input-native:hover
144
- + .#{$lumx-base-prefix}-checkbox__input-placeholder {
145
- .#{$lumx-base-prefix}-checkbox__input-indicator {
146
- @include lumx-state(
147
- lumx-base-const("state", "HOVER"),
148
- lumx-base-const("emphasis", "HIGH"),
149
- "primary",
150
- lumx-base-const("theme", "DARK")
151
- );
139
+ &.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked
140
+ .#{$lumx-base-prefix}-checkbox__input-native:hover
141
+ + .#{$lumx-base-prefix}-checkbox__input-placeholder {
142
+ .#{$lumx-base-prefix}-checkbox__input-indicator {
143
+ @include lumx-state(
144
+ lumx-base-const("state", "HOVER"),
145
+ lumx-base-const("emphasis", "HIGH"),
146
+ "primary",
147
+ lumx-base-const("theme", "DARK")
148
+ );
149
+ }
152
150
  }
153
- }
154
151
 
155
- // Active state
156
- .#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked
157
- .#{$lumx-base-prefix}-checkbox__input-native:active
158
- + .#{$lumx-base-prefix}-checkbox__input-placeholder {
159
- .#{$lumx-base-prefix}-checkbox__input-background {
160
- @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
152
+ // Active state
153
+ &.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked
154
+ .#{$lumx-base-prefix}-checkbox__input-native:active
155
+ + .#{$lumx-base-prefix}-checkbox__input-placeholder {
156
+ .#{$lumx-base-prefix}-checkbox__input-background {
157
+ @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
158
+ }
161
159
  }
162
- }
163
160
 
164
- .#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked
165
- .#{$lumx-base-prefix}-checkbox__input-native:active
166
- + .#{$lumx-base-prefix}-checkbox__input-placeholder {
167
- .#{$lumx-base-prefix}-checkbox__input-background {
168
- @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
161
+ &.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked
162
+ .#{$lumx-base-prefix}-checkbox__input-native:active
163
+ + .#{$lumx-base-prefix}-checkbox__input-placeholder {
164
+ .#{$lumx-base-prefix}-checkbox__input-background {
165
+ @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
166
+ }
169
167
  }
170
- }
171
168
 
172
- .#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked
173
- .#{$lumx-base-prefix}-checkbox__input-native:active
174
- + .#{$lumx-base-prefix}-checkbox__input-placeholder {
175
- .#{$lumx-base-prefix}-checkbox__input-indicator {
176
- @include lumx-state(
177
- lumx-base-const("state", "ACTIVE"),
178
- lumx-base-const("emphasis", "HIGH"),
179
- "primary",
180
- lumx-base-const("theme", "LIGHT")
181
- );
169
+ &.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked
170
+ .#{$lumx-base-prefix}-checkbox__input-native:active
171
+ + .#{$lumx-base-prefix}-checkbox__input-placeholder {
172
+ .#{$lumx-base-prefix}-checkbox__input-indicator {
173
+ @include lumx-state(
174
+ lumx-base-const("state", "ACTIVE"),
175
+ lumx-base-const("emphasis", "HIGH"),
176
+ "primary",
177
+ lumx-base-const("theme", "LIGHT")
178
+ );
179
+ }
182
180
  }
183
- }
184
181
 
185
- .#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked
186
- .#{$lumx-base-prefix}-checkbox__input-native:active
187
- + .#{$lumx-base-prefix}-checkbox__input-placeholder {
188
- .#{$lumx-base-prefix}-checkbox__input-indicator {
189
- @include lumx-state(
190
- lumx-base-const("state", "ACTIVE"),
191
- lumx-base-const("emphasis", "HIGH"),
192
- "primary",
193
- lumx-base-const("theme", "DARK")
194
- );
182
+ &.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked
183
+ .#{$lumx-base-prefix}-checkbox__input-native:active
184
+ + .#{$lumx-base-prefix}-checkbox__input-placeholder {
185
+ .#{$lumx-base-prefix}-checkbox__input-indicator {
186
+ @include lumx-state(
187
+ lumx-base-const("state", "ACTIVE"),
188
+ lumx-base-const("emphasis", "HIGH"),
189
+ "primary",
190
+ lumx-base-const("theme", "DARK")
191
+ );
192
+ }
195
193
  }
196
194
  }
197
195
 
package/scss/components/chip/_index.scss CHANGED
@@ -70,7 +70,7 @@
70
70
  .#{$lumx-base-prefix}-chip--is-unselected.#{$lumx-base-prefix}-chip--color-#{$key} {
71
71
  @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), $key);
72
72
 
73
- &.#{$lumx-base-prefix}-chip--is-clickable {
73
+ &.#{$lumx-base-prefix}-chip--is-clickable:not([aria-disabled=true]) {
74
74
  &:hover,
75
75
  &[data-lumx-hover] {
76
76
  @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), $key);
@@ -105,22 +105,24 @@
105
105
  );
106
106
 
107
107
  &.#{$lumx-base-prefix}-chip--is-clickable {
108
- &:hover,
109
- &[data-lumx-hover] {
110
- @include lumx-state-as-selected(
111
- lumx-base-const("state", "HOVER"),
112
- lumx-base-const("theme", "LIGHT"),
113
- "chip"
114
- );
115
- }
116
-
117
- &:active,
118
- &[data-lumx-active] {
119
- @include lumx-state-as-selected(
120
- lumx-base-const("state", "ACTIVE"),
121
- lumx-base-const("theme", "LIGHT"),
122
- "chip"
123
- );
108
+ &:not([aria-disabled="true"]) {
109
+ &:hover,
110
+ &[data-lumx-hover] {
111
+ @include lumx-state-as-selected(
112
+ lumx-base-const("state", "HOVER"),
113
+ lumx-base-const("theme", "LIGHT"),
114
+ "chip"
115
+ );
116
+ }
117
+
118
+ &:active,
119
+ &[data-lumx-active] {
120
+ @include lumx-state-as-selected(
121
+ lumx-base-const("state", "ACTIVE"),
122
+ lumx-base-const("theme", "LIGHT"),
123
+ "chip"
124
+ );
125
+ }
124
126
  }
125
127
 
126
128
  &[data-focus-visible-added] {
@@ -141,22 +143,24 @@
141
143
  );
142
144
 
143
145
  &.#{$lumx-base-prefix}-chip--is-clickable {
144
- &:hover,
145
- &[data-lumx-hover] {
146
- @include lumx-state-as-selected(
147
- lumx-base-const("state", "HOVER"),
148
- lumx-base-const("theme", "DARK"),
149
- "chip"
150
- );
151
- }
152
-
153
- &:active,
154
- &[data-lumx-active] {
155
- @include lumx-state-as-selected(
156
- lumx-base-const("state", "ACTIVE"),
157
- lumx-base-const("theme", "DARK"),
158
- "chip"
159
- );
146
+ &:not([aria-disabled="true"]) {
147
+ &:hover,
148
+ &[data-lumx-hover] {
149
+ @include lumx-state-as-selected(
150
+ lumx-base-const("state", "HOVER"),
151
+ lumx-base-const("theme", "DARK"),
152
+ "chip"
153
+ );
154
+ }
155
+
156
+ &:active,
157
+ &[data-lumx-active] {
158
+ @include lumx-state-as-selected(
159
+ lumx-base-const("state", "ACTIVE"),
160
+ lumx-base-const("theme", "DARK"),
161
+ "chip"
162
+ );
163
+ }
160
164
  }
161
165
 
162
166
  &[data-focus-visible-added] {
package/scss/components/link/_mixins.scss CHANGED
@@ -17,10 +17,12 @@
17
17
  line-height: inherit;
18
18
  }
19
19
 
20
- &:hover,
21
- &[data-lumx-hover],
22
- &[data-focus-visible-added] {
23
- text-decoration: underline;
20
+ &:not(:disabled):not([aria-disabled="true"]) {
21
+ &:hover,
22
+ &[data-lumx-hover],
23
+ &[data-focus-visible-added] {
24
+ text-decoration: underline;
25
+ }
24
26
  }
25
27
 
26
28
  &[data-focus-visible-added],
package/scss/components/list/_index.scss CHANGED
@@ -42,8 +42,7 @@
42
42
  @include lumx-list-item-selected;
43
43
  }
44
44
 
45
- &__link--is-disabled,
46
- &__link[aria-disabled="true"] {
45
+ &__link--is-disabled {
47
46
  @include lumx-state-disabled-input;
48
47
  }
49
48
  }
package/scss/components/list/_mixins.scss CHANGED
@@ -34,15 +34,17 @@
34
34
  outline-offset: -2px;
35
35
  }
36
36
 
37
- &:hover,
38
- &[data-lumx-hover],
39
- &[data-focus-visible-added] {
40
- @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
41
- }
42
-
43
- &:active,
44
- &[data-lumx-active], {
45
- @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
37
+ &:not([aria-disabled="true"]) {
38
+ &:hover,
39
+ &[data-lumx-hover],
40
+ &[data-focus-visible-added] {
41
+ @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
42
+ }
43
+
44
+ &:active,
45
+ &[data-lumx-active], {
46
+ @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
47
+ }
46
48
  }
47
49
  }
48
50
 
package/scss/components/radio-button/_index.scss CHANGED
@@ -76,10 +76,6 @@
76
76
 
77
77
  // Disabled state
78
78
  .#{$lumx-base-prefix}-radio-button--is-disabled {
79
- .#{$lumx-base-prefix}-radio-button__input-native {
80
- pointer-events: none;
81
- }
82
-
83
79
  .#{$lumx-base-prefix}-radio-button__input-placeholder {
84
80
  @include lumx-state-disabled-input;
85
81
  }
@@ -100,36 +96,38 @@
100
96
  }
101
97
 
102
98
  // Hover state
103
- .#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked
104
- .#{$lumx-base-prefix}-radio-button__input-native:hover
105
- + .#{$lumx-base-prefix}-radio-button__input-placeholder {
106
- .#{$lumx-base-prefix}-radio-button__input-background {
107
- @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
99
+ :not(.#{$lumx-base-prefix}-radio-button--is-disabled) {
100
+ &.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked
101
+ .#{$lumx-base-prefix}-radio-button__input-native:hover
102
+ + .#{$lumx-base-prefix}-radio-button__input-placeholder {
103
+ .#{$lumx-base-prefix}-radio-button__input-background {
104
+ @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
105
+ }
108
106
  }
109
- }
110
107
 
111
- .#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked
112
- .#{$lumx-base-prefix}-radio-button__input-native:hover
113
- + .#{$lumx-base-prefix}-radio-button__input-placeholder {
114
- .#{$lumx-base-prefix}-radio-button__input-background {
115
- @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
108
+ &.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked
109
+ .#{$lumx-base-prefix}-radio-button__input-native:hover
110
+ + .#{$lumx-base-prefix}-radio-button__input-placeholder {
111
+ .#{$lumx-base-prefix}-radio-button__input-background {
112
+ @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
113
+ }
116
114
  }
117
- }
118
115
 
119
- // Active state
120
- .#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked
121
- .#{$lumx-base-prefix}-radio-button__input-native:active
122
- + .#{$lumx-base-prefix}-radio-button__input-placeholder {
123
- .#{$lumx-base-prefix}-radio-button__input-background {
124
- @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
116
+ // Active state
117
+ &.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked
118
+ .#{$lumx-base-prefix}-radio-button__input-native:active
119
+ + .#{$lumx-base-prefix}-radio-button__input-placeholder {
120
+ .#{$lumx-base-prefix}-radio-button__input-background {
121
+ @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
122
+ }
125
123
  }
126
- }
127
124
 
128
- .#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked
129
- .#{$lumx-base-prefix}-radio-button__input-native:active
130
- + .#{$lumx-base-prefix}-radio-button__input-placeholder {
131
- .#{$lumx-base-prefix}-radio-button__input-background {
132
- @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
125
+ &.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked
126
+ .#{$lumx-base-prefix}-radio-button__input-native:active
127
+ + .#{$lumx-base-prefix}-radio-button__input-placeholder {
128
+ .#{$lumx-base-prefix}-radio-button__input-background {
129
+ @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
130
+ }
133
131
  }
134
132
  }
135
133
 
package/scss/components/switch/_index.scss CHANGED
@@ -112,10 +112,6 @@
112
112
 
113
113
  // Disabled state
114
114
  .#{$lumx-base-prefix}-switch--is-disabled {
115
- .#{$lumx-base-prefix}-switch__input-native {
116
- pointer-events: none;
117
- }
118
-
119
115
  .#{$lumx-base-prefix}-switch__input-placeholder {
120
116
  @include lumx-state-disabled-input;
121
117
  }
@@ -135,89 +131,91 @@
135
131
  }
136
132
  }
137
133
 
138
- // Hover state
139
- .#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
140
- .#{$lumx-base-prefix}-switch__input-native:hover
141
- + .#{$lumx-base-prefix}-switch__input-placeholder {
142
- .#{$lumx-base-prefix}-switch__input-background {
143
- @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
134
+ :not(.#{$lumx-base-prefix}-switch--is-disabled) {
135
+ // Hover state
136
+ &.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
137
+ .#{$lumx-base-prefix}-switch__input-native:hover
138
+ + .#{$lumx-base-prefix}-switch__input-placeholder {
139
+ .#{$lumx-base-prefix}-switch__input-background {
140
+ @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
141
+ }
144
142
  }
145
- }
146
143
 
147
- .#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
148
- .#{$lumx-base-prefix}-switch__input-native:hover
149
- + .#{$lumx-base-prefix}-switch__input-placeholder {
150
- .#{$lumx-base-prefix}-switch__input-background {
151
- @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
144
+ &.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
145
+ .#{$lumx-base-prefix}-switch__input-native:hover
146
+ + .#{$lumx-base-prefix}-switch__input-placeholder {
147
+ .#{$lumx-base-prefix}-switch__input-background {
148
+ @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
149
+ }
152
150
  }
153
- }
154
151
 
155
- .#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
156
- .#{$lumx-base-prefix}-switch__input-native:hover
157
- + .#{$lumx-base-prefix}-switch__input-placeholder {
158
- .#{$lumx-base-prefix}-switch__input-background {
159
- @include lumx-state(
160
- lumx-base-const("state", "HOVER"),
161
- lumx-base-const("emphasis", "HIGH"),
162
- "primary",
163
- lumx-base-const("theme", "LIGHT")
164
- );
152
+ &.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
153
+ .#{$lumx-base-prefix}-switch__input-native:hover
154
+ + .#{$lumx-base-prefix}-switch__input-placeholder {
155
+ .#{$lumx-base-prefix}-switch__input-background {
156
+ @include lumx-state(
157
+ lumx-base-const("state", "HOVER"),
158
+ lumx-base-const("emphasis", "HIGH"),
159
+ "primary",
160
+ lumx-base-const("theme", "LIGHT")
161
+ );
162
+ }
165
163
  }
166
- }
167
164
 
168
- .#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
169
- .#{$lumx-base-prefix}-switch__input-native:hover
170
- + .#{$lumx-base-prefix}-switch__input-placeholder {
171
- .#{$lumx-base-prefix}-switch__input-background {
172
- @include lumx-state(
173
- lumx-base-const("state", "HOVER"),
174
- lumx-base-const("emphasis", "HIGH"),
175
- "primary",
176
- lumx-base-const("theme", "DARK")
177
- );
165
+ &.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
166
+ .#{$lumx-base-prefix}-switch__input-native:hover
167
+ + .#{$lumx-base-prefix}-switch__input-placeholder {
168
+ .#{$lumx-base-prefix}-switch__input-background {
169
+ @include lumx-state(
170
+ lumx-base-const("state", "HOVER"),
171
+ lumx-base-const("emphasis", "HIGH"),
172
+ "primary",
173
+ lumx-base-const("theme", "DARK")
174
+ );
175
+ }
178
176
  }
179
- }
180
177
 
181
- // Active state
182
- .#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
183
- .#{$lumx-base-prefix}-switch__input-native:active
184
- + .#{$lumx-base-prefix}-switch__input-placeholder {
185
- .#{$lumx-base-prefix}-switch__input-background {
186
- @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
178
+ // Active state
179
+ &.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
180
+ .#{$lumx-base-prefix}-switch__input-native:active
181
+ + .#{$lumx-base-prefix}-switch__input-placeholder {
182
+ .#{$lumx-base-prefix}-switch__input-background {
183
+ @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
184
+ }
187
185
  }
188
- }
189
186
 
190
- .#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
191
- .#{$lumx-base-prefix}-switch__input-native:active
192
- + .#{$lumx-base-prefix}-switch__input-placeholder {
193
- .#{$lumx-base-prefix}-switch__input-background {
194
- @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
187
+ &.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
188
+ .#{$lumx-base-prefix}-switch__input-native:active
189
+ + .#{$lumx-base-prefix}-switch__input-placeholder {
190
+ .#{$lumx-base-prefix}-switch__input-background {
191
+ @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
192
+ }
195
193
  }
196
- }
197
194
 
198
- .#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
199
- .#{$lumx-base-prefix}-switch__input-native:active
200
- + .#{$lumx-base-prefix}-switch__input-placeholder {
201
- .#{$lumx-base-prefix}-switch__input-background {
202
- @include lumx-state(
203
- lumx-base-const("state", "ACTIVE"),
204
- lumx-base-const("emphasis", "HIGH"),
205
- "primary",
206
- lumx-base-const("theme", "LIGHT")
207
- );
195
+ &.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
196
+ .#{$lumx-base-prefix}-switch__input-native:active
197
+ + .#{$lumx-base-prefix}-switch__input-placeholder {
198
+ .#{$lumx-base-prefix}-switch__input-background {
199
+ @include lumx-state(
200
+ lumx-base-const("state", "ACTIVE"),
201
+ lumx-base-const("emphasis", "HIGH"),
202
+ "primary",
203
+ lumx-base-const("theme", "LIGHT")
204
+ );
205
+ }
208
206
  }
209
- }
210
207
 
211
- .#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
212
- .#{$lumx-base-prefix}-switch__input-native:active
213
- + .#{$lumx-base-prefix}-switch__input-placeholder {
214
- .#{$lumx-base-prefix}-switch__input-background {
215
- @include lumx-state(
216
- lumx-base-const("state", "ACTIVE"),
217
- lumx-base-const("emphasis", "HIGH"),
218
- "primary",
219
- lumx-base-const("theme", "DARK")
220
- );
208
+ &.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
209
+ .#{$lumx-base-prefix}-switch__input-native:active
210
+ + .#{$lumx-base-prefix}-switch__input-placeholder {
211
+ .#{$lumx-base-prefix}-switch__input-background {
212
+ @include lumx-state(
213
+ lumx-base-const("state", "ACTIVE"),
214
+ lumx-base-const("emphasis", "HIGH"),
215
+ "primary",
216
+ lumx-base-const("theme", "DARK")
217
+ );
218
+ }
221
219
  }
222
220
  }
223
221
 
package/scss/components/text-field/_index.scss CHANGED
@@ -186,7 +186,7 @@
186
186
 
187
187
  // Hover state
188
188
  .#{$lumx-base-prefix}-text-field--theme-light {
189
- .#{$lumx-base-prefix}-text-field__wrapper:hover {
189
+ &:not(.#{$lumx-base-prefix}-text-field--is-disabled) .#{$lumx-base-prefix}-text-field__wrapper:hover {
190
190
  @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"));
191
191
  }
192
192
 
@@ -207,7 +207,7 @@
207
207
  }
208
208
 
209
209
  .#{$lumx-base-prefix}-text-field--theme-dark {
210
- .#{$lumx-base-prefix}-text-field__wrapper:hover {
210
+ &:not(.#{$lumx-base-prefix}-text-field--is-disabled) .#{$lumx-base-prefix}-text-field__wrapper:hover {
211
211
  @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK"));
212
212
  }
213
213
 
@@ -229,7 +229,7 @@
229
229
 
230
230
  // Focus state
231
231
  .#{$lumx-base-prefix}-text-field--theme-light.#{$lumx-base-prefix}-text-field--is-focus {
232
- .#{$lumx-base-prefix}-text-field__label {
232
+ &:not(.#{$lumx-base-prefix}-text-field--is-disabled) .#{$lumx-base-prefix}-text-field__label {
233
233
  @include lumx-text-field-label-color(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT"));
234
234
  }
235
235
 
@@ -254,7 +254,7 @@
254
254
  }
255
255
 
256
256
  .#{$lumx-base-prefix}-text-field--theme-dark.#{$lumx-base-prefix}-text-field--is-focus {
257
- .#{$lumx-base-prefix}-text-field__label {
257
+ &:not(.#{$lumx-base-prefix}-text-field--is-disabled) .#{$lumx-base-prefix}-text-field__label {
258
258
  @include lumx-text-field-label-color(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK"));
259
259
  }
260
260
 
package/scss/core/state/_mixins.scss CHANGED
@@ -121,8 +121,6 @@
121
121
  }
122
122
 
123
123
  @mixin lumx-state-disabled-text($theme) {
124
- pointer-events: none;
125
-
126
124
  @if $theme == lumx-base-const("theme", "LIGHT") {
127
125
  color: lumx-color-variant("dark", "L3");
128
126
  } @else if $theme == lumx-base-const("theme", "DARK") {
@@ -131,7 +129,6 @@
131
129
  }
132
130
 
133
131
  @mixin lumx-state-disabled-input() {
134
- pointer-events: none;
135
132
  opacity: 0.5;
136
133
  cursor: default;
137
134
  }