@czi-sds/components 24.0.0 → 24.2.0

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/README.md +2 -2
  2. package/dist/index.cjs.d.ts +137 -24
  3. package/dist/index.cjs.js +214 -174
  4. package/dist/index.esm.d.ts +137 -24
  5. package/dist/index.esm.js +215 -175
  6. package/dist/tailwind.json +20 -14
  7. package/dist/variables.css +20 -14
  8. package/dist/variables.scss +20 -14
  9. package/package.json +3 -6
package/dist/tailwind.json CHANGED
@@ -2734,7 +2734,7 @@
2734
2734
  "sds-color-primitive-blue-700": "#cde3ff",
2735
2735
  "sds-color-primitive-blue-800": "#e2eeff",
2736
2736
  "sds-color-primitive-gray-50": "#000000",
2737
- "sds-color-primitive-gray-75": "#101010",
2737
+ "sds-color-primitive-gray-75": "#1b1b1b",
2738
2738
  "sds-color-primitive-gray-100": "#333333",
2739
2739
  "sds-color-primitive-gray-200": "#494949",
2740
2740
  "sds-color-primitive-gray-300": "#696969",
@@ -2815,9 +2815,9 @@
2815
2815
  "sds-color-semantic-accent-text-action": "#beb5ff",
2816
2816
  "sds-color-semantic-accent-text-action-hover": "#dcd9ff",
2817
2817
  "sds-color-semantic-accent-text-action-pressed": "#f1f0ff",
2818
- "sds-color-semantic-base-background-primary": "#101010",
2819
- "sds-color-semantic-base-background-primary-dark": "#101010",
2820
- "sds-color-semantic-base-background-primary-inverse": "#101010",
2818
+ "sds-color-semantic-base-background-primary": "#000000",
2819
+ "sds-color-semantic-base-background-primary-dark": "#000000",
2820
+ "sds-color-semantic-base-background-primary-inverse": "#1b1b1b",
2821
2821
  "sds-color-semantic-base-background-secondary": "#33333399",
2822
2822
  "sds-color-semantic-base-background-secondary-dark": "#33333399",
2823
2823
  "sds-color-semantic-base-background-secondary-inverse": "#33333399",
@@ -2833,20 +2833,21 @@
2833
2833
  "sds-color-semantic-base-border-primary-on-dark": "#cdcdcd",
2834
2834
  "sds-color-semantic-base-border-primary-inverse": "#cdcdcd",
2835
2835
  "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
2836
- "sds-color-semantic-base-border-secondary": "#696969",
2836
+ "sds-color-semantic-base-border-secondary": "#696969b3",
2837
+ "sds-color-semantic-base-border-highlight": "#ffffff1a",
2837
2838
  "sds-color-semantic-base-border-secondary-on-dark": "#696969",
2838
2839
  "sds-color-semantic-base-divider": "#494949",
2839
2840
  "sds-color-semantic-base-divider-on-dark": "#494949",
2840
2841
  "sds-color-semantic-base-divider-inverse": "#494949",
2841
- "sds-color-semantic-base-fill-disabled": "#333333",
2842
+ "sds-color-semantic-base-fill-disabled": "#1b1b1b",
2842
2843
  "sds-color-semantic-base-fill-primary-interaction": "#69696952",
2843
- "sds-color-semantic-base-fill-primary-interaction-on-dark": "#69696952",
2844
+ "sds-color-semantic-base-fill-primary-interaction-on-dark": "#6969693d",
2844
2845
  "sds-color-semantic-base-fill-hover-inverse": "#69696952",
2845
2846
  "sds-color-semantic-base-fill-open-inverse": "#69696952",
2846
- "sds-color-semantic-base-fill-primary-pressed": "#69696966",
2847
+ "sds-color-semantic-base-fill-primary-pressed": "#69696957",
2847
2848
  "sds-color-semantic-base-fill-primary-pressed-on-dark": "#69696966",
2848
2849
  "sds-color-semantic-base-fill-pressed-inverse": "#69696952",
