@czi-sds/components 23.1.0 → 23.2.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/dist/index.cjs.d.ts +28 -17
  2. package/dist/index.cjs.js +442 -262
  3. package/dist/index.esm.d.ts +28 -17
  4. package/dist/index.esm.js +443 -264
  5. package/dist/tailwind.json +28 -38
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +29 -39
  8. package/dist/variables.scss +28 -38
  9. package/package.json +2 -2
package/dist/variables.css CHANGED
@@ -124,7 +124,7 @@
124
124
  --sds-color-semantic-base-background-primary-dark: #000000;
125
125
  --sds-color-semantic-base-background-primary-inverse: #000000;
126
126
  --sds-color-semantic-base-background-secondary: #ededed66;
127
- --sds-color-semantic-base-background-secondary-on-dark: #3b3b3b9e;
127
+ --sds-color-semantic-base-background-secondary-dark: #3b3b3b9e;
128
128
  --sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
129
129
  --sds-color-semantic-base-background-tertiary: #ededed;
130
130
  --sds-color-semantic-base-border-on-fill: #ffffff;
@@ -132,27 +132,23 @@
132
132
  --sds-color-semantic-base-border-primary-disabled: #c3c3c3;
133
133
  --sds-color-semantic-base-border-primary-disabled-on-dark: #767676;
134
134
  --sds-color-semantic-base-border-primary-disabled-inverse: #767676;
135
- --sds-color-semantic-base-border-primary-hover: #000000;
136
- --sds-color-semantic-base-border-primary-hover-on-dark: #ffffff;
135
+ --sds-color-semantic-base-border-primary-interaction: #000000;
136
+ --sds-color-semantic-base-border-primary-interaction-on-dark: #ffffff;
137
137
  --sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
138
138
  --sds-color-semantic-base-border-primary-on-dark: #c3c3c3;
139
139
  --sds-color-semantic-base-border-primary-inverse: #c3c3c3;
140
- --sds-color-semantic-base-border-primary-pressed: #000000;
141
- --sds-color-semantic-base-border-primary-pressed-on-dark: #ffffff;
142
140
  --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
143
141
  --sds-color-semantic-base-border-secondary: #c3c3c3;
144
142
  --sds-color-semantic-base-divider: #dfdfdf;
145
143
  --sds-color-semantic-base-divider-on-dark: #3b3b3b;
146
144
  --sds-color-semantic-base-divider-inverse: #3b3b3b;
147
- --sds-color-semantic-base-fill-disabled: #dfdfdf;
148
- --sds-color-semantic-base-fill-hover: #c3c3c333;
149
- --sds-color-semantic-base-fill-hover-on-dark: #c3c3c357;
150
- --sds-color-semantic-base-fill-hover-inverse: #c3c3c357;
151
- --sds-color-semantic-base-fill-open: #c3c3c333;
152
- --sds-color-semantic-base-fill-open-on-dark: #c3c3c357;
145
+ --sds-color-semantic-base-fill-disabled: #ededed;
146
+ --sds-color-semantic-base-fill-interaction: #c3c3c333;
147
+ --sds-color-semantic-base-fill-interaction-on-dark: #c3c3c333;
148
+ --sds-color-semantic-base-fill-hover-inverse: #c3c3c333;
153
149
  --sds-color-semantic-base-fill-open-inverse: #c3c3c357;
154
- --sds-color-semantic-base-fill-pressed: #c3c3c333;
155
- --sds-color-semantic-base-fill-pressed-on-dark: #c3c3c357;
150
+ --sds-color-semantic-base-fill-pressed: #c3c3c34d;
151
+ --sds-color-semantic-base-fill-pressed-on-dark: #c3c3c33d;
156
152
  --sds-color-semantic-base-fill-pressed-inverse: #c3c3c357;
157
153
  --sds-color-semantic-base-fill-primary: #ffffff;
158
154
  --sds-color-semantic-base-fill-selected: #000000;
@@ -164,16 +160,15 @@
164
160
  --sds-color-semantic-base-ornament-primary-on-dark: #ffffff;
165
161
  --sds-color-semantic-base-ornament-primary-inverse: #ffffff;
166
162
  --sds-color-semantic-base-ornament-secondary: #767676;
