@czi-sds/components 22.3.2 → 22.4.0

package/dist/variables.css

@@ -127,10 +127,13 @@
     --sds-color-semantic-base-surface-inverse: #000000;
     --sds-color-semantic-base-text-disabled: #c3c3c3;
     --sds-color-semantic-base-text-disabled-inverse: #6c6c6c;
+    --sds-color-semantic-base-text-on-fill: #ffffff;
     --sds-color-semantic-base-text-primary: #000000;
     --sds-color-semantic-base-text-primary-inverse: #ffffff;
     --sds-color-semantic-base-text-secondary: #6c6c6c;
     --sds-color-semantic-base-text-secondary-inverse: #c3c3c3;
+    --sds-color-semantic-base-text-tertiary: #a5a5a5;
+    --sds-color-semantic-base-text-tertiary-inverse: #969696;
     --sds-color-semantic-accent-border: #1a6cef;
     --sds-color-semantic-accent-border-focus: #1a6cef;
     --sds-color-semantic-accent-border-hover: #0041b9;
@@ -182,7 +185,7 @@
     --sds-color-semantic-neutral-fill-hover: #6c6c6c;
     --sds-color-semantic-neutral-fill-pressed: #3b3b3b;
     --sds-color-semantic-neutral-fill-primary: #969696;
-    --sds-color-semantic-neutral-fill-secondary: #f3f3f3;
+    --sds-color-semantic-neutral-fill-secondary: #dfdfdf;
     --sds-color-semantic-neutral-ornament: #3b3b3b;
     --sds-color-semantic-neutral-surface-primary: #969696;
     --sds-color-semantic-neutral-surface-secondary: #dfdfdf;
@@ -476,7 +479,7 @@
     --sds-color-primitive-yellow-800: #ffe6a8;
     --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
     --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
-    --sds-color-semantic-base-background-primary: #000000;
+    --sds-color-semantic-base-background-primary: #101010;
     --sds-color-semantic-base-background-primary-inverse: #ffffff;
     --sds-color-semantic-base-background-secondary: #333333;
     --sds-color-semantic-base-background-secondary-inverse: #ededed;
@@ -497,97 +500,100 @@
     --sds-color-semantic-base-fill-hover: #69696947;
     --sds-color-semantic-base-fill-open: #69696947;
     --sds-color-semantic-base-fill-pressed: #69696947;
-    --sds-color-semantic-base-fill-primary: #000000;
+    --sds-color-semantic-base-fill-primary: #333333;
     --sds-color-semantic-base-fill-selected: #ffffff;
     --sds-color-semantic-base-ornament-disabled: #696969;
     --sds-color-semantic-base-ornament-disabled-inverse: #cdcdcd;
-    --sds-color-semantic-base-ornament-on-fill: #000000;
+    --sds-color-semantic-base-ornament-on-fill: #ffffff;
     --sds-color-semantic-base-ornament-primary: #ffffff;
     --sds-color-semantic-base-ornament-primary-inverse: #000000;
     --sds-color-semantic-base-ornament-secondary: #cdcdcd;
     --sds-color-semantic-base-ornament-secondary-inverse: #696969;
     --sds-color-semantic-base-ornament-secondary-hover: #ffffff;
     --sds-color-semantic-base-ornament-secondary-pressed: #ffffff;
-    --sds-color-semantic-base-surface: #000000;
+    --sds-color-semantic-base-surface: #333333;
     --sds-color-semantic-base-surface-inverse: #ffffff;
     --sds-color-semantic-base-text-disabled: #696969;
     --sds-color-semantic-base-text-disabled-inverse: #cdcdcd;
+    --sds-color-semantic-base-text-on-fill: #ffffff;
     --sds-color-semantic-base-text-primary: #ffffff;
     --sds-color-semantic-base-text-primary-inverse: #000000;
     --sds-color-semantic-base-text-secondary: #cdcdcd;
     --sds-color-semantic-base-text-secondary-inverse: #696969;