2849
- "sds-color-semantic-base-fill-primary": "#333333",
2850
+ "sds-color-semantic-base-fill-primary": "#1b1b1b",
2850
2851
  "sds-color-semantic-base-fill-selected": "#ffffff",
2851
2852
  "sds-color-semantic-base-fill-secondary": "#494949",
2852
2853
  "sds-color-semantic-base-fill-secondary-interaction": "#94949442",
@@ -2854,7 +2855,7 @@
2854
2855
  "sds-color-semantic-base-fill-secondary-on-dark": "#494949",
2855
2856
  "sds-color-semantic-base-fill-secondary-interaction-on-dark": "#94949457",
2856
2857
  "sds-color-semantic-base-fill-secondary-pressed-on-dark": "#94949475",
2857
- "sds-color-semantic-base-fill-disabled-on-dark": "#333333",
2858
+ "sds-color-semantic-base-fill-disabled-on-dark": "#1b1b1b",
2858
2859
  "sds-color-semantic-base-ornament-disabled": "#696969",
2859
2860
  "sds-color-semantic-base-ornament-disabled-on-dark": "#696969",
2860
2861
  "sds-color-semantic-base-ornament-disabled-inverse": "#696969",
@@ -2863,15 +2864,17 @@
2863
2864
  "sds-color-semantic-base-ornament-primary-on-dark": "#ffffff",
2864
2865
  "sds-color-semantic-base-ornament-primary-inverse": "#000000",
2865
2866
  "sds-color-semantic-base-ornament-secondary": "#cdcdcd",
2867
+ "sds-color-semantic-base-ornament-tertiary": "#696969",
2866
2868
  "sds-color-semantic-base-ornament-secondary-interaction": "#ffffff",
2867
2869
  "sds-color-semantic-base-ornament-secondary-interaction-on-dark": "#ffffff",
2868
2870
  "sds-color-semantic-base-ornament-secondary-hover-inverse": "#ffffff",
2869
2871
  "sds-color-semantic-base-ornament-secondary-on-dark": "#cdcdcd",
2870
2872
  "sds-color-semantic-base-ornament-secondary-inverse": "#cdcdcd",
2871
2873
  "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#ffffff",
2872
- "sds-color-semantic-base-surface-primary": "#333333",
2873
- "sds-color-semantic-base-surface-secondary": "#69696952",
2874
- "sds-color-semantic-base-surface-primary-dark": "#333333",
2874
+ "sds-color-semantic-base-surface-primary": "#1b1b1b",
2875
+ "sds-color-semantic-base-surface-secondary": "#333333a3",
2876
+ "sds-color-semantic-base-surface-tertiary": "#333333",
2877
+ "sds-color-semantic-base-surface-primary-dark": "#1b1b1b",
2875
2878
  "sds-color-semantic-base-surface-inverse": "#333333",
2876
2879
  "sds-color-semantic-base-text-disabled": "#696969",
2877
2880
  "sds-color-semantic-base-text-disabled-on-dark": "#696969",
@@ -3092,7 +3095,8 @@
3092
3095
  "sds-color-semantic-base-border-primary-on-dark": "#c3c3c3",
3093
3096
  "sds-color-semantic-base-border-primary-inverse": "#c3c3c3",
3094
3097
  "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
3095
- "sds-color-semantic-base-border-secondary": "#c3c3c3",
3098
+ "sds-color-semantic-base-border-secondary": "#c3c3c3b3",
3099
+ "sds-color-semantic-base-border-highlight": "#0000001a",
3096
3100
  "sds-color-semantic-base-border-secondary-on-dark": "#767676",
3097
3101
  "sds-color-semantic-base-divider": "#dfdfdf",
3098
3102
  "sds-color-semantic-base-divider-on-dark": "#3b3b3b",
@@ -3122,6 +3126,7 @@
3122
3126
  "sds-color-semantic-base-ornament-primary-on-dark": "#ffffff",
3123
3127
  "sds-color-semantic-base-ornament-primary-inverse": "#ffffff",
3124
3128
  "sds-color-semantic-base-ornament-secondary": "#767676",
