@lumx/core 3.9.5 → 3.9.6-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 (14) hide show
  1. package/css/design-tokens.css +52 -28
  2. package/js/constants/design-tokens.js +381 -39
  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 +195 -39
  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 +116 -28
  10. package/scss/components/chip/_index.scss +75 -30
  11. package/scss/components/list/_mixins.scss +10 -6
  12. package/scss/components/navigation/_index.scss +43 -134
  13. package/scss/components/side-navigation/_index.scss +1 -1
  14. package/scss/core/state/_mixins.scss +35 -8
package/css/design-tokens.css CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  /**
4
4
  * Do not edit directly
5
- * Generated on Tue, 19 Mar 2024 13:36:08 GMT
5
+ * Generated on Tue, 03 Dec 2024 14:32:53 GMT
6
6
  */
7
7
 
8
8
  :root {
@@ -81,29 +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: var(--lumx-spacing-unit-big);
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;
87
+ --lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
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: 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: var(--lumx-spacing-unit-big);
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;
95
+ --lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
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: 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: var(--lumx-spacing-unit-big);
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;
103
+ --lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
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: transparent;
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-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);
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: 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-L5);
107
122
  --lumx-material-button-text-transform: none;
108
123
  --lumx-material-checkbox-wrapper-size: 20px;
109
124
  --lumx-material-checkbox-control-size: 16px;
@@ -190,11 +205,11 @@
190
205
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N);
191
206
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
192
207
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-L1);
193
- --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0;
194
- --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0;
195
- --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0;
196
- --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0;
197
- --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);
198
213
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
199
214
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2);
200
215
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2);
@@ -206,11 +221,11 @@
206
221
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N);
207
222
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent;
208
223
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
209
- --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0;
210
- --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0;
211
- --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0;
212
- --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0;
213
- --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);
214
229
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
215
230
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2);
216
231
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2);
@@ -222,11 +237,11 @@
222
237
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
223
238
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
224
239
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
225
- --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0;
226
- --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0;
227
- --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0;
228
- --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0;
229
- --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);
230
245
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
231
246
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2);
232
247
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2);
@@ -238,6 +253,15 @@
238
253
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
239
254
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
240
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);
241
265
  --lumx-tabs-link-height: 48px;
242
266
  --lumx-tabs-link-border-radius: 0;
243
267
  --lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;