-    --sds-color-semantic-accent-border: #5b9aff;
-    --sds-color-semantic-accent-border-focus: #5b9aff;
-    --sds-color-semantic-accent-border-hover: #a2c9ff;
-    --sds-color-semantic-accent-border-open: #5b9aff;
-    --sds-color-semantic-accent-border-pressed: #cde3ff;
-    --sds-color-semantic-accent-border-selected: #5b9aff;
-    --sds-color-semantic-accent-fill-hover: #a2c9ff;
-    --sds-color-semantic-accent-fill-pressed: #cde3ff;
-    --sds-color-semantic-accent-fill-primary: #5b9aff;
-    --sds-color-semantic-accent-ornament: #5b9aff;
-    --sds-color-semantic-accent-ornament-focus: #5b9aff;
-    --sds-color-semantic-accent-ornament-hover: #a2c9ff;
-    --sds-color-semantic-accent-ornament-open: #5b9aff;
-    --sds-color-semantic-accent-ornament-pressed: #cde3ff;
-    --sds-color-semantic-accent-ornament-selected: #5b9aff;
-    --sds-color-semantic-accent-surface-primary: #5b9aff;
+    --sds-color-semantic-base-text-tertiary: #9b9b9b;
+    --sds-color-semantic-base-text-tertiary-inverse: #aaaaaa;
+    --sds-color-semantic-accent-border: #a2c9ff;
+    --sds-color-semantic-accent-border-focus: #a2c9ff;
+    --sds-color-semantic-accent-border-hover: #cde3ff;
+    --sds-color-semantic-accent-border-open: #a2c9ff;
+    --sds-color-semantic-accent-border-pressed: #e2eeff;
+    --sds-color-semantic-accent-border-selected: #a2c9ff;
+    --sds-color-semantic-accent-fill-hover: #cde3ff;
+    --sds-color-semantic-accent-fill-pressed: #e2eeff;
+    --sds-color-semantic-accent-fill-primary: #2573f4;
+    --sds-color-semantic-accent-ornament: #a2c9ff;
+    --sds-color-semantic-accent-ornament-focus: #a2c9ff;
+    --sds-color-semantic-accent-ornament-hover: #cde3ff;
+    --sds-color-semantic-accent-ornament-open: #a2c9ff;
+    --sds-color-semantic-accent-ornament-pressed: #e2eeff;
+    --sds-color-semantic-accent-ornament-selected: #a2c9ff;
+    --sds-color-semantic-accent-surface-primary: #2573f4;
     --sds-color-semantic-accent-surface-secondary: #0f1d4a;
-    --sds-color-semantic-accent-text-action: #5b9aff;
-    --sds-color-semantic-accent-text-action-hover: #a2c9ff;
-    --sds-color-semantic-accent-text-action-pressed: #cde3ff;
+    --sds-color-semantic-accent-text-action: #a2c9ff;
+    --sds-color-semantic-accent-text-action-hover: #cde3ff;
+    --sds-color-semantic-accent-text-action-pressed: #e2eeff;
     --sds-color-semantic-beta-border: #cebef8;
-    --sds-color-semantic-beta-fill-hover: #cebef8;
-    --sds-color-semantic-beta-fill-pressed: #e4dcfc;
-    --sds-color-semantic-beta-fill-primary: #aa89ef;
+    --sds-color-semantic-beta-fill-hover: #e4dcfc;
+    --sds-color-semantic-beta-fill-pressed: #f0ebfe;
+    --sds-color-semantic-beta-fill-primary: #905de6;
     --sds-color-semantic-beta-fill-secondary: #331252;
     --sds-color-semantic-beta-ornament: #cebef8;
-    --sds-color-semantic-beta-surface-primary: #aa89ef;
+    --sds-color-semantic-beta-surface-primary: #905de6;
     --sds-color-semantic-beta-surface-secondary: #331252;
     --sds-color-semantic-beta-text: #cebef8;
     --sds-color-semantic-info-border: #a2c9ff;
-    --sds-color-semantic-info-fill-hover: #a2c9ff;
-    --sds-color-semantic-info-fill-pressed: #cde3ff;
-    --sds-color-semantic-info-fill-primary: #5b9aff;
+    --sds-color-semantic-info-fill-hover: #cde3ff;
+    --sds-color-semantic-info-fill-pressed: #e2eeff;
+    --sds-color-semantic-info-fill-primary: #2573f4;
     --sds-color-semantic-info-fill-secondary: #0f1d4a;
     --sds-color-semantic-info-ornament: #a2c9ff;