3129
+ "sds-color-semantic-base-ornament-tertiary": "#c3c3c3",
3125
3130
  "sds-color-semantic-base-ornament-secondary-interaction": "#000000",
3126
3131
  "sds-color-semantic-base-ornament-secondary-interaction-on-dark": "#ffffff",
3127
3132
  "sds-color-semantic-base-ornament-secondary-hover-inverse": "#ffffff",
@@ -3130,6 +3135,7 @@
3130
3135
  "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#ffffff",
3131
3136
  "sds-color-semantic-base-surface-primary": "#ffffff",
3132
3137
  "sds-color-semantic-base-surface-secondary": "#c3c3c333",
3138
+ "sds-color-semantic-base-surface-tertiary": "#dfdfdf",
3133
3139
  "sds-color-semantic-base-surface-primary-dark": "#000000",
3134
3140
  "sds-color-semantic-base-surface-inverse": "#000000",
3135
3141
  "sds-color-semantic-base-text-disabled": "#c3c3c3",
package/dist/variables.css CHANGED
@@ -147,7 +147,8 @@
147
147
  --sds-color-semantic-base-border-primary-on-dark: #c3c3c3;
148
148
  --sds-color-semantic-base-border-primary-inverse: #c3c3c3;
149
149
  --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
150
- --sds-color-semantic-base-border-secondary: #c3c3c3;
150
+ --sds-color-semantic-base-border-secondary: #c3c3c3b3;
151
+ --sds-color-semantic-base-border-highlight: #0000001a;
151
152
  --sds-color-semantic-base-border-secondary-on-dark: #767676;
152
153
  --sds-color-semantic-base-divider: #dfdfdf;
153
154
  --sds-color-semantic-base-divider-on-dark: #3b3b3b;
@@ -177,6 +178,7 @@
177
178
  --sds-color-semantic-base-ornament-primary-on-dark: #ffffff;
178
179
  --sds-color-semantic-base-ornament-primary-inverse: #ffffff;
179
180
  --sds-color-semantic-base-ornament-secondary: #767676;
181
+ --sds-color-semantic-base-ornament-tertiary: #c3c3c3;
180
182
  --sds-color-semantic-base-ornament-secondary-interaction: #000000;
181
183
  --sds-color-semantic-base-ornament-secondary-interaction-on-dark: #ffffff;
182
184
  --sds-color-semantic-base-ornament-secondary-hover-inverse: #ffffff;
@@ -185,6 +187,7 @@
185
187
  --sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
186
188
  --sds-color-semantic-base-surface-primary: #ffffff;
187
189
  --sds-color-semantic-base-surface-secondary: #c3c3c333;
190
+ --sds-color-semantic-base-surface-tertiary: #dfdfdf;
188
191
  --sds-color-semantic-base-surface-primary-dark: #000000;
189
192
  --sds-color-semantic-base-surface-inverse: #000000;
190
193
  --sds-color-semantic-base-text-disabled: #c3c3c3;
@@ -1093,7 +1096,7 @@
1093
1096
  --sds-color-primitive-blue-700: #cde3ff;
1094
1097
  --sds-color-primitive-blue-800: #e2eeff;
1095
1098
  --sds-color-primitive-gray-50: #000000;
1096
- --sds-color-primitive-gray-75: #101010;
1099
+ --sds-color-primitive-gray-75: #1b1b1b;
1097
1100
  --sds-color-primitive-gray-100: #333333;
1098
1101
  --sds-color-primitive-gray-200: #494949;
1099
1102
  --sds-color-primitive-gray-300: #696969;
@@ -1174,9 +1177,9 @@
1174
1177
  --sds-color-semantic-accent-text-action: #beb5ff;
1175
1178
  --sds-color-semantic-accent-text-action-hover: #dcd9ff;
1176
1179
  --sds-color-semantic-accent-text-action-pressed: #f1f0ff;
