@czi-sds/components 23.2.1 → 23.3.1

package/dist/variables.css

@@ -109,6 +109,14 @@
     --sds-color-semantic-accent-fill-hover: #4e18cc;
     --sds-color-semantic-accent-fill-pressed: #330296;
     --sds-color-semantic-accent-fill-primary: #6e4ff9;
+    --sds-color-semantic-accent-fill-interaction: #4e18cc;
+    --sds-color-semantic-accent-foreground: #6e4ff9;
+    --sds-color-semantic-accent-foreground-on-dark: #9d8bff;
+    --sds-color-semantic-accent-foreground-interaction: #4e18cc;
+    --sds-color-semantic-accent-foreground-interaction-on-dark: #beb5ff;
+    --sds-color-semantic-accent-foreground-pressed: #330296;
+    --sds-color-semantic-accent-foreground-pressed-on-dark: #dcd9ff;
+    --sds-color-semantic-accent-foreground-active: #6e4ff9;
     --sds-color-semantic-accent-ornament: #6e4ff9;
     --sds-color-semantic-accent-ornament-focus: #6e4ff9;
     --sds-color-semantic-accent-ornament-hover: #4e18cc;
@@ -117,6 +125,7 @@
     --sds-color-semantic-accent-ornament-selected: #6e4ff9;
     --sds-color-semantic-accent-surface-primary: #6e4ff9;
     --sds-color-semantic-accent-surface-secondary: #f1f0ff;
+    --sds-color-semantic-accent-surface-secondary-on-dark: #1d004d;
     --sds-color-semantic-accent-text-action: #6e4ff9;
     --sds-color-semantic-accent-text-action-hover: #4e18cc;
     --sds-color-semantic-accent-text-action-pressed: #330296;
@@ -139,19 +148,27 @@
     --sds-color-semantic-base-border-primary-inverse: #c3c3c3;
     --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
     --sds-color-semantic-base-border-secondary: #c3c3c3;
+    --sds-color-semantic-base-border-secondary-on-dark: #767676;
     --sds-color-semantic-base-divider: #dfdfdf;
     --sds-color-semantic-base-divider-on-dark: #3b3b3b;
     --sds-color-semantic-base-divider-inverse: #3b3b3b;
     --sds-color-semantic-base-fill-disabled: #ededed;
-    --sds-color-semantic-base-fill-interaction: #c3c3c333;
-    --sds-color-semantic-base-fill-interaction-on-dark: #c3c3c333;
+    --sds-color-semantic-base-fill-primary-interaction: #c3c3c333;
+    --sds-color-semantic-base-fill-primary-interaction-on-dark: #c3c3c333;
     --sds-color-semantic-base-fill-hover-inverse: #c3c3c333;
     --sds-color-semantic-base-fill-open-inverse: #c3c3c357;
-    --sds-color-semantic-base-fill-pressed: #c3c3c34d;
-    --sds-color-semantic-base-fill-pressed-on-dark: #c3c3c33d;
+    --sds-color-semantic-base-fill-primary-pressed: #c3c3c34d;
+    --sds-color-semantic-base-fill-primary-pressed-on-dark: #c3c3c33d;
     --sds-color-semantic-base-fill-pressed-inverse: #c3c3c357;
     --sds-color-semantic-base-fill-primary: #ffffff;
     --sds-color-semantic-base-fill-selected: #000000;
+    --sds-color-semantic-base-fill-secondary: #dfdfdf;
+    --sds-color-semantic-base-fill-secondary-interaction: #a5a5a557;
+    --sds-color-semantic-base-fill-secondary-pressed: #a5a5a599;
+    --sds-color-semantic-base-fill-secondary-on-dark: #3b3b3b;
+    --sds-color-semantic-base-fill-secondary-interaction-on-dark: #a5a5a552;
+    --sds-color-semantic-base-fill-secondary-pressed-on-dark: #a5a5a575;
+    --sds-color-semantic-base-fill-disabled-on-dark: #3b3b3b;
     --sds-color-semantic-base-ornament-disabled: #c3c3c3;
     --sds-color-semantic-base-ornament-disabled-on-dark: #767676;
     --sds-color-semantic-base-ornament-disabled-inverse: #767676;
@@ -192,6 +209,13 @@
     --sds-color-semantic-beta-surface-primary: #8b54e2;
     --sds-color-semantic-beta-surface-secondary: #efeafe;
     --sds-color-semantic-beta-text: #6526b5;
+    --sds-color-semantic-beta-fill-interaction: #6526b5;
+    --sds-color-semantic-beta-foreground: #6526b5;
+    --sds-color-semantic-beta-foreground-on-dark: #cbbaf8;
+    --sds-color-semantic-beta-foreground-interaction: #490092;
+    --sds-color-semantic-beta-foreground-interaction-on-dark: #e4dbfc;
+    --sds-color-semantic-beta-foreground-pressed: #26004c;
+    --sds-color-semantic-beta-foreground-pressed-on-dark: #efeafe;
     --sds-color-semantic-info-border: #0041b9;
     --sds-color-semantic-info-fill-hover: #0041b9;
     --sds-color-semantic-info-fill-pressed: #002d90;