-    --sds-color-semantic-info-surface-primary: #5b9aff;
+    --sds-color-semantic-info-surface-primary: #2573f4;
     --sds-color-semantic-info-surface-secondary: #0f1d4a;
     --sds-color-semantic-info-text: #a2c9ff;
     --sds-color-semantic-negative-border: #ff988a;
-    --sds-color-semantic-negative-fill-hover: #ff988a;
-    --sds-color-semantic-negative-fill-pressed: #ffbdb3;
-    --sds-color-semantic-negative-fill-primary: #e05043;
+    --sds-color-semantic-negative-fill-hover: #ffbdb3;
+    --sds-color-semantic-negative-fill-pressed: #ffd8d1;
+    --sds-color-semantic-negative-fill-primary: #c73028;
     --sds-color-semantic-negative-fill-secondary: #330603;
     --sds-color-semantic-negative-ornament: #ff988a;
-    --sds-color-semantic-negative-surface-primary: #e05043;
+    --sds-color-semantic-negative-surface-primary: #c73028;
     --sds-color-semantic-negative-surface-secondary: #330603;
     --sds-color-semantic-negative-text: #ff988a;
     --sds-color-semantic-neutral-border: #aaaaaa;
     --sds-color-semantic-neutral-fill-hover: #cdcdcd;
     --sds-color-semantic-neutral-fill-pressed: #ededed;
     --sds-color-semantic-neutral-fill-primary: #aaaaaa;
-    --sds-color-semantic-neutral-fill-secondary: #333333;
+    --sds-color-semantic-neutral-fill-secondary: #494949;
     --sds-color-semantic-neutral-ornament: #ededed;
     --sds-color-semantic-neutral-surface-primary: #aaaaaa;
     --sds-color-semantic-neutral-surface-secondary: #494949;
     --sds-color-semantic-neutral-text: #ededed;
     --sds-color-semantic-notice-border: #e5bc63;
-    --sds-color-semantic-notice-fill-hover: #e5bc63;
-    --sds-color-semantic-notice-fill-pressed: #f5d789;
-    --sds-color-semantic-notice-fill-primary: #d9a943;
+    --sds-color-semantic-notice-fill-hover: #f5d789;
+    --sds-color-semantic-notice-fill-pressed: #ffe6a8;
+    --sds-color-semantic-notice-fill-primary: #bd8804;
     --sds-color-semantic-notice-fill-secondary: #361b07;
     --sds-color-semantic-notice-ornament: #e5bc63;
-    --sds-color-semantic-notice-surface-primary: #d9a943;
+    --sds-color-semantic-notice-surface-primary: #bd8804;
     --sds-color-semantic-notice-surface-secondary: #361b07;
     --sds-color-semantic-notice-text: #e5bc63;
     --sds-color-semantic-positive-border: #85d898;
-    --sds-color-semantic-positive-fill-hover: #85d898;
-    --sds-color-semantic-positive-fill-pressed: #bcecc5;
-    --sds-color-semantic-positive-fill-primary: #4bae68;
+    --sds-color-semantic-positive-fill-hover: #bcecc5;
+    --sds-color-semantic-positive-fill-pressed: #daf4de;
+    --sds-color-semantic-positive-fill-primary: #278b48;
     --sds-color-semantic-positive-fill-secondary: #082608;
     --sds-color-semantic-positive-ornament: #85d898;
-    --sds-color-semantic-positive-surface-primary: #4bae68;
+    --sds-color-semantic-positive-surface-primary: #278b48;
     --sds-color-semantic-positive-surface-secondary: #082608;
     --sds-color-semantic-positive-text: #85d898;
     --sds-corner-l: 20px;

package/dist/variables.scss

@@ -178,7 +178,7 @@ $sds-color-primitive-overlay-100-dark: rgba(0, 0, 0, 0.08);
 $sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
 $sds-color-primitive-overlay-200-dark: rgba(0, 0, 0, 0.03);
 $sds-color-semantic-base-background-primary: #ffffff;