1177
- --sds-color-semantic-base-background-primary: #101010;
1178
- --sds-color-semantic-base-background-primary-dark: #101010;
1179
- --sds-color-semantic-base-background-primary-inverse: #101010;
1180
+ --sds-color-semantic-base-background-primary: #000000;
1181
+ --sds-color-semantic-base-background-primary-dark: #000000;
1182
+ --sds-color-semantic-base-background-primary-inverse: #1b1b1b;
1180
1183
  --sds-color-semantic-base-background-secondary: #33333399;
1181
1184
  --sds-color-semantic-base-background-secondary-dark: #33333399;
1182
1185
  --sds-color-semantic-base-background-secondary-inverse: #33333399;
@@ -1192,20 +1195,21 @@
1192
1195
  --sds-color-semantic-base-border-primary-on-dark: #cdcdcd;
1193
1196
  --sds-color-semantic-base-border-primary-inverse: #cdcdcd;
1194
1197
  --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
1195
- --sds-color-semantic-base-border-secondary: #696969;
1198
+ --sds-color-semantic-base-border-secondary: #696969b3;
1199
+ --sds-color-semantic-base-border-highlight: #ffffff1a;
1196
1200
  --sds-color-semantic-base-border-secondary-on-dark: #696969;
1197
1201
  --sds-color-semantic-base-divider: #494949;
1198
1202
  --sds-color-semantic-base-divider-on-dark: #494949;
1199
1203
  --sds-color-semantic-base-divider-inverse: #494949;
1200
- --sds-color-semantic-base-fill-disabled: #333333;
1204
+ --sds-color-semantic-base-fill-disabled: #1b1b1b;
1201
1205
  --sds-color-semantic-base-fill-primary-interaction: #69696952;
1202
- --sds-color-semantic-base-fill-primary-interaction-on-dark: #69696952;
1206
+ --sds-color-semantic-base-fill-primary-interaction-on-dark: #6969693d;
1203
1207
  --sds-color-semantic-base-fill-hover-inverse: #69696952;
1204
1208
  --sds-color-semantic-base-fill-open-inverse: #69696952;
1205
- --sds-color-semantic-base-fill-primary-pressed: #69696966;
1209
+ --sds-color-semantic-base-fill-primary-pressed: #69696957;
1206
1210
  --sds-color-semantic-base-fill-primary-pressed-on-dark: #69696966;
1207
1211
  --sds-color-semantic-base-fill-pressed-inverse: #69696952;
1208
- --sds-color-semantic-base-fill-primary: #333333;
1212
+ --sds-color-semantic-base-fill-primary: #1b1b1b;
1209
1213
  --sds-color-semantic-base-fill-selected: #ffffff;
1210
1214
  --sds-color-semantic-base-fill-secondary: #494949;
1211
1215
  --sds-color-semantic-base-fill-secondary-interaction: #94949442;
@@ -1213,7 +1217,7 @@
1213
1217
  --sds-color-semantic-base-fill-secondary-on-dark: #494949;
1214
1218
  --sds-color-semantic-base-fill-secondary-interaction-on-dark: #94949457;
1215
1219
  --sds-color-semantic-base-fill-secondary-pressed-on-dark: #94949475;
1216
- --sds-color-semantic-base-fill-disabled-on-dark: #333333;
1220
+ --sds-color-semantic-base-fill-disabled-on-dark: #1b1b1b;
1217
1221
  --sds-color-semantic-base-ornament-disabled: #696969;
1218
1222
  --sds-color-semantic-base-ornament-disabled-on-dark: #696969;
1219
1223
  --sds-color-semantic-base-ornament-disabled-inverse: #696969;
@@ -1222,15 +1226,17 @@
1222
1226
  --sds-color-semantic-base-ornament-primary-on-dark: #ffffff;
1223
1227
  --sds-color-semantic-base-ornament-primary-inverse: #000000;
1224
1228
  --sds-color-semantic-base-ornament-secondary: #cdcdcd;
1229
+ --sds-color-semantic-base-ornament-tertiary: #696969;
1225
1230
  --sds-color-semantic-base-ornament-secondary-interaction: #ffffff;
1226
1231
  --sds-color-semantic-base-ornament-secondary-interaction-on-dark: #ffffff;
1227
1232
  --sds-color-semantic-base-ornament-secondary-hover-inverse: #ffffff;
