@lumx/core 3.9.6-alpha.1 → 3.9.6-alpha.3

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 (14) hide show
  1. package/css/design-tokens.css +64 -64
  2. package/js/constants/design-tokens.js +90 -230
  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 +87 -143
  6. package/lumx.css +1 -1
  7. package/lumx.min.css +1 -1
  8. package/package.json +1 -1
  9. package/scss/_design-tokens.scss +64 -64
  10. package/scss/components/button/_index.scss +17 -15
  11. package/scss/components/button/_mixins.scss +7 -5
  12. package/scss/components/date-picker/_index.scss +0 -4
  13. package/scss/components/navigation/_index.scss +16 -2
  14. package/scss/components/navigation/_mixins.scss +10 -16
package/package.json CHANGED
@@ -40,7 +40,7 @@
40
40
  "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
41
41
  },
42
42
  "sideEffects": false,
43
- "version": "3.9.6-alpha.1",
43
+ "version": "3.9.6-alpha.3",
44
44
  "devDependencies": {
45
45
  "@babel/core": "^7.18.13",
46
46
  "@babel/plugin-proposal-class-properties": "^7.18.6",
package/scss/_design-tokens.scss CHANGED
@@ -1,8 +1,8 @@
1
- /* stylelint-disable custom-property-pattern, max-line-length, scss/dollar-variable-pattern */
1
+ /* stylelint-disable custom-property-pattern, max-line-length, scss/dollar-variable-pattern, length-zero-no-unit */
2
2
 
3
3
  /**
4
4
  * Do not edit directly
5
- * Generated on Tue, 03 Dec 2024 14:32:53 GMT
5
+ * Generated on Fri, 06 Dec 2024 10:54:50 GMT
6
6
  */
7
7
 
8
8
  $lumx-button-height: 36px !default;
@@ -79,44 +79,44 @@ $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !de
79
79
  $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
80
80
  $lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
81
81
  $lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
82
- $lumx-button-emphasis-selected-state-default-padding-horizontal: var(--lumx-spacing-unit-big) !default;
83
- $lumx-button-emphasis-selected-state-default-border-width: 1px !default;
84
- $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
82
+ $lumx-button-emphasis-selected-state-default-padding-horizontal: inherit !default; // deprecated (use base emphasis padding)
83
+ $lumx-button-emphasis-selected-state-default-border-width: 0 !default;
84
+ $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
85
85
  $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
86
- $lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
86
+ $lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
87
87
  $lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
88
88
  $lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
89
- $lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
90
- $lumx-button-emphasis-selected-state-hover-padding-horizontal: var(--lumx-spacing-unit-big) !default;
91
- $lumx-button-emphasis-selected-state-hover-border-width: 1px !default;
92
- $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
89
+ $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
90
+ $lumx-button-emphasis-selected-state-hover-padding-horizontal: inherit !default; // deprecated (use base emphasis padding)
91
+ $lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
92
+ $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
93
93
  $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
94
- $lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
94
+ $lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
95
95
  $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
96
96
  $lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
97
- $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
98
- $lumx-button-emphasis-selected-state-active-padding-horizontal: var(--lumx-spacing-unit-big) !default;
99
- $lumx-button-emphasis-selected-state-active-border-width: 1px !default;
100
- $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
97
+ $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
98
+ $lumx-button-emphasis-selected-state-active-padding-horizontal: inherit !default; // deprecated (use base emphasis padding)
99
+ $lumx-button-emphasis-selected-state-active-border-width: 0 !default;
100
+ $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
101
101
  $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
102
- $lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
102
+ $lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent !default;
103
103
  $lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
104
104
  $lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
105
- $lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
106
- $lumx-chip-emphasis-selected-state-default-border-width: 1px !default;
107
- $lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
108
- $lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
109
- $lumx-chip-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
105
+ $lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
106
+ $lumx-chip-emphasis-selected-state-default-border-width: 0 !default;
107
+ $lumx-chip-emphasis-selected-state-default-theme-light-border-color: transparent !default;
108
+ $lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
109
+ $lumx-chip-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
110
110
  $lumx-chip-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
111
- $lumx-chip-emphasis-selected-state-hover-border-width: 1px !default;
112
- $lumx-chip-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
113
- $lumx-chip-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
111
+ $lumx-chip-emphasis-selected-state-hover-border-width: 0 !default;
112
+ $lumx-chip-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
113
+ $lumx-chip-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
114
114
  $lumx-chip-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
115
115
  $lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
116
- $lumx-chip-emphasis-selected-state-active-border-width: 1px !default;
117
- $lumx-chip-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
118
- $lumx-chip-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
119
- $lumx-chip-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
116
+ $lumx-chip-emphasis-selected-state-active-border-width: 0 !default;
117
+ $lumx-chip-emphasis-selected-state-active-theme-light-border-color: transparent !default;
118
+ $lumx-chip-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
119
+ $lumx-chip-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
120
120
  $lumx-chip-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
121
121
  $lumx-material-button-text-transform: none !default;
122
122
  $lumx-material-checkbox-wrapper-size: 20px !default;
@@ -156,10 +156,10 @@ $lumx-material-text-field-input-content-line-height: 20px !default;
156
156
  $lumx-navigation-item-padding-horizontal: var(--lumx-spacing-unit-regular) !default;
157
157
  $lumx-navigation-item-min-height: 36px !default;
158
158
  $lumx-navigation-item-border-radius: var(--lumx-border-radius) !default;
159
- $lumx-navigation-item-emphasis-low-state-default-border-top-width: 0 !default;
160
- $lumx-navigation-item-emphasis-low-state-default-border-right-width: 0 !default;
161
- $lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0 !default;
162
- $lumx-navigation-item-emphasis-low-state-default-border-left-width: 0 !default;
159
+ $lumx-navigation-item-emphasis-low-state-default-border-top-width: 0px !default;
160
+ $lumx-navigation-item-emphasis-low-state-default-border-right-width: 0px !default;
161
+ $lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0px !default;
162
+ $lumx-navigation-item-emphasis-low-state-default-border-left-width: 0px !default;
163
163
  $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent !default;
164
164
  $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4) !default;