167
- --sds-color-semantic-base-ornament-secondary-hover: #000000;
168
- --sds-color-semantic-base-ornament-secondary-hover-on-dark: #ffffff;
163
+ --sds-color-semantic-base-ornament-secondary-interaction: #000000;
164
+ --sds-color-semantic-base-ornament-secondary-interaction-on-dark: #ffffff;
169
165
  --sds-color-semantic-base-ornament-secondary-hover-inverse: #ffffff;
170
166
  --sds-color-semantic-base-ornament-secondary-on-dark: #c3c3c3;
171
167
  --sds-color-semantic-base-ornament-secondary-inverse: #c3c3c3;
172
- --sds-color-semantic-base-ornament-secondary-pressed: #000000;
173
- --sds-color-semantic-base-ornament-secondary-pressed-on-dark: #ffffff;
174
168
  --sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
175
- --sds-color-semantic-base-surface: #ffffff;
176
- --sds-color-semantic-base-surface-on-dark: #000000;
169
+ --sds-color-semantic-base-surface-primary: #ffffff;
170
+ --sds-color-semantic-base-surface-secondary: #c3c3c333;
171
+ --sds-color-semantic-base-surface-primary-dark: #000000;
177
172
  --sds-color-semantic-base-surface-inverse: #000000;
178
173
  --sds-color-semantic-base-text-disabled: #c3c3c3;
179
174
  --sds-color-semantic-base-text-disabled-on-dark: #767676;
@@ -976,7 +971,7 @@
976
971
  --sds-space-xs: 6px;
977
972
  --sds-space-s: 8px;
978
973
  --sds-space-m: 12px;
979
- --sds-space-default: 12px;
974
+ --sds-space-default: 8px;
980
975
  --sds-space-l: 16px;
981
976
  --sds-space-xl: 24px;
982
977
  --sds-space-xxl: 32px;
@@ -1110,7 +1105,7 @@
1110
1105
  --sds-color-semantic-base-background-primary-dark: #101010;
1111
1106
  --sds-color-semantic-base-background-primary-inverse: #101010;
1112
1107
  --sds-color-semantic-base-background-secondary: #33333399;
1113
- --sds-color-semantic-base-background-secondary-on-dark: #33333399;
1108
+ --sds-color-semantic-base-background-secondary-dark: #33333399;
1114
1109
  --sds-color-semantic-base-background-secondary-inverse: #33333399;
1115
1110
  --sds-color-semantic-base-background-tertiary: #333333;
1116
1111
  --sds-color-semantic-base-border-on-fill: #ffffff;
@@ -1118,27 +1113,23 @@
1118
1113
  --sds-color-semantic-base-border-primary-disabled: #696969;
1119
1114
  --sds-color-semantic-base-border-primary-disabled-on-dark: #696969;
1120
1115
  --sds-color-semantic-base-border-primary-disabled-inverse: #696969;
1121
- --sds-color-semantic-base-border-primary-hover: #ffffff;
1122
- --sds-color-semantic-base-border-primary-hover-on-dark: #ffffff;
1116
+ --sds-color-semantic-base-border-primary-interaction: #ffffff;
1117
+ --sds-color-semantic-base-border-primary-interaction-on-dark: #ffffff;
1123
1118
  --sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
1124
1119
  --sds-color-semantic-base-border-primary-on-dark: #cdcdcd;
1125
1120
  --sds-color-semantic-base-border-primary-inverse: #cdcdcd;
1126
- --sds-color-semantic-base-border-primary-pressed: #ffffff;
1127
- --sds-color-semantic-base-border-primary-pressed-on-dark: #ffffff;
1128
1121
  --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
1129
1122
  --sds-color-semantic-base-border-secondary: #696969;
1130
1123
  --sds-color-semantic-base-divider: #494949;
1131
1124
  --sds-color-semantic-base-divider-on-dark: #494949;
1132
1125
  --sds-color-semantic-base-divider-inverse: #494949;
1133
- --sds-color-semantic-base-fill-disabled: #494949;
1134
- --sds-color-semantic-base-fill-hover: #69696952;
1135
- --sds-color-semantic-base-fill-hover-on-dark: #69696952;
1126
+ --sds-color-semantic-base-fill-disabled: #333333;
1127
+ --sds-color-semantic-base-fill-interaction: #69696952;
1128
+ --sds-color-semantic-base-fill-interaction-on-dark: #69696952;
1136
1129
  --sds-color-semantic-base-fill-hover-inverse: #69696952;
1137
- --sds-color-semantic-base-fill-open: #69696952;
1138
- --sds-color-semantic-base-fill-open-on-dark: #69696952;
1139
1130
  --sds-color-semantic-base-fill-open-inverse: #69696952;