-$sds-color-semantic-base-background-primary-dark: #000000;
+$sds-color-semantic-base-background-primary-dark: #101010;
 $sds-color-semantic-base-background-primary-inverse: #000000;
 $sds-color-semantic-base-background-primary-inverse-dark: #ffffff;
 $sds-color-semantic-base-background-secondary: #f3f3f3;
@@ -220,7 +220,7 @@ $sds-color-semantic-base-fill-open-dark: #69696947;
 $sds-color-semantic-base-fill-pressed: #c3c3c347;
 $sds-color-semantic-base-fill-pressed-dark: #69696947;
 $sds-color-semantic-base-fill-primary: #ffffff;
-$sds-color-semantic-base-fill-primary-dark: #000000;
+$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-ornament-disabled: #c3c3c3;
@@ -228,7 +228,7 @@ $sds-color-semantic-base-ornament-disabled-dark: #696969;
 $sds-color-semantic-base-ornament-disabled-inverse: #6c6c6c;
 $sds-color-semantic-base-ornament-disabled-inverse-dark: #cdcdcd;
 $sds-color-semantic-base-ornament-on-fill: #ffffff;
-$sds-color-semantic-base-ornament-on-fill-dark: #000000;
+$sds-color-semantic-base-ornament-on-fill-dark: #ffffff;
 $sds-color-semantic-base-ornament-primary: #000000;
 $sds-color-semantic-base-ornament-primary-dark: #ffffff;
 $sds-color-semantic-base-ornament-primary-inverse: #ffffff;
@@ -242,13 +242,15 @@ $sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff;
 $sds-color-semantic-base-ornament-secondary-pressed: #000000;
 $sds-color-semantic-base-ornament-secondary-pressed-dark: #ffffff;
 $sds-color-semantic-base-surface: #ffffff;
-$sds-color-semantic-base-surface-dark: #000000;
+$sds-color-semantic-base-surface-dark: #333333;
 $sds-color-semantic-base-surface-inverse: #000000;
 $sds-color-semantic-base-surface-inverse-dark: #ffffff;
 $sds-color-semantic-base-text-disabled: #c3c3c3;
 $sds-color-semantic-base-text-disabled-dark: #696969;
 $sds-color-semantic-base-text-disabled-inverse: #6c6c6c;
 $sds-color-semantic-base-text-disabled-inverse-dark: #cdcdcd;
+$sds-color-semantic-base-text-on-fill: #ffffff;
+$sds-color-semantic-base-text-on-fill-dark: #ffffff;
 $sds-color-semantic-base-text-primary: #000000;
 $sds-color-semantic-base-text-primary-dark: #ffffff;
 $sds-color-semantic-base-text-primary-inverse: #ffffff;
@@ -257,60 +259,64 @@ $sds-color-semantic-base-text-secondary: #6c6c6c;
 $sds-color-semantic-base-text-secondary-dark: #cdcdcd;
 $sds-color-semantic-base-text-secondary-inverse: #c3c3c3;
 $sds-color-semantic-base-text-secondary-inverse-dark: #696969;
+$sds-color-semantic-base-text-tertiary: #a5a5a5;
+$sds-color-semantic-base-text-tertiary-dark: #9b9b9b;
+$sds-color-semantic-base-text-tertiary-inverse: #969696;
+$sds-color-semantic-base-text-tertiary-inverse-dark: #aaaaaa;
 $sds-color-semantic-accent-border: #1a6cef;
-$sds-color-semantic-accent-border-dark: #5b9aff;
+$sds-color-semantic-accent-border-dark: #a2c9ff;
 $sds-color-semantic-accent-border-focus: #1a6cef;
-$sds-color-semantic-accent-border-focus-dark: #5b9aff;
+$sds-color-semantic-accent-border-focus-dark: #a2c9ff;
 $sds-color-semantic-accent-border-hover: #0041b9;
-$sds-color-semantic-accent-border-hover-dark: #a2c9ff;
+$sds-color-semantic-accent-border-hover-dark: #cde3ff;
 $sds-color-semantic-accent-border-open: #1a6cef;
-$sds-color-semantic-accent-border-open-dark: #5b9aff;
+$sds-color-semantic-accent-border-open-dark: #a2c9ff;
 $sds-color-semantic-accent-border-pressed: #002d90;