@@ -201,6 +225,13 @@
     --sds-color-semantic-info-surface-primary: #1a6cef;
     --sds-color-semantic-info-surface-secondary: #edf3fd;
     --sds-color-semantic-info-text: #0041b9;
+    --sds-color-semantic-info-fill-interaction: #0041b9;
+    --sds-color-semantic-info-foreground: #0041b9;
+    --sds-color-semantic-info-foreground-on-dark: #9dc6ff;
+    --sds-color-semantic-info-foreground-interaction: #002d90;
+    --sds-color-semantic-info-foreground-interaction-on-dark: #cce1ff;
+    --sds-color-semantic-info-foreground-pressed: #00114a;
+    --sds-color-semantic-info-foreground-pressed-on-dark: #edf3fd;
     --sds-color-semantic-negative-border: #b80017;
     --sds-color-semantic-negative-fill-hover: #b80017;
     --sds-color-semantic-negative-fill-pressed: #6f0008;
@@ -210,6 +241,13 @@
     --sds-color-semantic-negative-surface-primary: #db2131;
     --sds-color-semantic-negative-surface-secondary: #ffe8e6;
     --sds-color-semantic-negative-text: #b80017;
+    --sds-color-semantic-negative-fill-interaction: #b80017;
+    --sds-color-semantic-negative-foreground: #b80017;
+    --sds-color-semantic-negative-foreground-on-dark: #ffafa8;
+    --sds-color-semantic-negative-foreground-interaction: #6f0008;
+    --sds-color-semantic-negative-foreground-interaction-on-dark: #ffd6d2;
+    --sds-color-semantic-negative-foreground-pressed: #340000;
+    --sds-color-semantic-negative-foreground-pressed-on-dark: #ffe8e6;
     --sds-color-semantic-neutral-border: #3b3b3b;
     --sds-color-semantic-neutral-fill-hover: #3b3b3b;
     --sds-color-semantic-neutral-fill-pressed: #1b1b1b;
@@ -219,6 +257,13 @@
     --sds-color-semantic-neutral-surface-primary: #767676;
     --sds-color-semantic-neutral-surface-secondary: #dfdfdf;
     --sds-color-semantic-neutral-text: #3b3b3b;
+    --sds-color-semantic-neutral-fill-interaction: #3b3b3b;
+    --sds-color-semantic-neutral-foreground: #3b3b3b;
+    --sds-color-semantic-neutral-foreground-on-dark: #c3c3c3;
+    --sds-color-semantic-neutral-foreground-interaction: #1b1b1b;
+    --sds-color-semantic-neutral-foreground-interaction-on-dark: #dfdfdf;
+    --sds-color-semantic-neutral-foreground-pressed: #000000;
+    --sds-color-semantic-neutral-foreground-pressed-on-dark: #ededed;
     --sds-color-semantic-notice-border: #b07300;
     --sds-color-semantic-notice-fill-hover: #b07300;
     --sds-color-semantic-notice-fill-pressed: #7c3e00;
@@ -228,6 +273,13 @@
     --sds-color-semantic-notice-surface-primary: #da9900;
     --sds-color-semantic-notice-surface-secondary: #fff3db;
     --sds-color-semantic-notice-text: #b07300;
+    --sds-color-semantic-notice-fill-interaction: #b07300;
+    --sds-color-semantic-notice-foreground: #b07300;
+    --sds-color-semantic-notice-foreground-on-dark: #ffca5c;
+    --sds-color-semantic-notice-foreground-interaction: #7c3e00;
+    --sds-color-semantic-notice-foreground-interaction-on-dark: #ffdb97;
+    --sds-color-semantic-notice-foreground-pressed: #541700;
+    --sds-color-semantic-notice-foreground-pressed-on-dark: #fff3db;
     --sds-color-semantic-positive-border: #105b2b;
     --sds-color-semantic-positive-fill-hover: #105b2b;
     --sds-color-semantic-positive-fill-pressed: #07431d;
@@ -237,6 +289,13 @@
     --sds-color-semantic-positive-surface-primary: #238444;
     --sds-color-semantic-positive-surface-secondary: #ebf9ed;
     --sds-color-semantic-positive-text: #105b2b;
+    --sds-color-semantic-positive-fill-interaction: #105b2b;
+    --sds-color-semantic-positive-foreground: #105b2b;
+    --sds-color-semantic-positive-foreground-on-dark: #7fd693;
+    --sds-color-semantic-positive-foreground-interaction: #07431d;
+    --sds-color-semantic-positive-foreground-interaction-on-dark: #b9ecc3;
+    --sds-color-semantic-positive-foreground-pressed: #001f00;
+    --sds-color-semantic-positive-foreground-pressed-on-dark: #ebf9ed;
     --sds-corner-rounded: 20px;
     --sds-corner-xl: 8px;
     --sds-corner-l: 6px;