1140
- --sds-color-semantic-base-fill-pressed: #69696952;
1141
- --sds-color-semantic-base-fill-pressed-on-dark: #69696952;
1131
+ --sds-color-semantic-base-fill-pressed: #69696966;
1132
+ --sds-color-semantic-base-fill-pressed-on-dark: #69696966;
1142
1133
  --sds-color-semantic-base-fill-pressed-inverse: #69696952;
1143
1134
  --sds-color-semantic-base-fill-primary: #333333;
1144
1135
  --sds-color-semantic-base-fill-selected: #ffffff;
@@ -1150,16 +1141,15 @@
1150
1141
  --sds-color-semantic-base-ornament-primary-on-dark: #ffffff;
1151
1142
  --sds-color-semantic-base-ornament-primary-inverse: #000000;
1152
1143
  --sds-color-semantic-base-ornament-secondary: #cdcdcd;
1153
- --sds-color-semantic-base-ornament-secondary-hover: #ffffff;
1154
- --sds-color-semantic-base-ornament-secondary-hover-on-dark: #ffffff;
1144
+ --sds-color-semantic-base-ornament-secondary-interaction: #ffffff;
1145
+ --sds-color-semantic-base-ornament-secondary-interaction-on-dark: #ffffff;
1155
1146
  --sds-color-semantic-base-ornament-secondary-hover-inverse: #ffffff;
1156
1147
  --sds-color-semantic-base-ornament-secondary-on-dark: #cdcdcd;
1157
1148
  --sds-color-semantic-base-ornament-secondary-inverse: #cdcdcd;
1158
- --sds-color-semantic-base-ornament-secondary-pressed: #ffffff;
1159
- --sds-color-semantic-base-ornament-secondary-pressed-on-dark: #ffffff;
1160
1149
  --sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
1161
- --sds-color-semantic-base-surface: #333333;
1162
- --sds-color-semantic-base-surface-on-dark: #333333;
1150
+ --sds-color-semantic-base-surface-primary: #333333;
1151
+ --sds-color-semantic-base-surface-secondary: #69696952;
1152
+ --sds-color-semantic-base-surface-primary-dark: #333333;
1163
1153
  --sds-color-semantic-base-surface-inverse: #333333;
1164
1154
  --sds-color-semantic-base-text-disabled: #696969;
1165
1155
  --sds-color-semantic-base-text-disabled-on-dark: #696969;
@@ -1962,7 +1952,7 @@
1962
1952
  --sds-space-xs: 6px;
1963
1953
  --sds-space-s: 8px;
1964
1954
  --sds-space-m: 12px;
1965
- --sds-space-default: 12px;
1955
+ --sds-space-default: 8px;
1966
1956
  --sds-space-l: 16px;
1967
1957
  --sds-space-xl: 24px;
1968
1958
  --sds-space-xxl: 32px;
package/dist/variables.scss CHANGED
@@ -243,8 +243,8 @@ $sds-color-semantic-base-background-primary-inverse: #000000;
243
243
  $sds-color-semantic-base-background-primary-inverse-dark: #101010;
244
244
  $sds-color-semantic-base-background-secondary: #ededed66;
245
245
  $sds-color-semantic-base-background-secondary-dark: #33333399;
246
- $sds-color-semantic-base-background-secondary-on-dark: #3b3b3b9e;
247
- $sds-color-semantic-base-background-secondary-on-dark-dark: #33333399;
246
+ $sds-color-semantic-base-background-secondary-dark: #3b3b3b9e;
247
+ $sds-color-semantic-base-background-secondary-dark-dark: #33333399;
248
248
  $sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
249
249
  $sds-color-semantic-base-background-secondary-inverse-dark: #33333399;
250
250
  $sds-color-semantic-base-background-tertiary: #ededed;
@@ -259,20 +259,16 @@ $sds-color-semantic-base-border-primary-disabled-on-dark: #767676;
259
259
  $sds-color-semantic-base-border-primary-disabled-on-dark-dark: #696969;
260
260
  $sds-color-semantic-base-border-primary-disabled-inverse: #767676;
261
261
  $sds-color-semantic-base-border-primary-disabled-inverse-dark: #696969;