-$sds-color-semantic-accent-border-pressed-dark: #cde3ff;
+$sds-color-semantic-accent-border-pressed-dark: #e2eeff;
 $sds-color-semantic-accent-border-selected: #1a6cef;
-$sds-color-semantic-accent-border-selected-dark: #5b9aff;
+$sds-color-semantic-accent-border-selected-dark: #a2c9ff;
 $sds-color-semantic-accent-fill-hover: #0041b9;
-$sds-color-semantic-accent-fill-hover-dark: #a2c9ff;
+$sds-color-semantic-accent-fill-hover-dark: #cde3ff;
 $sds-color-semantic-accent-fill-pressed: #002d90;
-$sds-color-semantic-accent-fill-pressed-dark: #cde3ff;
+$sds-color-semantic-accent-fill-pressed-dark: #e2eeff;
 $sds-color-semantic-accent-fill-primary: #1a6cef;
-$sds-color-semantic-accent-fill-primary-dark: #5b9aff;
+$sds-color-semantic-accent-fill-primary-dark: #2573f4;
 $sds-color-semantic-accent-ornament: #1a6cef;
-$sds-color-semantic-accent-ornament-dark: #5b9aff;
+$sds-color-semantic-accent-ornament-dark: #a2c9ff;
 $sds-color-semantic-accent-ornament-focus: #1a6cef;
-$sds-color-semantic-accent-ornament-focus-dark: #5b9aff;
+$sds-color-semantic-accent-ornament-focus-dark: #a2c9ff;
 $sds-color-semantic-accent-ornament-hover: #0041b9;
-$sds-color-semantic-accent-ornament-hover-dark: #a2c9ff;
+$sds-color-semantic-accent-ornament-hover-dark: #cde3ff;
 $sds-color-semantic-accent-ornament-open: #1a6cef;
-$sds-color-semantic-accent-ornament-open-dark: #5b9aff;
+$sds-color-semantic-accent-ornament-open-dark: #a2c9ff;
 $sds-color-semantic-accent-ornament-pressed: #002d90;
-$sds-color-semantic-accent-ornament-pressed-dark: #cde3ff;
+$sds-color-semantic-accent-ornament-pressed-dark: #e2eeff;
 $sds-color-semantic-accent-ornament-selected: #1a6cef;
-$sds-color-semantic-accent-ornament-selected-dark: #5b9aff;
+$sds-color-semantic-accent-ornament-selected-dark: #a2c9ff;
 $sds-color-semantic-accent-surface-primary: #1a6cef;
-$sds-color-semantic-accent-surface-primary-dark: #5b9aff;
+$sds-color-semantic-accent-surface-primary-dark: #2573f4;
 $sds-color-semantic-accent-surface-secondary: #e2eeff;
 $sds-color-semantic-accent-surface-secondary-dark: #0f1d4a;
 $sds-color-semantic-accent-text-action: #1a6cef;
-$sds-color-semantic-accent-text-action-dark: #5b9aff;
+$sds-color-semantic-accent-text-action-dark: #a2c9ff;
 $sds-color-semantic-accent-text-action-hover: #0041b9;
-$sds-color-semantic-accent-text-action-hover-dark: #a2c9ff;
+$sds-color-semantic-accent-text-action-hover-dark: #cde3ff;
 $sds-color-semantic-accent-text-action-pressed: #002d90;
-$sds-color-semantic-accent-text-action-pressed-dark: #cde3ff;
+$sds-color-semantic-accent-text-action-pressed-dark: #e2eeff;
 $sds-color-semantic-beta-border: #6526b5;
 $sds-color-semantic-beta-border-dark: #cebef8;
 $sds-color-semantic-beta-fill-hover: #6526b5;
-$sds-color-semantic-beta-fill-hover-dark: #cebef8;
+$sds-color-semantic-beta-fill-hover-dark: #e4dcfc;
 $sds-color-semantic-beta-fill-pressed: #490092;
-$sds-color-semantic-beta-fill-pressed-dark: #e4dcfc;
+$sds-color-semantic-beta-fill-pressed-dark: #f0ebfe;
 $sds-color-semantic-beta-fill-primary: #8b54e2;