165
165
  $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
@@ -172,10 +172,10 @@ $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lu
172
172
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
173
173
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent !default;
174
174
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-L1) !default;
175
- $lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0 !default;
176
- $lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0 !default;
177
- $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0 !default;
178
- $lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0 !default;
175
+ $lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0px !default;
176
+ $lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0px !default;
177
+ $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0px !default;
178
+ $lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0px !default;
179
179
  $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
180
180
  $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L4) !default;
181
181
  $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
@@ -188,10 +188,10 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx
188
188
  $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
189
189
  $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
190
190
  $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-L1) !default;
191
- $lumx-navigation-item-emphasis-low-state-active-border-top-width: 0 !default;
192
- $lumx-navigation-item-emphasis-low-state-active-border-right-width: 0 !default;
193
- $lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0 !default;
194
- $lumx-navigation-item-emphasis-low-state-active-border-left-width: 0 !default;
191
+ $lumx-navigation-item-emphasis-low-state-active-border-top-width: 0px !default;
192
+ $lumx-navigation-item-emphasis-low-state-active-border-right-width: 0px !default;
193
+ $lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0px !default;
194
+ $lumx-navigation-item-emphasis-low-state-active-border-left-width: 0px !default;
195
195
  $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
196
196
  $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L4) !default;
197
197
  $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