262
- $sds-color-semantic-base-border-primary-hover: #000000;
263
- $sds-color-semantic-base-border-primary-hover-dark: #ffffff;
264
- $sds-color-semantic-base-border-primary-hover-on-dark: #ffffff;
265
- $sds-color-semantic-base-border-primary-hover-on-dark-dark: #ffffff;
262
+ $sds-color-semantic-base-border-primary-interaction: #000000;
263
+ $sds-color-semantic-base-border-primary-interaction-dark: #ffffff;
264
+ $sds-color-semantic-base-border-primary-interaction-on-dark: #ffffff;
265
+ $sds-color-semantic-base-border-primary-interaction-on-dark-dark: #ffffff;
266
266
  $sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
267
267
  $sds-color-semantic-base-border-primary-hover-inverse-dark: #ffffff;
268
268
  $sds-color-semantic-base-border-primary-on-dark: #c3c3c3;
269
269
  $sds-color-semantic-base-border-primary-on-dark-dark: #cdcdcd;
270
270
  $sds-color-semantic-base-border-primary-inverse: #c3c3c3;
271
271
  $sds-color-semantic-base-border-primary-inverse-dark: #cdcdcd;
272
- $sds-color-semantic-base-border-primary-pressed: #000000;
273
- $sds-color-semantic-base-border-primary-pressed-dark: #ffffff;
274
- $sds-color-semantic-base-border-primary-pressed-on-dark: #ffffff;
275
- $sds-color-semantic-base-border-primary-pressed-on-dark-dark: #ffffff;
276
272
  $sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
277
273
  $sds-color-semantic-base-border-primary-pressed-inverse-dark: #ffffff;
278
274
  $sds-color-semantic-base-border-secondary: #c3c3c3;
@@ -283,24 +279,20 @@ $sds-color-semantic-base-divider-on-dark: #3b3b3b;
283
279
  $sds-color-semantic-base-divider-on-dark-dark: #494949;
284
280
  $sds-color-semantic-base-divider-inverse: #3b3b3b;
285
281
  $sds-color-semantic-base-divider-inverse-dark: #494949;
286
- $sds-color-semantic-base-fill-disabled: #dfdfdf;
287
- $sds-color-semantic-base-fill-disabled-dark: #494949;
288
- $sds-color-semantic-base-fill-hover: #c3c3c333;
289
- $sds-color-semantic-base-fill-hover-dark: #69696952;
290
- $sds-color-semantic-base-fill-hover-on-dark: #c3c3c357;
291
- $sds-color-semantic-base-fill-hover-on-dark-dark: #69696952;
292
- $sds-color-semantic-base-fill-hover-inverse: #c3c3c357;
282
+ $sds-color-semantic-base-fill-disabled: #ededed;
283
+ $sds-color-semantic-base-fill-disabled-dark: #333333;
284
+ $sds-color-semantic-base-fill-interaction: #c3c3c333;
285
+ $sds-color-semantic-base-fill-interaction-dark: #69696952;
286
+ $sds-color-semantic-base-fill-interaction-on-dark: #c3c3c333;
287
+ $sds-color-semantic-base-fill-interaction-on-dark-dark: #69696952;
288
+ $sds-color-semantic-base-fill-hover-inverse: #c3c3c333;
293
289
  $sds-color-semantic-base-fill-hover-inverse-dark: #69696952;
294
- $sds-color-semantic-base-fill-open: #c3c3c333;
295
- $sds-color-semantic-base-fill-open-dark: #69696952;
296
- $sds-color-semantic-base-fill-open-on-dark: #c3c3c357;
297
- $sds-color-semantic-base-fill-open-on-dark-dark: #69696952;
298
290
  $sds-color-semantic-base-fill-open-inverse: #c3c3c357;
299
291
  $sds-color-semantic-base-fill-open-inverse-dark: #69696952;
300
- $sds-color-semantic-base-fill-pressed: #c3c3c333;
301
- $sds-color-semantic-base-fill-pressed-dark: #69696952;
302
- $sds-color-semantic-base-fill-pressed-on-dark: #c3c3c357;
303
- $sds-color-semantic-base-fill-pressed-on-dark-dark: #69696952;
292
+ $sds-color-semantic-base-fill-pressed: #c3c3c34d;
293
+ $sds-color-semantic-base-fill-pressed-dark: #69696966;
294
+ $sds-color-semantic-base-fill-pressed-on-dark: #c3c3c33d;
295
+ $sds-color-semantic-base-fill-pressed-on-dark-dark: #69696966;
304
296
  $sds-color-semantic-base-fill-pressed-inverse: #c3c3c357;
