@czi-sds/components 22.3.2 → 22.4.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/dist/index.cjs.d.ts +59 -16
  2. package/dist/index.cjs.js +649 -373
  3. package/dist/index.esm.d.ts +59 -16
  4. package/dist/index.esm.js +650 -374
  5. package/dist/tailwind.json +51 -45
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +51 -45
  8. package/dist/variables.scss +51 -45
  9. package/package.json +2 -2
package/dist/tailwind.json CHANGED
@@ -1158,7 +1158,7 @@
1158
1158
  "sds-color-primitive-yellow-800": "#ffe6a8",
1159
1159
  "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
1160
1160
  "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
1161
- "sds-color-semantic-base-background-primary": "#000000",
1161
+ "sds-color-semantic-base-background-primary": "#101010",
1162
1162
  "sds-color-semantic-base-background-primary-inverse": "#ffffff",
1163
1163
  "sds-color-semantic-base-background-secondary": "#333333",
1164
1164
  "sds-color-semantic-base-background-secondary-inverse": "#ededed",
@@ -1179,97 +1179,100 @@
1179
1179
  "sds-color-semantic-base-fill-hover": "#69696947",
1180
1180
  "sds-color-semantic-base-fill-open": "#69696947",
1181
1181
  "sds-color-semantic-base-fill-pressed": "#69696947",
1182
- "sds-color-semantic-base-fill-primary": "#000000",
1182
+ "sds-color-semantic-base-fill-primary": "#333333",
1183
1183
  "sds-color-semantic-base-fill-selected": "#ffffff",
1184
1184
  "sds-color-semantic-base-ornament-disabled": "#696969",
1185
1185
  "sds-color-semantic-base-ornament-disabled-inverse": "#cdcdcd",
1186
- "sds-color-semantic-base-ornament-on-fill": "#000000",
1186
+ "sds-color-semantic-base-ornament-on-fill": "#ffffff",
1187
1187
  "sds-color-semantic-base-ornament-primary": "#ffffff",
1188
1188
  "sds-color-semantic-base-ornament-primary-inverse": "#000000",
1189
1189
  "sds-color-semantic-base-ornament-secondary": "#cdcdcd",
1190
1190
  "sds-color-semantic-base-ornament-secondary-inverse": "#696969",
1191
1191
  "sds-color-semantic-base-ornament-secondary-hover": "#ffffff",
1192
1192
  "sds-color-semantic-base-ornament-secondary-pressed": "#ffffff",
1193
- "sds-color-semantic-base-surface": "#000000",
1193
+ "sds-color-semantic-base-surface": "#333333",
1194
1194
  "sds-color-semantic-base-surface-inverse": "#ffffff",
1195
1195
  "sds-color-semantic-base-text-disabled": "#696969",
1196
1196
  "sds-color-semantic-base-text-disabled-inverse": "#cdcdcd",
1197
+ "sds-color-semantic-base-text-on-fill": "#ffffff",
1197
1198
  "sds-color-semantic-base-text-primary": "#ffffff",
1198
1199
  "sds-color-semantic-base-text-primary-inverse": "#000000",
1199
1200
  "sds-color-semantic-base-text-secondary": "#cdcdcd",
1200
1201
  "sds-color-semantic-base-text-secondary-inverse": "#696969",
1201
- "sds-color-semantic-accent-border": "#5b9aff",
1202
- "sds-color-semantic-accent-border-focus": "#5b9aff",
1203
- "sds-color-semantic-accent-border-hover": "#a2c9ff",
1204
- "sds-color-semantic-accent-border-open": "#5b9aff",
1205
- "sds-color-semantic-accent-border-pressed": "#cde3ff",
1206
- "sds-color-semantic-accent-border-selected": "#5b9aff",
1207
- "sds-color-semantic-accent-fill-hover": "#a2c9ff",
1208
- "sds-color-semantic-accent-fill-pressed": "#cde3ff",
1209
- "sds-color-semantic-accent-fill-primary": "#5b9aff",
1210
- "sds-color-semantic-accent-ornament": "#5b9aff",
1211
- "sds-color-semantic-accent-ornament-focus": "#5b9aff",
1212
- "sds-color-semantic-accent-ornament-hover": "#a2c9ff",
1213
- "sds-color-semantic-accent-ornament-open": "#5b9aff",
1214
- "sds-color-semantic-accent-ornament-pressed": "#cde3ff",
1215
- "sds-color-semantic-accent-ornament-selected": "#5b9aff",
1216
- "sds-color-semantic-accent-surface-primary": "#5b9aff",
1202
+ "sds-color-semantic-base-text-tertiary": "#9b9b9b",
1203
+ "sds-color-semantic-base-text-tertiary-inverse": "#aaaaaa",
1204
+ "sds-color-semantic-accent-border": "#a2c9ff",
1205
+ "sds-color-semantic-accent-border-focus": "#a2c9ff",
1206
+ "sds-color-semantic-accent-border-hover": "#cde3ff",
1207
+ "sds-color-semantic-accent-border-open": "#a2c9ff",
1208
+ "sds-color-semantic-accent-border-pressed": "#e2eeff",
1209
+ "sds-color-semantic-accent-border-selected": "#a2c9ff",
1210
+ "sds-color-semantic-accent-fill-hover": "#cde3ff",
1211
+ "sds-color-semantic-accent-fill-pressed": "#e2eeff",
1212
+ "sds-color-semantic-accent-fill-primary": "#2573f4",
1213
+ "sds-color-semantic-accent-ornament": "#a2c9ff",
1214
+ "sds-color-semantic-accent-ornament-focus": "#a2c9ff",
1215
+ "sds-color-semantic-accent-ornament-hover": "#cde3ff",
1216
+ "sds-color-semantic-accent-ornament-open": "#a2c9ff",
1217
+ "sds-color-semantic-accent-ornament-pressed": "#e2eeff",
1218
+ "sds-color-semantic-accent-ornament-selected": "#a2c9ff",
1219
+ "sds-color-semantic-accent-surface-primary": "#2573f4",
1217
1220
  "sds-color-semantic-accent-surface-secondary": "#0f1d4a",