@@ -956,16 +1015,18 @@
       Helvetica, Arial, sans-serif;
     --sds-font-title-l-700-letter-spacing: 0px;
     --sds-font-title-l-700-letter-spacing-narrow: 0px;
+    --sds-icon-size-xxs-height: 10px;
+    --sds-icon-size-xxs-width: 10px;
+    --sds-icon-size-xs-height: 12px;
+    --sds-icon-size-xs-width: 12px;
+    --sds-icon-size-s-height: 16px;
+    --sds-icon-size-s-width: 16px;
     --sds-icon-size-input-height: 16px;
     --sds-icon-size-input-width: 16px;
     --sds-icon-size-l-height: 24px;
     --sds-icon-size-l-width: 24px;
-    --sds-icon-size-s-height: 16px;
-    --sds-icon-size-s-width: 16px;
     --sds-icon-size-xl-height: 32px;
     --sds-icon-size-xl-width: 32px;
-    --sds-icon-size-xs-height: 12px;
-    --sds-icon-size-xs-width: 12px;
     --sds-space-xxxs: 2px;
     --sds-space-xxs: 4px;
     --sds-space-xs: 6px;
@@ -1090,6 +1151,14 @@
     --sds-color-semantic-accent-fill-hover: #dcd9ff;
     --sds-color-semantic-accent-fill-pressed: #f1f0ff;
     --sds-color-semantic-accent-fill-primary: #6e4ff9;
+    --sds-color-semantic-accent-fill-interaction: #dcd9ff;
+    --sds-color-semantic-accent-foreground: #beb5ff;
+    --sds-color-semantic-accent-foreground-on-dark: #beb5ff;
+    --sds-color-semantic-accent-foreground-interaction: #dcd9ff;
+    --sds-color-semantic-accent-foreground-interaction-on-dark: #dcd9ff;
+    --sds-color-semantic-accent-foreground-pressed: #f1f0ff;
+    --sds-color-semantic-accent-foreground-pressed-on-dark: #f1f0ff;
+    --sds-color-semantic-accent-foreground-active: #beb5ff;
     --sds-color-semantic-accent-ornament: #beb5ff;
     --sds-color-semantic-accent-ornament-focus: #beb5ff;
     --sds-color-semantic-accent-ornament-hover: #dcd9ff;
@@ -1098,6 +1167,7 @@
     --sds-color-semantic-accent-ornament-selected: #beb5ff;
     --sds-color-semantic-accent-surface-primary: #6e4ff9;
     --sds-color-semantic-accent-surface-secondary: #1d004d;
+    --sds-color-semantic-accent-surface-secondary-on-dark: #1d004d;
     --sds-color-semantic-accent-text-action: #beb5ff;
     --sds-color-semantic-accent-text-action-hover: #dcd9ff;
     --sds-color-semantic-accent-text-action-pressed: #f1f0ff;
@@ -1120,19 +1190,27 @@
     --sds-color-semantic-base-border-primary-inverse: #cdcdcd;
     --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
     --sds-color-semantic-base-border-secondary: #696969;
+    --sds-color-semantic-base-border-secondary-on-dark: #696969;
     --sds-color-semantic-base-divider: #494949;
     --sds-color-semantic-base-divider-on-dark: #494949;
     --sds-color-semantic-base-divider-inverse: #494949;
     --sds-color-semantic-base-fill-disabled: #333333;
-    --sds-color-semantic-base-fill-interaction: #69696952;
-    --sds-color-semantic-base-fill-interaction-on-dark: #69696952;
+    --sds-color-semantic-base-fill-primary-interaction: #69696952;
+    --sds-color-semantic-base-fill-primary-interaction-on-dark: #69696952;
     --sds-color-semantic-base-fill-hover-inverse: #69696952;
     --sds-color-semantic-base-fill-open-inverse: #69696952;
-    --sds-color-semantic-base-fill-pressed: #69696966;
-    --sds-color-semantic-base-fill-pressed-on-dark: #69696966;
+    --sds-color-semantic-base-fill-primary-pressed: #69696966;
+    --sds-color-semantic-base-fill-primary-pressed-on-dark: #69696966;
     --sds-color-semantic-base-fill-pressed-inverse: #69696952;
     --sds-color-semantic-base-fill-primary: #333333;
     --sds-color-semantic-base-fill-selected: #ffffff;
+    --sds-color-semantic-base-fill-secondary: #494949;
+    --sds-color-semantic-base-fill-secondary-interaction: #94949442;
+    --sds-color-semantic-base-fill-secondary-pressed: #94949475;
+    --sds-color-semantic-base-fill-secondary-on-dark: #494949;
+    --sds-color-semantic-base-fill-secondary-interaction-on-dark: #94949457;
+    --sds-color-semantic-base-fill-secondary-pressed-on-dark: #94949475;
+    --sds-color-semantic-base-fill-disabled-on-dark: #333333;
     --sds-color-semantic-base-ornament-disabled: #696969;
     --sds-color-semantic-base-ornament-disabled-on-dark: #696969;
     --sds-color-semantic-base-ornament-disabled-inverse: #696969;
