@lumx/core 3.9.6 → 3.9.7-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 (9) hide show
  1. package/css/design-tokens.css +61 -61
  2. package/js/constants/design-tokens.js +251 -111
  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 +167 -111
  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
package/css/design-tokens.css CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  /**
4
4
  * Do not edit directly
5
- * Generated on Fri, 06 Dec 2024 13:46:59 GMT
5
+ * Generated on Mon, 16 Dec 2024 14:41:27 GMT
6
6
  */
7
7
 
8
8
  :root {
@@ -81,44 +81,44 @@
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: 16px; /* deprecated (use base emphasis padding) */
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);
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);
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: transparent;
88
- --lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
87
+ --lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
88
+ --lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6);
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: transparent;
90
+ --lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
91
91
  --lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
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);
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);
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: transparent;
96
- --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
95
+ --lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
96
+ --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
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: transparent;
98
+ --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
99
99
  --lumx-button-emphasis-selected-state-active-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
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);
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);
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: transparent;
104
- --lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
103
+ --lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
104
+ --lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
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: 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
- --lumx-chip-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
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);
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);
111
+ --lumx-chip-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6);
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);
115
115
  --lumx-chip-emphasis-selected-state-hover-theme-dark-border-color: transparent;
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: 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
- --lumx-chip-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
116
+ --lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
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);
121
+ --lumx-chip-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
122
122
  --lumx-material-button-text-transform: none;
123
123
  --lumx-material-checkbox-wrapper-size: 20px;
124
124
  --lumx-material-checkbox-control-size: 16px;
@@ -205,63 +205,63 @@
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: 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);
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);
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);
216
216
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent;
217
217
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2);
218
- --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
218
+ --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6);
219
219
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
220
220
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N);
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: 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);
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);
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);
232
- --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(--lumx-color-primary-L4);
232
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(--lumx-color-primary-L5);
233
233
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2);
234
- --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
234
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
235
235
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
236
236
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N);
237
237
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
238
- --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
238
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
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: 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);
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);
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);
248
- --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(--lumx-color-primary-L3);
248
+ --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(--lumx-color-primary-L4);
249
249
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2);
250
- --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
250
+ --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
251
251
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
252
252
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N);
253
253
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
254
- --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
254
+ --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
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: 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);
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-L4);
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;