1218
- "sds-color-semantic-accent-text-action": "#5b9aff",
1219
- "sds-color-semantic-accent-text-action-hover": "#a2c9ff",
1220
- "sds-color-semantic-accent-text-action-pressed": "#cde3ff",
1221
+ "sds-color-semantic-accent-text-action": "#a2c9ff",
1222
+ "sds-color-semantic-accent-text-action-hover": "#cde3ff",
1223
+ "sds-color-semantic-accent-text-action-pressed": "#e2eeff",
1221
1224
  "sds-color-semantic-beta-border": "#cebef8",
1222
- "sds-color-semantic-beta-fill-hover": "#cebef8",
1223
- "sds-color-semantic-beta-fill-pressed": "#e4dcfc",
1224
- "sds-color-semantic-beta-fill-primary": "#aa89ef",
1225
+ "sds-color-semantic-beta-fill-hover": "#e4dcfc",
1226
+ "sds-color-semantic-beta-fill-pressed": "#f0ebfe",
1227
+ "sds-color-semantic-beta-fill-primary": "#905de6",
1225
1228
  "sds-color-semantic-beta-fill-secondary": "#331252",
1226
1229
  "sds-color-semantic-beta-ornament": "#cebef8",
1227
- "sds-color-semantic-beta-surface-primary": "#aa89ef",
1230
+ "sds-color-semantic-beta-surface-primary": "#905de6",
1228
1231
  "sds-color-semantic-beta-surface-secondary": "#331252",
1229
1232
  "sds-color-semantic-beta-text": "#cebef8",
1230
1233
  "sds-color-semantic-info-border": "#a2c9ff",
1231
- "sds-color-semantic-info-fill-hover": "#a2c9ff",
1232
- "sds-color-semantic-info-fill-pressed": "#cde3ff",
1233
- "sds-color-semantic-info-fill-primary": "#5b9aff",
1234
+ "sds-color-semantic-info-fill-hover": "#cde3ff",
1235
+ "sds-color-semantic-info-fill-pressed": "#e2eeff",
1236
+ "sds-color-semantic-info-fill-primary": "#2573f4",
1234
1237
  "sds-color-semantic-info-fill-secondary": "#0f1d4a",
1235
1238
  "sds-color-semantic-info-ornament": "#a2c9ff",
1236
- "sds-color-semantic-info-surface-primary": "#5b9aff",
1239
+ "sds-color-semantic-info-surface-primary": "#2573f4",
1237
1240
  "sds-color-semantic-info-surface-secondary": "#0f1d4a",
1238
1241
  "sds-color-semantic-info-text": "#a2c9ff",
1239
1242
  "sds-color-semantic-negative-border": "#ff988a",
1240
- "sds-color-semantic-negative-fill-hover": "#ff988a",
1241
- "sds-color-semantic-negative-fill-pressed": "#ffbdb3",
1242
- "sds-color-semantic-negative-fill-primary": "#e05043",
1243
+ "sds-color-semantic-negative-fill-hover": "#ffbdb3",
1244
+ "sds-color-semantic-negative-fill-pressed": "#ffd8d1",
1245
+ "sds-color-semantic-negative-fill-primary": "#c73028",
1243
1246
  "sds-color-semantic-negative-fill-secondary": "#330603",
1244
1247
  "sds-color-semantic-negative-ornament": "#ff988a",
1245
- "sds-color-semantic-negative-surface-primary": "#e05043",
1248
+ "sds-color-semantic-negative-surface-primary": "#c73028",
1246
1249
  "sds-color-semantic-negative-surface-secondary": "#330603",
1247
1250
  "sds-color-semantic-negative-text": "#ff988a",