@@ -1173,6 +1251,13 @@
     --sds-color-semantic-beta-surface-primary: #9261e6;
     --sds-color-semantic-beta-surface-secondary: #331252;
     --sds-color-semantic-beta-text: #cebef8;
+    --sds-color-semantic-beta-fill-interaction: #e4dcfc;
+    --sds-color-semantic-beta-foreground: #cebef8;
+    --sds-color-semantic-beta-foreground-on-dark: #cebef8;
+    --sds-color-semantic-beta-foreground-interaction: #e4dcfc;
+    --sds-color-semantic-beta-foreground-interaction-on-dark: #e4dcfc;
+    --sds-color-semantic-beta-foreground-pressed: #f0ebfe;
+    --sds-color-semantic-beta-foreground-pressed-on-dark: #f0ebfe;
     --sds-color-semantic-info-border: #a2c9ff;
     --sds-color-semantic-info-fill-hover: #cde3ff;
     --sds-color-semantic-info-fill-pressed: #e2eeff;
@@ -1182,6 +1267,13 @@
     --sds-color-semantic-info-surface-primary: #2876f9;
     --sds-color-semantic-info-surface-secondary: #0f1d4a;
     --sds-color-semantic-info-text: #a2c9ff;
+    --sds-color-semantic-info-fill-interaction: #cde3ff;
+    --sds-color-semantic-info-foreground: #a2c9ff;
+    --sds-color-semantic-info-foreground-on-dark: #a2c9ff;
+    --sds-color-semantic-info-foreground-interaction: #cde3ff;
+    --sds-color-semantic-info-foreground-interaction-on-dark: #cde3ff;
+    --sds-color-semantic-info-foreground-pressed: #e2eeff;
+    --sds-color-semantic-info-foreground-pressed-on-dark: #e2eeff;
     --sds-color-semantic-negative-border: #ff988a;
     --sds-color-semantic-negative-fill-hover: #ffbdb3;
     --sds-color-semantic-negative-fill-pressed: #ffd8d1;
@@ -1191,6 +1283,13 @@
     --sds-color-semantic-negative-surface-primary: #df453c;
     --sds-color-semantic-negative-surface-secondary: #330603;
     --sds-color-semantic-negative-text: #ff988a;
+    --sds-color-semantic-negative-fill-interaction: #ffbdb3;
+    --sds-color-semantic-negative-foreground: #ff988a;
+    --sds-color-semantic-negative-foreground-on-dark: #ff988a;
+    --sds-color-semantic-negative-foreground-interaction: #ffbdb3;
+    --sds-color-semantic-negative-foreground-interaction-on-dark: #ffbdb3;
+    --sds-color-semantic-negative-foreground-pressed: #ffd8d1;
+    --sds-color-semantic-negative-foreground-pressed-on-dark: #ffd8d1;
     --sds-color-semantic-neutral-border: #ededed;
     --sds-color-semantic-neutral-fill-hover: #cdcdcd;
     --sds-color-semantic-neutral-fill-pressed: #ededed;
@@ -1200,6 +1299,13 @@
     --sds-color-semantic-neutral-surface-primary: #949494;
     --sds-color-semantic-neutral-surface-secondary: #494949;
     --sds-color-semantic-neutral-text: #ededed;
+    --sds-color-semantic-neutral-fill-interaction: #cdcdcd;
+    --sds-color-semantic-neutral-foreground: #ededed;
+    --sds-color-semantic-neutral-foreground-on-dark: #ededed;
+    --sds-color-semantic-neutral-foreground-interaction: #fafafa;
+    --sds-color-semantic-neutral-foreground-interaction-on-dark: #fafafa;
+    --sds-color-semantic-neutral-foreground-pressed: #ffffff;
+    --sds-color-semantic-neutral-foreground-pressed-on-dark: #ffffff;
     --sds-color-semantic-notice-border: #e5bc63;
     --sds-color-semantic-notice-fill-hover: #f5d789;
     --sds-color-semantic-notice-fill-pressed: #ffe6a8;
@@ -1209,6 +1315,13 @@
     --sds-color-semantic-notice-surface-primary: #bd8804;
     --sds-color-semantic-notice-surface-secondary: #361b07;
     --sds-color-semantic-notice-text: #e5bc63;
+    --sds-color-semantic-notice-fill-interaction: #f5d789;
+    --sds-color-semantic-notice-foreground: #e5bc63;
+    --sds-color-semantic-notice-foreground-on-dark: #e5bc63;
+    --sds-color-semantic-notice-foreground-interaction: #f5d789;
+    --sds-color-semantic-notice-foreground-interaction-on-dark: #f5d789;
+    --sds-color-semantic-notice-foreground-pressed: #ffe6a8;
+    --sds-color-semantic-notice-foreground-pressed-on-dark: #ffe6a8;
     --sds-color-semantic-positive-border: #85d898;
     --sds-color-semantic-positive-fill-hover: #bcecc5;
     --sds-color-semantic-positive-fill-pressed: #daf4de;