1228
1233
  --sds-color-semantic-base-ornament-secondary-on-dark: #cdcdcd;
1229
1234
  --sds-color-semantic-base-ornament-secondary-inverse: #cdcdcd;
1230
1235
  --sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
1231
- --sds-color-semantic-base-surface-primary: #333333;
1232
- --sds-color-semantic-base-surface-secondary: #69696952;
1233
- --sds-color-semantic-base-surface-primary-dark: #333333;
1236
+ --sds-color-semantic-base-surface-primary: #1b1b1b;
1237
+ --sds-color-semantic-base-surface-secondary: #333333a3;
1238
+ --sds-color-semantic-base-surface-tertiary: #333333;
1239
+ --sds-color-semantic-base-surface-primary-dark: #1b1b1b;
1234
1240
  --sds-color-semantic-base-surface-inverse: #333333;
1235
1241
  --sds-color-semantic-base-text-disabled: #696969;
1236
1242
  --sds-color-semantic-base-text-disabled-on-dark: #696969;
package/dist/variables.scss CHANGED
@@ -92,7 +92,7 @@ $sds-color-primitive-blue-800-dark: #e2eeff;
92
92
  $sds-color-primitive-gray-50: #ffffff;
93
93
  $sds-color-primitive-gray-50-dark: #000000;
94
94
  $sds-color-primitive-gray-75: #f8f8f8;
95
- $sds-color-primitive-gray-75-dark: #101010;
95
+ $sds-color-primitive-gray-75-dark: #1b1b1b;
96
96
  $sds-color-primitive-gray-100: #ededed;
97
97
  $sds-color-primitive-gray-100-dark: #333333;
98
98
  $sds-color-primitive-gray-200: #dfdfdf;
@@ -254,11 +254,11 @@ $sds-color-semantic-accent-text-action-hover-dark: #dcd9ff;
254
254
  $sds-color-semantic-accent-text-action-pressed: #330296;
255
255
  $sds-color-semantic-accent-text-action-pressed-dark: #f1f0ff;
256
256
  $sds-color-semantic-base-background-primary: #ffffff;
257
- $sds-color-semantic-base-background-primary-dark: #101010;
258
257
  $sds-color-semantic-base-background-primary-dark: #000000;
259
- $sds-color-semantic-base-background-primary-dark-dark: #101010;
258
+ $sds-color-semantic-base-background-primary-dark: #000000;
259
+ $sds-color-semantic-base-background-primary-dark-dark: #000000;
260
260
  $sds-color-semantic-base-background-primary-inverse: #000000;
261
- $sds-color-semantic-base-background-primary-inverse-dark: #101010;
261
+ $sds-color-semantic-base-background-primary-inverse-dark: #1b1b1b;
262
262
  $sds-color-semantic-base-background-secondary: #ededed66;
263
263
  $sds-color-semantic-base-background-secondary-dark: #33333399;
264
264
  $sds-color-semantic-base-background-secondary-dark: #3b3b3b9e;
@@ -289,8 +289,10 @@ $sds-color-semantic-base-border-primary-inverse: #c3c3c3;
289
289
  $sds-color-semantic-base-border-primary-inverse-dark: #cdcdcd;
290
290
  $sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
291
291
  $sds-color-semantic-base-border-primary-pressed-inverse-dark: #ffffff;
292
- $sds-color-semantic-base-border-secondary: #c3c3c3;
293
- $sds-color-semantic-base-border-secondary-dark: #696969;
292
+ $sds-color-semantic-base-border-secondary: #c3c3c3b3;
293
+ $sds-color-semantic-base-border-secondary-dark: #696969b3;
294
+ $sds-color-semantic-base-border-highlight: #0000001a;
295
+ $sds-color-semantic-base-border-highlight-dark: #ffffff1a;
294
296
  $sds-color-semantic-base-border-secondary-on-dark: #767676;
295
297
  $sds-color-semantic-base-border-secondary-on-dark-dark: #696969;
296
298
  $sds-color-semantic-base-divider: #dfdfdf;