-$sds-color-semantic-beta-fill-primary-dark: #aa89ef;
+$sds-color-semantic-beta-fill-primary-dark: #905de6;
 $sds-color-semantic-beta-fill-secondary: #efeafe;
 $sds-color-semantic-beta-fill-secondary-dark: #331252;
 $sds-color-semantic-beta-ornament: #6526b5;
 $sds-color-semantic-beta-ornament-dark: #cebef8;
 $sds-color-semantic-beta-surface-primary: #8b54e2;
-$sds-color-semantic-beta-surface-primary-dark: #aa89ef;
+$sds-color-semantic-beta-surface-primary-dark: #905de6;
 $sds-color-semantic-beta-surface-secondary: #efeafe;
 $sds-color-semantic-beta-surface-secondary-dark: #331252;
 $sds-color-semantic-beta-text: #6526b5;
@@ -318,17 +324,17 @@ $sds-color-semantic-beta-text-dark: #cebef8;
 $sds-color-semantic-info-border: #0041b9;
 $sds-color-semantic-info-border-dark: #a2c9ff;
 $sds-color-semantic-info-fill-hover: #0041b9;
-$sds-color-semantic-info-fill-hover-dark: #a2c9ff;
+$sds-color-semantic-info-fill-hover-dark: #cde3ff;
 $sds-color-semantic-info-fill-pressed: #002d90;
-$sds-color-semantic-info-fill-pressed-dark: #cde3ff;
+$sds-color-semantic-info-fill-pressed-dark: #e2eeff;
 $sds-color-semantic-info-fill-primary: #1a6cef;
-$sds-color-semantic-info-fill-primary-dark: #5b9aff;
+$sds-color-semantic-info-fill-primary-dark: #2573f4;
 $sds-color-semantic-info-fill-secondary: #e2eeff;
 $sds-color-semantic-info-fill-secondary-dark: #0f1d4a;
 $sds-color-semantic-info-ornament: #0041b9;
 $sds-color-semantic-info-ornament-dark: #a2c9ff;
 $sds-color-semantic-info-surface-primary: #1a6cef;
-$sds-color-semantic-info-surface-primary-dark: #5b9aff;
+$sds-color-semantic-info-surface-primary-dark: #2573f4;
 $sds-color-semantic-info-surface-secondary: #e2eeff;
 $sds-color-semantic-info-surface-secondary-dark: #0f1d4a;
 $sds-color-semantic-info-text: #0041b9;
@@ -336,17 +342,17 @@ $sds-color-semantic-info-text-dark: #a2c9ff;
 $sds-color-semantic-negative-border: #980017;
 $sds-color-semantic-negative-border-dark: #ff988a;
 $sds-color-semantic-negative-fill-hover: #980017;
-$sds-color-semantic-negative-fill-hover-dark: #ff988a;
+$sds-color-semantic-negative-fill-hover-dark: #ffbdb3;
 $sds-color-semantic-negative-fill-pressed: #6f0008;
-$sds-color-semantic-negative-fill-pressed-dark: #ffbdb3;
+$sds-color-semantic-negative-fill-pressed-dark: #ffd8d1;
 $sds-color-semantic-negative-fill-primary: #db2131;
-$sds-color-semantic-negative-fill-primary-dark: #e05043;
+$sds-color-semantic-negative-fill-primary-dark: #c73028;
 $sds-color-semantic-negative-fill-secondary: #ffe8e6;
 $sds-color-semantic-negative-fill-secondary-dark: #330603;
 $sds-color-semantic-negative-ornament: #980017;
 $sds-color-semantic-negative-ornament-dark: #ff988a;
 $sds-color-semantic-negative-surface-primary: #db2131;
-$sds-color-semantic-negative-surface-primary-dark: #e05043;
+$sds-color-semantic-negative-surface-primary-dark: #c73028;
 $sds-color-semantic-negative-surface-secondary: #ffe8e6;
 $sds-color-semantic-negative-surface-secondary-dark: #330603;
 $sds-color-semantic-negative-text: #980017;
@@ -359,8 +365,8 @@ $sds-color-semantic-neutral-fill-pressed: #3b3b3b;
 $sds-color-semantic-neutral-fill-pressed-dark: #ededed;
 $sds-color-semantic-neutral-fill-primary: #969696;
 $sds-color-semantic-neutral-fill-primary-dark: #aaaaaa;
