@lumx/core 3.9.6-alpha.7 → 3.9.6-alpha.9

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 (10) hide show
  1. package/css/design-tokens.css +47 -47
  2. package/js/constants/design-tokens.js +71 -211
  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 +71 -127
  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 +47 -47
  10. package/scss/components/side-navigation/_index.scss +2 -1
package/css/design-tokens.css CHANGED
@@ -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: 16px; /* deprecated (use base emphasis padding) */
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: 16px; /* deprecated (use base emphasis padding) */
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: 16px; /* deprecated (use base emphasis padding) */
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;
@@ -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;