@@ -204,11 +204,11 @@ $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lum
204
204
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
205
205
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
206
206
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-L1) !default;
207
- $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 1px !default;
208
- $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 1px !default;
209
- $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 1px !default;
210
- $lumx-navigation-item-emphasis-selected-state-default-border-left-width: 1px !default;
211
- $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
207
+ $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0px !default;
208
+ $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0px !default;
209
+ $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0px !default;
210
+ $lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0px !default;
211
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
212
212
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
213
213
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
214
214
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2) !default;
@@ -220,11 +220,11 @@ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var
220
220
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
221
221
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent !default;
222
222
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
223
- $lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 1px !default;
224
- $lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 1px !default;
225
- $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 1px !default;
226
- $lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 1px !default;
227
- $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
223
+ $lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0px !default;
224
+ $lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0px !default;
225
+ $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0px !default;
226
+ $lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0px !default;
227
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
228
228
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
229
229
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
230
230
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2) !default;
@@ -236,11 +236,11 @@ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(-
236
236
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
237
237
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
238
238
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
239
- $lumx-navigation-item-emphasis-selected-state-active-border-top-width: 1px !default;
240
- $lumx-navigation-item-emphasis-selected-state-active-border-right-width: 1px !default;
241
- $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 1px !default;
242
- $lumx-navigation-item-emphasis-selected-state-active-border-left-width: 1px !default;
243
- $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
239
+ $lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0px !default;
240
+ $lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0px !default;
241
+ $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0px !default;
242
+ $lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0px !default;
243
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
244
244
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
245
245
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
246
246
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2) !default;
@@ -252,15 +252,15 @@ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(
252
252
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
253
253
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
254
254
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
255
- $lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px !default;
256
- $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
257
- $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
258
- $lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 1px !default;
259
- $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
260
- $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
261
- $lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px !default;
262
- $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
263
- $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L5) !default;
255
+ $lumx-side-navigation-item-emphasis-selected-state-default-border-width: 0 !default;
256
+ $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: transparent !default;
257
+ $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
258
+ $lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 0 !default;
259
+ $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
260
+ $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
261
+ $lumx-side-navigation-item-emphasis-selected-state-active-border-width: 0 !default;
262
+ $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: transparent !default;
263
+ $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
264
264
  $lumx-tabs-link-height: 48px !default;
265
265
  $lumx-tabs-link-border-radius: 0 !default;
266
266
  $lumx-tabs-link-emphasis-low-state-default-border-top-width: 0 !default;
package/scss/components/button/_index.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  }
31
31
  }
32
32
 
33
- &.#{$lumx-base-prefix}-button--emphasis-medium:not(.#{$lumx-base-prefix}-button--is-selected) {
33
+ &.#{$lumx-base-prefix}-button--emphasis-medium {
34
34
  &.#{$lumx-base-prefix}-button--variant-button {
35
35
  @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "button", $key);
36
36
  }
@@ -40,16 +40,6 @@
40
40
  }
41
41
  }
42
42
 
43
- &.#{$lumx-base-prefix}-button--emphasis-medium.#{$lumx-base-prefix}-button--is-selected {
44
- &.#{$lumx-base-prefix}-button--variant-button {
45
- @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"), "button", $key);
46
- }
47
-
48
- &.#{$lumx-base-prefix}-button--variant-icon {
49
- @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"), "icon", $key);
50
- }
51
- }
52
-
53
43
  &.#{$lumx-base-prefix}-button--emphasis-low {
54
44
  &.#{$lumx-base-prefix}-button--variant-button {
55
45
  @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "button", $key);
@@ -107,16 +97,28 @@
107
97
 
108
98
  @each $key, $color in $lumx-color-palette {
109
99
  .#{$lumx-base-prefix}-button--color-#{$key} {
110
- &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-medium {
100
+ &.#{$lumx-base-prefix}-button--emphasis-medium {
111
101
  @include lumx-button-color(lumx-base-const("emphasis", "MEDIUM"), $key);
112
102
  }
113
103
 
114
- &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-low {
104
+ &.#{$lumx-base-prefix}-button--emphasis-low {
115
105
  @include lumx-button-color(lumx-base-const("emphasis", "LOW"), $key);
116
106
  }
107
+ }
108
+ }
117
109
 
118
- &.#{$lumx-base-prefix}-button--is-selected {
119
- @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key);
110
+
111
+ /* Button selected
112
+ ========================================================================== */
113
+
114
+ .#{$lumx-base-prefix}-button--is-selected {
115
+ @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"));
116
+
117
+ @each $key, $color in $lumx-color-palette {
118
+ &.#{$lumx-base-prefix}-button--color-#{$key} {
119
+ &.#{$lumx-base-prefix}-button--is-selected {
120
+ @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key);
121
+ }
120
122
  }
121
123
  }
122
124
  }
package/scss/components/button/_mixins.scss CHANGED
@@ -28,11 +28,13 @@
28
28
  }
29
29
  }
30
30
 