-$sds-color-semantic-neutral-fill-secondary: #f3f3f3;
-$sds-color-semantic-neutral-fill-secondary-dark: #333333;
+$sds-color-semantic-neutral-fill-secondary: #dfdfdf;
+$sds-color-semantic-neutral-fill-secondary-dark: #494949;
 $sds-color-semantic-neutral-ornament: #3b3b3b;
 $sds-color-semantic-neutral-ornament-dark: #ededed;
 $sds-color-semantic-neutral-surface-primary: #969696;
@@ -372,17 +378,17 @@ $sds-color-semantic-neutral-text-dark: #ededed;
 $sds-color-semantic-notice-border: #b07300;
 $sds-color-semantic-notice-border-dark: #e5bc63;
 $sds-color-semantic-notice-fill-hover: #b07300;
-$sds-color-semantic-notice-fill-hover-dark: #e5bc63;
+$sds-color-semantic-notice-fill-hover-dark: #f5d789;
 $sds-color-semantic-notice-fill-pressed: #7c3e00;
-$sds-color-semantic-notice-fill-pressed-dark: #f5d789;
+$sds-color-semantic-notice-fill-pressed-dark: #ffe6a8;
 $sds-color-semantic-notice-fill-primary: #da9900;
-$sds-color-semantic-notice-fill-primary-dark: #d9a943;
+$sds-color-semantic-notice-fill-primary-dark: #bd8804;
 $sds-color-semantic-notice-fill-secondary: #fff3db;
 $sds-color-semantic-notice-fill-secondary-dark: #361b07;
 $sds-color-semantic-notice-ornament: #b07300;
 $sds-color-semantic-notice-ornament-dark: #e5bc63;
 $sds-color-semantic-notice-surface-primary: #da9900;
-$sds-color-semantic-notice-surface-primary-dark: #d9a943;
+$sds-color-semantic-notice-surface-primary-dark: #bd8804;
 $sds-color-semantic-notice-surface-secondary: #fff3db;
 $sds-color-semantic-notice-surface-secondary-dark: #361b07;
 $sds-color-semantic-notice-text: #b07300;
@@ -390,17 +396,17 @@ $sds-color-semantic-notice-text-dark: #e5bc63;
 $sds-color-semantic-positive-border: #105b2b;
 $sds-color-semantic-positive-border-dark: #85d898;
 $sds-color-semantic-positive-fill-hover: #105b2b;
-$sds-color-semantic-positive-fill-hover-dark: #85d898;
+$sds-color-semantic-positive-fill-hover-dark: #bcecc5;
 $sds-color-semantic-positive-fill-pressed: #07431d;
-$sds-color-semantic-positive-fill-pressed-dark: #bcecc5;
+$sds-color-semantic-positive-fill-pressed-dark: #daf4de;
 $sds-color-semantic-positive-fill-primary: #238444;
-$sds-color-semantic-positive-fill-primary-dark: #4bae68;
+$sds-color-semantic-positive-fill-primary-dark: #278b48;
 $sds-color-semantic-positive-fill-secondary: #daf4de;
 $sds-color-semantic-positive-fill-secondary-dark: #082608;
 $sds-color-semantic-positive-ornament: #105b2b;
 $sds-color-semantic-positive-ornament-dark: #85d898;
 $sds-color-semantic-positive-surface-primary: #238444;
-$sds-color-semantic-positive-surface-primary-dark: #4bae68;
+$sds-color-semantic-positive-surface-primary-dark: #278b48;
 $sds-color-semantic-positive-surface-secondary: #daf4de;
 $sds-color-semantic-positive-surface-secondary-dark: #082608;
 $sds-color-semantic-positive-text: #105b2b;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/components",
-  "version": "22.3.2",
+  "version": "22.4.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.cjs.d.ts",
@@ -69,5 +69,5 @@
     "@types/react-dom": "^18.2.18",
     "style-dictionary": "^4.1.0"
   },
-  "gitHead": "04f10961aa0e17108efc5aab3b3c29867d0d3ad1"
+  "gitHead": "25b194487bf1a08ea6d2ea1917feb5ec452a39a0"
 }