@lumx/core 3.9.7-alpha.0 → 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 +15 -15
  2. package/js/constants/design-tokens.js +43 -43
  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 +43 -43
  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 +15 -15
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 {
@@ -85,7 +85,7 @@
85
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
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-L3);
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
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) */
@@ -93,7 +93,7 @@
93
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
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-L4);
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
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) */
@@ -101,24 +101,24 @@
101
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
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-L5);
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
106
  --lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
107
107
  --lumx-chip-emphasis-selected-state-default-border-width: 1px;
108
108
  --lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
109
109
  --lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
110
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);
111
+ --lumx-chip-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6);
112
112
  --lumx-chip-emphasis-selected-state-hover-border-width: 1px;
113
113
  --lumx-chip-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
114
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);
116
+ --lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
117
117
  --lumx-chip-emphasis-selected-state-active-border-width: 1px;
118
118
  --lumx-chip-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
119
119
  --lumx-chip-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
120
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);
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;
@@ -215,7 +215,7 @@
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);
@@ -229,13 +229,13 @@
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
240
  --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 1px;
241
241
  --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 1px;
@@ -245,13 +245,13 @@
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
256
  --lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px;
257
257
  --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
@@ -261,7 +261,7 @@
261
261
  --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
262
262
  --lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px;
263
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);
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;
package/js/constants/design-tokens.js CHANGED
@@ -94,7 +94,7 @@ __webpack_require__.r(__webpack_exports__);
94
94
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DESIGN_TOKENS", function() { return DESIGN_TOKENS; });
95
95
  /**
96
96
  * Do not edit directly
97
- * Generated on Fri, 06 Dec 2024 13:46:59 GMT
97
+ * Generated on Mon, 16 Dec 2024 14:41:27 GMT
98
98
  */
99
99
 