31
- @mixin lumx-button-size($emphasis, $variant, $size) {
32
- @if $size == lumx-base-const("size", "M") {
33
- height: var(--lumx-button-height);
34
- } @else if $size == lumx-base-const("size", "S") {
35
- height: calc(var(--lumx-button-height) / 1.5);
31
+ @mixin lumx-button-size($emphasis, $variant: null, $size: null) {
32
+ @if $variant {
33
+ @if $size == lumx-base-const("size", "M") {
34
+ height: var(--lumx-button-height);
35
+ } @else if $size == lumx-base-const("size", "S") {
36
+ height: calc(var(--lumx-button-height) / 1.5);
37
+ }
36
38
  }
37
39
 
38
40
  @if $variant == "button" {
package/scss/components/date-picker/_index.scss CHANGED
@@ -65,9 +65,5 @@
65
65
  &--is-today span {
66
66
  font-weight: var(--lumx-button-font-weight);
67
67
  }
68
-
69
- &--is-selected {
70
- @include lumx-button-is-selected(lumx-base-const("theme", "LIGHT"));
71
- }
72
68
  }
73
69
  }
package/scss/components/navigation/_index.scss CHANGED
@@ -1,3 +1,5 @@
1
+ /* stylelint-disable custom-property-pattern */
2
+
1
3
  /* ==========================================================================
2
4
  Navigation
3
5
  ========================================================================== */
@@ -18,23 +20,35 @@
18
20
  max-width: 100%;
19
21
  min-height: var(--lumx-navigation-item-min-height);
20
22
  padding: 0 var(--lumx-navigation-item-padding-horizontal);
23
+ padding-right: calc(var(--lumx-navigation-item-padding-horizontal) - var(--_border-right-width));
24
+ padding-left: calc(var(--lumx-navigation-item-padding-horizontal) - var(--_border-left-width));
21
25
  overflow: hidden;
22
26
  text-decoration: none;
23
27
  cursor: pointer;
28
+ background-color: var(--_background-color);
29
+ border-color: var(--_border-color);
30
+ border-style: solid;
31
+ border-width:
32
+ var(--_border-top-width)
33
+ var(--_border-right-width)
34
+ var(--_border-bottom-width)
35
+ var(--_border-left-width);
24
36
  border-radius: var(--lumx-navigation-item-border-radius);
25
37
  outline: none;
26
38
 
27
39
  @include lumx-typography("navigation-item", "custom");
28
40
  }
29
41
 
30
- &__label {
42
+ #{&} &__label {
31
43
  overflow: hidden;
44
+ color: var(--_label-color);
32
45
  text-overflow: ellipsis;
33
46
  white-space: nowrap;
34
47
  }
35
48
 
36
- &__icon {
49
+ #{&} &__icon {
37
50
  margin-right: $lumx-spacing-unit;
51
+ color: var(--_icon-color);
38
52
  }
39
53
  }
40
54
 
package/scss/components/navigation/_mixins.scss CHANGED
@@ -1,23 +1,17 @@
1
+ /* stylelint-disable custom-property-pattern */
2
+
1
3
  @use "sass:map";
2
4
 
3
5
  @mixin lumx-navigation-link-borders($emphasis, $state) {
4
- border-style: solid;
5
- border-width:
6
- var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-top-width)
7
- var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-right-width)
8
- var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-bottom-width)
9
- var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-left-width);
6
+ --_border-top-width: var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-top-width);
7
+ --_border-right-width: var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-right-width);
8
+ --_border-bottom-width: var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-bottom-width);
9
+ --_border-left-width: var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-left-width);
10
10
  }
11
11
 
12
12
  @mixin lumx-navigation-link-colors($emphasis, $state, $theme) {
13
- background-color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-background-color);
14
- border-color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-border-color);
15
-
16
- .#{$lumx-base-prefix}-navigation-item__label {
17
- color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-label-color);
18
- }
19
-
20
- .#{$lumx-base-prefix}-navigation-item__icon {
21
- color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-icon-color);
22
- }
13
+ --_background-color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-background-color);
14
+ --_border-color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-border-color);
15
+ --_label-color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-label-color);
16
+ --_icon-color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-icon-color);
23
17
  }