@@ -1218,6 +1331,13 @@
     --sds-color-semantic-positive-surface-primary: #2b8e4b;
     --sds-color-semantic-positive-surface-secondary: #082608;
     --sds-color-semantic-positive-text: #85d898;
+    --sds-color-semantic-positive-fill-interaction: #bcecc5;
+    --sds-color-semantic-positive-foreground: #85d898;
+    --sds-color-semantic-positive-foreground-on-dark: #85d898;
+    --sds-color-semantic-positive-foreground-interaction: #bcecc5;
+    --sds-color-semantic-positive-foreground-interaction-on-dark: #bcecc5;
+    --sds-color-semantic-positive-foreground-pressed: #daf4de;
+    --sds-color-semantic-positive-foreground-pressed-on-dark: #daf4de;
     --sds-corner-rounded: 20px;
     --sds-corner-xl: 8px;
     --sds-corner-l: 6px;
@@ -1937,16 +2057,18 @@
       Helvetica, Arial, sans-serif;
     --sds-font-title-l-700-letter-spacing: 0px;
     --sds-font-title-l-700-letter-spacing-narrow: 0px;
+    --sds-icon-size-xxs-height: 10px;
+    --sds-icon-size-xxs-width: 10px;
+    --sds-icon-size-xs-height: 12px;
+    --sds-icon-size-xs-width: 12px;
+    --sds-icon-size-s-height: 16px;
+    --sds-icon-size-s-width: 16px;
     --sds-icon-size-input-height: 16px;
     --sds-icon-size-input-width: 16px;
     --sds-icon-size-l-height: 24px;
     --sds-icon-size-l-width: 24px;
-    --sds-icon-size-s-height: 16px;
-    --sds-icon-size-s-width: 16px;
     --sds-icon-size-xl-height: 32px;
     --sds-icon-size-xl-width: 32px;
-    --sds-icon-size-xs-height: 12px;
-    --sds-icon-size-xs-width: 12px;
     --sds-space-xxxs: 2px;
     --sds-space-xxs: 4px;
     --sds-space-xs: 6px;

package/dist/variables.scss

@@ -213,6 +213,22 @@ $sds-color-semantic-accent-fill-pressed: #330296;
 $sds-color-semantic-accent-fill-pressed-dark: #f1f0ff;
 $sds-color-semantic-accent-fill-primary: #6e4ff9;
 $sds-color-semantic-accent-fill-primary-dark: #6e4ff9;
+$sds-color-semantic-accent-fill-interaction: #4e18cc;
+$sds-color-semantic-accent-fill-interaction-dark: #dcd9ff;
+$sds-color-semantic-accent-foreground: #6e4ff9;
+$sds-color-semantic-accent-foreground-dark: #beb5ff;
+$sds-color-semantic-accent-foreground-on-dark: #9d8bff;
+$sds-color-semantic-accent-foreground-on-dark-dark: #beb5ff;
+$sds-color-semantic-accent-foreground-interaction: #4e18cc;
+$sds-color-semantic-accent-foreground-interaction-dark: #dcd9ff;
+$sds-color-semantic-accent-foreground-interaction-on-dark: #beb5ff;
+$sds-color-semantic-accent-foreground-interaction-on-dark-dark: #dcd9ff;
+$sds-color-semantic-accent-foreground-pressed: #330296;
+$sds-color-semantic-accent-foreground-pressed-dark: #f1f0ff;
+$sds-color-semantic-accent-foreground-pressed-on-dark: #dcd9ff;
+$sds-color-semantic-accent-foreground-pressed-on-dark-dark: #f1f0ff;
+$sds-color-semantic-accent-foreground-active: #6e4ff9;
+$sds-color-semantic-accent-foreground-active-dark: #beb5ff;
 $sds-color-semantic-accent-ornament: #6e4ff9;
 $sds-color-semantic-accent-ornament-dark: #beb5ff;
 $sds-color-semantic-accent-ornament-focus: #6e4ff9;
@@ -229,6 +245,8 @@ $sds-color-semantic-accent-surface-primary: #6e4ff9;
 $sds-color-semantic-accent-surface-primary-dark: #6e4ff9;
 $sds-color-semantic-accent-surface-secondary: #f1f0ff;
 $sds-color-semantic-accent-surface-secondary-dark: #1d004d;
+$sds-color-semantic-accent-surface-secondary-on-dark: #1d004d;
+$sds-color-semantic-accent-surface-secondary-on-dark-dark: #1d004d;
 $sds-color-semantic-accent-text-action: #6e4ff9;
 $sds-color-semantic-accent-text-action-dark: #beb5ff;
 $sds-color-semantic-accent-text-action-hover: #4e18cc;
@@ -273,6 +291,8 @@ $sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
 $sds-color-semantic-base-border-primary-pressed-inverse-dark: #ffffff;
 $sds-color-semantic-base-border-secondary: #c3c3c3;
 $sds-color-semantic-base-border-secondary-dark: #696969;
+$sds-color-semantic-base-border-secondary-on-dark: #767676;
+$sds-color-semantic-base-border-secondary-on-dark-dark: #696969;
 $sds-color-semantic-base-divider: #dfdfdf;
 $sds-color-semantic-base-divider-dark: #494949;
 $sds-color-semantic-base-divider-on-dark: #3b3b3b;