1248
1251
  "sds-color-semantic-neutral-border": "#aaaaaa",
1249
1252
  "sds-color-semantic-neutral-fill-hover": "#cdcdcd",
1250
1253
  "sds-color-semantic-neutral-fill-pressed": "#ededed",
1251
1254
  "sds-color-semantic-neutral-fill-primary": "#aaaaaa",
1252
- "sds-color-semantic-neutral-fill-secondary": "#333333",
1255
+ "sds-color-semantic-neutral-fill-secondary": "#494949",
1253
1256
  "sds-color-semantic-neutral-ornament": "#ededed",
1254
1257
  "sds-color-semantic-neutral-surface-primary": "#aaaaaa",
1255
1258
  "sds-color-semantic-neutral-surface-secondary": "#494949",
1256
1259
  "sds-color-semantic-neutral-text": "#ededed",
1257
1260
  "sds-color-semantic-notice-border": "#e5bc63",
1258
- "sds-color-semantic-notice-fill-hover": "#e5bc63",
1259
- "sds-color-semantic-notice-fill-pressed": "#f5d789",
1260
- "sds-color-semantic-notice-fill-primary": "#d9a943",
1261
+ "sds-color-semantic-notice-fill-hover": "#f5d789",
1262
+ "sds-color-semantic-notice-fill-pressed": "#ffe6a8",
1263
+ "sds-color-semantic-notice-fill-primary": "#bd8804",
1261
1264
  "sds-color-semantic-notice-fill-secondary": "#361b07",
1262
1265
  "sds-color-semantic-notice-ornament": "#e5bc63",
1263
- "sds-color-semantic-notice-surface-primary": "#d9a943",
1266
+ "sds-color-semantic-notice-surface-primary": "#bd8804",
1264
1267
  "sds-color-semantic-notice-surface-secondary": "#361b07",
1265
1268
  "sds-color-semantic-notice-text": "#e5bc63",
1266
1269
  "sds-color-semantic-positive-border": "#85d898",
1267
- "sds-color-semantic-positive-fill-hover": "#85d898",
1268
- "sds-color-semantic-positive-fill-pressed": "#bcecc5",
1269
- "sds-color-semantic-positive-fill-primary": "#4bae68",
1270
+ "sds-color-semantic-positive-fill-hover": "#bcecc5",
1271
+ "sds-color-semantic-positive-fill-pressed": "#daf4de",
1272
+ "sds-color-semantic-positive-fill-primary": "#278b48",
1270
1273
  "sds-color-semantic-positive-fill-secondary": "#082608",
1271
1274
  "sds-color-semantic-positive-ornament": "#85d898",
1272
- "sds-color-semantic-positive-surface-primary": "#4bae68",
1275
+ "sds-color-semantic-positive-surface-primary": "#278b48",
1273
1276
  "sds-color-semantic-positive-surface-secondary": "#082608",
1274
1277
  "sds-color-semantic-positive-text": "#85d898"
1275
1278
  },
@@ -1363,10 +1366,13 @@
1363
1366
  "sds-color-semantic-base-surface-inverse": "#000000",
1364
1367
  "sds-color-semantic-base-text-disabled": "#c3c3c3",
1365
1368
  "sds-color-semantic-base-text-disabled-inverse": "#6c6c6c",
1369
+ "sds-color-semantic-base-text-on-fill": "#ffffff",
1366
1370
  "sds-color-semantic-base-text-primary": "#000000",
1367
1371
  "sds-color-semantic-base-text-primary-inverse": "#ffffff",
1368
1372
  "sds-color-semantic-base-text-secondary": "#6c6c6c",
1369
1373
  "sds-color-semantic-base-text-secondary-inverse": "#c3c3c3",
1374
+ "sds-color-semantic-base-text-tertiary": "#a5a5a5",
1375
+ "sds-color-semantic-base-text-tertiary-inverse": "#969696",
1370
1376
  "sds-color-semantic-accent-border": "#1a6cef",
1371
1377
  "sds-color-semantic-accent-border-focus": "#1a6cef",
1372
1378
  "sds-color-semantic-accent-border-hover": "#0041b9",
@@ -1418,7 +1424,7 @@
1418
1424
  "sds-color-semantic-neutral-fill-hover": "#6c6c6c",
1419
1425
  "sds-color-semantic-neutral-fill-pressed": "#3b3b3b",
1420
1426
  "sds-color-semantic-neutral-fill-primary": "#969696",
1421
- "sds-color-semantic-neutral-fill-secondary": "#f3f3f3",
1427
+ "sds-color-semantic-neutral-fill-secondary": "#dfdfdf",
1422
1428
  "sds-color-semantic-neutral-ornament": "#3b3b3b",
1423
1429
  "sds-color-semantic-neutral-surface-primary": "#969696",
1424
1430
  "sds-color-semantic-neutral-surface-secondary": "#dfdfdf",