100
100
  var DESIGN_TOKENS = {
@@ -804,17 +804,17 @@ var DESIGN_TOKENS = {
804
804
  },
805
805
  'theme-dark': {
806
806
  'background-color': {
807
- value: 'var(--lumx-color-light-L3)',
807
+ value: 'var(--lumx-color-light-L6)',
808
808
  attributes: {
809
809
  hex: 'ffffff',
810
810
  rgb: {
811
811
  r: 255,
812
812
  g: 255,
813
813
  b: 255,
814
- a: 0.6
814
+ a: 0.1
815
815
  }
816
816
  },
817
- $aliasedFrom: 'color.light.L3'
817
+ $aliasedFrom: 'color.light.L6'
818
818
  },
819
819
  color: {
820
820
  value: 'var(--lumx-color-light-N)',
@@ -897,17 +897,17 @@ var DESIGN_TOKENS = {
897
897
  },
898
898
  'theme-dark': {
899
899
  'background-color': {
900
- value: 'var(--lumx-color-light-L4)',
900
+ value: 'var(--lumx-color-light-L5)',
901
901
  attributes: {
902
902
  hex: 'ffffff',
903
903
  rgb: {
904
904
  r: 255,
905
905
  g: 255,
906
906
  b: 255,
907
- a: 0.4
907
+ a: 0.2
908
908
  }
909
909
  },
910
- $aliasedFrom: 'color.light.L4'
910
+ $aliasedFrom: 'color.light.L5'
911
911
  },
912
912
  color: {
913
913
  value: 'var(--lumx-color-light-N)',
@@ -990,17 +990,17 @@ var DESIGN_TOKENS = {
990
990
  },
991
991
  'theme-dark': {
992
992
  'background-color': {
993
- value: 'var(--lumx-color-light-L5)',
993
+ value: 'var(--lumx-color-light-L4)',
994
994
  attributes: {
995
995
  hex: 'ffffff',
996
996
  rgb: {
997
997
  r: 255,
998
998
  g: 255,
999
999
  b: 255,
1000
- a: 0.2
1000
+ a: 0.4
1001
1001
  }
1002
1002
  },
1003
- $aliasedFrom: 'color.light.L5'
1003
+ $aliasedFrom: 'color.light.L4'
1004
1004
  },
1005
1005
  color: {
1006
1006
  value: 'var(--lumx-color-light-N)',
@@ -1081,17 +1081,17 @@ var DESIGN_TOKENS = {
1081
1081
  $aliasedFrom: 'color.light.N'
1082
1082
  },
1083
1083
  'background-color': {
1084
- value: 'var(--lumx-color-light-L3)',
1084
+ value: 'var(--lumx-color-light-L6)',
1085
1085
  attributes: {
1086
1086
  hex: 'ffffff',
1087
1087
  rgb: {
1088
1088
  r: 255,
1089
1089
  g: 255,
1090
1090
  b: 255,
1091
- a: 0.6
1091
+ a: 0.1
1092
1092
  }
1093
1093
  },
1094
- $aliasedFrom: 'color.light.L3'
1094
+ $aliasedFrom: 'color.light.L6'
1095
1095
  }
1096
1096
  }
1097
1097
  },
@@ -1132,17 +1132,17 @@ var DESIGN_TOKENS = {
1132
1132
  value: 'transparent'
1133
1133
  },
1134
1134
  'background-color': {
1135
- value: 'var(--lumx-color-light-L4)',
1135
+ value: 'var(--lumx-color-light-L5)',
1136
1136
  attributes: {
1137
1137
  hex: 'ffffff',
1138
1138
  rgb: {
1139
1139
  r: 255,
1140
1140
  g: 255,
1141
1141
  b: 255,
1142
- a: 0.4
1142
+ a: 0.2
1143
1143
  }
1144
1144
  },
1145
- $aliasedFrom: 'color.light.L4'
1145
+ $aliasedFrom: 'color.light.L5'
1146
1146
  }
1147
1147
  }
1148
1148
  },
@@ -1193,17 +1193,17 @@ var DESIGN_TOKENS = {
1193
1193
  $aliasedFrom: 'color.light.N'
1194
1194
  },
1195
1195
  'background-color': {
1196
- value: 'var(--lumx-color-light-L5)',
1196
+ value: 'var(--lumx-color-light-L4)',
1197
1197
  attributes: {
1198
1198
  hex: 'ffffff',
1199
1199
  rgb: {
1200
1200
  r: 255,
1201
1201
  g: 255,
1202
1202
  b: 255,
1203
- a: 0.2
1203
+ a: 0.4
1204
1204
  }
1205
1205
  },
1206
- $aliasedFrom: 'color.light.L5'
1206
+ $aliasedFrom: 'color.light.L4'
1207
1207
  }
1208
1208
  }
1209
1209
  }
@@ -1982,17 +1982,17 @@ var DESIGN_TOKENS = {
1982
1982
  },
1983
1983
  'theme-dark': {
1984
1984
  'background-color': {
1985
- value: 'var(--lumx-color-light-L3)',
1985
+ value: 'var(--lumx-color-light-L6)',
1986
1986
  attributes: {
1987
1987
  hex: 'ffffff',
1988
1988
  rgb: {
1989
1989
  r: 255,
1990
1990
  g: 255,
1991
1991
  b: 255,
1992
- a: 0.6
1992
+ a: 0.1
1993
1993
  }
1994
1994
  },
1995
- $aliasedFrom: 'color.light.L3'
1995
+ $aliasedFrom: 'color.light.L6'
1996
1996
  },
1997
1997
  'border-color': {
1998
1998
  value: 'var(--lumx-color-light-N)',
@@ -2128,17 +2128,17 @@ var DESIGN_TOKENS = {
2128
2128
  $aliasedFrom: 'color.primary.D2'
2129
2129
  },
2130
2130
  'chevron-background-color': {
2131
- value: 'var(--lumx-color-primary-L4)',
2131
+ value: 'var(--lumx-color-primary-L5)',
2132
2132
  attributes: {
2133
2133
  hex: '245be7',
2134
2134
  rgb: {
2135
2135
  r: 36,
2136
2136
  g: 91,
2137
2137
  b: 231,
2138
- a: 0.2
2138
+ a: 0.1
2139
2139
  }
2140
2140
  },
2141
- $aliasedFrom: 'color.primary.L4'
2141
+ $aliasedFrom: 'color.primary.L5'
2142
2142
  },
2143
2143
  'chevron-color': {
2144
2144
  value: 'var(--lumx-color-primary-D2)',
@@ -2156,17 +2156,17 @@ var DESIGN_TOKENS = {
2156
2156
  },
2157
2157
  'theme-dark': {
2158
2158
  'background-color': {
2159
- value: 'var(--lumx-color-light-L4)',
2159
+ value: 'var(--lumx-color-light-L5)',
2160
2160
  attributes: {
2161
2161
  hex: 'ffffff',
2162
2162
  rgb: {
2163
2163
  r: 255,
2164
2164
  g: 255,
2165
2165
  b: 255,
2166
- a: 0.4
2166
+ a: 0.2
2167
2167
  }
2168
2168
  },
2169
- $aliasedFrom: 'color.light.L4'
2169
+ $aliasedFrom: 'color.light.L5'
2170
2170
  },
2171
2171
  'border-color': {
2172
2172
  value: 'var(--lumx-color-light-N)',
@@ -2208,17 +2208,17 @@ var DESIGN_TOKENS = {
2208
2208
  $aliasedFrom: 'color.light.N'
2209
2209
  },
2210
2210
  'chevron-background-color': {
2211
- value: 'var(--lumx-color-light-L4)',
2211
+ value: 'var(--lumx-color-light-L5)',
2212
2212
  attributes: {
2213
2213
  hex: 'ffffff',
2214
2214
  rgb: {
2215
2215
  r: 255,
2216
2216
  g: 255,
2217
2217
  b: 255,
2218
- a: 0.4
2218
+ a: 0.2
2219
2219
  }
2220
2220
  },
2221
- $aliasedFrom: 'color.light.L4'
2221
+ $aliasedFrom: 'color.light.L5'
2222
2222
  },
2223
2223
  'chevron-color': {
2224
2224
  value: 'var(--lumx-color-light-N)',
@@ -2312,17 +2312,17 @@ var DESIGN_TOKENS = {
2312
2312
  $aliasedFrom: 'color.primary.D2'
2313
2313
  },
2314
2314
  'chevron-background-color': {
2315
- value: 'var(--lumx-color-primary-L3)',
2315
+ value: 'var(--lumx-color-primary-L4)',
2316
2316
  attributes: {
2317
2317
  hex: '245be7',
2318
2318
  rgb: {
2319
2319
  r: 36,
2320
2320
  g: 91,
2321
2321
  b: 231,
2322
- a: 0.4
2322
+ a: 0.2
2323
2323
  }
2324
2324
  },
2325
- $aliasedFrom: 'color.primary.L3'
2325
+ $aliasedFrom: 'color.primary.L4'
2326
2326
  },
2327
2327
  'chevron-color': {
2328
2328
  value: 'var(--lumx-color-primary-D2)',
@@ -2340,17 +2340,17 @@ var DESIGN_TOKENS = {
2340
2340
  },
2341
2341
  'theme-dark': {
2342
2342
  'background-color': {
2343
- value: 'var(--lumx-color-light-L5)',
2343
+ value: 'var(--lumx-color-light-L4)',
2344
2344
  attributes: {
2345
2345
  hex: 'ffffff',
2346
2346
  rgb: {
2347
2347
  r: 255,
2348
2348
  g: 255,
2349
2349
  b: 255,
2350
- a: 0.2
2350
+ a: 0.4
2351
2351
  }
2352
2352
  },
2353
- $aliasedFrom: 'color.light.L5'
2353
+ $aliasedFrom: 'color.light.L4'
2354
2354
  },
2355
2355
  'border-color': {
2356
2356
  value: 'var(--lumx-color-light-N)',
@@ -2392,17 +2392,17 @@ var DESIGN_TOKENS = {
2392
2392
  $aliasedFrom: 'color.light.N'
2393
2393
  },
2394
2394
  'chevron-background-color': {
2395
- value: 'var(--lumx-color-light-L5)',
2395
+ value: 'var(--lumx-color-light-L4)',
2396
2396
  attributes: {
2397
2397
  hex: 'ffffff',
2398
2398
  rgb: {
2399
2399
  r: 255,
2400
2400
  g: 255,
2401
2401
  b: 255,
2402
- a: 0.2
2402
+ a: 0.4
2403
2403
  }
2404
2404
  },
2405
- $aliasedFrom: 'color.light.L5'
2405
+ $aliasedFrom: 'color.light.L4'
2406
2406
  },
2407
2407
  'chevron-color': {
2408
2408
  value: 'var(--lumx-color-light-N)',
@@ -2510,17 +2510,17 @@ var DESIGN_TOKENS = {
2510
2510
  $aliasedFrom: 'color.primary.N'
2511
2511
  },
2512
2512
  'background-color': {
2513
- value: 'var(--lumx-color-primary-L5)',
2513
+ value: 'var(--lumx-color-primary-L4)',
2514
2514
  attributes: {
2515
2515
  hex: '245be7',
2516
2516
  rgb: {
2517
2517
  r: 36,
2518
2518
  g: 91,
2519
2519
  b: 231,
2520
- a: 0.1
2520
+ a: 0.2
2521
2521
  }
2522
2522
  },
2523
- $aliasedFrom: 'color.primary.L5'
2523
+ $aliasedFrom: 'color.primary.L4'
2524
2524
  }
2525
2525
  }
2526
2526
  }