@@ -281,24 +301,38 @@ $sds-color-semantic-base-divider-inverse: #3b3b3b;
 $sds-color-semantic-base-divider-inverse-dark: #494949;
 $sds-color-semantic-base-fill-disabled: #ededed;
 $sds-color-semantic-base-fill-disabled-dark: #333333;
-$sds-color-semantic-base-fill-interaction: #c3c3c333;
-$sds-color-semantic-base-fill-interaction-dark: #69696952;
-$sds-color-semantic-base-fill-interaction-on-dark: #c3c3c333;
-$sds-color-semantic-base-fill-interaction-on-dark-dark: #69696952;
+$sds-color-semantic-base-fill-primary-interaction: #c3c3c333;
+$sds-color-semantic-base-fill-primary-interaction-dark: #69696952;
+$sds-color-semantic-base-fill-primary-interaction-on-dark: #c3c3c333;
+$sds-color-semantic-base-fill-primary-interaction-on-dark-dark: #69696952;
 $sds-color-semantic-base-fill-hover-inverse: #c3c3c333;
 $sds-color-semantic-base-fill-hover-inverse-dark: #69696952;
 $sds-color-semantic-base-fill-open-inverse: #c3c3c357;
 $sds-color-semantic-base-fill-open-inverse-dark: #69696952;
-$sds-color-semantic-base-fill-pressed: #c3c3c34d;
-$sds-color-semantic-base-fill-pressed-dark: #69696966;
-$sds-color-semantic-base-fill-pressed-on-dark: #c3c3c33d;
-$sds-color-semantic-base-fill-pressed-on-dark-dark: #69696966;
+$sds-color-semantic-base-fill-primary-pressed: #c3c3c34d;
+$sds-color-semantic-base-fill-primary-pressed-dark: #69696966;
+$sds-color-semantic-base-fill-primary-pressed-on-dark: #c3c3c33d;
+$sds-color-semantic-base-fill-primary-pressed-on-dark-dark: #69696966;
 $sds-color-semantic-base-fill-pressed-inverse: #c3c3c357;
 $sds-color-semantic-base-fill-pressed-inverse-dark: #69696952;
 $sds-color-semantic-base-fill-primary: #ffffff;
 $sds-color-semantic-base-fill-primary-dark: #333333;
 $sds-color-semantic-base-fill-selected: #000000;
 $sds-color-semantic-base-fill-selected-dark: #ffffff;
+$sds-color-semantic-base-fill-secondary: #dfdfdf;
+$sds-color-semantic-base-fill-secondary-dark: #494949;
+$sds-color-semantic-base-fill-secondary-interaction: #a5a5a557;
+$sds-color-semantic-base-fill-secondary-interaction-dark: #94949442;
+$sds-color-semantic-base-fill-secondary-pressed: #a5a5a599;
+$sds-color-semantic-base-fill-secondary-pressed-dark: #94949475;
+$sds-color-semantic-base-fill-secondary-on-dark: #3b3b3b;
+$sds-color-semantic-base-fill-secondary-on-dark-dark: #494949;
+$sds-color-semantic-base-fill-secondary-interaction-on-dark: #a5a5a552;
+$sds-color-semantic-base-fill-secondary-interaction-on-dark-dark: #94949457;
+$sds-color-semantic-base-fill-secondary-pressed-on-dark: #a5a5a575;
+$sds-color-semantic-base-fill-secondary-pressed-on-dark-dark: #94949475;
+$sds-color-semantic-base-fill-disabled-on-dark: #3b3b3b;
+$sds-color-semantic-base-fill-disabled-on-dark-dark: #333333;
 $sds-color-semantic-base-ornament-disabled: #c3c3c3;
 $sds-color-semantic-base-ornament-disabled-dark: #696969;
 $sds-color-semantic-base-ornament-disabled-on-dark: #767676;
@@ -379,6 +413,20 @@ $sds-color-semantic-beta-surface-secondary: #efeafe;
 $sds-color-semantic-beta-surface-secondary-dark: #331252;
 $sds-color-semantic-beta-text: #6526b5;
 $sds-color-semantic-beta-text-dark: #cebef8;
+$sds-color-semantic-beta-fill-interaction: #6526b5;
+$sds-color-semantic-beta-fill-interaction-dark: #e4dcfc;
+$sds-color-semantic-beta-foreground: #6526b5;
+$sds-color-semantic-beta-foreground-dark: #cebef8;
+$sds-color-semantic-beta-foreground-on-dark: #cbbaf8;
+$sds-color-semantic-beta-foreground-on-dark-dark: #cebef8;
+$sds-color-semantic-beta-foreground-interaction: #490092;
+$sds-color-semantic-beta-foreground-interaction-dark: #e4dcfc;
+$sds-color-semantic-beta-foreground-interaction-on-dark: #e4dbfc;
+$sds-color-semantic-beta-foreground-interaction-on-dark-dark: #e4dcfc;
+$sds-color-semantic-beta-foreground-pressed: #26004c;
+$sds-color-semantic-beta-foreground-pressed-dark: #f0ebfe;
+$sds-color-semantic-beta-foreground-pressed-on-dark: #efeafe;
+$sds-color-semantic-beta-foreground-pressed-on-dark-dark: #f0ebfe;
 $sds-color-semantic-info-border: #0041b9;
 $sds-color-semantic-info-border-dark: #a2c9ff;
 $sds-color-semantic-info-fill-hover: #0041b9;