@@ -300,23 +302,23 @@ $sds-color-semantic-base-divider-on-dark-dark: #494949;
300
302
  $sds-color-semantic-base-divider-inverse: #3b3b3b;
301
303
  $sds-color-semantic-base-divider-inverse-dark: #494949;
302
304
  $sds-color-semantic-base-fill-disabled: #ededed;
303
- $sds-color-semantic-base-fill-disabled-dark: #333333;
305
+ $sds-color-semantic-base-fill-disabled-dark: #1b1b1b;
304
306
  $sds-color-semantic-base-fill-primary-interaction: #c3c3c333;
305
307
  $sds-color-semantic-base-fill-primary-interaction-dark: #69696952;
306
308
  $sds-color-semantic-base-fill-primary-interaction-on-dark: #c3c3c333;
307
- $sds-color-semantic-base-fill-primary-interaction-on-dark-dark: #69696952;
309
+ $sds-color-semantic-base-fill-primary-interaction-on-dark-dark: #6969693d;
308
310
  $sds-color-semantic-base-fill-hover-inverse: #c3c3c333;
309
311
  $sds-color-semantic-base-fill-hover-inverse-dark: #69696952;
310
312
  $sds-color-semantic-base-fill-open-inverse: #c3c3c357;
311
313
  $sds-color-semantic-base-fill-open-inverse-dark: #69696952;
312
314
  $sds-color-semantic-base-fill-primary-pressed: #c3c3c34d;
313
- $sds-color-semantic-base-fill-primary-pressed-dark: #69696966;
315
+ $sds-color-semantic-base-fill-primary-pressed-dark: #69696957;
314
316
  $sds-color-semantic-base-fill-primary-pressed-on-dark: #c3c3c33d;
315
317
  $sds-color-semantic-base-fill-primary-pressed-on-dark-dark: #69696966;
316
318
  $sds-color-semantic-base-fill-pressed-inverse: #c3c3c357;
317
319
  $sds-color-semantic-base-fill-pressed-inverse-dark: #69696952;
318
320
  $sds-color-semantic-base-fill-primary: #ffffff;
319
- $sds-color-semantic-base-fill-primary-dark: #333333;
321
+ $sds-color-semantic-base-fill-primary-dark: #1b1b1b;
320
322
  $sds-color-semantic-base-fill-selected: #000000;
321
323
  $sds-color-semantic-base-fill-selected-dark: #ffffff;
322
324
  $sds-color-semantic-base-fill-secondary: #dfdfdf;
@@ -332,7 +334,7 @@ $sds-color-semantic-base-fill-secondary-interaction-on-dark-dark: #94949457;
332
334
  $sds-color-semantic-base-fill-secondary-pressed-on-dark: #a5a5a575;
333
335
  $sds-color-semantic-base-fill-secondary-pressed-on-dark-dark: #94949475;
334
336
  $sds-color-semantic-base-fill-disabled-on-dark: #3b3b3b;
335
- $sds-color-semantic-base-fill-disabled-on-dark-dark: #333333;
337
+ $sds-color-semantic-base-fill-disabled-on-dark-dark: #1b1b1b;
336
338
  $sds-color-semantic-base-ornament-disabled: #c3c3c3;
337
339
  $sds-color-semantic-base-ornament-disabled-dark: #696969;
338
340
  $sds-color-semantic-base-ornament-disabled-on-dark: #767676;
@@ -349,6 +351,8 @@ $sds-color-semantic-base-ornament-primary-inverse: #ffffff;
349
351
  $sds-color-semantic-base-ornament-primary-inverse-dark: #000000;
350
352
  $sds-color-semantic-base-ornament-secondary: #767676;
351
353
  $sds-color-semantic-base-ornament-secondary-dark: #cdcdcd;
354
+ $sds-color-semantic-base-ornament-tertiary: #c3c3c3;
355
+ $sds-color-semantic-base-ornament-tertiary-dark: #696969;
352
356
  $sds-color-semantic-base-ornament-secondary-interaction: #000000;
353
357
  $sds-color-semantic-base-ornament-secondary-interaction-dark: #ffffff;
