@czi-sds/components 24.1.0 → 24.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 (8) hide show
  1. package/dist/index.cjs.d.ts +3 -0
  2. package/dist/index.cjs.js +29 -15
  3. package/dist/index.esm.d.ts +3 -0
  4. package/dist/index.esm.js +29 -15
  5. package/dist/tailwind.json +20 -14
  6. package/dist/variables.css +20 -14
  7. package/dist/variables.scss +20 -14
  8. package/package.json +6 -5
package/dist/index.cjs.d.ts CHANGED
@@ -66,6 +66,7 @@ interface BaseColor {
66
66
  surfaceSecondary: string;
67
67
  surfacePrimaryDark: string;
68
68
  surfaceInverse: string;
69
+ surfaceTertiary: string;
69
70
  textPrimary: string;
70
71
  textPrimaryOnDark: string;
71
72
  textPrimaryInverse: string;
@@ -112,6 +113,7 @@ interface BaseColor {
112
113
  borderPrimaryDisabledOnDark: string;
113
114
  borderPrimaryDisabledInverse: string;
114
115
  borderSecondaryOnDark: string;
116
+ borderHighlight: string;
115
117
  ornamentDisabled: string;
116
118
  ornamentDisabledOnDark: string;
117
119
  ornamentDisabledInverse: string;
@@ -121,6 +123,7 @@ interface BaseColor {
121
123
  ornamentPrimaryInverse: string;
122
124
  ornamentSecondary: string;
123
125
  ornamentSecondaryOnDark: string;
126
+ ornamentTertiary: string;
124
127
  ornamentSecondaryInverse: string;
125
128
  ornamentSecondaryInteraction: string;
126
129
  ornamentSecondaryInteractionOnDark: string;
package/dist/index.cjs.js CHANGED
@@ -670,7 +670,7 @@ const SDSDarkThemeColors = {
670
670
  "500": "#aaaaaa",
671
671
  "600": "#cdcdcd",
672
672
  "700": "#ededed",
673
- "75": "#101010",
673
+ "75": "#1b1b1b",
674
674
  "800": "#fafafa",
675
675
  "900": "#ffffff"
676
676
  },
@@ -927,7 +927,8 @@ const SDSPaletteLight = (appTheme) => {
927
927
  borderPrimaryOnDark: appTheme.colors.gray[300],
928
928
  borderPrimaryInverse: appTheme.colors.gray[300],
929
929
  borderPrimaryPressedInverse: appTheme.colors.gray[50],
930
- borderSecondary: appTheme.colors.gray[300],
930
+ borderSecondary: addOpacityToHex(appTheme.colors.gray[300], 70),
931
+ borderHighlight: addOpacityToHex(appTheme.colors.gray[900], 10),
931
932
  borderSecondaryOnDark: appTheme.colors.gray[600],
932
933
  divider: appTheme.colors.gray[200],
933
934
  dividerOnDark: appTheme.colors.gray[700],
@@ -957,6 +958,7 @@ const SDSPaletteLight = (appTheme) => {
957
958
  ornamentPrimaryOnDark: appTheme.colors.gray[50],
958
959
  ornamentPrimaryInverse: appTheme.colors.gray[50],
959
960
  ornamentSecondary: appTheme.colors.gray[600],
961
+ ornamentTertiary: appTheme.colors.gray[300],
960
962
  ornamentSecondaryInteraction: appTheme.colors.gray[900],
961
963
  ornamentSecondaryInteractionOnDark: appTheme.colors.gray[50],
962
964
  ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
@@ -965,6 +967,7 @@ const SDSPaletteLight = (appTheme) => {
965
967
  ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
966
968
  surfacePrimary: appTheme.colors.gray[50],
967
969
  surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 20),
970
+ surfaceTertiary: appTheme.colors.gray[200],
968
971
  surfacePrimaryDark: appTheme.colors.gray[900],
969
972
  surfaceInverse: appTheme.colors.gray[900],
970
973
  textDisabled: appTheme.colors.gray[300],
@@ -1125,8 +1128,8 @@ const SDSPaletteDark = (appTheme) => {
1125
1128
  textActionPressed: appTheme.colors.indigo[800]
1126
1129
  },
1127
1130
  base: {
1128
- backgroundPrimary: appTheme.colors.gray[75],
1129
- backgroundPrimaryDark: appTheme.colors.gray[75],
1131
+ backgroundPrimary: appTheme.colors.gray[50],
1132
+ backgroundPrimaryDark: appTheme.colors.gray[50],
1130
1133
  backgroundPrimaryInverse: appTheme.colors.gray[75],
1131
1134
  backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 60),
1132
1135
  backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[100], 60),
@@ -1143,20 +1146,21 @@ const SDSPaletteDark = (appTheme) => {
1143
1146
  borderPrimaryOnDark: appTheme.colors.gray[600],
1144
1147
  borderPrimaryInverse: appTheme.colors.gray[600],
1145
1148
  borderPrimaryPressedInverse: appTheme.colors.gray[900],
1146
- borderSecondary: appTheme.colors.gray[300],
1149
+ borderSecondary: addOpacityToHex(appTheme.colors.gray[300], 70),
1150
+ borderHighlight: addOpacityToHex(appTheme.colors.gray[900], 10),
1147
1151
  borderSecondaryOnDark: appTheme.colors.gray[300],
1148
1152
  divider: appTheme.colors.gray[200],
1149
1153
  dividerOnDark: appTheme.colors.gray[200],
1150
1154
  dividerInverse: appTheme.colors.gray[200],
1151
- fillDisabled: appTheme.colors.gray[100],
1155
+ fillDisabled: appTheme.colors.gray[75],
1152
1156
  fillPrimaryInteraction: addOpacityToHex(appTheme.colors.gray[300], 32),
1153
- fillPrimaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
1157
+ fillPrimaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 24),
1154
1158
  fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
1155
1159
  fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
1156
- fillPrimaryPressed: addOpacityToHex(appTheme.colors.gray[300], 40),
1160
+ fillPrimaryPressed: addOpacityToHex(appTheme.colors.gray[300], 34),
1157
1161
  fillPrimaryPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 40),
1158
1162
  fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
1159
- fillPrimary: appTheme.colors.gray[100],
1163
+ fillPrimary: appTheme.colors.gray[75],
1160
1164
  fillSelected: appTheme.colors.gray[900],
1161
1165
  fillSecondary: appTheme.colors.gray[200],
1162
1166
  fillSecondaryInteraction: addOpacityToHex(appTheme.colors.gray[400], 26),
@@ -1164,7 +1168,7 @@ const SDSPaletteDark = (appTheme) => {
1164
1168
  fillSecondaryOnDark: appTheme.colors.gray[200],
1165
1169
  fillSecondaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[400], 34),
1166
1170
  fillSecondaryPressedOnDark: addOpacityToHex(appTheme.colors.gray[400], 46),
1167
- fillDisabledOnDark: appTheme.colors.gray[100],
1171
+ fillDisabledOnDark: appTheme.colors.gray[75],
1168
1172
  ornamentDisabled: appTheme.colors.gray[300],
1169
1173
  ornamentDisabledOnDark: appTheme.colors.gray[300],
1170
1174
  ornamentDisabledInverse: appTheme.colors.gray[300],
@@ -1179,9 +1183,11 @@ const SDSPaletteDark = (appTheme) => {
1179
1183
  ornamentSecondaryOnDark: appTheme.colors.gray[600],
1180
1184
  ornamentSecondaryInverse: appTheme.colors.gray[600],
1181
1185
  ornamentSecondaryPressedInverse: appTheme.colors.gray[900],
1182
- surfacePrimary: appTheme.colors.gray[100],
1183
- surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 32),
1184
- surfacePrimaryDark: appTheme.colors.gray[100],
1186
+ ornamentTertiary: appTheme.colors.gray[300],
1187
+ surfacePrimary: appTheme.colors.gray[75],
1188
+ surfaceSecondary: addOpacityToHex(appTheme.colors.gray[100], 64),
1189
+ surfaceTertiary: appTheme.colors.gray[100],
1190
+ surfacePrimaryDark: appTheme.colors.gray[75],
1185
1191
  surfaceInverse: appTheme.colors.gray[100],
1186
1192
  textDisabled: appTheme.colors.gray[300],
1187
1193
  textDisabledOnDark: appTheme.colors.gray[300],
@@ -1311,6 +1317,7 @@ const SDSPaletteDark = (appTheme) => {
1311
1317
  * This function creates the theme options for the MUI theme provider
1312
1318
  */
1313
1319
  function makeThemeOptions(appTheme, mode) {
1320
+ const semanticColors = mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme);
1314
1321
  return {
1315
1322
  app: appTheme,
1316
1323
  breakpoints: { values: Breakpoints },
@@ -1351,7 +1358,14 @@ function makeThemeOptions(appTheme, mode) {
1351
1358
  disabled: appTheme.colors.gray[400],
1352
1359
  disabledBackground: appTheme.colors.gray[300]
1353
1360
  },
1354
- background: { default: mode === "dark" ? appTheme.colors.gray[75] : appTheme.colors.gray[50] },
1361
+ /**
1362
+ * What `CssBaseline` paints the page with, so it has to be the same token
1363
+ * a component fills its own background with — otherwise a component sits
1364
+ * on a page a shade off from itself. The two are only one token in dark
1365
+ * mode, where the background and the surfaces above it are deliberately
1366
+ * different shades of near-black.
1367
+ */
1368
+ background: { default: semanticColors.base.backgroundPrimary },
1355
1369
  divider: appTheme.colors.gray[200],
1356
1370
  error: {
1357
1371
  "100": appTheme.colors.red[100],
@@ -1398,7 +1412,7 @@ function makeThemeOptions(appTheme, mode) {
1398
1412
  light: appTheme.colors.blue[200],
1399
1413
  main: appTheme.colors.blue[400]
1400
1414
  },
1401
- sds: mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme),
1415
+ sds: semanticColors,
1402
1416
  secondary: {
1403
1417
  "100": appTheme.colors.green[100],
1404
1418
  "200": appTheme.colors.green[200],
package/dist/index.esm.d.ts CHANGED
@@ -66,6 +66,7 @@ interface BaseColor {
66
66
  surfaceSecondary: string;
67
67
  surfacePrimaryDark: string;
68
68
  surfaceInverse: string;
69
+ surfaceTertiary: string;
69
70
  textPrimary: string;
70
71
  textPrimaryOnDark: string;
71
72
  textPrimaryInverse: string;
@@ -112,6 +113,7 @@ interface BaseColor {
112
113
  borderPrimaryDisabledOnDark: string;
113
114
  borderPrimaryDisabledInverse: string;
114
115
  borderSecondaryOnDark: string;
116
+ borderHighlight: string;
115
117
  ornamentDisabled: string;
116
118
  ornamentDisabledOnDark: string;
117
119
  ornamentDisabledInverse: string;
@@ -121,6 +123,7 @@ interface BaseColor {
121
123
  ornamentPrimaryInverse: string;
122
124
  ornamentSecondary: string;
123
125
  ornamentSecondaryOnDark: string;
126
+ ornamentTertiary: string;
124
127
  ornamentSecondaryInverse: string;
125
128
  ornamentSecondaryInteraction: string;
126
129
  ornamentSecondaryInteractionOnDark: string;
package/dist/index.esm.js CHANGED
@@ -645,7 +645,7 @@ const SDSDarkThemeColors = {
645
645
  "500": "#aaaaaa",
646
646
  "600": "#cdcdcd",
647
647
  "700": "#ededed",
648
- "75": "#101010",
648
+ "75": "#1b1b1b",
649
649
  "800": "#fafafa",
650
650
  "900": "#ffffff"
651
651
  },
@@ -902,7 +902,8 @@ const SDSPaletteLight = (appTheme) => {
902
902
  borderPrimaryOnDark: appTheme.colors.gray[300],
903
903
  borderPrimaryInverse: appTheme.colors.gray[300],
904
904
  borderPrimaryPressedInverse: appTheme.colors.gray[50],
905
- borderSecondary: appTheme.colors.gray[300],
905
+ borderSecondary: addOpacityToHex(appTheme.colors.gray[300], 70),
906
+ borderHighlight: addOpacityToHex(appTheme.colors.gray[900], 10),
906
907
  borderSecondaryOnDark: appTheme.colors.gray[600],
907
908
  divider: appTheme.colors.gray[200],
908
909
  dividerOnDark: appTheme.colors.gray[700],
@@ -932,6 +933,7 @@ const SDSPaletteLight = (appTheme) => {
932
933
  ornamentPrimaryOnDark: appTheme.colors.gray[50],
933
934
  ornamentPrimaryInverse: appTheme.colors.gray[50],
934
935
  ornamentSecondary: appTheme.colors.gray[600],
936
+ ornamentTertiary: appTheme.colors.gray[300],
935
937
  ornamentSecondaryInteraction: appTheme.colors.gray[900],
936
938
  ornamentSecondaryInteractionOnDark: appTheme.colors.gray[50],
937
939
  ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
@@ -940,6 +942,7 @@ const SDSPaletteLight = (appTheme) => {
940
942
  ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
941
943
  surfacePrimary: appTheme.colors.gray[50],
942
944
  surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 20),
945
+ surfaceTertiary: appTheme.colors.gray[200],
943
946
  surfacePrimaryDark: appTheme.colors.gray[900],
944
947
  surfaceInverse: appTheme.colors.gray[900],
945
948
  textDisabled: appTheme.colors.gray[300],
@@ -1100,8 +1103,8 @@ const SDSPaletteDark = (appTheme) => {
1100
1103
  textActionPressed: appTheme.colors.indigo[800]
1101
1104
  },
1102
1105
  base: {
1103
- backgroundPrimary: appTheme.colors.gray[75],
1104
- backgroundPrimaryDark: appTheme.colors.gray[75],
1106
+ backgroundPrimary: appTheme.colors.gray[50],
1107
+ backgroundPrimaryDark: appTheme.colors.gray[50],
1105
1108
  backgroundPrimaryInverse: appTheme.colors.gray[75],
1106
1109
  backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 60),
1107
1110
  backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[100], 60),
@@ -1118,20 +1121,21 @@ const SDSPaletteDark = (appTheme) => {
1118
1121
  borderPrimaryOnDark: appTheme.colors.gray[600],
1119
1122
  borderPrimaryInverse: appTheme.colors.gray[600],
1120
1123
  borderPrimaryPressedInverse: appTheme.colors.gray[900],
1121
- borderSecondary: appTheme.colors.gray[300],
1124
+ borderSecondary: addOpacityToHex(appTheme.colors.gray[300], 70),
1125
+ borderHighlight: addOpacityToHex(appTheme.colors.gray[900], 10),
1122
1126
  borderSecondaryOnDark: appTheme.colors.gray[300],
1123
1127
  divider: appTheme.colors.gray[200],
1124
1128
  dividerOnDark: appTheme.colors.gray[200],
1125
1129
  dividerInverse: appTheme.colors.gray[200],
1126
- fillDisabled: appTheme.colors.gray[100],
1130
+ fillDisabled: appTheme.colors.gray[75],
1127
1131
  fillPrimaryInteraction: addOpacityToHex(appTheme.colors.gray[300], 32),
1128
- fillPrimaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
1132
+ fillPrimaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 24),
1129
1133
  fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
1130
1134
  fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
1131
- fillPrimaryPressed: addOpacityToHex(appTheme.colors.gray[300], 40),
1135
+ fillPrimaryPressed: addOpacityToHex(appTheme.colors.gray[300], 34),
1132
1136
  fillPrimaryPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 40),
1133
1137
  fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
1134
- fillPrimary: appTheme.colors.gray[100],
1138
+ fillPrimary: appTheme.colors.gray[75],
1135
1139
  fillSelected: appTheme.colors.gray[900],
1136
1140
  fillSecondary: appTheme.colors.gray[200],
1137
1141
  fillSecondaryInteraction: addOpacityToHex(appTheme.colors.gray[400], 26),
@@ -1139,7 +1143,7 @@ const SDSPaletteDark = (appTheme) => {
1139
1143
  fillSecondaryOnDark: appTheme.colors.gray[200],
1140
1144
  fillSecondaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[400], 34),
1141
1145
  fillSecondaryPressedOnDark: addOpacityToHex(appTheme.colors.gray[400], 46),
1142
- fillDisabledOnDark: appTheme.colors.gray[100],
1146
+ fillDisabledOnDark: appTheme.colors.gray[75],
1143
1147
  ornamentDisabled: appTheme.colors.gray[300],
1144
1148
  ornamentDisabledOnDark: appTheme.colors.gray[300],
1145
1149
  ornamentDisabledInverse: appTheme.colors.gray[300],
@@ -1154,9 +1158,11 @@ const SDSPaletteDark = (appTheme) => {
1154
1158
  ornamentSecondaryOnDark: appTheme.colors.gray[600],
1155
1159
  ornamentSecondaryInverse: appTheme.colors.gray[600],
1156
1160
  ornamentSecondaryPressedInverse: appTheme.colors.gray[900],
1157
- surfacePrimary: appTheme.colors.gray[100],
1158
- surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 32),
1159
- surfacePrimaryDark: appTheme.colors.gray[100],
1161
+ ornamentTertiary: appTheme.colors.gray[300],
1162
+ surfacePrimary: appTheme.colors.gray[75],
1163
+ surfaceSecondary: addOpacityToHex(appTheme.colors.gray[100], 64),
1164
+ surfaceTertiary: appTheme.colors.gray[100],
1165
+ surfacePrimaryDark: appTheme.colors.gray[75],
1160
1166
  surfaceInverse: appTheme.colors.gray[100],
1161
1167
  textDisabled: appTheme.colors.gray[300],
1162
1168
  textDisabledOnDark: appTheme.colors.gray[300],
@@ -1286,6 +1292,7 @@ const SDSPaletteDark = (appTheme) => {
1286
1292
  * This function creates the theme options for the MUI theme provider
1287
1293
  */
1288
1294
  function makeThemeOptions(appTheme, mode) {
1295
+ const semanticColors = mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme);
1289
1296
  return {
1290
1297
  app: appTheme,
1291
1298
  breakpoints: { values: Breakpoints$1 },
@@ -1326,7 +1333,14 @@ function makeThemeOptions(appTheme, mode) {
1326
1333
  disabled: appTheme.colors.gray[400],
1327
1334
  disabledBackground: appTheme.colors.gray[300]
1328
1335
  },
1329
- background: { default: mode === "dark" ? appTheme.colors.gray[75] : appTheme.colors.gray[50] },
1336
+ /**
1337
+ * What `CssBaseline` paints the page with, so it has to be the same token
1338
+ * a component fills its own background with — otherwise a component sits
1339
+ * on a page a shade off from itself. The two are only one token in dark
1340
+ * mode, where the background and the surfaces above it are deliberately
1341
+ * different shades of near-black.
1342
+ */
1343
+ background: { default: semanticColors.base.backgroundPrimary },
1330
1344
  divider: appTheme.colors.gray[200],
1331
1345
  error: {
1332
1346
  "100": appTheme.colors.red[100],
@@ -1373,7 +1387,7 @@ function makeThemeOptions(appTheme, mode) {
1373
1387
  light: appTheme.colors.blue[200],
1374
1388
  main: appTheme.colors.blue[400]
1375
1389
  },
1376
- sds: mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme),
1390
+ sds: semanticColors,
1377
1391
  secondary: {
1378
1392
  "100": appTheme.colors.green[100],
1379
1393
  "200": appTheme.colors.green[200],
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,9 +1,13 @@
1
1
  {
2
2
  "name": "@czi-sds/components",
3
- "version": "24.1.0",
3
+ "version": "24.2.1",
4
4
  "main": "dist/index.cjs.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.cjs.d.ts",
7
+ "sideEffects": [
8
+ "**/*.css",
9
+ "**/*.scss"
10
+ ],
7
11
  "repository": {
8
12
  "type": "git",
9
13
  "url": "https://github.com/chanzuckerberg/sci-components.git"
@@ -17,7 +21,6 @@
17
21
  "build-watch": "rolldown -c --watch",
18
22
  "start": "start-storybook -p 6006",
19
23
  "build-storybook": "build-storybook -o docs-build",
20
- "test-storybook": "test-storybook",
21
24
  "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
25
  "type-check": "tsc --noEmit",
23
26
  "test": "vitest run",
@@ -33,8 +36,6 @@
33
36
  "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
37
  "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
38
  "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
39
  "namespace-check": "tsc --p tsconfig-namespace-check.json"
39
40
  },
40
41
  "lint-staged": {
@@ -88,5 +89,5 @@
88
89
  "dependencies": {
89
90
  "chroma-js": "^3.1.2"
90
91
  },
91
- "gitHead": "86ab08f76d3b95b09ac6709b17f6c6d65b10d9e5"
92
+ "gitHead": "a4587a068a8e457bb068a1b170951c8f4f396bd5"
92
93
  }