305
297
  $sds-color-semantic-base-fill-pressed-inverse-dark: #69696952;
306
298
  $sds-color-semantic-base-fill-primary: #ffffff;
@@ -323,26 +315,24 @@ $sds-color-semantic-base-ornament-primary-inverse: #ffffff;
323
315
  $sds-color-semantic-base-ornament-primary-inverse-dark: #000000;
324
316
  $sds-color-semantic-base-ornament-secondary: #767676;
325
317
  $sds-color-semantic-base-ornament-secondary-dark: #cdcdcd;
326
- $sds-color-semantic-base-ornament-secondary-hover: #000000;
327
- $sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff;
328
- $sds-color-semantic-base-ornament-secondary-hover-on-dark: #ffffff;
329
- $sds-color-semantic-base-ornament-secondary-hover-on-dark-dark: #ffffff;
318
+ $sds-color-semantic-base-ornament-secondary-interaction: #000000;
319
+ $sds-color-semantic-base-ornament-secondary-interaction-dark: #ffffff;
320
+ $sds-color-semantic-base-ornament-secondary-interaction-on-dark: #ffffff;
321
+ $sds-color-semantic-base-ornament-secondary-interaction-on-dark-dark: #ffffff;
330
322
  $sds-color-semantic-base-ornament-secondary-hover-inverse: #ffffff;
331
323
  $sds-color-semantic-base-ornament-secondary-hover-inverse-dark: #ffffff;
332
324
  $sds-color-semantic-base-ornament-secondary-on-dark: #c3c3c3;
333
325
  $sds-color-semantic-base-ornament-secondary-on-dark-dark: #cdcdcd;
334
326
  $sds-color-semantic-base-ornament-secondary-inverse: #c3c3c3;
335
327
  $sds-color-semantic-base-ornament-secondary-inverse-dark: #cdcdcd;
336
- $sds-color-semantic-base-ornament-secondary-pressed: #000000;
337
- $sds-color-semantic-base-ornament-secondary-pressed-dark: #ffffff;
338
- $sds-color-semantic-base-ornament-secondary-pressed-on-dark: #ffffff;
339
- $sds-color-semantic-base-ornament-secondary-pressed-on-dark-dark: #ffffff;
340
328
  $sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
341
329
  $sds-color-semantic-base-ornament-secondary-pressed-inverse-dark: #ffffff;
342
- $sds-color-semantic-base-surface: #ffffff;
343
- $sds-color-semantic-base-surface-dark: #333333;
344
- $sds-color-semantic-base-surface-on-dark: #000000;
345
- $sds-color-semantic-base-surface-on-dark-dark: #333333;
330
+ $sds-color-semantic-base-surface-primary: #ffffff;
331
+ $sds-color-semantic-base-surface-primary-dark: #333333;
332
+ $sds-color-semantic-base-surface-secondary: #c3c3c333;
333
+ $sds-color-semantic-base-surface-secondary-dark: #69696952;
334
+ $sds-color-semantic-base-surface-primary-dark: #000000;
335
+ $sds-color-semantic-base-surface-primary-dark-dark: #333333;
346
336
  $sds-color-semantic-base-surface-inverse: #000000;
347
337
  $sds-color-semantic-base-surface-inverse-dark: #333333;
348
338
  $sds-color-semantic-base-text-disabled: #c3c3c3;
@@ -2470,7 +2460,7 @@ $sds-space-xxs: 4px;
2470
2460
  $sds-space-xs: 6px;
2471
2461
  $sds-space-s: 8px;
2472
2462
  $sds-space-m: 12px;
2473
- $sds-space-default: 12px;
2463
+ $sds-space-default: 8px;
2474
2464
  $sds-space-l: 16px;
2475
2465
  $sds-space-xl: 24px;
2476
2466
  $sds-space-xxl: 32px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@czi-sds/components",
3
- "version": "23.1.0",
3
+ "version": "23.2.1",
4
4
  "main": "dist/index.cjs.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.cjs.d.ts",
@@ -87,5 +87,5 @@
87
87
  "dependencies": {
88
88
  "chroma-js": "^3.1.2"
89
89
  },
90
- "gitHead": "a9e7c7ec4a6aa8a49f6fbe9076e4e0db015720d9"
90
+ "gitHead": "e310175738cf386b5c770c0c9e8ba2ca527f6fd6"
91
91
  }