@lumx/core 3.9.8-alpha.1 → 3.9.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.
Files changed (12) hide show
  1. package/css/design-tokens.css +63 -63
  2. package/js/constants/design-tokens.js +117 -257
  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 +117 -173
  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 +63 -63
  10. package/scss/components/button/_index.scss +4 -8
  11. package/scss/components/slideshow/_index.scss +3 -7
  12. package/scss/components/tabs/_index.scss +0 -2
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.8-alpha.1",
43
+ "version": "3.9.8",
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
@@ -2,7 +2,7 @@
2
2
 
3
3
  /**
4
4
  * Do not edit directly
5
- * Generated on Thu, 09 Jan 2025 16:46:05 GMT
5
+ * Generated on Fri, 06 Dec 2024 13:46:59 GMT
6
6
  */
7
7
 
8
8
  $lumx-button-height: 36px !default;
@@ -80,44 +80,44 @@ $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-c
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
82
  $lumx-button-emphasis-selected-state-default-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
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;
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;
87
- $lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6) !default;
86
+ $lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
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;
89
+ $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
90
90
  $lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
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;
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;
95
- $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
94
+ $lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
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;
97
+ $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
98
98
  $lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
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;
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;
103
- $lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
102
+ $lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent !default;
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;
110
- $lumx-chip-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6) !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;
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
+ $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: 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
- $lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !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;
120
- $lumx-chip-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
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: 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
+ $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;
123
123
  $lumx-material-checkbox-control-size: 16px !default;
@@ -204,63 +204,63 @@ $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;
215
215
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent !default;
216
216
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
217
- $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6) !default;
217
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
218
218
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
219
219
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N) !default;
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;
231
- $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(--lumx-color-primary-L5) !default;
231
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(--lumx-color-primary-L4) !default;
232
232
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
233
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
233
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
234
234
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
235
235
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N) !default;
236
236
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
237
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
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;
247
- $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(--lumx-color-primary-L4) !default;
247
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(--lumx-color-primary-L3) !default;
248
248
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
249
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
249
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
250
250
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
251
251
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
252
252
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
253
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
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-L4) !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;
@@ -332,7 +332,7 @@ $lumx-text-field-state-default-input-border-bottom-width: 1px !default;
332
332
  $lumx-text-field-state-default-input-border-left-width: 1px !default;
333
333
  $lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
334
334
  $lumx-text-field-state-default-theme-light-input-background-color: var(--lumx-color-dark-L6) !default;
335
- $lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L3) !default;
335
+ $lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4) !default;
336
336
  $lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
337
337
  $lumx-text-field-state-default-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
338
338
  $lumx-text-field-state-default-theme-dark-header-label-color: var(--lumx-color-light-N) !default;
@@ -346,7 +346,7 @@ $lumx-text-field-state-hover-input-border-bottom-width: 1px !default;
346
346
  $lumx-text-field-state-hover-input-border-left-width: 1px !default;
347
347
  $lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
348
348
  $lumx-text-field-state-hover-theme-light-input-background-color: var(--lumx-color-dark-L5) !default;
349
- $lumx-text-field-state-hover-theme-light-input-border-color: var(--lumx-color-dark-L3) !default;
349
+ $lumx-text-field-state-hover-theme-light-input-border-color: var(--lumx-color-dark-L4) !default;
350
350
  $lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
351
351
  $lumx-text-field-state-hover-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
352
352
  $lumx-text-field-state-hover-theme-dark-header-label-color: var(--lumx-color-light-N) !default;
package/scss/components/button/_index.scss CHANGED
@@ -158,18 +158,14 @@
158
158
  .#{$lumx-base-prefix}-button {
159
159
  // Remove border radius on the right on the first button (if not hidden and not also the last button)
160
160
  &:not(:last-of-type:not(.visually-hidden)) {
161
- &, &::before {
162
- border-top-right-radius: 0;
163
- border-bottom-right-radius: 0;
164
- }
161
+ border-top-right-radius: 0 !important;
162
+ border-bottom-right-radius: 0 !important;
165
163
  }
166
164
 
167
165
  // Remove border radius on the left on the last button (if not hidden and not also the first button)
168
166
  &:not(:first-of-type:not(.visually-hidden)) {
169
- &, &::before {
170
- border-top-left-radius: 0;
171
- border-bottom-left-radius: 0;
172
- }
167
+ border-top-left-radius: 0 !important;
168
+ border-bottom-left-radius: 0 !important;
173
169
  }
174
170
  }
175
171
  }
package/scss/components/slideshow/_index.scss CHANGED
@@ -119,8 +119,7 @@
119
119
  text-decoration: none;
120
120
  cursor: pointer;
121
121
  user-select: none;
122
- background: none;
123
- border-style: solid;
122
+ border: none;
124
123
  border-radius: 50%;
125
124
  outline: none;
126
125
  transition: transform $lumx-slideshow-transition-duration;
@@ -131,8 +130,7 @@
131
130
  }
132
131
 
133
132
  #{$self}--theme-light & {
134
- border-color:lumx-color-variant("dark", "L2");
135
- border-width: 2px;
133
+ background-color:lumx-color-variant("dark", "L5");
136
134
 
137
135
  &[data-focus-visible-added] {
138
136
  @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
@@ -140,13 +138,11 @@
140
138
 
141
139
  &:hover {
142
140
  background-color: lumx-color-variant("primary", "N");
143
- border-width: 0;
144
141
  }
145
142
  &--is-active {
146
143
  background-color: lumx-color-variant("primary", "N");
147
144
  width: $item-size*2;
148
145
  border-radius: $lumx-border-radius;
149
- border-width: 0;
150
146
 
151
147
  &[data-focus-visible-added] {
152
148
  @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "primary");
@@ -155,7 +151,7 @@
155
151
  }
156
152
 
157
153
  #{$self}--theme-dark & {
158
- border-color: lumx-color-variant("light", "L2");
154
+ background-color: lumx-color-variant("light", "L5");
159
155
 
160
156
  &[data-focus-visible-added] {
161
157
  @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
package/scss/components/tabs/_index.scss CHANGED
@@ -52,8 +52,6 @@
52
52
  ========================================================================== */
53
53
 
54
54
  .#{$lumx-base-prefix}-tabs--layout-fixed {
55
- flex-grow: 1;
56
-
57
55
  .#{$lumx-base-prefix}-tabs__link {
58
56
  @include lumx-tabs-link-layout("fixed");
59
57
  }