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

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 (11) hide show
  1. package/css/design-tokens.css +61 -61
  2. package/js/constants/design-tokens.js +84 -224
  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 +84 -140
  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 +61 -61
  10. package/scss/components/navigation/_index.scss +16 -2
  11. package/scss/components/navigation/_mixins.scss +10 -16
package/css/design-tokens.css 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 Wed, 04 Dec 2024 10:53:03 GMT
6
6
  */
7
7
 
8
8
  :root {
@@ -81,43 +81,43 @@
81
81
  --lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1);
82
82
  --lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent;
83
83
  --lumx-button-emphasis-selected-state-default-padding-horizontal: var(--lumx-spacing-unit-big);
84
- --lumx-button-emphasis-selected-state-default-border-width: 1px;
85
- --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
84
+ --lumx-button-emphasis-selected-state-default-border-width: 0;
85
+ --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
86
86
  --lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2);
87
- --lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
87
+ --lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent;
88
88
  --lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
89
89
  --lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
90
- --lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
90
+ --lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent;
91
91
  --lumx-button-emphasis-selected-state-hover-padding-horizontal: var(--lumx-spacing-unit-big);
92
- --lumx-button-emphasis-selected-state-hover-border-width: 1px;
93
- --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
92
+ --lumx-button-emphasis-selected-state-hover-border-width: 0;
93
+ --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
94
94
  --lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2);
95
- --lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
95
+ --lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent;
96
96
  --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
97
97
  --lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
98
- --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
98
+ --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent;
99
99
  --lumx-button-emphasis-selected-state-active-padding-horizontal: var(--lumx-spacing-unit-big);
100
- --lumx-button-emphasis-selected-state-active-border-width: 1px;
101
- --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
100
+ --lumx-button-emphasis-selected-state-active-border-width: 0;
101
+ --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
102
102
  --lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2);
103
- --lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
103
+ --lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent;
104
104
  --lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
105
105
  --lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
106
- --lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
107
- --lumx-chip-emphasis-selected-state-default-border-width: 1px;
108
- --lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
109
- --lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
110
- --lumx-chip-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
106
+ --lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent;
107
+ --lumx-chip-emphasis-selected-state-default-border-width: 0;
108
+ --lumx-chip-emphasis-selected-state-default-theme-light-border-color: transparent;
109
+ --lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
110
+ --lumx-chip-emphasis-selected-state-default-theme-dark-border-color: transparent;
111
111
  --lumx-chip-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
112
- --lumx-chip-emphasis-selected-state-hover-border-width: 1px;
113
- --lumx-chip-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
114
- --lumx-chip-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
112
+ --lumx-chip-emphasis-selected-state-hover-border-width: 0;
113
+ --lumx-chip-emphasis-selected-state-hover-theme-light-border-color: transparent;
114
+ --lumx-chip-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
115
115
  --lumx-chip-emphasis-selected-state-hover-theme-dark-border-color: transparent;
116
116
  --lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
117
- --lumx-chip-emphasis-selected-state-active-border-width: 1px;
118
- --lumx-chip-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
119
- --lumx-chip-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
120
- --lumx-chip-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
117
+ --lumx-chip-emphasis-selected-state-active-border-width: 0;
118
+ --lumx-chip-emphasis-selected-state-active-theme-light-border-color: transparent;
119
+ --lumx-chip-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
120
+ --lumx-chip-emphasis-selected-state-active-theme-dark-border-color: transparent;
121
121
  --lumx-chip-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
122
122
  --lumx-material-button-text-transform: none;
123
123
  --lumx-material-checkbox-wrapper-size: 20px;
@@ -157,10 +157,10 @@
157
157
  --lumx-navigation-item-padding-horizontal: var(--lumx-spacing-unit-regular);
158
158
  --lumx-navigation-item-min-height: 36px;
159
159
  --lumx-navigation-item-border-radius: var(--lumx-border-radius);
160
- --lumx-navigation-item-emphasis-low-state-default-border-top-width: 0;
161
- --lumx-navigation-item-emphasis-low-state-default-border-right-width: 0;
162
- --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0;
163
- --lumx-navigation-item-emphasis-low-state-default-border-left-width: 0;
160
+ --lumx-navigation-item-emphasis-low-state-default-border-top-width: 0px;
161
+ --lumx-navigation-item-emphasis-low-state-default-border-right-width: 0px;
162
+ --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0px;
163
+ --lumx-navigation-item-emphasis-low-state-default-border-left-width: 0px;
164
164
  --lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent;
165
165
  --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4);
166
166
  --lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1);
@@ -173,10 +173,10 @@
173
173
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N);
174
174
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent;
175
175
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-L1);
176
- --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0;
177
- --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0;
178
- --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0;
179
- --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0;
176
+ --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0px;
177
+ --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0px;
178
+ --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0px;
179
+ --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0px;
180
180
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
181
181
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L4);
182
182
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1);
@@ -189,10 +189,10 @@
189
189
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
190
190
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
191
191
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-L1);
192
- --lumx-navigation-item-emphasis-low-state-active-border-top-width: 0;
193
- --lumx-navigation-item-emphasis-low-state-active-border-right-width: 0;
194
- --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0;
195
- --lumx-navigation-item-emphasis-low-state-active-border-left-width: 0;
192
+ --lumx-navigation-item-emphasis-low-state-active-border-top-width: 0px;
193
+ --lumx-navigation-item-emphasis-low-state-active-border-right-width: 0px;
194
+ --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0px;
195
+ --lumx-navigation-item-emphasis-low-state-active-border-left-width: 0px;
196
196
  --lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
197
197
  --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L4);
198
198
  --lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1);
@@ -205,11 +205,11 @@
205
205
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N);
206
206
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
207
207
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-L1);
208
- --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 1px;
209
- --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 1px;
210
- --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 1px;
211
- --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 1px;
212
- --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
208
+ --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0px;
209
+ --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0px;
210
+ --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0px;
211
+ --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0px;
212
+ --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
213
213
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
214
214
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2);
215
215
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2);
@@ -221,11 +221,11 @@
221
221
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N);
222
222
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent;
223
223
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
224
- --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 1px;
225
- --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 1px;
226
- --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 1px;
227
- --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 1px;
228
- --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
224
+ --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0px;
225
+ --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0px;
226
+ --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0px;
227
+ --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0px;
228
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
229
229
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
230
230
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2);
231
231
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2);
@@ -237,11 +237,11 @@
237
237
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
238
238
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
239
239
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
240
- --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 1px;
241
- --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 1px;
242
- --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 1px;
243
- --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 1px;
244
- --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
240
+ --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0px;
241
+ --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0px;
242
+ --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0px;
243
+ --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0px;
244
+ --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
245
245
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
246
246
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2);
247
247
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2);
@@ -253,15 +253,15 @@
253
253
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
254
254
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
255
255
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
256
- --lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px;
257
- --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
258
- --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
259
- --lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 1px;
260
- --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
261
- --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
262
- --lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px;
263
- --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
264
- --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L5);
256
+ --lumx-side-navigation-item-emphasis-selected-state-default-border-width: 0;
257
+ --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: transparent;
258
+ --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
259
+ --lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 0;
260
+ --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: transparent;
261
+ --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
262
+ --lumx-side-navigation-item-emphasis-selected-state-active-border-width: 0;
263
+ --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: transparent;
264
+ --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
265
265
  --lumx-tabs-link-height: 48px;
266
266
  --lumx-tabs-link-border-radius: 0;
267
267
  --lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;