@@ -397,6 +445,20 @@ $sds-color-semantic-info-surface-secondary: #edf3fd;
 $sds-color-semantic-info-surface-secondary-dark: #0f1d4a;
 $sds-color-semantic-info-text: #0041b9;
 $sds-color-semantic-info-text-dark: #a2c9ff;
+$sds-color-semantic-info-fill-interaction: #0041b9;
+$sds-color-semantic-info-fill-interaction-dark: #cde3ff;
+$sds-color-semantic-info-foreground: #0041b9;
+$sds-color-semantic-info-foreground-dark: #a2c9ff;
+$sds-color-semantic-info-foreground-on-dark: #9dc6ff;
+$sds-color-semantic-info-foreground-on-dark-dark: #a2c9ff;
+$sds-color-semantic-info-foreground-interaction: #002d90;
+$sds-color-semantic-info-foreground-interaction-dark: #cde3ff;
+$sds-color-semantic-info-foreground-interaction-on-dark: #cce1ff;
+$sds-color-semantic-info-foreground-interaction-on-dark-dark: #cde3ff;
+$sds-color-semantic-info-foreground-pressed: #00114a;
+$sds-color-semantic-info-foreground-pressed-dark: #e2eeff;
+$sds-color-semantic-info-foreground-pressed-on-dark: #edf3fd;
+$sds-color-semantic-info-foreground-pressed-on-dark-dark: #e2eeff;
 $sds-color-semantic-negative-border: #b80017;
 $sds-color-semantic-negative-border-dark: #ff988a;
 $sds-color-semantic-negative-fill-hover: #b80017;
@@ -415,6 +477,20 @@ $sds-color-semantic-negative-surface-secondary: #ffe8e6;
 $sds-color-semantic-negative-surface-secondary-dark: #330603;
 $sds-color-semantic-negative-text: #b80017;
 $sds-color-semantic-negative-text-dark: #ff988a;
+$sds-color-semantic-negative-fill-interaction: #b80017;
+$sds-color-semantic-negative-fill-interaction-dark: #ffbdb3;
+$sds-color-semantic-negative-foreground: #b80017;
+$sds-color-semantic-negative-foreground-dark: #ff988a;
+$sds-color-semantic-negative-foreground-on-dark: #ffafa8;
+$sds-color-semantic-negative-foreground-on-dark-dark: #ff988a;
+$sds-color-semantic-negative-foreground-interaction: #6f0008;
+$sds-color-semantic-negative-foreground-interaction-dark: #ffbdb3;
+$sds-color-semantic-negative-foreground-interaction-on-dark: #ffd6d2;
+$sds-color-semantic-negative-foreground-interaction-on-dark-dark: #ffbdb3;
+$sds-color-semantic-negative-foreground-pressed: #340000;
+$sds-color-semantic-negative-foreground-pressed-dark: #ffd8d1;
+$sds-color-semantic-negative-foreground-pressed-on-dark: #ffe8e6;
+$sds-color-semantic-negative-foreground-pressed-on-dark-dark: #ffd8d1;
 $sds-color-semantic-neutral-border: #3b3b3b;
 $sds-color-semantic-neutral-border-dark: #ededed;
 $sds-color-semantic-neutral-fill-hover: #3b3b3b;
@@ -433,6 +509,20 @@ $sds-color-semantic-neutral-surface-secondary: #dfdfdf;
 $sds-color-semantic-neutral-surface-secondary-dark: #494949;
 $sds-color-semantic-neutral-text: #3b3b3b;
 $sds-color-semantic-neutral-text-dark: #ededed;
+$sds-color-semantic-neutral-fill-interaction: #3b3b3b;
+$sds-color-semantic-neutral-fill-interaction-dark: #cdcdcd;
+$sds-color-semantic-neutral-foreground: #3b3b3b;
+$sds-color-semantic-neutral-foreground-dark: #ededed;
+$sds-color-semantic-neutral-foreground-on-dark: #c3c3c3;
+$sds-color-semantic-neutral-foreground-on-dark-dark: #ededed;
+$sds-color-semantic-neutral-foreground-interaction: #1b1b1b;
+$sds-color-semantic-neutral-foreground-interaction-dark: #fafafa;
+$sds-color-semantic-neutral-foreground-interaction-on-dark: #dfdfdf;
+$sds-color-semantic-neutral-foreground-interaction-on-dark-dark: #fafafa;
+$sds-color-semantic-neutral-foreground-pressed: #000000;
+$sds-color-semantic-neutral-foreground-pressed-dark: #ffffff;
+$sds-color-semantic-neutral-foreground-pressed-on-dark: #ededed;
+$sds-color-semantic-neutral-foreground-pressed-on-dark-dark: #ffffff;
 $sds-color-semantic-notice-border: #b07300;
 $sds-color-semantic-notice-border-dark: #e5bc63;
 $sds-color-semantic-notice-fill-hover: #b07300;