354
358
  $sds-color-semantic-base-ornament-secondary-interaction-on-dark: #ffffff;
@@ -362,11 +366,13 @@ $sds-color-semantic-base-ornament-secondary-inverse-dark: #cdcdcd;
362
366
  $sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
363
367
  $sds-color-semantic-base-ornament-secondary-pressed-inverse-dark: #ffffff;
364
368
  $sds-color-semantic-base-surface-primary: #ffffff;
365
- $sds-color-semantic-base-surface-primary-dark: #333333;
369
+ $sds-color-semantic-base-surface-primary-dark: #1b1b1b;
366
370
  $sds-color-semantic-base-surface-secondary: #c3c3c333;
367
- $sds-color-semantic-base-surface-secondary-dark: #69696952;
371
+ $sds-color-semantic-base-surface-secondary-dark: #333333a3;
372
+ $sds-color-semantic-base-surface-tertiary: #dfdfdf;
373
+ $sds-color-semantic-base-surface-tertiary-dark: #333333;
368
374
  $sds-color-semantic-base-surface-primary-dark: #000000;
369
- $sds-color-semantic-base-surface-primary-dark-dark: #333333;
375
+ $sds-color-semantic-base-surface-primary-dark-dark: #1b1b1b;
370
376
  $sds-color-semantic-base-surface-inverse: #000000;
371
377
  $sds-color-semantic-base-surface-inverse-dark: #333333;
372
378
  $sds-color-semantic-base-text-disabled: #c3c3c3;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@czi-sds/components",
3
- "version": "24.0.0",
3
+ "version": "24.2.0",
4
4
  "main": "dist/index.cjs.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.cjs.d.ts",
@@ -17,7 +17,6 @@
17
17
  "build-watch": "rolldown -c --watch",
18
18
  "start": "start-storybook -p 6006",
19
19
  "build-storybook": "build-storybook -o docs-build",
20
- "test-storybook": "test-storybook",
21
20
  "lint": "concurrently \"../../node_modules/.bin/eslint src/**/*.{ts,tsx} --quiet --fix\" \"../../node_modules/.bin/stylelint --fix '**/*.{js,ts,tsx,css}'\" \"npm run type-check\"",
22
21
  "type-check": "tsc --noEmit",
23
22
  "test": "vitest run",
@@ -33,8 +32,6 @@
33
32
  "sd-generate-design-tokens": "yarn sd-generate-fonts && yarn sd-generate-colors && yarn sd-generate-corners && yarn sd-generate-spaces && yarn sd-generate-shadows && yarn sd-generate-icon-sizes && yarn sd-generate-breakpoints && yarn sd-generate-borders",
34
33
  "sd-build": "yarn sd-generate-design-tokens && node ./src/common/styles-dictionary/build.mjs && npx prettier --write 'src/common/styles-dictionary/**/*.{css,scss,json}'",
35
34
  "chromatic": "npx chromatic --exit-zero-on-changes --project-token=cad4aacbfeba",
36
- "storybook:axe": "yarn build-storybook && yarn storybook:axeOnly",
37
- "storybook:axeOnly": "axe-storybook --build-dir docs-build",
38
35
  "namespace-check": "tsc --p tsconfig-namespace-check.json"
39
36
  },
40
37
  "lint-staged": {
@@ -80,7 +77,7 @@
80
77
  "@types/node": "^24.3.0",
81
78
  "@types/react": "^18.2.46",
82
79
  "@types/react-dom": "^18.2.18",
83
- "style-dictionary": "^4.1.0",
80
+ "style-dictionary": "^5.5.0",
84
81
  "ts-node": "^10.9.2",
85
82
  "tsx": "^4.20.3",
86
83
  "typescript": "5.3.3"
@@ -88,5 +85,5 @@
88
85
  "dependencies": {
89
86
  "chroma-js": "^3.1.2"
90
87
  },
91
- "gitHead": "516baa06b91fa6c748cb2fae92b4c230117af9e7"
88
+ "gitHead": "90a8e57f0c92c4bdea1f0cb4d1cd417461c50280"
92
89
  }