@@ -451,6 +541,20 @@ $sds-color-semantic-notice-surface-secondary: #fff3db;
 $sds-color-semantic-notice-surface-secondary-dark: #361b07;
 $sds-color-semantic-notice-text: #b07300;
 $sds-color-semantic-notice-text-dark: #e5bc63;
+$sds-color-semantic-notice-fill-interaction: #b07300;
+$sds-color-semantic-notice-fill-interaction-dark: #f5d789;
+$sds-color-semantic-notice-foreground: #b07300;
+$sds-color-semantic-notice-foreground-dark: #e5bc63;
+$sds-color-semantic-notice-foreground-on-dark: #ffca5c;
+$sds-color-semantic-notice-foreground-on-dark-dark: #e5bc63;
+$sds-color-semantic-notice-foreground-interaction: #7c3e00;
+$sds-color-semantic-notice-foreground-interaction-dark: #f5d789;
+$sds-color-semantic-notice-foreground-interaction-on-dark: #ffdb97;
+$sds-color-semantic-notice-foreground-interaction-on-dark-dark: #f5d789;
+$sds-color-semantic-notice-foreground-pressed: #541700;
+$sds-color-semantic-notice-foreground-pressed-dark: #ffe6a8;
+$sds-color-semantic-notice-foreground-pressed-on-dark: #fff3db;
+$sds-color-semantic-notice-foreground-pressed-on-dark-dark: #ffe6a8;
 $sds-color-semantic-positive-border: #105b2b;
 $sds-color-semantic-positive-border-dark: #85d898;
 $sds-color-semantic-positive-fill-hover: #105b2b;
@@ -469,6 +573,20 @@ $sds-color-semantic-positive-surface-secondary: #ebf9ed;
 $sds-color-semantic-positive-surface-secondary-dark: #082608;
 $sds-color-semantic-positive-text: #105b2b;
 $sds-color-semantic-positive-text-dark: #85d898;
+$sds-color-semantic-positive-fill-interaction: #105b2b;
+$sds-color-semantic-positive-fill-interaction-dark: #bcecc5;
+$sds-color-semantic-positive-foreground: #105b2b;
+$sds-color-semantic-positive-foreground-dark: #85d898;
+$sds-color-semantic-positive-foreground-on-dark: #7fd693;
+$sds-color-semantic-positive-foreground-on-dark-dark: #85d898;
+$sds-color-semantic-positive-foreground-interaction: #07431d;
+$sds-color-semantic-positive-foreground-interaction-dark: #bcecc5;
+$sds-color-semantic-positive-foreground-interaction-on-dark: #b9ecc3;
+$sds-color-semantic-positive-foreground-interaction-on-dark-dark: #bcecc5;
+$sds-color-semantic-positive-foreground-pressed: #001f00;
+$sds-color-semantic-positive-foreground-pressed-dark: #daf4de;
+$sds-color-semantic-positive-foreground-pressed-on-dark: #ebf9ed;
+$sds-color-semantic-positive-foreground-pressed-on-dark-dark: #daf4de;
 $sds-corner-rounded: 20px;
 $sds-corner-xl: 8px;
 $sds-corner-l: 6px;
@@ -2445,16 +2563,18 @@ $sds-font-title-l-700-font-narrow:
   sans-serif;
 $sds-font-title-l-700-letter-spacing: 0px;
 $sds-font-title-l-700-letter-spacing-narrow: 0px;
+$sds-icon-size-xxs-height: 10px;
+$sds-icon-size-xxs-width: 10px;
+$sds-icon-size-xs-height: 12px;
+$sds-icon-size-xs-width: 12px;
+$sds-icon-size-s-height: 16px;
+$sds-icon-size-s-width: 16px;
 $sds-icon-size-input-height: 16px;
 $sds-icon-size-input-width: 16px;
 $sds-icon-size-l-height: 24px;
 $sds-icon-size-l-width: 24px;
-$sds-icon-size-s-height: 16px;
-$sds-icon-size-s-width: 16px;
 $sds-icon-size-xl-height: 32px;
 $sds-icon-size-xl-width: 32px;
-$sds-icon-size-xs-height: 12px;
-$sds-icon-size-xs-width: 12px;
 $sds-space-xxxs: 2px;
 $sds-space-xxs: 4px;
 $sds-space-xs: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/components",
-  "version": "23.2.1",
+  "version": "23.3.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.cjs.d.ts",
@@ -87,5 +87,5 @@
   "dependencies": {
     "chroma-js": "^3.1.2"
   },
-  "gitHead": "e310175738cf386b5c770c0c9e8ba2ca527f6fd6"
+  "gitHead": "3376bf71f631e27bb6497bdbb7906ab601865965"
 }