diff --git a/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx b/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
index 51f780914..02cdfc875 100644
--- a/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
+++ b/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
@@ -6,7 +6,7 @@ import CustomSvgIcon from "./customSvgIcon";
 
 export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
   {
-    icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" sdsType="static" />,
+    icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" />,
     name: "Column One",
     options: [
       {
@@ -35,7 +35,7 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
     width: 260,
   },
   {
-    icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" sdsType="static" />,
+    icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" />,
     name: "Column Two",
     options: [
       {
@@ -68,14 +68,12 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
     name: "Column Three",
     options: [
       {
-        icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
+        icon: <CustomSdsIcon sdsSize="s" color="green" shade={600} />,
         name: "Custom SDS Icon",
         section: "With Icon",
       },
       {
-        icon: (
-          <CustomSvgIcon sx={{ color: "#969696", height: 16, width: 16 }} />
-        ),
+        icon: <CustomSvgIcon sx={{ color: "orange", height: 16, width: 16 }} />,
         name: "Custom SVG Icon",
         section: "With Icon",
       },
diff --git a/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx b/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
index 84eea3891..ee12bf953 100644
--- a/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
+++ b/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
@@ -34,12 +34,12 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     section: "name with details",
   },
   {
-    icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
+    icon: <CustomSdsIcon sdsSize="s" color="green" shade={600} />,
     name: "Custom SDS Icon",
     section: "With Icon",
   },
   {
-    icon: <CustomSvgIcon sx={{ color: "#969696", height: 16, width: 16 }} />,
+    icon: <CustomSvgIcon sx={{ color: "orange", height: 16, width: 16 }} />,
     name: "Custom SVG Icon",
     section: "With Icon",
   },
diff --git a/packages/components/src/common/storybook/customSdsIcon.tsx b/packages/components/src/common/storybook/customSdsIcon.tsx
index 426184503..2f7d02290 100644
--- a/packages/components/src/common/storybook/customSdsIcon.tsx
+++ b/packages/components/src/common/storybook/customSdsIcon.tsx
@@ -8,14 +8,12 @@ import Icon, { IconProps } from "../../core/Icon";
 function CustomSdsIcon(props: {
   sdsIcon?: IconProps<"Bacteria">["sdsIcon"];
   sdsSize?: IconProps<"Bacteria">["sdsSize"];
-  sdsType?: IconProps<"Bacteria">["sdsType"];
   color?: IconProps<"Bacteria">["color"];
   shade?: IconProps<"Bacteria">["shade"];
 }) {
   const {
     sdsIcon = "Bacteria",
     sdsSize = "l",
-    sdsType = "static",
     color = "blue",
     shade = 400,
     ...rest
@@ -24,7 +22,6 @@ function CustomSdsIcon(props: {
     <Icon
       sdsIcon={sdsIcon}
       sdsSize={sdsSize}
-      sdsType={sdsType}
       color={color}
       shade={shade}
       {...rest}
diff --git a/packages/components/src/common/storybook/customSvgIcon.tsx b/packages/components/src/common/storybook/customSvgIcon.tsx
index c0e5004ed..6443a606f 100644
--- a/packages/components/src/common/storybook/customSvgIcon.tsx
+++ b/packages/components/src/common/storybook/customSvgIcon.tsx
@@ -7,10 +7,9 @@ import { SvgIcon, SvgIconProps } from "@mui/material";
 
 function CustomSvgIcon(props: SvgIconProps) {
   return (
-    <SvgIcon color="primary" viewBox="2 2 20 20" {...props}>
-      <path d="M7 19c-1.1 0-2 .9-2 2h14c0-1.1-.9-2-2-2h-4v-2h3c1.1 0 2-.9 2-2h-8c-1.66 0-3-1.34-3-3 0-1.09.59-2.04 1.46-2.56C8.17 9.03 8 8.54 8 8c0-.21.04-.42.09-.62C6.28 8.13 5 9.92 5 12c0 2.76 2.24 5 5 5v2z"></path>
-      <path d="M10.56 5.51C11.91 5.54 13 6.64 13 8c0 .75-.33 1.41-.85 1.87l.59 1.62.94-.34.34.94 1.88-.68-.34-.94.94-.34-2.74-7.53-.94.34-.34-.94-1.88.68.34.94-.94.35z"></path>
-      <circle cx="10.5" cy="8" r="1.5"></circle>
+    <SvgIcon color="primary" viewBox="0 0 512 512" {...props}>
+      <path d="M458.872,256.078c-17.529-26.644-41.771-52.681-70.79-76.4c-3.469-21.271-8.392-41.554-14.672-60.373 c53.195-0.169,87.024,22.59,72.415,73.747c-0.631,2.21-0.052,4.584,1.508,6.27c6.904,7.458,13.366,15.038,19.341,22.705 c3.073,3.943,9.293,3.121,11.202-1.498c32.302-78.145-10.047-146.718-120.43-140.279c-0.031,0.001-0.062,0.004-0.093,0.007 c-0.013-0.028-0.028-0.055-0.041-0.083c-53.56-106.69-148.783-106.875-202.496-0.688C40.555,73.469-15.599,151.807,52.904,255.924 c0.018,0.028,0.038,0.055,0.056,0.084c-67.012,100.563-16.503,183.6,101.482,175.776c0.008,0.016,0.014,0.03,0.022,0.046 c53.515,106.6,148.97,107.133,202.766,0.164C470.406,437.597,528.418,361.778,458.872,256.078z M138.187,119.848 c-6.226,18.763-11.107,38.972-14.546,60.159c-16.562,13.617-31.69,28.038-44.907,42.876 C38.058,152.559,74.283,120.168,138.187,119.848z M117.998,274.703c-5.69-6.007-11.138-12.226-16.31-18.65 c5.142-6.327,10.591-12.465,16.297-18.416C117.543,249.588,117.518,261.961,117.998,274.703z M78.682,289.361 c13.172,14.872,28.299,29.301,45.012,42.962c3.477,21.316,8.412,41.64,14.711,60.491 C67.963,392.674,43.078,352.627,78.682,289.361z M333.074,123.155c2.657,7.176,5.083,14.639,7.271,22.352 c-9.094-5.698-18.999-11.49-30.114-17.469C317.999,126.092,325.631,124.461,333.074,123.155z M315.549,85.768 c-19.762,3.974-39.653,9.827-59.258,17.221c-20.847-8.122-40.797-14.035-59.637-17.942 C232.529,25.172,278.658,23.544,315.549,85.768z M178.643,123.321c7.447,1.231,15.082,2.784,22.854,4.655 c-10.25,5.498-20.295,11.364-30.069,17.544C173.601,137.861,176.01,130.45,178.643,123.321z M178.794,389.096 c-2.692-7.253-5.148-14.8-7.362-22.603c9.524,5.966,19.569,11.81,30.503,17.666C194.064,386.139,186.334,387.787,178.794,389.096z M196.051,425.931c19.213-4.025,38.998-9.881,58.808-17.323c21.078,8.168,41.325,14.107,60.474,17.991 C278.773,487.933,232.398,487.509,196.051,425.931z M333.091,388.798c-7.661-1.267-15.52-2.879-23.521-4.823 c10.453-5.508,20.759-11.419,30.837-17.698C338.208,374.051,335.765,381.569,333.091,388.798z M351.321,311.775 c-29.889,22.661-63.024,41.092-95.899,54.615c-32.493-13.173-65.228-31.205-94.845-53.695 c-4.587-35.626-4.895-74.801-0.105-112.588c29.851-22.504,63.071-40.834,96.05-54.314c32.446,13.161,65.124,31.155,94.688,53.581 C355.863,235.562,356.016,274.655,351.321,311.775z M410.019,255.868c-5.135,6.281-10.554,12.377-16.218,18.285 c0.449-12.289,0.444-24.538-0.018-36.832C399.446,243.294,404.869,249.48,410.019,255.868z M373.55,392.273 c6.215-18.706,11.092-38.85,14.536-59.969c16.428-13.394,31.608-27.808,45.054-43.017 C473.701,359.55,437.451,391.95,373.55,392.273z" />{" "}
+      <path d="M255.888,202.24c-29.643,0-53.76,24.117-53.76,53.76c0,29.643,24.117,53.76,53.76,53.76s53.76-24.117,53.76-53.76 C309.649,226.357,285.531,202.24,255.888,202.24z" />{" "}
     </SvgIcon>
   );
 }
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
index 606bbcba5..0d543fe6e 100644
--- a/packages/components/src/common/styles-dictionary/css/variables.css
+++ b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -9,7 +9,9 @@
     --sds-border-base-default: 1px solid #969696;
     --sds-border-base-disabled: 1px solid #c3c3c3;
     --sds-border-base-divider: 1px solid #dfdfdf;
+    --sds-border-base-divider-inverse: 1px solid #6c6c6c;
     --sds-border-base-hover: 1px dashed #000000;
+    --sds-border-base-inverse: 1px dashed #ffffff;
     --sds-border-base-pressed: 1px dashed #000000;
     --sds-border-base-table: 1px solid #c3c3c3;
     --sds-border-beta-default: 1px solid #6526b5;
@@ -20,16 +22,16 @@
     --sds-border-info-thick: 2px solid #0041b9;
     --sds-border-link-dashed: 1px dashed;
     --sds-border-link-solid: 1px solid;
-    --sds-border-negative-default: 1px solid #980013;
-    --sds-border-negative-extra-thick: 4px solid #980013;
-    --sds-border-negative-thick: 2px solid #980013;
+    --sds-border-negative-default: 1px solid #980017;
+    --sds-border-negative-extra-thick: 4px solid #980017;
+    --sds-border-negative-thick: 2px solid #980017;
     --sds-border-neutral-default: 1px solid #969696;
     --sds-border-neutral-extra-thick: 4px solid #969696;
     --sds-border-neutral-thick: 2px solid #969696;
     --sds-border-none: none;
-    --sds-border-notice-default: 1px solid #b77800;
-    --sds-border-notice-extra-thick: 4px solid #b77800;
-    --sds-border-notice-thick: 2px solid #b77800;
+    --sds-border-notice-default: 1px solid #b07300;
+    --sds-border-notice-extra-thick: 4px solid #b07300;
+    --sds-border-notice-thick: 2px solid #b07300;
     --sds-border-positive-default: 1px solid #105b2b;
     --sds-border-positive-extra-thick: 4px solid #105b2b;
     --sds-border-positive-thick: 2px solid #105b2b;
@@ -70,50 +72,53 @@
     --sds-color-primitive-purple-500: #8b54e2;
     --sds-color-primitive-purple-600: #6526b5;
     --sds-color-primitive-purple-700: #490092;
-    --sds-color-primitive-purple-800: #1a004c;
+    --sds-color-primitive-purple-800: #26004c;
     --sds-color-primitive-red-100: #ffe8e6;
     --sds-color-primitive-red-200: #ffd6d2;
     --sds-color-primitive-red-300: #ffafa8;
     --sds-color-primitive-red-400: #ff7e78;
     --sds-color-primitive-red-500: #db2131;
-    --sds-color-primitive-red-600: #980013;
+    --sds-color-primitive-red-600: #980017;
     --sds-color-primitive-red-700: #6f0008;
     --sds-color-primitive-red-800: #340000;
-    --sds-color-primitive-yellow-100: #ffefcf;
+    --sds-color-primitive-yellow-100: #fff3db;
     --sds-color-primitive-yellow-200: #ffdb97;
     --sds-color-primitive-yellow-300: #ffca5c;
     --sds-color-primitive-yellow-400: #fab700;
     --sds-color-primitive-yellow-500: #da9900;
-    --sds-color-primitive-yellow-600: #b77800;
+    --sds-color-primitive-yellow-600: #b07300;
     --sds-color-primitive-yellow-700: #7c3e00;
     --sds-color-primitive-yellow-800: #541700;
     --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-border: #969696;
+    --sds-color-semantic-base-background-primary: #ffffff;
+    --sds-color-semantic-base-background-primary-inverse: #000000;
+    --sds-color-semantic-base-background-secondary: #f3f3f3;
+    --sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
+    --sds-color-semantic-base-background-tertiary: #dfdfdf;
+    --sds-color-semantic-base-border: #6c6c6c;
     --sds-color-semantic-base-border-disabled: #c3c3c3;
     --sds-color-semantic-base-border-hover: #000000;
+    --sds-color-semantic-base-border-inverse: #ffffff;
     --sds-color-semantic-base-border-pressed: #000000;
     --sds-color-semantic-base-border-table: #c3c3c3;
     --sds-color-semantic-base-divider: #dfdfdf;
+    --sds-color-semantic-base-divider-inverse: #6c6c6c;
     --sds-color-semantic-base-fill-disabled: #dfdfdf;
     --sds-color-semantic-base-fill-hover: #c3c3c347;
     --sds-color-semantic-base-fill-open: #c3c3c347;
     --sds-color-semantic-base-fill-pressed: #c3c3c347;
     --sds-color-semantic-base-fill-primary: #ffffff;
     --sds-color-semantic-base-fill-selected: #000000;
-    --sds-color-semantic-base-icon-disabled: #c3c3c3;
-    --sds-color-semantic-base-icon-primary: #969696;
-    --sds-color-semantic-base-icon-primary-hover: #000000;
-    --sds-color-semantic-base-icon-primary-inverse: #ffffff;
-    --sds-color-semantic-base-icon-primary-inverse-hover: #a5a5a5;
-    --sds-color-semantic-base-icon-primary-inverse-pressed: #a5a5a5;
-    --sds-color-semantic-base-icon-primary-pressed: #000000;
-    --sds-color-semantic-base-icon-secondary: #000000;
-    --sds-color-semantic-base-surface-background: #ffffff;
-    --sds-color-semantic-base-surface-primary: #ffffff;
-    --sds-color-semantic-base-surface-primary-inverse: #000000;
-    --sds-color-semantic-base-surface-secondary: #f3f3f3;
-    --sds-color-semantic-base-surface-tertiary: #dfdfdf;
+    --sds-color-semantic-base-ornament-disabled: #c3c3c3;
+    --sds-color-semantic-base-ornament-on-fill: #ffffff;
+    --sds-color-semantic-base-ornament-primary: #000000;
+    --sds-color-semantic-base-ornament-primary-inverse: #ffffff;
+    --sds-color-semantic-base-ornament-secondary: #6c6c6c;
+    --sds-color-semantic-base-ornament-secondary-hover: #000000;
+    --sds-color-semantic-base-ornament-secondary-pressed: #000000;
+    --sds-color-semantic-base-surface: #ffffff;
+    --sds-color-semantic-base-surface-inverse: #000000;
     --sds-color-semantic-base-text-disabled: #c3c3c3;
     --sds-color-semantic-base-text-primary: #000000;
     --sds-color-semantic-base-text-primary-inverse: #ffffff;
@@ -128,78 +133,79 @@
     --sds-color-semantic-accent-fill-hover: #0041b9;
     --sds-color-semantic-accent-fill-pressed: #002d90;
     --sds-color-semantic-accent-fill-primary: #1a6cef;
-    --sds-color-semantic-accent-icon: #1a6cef;
-    --sds-color-semantic-accent-icon-focus: #1a6cef;
-    --sds-color-semantic-accent-icon-hover: #0041b9;
-    --sds-color-semantic-accent-icon-open: #1a6cef;
-    --sds-color-semantic-accent-icon-pressed: #002d90;
-    --sds-color-semantic-accent-icon-selected: #1a6cef;
-    --sds-color-semantic-accent-surface-primary: #e2eeff;
-    --sds-color-semantic-accent-surface-secondary: #1a6cef;
+    --sds-color-semantic-accent-ornament: #1a6cef;
+    --sds-color-semantic-accent-ornament-focus: #1a6cef;
+    --sds-color-semantic-accent-ornament-hover: #0041b9;
+    --sds-color-semantic-accent-ornament-open: #1a6cef;
+    --sds-color-semantic-accent-ornament-pressed: #002d90;
+    --sds-color-semantic-accent-ornament-selected: #1a6cef;
+    --sds-color-semantic-accent-surface-primary: #1a6cef;
+    --sds-color-semantic-accent-surface-secondary: #e2eeff;
     --sds-color-semantic-accent-text-action: #1a6cef;
     --sds-color-semantic-accent-text-action-hover: #0041b9;
     --sds-color-semantic-accent-text-action-pressed: #002d90;
-    --sds-color-semantic-beta-border: #8b54e2;
+    --sds-color-semantic-beta-border: #6526b5;
     --sds-color-semantic-beta-fill-hover: #6526b5;
     --sds-color-semantic-beta-fill-pressed: #490092;
     --sds-color-semantic-beta-fill-primary: #8b54e2;
     --sds-color-semantic-beta-fill-secondary: #efeafe;
     --sds-color-semantic-beta-ornament: #6526b5;
-    --sds-color-semantic-beta-surface-primary: #efeafe;
-    --sds-color-semantic-beta-surface-secondary: #8b54e2;
+    --sds-color-semantic-beta-surface-primary: #8b54e2;
+    --sds-color-semantic-beta-surface-secondary: #efeafe;
     --sds-color-semantic-beta-text: #6526b5;
-    --sds-color-semantic-info-border: #1a6cef;
+    --sds-color-semantic-info-border: #0041b9;
     --sds-color-semantic-info-fill-hover: #0041b9;
     --sds-color-semantic-info-fill-pressed: #002d90;
     --sds-color-semantic-info-fill-primary: #1a6cef;
     --sds-color-semantic-info-fill-secondary: #e2eeff;
     --sds-color-semantic-info-ornament: #0041b9;
-    --sds-color-semantic-info-surface-primary: #e2eeff;
-    --sds-color-semantic-info-surface-secondary: #1a6cef;
+    --sds-color-semantic-info-surface-primary: #1a6cef;
+    --sds-color-semantic-info-surface-secondary: #e2eeff;
     --sds-color-semantic-info-text: #0041b9;
-    --sds-color-semantic-negative-border: #db2131;
-    --sds-color-semantic-negative-fill-hover: #980013;
+    --sds-color-semantic-negative-border: #980017;
+    --sds-color-semantic-negative-fill-hover: #980017;
     --sds-color-semantic-negative-fill-pressed: #6f0008;
     --sds-color-semantic-negative-fill-primary: #db2131;
     --sds-color-semantic-negative-fill-secondary: #ffe8e6;
-    --sds-color-semantic-negative-ornament: #980013;
-    --sds-color-semantic-negative-surface-primary: #ffe8e6;
-    --sds-color-semantic-negative-surface-secondary: #db2131;
-    --sds-color-semantic-negative-text: #980013;
+    --sds-color-semantic-negative-ornament: #980017;
+    --sds-color-semantic-negative-surface-primary: #db2131;
+    --sds-color-semantic-negative-surface-secondary: #ffe8e6;
+    --sds-color-semantic-negative-text: #980017;
     --sds-color-semantic-neutral-border: #969696;
     --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-ornament: #3b3b3b;
-    --sds-color-semantic-neutral-surface-primary: #dfdfdf;
-    --sds-color-semantic-neutral-surface-secondary: #969696;
+    --sds-color-semantic-neutral-surface-primary: #969696;
+    --sds-color-semantic-neutral-surface-secondary: #dfdfdf;
     --sds-color-semantic-neutral-text: #3b3b3b;
-    --sds-color-semantic-notice-border: #da9900;
-    --sds-color-semantic-notice-fill-hover: #b77800;
+    --sds-color-semantic-notice-border: #b07300;
+    --sds-color-semantic-notice-fill-hover: #b07300;
     --sds-color-semantic-notice-fill-pressed: #7c3e00;
     --sds-color-semantic-notice-fill-primary: #da9900;
-    --sds-color-semantic-notice-fill-secondary: #ffefcf;
-    --sds-color-semantic-notice-ornament: #b77800;
-    --sds-color-semantic-notice-surface-primary: #ffefcf;
-    --sds-color-semantic-notice-surface-secondary: #da9900;
-    --sds-color-semantic-notice-text: #b77800;
-    --sds-color-semantic-positive-border: #238444;
+    --sds-color-semantic-notice-fill-secondary: #fff3db;
+    --sds-color-semantic-notice-ornament: #b07300;
+    --sds-color-semantic-notice-surface-primary: #da9900;
+    --sds-color-semantic-notice-surface-secondary: #fff3db;
+    --sds-color-semantic-notice-text: #b07300;
+    --sds-color-semantic-positive-border: #105b2b;
     --sds-color-semantic-positive-fill-hover: #105b2b;
     --sds-color-semantic-positive-fill-pressed: #07431d;
     --sds-color-semantic-positive-fill-primary: #238444;
     --sds-color-semantic-positive-fill-secondary: #daf4de;
     --sds-color-semantic-positive-ornament: #105b2b;
-    --sds-color-semantic-positive-surface-primary: #daf4de;
-    --sds-color-semantic-positive-surface-secondary: #238444;
+    --sds-color-semantic-positive-surface-primary: #238444;
+    --sds-color-semantic-positive-surface-secondary: #daf4de;
     --sds-color-semantic-positive-text: #105b2b;
     --sds-corner-l: 20px;
     --sds-corner-m: 4px;
     --sds-corner-s: 2px;
     --sds-corner-none: 0px;
-    --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-    --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-    --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+    --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+    --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+    --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
     --sds-drop-shadow-none: none;
     --sds-font-font-family-body: "Inter", sans-serif;
     --sds-font-font-family-body-narrow: "Inter", sans-serif;
@@ -382,41 +388,43 @@
     --sds-border-base-default: 1px solid #aaaaaa;
     --sds-border-base-disabled: 1px solid #696969;
     --sds-border-base-divider: 1px solid #494949;
+    --sds-border-base-divider-inverse: 1px solid #cdcdcd;
     --sds-border-base-hover: 1px dashed #ffffff;
+    --sds-border-base-inverse: 1px dashed #000000;
     --sds-border-base-pressed: 1px dashed #ffffff;
     --sds-border-base-table: 1px solid #696969;
-    --sds-border-beta-default: 1px solid #e4dcfc;
-    --sds-border-beta-extra-thick: 4px solid #e4dcfc;
-    --sds-border-beta-thick: 2px solid #e4dcfc;
-    --sds-border-info-default: 1px solid #cde3ff;
-    --sds-border-info-extra-thick: 4px solid #cde3ff;
-    --sds-border-info-thick: 2px solid #cde3ff;
+    --sds-border-beta-default: 1px solid #cebef8;
+    --sds-border-beta-extra-thick: 4px solid #cebef8;
+    --sds-border-beta-thick: 2px solid #cebef8;
+    --sds-border-info-default: 1px solid #a2c9ff;
+    --sds-border-info-extra-thick: 4px solid #a2c9ff;
+    --sds-border-info-thick: 2px solid #a2c9ff;
     --sds-border-link-dashed: 1px dashed;
     --sds-border-link-solid: 1px solid;
-    --sds-border-negative-default: 1px solid #FFBDB3;
-    --sds-border-negative-extra-thick: 4px solid #FFBDB3;
-    --sds-border-negative-thick: 2px solid #FFBDB3;
+    --sds-border-negative-default: 1px solid #ff988a;
+    --sds-border-negative-extra-thick: 4px solid #ff988a;
+    --sds-border-negative-thick: 2px solid #ff988a;
     --sds-border-neutral-default: 1px solid #aaaaaa;
     --sds-border-neutral-extra-thick: 4px solid #aaaaaa;
     --sds-border-neutral-thick: 2px solid #aaaaaa;
     --sds-border-none: none;
-    --sds-border-notice-default: 1px solid #efad00;
-    --sds-border-notice-extra-thick: 4px solid #efad00;
-    --sds-border-notice-thick: 2px solid #efad00;
-    --sds-border-positive-default: 1px solid #bcecc5;
-    --sds-border-positive-extra-thick: 4px solid #bcecc5;
-    --sds-border-positive-thick: 2px solid #bcecc5;
+    --sds-border-notice-default: 1px solid #e5bc63;
+    --sds-border-notice-extra-thick: 4px solid #e5bc63;
+    --sds-border-notice-thick: 2px solid #e5bc63;
+    --sds-border-positive-default: 1px solid #85d898;
+    --sds-border-positive-extra-thick: 4px solid #85d898;
+    --sds-border-positive-thick: 2px solid #85d898;
     --sds-breakpoint-sm: 0px;
     --sds-breakpoint-md: 512px;
     --sds-breakpoint-lg: 1024px;
-    --sds-color-primitive-blue-100: #002573;
-    --sds-color-primitive-blue-200: #0048c5;
-    --sds-color-primitive-blue-300: #2573f4;
-    --sds-color-primitive-blue-400: #5b9aff;
-    --sds-color-primitive-blue-500: #a2c9ff;
-    --sds-color-primitive-blue-600: #cde3ff;
-    --sds-color-primitive-blue-700: #e2eeff;
-    --sds-color-primitive-blue-800: #f7faff;
+    --sds-color-primitive-blue-100: #0f1d4a;
+    --sds-color-primitive-blue-200: #0a216e;
+    --sds-color-primitive-blue-300: #0647b8;
+    --sds-color-primitive-blue-400: #2573f4;
+    --sds-color-primitive-blue-500: #5b9aff;
+    --sds-color-primitive-blue-600: #a2c9ff;
+    --sds-color-primitive-blue-700: #cde3ff;
+    --sds-color-primitive-blue-800: #e2eeff;
     --sds-color-primitive-gray-50: #000000;
     --sds-color-primitive-gray-75: #101010;
     --sds-color-primitive-gray-100: #333333;
@@ -428,151 +436,155 @@
     --sds-color-primitive-gray-700: #ededed;
     --sds-color-primitive-gray-800: #fafafa;
     --sds-color-primitive-gray-900: #ffffff;
-    --sds-color-primitive-green-100: #053918;
-    --sds-color-primitive-green-200: #12612e;
-    --sds-color-primitive-green-300: #288b49;
-    --sds-color-primitive-green-400: #43ae63;
-    --sds-color-primitive-green-500: #85d898;
-    --sds-color-primitive-green-600: #bcecc5;
-    --sds-color-primitive-green-700: #daf4de;
-    --sds-color-primitive-green-800: #f7fbf6;
-    --sds-color-primitive-purple-100: #4b0190;
-    --sds-color-primitive-purple-200: #6b2ebc;
-    --sds-color-primitive-purple-300: #905de6;
-    --sds-color-primitive-purple-400: #aa89ef;
-    --sds-color-primitive-purple-500: #cebef8;
-    --sds-color-primitive-purple-600: #e4dcfc;
-    --sds-color-primitive-purple-700: #f0ebfe;
-    --sds-color-primitive-purple-800: #fbf9ff;
-    --sds-color-primitive-red-100: #630008;
-    --sds-color-primitive-red-200: #A30000;
-    --sds-color-primitive-red-300: #E52722;
-    --sds-color-primitive-red-400: #FF695B;
-    --sds-color-primitive-red-500: #FF9385;
-    --sds-color-primitive-red-600: #FFBDB3;
-    --sds-color-primitive-red-700: #FFD8D1;
-    --sds-color-primitive-red-800: #FFF1EE;
-    --sds-color-primitive-yellow-100: #552300;
-    --sds-color-primitive-yellow-200: #834500;
-    --sds-color-primitive-yellow-300: #985a00;
-    --sds-color-primitive-yellow-400: #ac6c00;
-    --sds-color-primitive-yellow-500: #cf8e00;
-    --sds-color-primitive-yellow-600: #efad00;
-    --sds-color-primitive-yellow-700: #ffdc9a;
-    --sds-color-primitive-yellow-800: #fcf2e3;
+    --sds-color-primitive-green-100: #082608;
+    --sds-color-primitive-green-200: #063617;
+    --sds-color-primitive-green-300: #10632e;
+    --sds-color-primitive-green-400: #278b48;
+    --sds-color-primitive-green-500: #4bae68;
+    --sds-color-primitive-green-600: #85d898;
+    --sds-color-primitive-green-700: #bcecc5;
+    --sds-color-primitive-green-800: #daf4de;
+    --sds-color-primitive-purple-100: #331252;
+    --sds-color-primitive-purple-200: #410f70;
+    --sds-color-primitive-purple-300: #6429b2;
+    --sds-color-primitive-purple-400: #905de6;
+    --sds-color-primitive-purple-500: #aa89ef;
+    --sds-color-primitive-purple-600: #cebef8;
+    --sds-color-primitive-purple-700: #e4dcfc;
+    --sds-color-primitive-purple-800: #f0ebfe;
+    --sds-color-primitive-red-100: #330603;
+    --sds-color-primitive-red-200: #660a12;
+    --sds-color-primitive-red-300: #9e1c1c;
+    --sds-color-primitive-red-400: #c73028;
+    --sds-color-primitive-red-500: #e05043;
+    --sds-color-primitive-red-600: #ff988a;
+    --sds-color-primitive-red-700: #ffbdb3;
+    --sds-color-primitive-red-800: #ffd8d1;
+    --sds-color-primitive-yellow-100: #361b07;
+    --sds-color-primitive-yellow-200: #52270a;
+    --sds-color-primitive-yellow-300: #965a0b;
+    --sds-color-primitive-yellow-400: #bd8804;
+    --sds-color-primitive-yellow-500: #d9a943;
+    --sds-color-primitive-yellow-600: #e5bc63;
+    --sds-color-primitive-yellow-700: #f5d789;
+    --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-border: #aaaaaa;
+    --sds-color-semantic-base-background-primary: #000000;
+    --sds-color-semantic-base-background-primary-inverse: #ffffff;
+    --sds-color-semantic-base-background-secondary: #333333;
+    --sds-color-semantic-base-background-secondary-inverse: #ededed;
+    --sds-color-semantic-base-background-tertiary: #494949;
+    --sds-color-semantic-base-border: #cdcdcd;
     --sds-color-semantic-base-border-disabled: #696969;
     --sds-color-semantic-base-border-hover: #ffffff;
+    --sds-color-semantic-base-border-inverse: #000000;
     --sds-color-semantic-base-border-pressed: #ffffff;
     --sds-color-semantic-base-border-table: #696969;
     --sds-color-semantic-base-divider: #494949;
+    --sds-color-semantic-base-divider-inverse: #cdcdcd;
     --sds-color-semantic-base-fill-disabled: #494949;
     --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-selected: #ffffff;
-    --sds-color-semantic-base-icon-disabled: #696969;
-    --sds-color-semantic-base-icon-primary: #aaaaaa;
-    --sds-color-semantic-base-icon-primary-hover: #ffffff;
-    --sds-color-semantic-base-icon-primary-inverse: #000000;
-    --sds-color-semantic-base-icon-primary-inverse-hover: #9b9b9b;
-    --sds-color-semantic-base-icon-primary-inverse-pressed: #9b9b9b;
-    --sds-color-semantic-base-icon-primary-pressed: #ffffff;
-    --sds-color-semantic-base-icon-secondary: #ffffff;
-    --sds-color-semantic-base-surface-background: #000000;
-    --sds-color-semantic-base-surface-primary: #000000;
-    --sds-color-semantic-base-surface-primary-inverse: #ffffff;
-    --sds-color-semantic-base-surface-secondary: #333333;
-    --sds-color-semantic-base-surface-tertiary: #494949;
+    --sds-color-semantic-base-ornament-disabled: #696969;
+    --sds-color-semantic-base-ornament-on-fill: #000000;
+    --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-hover: #ffffff;
+    --sds-color-semantic-base-ornament-secondary-pressed: #ffffff;
+    --sds-color-semantic-base-surface: #000000;
+    --sds-color-semantic-base-surface-inverse: #ffffff;
     --sds-color-semantic-base-text-disabled: #696969;
     --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: #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: #a2c9ff;
-    --sds-color-semantic-accent-icon: #a2c9ff;
-    --sds-color-semantic-accent-icon-focus: #a2c9ff;
-    --sds-color-semantic-accent-icon-hover: #cde3ff;
-    --sds-color-semantic-accent-icon-open: #a2c9ff;
-    --sds-color-semantic-accent-icon-pressed: #e2eeff;
-    --sds-color-semantic-accent-icon-selected: #a2c9ff;
-    --sds-color-semantic-accent-surface-primary: #002573;
-    --sds-color-semantic-accent-surface-secondary: #a2c9ff;
-    --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-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-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-beta-border: #cebef8;
-    --sds-color-semantic-beta-fill-hover: #e4dcfc;
-    --sds-color-semantic-beta-fill-pressed: #f0ebfe;
-    --sds-color-semantic-beta-fill-primary: #cebef8;
-    --sds-color-semantic-beta-fill-secondary: #4b0190;
-    --sds-color-semantic-beta-ornament: #e4dcfc;
-    --sds-color-semantic-beta-surface-primary: #4b0190;
-    --sds-color-semantic-beta-surface-secondary: #cebef8;
-    --sds-color-semantic-beta-text: #e4dcfc;
+    --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-secondary: #331252;
+    --sds-color-semantic-beta-ornament: #cebef8;
+    --sds-color-semantic-beta-surface-primary: #aa89ef;
+    --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: #cde3ff;
-    --sds-color-semantic-info-fill-pressed: #e2eeff;
-    --sds-color-semantic-info-fill-primary: #a2c9ff;
-    --sds-color-semantic-info-fill-secondary: #002573;
-    --sds-color-semantic-info-ornament: #cde3ff;
-    --sds-color-semantic-info-surface-primary: #002573;
-    --sds-color-semantic-info-surface-secondary: #a2c9ff;
-    --sds-color-semantic-info-text: #cde3ff;
-    --sds-color-semantic-negative-border: #FF9385;
-    --sds-color-semantic-negative-fill-hover: #FFBDB3;
-    --sds-color-semantic-negative-fill-pressed: #FFD8D1;
-    --sds-color-semantic-negative-fill-primary: #FF9385;
-    --sds-color-semantic-negative-fill-secondary: #630008;
-    --sds-color-semantic-negative-ornament: #FFBDB3;
-    --sds-color-semantic-negative-surface-primary: #630008;
-    --sds-color-semantic-negative-surface-secondary: #FF9385;
-    --sds-color-semantic-negative-text: #FFBDB3;
+    --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-secondary: #0f1d4a;
+    --sds-color-semantic-info-ornament: #a2c9ff;
+    --sds-color-semantic-info-surface-primary: #5b9aff;
+    --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-secondary: #330603;
+    --sds-color-semantic-negative-ornament: #ff988a;
+    --sds-color-semantic-negative-surface-primary: #e05043;
+    --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-ornament: #ededed;
-    --sds-color-semantic-neutral-surface-primary: #494949;
-    --sds-color-semantic-neutral-surface-secondary: #aaaaaa;
+    --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: #cf8e00;
-    --sds-color-semantic-notice-fill-hover: #efad00;
-    --sds-color-semantic-notice-fill-pressed: #ffdc9a;
-    --sds-color-semantic-notice-fill-primary: #cf8e00;
-    --sds-color-semantic-notice-fill-secondary: #552300;
-    --sds-color-semantic-notice-ornament: #efad00;
-    --sds-color-semantic-notice-surface-primary: #552300;
-    --sds-color-semantic-notice-surface-secondary: #cf8e00;
-    --sds-color-semantic-notice-text: #efad00;
+    --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-secondary: #361b07;
+    --sds-color-semantic-notice-ornament: #e5bc63;
+    --sds-color-semantic-notice-surface-primary: #d9a943;
+    --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: #bcecc5;
-    --sds-color-semantic-positive-fill-pressed: #daf4de;
-    --sds-color-semantic-positive-fill-primary: #85d898;
-    --sds-color-semantic-positive-fill-secondary: #053918;
-    --sds-color-semantic-positive-ornament: #bcecc5;
-    --sds-color-semantic-positive-surface-primary: #053918;
-    --sds-color-semantic-positive-surface-secondary: #85d898;
-    --sds-color-semantic-positive-text: #bcecc5;
+    --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-secondary: #082608;
+    --sds-color-semantic-positive-ornament: #85d898;
+    --sds-color-semantic-positive-surface-primary: #4bae68;
+    --sds-color-semantic-positive-surface-secondary: #082608;
+    --sds-color-semantic-positive-text: #85d898;
     --sds-corner-l: 20px;
     --sds-corner-m: 4px;
     --sds-corner-s: 2px;
     --sds-corner-none: 0px;
-    --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-    --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-    --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+    --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+    --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+    --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
     --sds-drop-shadow-none: none;
     --sds-font-font-family-body: "Inter", sans-serif;
     --sds-font-font-family-body-narrow: "Inter", sans-serif;
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
index 11ea74bf5..fc92a10db 100644
--- a/packages/components/src/common/styles-dictionary/design-tokens/borders.json
+++ b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
@@ -4,27 +4,27 @@
       "accent": {
         "default": {
           "value": "1px solid {sds.color.primitive.blue.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}"
+          "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}"
         },
         "focused": {
           "value": "1px solid {sds.color.primitive.blue.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}"
+          "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}"
         },
         "open": {
           "value": "1px solid {sds.color.primitive.blue.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}"
+          "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}"
         },
         "selected": {
           "value": "1px solid {sds.color.primitive.blue.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}"
+          "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}"
         },
         "hover": {
           "value": "1px solid {sds.color.primitive.blue.600.value}",
-          "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}"
+          "darkValue": "1px solid {sds.color.primitive.blue.700.darkValue}"
         },
         "pressed": {
           "value": "1px solid {sds.color.primitive.blue.700.value}",
-          "darkValue": "1px solid {sds.color.primitive.blue.700.darkValue}"
+          "darkValue": "1px solid {sds.color.primitive.blue.800.darkValue}"
         }
       },
       "base": {
@@ -40,10 +40,18 @@
           "value": "1px solid {sds.color.primitive.gray.200.value}",
           "darkValue": "1px solid {sds.color.primitive.gray.200.darkValue}"
         },
+        "dividerInverse": {
+          "value": "1px solid {sds.color.primitive.gray.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.gray.600.darkValue}"
+        },
         "hover": {
           "value": "1px dashed {sds.color.primitive.gray.900.value}",
           "darkValue": "1px dashed {sds.color.primitive.gray.900.darkValue}"
         },
+        "inverse": {
+          "value": "1px dashed {sds.color.primitive.gray.50.value}",
+          "darkValue": "1px dashed {sds.color.primitive.gray.50.darkValue}"
+        },
         "pressed": {
           "value": "1px dashed {sds.color.primitive.gray.900.value}",
           "darkValue": "1px dashed {sds.color.primitive.gray.900.darkValue}"
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/colors.json b/packages/components/src/common/styles-dictionary/design-tokens/colors.json
index ca322fed4..477426d5b 100644
--- a/packages/components/src/common/styles-dictionary/design-tokens/colors.json
+++ b/packages/components/src/common/styles-dictionary/design-tokens/colors.json
@@ -3,14 +3,14 @@
     "color": {
       "primitive": {
         "blue": {
-          "100": { "value": "#e2eeff", "darkValue": "#002573" },
-          "200": { "value": "#cce1ff", "darkValue": "#0048c5" },
-          "300": { "value": "#9dc6ff", "darkValue": "#2573f4" },
-          "400": { "value": "#6ca6ff", "darkValue": "#5b9aff" },
-          "500": { "value": "#1a6cef", "darkValue": "#a2c9ff" },
-          "600": { "value": "#0041b9", "darkValue": "#cde3ff" },
-          "700": { "value": "#002d90", "darkValue": "#e2eeff" },
-          "800": { "value": "#00114a", "darkValue": "#f7faff" }
+          "100": { "value": "#e2eeff", "darkValue": "#0f1d4a" },
+          "200": { "value": "#cce1ff", "darkValue": "#0a216e" },
+          "300": { "value": "#9dc6ff", "darkValue": "#0647b8" },
+          "400": { "value": "#6ca6ff", "darkValue": "#2573f4" },
+          "500": { "value": "#1a6cef", "darkValue": "#5b9aff" },
+          "600": { "value": "#0041b9", "darkValue": "#a2c9ff" },
+          "700": { "value": "#002d90", "darkValue": "#cde3ff" },
+          "800": { "value": "#00114a", "darkValue": "#e2eeff" }
         },
         "gray": {
           "100": { "value": "#f3f3f3", "darkValue": "#333333" },
@@ -26,44 +26,44 @@
           "900": { "value": "#000000", "darkValue": "#ffffff" }
         },
         "green": {
-          "100": { "value": "#daf4de", "darkValue": "#053918" },
-          "200": { "value": "#b9ecc3", "darkValue": "#12612e" },
-          "300": { "value": "#7fd693", "darkValue": "#288b49" },
-          "400": { "value": "#50b96d", "darkValue": "#43ae63" },
-          "500": { "value": "#238444", "darkValue": "#85d898" },
-          "600": { "value": "#105b2b", "darkValue": "#bcecc5" },
-          "700": { "value": "#07431d", "darkValue": "#daf4de" },
-          "800": { "value": "#001f00", "darkValue": "#f7fbf6" }
+          "100": { "value": "#daf4de", "darkValue": "#082608" },
+          "200": { "value": "#b9ecc3", "darkValue": "#063617" },
+          "300": { "value": "#7fd693", "darkValue": "#10632e" },
+          "400": { "value": "#50b96d", "darkValue": "#278b48" },
+          "500": { "value": "#238444", "darkValue": "#4bae68" },
+          "600": { "value": "#105b2b", "darkValue": "#85d898" },
+          "700": { "value": "#07431d", "darkValue": "#bcecc5" },
+          "800": { "value": "#001f00", "darkValue": "#daf4de" }
         },
         "purple": {
-          "100": { "value": "#efeafe", "darkValue": "#4b0190" },
-          "200": { "value": "#e4dbfc", "darkValue": "#6b2ebc" },
-          "300": { "value": "#cbbaf8", "darkValue": "#905de6" },
-          "400": { "value": "#b296f2", "darkValue": "#aa89ef" },
-          "500": { "value": "#8b54e2", "darkValue": "#cebef8" },
-          "600": { "value": "#6526b5", "darkValue": "#e4dcfc" },
-          "700": { "value": "#490092", "darkValue": "#f0ebfe" },
-          "800": { "value": "#1a004c", "darkValue": "#fbf9ff" }
+          "100": { "value": "#efeafe", "darkValue": "#331252" },
+          "200": { "value": "#e4dbfc", "darkValue": "#410f70" },
+          "300": { "value": "#cbbaf8", "darkValue": "#6429b2" },
+          "400": { "value": "#b296f2", "darkValue": "#905de6" },
+          "500": { "value": "#8b54e2", "darkValue": "#aa89ef" },
+          "600": { "value": "#6526b5", "darkValue": "#cebef8" },
+          "700": { "value": "#490092", "darkValue": "#e4dcfc" },
+          "800": { "value": "#26004c", "darkValue": "#f0ebfe" }
         },
         "red": {
-          "100": { "value": "#ffe8e6", "darkValue": "#630008" },
-          "200": { "value": "#ffd6d2", "darkValue": "#A30000" },
-          "300": { "value": "#ffafa8", "darkValue": "#E52722" },
-          "400": { "value": "#ff7e78", "darkValue": "#FF695B" },
-          "500": { "value": "#db2131", "darkValue": "#FF9385" },
-          "600": { "value": "#980013", "darkValue": "#FFBDB3" },
-          "700": { "value": "#6f0008", "darkValue": "#FFD8D1" },
-          "800": { "value": "#340000", "darkValue": "#FFF1EE" }
+          "100": { "value": "#ffe8e6", "darkValue": "#330603" },
+          "200": { "value": "#ffd6d2", "darkValue": "#660a12" },
+          "300": { "value": "#ffafa8", "darkValue": "#9e1c1c" },
+          "400": { "value": "#ff7e78", "darkValue": "#c73028" },
+          "500": { "value": "#db2131", "darkValue": "#e05043" },
+          "600": { "value": "#980017", "darkValue": "#ff988a" },
+          "700": { "value": "#6f0008", "darkValue": "#ffbdb3" },
+          "800": { "value": "#340000", "darkValue": "#ffd8d1" }
         },
         "yellow": {
-          "100": { "value": "#ffefcf", "darkValue": "#552300" },
-          "200": { "value": "#ffdb97", "darkValue": "#834500" },
-          "300": { "value": "#ffca5c", "darkValue": "#985a00" },
-          "400": { "value": "#fab700", "darkValue": "#ac6c00" },
-          "500": { "value": "#da9900", "darkValue": "#cf8e00" },
-          "600": { "value": "#b77800", "darkValue": "#efad00" },
-          "700": { "value": "#7c3e00", "darkValue": "#ffdc9a" },
-          "800": { "value": "#541700", "darkValue": "#fcf2e3" }
+          "100": { "value": "#fff3db", "darkValue": "#361b07" },
+          "200": { "value": "#ffdb97", "darkValue": "#52270a" },
+          "300": { "value": "#ffca5c", "darkValue": "#965a0b" },
+          "400": { "value": "#fab700", "darkValue": "#bd8804" },
+          "500": { "value": "#da9900", "darkValue": "#d9a943" },
+          "600": { "value": "#b07300", "darkValue": "#e5bc63" },
+          "700": { "value": "#7c3e00", "darkValue": "#f5d789" },
+          "800": { "value": "#541700", "darkValue": "#ffe6a8" }
         },
         "overlay": {
           "100": {
@@ -78,9 +78,29 @@
       },
       "semantic": {
         "base": {
+          "background-primary": {
+            "value": "{sds.color.primitive.gray.50.value}",
+            "darkValue": "{sds.color.primitive.gray.50.darkValue}"
+          },
+          "background-primary-inverse": {
+            "value": "{sds.color.primitive.gray.900.value}",
+            "darkValue": "{sds.color.primitive.gray.900.darkValue}"
+          },
+          "background-secondary": {
+            "value": "{sds.color.primitive.gray.100.value}",
+            "darkValue": "{sds.color.primitive.gray.100.darkValue}"
+          },
+          "background-secondary-inverse": {
+            "value": "{sds.color.primitive.gray.700.value}",
+            "darkValue": "{sds.color.primitive.gray.700.darkValue}"
+          },
+          "background-tertiary": {
+            "value": "{sds.color.primitive.gray.200.value}",
+            "darkValue": "{sds.color.primitive.gray.200.darkValue}"
+          },
           "border": {
-            "value": "{sds.color.primitive.gray.500.value}",
-            "darkValue": "{sds.color.primitive.gray.500.darkValue}"
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
           },
           "border-disabled": {
             "value": "{sds.color.primitive.gray.300.value}",
@@ -90,6 +110,10 @@
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
+          "border-inverse": {
+            "value": "{sds.color.primitive.gray.50.value}",
+            "darkValue": "{sds.color.primitive.gray.50.darkValue}"
+          },
           "border-pressed": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
@@ -102,6 +126,10 @@
             "value": "{sds.color.primitive.gray.200.value}",
             "darkValue": "{sds.color.primitive.gray.200.darkValue}"
           },
+          "divider-inverse": {
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
+          },
           "fill-disabled": {
             "value": "{sds.color.primitive.gray.200.value}",
             "darkValue": "{sds.color.primitive.gray.200.darkValue}"
@@ -126,58 +154,42 @@
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
-          "icon-disabled": {
+          "ornament-disabled": {
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
-          "icon-primary": {
-            "value": "{sds.color.primitive.gray.500.value}",
-            "darkValue": "{sds.color.primitive.gray.500.darkValue}"
+          "ornament-on-fill": {
+            "value": "{sds.color.primitive.gray.50.value}",
+            "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
-          "icon-primary-hover": {
+          "ornament-primary": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
-          "icon-primary-inverse": {
+          "ornament-primary-inverse": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
-          "icon-primary-inverse-hover": {
-            "value": "{sds.color.primitive.gray.400.value}",
-            "darkValue": "{sds.color.primitive.gray.400.darkValue}"
-          },
-          "icon-primary-inverse-pressed": {
-            "value": "{sds.color.primitive.gray.400.value}",
-            "darkValue": "{sds.color.primitive.gray.400.darkValue}"
+          "ornament-secondary": {
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
           },
-          "icon-primary-pressed": {
+          "ornament-secondary-hover": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
-          "icon-secondary": {
+          "ornament-secondary-pressed": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
-          "surface-background": {
-            "value": "{sds.color.primitive.gray.50.value}",
-            "darkValue": "{sds.color.primitive.gray.50.darkValue}"
-          },
-          "surface-primary": {
+          "surface": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
-          "surface-primary-inverse": {
+          "surface-inverse": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
-          "surface-secondary": {
-            "value": "{sds.color.primitive.gray.100.value}",
-            "darkValue": "{sds.color.primitive.gray.100.darkValue}"
-          },
-          "surface-tertiary": {
-            "value": "{sds.color.primitive.gray.200.value}",
-            "darkValue": "{sds.color.primitive.gray.200.darkValue}"
-          },
           "text-disabled": {
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
@@ -236,38 +248,38 @@
             "value": "{sds.color.primitive.blue.500.value}",
             "darkValue": "{sds.color.primitive.blue.500.darkValue}"
           },
-          "icon": {
+          "ornament": {
             "value": "{sds.color.primitive.blue.500.value}",
             "darkValue": "{sds.color.primitive.blue.500.darkValue}"
           },
-          "icon-focus": {
+          "ornament-focus": {
             "value": "{sds.color.primitive.blue.500.value}",
             "darkValue": "{sds.color.primitive.blue.500.darkValue}"
           },
-          "icon-hover": {
+          "ornament-hover": {
             "value": "{sds.color.primitive.blue.600.value}",
             "darkValue": "{sds.color.primitive.blue.600.darkValue}"
           },
-          "icon-open": {
+          "ornament-open": {
             "value": "{sds.color.primitive.blue.500.value}",
             "darkValue": "{sds.color.primitive.blue.500.darkValue}"
           },
-          "icon-pressed": {
+          "ornament-pressed": {
             "value": "{sds.color.primitive.blue.700.value}",
             "darkValue": "{sds.color.primitive.blue.700.darkValue}"
           },
-          "icon-selected": {
+          "ornament-selected": {
             "value": "{sds.color.primitive.blue.500.value}",
             "darkValue": "{sds.color.primitive.blue.500.darkValue}"
           },
           "surface-primary": {
-            "value": "{sds.color.primitive.blue.100.value}",
-            "darkValue": "{sds.color.primitive.blue.100.darkValue}"
-          },
-          "surface-secondary": {
             "value": "{sds.color.primitive.blue.500.value}",
             "darkValue": "{sds.color.primitive.blue.500.darkValue}"
           },
+          "surface-secondary": {
+            "value": "{sds.color.primitive.blue.100.value}",
+            "darkValue": "{sds.color.primitive.blue.100.darkValue}"
+          },
           "text-action": {
             "value": "{sds.color.primitive.blue.500.value}",
             "darkValue": "{sds.color.primitive.blue.500.darkValue}"
@@ -283,8 +295,8 @@
         },
         "beta": {
           "border": {
-            "value": "{sds.color.primitive.purple.500.value}",
-            "darkValue": "{sds.color.primitive.purple.500.darkValue}"
+            "value": "{sds.color.primitive.purple.600.value}",
+            "darkValue": "{sds.color.primitive.purple.600.darkValue}"
           },
           "fill-hover": {
             "value": "{sds.color.primitive.purple.600.value}",
@@ -307,13 +319,13 @@
             "darkValue": "{sds.color.primitive.purple.600.darkValue}"
           },
           "surface-primary": {
-            "value": "{sds.color.primitive.purple.100.value}",
-            "darkValue": "{sds.color.primitive.purple.100.darkValue}"
-          },
-          "surface-secondary": {
             "value": "{sds.color.primitive.purple.500.value}",
             "darkValue": "{sds.color.primitive.purple.500.darkValue}"
           },
+          "surface-secondary": {
+            "value": "{sds.color.primitive.purple.100.value}",
+            "darkValue": "{sds.color.primitive.purple.100.darkValue}"
+          },
           "text": {
             "value": "{sds.color.primitive.purple.600.value}",
             "darkValue": "{sds.color.primitive.purple.600.darkValue}"
@@ -321,8 +333,8 @@
         },
         "info": {
           "border": {
-            "value": "{sds.color.primitive.blue.500.value}",
-            "darkValue": "{sds.color.primitive.blue.500.darkValue}"
+            "value": "{sds.color.primitive.blue.600.value}",
+            "darkValue": "{sds.color.primitive.blue.600.darkValue}"
           },
           "fill-hover": {
             "value": "{sds.color.primitive.blue.600.value}",
@@ -345,13 +357,13 @@
             "darkValue": "{sds.color.primitive.blue.600.darkValue}"
           },
           "surface-primary": {
-            "value": "{sds.color.primitive.blue.100.value}",
-            "darkValue": "{sds.color.primitive.blue.100.darkValue}"
-          },
-          "surface-secondary": {
             "value": "{sds.color.primitive.blue.500.value}",
             "darkValue": "{sds.color.primitive.blue.500.darkValue}"
           },
+          "surface-secondary": {
+            "value": "{sds.color.primitive.blue.100.value}",
+            "darkValue": "{sds.color.primitive.blue.100.darkValue}"
+          },
           "text": {
             "value": "{sds.color.primitive.blue.600.value}",
             "darkValue": "{sds.color.primitive.blue.600.darkValue}"
@@ -359,8 +371,8 @@
         },
         "negative": {
           "border": {
-            "value": "{sds.color.primitive.red.500.value}",
-            "darkValue": "{sds.color.primitive.red.500.darkValue}"
+            "value": "{sds.color.primitive.red.600.value}",
+            "darkValue": "{sds.color.primitive.red.600.darkValue}"
           },
           "fill-hover": {
             "value": "{sds.color.primitive.red.600.value}",
@@ -383,13 +395,13 @@
             "darkValue": "{sds.color.primitive.red.600.darkValue}"
           },
           "surface-primary": {
-            "value": "{sds.color.primitive.red.100.value}",
-            "darkValue": "{sds.color.primitive.red.100.darkValue}"
-          },
-          "surface-secondary": {
             "value": "{sds.color.primitive.red.500.value}",
             "darkValue": "{sds.color.primitive.red.500.darkValue}"
           },
+          "surface-secondary": {
+            "value": "{sds.color.primitive.red.100.value}",
+            "darkValue": "{sds.color.primitive.red.100.darkValue}"
+          },
           "text": {
             "value": "{sds.color.primitive.red.600.value}",
             "darkValue": "{sds.color.primitive.red.600.darkValue}"
@@ -421,13 +433,13 @@
             "darkValue": "{sds.color.primitive.gray.700.darkValue}"
           },
           "surface-primary": {
-            "value": "{sds.color.primitive.gray.200.value}",
-            "darkValue": "{sds.color.primitive.gray.200.darkValue}"
-          },
-          "surface-secondary": {
             "value": "{sds.color.primitive.gray.500.value}",
             "darkValue": "{sds.color.primitive.gray.500.darkValue}"
           },
+          "surface-secondary": {
+            "value": "{sds.color.primitive.gray.200.value}",
+            "darkValue": "{sds.color.primitive.gray.200.darkValue}"
+          },
           "text": {
             "value": "{sds.color.primitive.gray.700.value}",
             "darkValue": "{sds.color.primitive.gray.700.darkValue}"
@@ -435,8 +447,8 @@
         },
         "notice": {
           "border": {
-            "value": "{sds.color.primitive.yellow.500.value}",
-            "darkValue": "{sds.color.primitive.yellow.500.darkValue}"
+            "value": "{sds.color.primitive.yellow.600.value}",
+            "darkValue": "{sds.color.primitive.yellow.600.darkValue}"
           },
           "fill-hover": {
             "value": "{sds.color.primitive.yellow.600.value}",
@@ -459,13 +471,13 @@
             "darkValue": "{sds.color.primitive.yellow.600.darkValue}"
           },
           "surface-primary": {
-            "value": "{sds.color.primitive.yellow.100.value}",
-            "darkValue": "{sds.color.primitive.yellow.100.darkValue}"
-          },
-          "surface-secondary": {
             "value": "{sds.color.primitive.yellow.500.value}",
             "darkValue": "{sds.color.primitive.yellow.500.darkValue}"
           },
+          "surface-secondary": {
+            "value": "{sds.color.primitive.yellow.100.value}",
+            "darkValue": "{sds.color.primitive.yellow.100.darkValue}"
+          },
           "text": {
             "value": "{sds.color.primitive.yellow.600.value}",
             "darkValue": "{sds.color.primitive.yellow.600.darkValue}"
@@ -473,8 +485,8 @@
         },
         "positive": {
           "border": {
-            "value": "{sds.color.primitive.green.500.value}",
-            "darkValue": "{sds.color.primitive.green.500.darkValue}"
+            "value": "{sds.color.primitive.green.600.value}",
+            "darkValue": "{sds.color.primitive.green.600.darkValue}"
           },
           "fill-hover": {
             "value": "{sds.color.primitive.green.600.value}",
@@ -497,13 +509,13 @@
             "darkValue": "{sds.color.primitive.green.600.darkValue}"
           },
           "surface-primary": {
-            "value": "{sds.color.primitive.green.100.value}",
-            "darkValue": "{sds.color.primitive.green.100.darkValue}"
-          },
-          "surface-secondary": {
             "value": "{sds.color.primitive.green.500.value}",
             "darkValue": "{sds.color.primitive.green.500.darkValue}"
           },
+          "surface-secondary": {
+            "value": "{sds.color.primitive.green.100.value}",
+            "darkValue": "{sds.color.primitive.green.100.darkValue}"
+          },
           "text": {
             "value": "{sds.color.primitive.green.600.value}",
             "darkValue": "{sds.color.primitive.green.600.darkValue}"
diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
index 616609626..7b0d7bea7 100644
--- a/packages/components/src/common/styles-dictionary/json/tailwind.json
+++ b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -279,14 +279,14 @@
   },
   "colors": {
     "dark": {
-      "sds-color-primitive-blue-100": "#002573",
-      "sds-color-primitive-blue-200": "#0048c5",
-      "sds-color-primitive-blue-300": "#2573f4",
-      "sds-color-primitive-blue-400": "#5b9aff",
-      "sds-color-primitive-blue-500": "#a2c9ff",
-      "sds-color-primitive-blue-600": "#cde3ff",
-      "sds-color-primitive-blue-700": "#e2eeff",
-      "sds-color-primitive-blue-800": "#f7faff",
+      "sds-color-primitive-blue-100": "#0f1d4a",
+      "sds-color-primitive-blue-200": "#0a216e",
+      "sds-color-primitive-blue-300": "#0647b8",
+      "sds-color-primitive-blue-400": "#2573f4",
+      "sds-color-primitive-blue-500": "#5b9aff",
+      "sds-color-primitive-blue-600": "#a2c9ff",
+      "sds-color-primitive-blue-700": "#cde3ff",
+      "sds-color-primitive-blue-800": "#e2eeff",
       "sds-color-primitive-gray-50": "#000000",
       "sds-color-primitive-gray-75": "#101010",
       "sds-color-primitive-gray-100": "#333333",
@@ -298,144 +298,147 @@
       "sds-color-primitive-gray-700": "#ededed",
       "sds-color-primitive-gray-800": "#fafafa",
       "sds-color-primitive-gray-900": "#ffffff",
-      "sds-color-primitive-green-100": "#053918",
-      "sds-color-primitive-green-200": "#12612e",
-      "sds-color-primitive-green-300": "#288b49",
-      "sds-color-primitive-green-400": "#43ae63",
-      "sds-color-primitive-green-500": "#85d898",
-      "sds-color-primitive-green-600": "#bcecc5",
-      "sds-color-primitive-green-700": "#daf4de",
-      "sds-color-primitive-green-800": "#f7fbf6",
-      "sds-color-primitive-purple-100": "#4b0190",
-      "sds-color-primitive-purple-200": "#6b2ebc",
-      "sds-color-primitive-purple-300": "#905de6",
-      "sds-color-primitive-purple-400": "#aa89ef",
-      "sds-color-primitive-purple-500": "#cebef8",
-      "sds-color-primitive-purple-600": "#e4dcfc",
-      "sds-color-primitive-purple-700": "#f0ebfe",
-      "sds-color-primitive-purple-800": "#fbf9ff",
-      "sds-color-primitive-red-100": "#630008",
-      "sds-color-primitive-red-200": "#A30000",
-      "sds-color-primitive-red-300": "#E52722",
-      "sds-color-primitive-red-400": "#FF695B",
-      "sds-color-primitive-red-500": "#FF9385",
-      "sds-color-primitive-red-600": "#FFBDB3",
-      "sds-color-primitive-red-700": "#FFD8D1",
-      "sds-color-primitive-red-800": "#FFF1EE",
-      "sds-color-primitive-yellow-100": "#552300",
-      "sds-color-primitive-yellow-200": "#834500",
-      "sds-color-primitive-yellow-300": "#985a00",
-      "sds-color-primitive-yellow-400": "#ac6c00",
-      "sds-color-primitive-yellow-500": "#cf8e00",
-      "sds-color-primitive-yellow-600": "#efad00",
-      "sds-color-primitive-yellow-700": "#ffdc9a",
-      "sds-color-primitive-yellow-800": "#fcf2e3",
+      "sds-color-primitive-green-100": "#082608",
+      "sds-color-primitive-green-200": "#063617",
+      "sds-color-primitive-green-300": "#10632e",
+      "sds-color-primitive-green-400": "#278b48",
+      "sds-color-primitive-green-500": "#4bae68",
+      "sds-color-primitive-green-600": "#85d898",
+      "sds-color-primitive-green-700": "#bcecc5",
+      "sds-color-primitive-green-800": "#daf4de",
+      "sds-color-primitive-purple-100": "#331252",
+      "sds-color-primitive-purple-200": "#410f70",
+      "sds-color-primitive-purple-300": "#6429b2",
+      "sds-color-primitive-purple-400": "#905de6",
+      "sds-color-primitive-purple-500": "#aa89ef",
+      "sds-color-primitive-purple-600": "#cebef8",
+      "sds-color-primitive-purple-700": "#e4dcfc",
+      "sds-color-primitive-purple-800": "#f0ebfe",
+      "sds-color-primitive-red-100": "#330603",
+      "sds-color-primitive-red-200": "#660a12",
+      "sds-color-primitive-red-300": "#9e1c1c",
+      "sds-color-primitive-red-400": "#c73028",
+      "sds-color-primitive-red-500": "#e05043",
+      "sds-color-primitive-red-600": "#ff988a",
+      "sds-color-primitive-red-700": "#ffbdb3",
+      "sds-color-primitive-red-800": "#ffd8d1",
+      "sds-color-primitive-yellow-100": "#361b07",
+      "sds-color-primitive-yellow-200": "#52270a",
+      "sds-color-primitive-yellow-300": "#965a0b",
+      "sds-color-primitive-yellow-400": "#bd8804",
+      "sds-color-primitive-yellow-500": "#d9a943",
+      "sds-color-primitive-yellow-600": "#e5bc63",
+      "sds-color-primitive-yellow-700": "#f5d789",
+      "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-border": "#aaaaaa",
+      "sds-color-semantic-base-background-primary": "#000000",
+      "sds-color-semantic-base-background-primary-inverse": "#ffffff",
+      "sds-color-semantic-base-background-secondary": "#333333",
+      "sds-color-semantic-base-background-secondary-inverse": "#ededed",
+      "sds-color-semantic-base-background-tertiary": "#494949",
+      "sds-color-semantic-base-border": "#cdcdcd",
       "sds-color-semantic-base-border-disabled": "#696969",
       "sds-color-semantic-base-border-hover": "#ffffff",
+      "sds-color-semantic-base-border-inverse": "#000000",
       "sds-color-semantic-base-border-pressed": "#ffffff",
       "sds-color-semantic-base-border-table": "#696969",
       "sds-color-semantic-base-divider": "#494949",
+      "sds-color-semantic-base-divider-inverse": "#cdcdcd",
       "sds-color-semantic-base-fill-disabled": "#494949",
       "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-selected": "#ffffff",
-      "sds-color-semantic-base-icon-disabled": "#696969",
-      "sds-color-semantic-base-icon-primary": "#aaaaaa",
-      "sds-color-semantic-base-icon-primary-hover": "#ffffff",
-      "sds-color-semantic-base-icon-primary-inverse": "#000000",
-      "sds-color-semantic-base-icon-primary-inverse-hover": "#9b9b9b",
-      "sds-color-semantic-base-icon-primary-inverse-pressed": "#9b9b9b",
-      "sds-color-semantic-base-icon-primary-pressed": "#ffffff",
-      "sds-color-semantic-base-icon-secondary": "#ffffff",
-      "sds-color-semantic-base-surface-background": "#000000",
-      "sds-color-semantic-base-surface-primary": "#000000",
-      "sds-color-semantic-base-surface-primary-inverse": "#ffffff",
-      "sds-color-semantic-base-surface-secondary": "#333333",
-      "sds-color-semantic-base-surface-tertiary": "#494949",
+      "sds-color-semantic-base-ornament-disabled": "#696969",
+      "sds-color-semantic-base-ornament-on-fill": "#000000",
+      "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-hover": "#ffffff",
+      "sds-color-semantic-base-ornament-secondary-pressed": "#ffffff",
+      "sds-color-semantic-base-surface": "#000000",
+      "sds-color-semantic-base-surface-inverse": "#ffffff",
       "sds-color-semantic-base-text-disabled": "#696969",
       "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": "#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": "#a2c9ff",
-      "sds-color-semantic-accent-icon": "#a2c9ff",
-      "sds-color-semantic-accent-icon-focus": "#a2c9ff",
-      "sds-color-semantic-accent-icon-hover": "#cde3ff",
-      "sds-color-semantic-accent-icon-open": "#a2c9ff",
-      "sds-color-semantic-accent-icon-pressed": "#e2eeff",
-      "sds-color-semantic-accent-icon-selected": "#a2c9ff",
-      "sds-color-semantic-accent-surface-primary": "#002573",
-      "sds-color-semantic-accent-surface-secondary": "#a2c9ff",
-      "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-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-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-beta-border": "#cebef8",
-      "sds-color-semantic-beta-fill-hover": "#e4dcfc",
-      "sds-color-semantic-beta-fill-pressed": "#f0ebfe",
-      "sds-color-semantic-beta-fill-primary": "#cebef8",
-      "sds-color-semantic-beta-fill-secondary": "#4b0190",
-      "sds-color-semantic-beta-ornament": "#e4dcfc",
-      "sds-color-semantic-beta-surface-primary": "#4b0190",
-      "sds-color-semantic-beta-surface-secondary": "#cebef8",
-      "sds-color-semantic-beta-text": "#e4dcfc",
+      "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-secondary": "#331252",
+      "sds-color-semantic-beta-ornament": "#cebef8",
+      "sds-color-semantic-beta-surface-primary": "#aa89ef",
+      "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": "#cde3ff",
-      "sds-color-semantic-info-fill-pressed": "#e2eeff",
-      "sds-color-semantic-info-fill-primary": "#a2c9ff",
-      "sds-color-semantic-info-fill-secondary": "#002573",
-      "sds-color-semantic-info-ornament": "#cde3ff",
-      "sds-color-semantic-info-surface-primary": "#002573",
-      "sds-color-semantic-info-surface-secondary": "#a2c9ff",
-      "sds-color-semantic-info-text": "#cde3ff",
-      "sds-color-semantic-negative-border": "#FF9385",
-      "sds-color-semantic-negative-fill-hover": "#FFBDB3",
-      "sds-color-semantic-negative-fill-pressed": "#FFD8D1",
-      "sds-color-semantic-negative-fill-primary": "#FF9385",
-      "sds-color-semantic-negative-fill-secondary": "#630008",
-      "sds-color-semantic-negative-ornament": "#FFBDB3",
-      "sds-color-semantic-negative-surface-primary": "#630008",
-      "sds-color-semantic-negative-surface-secondary": "#FF9385",
-      "sds-color-semantic-negative-text": "#FFBDB3",
+      "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-secondary": "#0f1d4a",
+      "sds-color-semantic-info-ornament": "#a2c9ff",
+      "sds-color-semantic-info-surface-primary": "#5b9aff",
+      "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-secondary": "#330603",
+      "sds-color-semantic-negative-ornament": "#ff988a",
+      "sds-color-semantic-negative-surface-primary": "#e05043",
+      "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-ornament": "#ededed",
-      "sds-color-semantic-neutral-surface-primary": "#494949",
-      "sds-color-semantic-neutral-surface-secondary": "#aaaaaa",
+      "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": "#cf8e00",
-      "sds-color-semantic-notice-fill-hover": "#efad00",
-      "sds-color-semantic-notice-fill-pressed": "#ffdc9a",
-      "sds-color-semantic-notice-fill-primary": "#cf8e00",
-      "sds-color-semantic-notice-fill-secondary": "#552300",
-      "sds-color-semantic-notice-ornament": "#efad00",
-      "sds-color-semantic-notice-surface-primary": "#552300",
-      "sds-color-semantic-notice-surface-secondary": "#cf8e00",
-      "sds-color-semantic-notice-text": "#efad00",
+      "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-secondary": "#361b07",
+      "sds-color-semantic-notice-ornament": "#e5bc63",
+      "sds-color-semantic-notice-surface-primary": "#d9a943",
+      "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": "#bcecc5",
-      "sds-color-semantic-positive-fill-pressed": "#daf4de",
-      "sds-color-semantic-positive-fill-primary": "#85d898",
-      "sds-color-semantic-positive-fill-secondary": "#053918",
-      "sds-color-semantic-positive-ornament": "#bcecc5",
-      "sds-color-semantic-positive-surface-primary": "#053918",
-      "sds-color-semantic-positive-surface-secondary": "#85d898",
-      "sds-color-semantic-positive-text": "#bcecc5"
+      "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-secondary": "#082608",
+      "sds-color-semantic-positive-ornament": "#85d898",
+      "sds-color-semantic-positive-surface-primary": "#4bae68",
+      "sds-color-semantic-positive-surface-secondary": "#082608",
+      "sds-color-semantic-positive-text": "#85d898"
     },
     "light": {
       "sds-color-primitive-blue-100": "#e2eeff",
@@ -472,50 +475,53 @@
       "sds-color-primitive-purple-500": "#8b54e2",
       "sds-color-primitive-purple-600": "#6526b5",
       "sds-color-primitive-purple-700": "#490092",
-      "sds-color-primitive-purple-800": "#1a004c",
+      "sds-color-primitive-purple-800": "#26004c",
       "sds-color-primitive-red-100": "#ffe8e6",
       "sds-color-primitive-red-200": "#ffd6d2",
       "sds-color-primitive-red-300": "#ffafa8",
       "sds-color-primitive-red-400": "#ff7e78",
       "sds-color-primitive-red-500": "#db2131",
-      "sds-color-primitive-red-600": "#980013",
+      "sds-color-primitive-red-600": "#980017",
       "sds-color-primitive-red-700": "#6f0008",
       "sds-color-primitive-red-800": "#340000",
-      "sds-color-primitive-yellow-100": "#ffefcf",
+      "sds-color-primitive-yellow-100": "#fff3db",
       "sds-color-primitive-yellow-200": "#ffdb97",
       "sds-color-primitive-yellow-300": "#ffca5c",
       "sds-color-primitive-yellow-400": "#fab700",
       "sds-color-primitive-yellow-500": "#da9900",
-      "sds-color-primitive-yellow-600": "#b77800",
+      "sds-color-primitive-yellow-600": "#b07300",
       "sds-color-primitive-yellow-700": "#7c3e00",
       "sds-color-primitive-yellow-800": "#541700",
       "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-border": "#969696",
+      "sds-color-semantic-base-background-primary": "#ffffff",
+      "sds-color-semantic-base-background-primary-inverse": "#000000",
+      "sds-color-semantic-base-background-secondary": "#f3f3f3",
+      "sds-color-semantic-base-background-secondary-inverse": "#3b3b3b",
+      "sds-color-semantic-base-background-tertiary": "#dfdfdf",
+      "sds-color-semantic-base-border": "#6c6c6c",
       "sds-color-semantic-base-border-disabled": "#c3c3c3",
       "sds-color-semantic-base-border-hover": "#000000",
+      "sds-color-semantic-base-border-inverse": "#ffffff",
       "sds-color-semantic-base-border-pressed": "#000000",
       "sds-color-semantic-base-border-table": "#c3c3c3",
       "sds-color-semantic-base-divider": "#dfdfdf",
+      "sds-color-semantic-base-divider-inverse": "#6c6c6c",
       "sds-color-semantic-base-fill-disabled": "#dfdfdf",
       "sds-color-semantic-base-fill-hover": "#c3c3c347",
       "sds-color-semantic-base-fill-open": "#c3c3c347",
       "sds-color-semantic-base-fill-pressed": "#c3c3c347",
       "sds-color-semantic-base-fill-primary": "#ffffff",
       "sds-color-semantic-base-fill-selected": "#000000",
-      "sds-color-semantic-base-icon-disabled": "#c3c3c3",
-      "sds-color-semantic-base-icon-primary": "#969696",
-      "sds-color-semantic-base-icon-primary-hover": "#000000",
-      "sds-color-semantic-base-icon-primary-inverse": "#ffffff",
-      "sds-color-semantic-base-icon-primary-inverse-hover": "#a5a5a5",
-      "sds-color-semantic-base-icon-primary-inverse-pressed": "#a5a5a5",
-      "sds-color-semantic-base-icon-primary-pressed": "#000000",
-      "sds-color-semantic-base-icon-secondary": "#000000",
-      "sds-color-semantic-base-surface-background": "#ffffff",
-      "sds-color-semantic-base-surface-primary": "#ffffff",
-      "sds-color-semantic-base-surface-primary-inverse": "#000000",
-      "sds-color-semantic-base-surface-secondary": "#f3f3f3",
-      "sds-color-semantic-base-surface-tertiary": "#dfdfdf",
+      "sds-color-semantic-base-ornament-disabled": "#c3c3c3",
+      "sds-color-semantic-base-ornament-on-fill": "#ffffff",
+      "sds-color-semantic-base-ornament-primary": "#000000",
+      "sds-color-semantic-base-ornament-primary-inverse": "#ffffff",
+      "sds-color-semantic-base-ornament-secondary": "#6c6c6c",
+      "sds-color-semantic-base-ornament-secondary-hover": "#000000",
+      "sds-color-semantic-base-ornament-secondary-pressed": "#000000",
+      "sds-color-semantic-base-surface": "#ffffff",
+      "sds-color-semantic-base-surface-inverse": "#000000",
       "sds-color-semantic-base-text-disabled": "#c3c3c3",
       "sds-color-semantic-base-text-primary": "#000000",
       "sds-color-semantic-base-text-primary-inverse": "#ffffff",
@@ -530,70 +536,70 @@
       "sds-color-semantic-accent-fill-hover": "#0041b9",
       "sds-color-semantic-accent-fill-pressed": "#002d90",
       "sds-color-semantic-accent-fill-primary": "#1a6cef",
-      "sds-color-semantic-accent-icon": "#1a6cef",
-      "sds-color-semantic-accent-icon-focus": "#1a6cef",
-      "sds-color-semantic-accent-icon-hover": "#0041b9",
-      "sds-color-semantic-accent-icon-open": "#1a6cef",
-      "sds-color-semantic-accent-icon-pressed": "#002d90",
-      "sds-color-semantic-accent-icon-selected": "#1a6cef",
-      "sds-color-semantic-accent-surface-primary": "#e2eeff",
-      "sds-color-semantic-accent-surface-secondary": "#1a6cef",
+      "sds-color-semantic-accent-ornament": "#1a6cef",
+      "sds-color-semantic-accent-ornament-focus": "#1a6cef",
+      "sds-color-semantic-accent-ornament-hover": "#0041b9",
+      "sds-color-semantic-accent-ornament-open": "#1a6cef",
+      "sds-color-semantic-accent-ornament-pressed": "#002d90",
+      "sds-color-semantic-accent-ornament-selected": "#1a6cef",
+      "sds-color-semantic-accent-surface-primary": "#1a6cef",
+      "sds-color-semantic-accent-surface-secondary": "#e2eeff",
       "sds-color-semantic-accent-text-action": "#1a6cef",
       "sds-color-semantic-accent-text-action-hover": "#0041b9",
       "sds-color-semantic-accent-text-action-pressed": "#002d90",
-      "sds-color-semantic-beta-border": "#8b54e2",
+      "sds-color-semantic-beta-border": "#6526b5",
       "sds-color-semantic-beta-fill-hover": "#6526b5",
       "sds-color-semantic-beta-fill-pressed": "#490092",
       "sds-color-semantic-beta-fill-primary": "#8b54e2",
       "sds-color-semantic-beta-fill-secondary": "#efeafe",
       "sds-color-semantic-beta-ornament": "#6526b5",
-      "sds-color-semantic-beta-surface-primary": "#efeafe",
-      "sds-color-semantic-beta-surface-secondary": "#8b54e2",
+      "sds-color-semantic-beta-surface-primary": "#8b54e2",
+      "sds-color-semantic-beta-surface-secondary": "#efeafe",
       "sds-color-semantic-beta-text": "#6526b5",
-      "sds-color-semantic-info-border": "#1a6cef",
+      "sds-color-semantic-info-border": "#0041b9",
       "sds-color-semantic-info-fill-hover": "#0041b9",
       "sds-color-semantic-info-fill-pressed": "#002d90",
       "sds-color-semantic-info-fill-primary": "#1a6cef",
       "sds-color-semantic-info-fill-secondary": "#e2eeff",
       "sds-color-semantic-info-ornament": "#0041b9",
-      "sds-color-semantic-info-surface-primary": "#e2eeff",
-      "sds-color-semantic-info-surface-secondary": "#1a6cef",
+      "sds-color-semantic-info-surface-primary": "#1a6cef",
+      "sds-color-semantic-info-surface-secondary": "#e2eeff",
       "sds-color-semantic-info-text": "#0041b9",
-      "sds-color-semantic-negative-border": "#db2131",
-      "sds-color-semantic-negative-fill-hover": "#980013",
+      "sds-color-semantic-negative-border": "#980017",
+      "sds-color-semantic-negative-fill-hover": "#980017",
       "sds-color-semantic-negative-fill-pressed": "#6f0008",
       "sds-color-semantic-negative-fill-primary": "#db2131",
       "sds-color-semantic-negative-fill-secondary": "#ffe8e6",
-      "sds-color-semantic-negative-ornament": "#980013",
-      "sds-color-semantic-negative-surface-primary": "#ffe8e6",
-      "sds-color-semantic-negative-surface-secondary": "#db2131",
-      "sds-color-semantic-negative-text": "#980013",
+      "sds-color-semantic-negative-ornament": "#980017",
+      "sds-color-semantic-negative-surface-primary": "#db2131",
+      "sds-color-semantic-negative-surface-secondary": "#ffe8e6",
+      "sds-color-semantic-negative-text": "#980017",
       "sds-color-semantic-neutral-border": "#969696",
       "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-ornament": "#3b3b3b",
-      "sds-color-semantic-neutral-surface-primary": "#dfdfdf",
-      "sds-color-semantic-neutral-surface-secondary": "#969696",
+      "sds-color-semantic-neutral-surface-primary": "#969696",
+      "sds-color-semantic-neutral-surface-secondary": "#dfdfdf",
       "sds-color-semantic-neutral-text": "#3b3b3b",
-      "sds-color-semantic-notice-border": "#da9900",
-      "sds-color-semantic-notice-fill-hover": "#b77800",
+      "sds-color-semantic-notice-border": "#b07300",
+      "sds-color-semantic-notice-fill-hover": "#b07300",
       "sds-color-semantic-notice-fill-pressed": "#7c3e00",
       "sds-color-semantic-notice-fill-primary": "#da9900",
-      "sds-color-semantic-notice-fill-secondary": "#ffefcf",
-      "sds-color-semantic-notice-ornament": "#b77800",
-      "sds-color-semantic-notice-surface-primary": "#ffefcf",
-      "sds-color-semantic-notice-surface-secondary": "#da9900",
-      "sds-color-semantic-notice-text": "#b77800",
-      "sds-color-semantic-positive-border": "#238444",
+      "sds-color-semantic-notice-fill-secondary": "#fff3db",
+      "sds-color-semantic-notice-ornament": "#b07300",
+      "sds-color-semantic-notice-surface-primary": "#da9900",
+      "sds-color-semantic-notice-surface-secondary": "#fff3db",
+      "sds-color-semantic-notice-text": "#b07300",
+      "sds-color-semantic-positive-border": "#105b2b",
       "sds-color-semantic-positive-fill-hover": "#105b2b",
       "sds-color-semantic-positive-fill-pressed": "#07431d",
       "sds-color-semantic-positive-fill-primary": "#238444",
       "sds-color-semantic-positive-fill-secondary": "#daf4de",
       "sds-color-semantic-positive-ornament": "#105b2b",
-      "sds-color-semantic-positive-surface-primary": "#daf4de",
-      "sds-color-semantic-positive-surface-secondary": "#238444",
+      "sds-color-semantic-positive-surface-primary": "#238444",
+      "sds-color-semantic-positive-surface-secondary": "#daf4de",
       "sds-color-semantic-positive-text": "#105b2b"
     }
   },
diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
index 6f35e2162..9e43cc9ec 100644
--- a/packages/components/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -16,34 +16,38 @@ $sds-border-base-disabled: 1px solid #c3c3c3;
 $sds-border-base-disabled-dark: 1px solid #696969;
 $sds-border-base-divider: 1px solid #dfdfdf;
 $sds-border-base-divider-dark: 1px solid #494949;
+$sds-border-base-divider-inverse: 1px solid #6c6c6c;
+$sds-border-base-divider-inverse-dark: 1px solid #cdcdcd;
 $sds-border-base-hover: 1px dashed #000000;
 $sds-border-base-hover-dark: 1px dashed #ffffff;
+$sds-border-base-inverse: 1px dashed #ffffff;
+$sds-border-base-inverse-dark: 1px dashed #000000;
 $sds-border-base-pressed: 1px dashed #000000;
 $sds-border-base-pressed-dark: 1px dashed #ffffff;
 $sds-border-base-table: 1px solid #c3c3c3;
 $sds-border-base-table-dark: 1px solid #696969;
 $sds-border-beta-default: 1px solid #6526b5;
-$sds-border-beta-default-dark: 1px solid #e4dcfc;
+$sds-border-beta-default-dark: 1px solid #cebef8;
 $sds-border-beta-extra-thick: 4px solid #6526b5;
-$sds-border-beta-extra-thick-dark: 4px solid #e4dcfc;
+$sds-border-beta-extra-thick-dark: 4px solid #cebef8;
 $sds-border-beta-thick: 2px solid #6526b5;
-$sds-border-beta-thick-dark: 2px solid #e4dcfc;
+$sds-border-beta-thick-dark: 2px solid #cebef8;
 $sds-border-info-default: 1px solid #0041b9;
-$sds-border-info-default-dark: 1px solid #cde3ff;
+$sds-border-info-default-dark: 1px solid #a2c9ff;
 $sds-border-info-extra-thick: 4px solid #0041b9;
-$sds-border-info-extra-thick-dark: 4px solid #cde3ff;
+$sds-border-info-extra-thick-dark: 4px solid #a2c9ff;
 $sds-border-info-thick: 2px solid #0041b9;
-$sds-border-info-thick-dark: 2px solid #cde3ff;
+$sds-border-info-thick-dark: 2px solid #a2c9ff;
 $sds-border-link-dashed: 1px dashed;
 $sds-border-link-dashed-dark: 1px dashed;
 $sds-border-link-solid: 1px solid;
 $sds-border-link-solid-dark: 1px solid;
-$sds-border-negative-default: 1px solid #980013;
-$sds-border-negative-default-dark: 1px solid #FFBDB3;
-$sds-border-negative-extra-thick: 4px solid #980013;
-$sds-border-negative-extra-thick-dark: 4px solid #FFBDB3;
-$sds-border-negative-thick: 2px solid #980013;
-$sds-border-negative-thick-dark: 2px solid #FFBDB3;
+$sds-border-negative-default: 1px solid #980017;
+$sds-border-negative-default-dark: 1px solid #ff988a;
+$sds-border-negative-extra-thick: 4px solid #980017;
+$sds-border-negative-extra-thick-dark: 4px solid #ff988a;
+$sds-border-negative-thick: 2px solid #980017;
+$sds-border-negative-thick-dark: 2px solid #ff988a;
 $sds-border-neutral-default: 1px solid #969696;
 $sds-border-neutral-default-dark: 1px solid #aaaaaa;
 $sds-border-neutral-extra-thick: 4px solid #969696;
@@ -52,37 +56,37 @@ $sds-border-neutral-thick: 2px solid #969696;
 $sds-border-neutral-thick-dark: 2px solid #aaaaaa;
 $sds-border-none: none;
 $sds-border-none-dark: none;
-$sds-border-notice-default: 1px solid #b77800;
-$sds-border-notice-default-dark: 1px solid #efad00;
-$sds-border-notice-extra-thick: 4px solid #b77800;
-$sds-border-notice-extra-thick-dark: 4px solid #efad00;
-$sds-border-notice-thick: 2px solid #b77800;
-$sds-border-notice-thick-dark: 2px solid #efad00;
+$sds-border-notice-default: 1px solid #b07300;
+$sds-border-notice-default-dark: 1px solid #e5bc63;
+$sds-border-notice-extra-thick: 4px solid #b07300;
+$sds-border-notice-extra-thick-dark: 4px solid #e5bc63;
+$sds-border-notice-thick: 2px solid #b07300;
+$sds-border-notice-thick-dark: 2px solid #e5bc63;
 $sds-border-positive-default: 1px solid #105b2b;
-$sds-border-positive-default-dark: 1px solid #bcecc5;
+$sds-border-positive-default-dark: 1px solid #85d898;
 $sds-border-positive-extra-thick: 4px solid #105b2b;
-$sds-border-positive-extra-thick-dark: 4px solid #bcecc5;
+$sds-border-positive-extra-thick-dark: 4px solid #85d898;
 $sds-border-positive-thick: 2px solid #105b2b;
-$sds-border-positive-thick-dark: 2px solid #bcecc5;
+$sds-border-positive-thick-dark: 2px solid #85d898;
 $sds-breakpoint-sm: 0px;
 $sds-breakpoint-md: 512px;
 $sds-breakpoint-lg: 1024px;
 $sds-color-primitive-blue-100: #e2eeff;
-$sds-color-primitive-blue-100-dark: #002573;
+$sds-color-primitive-blue-100-dark: #0f1d4a;
 $sds-color-primitive-blue-200: #cce1ff;
-$sds-color-primitive-blue-200-dark: #0048c5;
+$sds-color-primitive-blue-200-dark: #0a216e;
 $sds-color-primitive-blue-300: #9dc6ff;
-$sds-color-primitive-blue-300-dark: #2573f4;
+$sds-color-primitive-blue-300-dark: #0647b8;
 $sds-color-primitive-blue-400: #6ca6ff;
-$sds-color-primitive-blue-400-dark: #5b9aff;
+$sds-color-primitive-blue-400-dark: #2573f4;
 $sds-color-primitive-blue-500: #1a6cef;
-$sds-color-primitive-blue-500-dark: #a2c9ff;
+$sds-color-primitive-blue-500-dark: #5b9aff;
 $sds-color-primitive-blue-600: #0041b9;
-$sds-color-primitive-blue-600-dark: #cde3ff;
+$sds-color-primitive-blue-600-dark: #a2c9ff;
 $sds-color-primitive-blue-700: #002d90;
-$sds-color-primitive-blue-700-dark: #e2eeff;
+$sds-color-primitive-blue-700-dark: #cde3ff;
 $sds-color-primitive-blue-800: #00114a;
-$sds-color-primitive-blue-800-dark: #f7faff;
+$sds-color-primitive-blue-800-dark: #e2eeff;
 $sds-color-primitive-gray-50: #ffffff;
 $sds-color-primitive-gray-50-dark: #000000;
 $sds-color-primitive-gray-75: #fafafa;
@@ -106,85 +110,99 @@ $sds-color-primitive-gray-800-dark: #fafafa;
 $sds-color-primitive-gray-900: #000000;
 $sds-color-primitive-gray-900-dark: #ffffff;
 $sds-color-primitive-green-100: #daf4de;
-$sds-color-primitive-green-100-dark: #053918;
+$sds-color-primitive-green-100-dark: #082608;
 $sds-color-primitive-green-200: #b9ecc3;
-$sds-color-primitive-green-200-dark: #12612e;
+$sds-color-primitive-green-200-dark: #063617;
 $sds-color-primitive-green-300: #7fd693;
-$sds-color-primitive-green-300-dark: #288b49;
+$sds-color-primitive-green-300-dark: #10632e;
 $sds-color-primitive-green-400: #50b96d;
-$sds-color-primitive-green-400-dark: #43ae63;
+$sds-color-primitive-green-400-dark: #278b48;
 $sds-color-primitive-green-500: #238444;
-$sds-color-primitive-green-500-dark: #85d898;
+$sds-color-primitive-green-500-dark: #4bae68;
 $sds-color-primitive-green-600: #105b2b;
-$sds-color-primitive-green-600-dark: #bcecc5;
+$sds-color-primitive-green-600-dark: #85d898;
 $sds-color-primitive-green-700: #07431d;
-$sds-color-primitive-green-700-dark: #daf4de;
+$sds-color-primitive-green-700-dark: #bcecc5;
 $sds-color-primitive-green-800: #001f00;
-$sds-color-primitive-green-800-dark: #f7fbf6;
+$sds-color-primitive-green-800-dark: #daf4de;
 $sds-color-primitive-purple-100: #efeafe;
-$sds-color-primitive-purple-100-dark: #4b0190;
+$sds-color-primitive-purple-100-dark: #331252;
 $sds-color-primitive-purple-200: #e4dbfc;
-$sds-color-primitive-purple-200-dark: #6b2ebc;
+$sds-color-primitive-purple-200-dark: #410f70;
 $sds-color-primitive-purple-300: #cbbaf8;
-$sds-color-primitive-purple-300-dark: #905de6;
+$sds-color-primitive-purple-300-dark: #6429b2;
 $sds-color-primitive-purple-400: #b296f2;
-$sds-color-primitive-purple-400-dark: #aa89ef;
+$sds-color-primitive-purple-400-dark: #905de6;
 $sds-color-primitive-purple-500: #8b54e2;
-$sds-color-primitive-purple-500-dark: #cebef8;
+$sds-color-primitive-purple-500-dark: #aa89ef;
 $sds-color-primitive-purple-600: #6526b5;
-$sds-color-primitive-purple-600-dark: #e4dcfc;
+$sds-color-primitive-purple-600-dark: #cebef8;
 $sds-color-primitive-purple-700: #490092;
-$sds-color-primitive-purple-700-dark: #f0ebfe;
-$sds-color-primitive-purple-800: #1a004c;
-$sds-color-primitive-purple-800-dark: #fbf9ff;
+$sds-color-primitive-purple-700-dark: #e4dcfc;
+$sds-color-primitive-purple-800: #26004c;
+$sds-color-primitive-purple-800-dark: #f0ebfe;
 $sds-color-primitive-red-100: #ffe8e6;
-$sds-color-primitive-red-100-dark: #630008;
+$sds-color-primitive-red-100-dark: #330603;
 $sds-color-primitive-red-200: #ffd6d2;
-$sds-color-primitive-red-200-dark: #A30000;
+$sds-color-primitive-red-200-dark: #660a12;
 $sds-color-primitive-red-300: #ffafa8;
-$sds-color-primitive-red-300-dark: #E52722;
+$sds-color-primitive-red-300-dark: #9e1c1c;
 $sds-color-primitive-red-400: #ff7e78;
-$sds-color-primitive-red-400-dark: #FF695B;
+$sds-color-primitive-red-400-dark: #c73028;
 $sds-color-primitive-red-500: #db2131;
-$sds-color-primitive-red-500-dark: #FF9385;
-$sds-color-primitive-red-600: #980013;
-$sds-color-primitive-red-600-dark: #FFBDB3;
+$sds-color-primitive-red-500-dark: #e05043;
+$sds-color-primitive-red-600: #980017;
+$sds-color-primitive-red-600-dark: #ff988a;
 $sds-color-primitive-red-700: #6f0008;
-$sds-color-primitive-red-700-dark: #FFD8D1;
+$sds-color-primitive-red-700-dark: #ffbdb3;
 $sds-color-primitive-red-800: #340000;
-$sds-color-primitive-red-800-dark: #FFF1EE;
-$sds-color-primitive-yellow-100: #ffefcf;
-$sds-color-primitive-yellow-100-dark: #552300;
+$sds-color-primitive-red-800-dark: #ffd8d1;
+$sds-color-primitive-yellow-100: #fff3db;
+$sds-color-primitive-yellow-100-dark: #361b07;
 $sds-color-primitive-yellow-200: #ffdb97;
-$sds-color-primitive-yellow-200-dark: #834500;
+$sds-color-primitive-yellow-200-dark: #52270a;
 $sds-color-primitive-yellow-300: #ffca5c;
-$sds-color-primitive-yellow-300-dark: #985a00;
+$sds-color-primitive-yellow-300-dark: #965a0b;
 $sds-color-primitive-yellow-400: #fab700;
-$sds-color-primitive-yellow-400-dark: #ac6c00;
+$sds-color-primitive-yellow-400-dark: #bd8804;
 $sds-color-primitive-yellow-500: #da9900;
-$sds-color-primitive-yellow-500-dark: #cf8e00;
-$sds-color-primitive-yellow-600: #b77800;
-$sds-color-primitive-yellow-600-dark: #efad00;
+$sds-color-primitive-yellow-500-dark: #d9a943;
+$sds-color-primitive-yellow-600: #b07300;
+$sds-color-primitive-yellow-600-dark: #e5bc63;
 $sds-color-primitive-yellow-700: #7c3e00;
-$sds-color-primitive-yellow-700-dark: #ffdc9a;
+$sds-color-primitive-yellow-700-dark: #f5d789;
 $sds-color-primitive-yellow-800: #541700;
-$sds-color-primitive-yellow-800-dark: #fcf2e3;
+$sds-color-primitive-yellow-800-dark: #ffe6a8;
 $sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
 $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-border: #969696;
-$sds-color-semantic-base-border-dark: #aaaaaa;
+$sds-color-semantic-base-background-primary: #ffffff;
+$sds-color-semantic-base-background-primary-dark: #000000;
+$sds-color-semantic-base-background-primary-inverse: #000000;
+$sds-color-semantic-base-background-primary-inverse-dark: #ffffff;
+$sds-color-semantic-base-background-secondary: #f3f3f3;
+$sds-color-semantic-base-background-secondary-dark: #333333;
+$sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
+$sds-color-semantic-base-background-secondary-inverse-dark: #ededed;
+$sds-color-semantic-base-background-tertiary: #dfdfdf;
+$sds-color-semantic-base-background-tertiary-dark: #494949;
+$sds-color-semantic-base-border: #6c6c6c;
+$sds-color-semantic-base-border-dark: #cdcdcd;
 $sds-color-semantic-base-border-disabled: #c3c3c3;
 $sds-color-semantic-base-border-disabled-dark: #696969;
 $sds-color-semantic-base-border-hover: #000000;
 $sds-color-semantic-base-border-hover-dark: #ffffff;
+$sds-color-semantic-base-border-inverse: #ffffff;
+$sds-color-semantic-base-border-inverse-dark: #000000;
 $sds-color-semantic-base-border-pressed: #000000;
 $sds-color-semantic-base-border-pressed-dark: #ffffff;
 $sds-color-semantic-base-border-table: #c3c3c3;
 $sds-color-semantic-base-border-table-dark: #696969;
 $sds-color-semantic-base-divider: #dfdfdf;
 $sds-color-semantic-base-divider-dark: #494949;
+$sds-color-semantic-base-divider-inverse: #6c6c6c;
+$sds-color-semantic-base-divider-inverse-dark: #cdcdcd;
 $sds-color-semantic-base-fill-disabled: #dfdfdf;
 $sds-color-semantic-base-fill-disabled-dark: #494949;
 $sds-color-semantic-base-fill-hover: #c3c3c347;
@@ -197,32 +215,24 @@ $sds-color-semantic-base-fill-primary: #ffffff;
 $sds-color-semantic-base-fill-primary-dark: #000000;
 $sds-color-semantic-base-fill-selected: #000000;
 $sds-color-semantic-base-fill-selected-dark: #ffffff;
-$sds-color-semantic-base-icon-disabled: #c3c3c3;
-$sds-color-semantic-base-icon-disabled-dark: #696969;
-$sds-color-semantic-base-icon-primary: #969696;
-$sds-color-semantic-base-icon-primary-dark: #aaaaaa;
-$sds-color-semantic-base-icon-primary-hover: #000000;
-$sds-color-semantic-base-icon-primary-hover-dark: #ffffff;
-$sds-color-semantic-base-icon-primary-inverse: #ffffff;
-$sds-color-semantic-base-icon-primary-inverse-dark: #000000;
-$sds-color-semantic-base-icon-primary-inverse-hover: #a5a5a5;
-$sds-color-semantic-base-icon-primary-inverse-hover-dark: #9b9b9b;
-$sds-color-semantic-base-icon-primary-inverse-pressed: #a5a5a5;
-$sds-color-semantic-base-icon-primary-inverse-pressed-dark: #9b9b9b;
-$sds-color-semantic-base-icon-primary-pressed: #000000;
-$sds-color-semantic-base-icon-primary-pressed-dark: #ffffff;
-$sds-color-semantic-base-icon-secondary: #000000;
-$sds-color-semantic-base-icon-secondary-dark: #ffffff;
-$sds-color-semantic-base-surface-background: #ffffff;
-$sds-color-semantic-base-surface-background-dark: #000000;
-$sds-color-semantic-base-surface-primary: #ffffff;
-$sds-color-semantic-base-surface-primary-dark: #000000;
-$sds-color-semantic-base-surface-primary-inverse: #000000;
-$sds-color-semantic-base-surface-primary-inverse-dark: #ffffff;
-$sds-color-semantic-base-surface-secondary: #f3f3f3;
-$sds-color-semantic-base-surface-secondary-dark: #333333;
-$sds-color-semantic-base-surface-tertiary: #dfdfdf;
-$sds-color-semantic-base-surface-tertiary-dark: #494949;
+$sds-color-semantic-base-ornament-disabled: #c3c3c3;
+$sds-color-semantic-base-ornament-disabled-dark: #696969;
+$sds-color-semantic-base-ornament-on-fill: #ffffff;
+$sds-color-semantic-base-ornament-on-fill-dark: #000000;
+$sds-color-semantic-base-ornament-primary: #000000;
+$sds-color-semantic-base-ornament-primary-dark: #ffffff;
+$sds-color-semantic-base-ornament-primary-inverse: #ffffff;
+$sds-color-semantic-base-ornament-primary-inverse-dark: #000000;
+$sds-color-semantic-base-ornament-secondary: #6c6c6c;
+$sds-color-semantic-base-ornament-secondary-dark: #cdcdcd;
+$sds-color-semantic-base-ornament-secondary-hover: #000000;
+$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-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-primary: #000000;
@@ -234,99 +244,99 @@ $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-accent-border: #1a6cef;
-$sds-color-semantic-accent-border-dark: #a2c9ff;
+$sds-color-semantic-accent-border-dark: #5b9aff;
 $sds-color-semantic-accent-border-focus: #1a6cef;
-$sds-color-semantic-accent-border-focus-dark: #a2c9ff;
+$sds-color-semantic-accent-border-focus-dark: #5b9aff;
 $sds-color-semantic-accent-border-hover: #0041b9;
-$sds-color-semantic-accent-border-hover-dark: #cde3ff;
+$sds-color-semantic-accent-border-hover-dark: #a2c9ff;
 $sds-color-semantic-accent-border-open: #1a6cef;
-$sds-color-semantic-accent-border-open-dark: #a2c9ff;
+$sds-color-semantic-accent-border-open-dark: #5b9aff;
 $sds-color-semantic-accent-border-pressed: #002d90;
-$sds-color-semantic-accent-border-pressed-dark: #e2eeff;
+$sds-color-semantic-accent-border-pressed-dark: #cde3ff;
 $sds-color-semantic-accent-border-selected: #1a6cef;
-$sds-color-semantic-accent-border-selected-dark: #a2c9ff;
+$sds-color-semantic-accent-border-selected-dark: #5b9aff;
 $sds-color-semantic-accent-fill-hover: #0041b9;
-$sds-color-semantic-accent-fill-hover-dark: #cde3ff;
+$sds-color-semantic-accent-fill-hover-dark: #a2c9ff;
 $sds-color-semantic-accent-fill-pressed: #002d90;
-$sds-color-semantic-accent-fill-pressed-dark: #e2eeff;
+$sds-color-semantic-accent-fill-pressed-dark: #cde3ff;
 $sds-color-semantic-accent-fill-primary: #1a6cef;
-$sds-color-semantic-accent-fill-primary-dark: #a2c9ff;
-$sds-color-semantic-accent-icon: #1a6cef;
-$sds-color-semantic-accent-icon-dark: #a2c9ff;
-$sds-color-semantic-accent-icon-focus: #1a6cef;
-$sds-color-semantic-accent-icon-focus-dark: #a2c9ff;
-$sds-color-semantic-accent-icon-hover: #0041b9;
-$sds-color-semantic-accent-icon-hover-dark: #cde3ff;
-$sds-color-semantic-accent-icon-open: #1a6cef;
-$sds-color-semantic-accent-icon-open-dark: #a2c9ff;
-$sds-color-semantic-accent-icon-pressed: #002d90;
-$sds-color-semantic-accent-icon-pressed-dark: #e2eeff;
-$sds-color-semantic-accent-icon-selected: #1a6cef;
-$sds-color-semantic-accent-icon-selected-dark: #a2c9ff;
-$sds-color-semantic-accent-surface-primary: #e2eeff;
-$sds-color-semantic-accent-surface-primary-dark: #002573;
-$sds-color-semantic-accent-surface-secondary: #1a6cef;
-$sds-color-semantic-accent-surface-secondary-dark: #a2c9ff;
+$sds-color-semantic-accent-fill-primary-dark: #5b9aff;
+$sds-color-semantic-accent-ornament: #1a6cef;
+$sds-color-semantic-accent-ornament-dark: #5b9aff;
+$sds-color-semantic-accent-ornament-focus: #1a6cef;
+$sds-color-semantic-accent-ornament-focus-dark: #5b9aff;
+$sds-color-semantic-accent-ornament-hover: #0041b9;
+$sds-color-semantic-accent-ornament-hover-dark: #a2c9ff;
+$sds-color-semantic-accent-ornament-open: #1a6cef;
+$sds-color-semantic-accent-ornament-open-dark: #5b9aff;
+$sds-color-semantic-accent-ornament-pressed: #002d90;
+$sds-color-semantic-accent-ornament-pressed-dark: #cde3ff;
+$sds-color-semantic-accent-ornament-selected: #1a6cef;
+$sds-color-semantic-accent-ornament-selected-dark: #5b9aff;
+$sds-color-semantic-accent-surface-primary: #1a6cef;
+$sds-color-semantic-accent-surface-primary-dark: #5b9aff;
+$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: #a2c9ff;
+$sds-color-semantic-accent-text-action-dark: #5b9aff;
 $sds-color-semantic-accent-text-action-hover: #0041b9;
-$sds-color-semantic-accent-text-action-hover-dark: #cde3ff;
+$sds-color-semantic-accent-text-action-hover-dark: #a2c9ff;
 $sds-color-semantic-accent-text-action-pressed: #002d90;
-$sds-color-semantic-accent-text-action-pressed-dark: #e2eeff;
-$sds-color-semantic-beta-border: #8b54e2;
+$sds-color-semantic-accent-text-action-pressed-dark: #cde3ff;
+$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: #e4dcfc;
+$sds-color-semantic-beta-fill-hover-dark: #cebef8;
 $sds-color-semantic-beta-fill-pressed: #490092;
-$sds-color-semantic-beta-fill-pressed-dark: #f0ebfe;
+$sds-color-semantic-beta-fill-pressed-dark: #e4dcfc;
 $sds-color-semantic-beta-fill-primary: #8b54e2;
-$sds-color-semantic-beta-fill-primary-dark: #cebef8;
+$sds-color-semantic-beta-fill-primary-dark: #aa89ef;
 $sds-color-semantic-beta-fill-secondary: #efeafe;
-$sds-color-semantic-beta-fill-secondary-dark: #4b0190;
+$sds-color-semantic-beta-fill-secondary-dark: #331252;
 $sds-color-semantic-beta-ornament: #6526b5;
-$sds-color-semantic-beta-ornament-dark: #e4dcfc;
-$sds-color-semantic-beta-surface-primary: #efeafe;
-$sds-color-semantic-beta-surface-primary-dark: #4b0190;
-$sds-color-semantic-beta-surface-secondary: #8b54e2;
-$sds-color-semantic-beta-surface-secondary-dark: #cebef8;
+$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-secondary: #efeafe;
+$sds-color-semantic-beta-surface-secondary-dark: #331252;
 $sds-color-semantic-beta-text: #6526b5;
-$sds-color-semantic-beta-text-dark: #e4dcfc;
-$sds-color-semantic-info-border: #1a6cef;
+$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: #cde3ff;
+$sds-color-semantic-info-fill-hover-dark: #a2c9ff;
 $sds-color-semantic-info-fill-pressed: #002d90;
-$sds-color-semantic-info-fill-pressed-dark: #e2eeff;
+$sds-color-semantic-info-fill-pressed-dark: #cde3ff;
 $sds-color-semantic-info-fill-primary: #1a6cef;
-$sds-color-semantic-info-fill-primary-dark: #a2c9ff;
+$sds-color-semantic-info-fill-primary-dark: #5b9aff;
 $sds-color-semantic-info-fill-secondary: #e2eeff;
-$sds-color-semantic-info-fill-secondary-dark: #002573;
+$sds-color-semantic-info-fill-secondary-dark: #0f1d4a;
 $sds-color-semantic-info-ornament: #0041b9;
-$sds-color-semantic-info-ornament-dark: #cde3ff;
-$sds-color-semantic-info-surface-primary: #e2eeff;
-$sds-color-semantic-info-surface-primary-dark: #002573;
-$sds-color-semantic-info-surface-secondary: #1a6cef;
-$sds-color-semantic-info-surface-secondary-dark: #a2c9ff;
+$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-secondary: #e2eeff;
+$sds-color-semantic-info-surface-secondary-dark: #0f1d4a;
 $sds-color-semantic-info-text: #0041b9;
-$sds-color-semantic-info-text-dark: #cde3ff;
-$sds-color-semantic-negative-border: #db2131;
-$sds-color-semantic-negative-border-dark: #FF9385;
-$sds-color-semantic-negative-fill-hover: #980013;
-$sds-color-semantic-negative-fill-hover-dark: #FFBDB3;
+$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-pressed: #6f0008;
-$sds-color-semantic-negative-fill-pressed-dark: #FFD8D1;
+$sds-color-semantic-negative-fill-pressed-dark: #ffbdb3;
 $sds-color-semantic-negative-fill-primary: #db2131;
-$sds-color-semantic-negative-fill-primary-dark: #FF9385;
+$sds-color-semantic-negative-fill-primary-dark: #e05043;
 $sds-color-semantic-negative-fill-secondary: #ffe8e6;
-$sds-color-semantic-negative-fill-secondary-dark: #630008;
-$sds-color-semantic-negative-ornament: #980013;
-$sds-color-semantic-negative-ornament-dark: #FFBDB3;
-$sds-color-semantic-negative-surface-primary: #ffe8e6;
-$sds-color-semantic-negative-surface-primary-dark: #630008;
-$sds-color-semantic-negative-surface-secondary: #db2131;
-$sds-color-semantic-negative-surface-secondary-dark: #FF9385;
-$sds-color-semantic-negative-text: #980013;
-$sds-color-semantic-negative-text-dark: #FFBDB3;
+$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-secondary: #ffe8e6;
+$sds-color-semantic-negative-surface-secondary-dark: #330603;
+$sds-color-semantic-negative-text: #980017;
+$sds-color-semantic-negative-text-dark: #ff988a;
 $sds-color-semantic-neutral-border: #969696;
 $sds-color-semantic-neutral-border-dark: #aaaaaa;
 $sds-color-semantic-neutral-fill-hover: #6c6c6c;
@@ -339,48 +349,48 @@ $sds-color-semantic-neutral-fill-secondary: #f3f3f3;
 $sds-color-semantic-neutral-fill-secondary-dark: #333333;
 $sds-color-semantic-neutral-ornament: #3b3b3b;
 $sds-color-semantic-neutral-ornament-dark: #ededed;
-$sds-color-semantic-neutral-surface-primary: #dfdfdf;
-$sds-color-semantic-neutral-surface-primary-dark: #494949;
-$sds-color-semantic-neutral-surface-secondary: #969696;
-$sds-color-semantic-neutral-surface-secondary-dark: #aaaaaa;
+$sds-color-semantic-neutral-surface-primary: #969696;
+$sds-color-semantic-neutral-surface-primary-dark: #aaaaaa;
+$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-notice-border: #da9900;
-$sds-color-semantic-notice-border-dark: #cf8e00;
-$sds-color-semantic-notice-fill-hover: #b77800;
-$sds-color-semantic-notice-fill-hover-dark: #efad00;
+$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-pressed: #7c3e00;
-$sds-color-semantic-notice-fill-pressed-dark: #ffdc9a;
+$sds-color-semantic-notice-fill-pressed-dark: #f5d789;
 $sds-color-semantic-notice-fill-primary: #da9900;
-$sds-color-semantic-notice-fill-primary-dark: #cf8e00;
-$sds-color-semantic-notice-fill-secondary: #ffefcf;
-$sds-color-semantic-notice-fill-secondary-dark: #552300;
-$sds-color-semantic-notice-ornament: #b77800;
-$sds-color-semantic-notice-ornament-dark: #efad00;
-$sds-color-semantic-notice-surface-primary: #ffefcf;
-$sds-color-semantic-notice-surface-primary-dark: #552300;
-$sds-color-semantic-notice-surface-secondary: #da9900;
-$sds-color-semantic-notice-surface-secondary-dark: #cf8e00;
-$sds-color-semantic-notice-text: #b77800;
-$sds-color-semantic-notice-text-dark: #efad00;
-$sds-color-semantic-positive-border: #238444;
+$sds-color-semantic-notice-fill-primary-dark: #d9a943;
+$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-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-positive-border: #105b2b;
 $sds-color-semantic-positive-border-dark: #85d898;
 $sds-color-semantic-positive-fill-hover: #105b2b;
-$sds-color-semantic-positive-fill-hover-dark: #bcecc5;
+$sds-color-semantic-positive-fill-hover-dark: #85d898;
 $sds-color-semantic-positive-fill-pressed: #07431d;
-$sds-color-semantic-positive-fill-pressed-dark: #daf4de;
+$sds-color-semantic-positive-fill-pressed-dark: #bcecc5;
 $sds-color-semantic-positive-fill-primary: #238444;
-$sds-color-semantic-positive-fill-primary-dark: #85d898;
+$sds-color-semantic-positive-fill-primary-dark: #4bae68;
 $sds-color-semantic-positive-fill-secondary: #daf4de;
-$sds-color-semantic-positive-fill-secondary-dark: #053918;
+$sds-color-semantic-positive-fill-secondary-dark: #082608;
 $sds-color-semantic-positive-ornament: #105b2b;
-$sds-color-semantic-positive-ornament-dark: #bcecc5;
-$sds-color-semantic-positive-surface-primary: #daf4de;
-$sds-color-semantic-positive-surface-primary-dark: #053918;
-$sds-color-semantic-positive-surface-secondary: #238444;
-$sds-color-semantic-positive-surface-secondary-dark: #85d898;
+$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-secondary: #daf4de;
+$sds-color-semantic-positive-surface-secondary-dark: #082608;
 $sds-color-semantic-positive-text: #105b2b;
-$sds-color-semantic-positive-text-dark: #bcecc5;
+$sds-color-semantic-positive-text-dark: #85d898;
 $sds-corner-l: 20px;
 $sds-corner-m: 4px;
 $sds-corner-s: 2px;
diff --git a/packages/components/src/common/svgs/IconCheckboxChecked.svg b/packages/components/src/common/svgs/IconCheckboxChecked.svg
index 4f51a9049..6127e0a12 100644
--- a/packages/components/src/common/svgs/IconCheckboxChecked.svg
+++ b/packages/components/src/common/svgs/IconCheckboxChecked.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"/>
-  <path fill="#fff" fill-rule="evenodd" d="M11.744 3.962a.557.557 0 0 0-.346.239L6.91 10.284 4.59 7.663c-.147-.205-.392-.285-.614-.185-.21.095-.355.33-.382.606-.027.272.062.543.238.703l2.733 3.09c.235.264.594.241.808-.047l4.874-6.612c.167-.22.21-.553.11-.833-.106-.294-.352-.472-.614-.423Z"/>
-</svg>
+  <path
+    d="M 0 2 C 0 0.895 0.895 0 2 0 L 14 0 C 15.105 0 16 0.895 16 2 L 16 14 C 16 15.105 15.105 16 14 16 L 2 16 C 0.895 16 0 15.105 0 14 Z M 11.744 3.962 C 11.602 3.993 11.478 4.079 11.398 4.201 L 6.91 10.284 L 4.59 7.663 C 4.443 7.458 4.198 7.378 3.976 7.478 C 3.766 7.573 3.621 7.808 3.594 8.084 C 3.567 8.356 3.656 8.627 3.832 8.787 L 6.565 11.877 C 6.8 12.141 7.159 12.118 7.373 11.83 L 12.247 5.218 C 12.414 4.998 12.457 4.665 12.357 4.385 C 12.251 4.091 12.005 3.913 11.743 3.962 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg b/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg
index 9461387e0..3611be71b 100644
--- a/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg
+++ b/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"/>
-  <path fill="#fff" d="M12.286 8.004a.625.625 0 0 0-.625-.625H4.339a.625.625 0 0 0 0 1.25h7.322c.345 0 .625-.28.625-.625Z"/>
-</svg>
+  <path
+    d="M 0 2 C 0 0.895 0.895 0 2 0 L 14 0 C 15.105 0 16 0.895 16 2 L 16 14 C 16 15.105 15.105 16 14 16 L 2 16 C 0.895 16 0 15.105 0 14 Z M 11.661 7.379 L 4.339 7.379 C 3.858 7.379 3.557 7.9 3.798 8.317 C 3.909 8.51 4.116 8.629 4.339 8.629 L 11.661 8.629 C 12.006 8.629 12.286 8.349 12.286 8.004 C 12.286 7.659 12.006 7.379 11.661 7.379 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/warnings.ts b/packages/components/src/common/warnings.ts
index 26b9957f6..4a04b962e 100644
--- a/packages/components/src/common/warnings.ts
+++ b/packages/components/src/common/warnings.ts
@@ -7,7 +7,7 @@ export enum SDSWarningTypes {
   MenuSelectDeprecated = "menuSelectDeprecated",
   TooltipSubtitle = "tooltipSubtitle",
   TooltipWidth = "tooltipWidth",
-  TooltipInverted = "tooltipInverted",
+  TooltipInvertStyle = "tooltipInvertStyle",
 }
 
 export const SDS_WARNINGS = {
@@ -48,10 +48,10 @@ export const SDS_WARNINGS = {
     hasWarned: false,
     message: "Warning: The 'wide' width is only available for light tooltips!",
   },
-  [SDSWarningTypes.TooltipInverted]: {
+  [SDSWarningTypes.TooltipInvertStyle]: {
     hasWarned: false,
     message:
-      "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead!",
+      "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
   },
 };
 
diff --git a/packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap
index 559810219..b465290dd 100644
--- a/packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Accordion /> Default story renders snapshot 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1z99gw-MuiPaper-root-MuiAccordion-root"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-11n92rv-MuiPaper-root-MuiAccordion-root"
 >
   <div
     aria-controls="undefined-header-panel-content"
@@ -25,7 +25,7 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconChevronDownSmall"
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
diff --git a/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx b/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
index d88b63804..50b7d1c59 100644
--- a/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
+++ b/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
@@ -15,7 +15,7 @@ const AccordionHeader = (props: AccordionHeaderProps) => {
     <StyledAccordionHeader
       aria-controls={`${id}-panel-content`}
       id={id}
-      expandIcon={<Icon sdsIcon="ChevronDown" sdsSize="xs" sdsType="static" />}
+      expandIcon={<Icon sdsIcon="ChevronDown" sdsSize="xs" />}
     >
       {children}
       {subtitle && <StyledSubtitle>{subtitle}</StyledSubtitle>}
diff --git a/packages/components/src/core/Accordion/components/AccordionHeader/style.ts b/packages/components/src/core/Accordion/components/AccordionHeader/style.ts
index 0703d1c3c..f2013c4d2 100644
--- a/packages/components/src/core/Accordion/components/AccordionHeader/style.ts
+++ b/packages/components/src/core/Accordion/components/AccordionHeader/style.ts
@@ -35,14 +35,14 @@ export const StyledAccordionHeader = styled(AccordionSummary)`
         align-self: center;
 
         svg {
-          color: ${semanticColors?.base?.iconPrimary};
+          color: ${semanticColors?.base?.ornamentSecondary};
         }
       }
 
       &:hover {
         & .${accordionSummaryClasses.expandIconWrapper} {
           svg {
-            color: ${semanticColors?.base?.iconPrimaryHover};
+            color: ${semanticColors?.base?.ornamentSecondaryHover};
           }
         }
       }
diff --git a/packages/components/src/core/Accordion/style.ts b/packages/components/src/core/Accordion/style.ts
index d480f3aaf..d75f85ff4 100644
--- a/packages/components/src/core/Accordion/style.ts
+++ b/packages/components/src/core/Accordion/style.ts
@@ -11,7 +11,6 @@ import {
   fontBodyXs,
   getBorders,
   getIconSizes,
-  getSemanticColors,
   getShadows,
   getSpaces,
   getTypography,
@@ -38,11 +37,10 @@ export const StyledAccordion = styled(Accordion, {
     const typography = getTypography(props);
     const borders = getBorders(props);
     const spaces = getSpaces(props);
-    const semanticColors = getSemanticColors(props);
 
     return css`
       &.${accordionClasses.root} {
-        background-color: ${semanticColors?.base?.surfaceBackground};
+        background-color: transparent;
         background-image: none;
         box-shadow: ${shadows?.none};
         font-family: ${typography?.fontFamily?.body};
diff --git a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
index 1ef6f47ea..177bce31e 100644
--- a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
       Search by label
     </label>
     <div
-      class="MuiFormControl-root MuiTextField-root css-1fp04lp-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-y1vhlm-MuiFormControl-root-MuiTextField-root"
     >
       <div
         class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
@@ -38,7 +38,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                 data-file-name="IconSearchSmall"
                 data-testid="IconSearchSmall"
                 fillcontrast="white"
@@ -108,7 +108,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                 data-file-name="IconChevronRightSmall"
                 data-testid="IconChevronRightSmall"
                 fillcontrast="white"
@@ -141,7 +141,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-ubyh96-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-n4omgz-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
@@ -171,7 +171,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                           data-file-name="IconSearchSmall"
                           data-testid="IconSearchSmall"
                           fillcontrast="white"
@@ -523,7 +523,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                 data-file-name="IconChevronRightSmall"
                 data-testid="IconChevronRightSmall"
                 fillcontrast="white"
@@ -556,7 +556,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-ubyh96-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-n4omgz-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
@@ -586,7 +586,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                           data-file-name="IconSearchSmall"
                           data-testid="IconSearchSmall"
                           fillcontrast="white"
@@ -982,7 +982,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
       <div
         aria-hidden="false"
         aria-label="Search Input"
-        class="MuiFormControl-root MuiTextField-root css-q18d0e-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-gl2zcs-MuiFormControl-root-MuiTextField-root"
         tabindex="0"
       >
         <div
@@ -1011,7 +1011,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                   data-file-name="IconSearchSmall"
                   data-testid="IconSearchSmall"
                   fillcontrast="white"
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
index c1cc88b01..c6ca35ca1 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
@@ -265,9 +265,6 @@ const AutocompleteBase = <
                     sdsType="tertiary"
                     sdsSize="small"
                     sdsStyle="icon"
-                    sdsIconProps={{
-                      sdsType: "iconButton",
-                    }}
                     icon="XMarkCircle"
                   />
                 )}
@@ -288,13 +285,9 @@ const AutocompleteBase = <
                   tabIndex={search ? 0 : -1}
                   aria-hidden={!search}
                   disabled={!search}
-                  onClick={clearInput}
                   sdsType="tertiary"
                   sdsSize="small"
                   sdsStyle="icon"
-                  sdsIconProps={{
-                    sdsType: "interactive",
-                  }}
                   icon="Search"
                 />
               </StyledInputAdornment>
@@ -425,6 +418,7 @@ const AutocompleteBase = <
         isMultiSelect={multiple}
         selected={selected}
         {...optionProps}
+        key={option.name}
       >
         {MenuItemContent}
       </MenuItem>
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
index 6f4bcdf2b..09f48823b 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
@@ -76,11 +76,11 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
             min-height: unset;
 
             &.${autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.surfaceSecondary};
+              background-color: ${semanticColors?.base?.fillHover};
             }
 
             &[aria-selected="true"] {
-              background-color: ${semanticColors?.base?.surfacePrimary};
+              background-color: ${semanticColors?.base?.surface};
             }
 
             &[aria-disabled="true"] {
@@ -88,7 +88,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
             }
 
             &[aria-selected="true"].${autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.surfaceSecondary};
+              background-color: ${semanticColors?.base?.fillHover};
             }
           }
 
@@ -102,7 +102,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
         .${autocompleteClasses.groupLabel} {
           top: 0;
           color: ${semanticColors?.base?.textSecondary};
-          background-color: ${semanticColors?.base?.surfacePrimary};
+          background-color: ${semanticColors?.base?.surface};
           padding: ${spaces?.xxs}px ${spaces?.s}px;
         }
 
@@ -176,7 +176,7 @@ export const StyledPaper = styled(Paper)`
     return `
       background-image: none;
       padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px ;
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.surface};
       border: ${borders?.none};
       border-radius: ${corners?.m}px;
       box-shadow: ${shadows?.m};
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
index 3c20875b5..8410d489e 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
@@ -64,14 +64,14 @@ export const StyledColumnIcon = styled("span")`
     const semanticColors = getSemanticColors(props);
 
     return `
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.surface};
       position: absolute;
       right: -${spaces?.xs}px;
       top: -2px;
       padding-bottom: 2px;
 
       svg {
-        color: ${semanticColors?.base?.iconPrimary};
+        color: ${semanticColors?.base?.ornamentSecondary};
         width: ${iconSizes?.xs.width}px;
         height: ${iconSizes?.xs.height}px;
       }
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
index 6acbcf1f4..5680f6491 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
@@ -232,9 +232,6 @@ const AutocompleteMultiColumn = <
                     sdsType="tertiary"
                     sdsSize="small"
                     sdsStyle="icon"
-                    sdsIconProps={{
-                      sdsType: "iconButton",
-                    }}
                     icon="XMarkCircle"
                     onClick={clearInput}
                   />
@@ -253,9 +250,6 @@ const AutocompleteMultiColumn = <
                   sdsType="tertiary"
                   sdsSize="small"
                   sdsStyle="icon"
-                  sdsIconProps={{
-                    sdsType: "interactive",
-                  }}
                   icon="Search"
                 />
               </StyledInputAdornment>
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
index 604358d27..e14323c52 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
@@ -43,7 +43,7 @@ export const StyledPopper = styled(Popper, {
     const semanticColors = getSemanticColors(props);
 
     return `
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.surface};
       background-image: none;
       border: ${borders?.none};
       border-radius: ${corners?.m}px;
@@ -72,7 +72,7 @@ export const StyledPaper = styled(Paper, {
     const semanticColors = getSemanticColors(props);
 
     return `
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.surface};
       background-image: none;
       box-shadow: ${shadows?.none};
       margin: 0;
diff --git a/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
index c54f159c4..c07aab37e 100644
--- a/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
+++ b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconInfoCircleLarge"
           data-testid="IconInfoCircleLarge"
           fillcontrast="white"
@@ -31,7 +31,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-14btmof-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-f0g2hw-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -41,7 +41,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkSmall"
         data-testid="IconXMarkSmall"
         fillcontrast="white"
diff --git a/packages/components/src/core/Banner/index.tsx b/packages/components/src/core/Banner/index.tsx
index 13bccb845..5ff16938e 100644
--- a/packages/components/src/core/Banner/index.tsx
+++ b/packages/components/src/core/Banner/index.tsx
@@ -49,19 +49,10 @@ const Banner = forwardRef(function Banner(
       if (typeof icon !== "string") {
         return icon;
       } else {
-        return (
-          <Icon sdsIcon={icon} sdsSize="l" sdsType="static" {...sdsIconProps} />
-        );
+        return <Icon sdsIcon={icon} sdsSize="l" {...sdsIconProps} />;
       }
     } else {
-      return (
-        <Icon
-          sdsIcon="InfoCircle"
-          sdsSize="l"
-          sdsType="static"
-          {...sdsIconProps}
-        />
-      );
+      return <Icon sdsIcon="InfoCircle" sdsSize="l" {...sdsIconProps} />;
     }
   };
 
diff --git a/packages/components/src/core/Banner/style.ts b/packages/components/src/core/Banner/style.ts
index b18f178e6..121aea5b4 100644
--- a/packages/components/src/core/Banner/style.ts
+++ b/packages/components/src/core/Banner/style.ts
@@ -39,7 +39,7 @@ export const IconWrapper = styled("div", {
       height: ${iconSizes?.l.height}px;
       margin-right: ${spaces?.m}px;
       svg {
-        fill: ${bannerType === "primary" ? semanticColors?.base?.iconPrimaryInverse : semanticColors?.info?.ornament};
+        fill: ${bannerType === "primary" ? semanticColors?.base?.ornamentOnFill : semanticColors?.info?.ornament};
       }
     `;
   }}
@@ -58,15 +58,26 @@ export const StyledButton = styled(Button as React.ComponentType<ButtonType>, {
 
     const semanticColors = getSemanticColors(props);
 
-    if (bannerType !== "primary") return "";
+    if (bannerType === "primary")
+      return `
+        svg {
+          fill: ${semanticColors?.base?.ornamentOnFill};
+          opacity: .65;
+        }
+
+        svg:hover {
+          opacity: 1;
+        }
+      `;
 
     return `
       svg {
-        fill: ${semanticColors?.base?.iconPrimaryInverse};
+        fill: ${semanticColors?.base?.ornamentPrimary};
+        opacity: .55;
       }
 
       svg:hover {
-        fill: ${semanticColors?.base?.iconPrimaryInverseHover};
+        opacity: 1;
       }
     `;
   }}
@@ -80,8 +91,8 @@ const primary = (props: BannerExtraProps) => {
   const semanticColors = getSemanticColors(props);
 
   return `
-    background-color: ${semanticColors?.info?.surfaceSecondary};
-    color: ${semanticColors?.base?.textPrimaryInverse};
+    background-color: ${semanticColors?.info?.surfacePrimary};
+    color: ${semanticColors?.base?.textOnFill};
   `;
 };
 
@@ -89,7 +100,7 @@ const secondary = (props: BannerExtraProps) => {
   const semanticColors = getSemanticColors(props);
 
   return `
-    background-color: ${semanticColors?.info?.surfacePrimary};
+    background-color: ${semanticColors?.info?.surfaceSecondary};
     color: ${semanticColors?.base?.textPrimary};
   `;
 };
diff --git a/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx
index b0031caba..3ebf3ba57 100644
--- a/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx
@@ -88,7 +88,7 @@ export const Template = () => {
     return (
       <Table>
         <TableHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
+          <CellHeader hideSortIcon style={{ width: 120 }}>
             Example
           </CellHeader>
           <CellHeader hideSortIcon>Variables</CellHeader>
diff --git a/packages/components/src/core/Bases/Breakpoints/__storybook__/constants.tsx b/packages/components/src/core/Bases/Breakpoints/__storybook__/constants.tsx
index af00ace31..198b90b80 100644
--- a/packages/components/src/core/Bases/Breakpoints/__storybook__/constants.tsx
+++ b/packages/components/src/core/Bases/Breakpoints/__storybook__/constants.tsx
@@ -1,7 +1,13 @@
 import { Breakpoint } from "@mui/material";
 
 export const BREAKPOINTS_USAGE: Record<Breakpoint, string> = {
-  lg: "Large breakpoint can be used for all large displays ( > 1024px).",
-  md: "Medium breakpoint will work for small laptops and large-screened tablets (512px - 1023px).",
-  sm: "Small breakpoint will work for mobile devices and small-screened tablets (0px - 511px).",
+  lg: "Large breakpoint can be used for all large displays.",
+  md: "Medium breakpoint will work for small laptops and large-screened tablets.",
+  sm: "Small breakpoint will work for mobile devices and small-screened tablets.",
+};
+
+export const BREAKPOINTS_RANGE: Record<Breakpoint, string> = {
+  lg: "> 1024px",
+  md: "512px - 1023px",
+  sm: "0px - 511px",
 };
diff --git a/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx
index 2934da1af..1543d79cf 100644
--- a/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx
@@ -6,7 +6,7 @@ import CellComponent from "src/core/CellComponent";
 import CellBasic from "src/core/CellBasic";
 import { copyToClipboard } from "src/core/Bases/utils";
 import { StyledVariable } from "src/core/Bases/style";
-import { BREAKPOINTS_USAGE } from "../constants";
+import { BREAKPOINTS_RANGE, BREAKPOINTS_USAGE } from "../constants";
 import { Breakpoint, useTheme } from "@mui/material";
 import { getBreakpoints } from "src/core/styles";
 
@@ -41,6 +41,12 @@ export const Template = () => {
 
         <CellComponent verticalAlign="center">{`${size}px`}</CellComponent>
 
+        <CellBasic
+          verticalAlign="center"
+          primaryText={BREAKPOINTS_RANGE[name]}
+          shouldShowTooltipOnHover={false}
+        />
+
         <CellBasic
           verticalAlign="center"
           primaryText={BREAKPOINTS_USAGE[name]}
@@ -58,15 +64,12 @@ export const Template = () => {
     return (
       <Table>
         <TableHeader>
-          <CellHeader hideSortIcon style={{ width: 30 }}>
+          <CellHeader hideSortIcon style={{ width: 100 }}>
             Breakpoint
           </CellHeader>
-          <CellHeader hideSortIcon style={{ width: 50 }}>
-            Variables
-          </CellHeader>
-          <CellHeader hideSortIcon style={{ width: 30 }}>
-            Value
-          </CellHeader>
+          <CellHeader hideSortIcon>Variables</CellHeader>
+          <CellHeader hideSortIcon>Value</CellHeader>
+          <CellHeader hideSortIcon>Range</CellHeader>
           <CellHeader hideSortIcon>Usage</CellHeader>
         </TableHeader>
         <tbody>{TableBodyContent}</tbody>
diff --git a/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx
index 294066600..b28921afe 100644
--- a/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx
@@ -67,16 +67,12 @@ export const Template = () => {
     return (
       <Table>
         <TableHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
+          <CellHeader hideSortIcon style={{ width: 120 }}>
             Example
           </CellHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
-            Corner Type
-          </CellHeader>
+          <CellHeader hideSortIcon>Corner Type</CellHeader>
           <CellHeader hideSortIcon>Variables</CellHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
-            Value
-          </CellHeader>
+          <CellHeader hideSortIcon>Value</CellHeader>
           <CellHeader hideSortIcon>Usage</CellHeader>
         </TableHeader>
         <tbody>{TableBodyContent}</tbody>
diff --git a/packages/components/src/core/Bases/Corners/__storybook__/style.ts b/packages/components/src/core/Bases/Corners/__storybook__/style.ts
index 7845df51e..ecffe5f31 100644
--- a/packages/components/src/core/Bases/Corners/__storybook__/style.ts
+++ b/packages/components/src/core/Bases/Corners/__storybook__/style.ts
@@ -3,7 +3,6 @@ import {
   CommonThemeProps,
   fontCodeXs,
   getFontWeights,
-  getMode,
   getSemanticColors,
 } from "src/core/styles";
 
@@ -19,7 +18,6 @@ export const StyledCornerBox = styled("div")`
   ${(props: IStyledCornerBoxProps) => {
     const { size } = props;
 
-    const mode = getMode(props);
     const semanticColors = getSemanticColors(props);
     const BorderWidth = 2;
     const BoxSize = 60;
@@ -45,7 +43,7 @@ export const StyledCornerBox = styled("div")`
       &::after {
         content: "";
         position: absolute;
-        background-color: ${mode === "dark" ? semanticColors?.base.surfacePrimary : semanticColors?.base.surfaceSecondary};
+        background-color: ${semanticColors?.base?.backgroundSecondary};
         width: ${BoxSize - 2 * BorderWidth}px;
         height: ${BoxSize - 2 * BorderWidth}px;
         top: ${BorderWidth}px;
diff --git a/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx
index 28f194501..24dd7c34e 100644
--- a/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx
@@ -70,12 +70,10 @@ export const Template = () => {
     return (
       <Table>
         <TableHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
+          <CellHeader hideSortIcon style={{ width: 120 }}>
             Example
           </CellHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
-            Shadow Type
-          </CellHeader>
+          <CellHeader hideSortIcon>Shadow Type</CellHeader>
           <CellHeader hideSortIcon>Variables</CellHeader>
           <CellHeader hideSortIcon>Value</CellHeader>
           <CellHeader hideSortIcon>Usage</CellHeader>
diff --git a/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx
index 4db306d1c..ecf9e92cd 100644
--- a/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx
@@ -68,19 +68,11 @@ export const Template = () => {
     return (
       <Table>
         <TableHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
-            Inset Spacing
-          </CellHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
-            Inline Spacing
-          </CellHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
-            Stacked Spacing
-          </CellHeader>
+          <CellHeader hideSortIcon>Inset Spacing</CellHeader>
+          <CellHeader hideSortIcon>Inline Spacing</CellHeader>
+          <CellHeader hideSortIcon>Stacked Spacing</CellHeader>
           <CellHeader hideSortIcon>Variables</CellHeader>
-          <CellHeader hideSortIcon style={{ width: 40 }}>
-            Value
-          </CellHeader>
+          <CellHeader hideSortIcon>Value</CellHeader>
         </TableHeader>
 
         <tbody>{TableBodyContent}</tbody>
diff --git a/packages/components/src/core/Bases/Spaces/__storybook__/style.ts b/packages/components/src/core/Bases/Spaces/__storybook__/style.ts
index ccfc8125f..762beb1c4 100644
--- a/packages/components/src/core/Bases/Spaces/__storybook__/style.ts
+++ b/packages/components/src/core/Bases/Spaces/__storybook__/style.ts
@@ -28,7 +28,7 @@ export const StyledInsetSpacingBox = styled("div")`
       box-sizing: border-box;
       width: ${BoxSize}px;
       height: ${BoxSize}px;
-      border: solid ${size}px ${semanticColors?.positive.surfacePrimary};
+      border: solid ${size}px ${semanticColors?.positive.surfaceSecondary};
       color: ${semanticColors?.positive?.text};
       font-size: 10px;
       display: flex;
@@ -52,7 +52,7 @@ export const StyledInlineSpacingBox = styled("div")`
       margin-left: 30px;
       width: ${size}px;
       height: ${BoxSize}px;
-      background-color: ${semanticColors?.notice.surfacePrimary};
+      background-color: ${semanticColors?.notice.surfaceSecondary};
       color: ${semanticColors?.notice?.text};
       font-size: 10px;
       display: flex;
@@ -75,7 +75,7 @@ export const StyledStackedSpacingBox = styled("div")`
       position: relative;
       height: ${size}px;
       width: ${BoxSize}px;
-      background-color: ${semanticColors?.notice.surfacePrimary};
+      background-color: ${semanticColors?.notice.surfaceSecondary};
       color: ${semanticColors?.notice?.text};
       font-size: 10px;
       display: flex;
diff --git a/packages/components/src/core/Button/__storybook__/stories/default.tsx b/packages/components/src/core/Button/__storybook__/stories/default.tsx
index cb8d5b953..677d90811 100644
--- a/packages/components/src/core/Button/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Button/__storybook__/stories/default.tsx
@@ -71,7 +71,6 @@ export const Button = (props: Args): JSX.Element => {
       startIconFinal = (
         <Icon
           sdsIcon={startIcon as keyof IconNameToSizes}
-          sdsType="button"
           sdsSize={finalIconSize as typeof sdsSize}
         />
       );
@@ -87,7 +86,6 @@ export const Button = (props: Args): JSX.Element => {
       endIconFinal = (
         <Icon
           sdsIcon={endIcon as keyof IconNameToSizes}
-          sdsType="button"
           sdsSize={finalIconSize as typeof sdsSize}
         />
       );
diff --git a/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx b/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx
index c61e33fde..af1652a30 100644
--- a/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx
+++ b/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx
@@ -136,11 +136,7 @@ export const ScreenshotTestDemo = (props: Args): JSX.Element => {
                 sdsStyle={sdsStyle}
                 type={type}
                 icon={
-                  <Icon
-                    sdsIcon={icon as keyof IconNameToSizes}
-                    sdsType="button"
-                    sdsSize="s"
-                  />
+                  <Icon sdsIcon={icon as keyof IconNameToSizes} sdsSize="s" />
                 }
                 key={String(icon)}
               />
@@ -149,11 +145,7 @@ export const ScreenshotTestDemo = (props: Args): JSX.Element => {
                 sdsStyle={sdsStyle}
                 type={type}
                 icon={
-                  <Icon
-                    sdsIcon={icon as keyof IconNameToSizes}
-                    sdsType="button"
-                    sdsSize="l"
-                  />
+                  <Icon sdsIcon={icon as keyof IconNameToSizes} sdsSize="l" />
                 }
                 key={String(icon)}
               />
diff --git a/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
index dfce56b61..40921c198 100644
--- a/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<button /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-19e712f-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1qrgpku-MuiButtonBase-root-MuiButton-root"
   icon="Cube"
   tabindex="0"
   text="Label"
diff --git a/packages/components/src/core/Button/style.ts b/packages/components/src/core/Button/style.ts
index 4bc905127..4e568bf58 100644
--- a/packages/components/src/core/Button/style.ts
+++ b/packages/components/src/core/Button/style.ts
@@ -46,12 +46,12 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => {
   const contentColor =
     variant === "outlined"
       ? semanticColors?.accent?.textAction
-      : semanticColors?.base?.textPrimaryInverse;
+      : semanticColors?.base?.textOnFill;
 
   const ornamentColor =
     variant === "outlined"
-      ? semanticColors?.accent?.icon
-      : semanticColors?.base?.iconPrimaryInverse;
+      ? semanticColors?.accent?.ornament
+      : semanticColors?.base?.ornamentOnFill;
 
   const backgroundColor =
     variant === "outlined"
@@ -66,10 +66,15 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => {
       ? `inset 0 0 0 1px ${semanticColors?.base?.borderDisabled}`
       : "none";
 
+  const boxshadow =
+    variant === "outlined"
+      ? `inset 0 0 0 1px ${semanticColors?.accent?.border}`
+      : "none";
+
   return css`
     background-color: ${backgroundColor};
     border: none;
-    box-shadow: inset 0 0 0 1px ${semanticColors?.accent?.border};
+    box-shadow: ${boxshadow};
     padding: ${padding};
     color: ${contentColor};
     line-height: ${isAllCaps ? "20px" : "unset"};
@@ -85,7 +90,7 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => {
       box-shadow: inset 0 0 0 1px ${semanticColors?.accent?.borderHover};
 
       svg {
-        color: ${semanticColors?.base?.iconPrimaryInverse};
+        color: ${semanticColors?.base?.ornamentPrimaryInverse};
       }
     }
 
@@ -96,7 +101,7 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => {
       box-shadow: inset 0 0 0 1px ${semanticColors?.accent?.fillPressed};
 
       svg {
-        color: ${semanticColors?.base?.iconPrimaryInverse};
+        color: ${semanticColors?.base?.ornamentPrimaryInverse};
       }
     }
 
@@ -107,7 +112,7 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => {
       border: none;
 
       svg {
-        color: ${semanticColors?.base?.iconDisabled};
+        color: ${semanticColors?.base?.ornamentDisabled};
       }
     }
 
@@ -151,21 +156,26 @@ const DestructiveButton = (props: ButtonExtraProps): SerializedStyles => {
   const contentColor =
     variant === "outlined"
       ? semanticColors?.negative?.text
-      : semanticColors?.base?.textPrimaryInverse;
+      : semanticColors?.base?.textOnFill;
 
   const ornamentColor =
     variant === "outlined"
       ? semanticColors?.negative?.ornament
-      : semanticColors?.base?.iconPrimaryInverse;
+      : semanticColors?.base?.ornamentOnFill;
 
   const backgroundColor =
     variant === "outlined"
       ? "transparent"
       : semanticColors?.negative?.fillPrimary;
 
+  const boxshadow =
+    variant === "outlined"
+      ? `inset 0 0 0 1px ${semanticColors?.negative?.border}`
+      : "none";
+
   return css`
     border: none;
-    box-shadow: inset 0 0 0 1px ${semanticColors?.negative?.border};
+    box-shadow: ${boxshadow};
     color: ${contentColor};
     background-color: ${backgroundColor};
 
@@ -180,7 +190,7 @@ const DestructiveButton = (props: ButtonExtraProps): SerializedStyles => {
       box-shadow: inset 0 0 0 1px ${semanticColors?.negative?.fillHover};
 
       svg {
-        color: ${semanticColors?.base?.iconPrimaryInverse};
+        color: ${semanticColors?.base?.ornamentPrimaryInverse};
       }
     }
 
@@ -191,7 +201,7 @@ const DestructiveButton = (props: ButtonExtraProps): SerializedStyles => {
       box-shadow: inset 0 0 0 1px ${semanticColors?.negative?.fillPressed};
 
       svg {
-        color: ${semanticColors?.base?.iconPrimaryInverse};
+        color: ${semanticColors?.base?.ornamentPrimaryInverse};
       }
     }
 
@@ -202,7 +212,7 @@ const DestructiveButton = (props: ButtonExtraProps): SerializedStyles => {
       box-shadow: ${shadows?.none};
 
       svg {
-        color: ${semanticColors?.base?.iconDisabled};
+        color: ${semanticColors?.base?.ornamentDisabled};
       }
     }
   `;
@@ -247,7 +257,7 @@ const Minimal = (props: ButtonExtraProps): SerializedStyles => {
       color: ${semanticColors?.accent?.textActionHover};
 
       svg {
-        color: ${semanticColors?.accent?.iconHover};
+        color: ${semanticColors?.accent?.ornamentHover};
       }
     }
 
@@ -257,16 +267,18 @@ const Minimal = (props: ButtonExtraProps): SerializedStyles => {
 
     &:active {
       color: ${semanticColors?.accent?.textActionPressed};
+      background-color: ${semanticColors?.base?.fillHover};
 
       svg {
-        color: ${semanticColors?.accent?.iconPressed};
+        color: ${semanticColors?.accent?.ornamentPressed};
       }
     }
+
     &:disabled {
       color: ${semanticColors?.base?.textDisabled};
 
       svg {
-        color: ${semanticColors?.base?.iconDisabled};
+        color: ${semanticColors?.base?.ornamentDisabled};
       }
     }
 
@@ -300,6 +312,10 @@ const PrimaryMinimalButton = (props: ButtonExtraProps): SerializedStyles => {
   return css`
     ${Minimal(props)}
     color: ${semanticColors?.accent?.textAction};
+
+    svg {
+      color: ${semanticColors?.accent?.ornament};
+    }
   `;
 };
 
@@ -309,6 +325,10 @@ const SecondaryMinimalButton = (props: ButtonExtraProps): SerializedStyles => {
   return css`
     ${Minimal(props)}
     color: ${semanticColors?.base?.textPrimary};
+
+    svg {
+      color: ${semanticColors?.base?.ornamentPrimary};
+    }
   `;
 };
 
diff --git a/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx b/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
index 8b6bd3421..cb14128eb 100644
--- a/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
+++ b/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
@@ -66,7 +66,7 @@ export const Default = {
 export const Test = {
   args: {
     disabled: false,
-    icon: <Icon sdsIcon="Download" sdsSize="l" sdsType="button" />,
+    icon: <Icon sdsIcon="Download" sdsSize="l" />,
     onClick: BUTTON_DROPDOWN_ACTIONS.onClick,
     sdsStyle: "rounded",
     sdsType: "primary",
diff --git a/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
index a45638f23..ea637e1cd 100644
--- a/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-cv2bs4-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
   icon="Download"
   tabindex="0"
   type="button"
@@ -15,7 +15,7 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconDownloadLarge"
         data-testid="IconDownloadLarge"
         fillcontrast="white"
@@ -35,7 +35,7 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconChevronDownSmall"
         data-testid="IconChevronDownSmall"
         fillcontrast="white"
diff --git a/packages/components/src/core/ButtonDropdown/index.tsx b/packages/components/src/core/ButtonDropdown/index.tsx
index 930817abe..3be9007b3 100644
--- a/packages/components/src/core/ButtonDropdown/index.tsx
+++ b/packages/components/src/core/ButtonDropdown/index.tsx
@@ -45,7 +45,6 @@ const ButtonDropdown = React.forwardRef(
         } else {
           return (
             <Icon
-              sdsType="iconButton"
               {...sdsIconProps}
               sdsIcon={icon}
               sdsSize={iconSize as IconSizeType}
@@ -66,7 +65,7 @@ const ButtonDropdown = React.forwardRef(
       return (
         <Button
           {...props}
-          endIcon={<Icon sdsIcon="ChevronDown" sdsSize="xs" sdsType="button" />}
+          endIcon={<Icon sdsIcon="ChevronDown" sdsSize="xs" />}
           sdsStyle={sdsStyle}
           ref={ref}
           sdsType={sdsType}
diff --git a/packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx b/packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx
index 882fd1bea..843f8e7a7 100644
--- a/packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx
+++ b/packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx
@@ -4,7 +4,7 @@ import { ButtonIcon, ButtonIconProps, Icon } from "@czi-sds/components";
 const ButtonIconNameSpaceTest = (props: ButtonIconProps) => {
   return (
     <ButtonIcon size="large" sdsType="primary" {...props}>
-      <Icon sdsIcon="Download" sdsSize="l" sdsType="button" />
+      <Icon sdsIcon="Download" sdsSize="l" />
     </ButtonIcon>
   );
 };
diff --git a/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
index 64e587c37..19769db4d 100644
--- a/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
       data-file-name="IconInfoCircleLarge"
       data-testid="IconInfoCircleLarge"
       fillcontrast="white"
diff --git a/packages/components/src/core/ButtonIcon/index.tsx b/packages/components/src/core/ButtonIcon/index.tsx
index 350dc59c2..59f39866a 100644
--- a/packages/components/src/core/ButtonIcon/index.tsx
+++ b/packages/components/src/core/ButtonIcon/index.tsx
@@ -58,7 +58,6 @@ const ButtonIcon = forwardRef(function ButtonIcon(
       } else {
         return (
           <Icon
-            sdsType="iconButton"
             {...sdsIconProps}
             sdsIcon={icon}
             sdsSize={iconSize as IconSizeType}
diff --git a/packages/components/src/core/ButtonIcon/style.ts b/packages/components/src/core/ButtonIcon/style.ts
index 327419d27..769787f17 100644
--- a/packages/components/src/core/ButtonIcon/style.ts
+++ b/packages/components/src/core/ButtonIcon/style.ts
@@ -19,10 +19,10 @@ const isDisabled = (props: ButtonIconExtraProps): SerializedStyles => {
   const semanticColors = getSemanticColors(props);
 
   return css`
-    color: ${semanticColors?.base?.iconDisabled};
+    color: ${semanticColors?.base?.ornamentDisabled};
 
     svg {
-      color: ${semanticColors?.base?.iconDisabled};
+      color: ${semanticColors?.base?.ornamentDisabled};
     }
   `;
 };
@@ -31,27 +31,27 @@ const primary = (props: ButtonIconExtraProps): SerializedStyles => {
   const semanticColors = getSemanticColors(props);
 
   return css`
-    color: ${semanticColors?.accent?.textAction};
+    color: ${semanticColors?.accent?.ornament};
 
     svg {
-      color: ${semanticColors?.accent?.icon};
+      color: ${semanticColors?.accent?.ornament};
     }
 
     &:hover {
       background: ${semanticColors?.base?.fillHover};
-      color: ${semanticColors?.accent?.textActionHover};
+      color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
-        color: ${semanticColors?.accent?.iconHover};
+        color: ${semanticColors?.accent?.ornamentHover};
       }
     }
 
     &:active {
       background: ${semanticColors?.base?.fillPressed};
-      color: ${semanticColors?.accent?.textActionPressed};
+      color: ${semanticColors?.accent?.ornamentPressed};
 
       svg {
-        color: ${semanticColors?.accent?.iconPressed};
+        color: ${semanticColors?.accent?.ornamentPressed};
       }
     }
   `;
@@ -61,27 +61,27 @@ const secondary = (props: ButtonIconExtraProps): SerializedStyles => {
   const semanticColors = getSemanticColors(props);
 
   return css`
-    color: ${semanticColors?.base?.iconPrimary};
+    color: ${semanticColors?.base?.ornamentSecondary};
 
     svg {
-      color: ${semanticColors?.base?.iconPrimary};
+      color: ${semanticColors?.base?.ornamentSecondary};
     }
 
     &:hover {
       background: ${semanticColors?.base?.fillHover};
-      color: ${semanticColors?.accent?.iconHover};
+      color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
-        color: ${semanticColors?.accent?.iconHover};
+        color: ${semanticColors?.accent?.ornamentHover};
       }
     }
 
     &:active {
       background: ${semanticColors?.base?.fillPressed};
-      color: ${semanticColors?.accent?.iconPressed};
+      color: ${semanticColors?.accent?.ornamentPressed};
 
       svg {
-        color: ${semanticColors?.accent?.iconPressed};
+        color: ${semanticColors?.accent?.ornamentPressed};
       }
     }
   `;
@@ -91,27 +91,27 @@ const tertiary = (props: ButtonIconExtraProps): SerializedStyles => {
   const semanticColors = getSemanticColors(props);
 
   return css`
-    color: ${semanticColors?.base?.iconPrimary};
+    color: ${semanticColors?.base?.ornamentSecondary};
 
     svg {
-      color: ${semanticColors?.base?.iconPrimary};
+      color: ${semanticColors?.base?.ornamentSecondary};
     }
 
     &:hover {
       background: none;
-      color: ${semanticColors?.base?.iconPrimaryHover};
+      color: ${semanticColors?.base?.ornamentSecondaryHover};
 
       svg {
-        color: ${semanticColors?.base?.iconPrimaryHover};
+        color: ${semanticColors?.base?.ornamentSecondaryHover};
       }
     }
 
     &:active {
       background: none;
-      color: ${semanticColors?.base?.iconPrimaryPressed};
+      color: ${semanticColors?.base?.ornamentSecondaryPressed};
 
       svg {
-        color: ${semanticColors?.base?.iconPrimaryPressed};
+        color: ${semanticColors?.base?.ornamentSecondaryPressed};
       }
     }
   `;
diff --git a/packages/components/src/core/ButtonToggle/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonToggle/__tests__/__snapshots__/index.test.tsx.snap
index f5bb55c8b..e051de156 100644
--- a/packages/components/src/core/ButtonToggle/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ButtonToggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<ButtonToggle /> Default story renders snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
       data-file-name="IconInfoCircleLarge"
       data-testid="IconInfoCircleLarge"
       fillcontrast="white"
diff --git a/packages/components/src/core/ButtonToggle/style.ts b/packages/components/src/core/ButtonToggle/style.ts
index 1effb6933..627d03469 100644
--- a/packages/components/src/core/ButtonToggle/style.ts
+++ b/packages/components/src/core/ButtonToggle/style.ts
@@ -24,7 +24,7 @@ export const StyledButtonToggle = styled(ButtonIcon, {
     const semanticColors = getSemanticColors(props);
 
     return `
-      background-color: ${sdsStage === "on" ? semanticColors?.base?.fillHover : "transparent"};
+      background-color: ${sdsStage === "on" ? semanticColors?.base?.fillOpen : "transparent"};
     `;
   }}
 `;
diff --git a/packages/components/src/core/Callout/components/CalloutTitle/style.ts b/packages/components/src/core/Callout/components/CalloutTitle/style.ts
index 08792eb6f..969d0ab44 100644
--- a/packages/components/src/core/Callout/components/CalloutTitle/style.ts
+++ b/packages/components/src/core/Callout/components/CalloutTitle/style.ts
@@ -1,9 +1,9 @@
 import { AlertTitle } from "@mui/material";
 import styled from "@emotion/styled";
-import { fontBodyXs, getSpaces } from "src/core/styles";
+import { fontBodySemiboldXs, getSpaces } from "src/core/styles";
 
 export const StyledCalloutTitle = styled(AlertTitle)`
-  ${fontBodyXs}
+  ${fontBodySemiboldXs}
 
   ${(props) => {
     const spaces = getSpaces(props);
diff --git a/packages/components/src/core/Callout/index.tsx b/packages/components/src/core/Callout/index.tsx
index 115c1f36e..43426e414 100644
--- a/packages/components/src/core/Callout/index.tsx
+++ b/packages/components/src/core/Callout/index.tsx
@@ -65,7 +65,6 @@ const Callout = ({
           <Icon
             sdsSize="l"
             sdsIcon={icon as keyof IconNameToSizes}
-            sdsType="static"
             {...sdsIconProps}
           />
         );
@@ -73,17 +72,11 @@ const Callout = ({
     } else {
       switch (intent) {
         case "positive":
-          return <Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="static" />;
+          return <Icon sdsSize="l" sdsIcon="CheckCircle" />;
         case "info":
-          return <Icon sdsSize="l" sdsIcon="InfoCircle" sdsType="static" />;
+          return <Icon sdsSize="l" sdsIcon="InfoCircle" />;
         default:
-          return (
-            <Icon
-              sdsSize="l"
-              sdsIcon="ExclamationMarkCircle"
-              sdsType="static"
-            />
-          );
+          return <Icon sdsSize="l" sdsIcon="ExclamationMarkCircle" />;
       }
     }
   };
diff --git a/packages/components/src/core/Callout/style.ts b/packages/components/src/core/Callout/style.ts
index 3e35d809d..f59680b5f 100644
--- a/packages/components/src/core/Callout/style.ts
+++ b/packages/components/src/core/Callout/style.ts
@@ -41,7 +41,8 @@ export const StyledCallout = styled(Alert, {
     const semanticColors = getSemanticColors(props);
 
     const iconColor = semanticColors?.[intent]?.ornament ?? "black";
-    const backgroundColor = semanticColors?.[intent]?.surfacePrimary ?? "white";
+    const backgroundColor =
+      semanticColors?.[intent]?.surfaceSecondary ?? "white";
 
     // when a title is present Mui's default styling has vertical margin,
     // but for an expandable callout that is collapsed, we do not want
diff --git a/packages/components/src/core/CellBasic/__storybook__/constants.tsx b/packages/components/src/core/CellBasic/__storybook__/constants.tsx
index 532248190..e5aa0f22b 100644
--- a/packages/components/src/core/CellBasic/__storybook__/constants.tsx
+++ b/packages/components/src/core/CellBasic/__storybook__/constants.tsx
@@ -28,10 +28,10 @@ export const CELL_BASIC_EXCLUDED_CONTROLS = [
 
 export const CELL_BASIC_ICON_OPTIONS = [
   undefined,
-  <Icon sdsSize="xs" sdsIcon="Download" key="download" sdsType="static" />,
-  <Icon sdsSize="s" sdsIcon="LightBulb" key="lightBulb" sdsType="static" />,
-  <Icon sdsSize="l" sdsIcon="Bacteria" key="bacteria" sdsType="static" />,
-  <Icon sdsSize="xl" sdsIcon="Flask" key="flask" sdsType="static" />,
+  <Icon sdsSize="xs" sdsIcon="Download" key="download" />,
+  <Icon sdsSize="s" sdsIcon="LightBulb" key="lightBulb" />,
+  <Icon sdsSize="l" sdsIcon="Bacteria" key="bacteria" />,
+  <Icon sdsSize="xl" sdsIcon="Flask" key="flask" />,
 ];
 
 export const CELL_BASIC_ICON_LABELS = [
diff --git a/packages/components/src/core/CellBasic/__storybook__/stories/test.tsx b/packages/components/src/core/CellBasic/__storybook__/stories/test.tsx
index d3de0db64..f15d4fcc2 100644
--- a/packages/components/src/core/CellBasic/__storybook__/stories/test.tsx
+++ b/packages/components/src/core/CellBasic/__storybook__/stories/test.tsx
@@ -41,7 +41,7 @@ export const TestDemo = (): JSX.Element => (
           secondaryText="Secondary Text"
           tertiaryText="Tertiary Text"
           shouldShowTooltipOnHover={false}
-          icon={<Icon sdsSize="l" sdsIcon="Bacteria" sdsType="static" />}
+          icon={<Icon sdsSize="l" sdsIcon="Bacteria" />}
         />
         <StyledCellBasic
           primaryText="Primary Text"
diff --git a/packages/components/src/core/CellBasic/__tests__/CellBasic.namespace-test.tsx b/packages/components/src/core/CellBasic/__tests__/CellBasic.namespace-test.tsx
index 2a2a07db0..cb0a5c94c 100644
--- a/packages/components/src/core/CellBasic/__tests__/CellBasic.namespace-test.tsx
+++ b/packages/components/src/core/CellBasic/__tests__/CellBasic.namespace-test.tsx
@@ -9,7 +9,7 @@ const CellBasicNameSpaceTest = (props: CellBasicProps) => {
           <CellBasic
             horizontalAlign="left"
             verticalAlign="center"
-            icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+            icon={<Icon sdsIcon="Download" sdsSize="l" />}
             iconVerticalAlign="center"
             primaryText="Primary Text"
             primaryTextWrapLineCount={2}
diff --git a/packages/components/src/core/CellComponent/__tests__/CellComponent.namespace-test.tsx b/packages/components/src/core/CellComponent/__tests__/CellComponent.namespace-test.tsx
index 84d0734b0..6479452f5 100644
--- a/packages/components/src/core/CellComponent/__tests__/CellComponent.namespace-test.tsx
+++ b/packages/components/src/core/CellComponent/__tests__/CellComponent.namespace-test.tsx
@@ -7,7 +7,7 @@ const CellBasicNameSpaceTest = (props: CellComponentProps) => {
       <tbody>
         <tr>
           <CellComponent horizontalAlign="center" verticalAlign="center">
-            <Icon sdsIcon="Download" sdsSize="l" sdsType="button" />
+            <Icon sdsIcon="Download" sdsSize="l" />
           </CellComponent>
         </tr>
       </tbody>
diff --git a/packages/components/src/core/CellComponent/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellComponent/__tests__/__snapshots__/index.test.tsx.snap
index 4ab265adc..5c1975bd5 100644
--- a/packages/components/src/core/CellComponent/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/CellComponent/__tests__/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<CellComponent /> Default story renders snapshot 1`] = `
         style="height: 100px; width: 100px;"
       >
         <span
-          class="MuiSwitch-root MuiSwitch-sizeMedium css-ovovto-MuiSwitch-root"
+          class="MuiSwitch-root MuiSwitch-sizeMedium css-hcrspq-MuiSwitch-root"
         >
           <span
             class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
diff --git a/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap
index 816f2ee18..563cf01ff 100644
--- a/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<CellHeader /> Default story renders snapshot 1`] = `
   <tbody>
     <tr>
       <th
-        class="css-1szfosj"
+        class="css-bony3j"
         data-mui-internal-clone-element="true"
         direction="desc"
         tabindex="0"
@@ -21,7 +21,7 @@ exports[`<CellHeader /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tlyfhc-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
               data-file-name="IconChevronDownSmall"
               data-testid="IconChevronDownSmall"
               fillcontrast="white"
diff --git a/packages/components/src/core/CellHeader/index.tsx b/packages/components/src/core/CellHeader/index.tsx
index 4674fd084..cdcdb42f4 100644
--- a/packages/components/src/core/CellHeader/index.tsx
+++ b/packages/components/src/core/CellHeader/index.tsx
@@ -52,7 +52,6 @@ const CellHeaderContent = (
           : "Change sort direction from descending to ascending"
       }
       sdsIcon={sdsIconName}
-      sdsType="static"
       sdsSize="xs"
       active={active}
       hideSortIcon={hideSortIcon}
diff --git a/packages/components/src/core/CellHeader/style.ts b/packages/components/src/core/CellHeader/style.ts
index 826aa1486..3a2f83535 100644
--- a/packages/components/src/core/CellHeader/style.ts
+++ b/packages/components/src/core/CellHeader/style.ts
@@ -41,8 +41,8 @@ export const StyledSortingIcon = styled(Icon, {
     return `
       margin-left: ${spaces?.s}px;
       margin-bottom: ${spaces?.xxs}px;
-      color: ${active ? semanticColors?.accent?.icon : semanticColors?.base?.iconPrimary};
-      opacity: ${hideSortIcon ? (active ? 1 : 0) : 1};
+      color: ${active ? semanticColors?.accent?.ornament : "transparent"};
+      display: ${hideSortIcon ? (active ? "block" : "none") : "block"};
       outline: none !important;
     `;
   }}
@@ -65,7 +65,6 @@ export const StyledTableHeader = styled("th", {
       padding: ${spaces?.l}px ${spaces?.m}px;
       text-align: ${horizontalAlign};
       min-width: 96px;
-      width: 96px;
       cursor: pointer;
       vertical-align: bottom;
 
@@ -82,7 +81,7 @@ export const StyledTableHeader = styled("th", {
         }
 
         & svg {
-          color: ${active ? semanticColors?.accent?.iconHover : semanticColors?.base?.iconPrimaryHover};
+          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryHover};
         }
       }
     `;
diff --git a/packages/components/src/core/Chip/style.ts b/packages/components/src/core/Chip/style.ts
index 7f9269ec7..9130198b2 100644
--- a/packages/components/src/core/Chip/style.ts
+++ b/packages/components/src/core/Chip/style.ts
@@ -122,27 +122,27 @@ function createStatusCss(
   const statusToColors = {
     beta: {
       dark: semanticColors?.beta?.text,
-      light: semanticColors?.beta?.surfacePrimary,
+      light: semanticColors?.beta?.surfaceSecondary,
     },
     error: {
       dark: semanticColors?.negative?.text,
-      light: semanticColors?.negative?.surfacePrimary,
+      light: semanticColors?.negative?.surfaceSecondary,
     },
     info: {
       dark: semanticColors?.info?.text,
-      light: semanticColors?.info?.surfacePrimary,
+      light: semanticColors?.info?.surfaceSecondary,
     },
     pending: {
       dark: semanticColors?.neutral?.text,
-      light: semanticColors?.neutral?.surfacePrimary,
+      light: semanticColors?.neutral?.surfaceSecondary,
     },
     success: {
       dark: semanticColors?.positive?.text,
-      light: semanticColors?.positive?.surfacePrimary,
+      light: semanticColors?.positive?.surfaceSecondary,
     },
     warning: {
       dark: colors?.yellow[700],
-      light: semanticColors?.notice?.surfacePrimary,
+      light: semanticColors?.notice?.surfaceSecondary,
     },
   };
 
diff --git a/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
index 6378008d4..d4bf9b2f9 100644
--- a/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
 >
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1yszhd5-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1fj92o9-MuiButtonBase-root-MuiButton-root"
     label="Click Target"
     tabindex="0"
     type="button"
@@ -27,7 +27,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
             data-file-name="IconChevronDownSmall"
             data-testid="IconChevronDownSmall"
             fillcontrast="white"
diff --git a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
index f1902b2d3..fb314bff4 100644
--- a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Dialog /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-5ilbqr-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-jrswey-MuiButtonBase-root-MuiButton-root"
   tabindex="0"
   type="button"
 >
@@ -32,7 +32,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkSmall"
         data-testid="IconXMarkSmall"
         fillcontrast="white"
@@ -79,7 +79,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 3`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-17ptgl6-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -89,7 +89,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 3`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-cv2bs4-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -119,7 +119,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
@@ -166,7 +166,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 6`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-17ptgl6-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -176,7 +176,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 6`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-cv2bs4-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -206,7 +206,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
@@ -253,7 +253,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 9`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-17ptgl6-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -263,7 +263,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 9`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-cv2bs4-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -293,7 +293,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
@@ -340,7 +340,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 12`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-17ptgl6-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -350,7 +350,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 12`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-cv2bs4-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -368,7 +368,7 @@ exports[`<Dialog /> renders Dialog left positioned buttons 1`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-cv2bs4-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -378,7 +378,7 @@ exports[`<Dialog /> renders Dialog left positioned buttons 1`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-17ptgl6-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
diff --git a/packages/components/src/core/Dialog/components/DialogPaper/style.ts b/packages/components/src/core/Dialog/components/DialogPaper/style.ts
index 0f054991b..810427d84 100644
--- a/packages/components/src/core/Dialog/components/DialogPaper/style.ts
+++ b/packages/components/src/core/Dialog/components/DialogPaper/style.ts
@@ -28,7 +28,7 @@ export const StyledPaper = styled(Paper, {
       const semanticColors = getSemanticColors(props);
 
       return `
-        background-color: ${semanticColors?.base?.surfacePrimary};
+        background-color: ${semanticColors?.base?.surface};
         background-image: none;
         box-shadow: ${shadows?.l};
         max-height: calc(100vh - ${2 * (spaces?.xxl || 0)}px);
diff --git a/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
index 14e5e246a..223e219fe 100644
--- a/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Dropdown /> Default story renders snapshot 1`] = `
 <button
   aria-label="Dropdown input"
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1yszhd5-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1fj92o9-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"
@@ -24,7 +24,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconChevronDownSmall"
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
@@ -48,7 +48,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
 exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
 <button
   aria-label="Dropdown input"
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1yszhd5-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1fj92o9-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"
@@ -69,7 +69,7 @@ exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconChevronDownSmall"
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
diff --git a/packages/components/src/core/DropdownMenu/style.ts b/packages/components/src/core/DropdownMenu/style.ts
index 548f54497..7e4beb093 100644
--- a/packages/components/src/core/DropdownMenu/style.ts
+++ b/packages/components/src/core/DropdownMenu/style.ts
@@ -80,7 +80,7 @@ export const StyledPopper = styled(Popper, {
     const semanticColors = getSemanticColors(props);
 
     return `
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.surface};
       background-image: none;
       border: ${borders?.none};
       border-radius: ${corners?.m}px;
@@ -103,7 +103,7 @@ export const StyledPaper = styled(Paper, {
     return `
       box-shadow: ${shadows?.none} !important;
       border: ${borders?.none};
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.surface};
       background-image: none;
       margin: 0;
       padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px;
diff --git a/packages/components/src/core/Icon/__storybook__/index.stories.tsx b/packages/components/src/core/Icon/__storybook__/index.stories.tsx
index 4667c125d..8840c4fc6 100644
--- a/packages/components/src/core/Icon/__storybook__/index.stories.tsx
+++ b/packages/components/src/core/Icon/__storybook__/index.stories.tsx
@@ -30,10 +30,6 @@ export default {
       control: { type: "select" },
       options: ["xs", "s", "l", "xl"],
     },
-    sdsType: {
-      control: { type: "select" },
-      options: ["iconButton", "interactive", "static", "button"],
-    },
     shade: {
       control: {
         type: "select",
@@ -55,8 +51,6 @@ export const Default = {
     color: "blue",
     sdsIcon: "CheckCircle",
     sdsSize: "xl",
-    sdsType: "static",
-    shade: 500,
   },
 };
 
@@ -68,7 +62,7 @@ export const IconBank = {
   },
   parameters: {
     controls: {
-      exclude: ["sdsIcon", "sdsSize", "sdsType", "shade"],
+      exclude: ["sdsIcon", "sdsSize", "shade"],
     },
   },
   render: (args: Args) => <IconBankDemo {...args} />,
@@ -79,7 +73,7 @@ export const IconBank = {
 export const Test = {
   parameters: {
     controls: {
-      exclude: ["color", "sdsIcon", "sdsSize", "sdsType", "shade"],
+      exclude: ["color", "sdsIcon", "sdsSize", "shade"],
     },
     snapshot: {
       skip: true,
@@ -89,7 +83,6 @@ export const Test = {
     <RawIcon
       sdsIcon="CheckCircle"
       sdsSize="l"
-      sdsType="static"
       color="blue"
       data-testid="icon"
       {...args}
diff --git a/packages/components/src/core/Icon/__storybook__/stories/default.tsx b/packages/components/src/core/Icon/__storybook__/stories/default.tsx
index 33002d983..04ede9ddd 100644
--- a/packages/components/src/core/Icon/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Icon/__storybook__/stories/default.tsx
@@ -2,9 +2,7 @@ import { Args } from "@storybook/react";
 import RawIcon from "src/core/Icon";
 
 export const Icon = (props: Args): JSX.Element => {
-  const { sdsIcon, sdsSize, sdsType, ...rest } = props;
+  const { sdsIcon, sdsSize, ...rest } = props;
 
-  return (
-    <RawIcon sdsIcon={sdsIcon} sdsSize={sdsSize} sdsType={sdsType} {...rest} />
-  );
+  return <RawIcon sdsIcon={sdsIcon} sdsSize={sdsSize} {...rest} />;
 };
diff --git a/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
index e30c8c15c..48900341c 100644
--- a/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
+++ b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
@@ -40,7 +40,7 @@ const IconWrapper = styled("div")`
     const semanticColors = getSemanticColors(props);
     const mode = getMode(props);
 
-    const { color = "blue", shade = 500 } = props;
+    const { color = "blue", shade = mode === "dark" ? 600 : 500 } = props;
 
     return `
       align-items: center;
@@ -66,7 +66,7 @@ const IconWrapper = styled("div")`
       }
 
       span.size-tag {
-        background-color: ${semanticColors?.base?.surfaceSecondary};
+        background-color: ${mode === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"};
         font-size: 10px;
         padding: 0 4px;
         margin: 0 2px;
@@ -92,7 +92,7 @@ const IconWrapper = styled("div")`
         }
 
         svg {
-          fill: ${semanticColors?.base?.iconPrimaryInverse};
+          fill: ${semanticColors?.base?.ornamentPrimaryInverse};
         }
 
         div.notification {
@@ -157,7 +157,6 @@ const IconItem = (props: IconItemProps) => {
           color={color}
           sdsSize={sdsSize}
           sdsIcon={sdsIcon as keyof IconNameToSizes}
-          sdsType="static"
         />
       </div>
       <p>{sdsIcon}</p>
@@ -181,16 +180,10 @@ const IconItem = (props: IconItemProps) => {
             color={color}
             sdsSize={sdsSize}
             sdsIcon={sdsIcon as keyof IconNameToSizes}
-            sdsType="static"
           />
           <p>Copied!</p>
           <span>
-            <RawIcon
-              color={color}
-              sdsSize="xs"
-              sdsIcon="Check"
-              sdsType="static"
-            />
+            <RawIcon color={color} sdsSize="xs" sdsIcon="Check" />
           </span>
         </div>
       )}
@@ -241,9 +234,7 @@ export const IconBankDemo = (props: Args): JSX.Element => {
       ) : (
         <Callout
           intent="notice"
-          icon={
-            <RawIcon sdsSize="l" sdsIcon="InfoSpeechBubble" sdsType="static" />
-          }
+          icon={<RawIcon sdsSize="l" sdsIcon="InfoSpeechBubble" />}
         >
           Sorry, there are no matches for your search!
         </Callout>
diff --git a/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx b/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx
index 3049248b5..22e4af8e7 100644
--- a/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx
+++ b/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx
@@ -2,5 +2,5 @@ import { Icon } from "@czi-sds/components";
 import React from "react";
 
 const IconNameSpaceTest = () => {
-  return <Icon color="blue" sdsIcon="Bacteria" sdsSize="xl" sdsType="static" />;
+  return <Icon color="blue" sdsIcon="Bacteria" sdsSize="xl" />;
 };
diff --git a/packages/components/src/core/Icon/index.tsx b/packages/components/src/core/Icon/index.tsx
index 0f6139e68..53a77ef2f 100644
--- a/packages/components/src/core/Icon/index.tsx
+++ b/packages/components/src/core/Icon/index.tsx
@@ -11,7 +11,7 @@ export type { IconNameToSizes };
 
 export interface SdsIconWithColor {
   color?: SdsIconColorType;
-  shade?: 100 | 200 | 300 | 400 | 500 | 600;
+  shade?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
 }
 
 export type IconProps<IconName extends keyof IconNameToSizes> =
@@ -21,7 +21,7 @@ export type IconProps<IconName extends keyof IconNameToSizes> =
  * @see https://mui.com/material-ui/icons/#icons
  */
 const Icon = forwardRef(function Icon<IconName extends keyof IconNameToSizes>(
-  { className, color, shade, sdsIcon, sdsSize, sdsType }: IconProps<IconName>,
+  { className, color, shade, sdsIcon, sdsSize }: IconProps<IconName>,
   ref: ForwardedRef<HTMLDivElement | null>
 ): JSX.Element | null {
   const icon = iconMap[sdsIcon] ?? {};
@@ -40,7 +40,6 @@ const Icon = forwardRef(function Icon<IconName extends keyof IconNameToSizes>(
           height={16}
           component={smallIcon}
           sdsSize={sdsSize}
-          sdsType={sdsType}
           sdsIcon={sdsIcon}
         />
       </StyledIcon>
@@ -59,7 +58,6 @@ const Icon = forwardRef(function Icon<IconName extends keyof IconNameToSizes>(
           height={24}
           component={largeIcon}
           sdsSize={sdsSize}
-          sdsType={sdsType}
           sdsIcon={sdsIcon}
         />
       </StyledIcon>
diff --git a/packages/components/src/core/Icon/style.ts b/packages/components/src/core/Icon/style.ts
index 8e9a78ba3..618c9b0c3 100644
--- a/packages/components/src/core/Icon/style.ts
+++ b/packages/components/src/core/Icon/style.ts
@@ -1,4 +1,4 @@
-import { css, SerializedStyles } from "@emotion/react";
+import { css } from "@emotion/react";
 import { SvgIcon, SvgIconProps } from "@mui/material";
 import styled from "@emotion/styled";
 import { FC } from "react";
@@ -6,7 +6,7 @@ import {
   CommonThemeProps,
   getColors,
   getIconSizes,
-  getSemanticColors,
+  getMode,
 } from "src/core/styles";
 import { IconNameToSizes } from "./map";
 
@@ -15,7 +15,6 @@ export interface IconExtraProps<IconName extends keyof IconNameToSizes>
   className?: string;
   sdsIcon: IconName;
   sdsSize: IconNameToSizes[IconName];
-  sdsType: "iconButton" | "interactive" | "static" | "button";
 }
 
 export type SdsIconColorType =
@@ -37,65 +36,11 @@ export type StyledSvgIconProps<IconName extends keyof IconNameToSizes> =
     SvgIconProps<"svg", { component: FC<CustomSVGProps> }> &
     SdsIconWithColor;
 
+const doNotForwardProps = ["sdsIcon", "sdsSize", "iconColor"];
+
 /**
  * @see https://mui.com/material-ui/icons/#svgicon
  */
-function iconSize<IconName extends keyof IconNameToSizes>(
-  props: IconExtraProps<IconName>
-): SerializedStyles {
-  const { sdsSize } = props;
-  const iconSizes = getIconSizes(props);
-
-  return css`
-    height: ${iconSizes?.[sdsSize]?.height}px;
-    width: ${iconSizes?.[sdsSize]?.width}px;
-  `;
-}
-
-function buttonStyle(): SerializedStyles {
-  return css`
-    color: inherit;
-  `;
-}
-
-function staticStyle<IconName extends keyof IconNameToSizes>(
-  props: StyledSvgIconProps<IconName>
-): SerializedStyles {
-  const { iconColor = "blue", shade = 500 } = props;
-
-  const colors = getColors(props);
-
-  return css`
-    color: ${colors?.[iconColor]?.[shade]};
-  `;
-}
-
-function interactive<IconName extends keyof IconNameToSizes>(
-  props: StyledSvgIconProps<IconName>
-): SerializedStyles {
-  const { iconColor = "blue", shade = 500 } = props;
-
-  const colors = getColors(props);
-  const semanticColors = getSemanticColors(props);
-
-  return css`
-    color: ${semanticColors?.base?.iconPrimary};
-
-    &:hover {
-      color: ${semanticColors?.base?.iconPrimaryHover};
-    }
-
-    &:active {
-      color: ${colors?.[iconColor]?.[shade]};
-    }
-
-    &:disabled {
-      color: ${semanticColors?.base?.iconDisabled};
-    }
-  `;
-}
-
-const doNotForwardProps = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
 
 export const StyledSvgIcon = styled(SvgIcon, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
@@ -103,13 +48,21 @@ export const StyledSvgIcon = styled(SvgIcon, {
   ${<IconName extends keyof IconNameToSizes>(
     props: StyledSvgIconProps<IconName>
   ) => {
-    const { sdsType } = props;
+    const mode = getMode(props);
+
+    const {
+      iconColor = "blue",
+      shade = mode === "dark" ? 600 : 500,
+      sdsSize,
+    } = props;
+
+    const iconSizes = getIconSizes(props);
+    const colors = getColors(props);
 
     return css`
-      ${sdsType !== "iconButton" && iconSize(props)}
-      ${sdsType === "static" && staticStyle(props)}
-      ${sdsType === "interactive" && interactive(props)}
-      ${sdsType === "button" && buttonStyle()}
+      color: ${colors?.[iconColor]?.[shade]};
+      height: ${iconSizes?.[sdsSize]?.height}px;
+      width: ${iconSizes?.[sdsSize]?.width}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/InputCheckbox/index.tsx b/packages/components/src/core/InputCheckbox/index.tsx
index 8dd016f58..6d225abbb 100644
--- a/packages/components/src/core/InputCheckbox/index.tsx
+++ b/packages/components/src/core/InputCheckbox/index.tsx
@@ -15,7 +15,7 @@ interface CheckboxContentProps
   extends Omit<MUICheckboxProps, "color" | "defaultChecked" | "indeterminate"> {
   caption?: string;
   checkboxProps?: Partial<MUICheckboxProps>;
-  intent?: "default" | "error" | "warning";
+  intent?: "default" | "negative" | "notice" | "positive";
   label?: React.ReactNode;
   stage?: "checked" | "unchecked" | "indeterminate";
 }
diff --git a/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
index 15d64e567..b9b236b5d 100644
--- a/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
 <div>
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-gwrvk1-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-80zoo4-MuiButtonBase-root-MuiButton-root"
     data-testid="InputDropdown"
     label="Label"
     tabindex="0"
@@ -26,7 +26,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
             data-file-name="IconChevronDownSmall"
             data-testid="IconChevronDownSmall"
             fillcontrast="white"
diff --git a/packages/components/src/core/InputDropdown/index.tsx b/packages/components/src/core/InputDropdown/index.tsx
index 17783ed69..fc145d43b 100644
--- a/packages/components/src/core/InputDropdown/index.tsx
+++ b/packages/components/src/core/InputDropdown/index.tsx
@@ -69,7 +69,7 @@ const InputDropdown = (props: InputDropdownProps): JSX.Element => {
         )}
         {shouldRenderCounter && <StyledCounter>{counter}</StyledCounter>}
         <IconWrapper>
-          <Icon sdsIcon="ChevronDown" sdsSize="xs" sdsType="interactive" />
+          <Icon sdsIcon="ChevronDown" sdsSize="xs" />
         </IconWrapper>
       </LabelWrapper>
 
diff --git a/packages/components/src/core/InputDropdown/style.ts b/packages/components/src/core/InputDropdown/style.ts
index 61cf83467..db3486c5e 100644
--- a/packages/components/src/core/InputDropdown/style.ts
+++ b/packages/components/src/core/InputDropdown/style.ts
@@ -77,7 +77,6 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
     ${labelStyle(props)}
 
     border: ${borders?.base?.default};
-    background-color: ${semanticColors?.base?.surfacePrimary};
     cursor: pointer;
     padding: ${padding};
     justify-content: start;
@@ -101,16 +100,16 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
     }
 
     path {
-      fill: ${semanticColors?.base?.iconPrimary};
+      fill: ${semanticColors?.base?.ornamentSecondary};
     }
 
     &:hover {
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: transparent;
       border-color: ${semanticColors?.base?.borderHover};
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.iconPrimaryHover};
+        fill: ${semanticColors?.base?.ornamentSecondaryHover};
       }
 
       .styled-label {
@@ -123,7 +122,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.iconPrimaryPressed};
+        fill: ${semanticColors?.base?.ornamentSecondaryPressed};
       }
     }
 
@@ -160,7 +159,7 @@ const minimal = (props: InputDropdownProps): SerializedStyles => {
     }
 
     path {
-      fill: ${semanticColors?.base?.iconPrimary};
+      fill: ${semanticColors?.base?.ornamentSecondary};
     }
 
     &:hover {
@@ -169,7 +168,7 @@ const minimal = (props: InputDropdownProps): SerializedStyles => {
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.iconPrimaryHover};
+        fill: ${semanticColors?.base?.ornamentSecondaryHover};
       }
 
       .styled-label {
@@ -229,15 +228,9 @@ const userInput = (props: InputDropdownProps): SerializedStyles => {
 
     ${sdsStyle === "minimal"
       ? `
-        
-        background-color: ${semanticColors?.base?.fillHover}47;
         border: none;
         color: ${semanticColors?.base?.textPrimary};
 
-        path {
-          fill: ${semanticColors?.base?.iconPrimaryHover};
-        }
-
         .styled-label {
           color: ${semanticColors?.base?.textPrimary};
         }
@@ -277,23 +270,24 @@ const isOpen = (props: InputDropdownProps): SerializedStyles => {
 
     path {
       fill: ${inputColor === "accent"
-        ? semanticColors?.accent?.iconOpen
+        ? semanticColors?.accent?.ornamentOpen
         : semanticColors?.[inputColor]?.ornament};
     }
 
     border: ${sdsStyle === "minimal"
       ? borders?.none
       : borders?.[inputColor]?.open};
+
     background-color: ${sdsStyle === "minimal"
-      ? semanticColors?.base?.fillHover + "47"
+      ? semanticColors?.base?.fillOpen
       : "transparent"};
 
     &:hover {
       path {
-        fill: ${semanticColors?.base?.iconPrimaryHover};
+        fill: ${semanticColors?.base?.ornamentSecondaryHover};
       }
 
-      border-color: ${borders?.accent?.hover};
+      border-color: ${semanticColors?.base?.borderHover};
     }
   `;
 };
@@ -335,7 +329,7 @@ const isDisabled = (props: InputDropdownProps): SerializedStyles => {
     }
 
     path {
-      fill: ${semanticColors?.base?.iconDisabled};
+      fill: ${semanticColors?.base?.ornamentDisabled};
     }
   `;
 };
@@ -445,7 +439,7 @@ export const StyledCounter = styled("span", {
     const semanticColors = getSemanticColors(props);
 
     return `
-      background-color: ${semanticColors?.base?.surfaceTertiary};
+      background-color: ${semanticColors?.base?.backgroundTertiary};
       color: ${semanticColors?.accent?.textAction};
       border-radius: ${corners?.l}px;
       padding: 0 ${spaces?.xs}px;
diff --git a/packages/components/src/core/InputRadio/index.tsx b/packages/components/src/core/InputRadio/index.tsx
index b9301feb3..775cb34a1 100644
--- a/packages/components/src/core/InputRadio/index.tsx
+++ b/packages/components/src/core/InputRadio/index.tsx
@@ -14,7 +14,7 @@ import React from "react";
 export interface RadioContentProps
   extends Omit<MUIRadioProps, "color" | "defaultChecked"> {
   caption?: string;
-  intent?: "default" | "error" | "warning";
+  intent?: "default" | "negative" | "notice" | "positive";
   label?: React.ReactNode;
   radioProps?: Partial<MUIRadioProps>;
   stage?: "checked" | "unchecked";
diff --git a/packages/components/src/core/InputSearch/index.tsx b/packages/components/src/core/InputSearch/index.tsx
index e6dc246ba..c7d028ce1 100644
--- a/packages/components/src/core/InputSearch/index.tsx
+++ b/packages/components/src/core/InputSearch/index.tsx
@@ -115,9 +115,6 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
                   sdsSize="small"
                   sdsStyle="icon"
                   disabled={disabled}
-                  sdsIconProps={{
-                    sdsType: "iconButton",
-                  }}
                   icon="XMarkCircle"
                 />
               </StyledInputAdornment>
@@ -131,9 +128,6 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
                   sdsSize="small"
                   sdsStyle="icon"
                   disabled={disabled}
-                  sdsIconProps={{
-                    sdsType: "interactive",
-                  }}
                   icon="Search"
                 />
               </StyledInputAdornment>
diff --git a/packages/components/src/core/InputSearch/style.ts b/packages/components/src/core/InputSearch/style.ts
index a718b328a..ed14e64f7 100644
--- a/packages/components/src/core/InputSearch/style.ts
+++ b/packages/components/src/core/InputSearch/style.ts
@@ -87,11 +87,17 @@ const disabledStyled = (props: InputSearchExtraProps): SerializedStyles => {
       }
 
       .${inputAdornmentClasses.root} svg {
-        color: ${semanticColors?.base?.iconDisabled};
+        color: ${semanticColors?.base?.ornamentDisabled};
       }
 
-      &:hover .${outlinedInputClasses.notchedOutline} {
-        border: 1px solid ${semanticColors?.base?.borderDisabled};
+      &:hover {
+        .${outlinedInputClasses.notchedOutline} {
+          border: 1px solid ${semanticColors?.base?.borderDisabled};
+        }
+
+        .${inputAdornmentClasses.root} svg {
+          color: ${semanticColors?.base?.ornamentDisabled} !important;
+        }
       }
 
       &::placeholder {
@@ -156,7 +162,6 @@ export const StyledSearchBase = styled(TextField, {
 
       .${outlinedInputClasses.root} {
         padding: 0 ${spaces?.m}px;
-        background-color: ${semanticColors?.base?.surfacePrimary};
         width: 100%;
 
         .${outlinedInputClasses.input} {
@@ -175,12 +180,12 @@ export const StyledSearchBase = styled(TextField, {
         &:hover .input-search-clear-icon,
         &:focus-within .input-search-clear-icon {
           svg {
-            color: ${semanticColors?.base?.iconPrimary} !important;
+            color: ${semanticColors?.base?.ornamentSecondary} !important;
           }
 
           &:hover {
             svg {
-              color: ${semanticColors?.base?.iconPrimaryHover} !important;
+              color: ${semanticColors?.base?.ornamentSecondaryHover} !important;
             }
           }
 
@@ -197,13 +202,12 @@ export const StyledSearchBase = styled(TextField, {
         padding: ${spaces?.xs}px ${spaces?.s}px;
         height: unset;
         box-sizing: border-box;
-        background-color: ${semanticColors?.base?.surfacePrimary};
       }
 
       .${outlinedInputClasses.root}:hover {
         & .${buttonBaseClasses.root}:last-of-type {
           svg {
-            color: ${semanticColors?.base?.iconPrimaryHover};
+            color: ${semanticColors?.base?.ornamentSecondaryHover};
           }
         }
         .${outlinedInputClasses.notchedOutline} {
@@ -221,7 +225,7 @@ export const StyledSearchBase = styled(TextField, {
         .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
           cursor: default;
           svg {
-            color: ${semanticColors?.accent?.icon};
+            color: ${semanticColors?.accent?.ornamentFocus};
           }
         }
       }
diff --git a/packages/components/src/core/InputSlider/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputSlider/__tests__/__snapshots__/index.test.tsx.snap
index 9e81a9b20..d374212df 100644
--- a/packages/components/src/core/InputSlider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputSlider/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<InputSlider /> Default story renders snapshot 1`] = `
   style="height: 180px; margin-left: 20px; margin-top: 15px; width: 180px;"
 >
   <span
-    class="MuiSlider-root MuiSlider-marked MuiSlider-colorPrimary MuiSlider-sizeMedium css-xebjg-MuiSlider-root"
+    class="MuiSlider-root MuiSlider-marked MuiSlider-colorPrimary MuiSlider-sizeMedium css-1luz55c-MuiSlider-root"
   >
     <span
       class="MuiSlider-rail css-7o8aqz-MuiSlider-rail"
diff --git a/packages/components/src/core/InputSlider/style.ts b/packages/components/src/core/InputSlider/style.ts
index 91e878105..b9f6c3511 100644
--- a/packages/components/src/core/InputSlider/style.ts
+++ b/packages/components/src/core/InputSlider/style.ts
@@ -5,9 +5,7 @@ import {
   focusVisibleA11yStyle,
   fontBodyXxs,
   fontBodyXxxs,
-  getColors,
   getCorners,
-  getMode,
   getSemanticColors,
   getShadows,
 } from "src/core/styles";
@@ -52,7 +50,7 @@ const inputSlider = (props: InputSliderExtraProps) => {
     }
 
     .${sliderClasses.thumb}::after {
-      background-color: ${semanticColors?.base?.surfacePrimary} !important;
+      background-color: ${semanticColors?.base?.backgroundPrimary} !important;
       height: 6px !important;
       width: 6px !important;
       position: absolute;
@@ -64,7 +62,7 @@ const inputSlider = (props: InputSliderExtraProps) => {
     .${sliderClasses.valueLabel} {
       padding: 2px 4px;
       color: ${semanticColors?.base?.textPrimary};
-      background-color: ${semanticColors?.accent?.surfacePrimary};
+      background-color: ${semanticColors?.accent?.surfaceSecondary};
       border-radius: ${corners?.m}px;
       left: unset; 
       top: -3px;
@@ -84,13 +82,13 @@ const inputSlider = (props: InputSliderExtraProps) => {
 
     .${sliderClasses.mark} {
       // (masoudmanson): Although the mark is not a icon, but since we don't have 
-      // a specific color for the mark, we use the iconDisabled color for it.
-      background-color: ${semanticColors?.base?.iconDisabled};
+      // a specific color for the mark, we use the ornamentDisabled color for it.
+      background-color: ${semanticColors?.base?.ornamentDisabled};
       opacity: 1;
     }
 
     .${sliderClasses.mark}.${sliderClasses.markActive} {
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.backgroundPrimary};
     }
 
     .${sliderClasses.markLabel} {
@@ -136,9 +134,7 @@ const horizontal = (props: InputSliderExtraProps) => {
 };
 
 const disabledSlider = (props: InputSliderExtraProps) => {
-  const colors = getColors(props);
   const semanticColors = getSemanticColors(props);
-  const mode = getMode(props);
 
   return `
     .${sliderClasses.track} {
@@ -150,8 +146,8 @@ const disabledSlider = (props: InputSliderExtraProps) => {
     }
 
     .${sliderClasses.valueLabel} {
-      color: ${colors?.gray[300]};
-      background-color: ${mode === "light" ? semanticColors?.base?.surfaceSecondary : semanticColors?.base?.surfacePrimary};
+      color: ${semanticColors?.base?.textDisabled};
+      background-color: ${semanticColors?.base?.backgroundSecondary};
       
       & * {
         color: ${semanticColors?.base?.textDisabled};
diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts
index ae772fb81..6caa5e49d 100644
--- a/packages/components/src/core/InputText/style.ts
+++ b/packages/components/src/core/InputText/style.ts
@@ -67,10 +67,12 @@ const disabledStyled = (props: InputTextExtraProps): SerializedStyles => {
     .${outlinedInputClasses.disabled} {
       .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.base?.disabled};
+        opacity: 1;
       }
 
       &:hover .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.base?.disabled};
+        opacity: 1;
       }
 
       &::placeholder {
@@ -120,7 +122,6 @@ export const StyledInputBase = styled(TextField, {
     const spaces = getSpaces(props);
     const borders = getBorders(props);
     const corners = getCorners(props);
-    const semanticColors = getSemanticColors(props);
 
     return css`
       margin-bottom: ${spaces?.l}px;
@@ -136,7 +137,6 @@ export const StyledInputBase = styled(TextField, {
         padding: ${spaces?.xs}px ${spaces?.m}px;
         height: unset;
         box-sizing: border-box;
-        background-color: ${semanticColors?.base?.surfacePrimary};
       }
 
       .${outlinedInputClasses.notchedOutline} {
diff --git a/packages/components/src/core/InputToggle/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputToggle/__tests__/__snapshots__/index.test.tsx.snap
index 138bf8a30..90ebe2109 100644
--- a/packages/components/src/core/InputToggle/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputToggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<InputToggle /> Controlled story renders snapshot 1`] = `
 <span
-  class="MuiSwitch-root MuiSwitch-sizeMedium css-1tfpzow-MuiSwitch-root"
+  class="MuiSwitch-root MuiSwitch-sizeMedium css-fml3vw-MuiSwitch-root"
 >
   <span
     class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked Mui-checked css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
@@ -28,7 +28,7 @@ exports[`<InputToggle /> Controlled story renders snapshot 1`] = `
 
 exports[`<InputToggle /> Default story renders snapshot 1`] = `
 <span
-  class="MuiSwitch-root MuiSwitch-sizeMedium css-ovovto-MuiSwitch-root"
+  class="MuiSwitch-root MuiSwitch-sizeMedium css-hcrspq-MuiSwitch-root"
 >
   <span
     class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
diff --git a/packages/components/src/core/InputToggle/style.ts b/packages/components/src/core/InputToggle/style.ts
index b4c45ec17..4f10677bb 100644
--- a/packages/components/src/core/InputToggle/style.ts
+++ b/packages/components/src/core/InputToggle/style.ts
@@ -68,7 +68,7 @@ const toggle = (props: InputToggleExtraProps) => {
     }
 
     .${switchClasses.track} {
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      // background-color: ${semanticColors?.base?.backgroundPrimary};
       opacity: 1;
       border-radius: ${corners?.l}px;
     }
@@ -87,7 +87,7 @@ const toggleOn = (props: InputToggleExtraProps) => {
     }
 
     .${switchClasses.thumb} {
-      color: ${disabled ? semanticColors?.base?.iconDisabled : semanticColors?.accent?.icon};
+      color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.accent?.ornament};
       margin-left: ${spaces?.m}px;
     }
 
@@ -108,7 +108,7 @@ const toggleOn = (props: InputToggleExtraProps) => {
     }
 
     .${switchClasses.track} {
-      background-color: ${semanticColors?.base?.fillPrimary} !important;
+      background-color: transparent !important;
       opacity: 1 !important;
     }
 
@@ -118,7 +118,7 @@ const toggleOn = (props: InputToggleExtraProps) => {
         outline: ${borders?.accent?.hover};
 
         .${switchClasses.thumb} {
-          color: ${semanticColors?.accent?.iconHover};
+          color: ${semanticColors?.accent?.ornamentHover};
         }
       }`
     }
@@ -139,8 +139,8 @@ const toggleOff = (props: InputToggleExtraProps) => {
     .${switchClasses.thumb} {
       color: ${
         disabled
-          ? semanticColors?.base?.iconDisabled
-          : semanticColors?.base?.iconPrimary
+          ? semanticColors?.base?.ornamentDisabled
+          : semanticColors?.base?.ornamentSecondary
       };
       margin-right: ${spaces?.m}px;
     }
@@ -170,7 +170,7 @@ const toggleOff = (props: InputToggleExtraProps) => {
     }
 
     .${switchClasses.track} {
-      background-color: ${semanticColors?.base?.fillPrimary} !important;
+      background-color: transparent !important;
       opacity: 1 !important;
     }
 
@@ -180,7 +180,7 @@ const toggleOff = (props: InputToggleExtraProps) => {
         outline: ${borders?.base?.hover};
 
         .${switchClasses.thumb} {
-          color: ${semanticColors?.base?.iconPrimaryHover};
+          color: ${semanticColors?.base?.ornamentSecondaryHover};
         }
       }`
     }
diff --git a/packages/components/src/core/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap
index 78a9d5c00..2e13f28e5 100644
--- a/packages/components/src/core/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<LoadingIndicator /> CustomAriaLabel story renders snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
       data-file-name="IconLoadingLarge"
       data-testid="IconLoadingLarge"
       fillcontrast="white"
@@ -41,7 +41,7 @@ exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
       data-file-name="IconLoadingLarge"
       data-testid="IconLoadingLarge"
       fillcontrast="white"
diff --git a/packages/components/src/core/LoadingIndicator/index.tsx b/packages/components/src/core/LoadingIndicator/index.tsx
index 81b317de4..bbeba7f22 100644
--- a/packages/components/src/core/LoadingIndicator/index.tsx
+++ b/packages/components/src/core/LoadingIndicator/index.tsx
@@ -15,7 +15,7 @@ const LoadingIndicator = ({
 }: LoadingIndicatorProps): JSX.Element => {
   return (
     <StyledLoadingIndicator sdsStyle={sdsStyle} aria-label="Loading">
-      <Icon sdsIcon="Loading" sdsSize="l" sdsType="static" />
+      <Icon sdsIcon="Loading" sdsSize="l" />
       <StyledText aria-label={ariaLabel} aria-live="polite" role="status">
         Loading
       </StyledText>
diff --git a/packages/components/src/core/LoadingIndicator/style.ts b/packages/components/src/core/LoadingIndicator/style.ts
index f523c3197..0ac88a1da 100644
--- a/packages/components/src/core/LoadingIndicator/style.ts
+++ b/packages/components/src/core/LoadingIndicator/style.ts
@@ -38,7 +38,7 @@ const minimal = (props: CommonThemeProps): SerializedStyles => {
       width: ${iconSizes?.s.width}px;
 
       path {
-        fill: ${semanticColors?.base?.iconPrimary};
+        fill: ${semanticColors?.base?.ornamentSecondary};
       }
     }
   `;
@@ -51,7 +51,7 @@ const tag = (props: CommonThemeProps): SerializedStyles => {
   return css`
     ${fontCapsXxxxs(props)}
 
-    background-color: ${semanticColors?.info?.surfacePrimary};
+    background-color: ${semanticColors?.info?.surfaceSecondary};
     border-radius: ${corners?.l}px;
     color: ${semanticColors?.info?.text};
 
diff --git a/packages/components/src/core/Menu/style.ts b/packages/components/src/core/Menu/style.ts
index 06de8fdf6..75152b08a 100644
--- a/packages/components/src/core/Menu/style.ts
+++ b/packages/components/src/core/Menu/style.ts
@@ -14,7 +14,7 @@ export const StyledMenu = styled(Menu)`
         const semanticColors = getSemanticColors(props);
 
         return `
-          background-color: ${semanticColors?.base?.surfacePrimary};
+          background-color: ${semanticColors?.base?.surface};
           background-image: none;
           padding: ${spaces?.xs}px;
         `;
diff --git a/packages/components/src/core/MenuItem/index.tsx b/packages/components/src/core/MenuItem/index.tsx
index 990fccd28..d50645467 100644
--- a/packages/components/src/core/MenuItem/index.tsx
+++ b/packages/components/src/core/MenuItem/index.tsx
@@ -132,13 +132,7 @@ const MenuItem = forwardRef(function MenuItem<
       } else {
         return (
           <StyledMenuItemIcon disabled={disabled}>
-            <Icon
-              color="blue"
-              {...sdsIconProps}
-              sdsType="static"
-              sdsIcon={icon}
-              sdsSize="s"
-            />
+            <Icon color="blue" {...sdsIconProps} sdsIcon={icon} sdsSize="s" />
           </StyledMenuItemIcon>
         );
       }
diff --git a/packages/components/src/core/MenuItem/style.ts b/packages/components/src/core/MenuItem/style.ts
index 039c65d35..fdac4d2b7 100644
--- a/packages/components/src/core/MenuItem/style.ts
+++ b/packages/components/src/core/MenuItem/style.ts
@@ -59,7 +59,7 @@ export const StyledMenuItem = styled(MenuItem)`
         }
 
         svg.check-icon {
-          color: ${selected ? semanticColors?.accent?.iconSelected : semanticColors?.base?.iconPrimary};
+          color: ${selected ? semanticColors?.accent?.ornamentSelected : semanticColors?.base?.ornamentSecondary};
         }
       }
 
@@ -70,12 +70,12 @@ export const StyledMenuItem = styled(MenuItem)`
       &:hover {
         background-color: ${semanticColors?.base?.fillHover};
         svg.check-icon {
-          color: ${selected ? semanticColors?.accent?.iconHover : semanticColors?.base?.iconPrimary};
+          color: ${selected ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondary};
         }
       }
 
       &.Mui-selected.MuiListItem-root.MuiListItem-button {
-        background-color: ${semanticColors?.base?.surfacePrimary};
+        background-color: ${semanticColors?.base?.surface};
         &:hover {
           background-color: ${semanticColors?.base?.fillHover};
         }
@@ -86,12 +86,12 @@ export const StyledMenuItem = styled(MenuItem)`
 
       &:active {
         svg.check-icon {
-          color: ${semanticColors?.accent?.iconPressed};
+          color: ${semanticColors?.accent?.ornamentPressed};
         }
 
         &:active {
           svg.check-icon {
-            color: ${semanticColors?.accent?.iconPressed};
+            color: ${semanticColors?.accent?.ornamentPressed};
           }
 
           .primary-text {
@@ -164,7 +164,7 @@ export const StyledMenuItemIcon = styled("span")`
       height: ${iconSizes?.s.height}px;
 
       .MuiSvgIcon-root {
-        ${disabled ? `color: ${semanticColors?.base?.iconDisabled};` : null}
+        ${disabled ? `color: ${semanticColors?.base?.ornamentDisabled};` : null};
       }
     `;
   }}
@@ -220,8 +220,8 @@ export const StyledCheck = styled(Check, {
     const semanticColors = getSemanticColors(props);
 
     const selectedColor = disabled
-      ? semanticColors?.base?.iconDisabled
-      : semanticColors?.accent?.icon;
+      ? semanticColors?.base?.ornamentDisabled
+      : semanticColors?.accent?.ornamentSelected;
 
     return `
       color: ${selected ? selectedColor : "transparent"};
@@ -246,8 +246,8 @@ export const StyledMinus = styled(Remove, {
     const iconSizes = getIconSizes(props);
 
     const selectedColor = disabled
-      ? semanticColors?.base?.iconDisabled
-      : semanticColors?.accent?.icon;
+      ? semanticColors?.base?.ornamentDisabled
+      : semanticColors?.accent?.ornamentSelected;
 
     return `
       color: ${selected ? selectedColor : "transparent"};
diff --git a/packages/components/src/core/MenuSelect/index.tsx b/packages/components/src/core/MenuSelect/index.tsx
index 26a3a92f8..21b313338 100644
--- a/packages/components/src/core/MenuSelect/index.tsx
+++ b/packages/components/src/core/MenuSelect/index.tsx
@@ -127,9 +127,6 @@ const MenuSelect = <
                     sdsType="tertiary"
                     sdsSize="small"
                     sdsStyle="icon"
-                    sdsIconProps={{
-                      sdsType: "interactive",
-                    }}
                     icon="Search"
                   />
                 </InputAdornment>
diff --git a/packages/components/src/core/NavigationJumpTo/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/NavigationJumpTo/__tests__/__snapshots__/index.test.tsx.snap
index 1f4e29dc7..1db1e2e4a 100644
--- a/packages/components/src/core/NavigationJumpTo/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/NavigationJumpTo/__tests__/__snapshots__/index.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <button
         aria-controls="navigation-panel-1"
         aria-selected="true"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth Mui-selected css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth Mui-selected css-397dh9-MuiButtonBase-root-MuiTab-root"
         id="navigation-tab-item-1"
         role="tab"
         tabindex="0"
@@ -31,7 +31,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <button
         aria-controls="navigation-panel-2"
         aria-selected="false"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-397dh9-MuiButtonBase-root-MuiTab-root"
         id="navigation-tab-item-2"
         role="tab"
         tabindex="0"
@@ -45,7 +45,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <button
         aria-controls="navigation-panel-3"
         aria-selected="false"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-397dh9-MuiButtonBase-root-MuiTab-root"
         id="navigation-tab-item-3"
         role="tab"
         tabindex="0"
@@ -59,7 +59,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <button
         aria-controls="navigation-panel-4"
         aria-selected="false"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-397dh9-MuiButtonBase-root-MuiTab-root"
         id="navigation-tab-item-4"
         role="tab"
         tabindex="0"
@@ -73,7 +73,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <button
         aria-controls="navigation-panel-5"
         aria-selected="false"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-397dh9-MuiButtonBase-root-MuiTab-root"
         id="navigation-tab-item-5"
         role="tab"
         tabindex="0"
@@ -107,7 +107,7 @@ exports[`<NavigationJumpTo /> JumpToNavDemo story renders snapshot 1`] = `
       Section panel height:
     </p>
     <span
-      class="MuiSlider-root MuiSlider-marked MuiSlider-colorPrimary MuiSlider-sizeMedium css-ush1oe-MuiSlider-root"
+      class="MuiSlider-root MuiSlider-marked MuiSlider-colorPrimary MuiSlider-sizeMedium css-tvaxs8-MuiSlider-root"
     >
       <span
         class="MuiSlider-rail css-7o8aqz-MuiSlider-rail"
@@ -239,7 +239,7 @@ exports[`<NavigationJumpTo /> JumpToNavDemo story renders snapshot 1`] = `
             <button
               aria-controls="navigation-panel-1"
               aria-selected="true"
-              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth Mui-selected css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth Mui-selected css-397dh9-MuiButtonBase-root-MuiTab-root"
               id="navigation-tab-section-1"
               role="tab"
               tabindex="0"
@@ -253,7 +253,7 @@ exports[`<NavigationJumpTo /> JumpToNavDemo story renders snapshot 1`] = `
             <button
               aria-controls="navigation-panel-2"
               aria-selected="false"
-              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-397dh9-MuiButtonBase-root-MuiTab-root"
               id="navigation-tab-section-2"
               role="tab"
               tabindex="0"
@@ -267,7 +267,7 @@ exports[`<NavigationJumpTo /> JumpToNavDemo story renders snapshot 1`] = `
             <button
               aria-controls="navigation-panel-3"
               aria-selected="false"
-              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-397dh9-MuiButtonBase-root-MuiTab-root"
               id="navigation-tab-section-3"
               role="tab"
               tabindex="0"
@@ -281,7 +281,7 @@ exports[`<NavigationJumpTo /> JumpToNavDemo story renders snapshot 1`] = `
             <button
               aria-controls="navigation-panel-4"
               aria-selected="false"
-              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-397dh9-MuiButtonBase-root-MuiTab-root"
               id="navigation-tab-section-4"
               role="tab"
               tabindex="0"
@@ -295,7 +295,7 @@ exports[`<NavigationJumpTo /> JumpToNavDemo story renders snapshot 1`] = `
             <button
               aria-controls="navigation-panel-5"
               aria-selected="false"
-              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-5wvh5p-MuiButtonBase-root-MuiTab-root"
+              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-397dh9-MuiButtonBase-root-MuiTab-root"
               id="navigation-tab-section-5"
               role="tab"
               tabindex="0"
diff --git a/packages/components/src/core/NavigationJumpTo/index.tsx b/packages/components/src/core/NavigationJumpTo/index.tsx
index f3b86b898..3199a2ecf 100644
--- a/packages/components/src/core/NavigationJumpTo/index.tsx
+++ b/packages/components/src/core/NavigationJumpTo/index.tsx
@@ -4,13 +4,19 @@ import { toKebabCase } from "src/common/utils";
 import { NavigationJumpToExtraProps, StyledTab, StyledTabs } from "./style";
 import useInView from "./useIntersection";
 
+type Item = {
+  title: string;
+  elementRef: React.MutableRefObject<HTMLElement | null>;
+};
+
 export interface NavigationJumpToProps extends NavigationJumpToExtraProps {
-  items: Array<{
-    title: string;
-    elementRef: React.MutableRefObject<HTMLElement | null>;
-  }>;
+  items: Array<Item>;
   offsetTop?: number;
-  onChange?: (value: number) => void;
+  onChange?: (
+    value: number,
+    event?: React.SyntheticEvent,
+    type?: "click" | "scroll"
+  ) => void;
 }
 
 const NavigationJumpTo = forwardRef<HTMLDivElement, NavigationJumpToProps>(
@@ -56,9 +62,13 @@ const NavigationJumpTo = forwardRef<HTMLDivElement, NavigationJumpToProps>(
 
     // Emit changes only once
     const handleOnChange = useCallback(
-      (value: number) => {
+      (
+        value: number,
+        event: React.SyntheticEvent,
+        type: "click" | "scroll"
+      ) => {
         if (value !== emittedValue) {
-          onChange?.(value);
+          onChange?.(value, event, type);
           setEmittedValue(value);
         }
       },
@@ -92,7 +102,7 @@ const NavigationJumpTo = forwardRef<HTMLDivElement, NavigationJumpToProps>(
       setFirstTabIndexInview(newValue);
 
       // Invoke the custom onChange prop
-      handleOnChange(newValue);
+      handleOnChange(newValue, event, "click");
     };
 
     // Observe changes in the sectionIsInView object to update the tabs value
@@ -110,9 +120,16 @@ const NavigationJumpTo = forwardRef<HTMLDivElement, NavigationJumpToProps>(
         setFirstTabIndexInview(sectionInView);
 
         // Invoke the custom onChange prop
-        handleOnChange(sectionInView);
+        handleOnChange(
+          sectionInView,
+          {
+            target: items[sectionInView],
+            type: "scroll",
+          } as unknown as React.SyntheticEvent,
+          "scroll"
+        );
       }
-    }, [handleOnChange, navItemClicked, sectionIsInView]);
+    }, [handleOnChange, items, navItemClicked, sectionIsInView]);
 
     // Set navItemClicked to false to re-enable the option
     // to update the tab value based on scroll.
diff --git a/packages/components/src/core/NavigationJumpTo/style.ts b/packages/components/src/core/NavigationJumpTo/style.ts
index dab652f1f..45dbf2654 100644
--- a/packages/components/src/core/NavigationJumpTo/style.ts
+++ b/packages/components/src/core/NavigationJumpTo/style.ts
@@ -96,10 +96,6 @@ export const StyledTab = styled(Tab, {
         color: ${semanticColors?.base?.textPrimary};
         font-weight: 600;
       }
-      &.MuiTabs-indicator {
-        backgroundColor: ${semanticColors?.base?.surfaceTertiary};
-        width: ${spaces?.xxxs}px;
-      }
       &.MuiButtonBase-root {
         white-space: nowrap;
         padding: 0;
diff --git a/packages/components/src/core/Notification/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Notification/__tests__/__snapshots__/index.test.tsx.snap
index 96d521aed..fb280d1d0 100644
--- a/packages/components/src/core/Notification/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Notification/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<Notification /> Default story renders snapshot 1`] = `
   class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-1xe61c-MuiFormControlLabel-root"
 >
   <span
-    class="MuiSwitch-root MuiSwitch-sizeMedium css-ovovto-MuiSwitch-root"
+    class="MuiSwitch-root MuiSwitch-sizeMedium css-hcrspq-MuiSwitch-root"
   >
     <span
       class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
diff --git a/packages/components/src/core/Notification/index.tsx b/packages/components/src/core/Notification/index.tsx
index 8511ee2ef..6181ab39e 100644
--- a/packages/components/src/core/Notification/index.tsx
+++ b/packages/components/src/core/Notification/index.tsx
@@ -74,7 +74,6 @@ const Notification = ({
           <Icon
             sdsSize="l"
             sdsIcon={icon as keyof IconNameToSizes}
-            sdsType="static"
             {...sdsIconProps}
           />
         );
@@ -82,17 +81,11 @@ const Notification = ({
     } else {
       switch (intent) {
         case "positive":
-          return <Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="static" />;
+          return <Icon sdsSize="l" sdsIcon="CheckCircle" />;
         case "info":
-          return <Icon sdsSize="l" sdsIcon="InfoCircle" sdsType="static" />;
+          return <Icon sdsSize="l" sdsIcon="InfoCircle" />;
         default:
-          return (
-            <Icon
-              sdsSize="l"
-              sdsIcon="ExclamationMarkCircle"
-              sdsType="static"
-            />
-          );
+          return <Icon sdsSize="l" sdsIcon="ExclamationMarkCircle" />;
       }
     }
   };
diff --git a/packages/components/src/core/Notification/style.ts b/packages/components/src/core/Notification/style.ts
index cd766b6cb..42a9f4f45 100644
--- a/packages/components/src/core/Notification/style.ts
+++ b/packages/components/src/core/Notification/style.ts
@@ -41,7 +41,8 @@ export const StyledNotification = styled(Alert, {
     const borders = getBorders(props);
 
     const iconColor = semanticColors?.[intent]?.ornament ?? "black";
-    const backgroundColor = semanticColors?.[intent]?.surfacePrimary ?? "white";
+    const backgroundColor =
+      semanticColors?.[intent]?.surfaceSecondary ?? "white";
 
     // (masoudmanson): The Notification Icon should be vertically centered with the Notification
     // Title. The padding-top of the Notification Title is calculated based on the difference
diff --git a/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
index b69bc75c1..b643b0344 100644
--- a/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconChevronLeftSmall"
         data-testid="IconChevronLeftSmall"
         fillcontrast="white"
@@ -61,7 +61,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
   >
     <button
       aria-label="Go to a page"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-navga8-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1br45xa-MuiButtonBase-root-MuiIconButton-root"
       icon="DotsHorizontal"
       tabindex="0"
       type="button"
@@ -71,7 +71,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconDotsHorizontal3Small"
           data-testid="IconDotsHorizontal3Small"
           fillcontrast="white"
@@ -102,7 +102,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconChevronRightSmall"
         data-testid="IconChevronRightSmall"
         fillcontrast="white"
diff --git a/packages/components/src/core/Pagination/index.tsx b/packages/components/src/core/Pagination/index.tsx
index 83181ece1..ecbe29f75 100644
--- a/packages/components/src/core/Pagination/index.tsx
+++ b/packages/components/src/core/Pagination/index.tsx
@@ -119,12 +119,7 @@ const Pagination = forwardRef<HTMLUListElement, PaginationProps>(
           onKeyDown={handleGoBackButtonKeyDown}
           tabIndex={0}
         >
-          <Icon
-            aria-label="Previous page"
-            sdsIcon="ChevronLeft"
-            sdsSize="xs"
-            sdsType="button"
-          />
+          <Icon aria-label="Previous page" sdsIcon="ChevronLeft" sdsSize="xs" />
         </StyledPaginationChevronList>
 
         {PaginationPageList(
@@ -143,12 +138,7 @@ const Pagination = forwardRef<HTMLUListElement, PaginationProps>(
           onKeyDown={handleGoNextButtonKeyDown}
           tabIndex={0}
         >
-          <Icon
-            aria-label="Next page"
-            sdsIcon="ChevronRight"
-            sdsSize="xs"
-            sdsType="button"
-          />
+          <Icon aria-label="Next page" sdsIcon="ChevronRight" sdsSize="xs" />
         </StyledPaginationChevronList>
       </StyledPagination>
     );
diff --git a/packages/components/src/core/Pagination/style.ts b/packages/components/src/core/Pagination/style.ts
index 6ddb5615f..faab10ac9 100644
--- a/packages/components/src/core/Pagination/style.ts
+++ b/packages/components/src/core/Pagination/style.ts
@@ -42,14 +42,14 @@ export const StyledPaginationButton = styled(Button)`
 
       & .MuiSvgIcon-root {
         width: 10px;
-        color: ${semanticColors?.base?.iconPrimary}
+        color: ${semanticColors?.base?.ornamentSecondary};
       }
 
       &:hover {
         background-color: ${semanticColors?.base?.fillHover};
 
         & .MuiSvgIcon-root {
-          color: ${semanticColors?.base?.iconPrimaryHover}
+          color: ${semanticColors?.base?.ornamentSecondaryHover}
         }
       }
     `;
@@ -83,14 +83,14 @@ export const StyledPaginationChevronList = styled("li", {
       }
 
       & .MuiSvgIcon-root {
-        color: ${disabled ? semanticColors?.base?.iconDisabled : semanticColors?.base?.iconPrimary};
+        color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondary};
       }
 
       &:hover {
         background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
 
         & .MuiSvgIcon-root {
-          color: ${disabled ? semanticColors?.base?.iconDisabled : semanticColors?.base?.iconPrimaryHover}
+          color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryHover}
         }
       }
 
diff --git a/packages/components/src/core/Panel/style.ts b/packages/components/src/core/Panel/style.ts
index 4b3d0306f..1aad86513 100644
--- a/packages/components/src/core/Panel/style.ts
+++ b/packages/components/src/core/Panel/style.ts
@@ -32,7 +32,7 @@ const basicPanelStyles = (props: PanelExtraProps): SerializedStyles => {
 
   return css`
     .${drawerClasses.paper} {
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.backgroundPrimary};
       padding: ${spaces?.l}px;
       min-width: ${PANEL_BASIC_MIN_WIDTH_PX}px;
       min-height: ${PANEL_BASIC_MIN_WIDTH_PX}px;
@@ -60,7 +60,7 @@ const overlayPanelStyles = (props: PanelExtraProps): SerializedStyles => {
     }
 
     .${drawerClasses.paper} {
-      background-color: ${semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.surface};
       padding: ${spaces?.xl}px;
       min-width: ${PANEL_OVERLAY_MIN_WIDTH_PX}px;
       min-height: ${PANEL_OVERLAY_MIN_WIDTH_PX}px;
diff --git a/packages/components/src/core/SegmentedControl/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/SegmentedControl/__tests__/__snapshots__/index.test.tsx.snap
index 918720e40..958213982 100644
--- a/packages/components/src/core/SegmentedControl/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/SegmentedControl/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot 1`] = `
 <div
   aria-label="Segmented Control"
-  class="MuiToggleButtonGroup-root css-5qbclc-MuiToggleButtonGroup-root"
+  class="MuiToggleButtonGroup-root css-nkxdz1-MuiToggleButtonGroup-root"
   role="group"
 >
   <button
     aria-label="List A"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -23,7 +23,7 @@ exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
@@ -41,7 +41,7 @@ exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot
   <button
     aria-label="List B"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -55,7 +55,7 @@ exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
@@ -73,7 +73,7 @@ exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot
   <button
     aria-label="List C"
     aria-pressed="true"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -87,7 +87,7 @@ exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
@@ -105,7 +105,7 @@ exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot
   <button
     aria-label="List D"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -119,7 +119,7 @@ exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
@@ -140,13 +140,13 @@ exports[`<SegmentedControl /> ControlledSegmentedControl story renders snapshot
 exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
 <div
   aria-label="Segmented Control"
-  class="MuiToggleButtonGroup-root css-5qbclc-MuiToggleButtonGroup-root"
+  class="MuiToggleButtonGroup-root css-nkxdz1-MuiToggleButtonGroup-root"
   role="group"
 >
   <button
     aria-label="List A"
     aria-pressed="true"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -160,7 +160,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
@@ -178,7 +178,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
   <button
     aria-label="List B"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -192,7 +192,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
@@ -210,7 +210,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
   <button
     aria-label="List C"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -224,7 +224,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
@@ -242,7 +242,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
   <button
     aria-label="List D"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -256,7 +256,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
@@ -277,13 +277,13 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
 exports[`<SegmentedControl /> WithDisabledButton story renders snapshot 1`] = `
 <div
   aria-label="Segmented Control"
-  class="MuiToggleButtonGroup-root css-5qbclc-MuiToggleButtonGroup-root"
+  class="MuiToggleButtonGroup-root css-nkxdz1-MuiToggleButtonGroup-root"
   role="group"
 >
   <button
     aria-label="List A"
     aria-pressed="true"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -297,7 +297,7 @@ exports[`<SegmentedControl /> WithDisabledButton story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconLinesHorizontal3Small"
           data-testid="IconLinesHorizontal3Small"
           fillcontrast="white"
@@ -315,7 +315,7 @@ exports[`<SegmentedControl /> WithDisabledButton story renders snapshot 1`] = `
   <button
     aria-label="List B"
     aria-pressed="false"
-    class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-disabled MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButtonGroup-middleButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-disabled MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-9sonpc-MuiButtonBase-root-MuiToggleButton-root"
     disabled=""
     tabindex="-1"
     type="button"
@@ -329,7 +329,7 @@ exports[`<SegmentedControl /> WithDisabledButton story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconLinesHorizontal3Small"
           data-testid="IconLinesHorizontal3Small"
           fillcontrast="white"
@@ -344,7 +344,7 @@ exports[`<SegmentedControl /> WithDisabledButton story renders snapshot 1`] = `
   <button
     aria-label="List C"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -358,7 +358,7 @@ exports[`<SegmentedControl /> WithDisabledButton story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconLinesHorizontal3Small"
           data-testid="IconLinesHorizontal3Small"
           fillcontrast="white"
@@ -376,7 +376,7 @@ exports[`<SegmentedControl /> WithDisabledButton story renders snapshot 1`] = `
   <button
     aria-label="List D"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-17doxn7-MuiButtonBase-root-MuiToggleButton-root"
     data-mui-internal-clone-element="true"
     tabindex="0"
     type="button"
@@ -390,7 +390,7 @@ exports[`<SegmentedControl /> WithDisabledButton story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconLinesHorizontal3Small"
           data-testid="IconLinesHorizontal3Small"
           fillcontrast="white"
diff --git a/packages/components/src/core/SegmentedControl/index.tsx b/packages/components/src/core/SegmentedControl/index.tsx
index 2a77b8206..902e40a1d 100644
--- a/packages/components/src/core/SegmentedControl/index.tsx
+++ b/packages/components/src/core/SegmentedControl/index.tsx
@@ -1,8 +1,8 @@
-import { ToggleButton, ToggleButtonGroupProps } from "@mui/material";
+import { ToggleButtonGroupProps } from "@mui/material";
 import React from "react";
 import Icon, { IconNameToSizes } from "src/core/Icon";
 import Tooltip from "src/core/Tooltip";
-import { StyledSegmentedControl } from "./style";
+import { StyledSegmentedControl, StyledToggleButton } from "./style";
 
 // one prop is array of objects: with icon name and tooltip text. They need to make
 // first item in array first button, etc
@@ -71,19 +71,19 @@ const SegmentedControl = (props: SegmentedControlProps) => {
           typeof icon !== "string" ? (
             icon
           ) : (
-            <Icon sdsIcon={icon} sdsSize="s" sdsType="button" />
+            <Icon sdsIcon={icon} sdsSize="s" />
           )
         ) : null;
 
         const toggleButton = (
-          <ToggleButton
+          <StyledToggleButton
             aria-label={tooltipText ?? buttonValue}
             value={buttonValue}
             disabled={disabled}
             key={buttonValue}
           >
             <span tabIndex={-1}>{iconItem}</span>
-          </ToggleButton>
+          </StyledToggleButton>
         );
 
         // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
diff --git a/packages/components/src/core/SegmentedControl/style.ts b/packages/components/src/core/SegmentedControl/style.ts
index cc9eeae3f..9287bb7f0 100644
--- a/packages/components/src/core/SegmentedControl/style.ts
+++ b/packages/components/src/core/SegmentedControl/style.ts
@@ -1,4 +1,9 @@
-import { ToggleButtonGroup, toggleButtonClasses } from "@mui/material";
+import {
+  ToggleButton,
+  ToggleButtonGroup,
+  ToggleButtonProps,
+  toggleButtonClasses,
+} from "@mui/material";
 import styled from "@emotion/styled";
 import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y";
 import {
@@ -23,20 +28,21 @@ export const StyledSegmentedControl = styled(ToggleButtonGroup, {
 
       .${toggleButtonClasses.root}.${toggleButtonClasses.selected} {
         background-color: ${semanticColors?.base?.fillOpen};
-        color: ${semanticColors?.accent?.iconSelected};
+        color: ${semanticColors?.accent?.ornamentSelected};
         border-color: ${semanticColors?.base?.border};
 
         &:hover {
           background-color: ${semanticColors?.base?.fillHover};
+          color: ${semanticColors?.base?.ornamentSecondaryHover};
         }
       }
 
       .${toggleButtonClasses.root} {
         ${focusVisibleA11yStyle(props)}
-        background-color: ${semanticColors?.base?.fillPrimary};
+        background-color: transparent;
         border-color: ${semanticColors?.base?.border};
         line-height: 0px;
-        color: ${semanticColors?.base?.iconSecondary};
+        color: ${semanticColors?.base?.ornamentPrimary};
         padding: ${(spaces?.xs ?? 6) - 1}px ${spaces?.l}px;
 
         &:hover {
@@ -47,3 +53,19 @@ export const StyledSegmentedControl = styled(ToggleButtonGroup, {
     `;
   }}
 `;
+
+export const StyledToggleButton = styled(ToggleButton, {
+  shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
+})`
+  ${(props: ToggleButtonProps & CommonThemeProps) => {
+    const { disabled } = props;
+
+    const semanticColors = getSemanticColors(props);
+
+    return `
+      svg {
+        color: ${disabled ? semanticColors?.base?.ornamentDisabled : "currentColor"};
+      }
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Table/__storybook__/stories/default.tsx b/packages/components/src/core/Table/__storybook__/stories/default.tsx
index ad2a7ef9e..93f996fc3 100644
--- a/packages/components/src/core/Table/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Table/__storybook__/stories/default.tsx
@@ -32,7 +32,7 @@ export const Table = (props: Args): JSX.Element => {
         <TableRow>
           <CellComponent verticalAlign="center" horizontalAlign="center">
             <StyledIconCell>
-              <Icon sdsSize="xl" sdsIcon="Flask" sdsType="static" />
+              <Icon sdsSize="xl" sdsIcon="Flask" />
               <Tag
                 color="info"
                 label="Chemistry"
@@ -76,7 +76,7 @@ export const Table = (props: Args): JSX.Element => {
         <TableRow>
           <CellComponent verticalAlign="center" horizontalAlign="center">
             <StyledIconCell>
-              <Icon sdsSize="xl" sdsIcon="Download" sdsType="static" />
+              <Icon sdsSize="xl" sdsIcon="Download" />
               <Tag
                 color="info"
                 label="Downloadable Content"
@@ -124,7 +124,7 @@ export const Table = (props: Args): JSX.Element => {
         >
           <CellComponent verticalAlign="center" horizontalAlign="center">
             <StyledIconCell>
-              <Icon sdsSize="xl" sdsIcon="Bacteria" sdsType="static" />
+              <Icon sdsSize="xl" sdsIcon="Virus" />
               <Tag
                 color="negative"
                 label="Disease"
@@ -147,7 +147,7 @@ export const Table = (props: Args): JSX.Element => {
             verticalAlign="center"
           />
           <CellComponent verticalAlign="center">
-            <Icon sdsSize="l" sdsIcon="Virus" sdsType="static" />
+            <Icon sdsSize="l" sdsIcon="Bacteria" />
           </CellComponent>
           <CellBasic
             primaryText="0.4"
diff --git a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
index 9e50be574..b7d8fab95 100644
--- a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
       class="css-fitsu2"
     >
       <th
-        class="css-r3ynn5"
+        class="css-13v2ecb"
       >
         <div
           class="css-187gjam"
@@ -22,7 +22,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-1szfosj"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -35,7 +35,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tlyfhc-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-136pauu-MuiSvgIcon-root"
               data-file-name="IconChevronDownSmall"
               data-testid="IconChevronDownSmall"
               fillcontrast="white"
@@ -48,7 +48,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-1szfosj"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -61,7 +61,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tlyfhc-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
               data-file-name="IconChevronDownSmall"
               data-testid="IconChevronDownSmall"
               fillcontrast="white"
@@ -74,7 +74,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-1szfosj"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -85,7 +85,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-1s2bcfv"
+        class="css-148k9j7"
       >
         <div
           class="css-wg04tn"
@@ -112,7 +112,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
               data-file-name="IconFlaskLarge"
               data-testid="IconFlaskLarge"
               fillcontrast="white"
@@ -277,7 +277,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
               data-file-name="IconDownloadLarge"
               data-testid="IconDownloadLarge"
               fillcontrast="white"
@@ -495,7 +495,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
       </td>
     </tr>
     <tr
-      class="css-1gmh0ks"
+      class="css-9fq7hl"
       data-mui-internal-clone-element="true"
       disabled=""
       tabindex="0"
@@ -511,9 +511,9 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
-              data-file-name="IconBacteriaLarge"
-              data-testid="IconBacteriaLarge"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
+              data-file-name="IconVirusLarge"
+              data-testid="IconVirusLarge"
               fillcontrast="white"
               focusable="false"
               height="24"
@@ -592,9 +592,9 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
-            data-file-name="IconVirusLarge"
-            data-testid="IconVirusLarge"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
+            data-file-name="IconBacteriaLarge"
+            data-testid="IconBacteriaLarge"
             fillcontrast="white"
             focusable="false"
             height="24"
diff --git a/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
index b9f814ec3..586c8390d 100644
--- a/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
       class="css-fitsu2"
     >
       <th
-        class="css-1szfosj"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -22,7 +22,7 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tlyfhc-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-136pauu-MuiSvgIcon-root"
               data-file-name="IconChevronDownSmall"
               data-testid="IconChevronDownSmall"
               fillcontrast="white"
@@ -35,7 +35,7 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-1szfosj"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -48,7 +48,7 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tlyfhc-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
               data-file-name="IconChevronDownSmall"
               data-testid="IconChevronDownSmall"
               fillcontrast="white"
@@ -61,7 +61,7 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-1szfosj"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -74,7 +74,7 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tlyfhc-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
               data-file-name="IconChevronDownSmall"
               data-testid="IconChevronDownSmall"
               fillcontrast="white"
diff --git a/packages/components/src/core/TableRow/style.ts b/packages/components/src/core/TableRow/style.ts
index 66adf0c03..b9e435ba8 100644
--- a/packages/components/src/core/TableRow/style.ts
+++ b/packages/components/src/core/TableRow/style.ts
@@ -5,7 +5,6 @@ import {
   focusVisibleA11yStyle,
   fontHeaderS,
   getBorders,
-  getMode,
   getSemanticColors,
 } from "src/core/styles";
 
@@ -31,16 +30,14 @@ const doNotForwardProps = [
 
 const disabledStyled = (props: RowExtraProps) => {
   const semanticColors = getSemanticColors(props);
-  const mode = getMode(props);
 
   return `
-    // eslint-disable-next-line sonarjs/no-all-duplicated-branches
-    background-color: ${mode === "light" ? semanticColors?.base?.surfaceSecondary : semanticColors?.base?.surfacePrimary};
+    background-color: ${semanticColors?.base?.backgroundSecondary};
     color: ${semanticColors?.base?.textDisabled};
     user-select: none;
 
     &:hover {
-      background-color: ${mode === "light" ? semanticColors?.base?.surfaceSecondary : semanticColors?.base?.surfacePrimary};
+      background-color: ${semanticColors?.base?.backgroundSecondary};
       color: ${semanticColors?.base?.textDisabled};
     }
 
@@ -52,13 +49,21 @@ const disabledStyled = (props: RowExtraProps) => {
       color: ${semanticColors?.base?.textDisabled};
       pointer-events: none;
       user-select: none;
-      & span, & div {
+      & div {
         color: ${semanticColors?.base?.textDisabled};
-        background-color: ${mode === "light" ? semanticColors?.base?.surfaceSecondary : semanticColors?.base?.surfacePrimary};
+        background-color: ${semanticColors?.base?.backgroundSecondary};
+      }
+
+      & .MuiChip-root {
+        background-color: ${semanticColors?.base?.fillDisabled};
+
+        & span {
+          color: ${semanticColors?.base?.textDisabled} !important;
+        }
       }
 
       svg {
-        fill: ${semanticColors?.base?.iconDisabled};
+        fill: ${semanticColors?.base?.ornamentDisabled};
       }
 
       filter: grayscale(100%);
diff --git a/packages/components/src/core/Tag/__storybook__/constants.tsx b/packages/components/src/core/Tag/__storybook__/constants.tsx
index 061ff4f94..9b3b6b2c8 100644
--- a/packages/components/src/core/Tag/__storybook__/constants.tsx
+++ b/packages/components/src/core/Tag/__storybook__/constants.tsx
@@ -87,7 +87,7 @@ export const TAG_MID_LABEL_STYLES = {
 
 export const TAG_SCREENSHOT_ICON_OPTIONS = [
   undefined,
-  <Icon sdsSize="l" sdsIcon="CheckCircle" key="CheckCircle" sdsType="button" />,
+  <Icon sdsSize="l" sdsIcon="CheckCircle" key="CheckCircle" />,
 ];
 
 export const TAG_HOVER_OPTIONS = [true, false];
diff --git a/packages/components/src/core/Tag/__storybook__/stories/default.tsx b/packages/components/src/core/Tag/__storybook__/stories/default.tsx
index f6558c0a4..be0ba07d7 100644
--- a/packages/components/src/core/Tag/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Tag/__storybook__/stories/default.tsx
@@ -9,11 +9,7 @@ export const Tag = (props: Args): JSX.Element => {
 
   const finalIcon =
     typeof icon === "string" ? (
-      <Icon
-        sdsSize={sdsSize}
-        sdsIcon={icon as keyof IconNameToSizes}
-        sdsType="static"
-      />
+      <Icon sdsSize={sdsSize} sdsIcon={icon as keyof IconNameToSizes} />
     ) : (
       icon
     );
diff --git a/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx b/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx
index 2a90ecfb9..3a20df8f8 100644
--- a/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx
+++ b/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx
@@ -5,7 +5,7 @@ const TagNameSpaceTest = (props: TagProps) => {
   return (
     <Tag
       color="beta"
-      icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+      icon={<Icon sdsIcon="Download" sdsSize="l" />}
       label="Label"
       sdsStyle="rounded"
       sdsType="primary"
diff --git a/packages/components/src/core/Tag/style.ts b/packages/components/src/core/Tag/style.ts
index 7f462141c..bc5976e4c 100644
--- a/packages/components/src/core/Tag/style.ts
+++ b/packages/components/src/core/Tag/style.ts
@@ -64,7 +64,7 @@ const tagSizeS = (props: ExtraTagProps): SerializedStyles => {
 
     .MuiChip-deleteIcon {
       ${fontHeaderXs(props)}
-      color: ${semanticColors?.base?.iconPrimaryInverse};
+      color: ${semanticColors?.base?.ornamentPrimaryInverse};
       margin: 0 0 0 ${spaces?.xxs}px;
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
@@ -94,7 +94,7 @@ const tagSizeL = (props: ExtraTagProps): SerializedStyles => {
 
     .MuiChip-deleteIcon {
       ${fontHeaderXs(props)}
-      color: ${semanticColors?.base?.iconPrimaryInverse};
+      color: ${semanticColors?.base?.ornamentPrimaryInverse};
       margin: 0 0 0 ${spaces?.xxs}px;
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
@@ -183,20 +183,16 @@ function generatePrimaryTagColors(
           ? darken(colors[1], 0.15)
           : semanticColors?.[intent].fillHover,
       iconColor:
-        colors.length > 2
-          ? colors[2]
-          : semanticColors?.base?.iconPrimaryInverse,
-      label: colors.length
-        ? colors[0]
-        : semanticColors?.base?.textPrimaryInverse,
+        colors.length > 2 ? colors[2] : semanticColors?.base?.ornamentOnFill,
+      label: colors.length ? colors[0] : semanticColors?.base?.textOnFill,
     };
   } else {
     return {
       background: semanticColors?.neutral.fillPrimary,
       backgroundClicked: semanticColors?.neutral.fillPressed,
       backgroundHover: semanticColors?.neutral.fillHover,
-      iconColor: semanticColors?.base?.iconPrimaryInverse,
-      label: semanticColors?.base?.textPrimaryInverse,
+      iconColor: semanticColors?.base?.ornamentOnFill,
+      label: semanticColors?.base?.textOnFill,
     };
   }
 }
@@ -226,7 +222,7 @@ function generateSecondaryTagColors(
     };
   } else {
     return {
-      background: semanticColors?.neutral.surfacePrimary,
+      background: semanticColors?.neutral.fillSecondary,
       backgroundClicked: semanticColors?.neutral.fillPressed,
       backgroundHover: semanticColors?.neutral.fillHover,
       iconColor: semanticColors?.neutral.ornament,
@@ -272,7 +268,7 @@ function createTypeCss(
       }
 
       svg {
-        fill: ${semanticColors?.base?.iconPrimaryInverse};
+        fill: ${semanticColors?.base?.ornamentPrimaryInverse};
       }
     }
 
diff --git a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
index a6c2f1c1e..c90864989 100644
--- a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
 >
   <div>
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1getf6h-MuiButtonBase-root-MuiButton-root"
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1ys8luo-MuiButtonBase-root-MuiButton-root"
       disabled=""
       tabindex="-1"
       type="button"
@@ -16,7 +16,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
   </div>
   <div>
     <div
-      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-18jn3px-MuiButtonBase-root-MuiChip-root"
+      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-qvzi10-MuiButtonBase-root-MuiChip-root"
       role="none presentation"
       tabindex="0"
     >
@@ -37,7 +37,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
             data-file-name="IconXMarkSmall"
             data-testid="IconXMarkSmall"
             fillcontrast="white"
diff --git a/packages/components/src/core/TagFilter/style.ts b/packages/components/src/core/TagFilter/style.ts
index c15dde065..6e86d9ba5 100644
--- a/packages/components/src/core/TagFilter/style.ts
+++ b/packages/components/src/core/TagFilter/style.ts
@@ -26,21 +26,9 @@ export const StyledTag = styled(Tag)`
       padding: ${spaces?.xxs}px ${spaces?.s}px;
       background-color: ${semanticColors?.accent?.fillPrimary};
 
-      &:hover,
-      &:focus {
-        background-color: ${semanticColors?.accent?.fillHover};
-      }
-
-      &:active {
-        background-color: ${semanticColors?.accent?.fillPressed};
-      }
-
-      &:after {
-        display: none;
-      }
-
       .MuiChip-label {
         ${fontHeaderXs(props)}
+        z-index: auto;
       }
 
       .MuiChip-deleteIcon {
@@ -55,10 +43,31 @@ export const StyledTag = styled(Tag)`
         height: ${iconSizes?.xs?.height}px !important;
       }
 
-      .MuiChip-label,
       svg {
         z-index: auto;
       }
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background-color: ${semanticColors?.accent?.fillHover};
+
+        .MuiChip-label {
+          color: ${semanticColors?.base?.textPrimaryInverse} !important;
+        }
+
+        .MuiChip-deleteIcon svg {
+          fill: ${semanticColors?.base?.ornamentPrimaryInverse} !important;
+        }
+      }
+
+      &:active {
+        background-color: ${semanticColors?.accent?.fillPressed};
+      }
+
+      &:after {
+        display: none;
+      }
     `;
   }}
 `;
diff --git a/packages/components/src/core/Tooltip/__storybook__/constants.ts b/packages/components/src/core/Tooltip/__storybook__/constants.ts
index 09f4b1c13..a3621f23a 100644
--- a/packages/components/src/core/Tooltip/__storybook__/constants.ts
+++ b/packages/components/src/core/Tooltip/__storybook__/constants.ts
@@ -21,7 +21,7 @@ export const TOOLTIP_PLACEMENT_STYLES = {
   display: "grid",
   gridColumnGap: "50px",
   gridRowGap: "50px",
-  gridTemplateColumns: "repeat(3, 130px",
+  gridTemplateColumns: "repeat(3, 130px)",
   gridTemplateRows: "repeat(5, 60px)",
   justifyContent: "center",
   padding: "100px",
@@ -33,7 +33,7 @@ export const TOOLTIP_SUBTITLE_OPTIONS = [
   undefined,
 ];
 export const TOOLTIP_ARROW_OPTIONS = [true];
-export const TOOLTIP_ARROW_OFFSET_OPTIONS = [undefined, -120, -60, 0, 60, 120];
+export const TOOLTIP_ARROW_OFFSET_OPTIONS = [undefined, -112, -60, 0, 60, 112];
 export const TOOLTIP_WIDTH_OPTIONS: TooltipExtraProps["width"][] = [
   "default",
   "wide",
diff --git a/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx b/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx
index 87507a4af..73e5e02eb 100644
--- a/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx
+++ b/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx
@@ -11,6 +11,9 @@ export default {
     arrowOffset: {
       control: { type: "number" },
     },
+    hasInvertedStyle: {
+      control: { type: "boolean" },
+    },
     placement: {
       control: { type: "select" },
       options: [
@@ -28,10 +31,6 @@ export default {
         "top-end",
       ],
     },
-    sdsStyle: {
-      control: { type: "radio" },
-      options: ["dark", "light"],
-    },
     title: {
       control: { type: "text" },
     },
@@ -54,7 +53,6 @@ export default {
 export const Default = {
   args: {
     placement: "top",
-    sdsStyle: "dark",
     subtitle: "dolor sit amet",
     title: "Lorem ipsum",
     width: "default",
diff --git a/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
index 83f66d1a3..94fe7d814 100644
--- a/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<Tooltip /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconExclamationMarkCircleLarge"
           data-testid="IconExclamationMarkCircleLarge"
           fillcontrast="white"
diff --git a/packages/components/src/core/Tooltip/index.tsx b/packages/components/src/core/Tooltip/index.tsx
index 24635d0b0..15dc60d3b 100644
--- a/packages/components/src/core/Tooltip/index.tsx
+++ b/packages/components/src/core/Tooltip/index.tsx
@@ -35,8 +35,9 @@ const Tooltip = forwardRef(function Tooltip(
   const {
     arrowOffset,
     classes,
+    hasInvertedStyle = true,
     inverted,
-    sdsStyle = "light",
+    sdsStyle = "dark",
     subtitle,
     title,
     width = "default",
@@ -46,26 +47,21 @@ const Tooltip = forwardRef(function Tooltip(
 
   const { children } = rest;
 
-  if (inverted) {
-    showWarningIfFirstOccurence(SDSWarningTypes.TooltipInverted);
+  if (inverted || sdsStyle) {
+    showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
   }
 
-  if (width === "wide" && sdsStyle === "dark") {
+  if (width === "wide" && (sdsStyle === "dark" || hasInvertedStyle)) {
     showWarningIfFirstOccurence(SDSWarningTypes.TooltipWidth);
   }
 
-  if (subtitle && sdsStyle === "light") {
-    showWarningIfFirstOccurence(SDSWarningTypes.TooltipSubtitle);
-  }
-
   const theme = useTheme();
 
   const extraProps = {
     /* stylelint-disable property-no-unknown -- false positive */
     arrowOffset,
     classes,
-    inverted,
-    sdsStyle,
+    hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
     theme,
     width,
     /* stylelint-enable property-no-unknown -- false positive */
@@ -90,11 +86,14 @@ const Tooltip = forwardRef(function Tooltip(
   const content = (
     <>
       {title}
-      {sdsStyle === "dark" && subtitle && <Subtitle>{subtitle}</Subtitle>}
+      {subtitle && (
+        <Subtitle hasInvertedStyle={hasInvertedStyle}>{subtitle}</Subtitle>
+      )}
     </>
   );
 
-  const leaveDelay = inverted || sdsStyle === "dark" ? 0 : 500;
+  const leaveDelay =
+    hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
 
   return (
     <RawTooltip
@@ -115,6 +114,26 @@ const Tooltip = forwardRef(function Tooltip(
   );
 });
 
+/**
+ * (masoudmanson): Temporary function to handle the inversion of the tooltip
+ * based on the sdsStyle, invert and hasInvertedStyle props.
+ * Once the sdsStyle and invert props are completely removed,
+ * this function will be removed as well.
+ */
+function invertStyleValue(
+  inverted: boolean | undefined,
+  sdsStyle: "light" | "dark" | undefined,
+  hasInvertedStyle: boolean | undefined
+) {
+  return hasInvertedStyle !== undefined
+    ? hasInvertedStyle
+    : sdsStyle === "dark"
+      ? true
+      : sdsStyle === "light"
+        ? false
+        : inverted;
+}
+
 function mergeClass({
   props,
   className,
diff --git a/packages/components/src/core/Tooltip/style.ts b/packages/components/src/core/Tooltip/style.ts
index de3a2eab2..9aa427932 100644
--- a/packages/components/src/core/Tooltip/style.ts
+++ b/packages/components/src/core/Tooltip/style.ts
@@ -15,8 +15,11 @@ export interface TooltipExtraProps extends CommonThemeProps {
   // TODO(185930): remove custom `followCursor` prop when we upgrade to MUIv5
   arrowOffset?: number;
   followCursor?: boolean;
+  // @deprecated Use `hasInvertedStyle` instead
   inverted?: boolean;
+  // @deprecated Use `hasInvertedStyle` instead
   sdsStyle?: "dark" | "light";
+  hasInvertedStyle?: boolean;
   subtitle?: string;
   width?: "default" | "wide";
 }
@@ -27,7 +30,7 @@ const dark = (props: TooltipExtraProps): string => {
 
   return css`
     ${fontHeaderXs(props)}
-    background-color: ${semanticColors?.base?.surfacePrimaryInverse};
+    background-color: ${semanticColors?.base?.surfaceInverse};
     color: ${semanticColors?.base?.textPrimaryInverse};
     text-align: center;
     max-width: 250px;
@@ -41,7 +44,7 @@ const light = (props: TooltipExtraProps): string => {
 
   return css`
     ${fontBodyXs(props)}
-    background-color: ${semanticColors?.base?.surfacePrimary};
+    background-color: ${semanticColors?.base?.surface};
     color: ${semanticColors?.base?.textPrimary};
     text-align: left;
     max-width: 250px;
@@ -67,16 +70,24 @@ export const Subtitle = styled("div")`
   ${fontBodyXxs}
 
   ${(props: TooltipExtraProps) => {
+    const { hasInvertedStyle } = props;
+
     const semanticColors = getSemanticColors(props);
 
     return `
-      color: ${semanticColors?.base?.textSecondaryInverse};
+      color: ${hasInvertedStyle ? semanticColors?.base?.textSecondaryInverse : semanticColors?.base?.textSecondary};
     `;
   }}
 `;
 
 export const tooltipCss = (props: TooltipExtraProps): string => {
-  const { inverted, sdsStyle, width, followCursor } = props;
+  const {
+    hasInvertedStyle = true,
+    inverted,
+    sdsStyle,
+    width,
+    followCursor,
+  } = props;
 
   const shadows = getShadows(props);
 
@@ -84,7 +95,9 @@ export const tooltipCss = (props: TooltipExtraProps): string => {
     &.MuiTooltip-tooltip {
       box-shadow: ${shadows?.m};
 
-      ${sdsStyle === "dark" || inverted ? dark(props) : light(props)}
+      ${sdsStyle === "dark" || inverted || hasInvertedStyle
+        ? dark(props)
+        : light(props)}
       ${width === "wide" && sdsStyle === "light" && wide()}
 
       ${followCursor === true && tableStyles(props)}
@@ -93,7 +106,7 @@ export const tooltipCss = (props: TooltipExtraProps): string => {
 };
 
 export const arrowCss = (props: TooltipExtraProps): string => {
-  const { inverted, sdsStyle, arrowOffset } = props;
+  const { hasInvertedStyle, inverted, sdsStyle, arrowOffset } = props;
 
   const semanticColors = getSemanticColors(props);
 
@@ -101,9 +114,9 @@ export const arrowCss = (props: TooltipExtraProps): string => {
     &.MuiTooltip-arrow {
       /* (bethbertozzi): !important is needed to fight inline style */
       left: ${arrowOffset}px !important;
-      color: ${inverted || sdsStyle === "dark"
-        ? semanticColors?.base?.surfacePrimaryInverse
-        : semanticColors?.base?.surfacePrimary};
+      color: ${hasInvertedStyle || inverted || sdsStyle === "dark"
+        ? semanticColors?.base?.surfaceInverse
+        : semanticColors?.base?.surface};
       &:before {
         box-sizing: border-box;
         width: 12px;
diff --git a/packages/components/src/core/TooltipCondensed/index.tsx b/packages/components/src/core/TooltipCondensed/index.tsx
index 3fdbb5367..d9148405e 100644
--- a/packages/components/src/core/TooltipCondensed/index.tsx
+++ b/packages/components/src/core/TooltipCondensed/index.tsx
@@ -44,6 +44,7 @@ const TooltipCondensed = forwardRef(function TooltipCondensed(
       ref={ref}
       classes={{ tooltip }}
       arrow={false}
+      hasInvertedStyle={false}
     >
       {children}
     </Tooltip>
diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts
index e4c5be205..35ecbecf9 100644
--- a/packages/components/src/core/styles/common/SDSAppTheme.ts
+++ b/packages/components/src/core/styles/common/SDSAppTheme.ts
@@ -50,12 +50,12 @@ const SDSLightThemeColors: Colors = {
   purple: {
     "100": "#efeafe",
     "200": "#e4dbfc",
-    "300": "#cbbaf8",
+    "300": "#cbbaF8",
     "400": "#b296f2",
     "500": "#8b54e2",
     "600": "#6526b5",
     "700": "#490092",
-    "800": "#1a004c",
+    "800": "#26004c",
   },
   red: {
     "100": "#ffe8e6",
@@ -63,17 +63,17 @@ const SDSLightThemeColors: Colors = {
     "300": "#ffafa8",
     "400": "#ff7e78",
     "500": "#db2131",
-    "600": "#980013",
+    "600": "#980017",
     "700": "#6f0008",
     "800": "#340000",
   },
   yellow: {
-    "100": "#ffefcf",
+    "100": "#fff3db",
     "200": "#ffdb97",
     "300": "#ffca5c",
     "400": "#fab700",
     "500": "#da9900",
-    "600": "#b77800",
+    "600": "#b07300",
     "700": "#7c3e00",
     "800": "#541700",
   },
@@ -81,14 +81,14 @@ const SDSLightThemeColors: Colors = {
 
 const SDSDarkThemeColors: Colors = {
   blue: {
-    "100": "#002573",
-    "200": "#0048c5",
-    "300": "#2573f4",
-    "400": "#5b9aff",
-    "500": "#a2c9ff",
-    "600": "#cde3ff",
-    "700": "#e2eeff",
-    "800": "#f7faff",
+    "100": "#0f1d4a",
+    "200": "#0a216e",
+    "300": "#0647b8",
+    "400": "#2573f4",
+    "500": "#5b9aff",
+    "600": "#a2c9ff",
+    "700": "#cde3ff",
+    "800": "#e2eeff",
   },
   gray: {
     "100": "#333333",
@@ -104,44 +104,44 @@ const SDSDarkThemeColors: Colors = {
     "900": "#ffffff",
   },
   green: {
-    "100": "#053918",
-    "200": "#12612e",
-    "300": "#288b49",
-    "400": "#43ae63",
-    "500": "#85d898",
-    "600": "#bcecc5",
-    "700": "#daf4de",
-    "800": "#f7fbf6",
+    "100": "#082608",
+    "200": "#063617",
+    "300": "#10632e",
+    "400": "#278b48",
+    "500": "#4bae68",
+    "600": "#85d898",
+    "700": "#bcecc5",
+    "800": "#daf4de",
   },
   purple: {
-    "100": "#4b0190",
-    "200": "#6b2ebc",
-    "300": "#905de6",
-    "400": "#aa89ef",
-    "500": "#cebef8",
-    "600": "#e4dcfc",
-    "700": "#f0ebfe",
-    "800": "#fbf9ff",
+    "100": "#331252",
+    "200": "#410f70",
+    "300": "#6429b2",
+    "400": "#905de6",
+    "500": "#aa89ef",
+    "600": "#cebef8",
+    "700": "#e4dcfc",
+    "800": "#f0ebfe",
   },
   red: {
-    "100": "#630008",
-    "200": "#A30000",
-    "300": "#E52722",
-    "400": "#FF695B",
-    "500": "#FF9385",
-    "600": "#FFBDB3",
-    "700": "#FFD8D1",
-    "800": "#FFF1EE",
+    "100": "#330603",
+    "200": "#660a12",
+    "300": "#9e1c1c",
+    "400": "#c73028",
+    "500": "#e05043",
+    "600": "#ff988a",
+    "700": "#ffbdb3",
+    "800": "#ffd8d1",
   },
   yellow: {
-    "100": "#552300",
-    "200": "#834500",
-    "300": "#985a00",
-    "400": "#ac6c00",
-    "500": "#cf8e00",
-    "600": "#efad00",
-    "700": "#ffdc9a",
-    "800": "#fcf2e3",
+    "100": "#361b07",
+    "200": "#52270a",
+    "300": "#965a0b",
+    "400": "#bd8804",
+    "500": "#d9a943",
+    "600": "#e5bc63",
+    "700": "#f5d789",
+    "800": "#ffe6a8",
   },
 };
 
@@ -734,73 +734,136 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
  */
 export const makeSdsSemanticAppTheme = (colors: Colors): AppTheme => ({
   ...sharedAppTheme,
-  // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
-  // applications to override those colors using their own custom theme.
-  // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
-  // we allow other apps to specify their colors once, and have them apply
-  // throughout the application, such as in borders, etc without having to manually
-  // override every theme property that makes use of colors.
-  borders: {
-    accent: {
-      default: `1px solid ${colors.blue[500]}`,
-      focused: `1px solid ${colors.blue[500]}`,
-      hover: `1px solid ${colors.blue[600]}`,
-      open: `1px solid ${colors.blue[500]}`,
-      pressed: `1px solid ${colors.blue[700]}`,
-      selected: `1px solid ${colors.blue[500]}`,
-    },
-    base: {
-      default: `1px solid ${colors.gray[500]}`,
-      disabled: `1px solid ${colors.gray[300]}`,
-      divider: `1px solid ${colors.gray[200]}`,
-      hover: `1px solid ${colors.gray[900]}`,
-      pressed: `1px solid ${colors.gray[900]}`,
-      table: `1px solid ${colors.gray[300]}`,
-    },
-    beta: {
-      default: `1px solid ${colors.purple[600]}`,
-      extraThick: `4px solid ${colors.purple[600]}`,
-      thick: `2px solid ${colors.purple[600]}`,
-    },
-    info: {
-      default: `1px solid ${colors.blue[600]}`,
-      extraThick: `4px solid ${colors.blue[600]}`,
-      thick: `2px solid ${colors.blue[600]}`,
-    },
-    link: {
-      dashed: `1px dashed`,
-      solid: `1px solid`,
-    },
-    negative: {
-      default: `1px solid ${colors.red[600]}`,
-      extraThick: `4px solid ${colors.red[600]}`,
-      thick: `2px solid ${colors.red[600]}`,
-    },
-    neutral: {
-      default: `1px solid ${colors.gray[500]}`,
-      extraThick: `4px solid ${colors.gray[500]}`,
-      thick: `2px solid ${colors.gray[500]}`,
-    },
-    none: "none",
-    notice: {
-      default: `1px solid ${colors.yellow[600]}`,
-      extraThick: `4px solid ${colors.yellow[600]}`,
-      thick: `2px solid ${colors.yellow[600]}`,
-    },
-    positive: {
-      default: `1px solid ${colors.green[600]}`,
-      extraThick: `4px solid ${colors.green[600]}`,
-      thick: `2px solid ${colors.green[600]}`,
-    },
-  },
   colors,
 });
 
 export const SDSLightAppTheme: AppTheme =
   makeSdsSemanticAppTheme(SDSLightThemeColors);
+
 export const SDSDarkAppTheme: AppTheme =
   makeSdsSemanticAppTheme(SDSDarkThemeColors);
 
+// (mlila) whenever our theme uses colors, we need to make sure we allow consuming
+// applications to override those colors using their own custom theme.
+// By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
+// we allow other apps to specify their colors once, and have them apply
+// throughout the application, such as in borders, etc without having to manually
+// override every theme property that makes use of colors.
+//
+// (masoudmanson): We need to define borders separately for light and dark themes
+// because the border colors are different for each theme.
+SDSLightAppTheme.borders = {
+  accent: {
+    default: `1px solid ${SDSLightThemeColors.blue[500]}`,
+    focused: `1px solid ${SDSLightThemeColors.blue[500]}`,
+    hover: `1px solid ${SDSLightThemeColors.blue[600]}`,
+    open: `1px solid ${SDSLightThemeColors.blue[500]}`,
+    pressed: `1px solid ${SDSLightThemeColors.blue[700]}`,
+    selected: `1px solid ${SDSLightThemeColors.blue[500]}`,
+  },
+  base: {
+    default: `1px solid ${SDSLightThemeColors.gray[500]}`,
+    disabled: `1px solid ${SDSLightThemeColors.gray[300]}`,
+    divider: `1px solid ${SDSLightThemeColors.gray[200]}`,
+    dividerInverse: `1px solid ${SDSLightThemeColors.gray[600]}`,
+    hover: `1px solid ${SDSLightThemeColors.gray[900]}`,
+    inverse: `1px solid ${SDSLightThemeColors.gray[50]}`,
+    pressed: `1px solid ${SDSLightThemeColors.gray[900]}`,
+    table: `1px solid ${SDSLightThemeColors.gray[300]}`,
+  },
+  beta: {
+    default: `1px solid ${SDSLightThemeColors.purple[600]}`,
+    extraThick: `4px solid ${SDSLightThemeColors.purple[600]}`,
+    thick: `2px solid ${SDSLightThemeColors.purple[600]}`,
+  },
+  info: {
+    default: `1px solid ${SDSLightThemeColors.blue[600]}`,
+    extraThick: `4px solid ${SDSLightThemeColors.blue[600]}`,
+    thick: `2px solid ${SDSLightThemeColors.blue[600]}`,
+  },
+  link: {
+    dashed: `1px dashed`,
+    solid: `1px solid`,
+  },
+  negative: {
+    default: `1px solid ${SDSLightThemeColors.red[600]}`,
+    extraThick: `4px solid ${SDSLightThemeColors.red[600]}`,
+    thick: `2px solid ${SDSLightThemeColors.red[600]}`,
+  },
+  neutral: {
+    default: `1px solid ${SDSLightThemeColors.gray[500]}`,
+    extraThick: `4px solid ${SDSLightThemeColors.gray[500]}`,
+    thick: `2px solid ${SDSLightThemeColors.gray[500]}`,
+  },
+  none: "none",
+  notice: {
+    default: `1px solid ${SDSLightThemeColors.yellow[600]}`,
+    extraThick: `4px solid ${SDSLightThemeColors.yellow[600]}`,
+    thick: `2px solid ${SDSLightThemeColors.yellow[600]}`,
+  },
+  positive: {
+    default: `1px solid ${SDSLightThemeColors.green[600]}`,
+    extraThick: `4px solid ${SDSLightThemeColors.green[600]}`,
+    thick: `2px solid ${SDSLightThemeColors.green[600]}`,
+  },
+};
+
+SDSDarkAppTheme.borders = {
+  accent: {
+    default: `1px solid ${SDSDarkThemeColors.blue[600]}`,
+    focused: `1px solid ${SDSDarkThemeColors.blue[600]}`,
+    hover: `1px solid ${SDSDarkThemeColors.blue[700]}`,
+    open: `1px solid ${SDSDarkThemeColors.blue[600]}`,
+    pressed: `1px solid ${SDSDarkThemeColors.blue[800]}`,
+    selected: `1px solid ${SDSDarkThemeColors.blue[600]}`,
+  },
+  base: {
+    default: `1px solid ${SDSDarkThemeColors.gray[500]}`,
+    disabled: `1px solid ${SDSDarkThemeColors.gray[300]}`,
+    divider: `1px solid ${SDSDarkThemeColors.gray[200]}`,
+    dividerInverse: `1px solid ${SDSDarkThemeColors.gray[600]}`,
+    hover: `1px solid ${SDSDarkThemeColors.gray[900]}`,
+    inverse: `1px solid ${SDSDarkThemeColors.gray[50]}`,
+    pressed: `1px solid ${SDSDarkThemeColors.gray[900]}`,
+    table: `1px solid ${SDSDarkThemeColors.gray[300]}`,
+  },
+  beta: {
+    default: `1px solid ${SDSDarkThemeColors.purple[600]}`,
+    extraThick: `4px solid ${SDSDarkThemeColors.purple[600]}`,
+    thick: `2px solid ${SDSDarkThemeColors.purple[600]}`,
+  },
+  info: {
+    default: `1px solid ${SDSDarkThemeColors.blue[600]}`,
+    extraThick: `4px solid ${SDSDarkThemeColors.blue[600]}`,
+    thick: `2px solid ${SDSDarkThemeColors.blue[600]}`,
+  },
+  link: {
+    dashed: `1px dashed`,
+    solid: `1px solid`,
+  },
+  negative: {
+    default: `1px solid ${SDSDarkThemeColors.red[600]}`,
+    extraThick: `4px solid ${SDSDarkThemeColors.red[600]}`,
+    thick: `2px solid ${SDSDarkThemeColors.red[600]}`,
+  },
+  neutral: {
+    default: `1px solid ${SDSDarkThemeColors.gray[500]}`,
+    extraThick: `4px solid ${SDSDarkThemeColors.gray[500]}`,
+    thick: `2px solid ${SDSDarkThemeColors.gray[500]}`,
+  },
+  none: "none",
+  notice: {
+    default: `1px solid ${SDSDarkThemeColors.yellow[600]}`,
+    extraThick: `4px solid ${SDSDarkThemeColors.yellow[600]}`,
+    thick: `2px solid ${SDSDarkThemeColors.yellow[600]}`,
+  },
+  positive: {
+    default: `1px solid ${SDSDarkThemeColors.green[600]}`,
+    extraThick: `4px solid ${SDSDarkThemeColors.green[600]}`,
+    thick: `2px solid ${SDSDarkThemeColors.green[600]}`,
+  },
+};
+
 /**
  * Helper function to select the appropriate theme settings.
  *
diff --git a/packages/components/src/core/styles/common/makeThemeOptions.ts b/packages/components/src/core/styles/common/makeThemeOptions.ts
index 9569887dd..b3fe6090d 100644
--- a/packages/components/src/core/styles/common/makeThemeOptions.ts
+++ b/packages/components/src/core/styles/common/makeThemeOptions.ts
@@ -1,7 +1,7 @@
 import { PaletteMode } from "@mui/material";
-import { AppTheme, SDSThemeOptions } from "./types";
+import { AppTheme, SDSPalette, SDSThemeOptions } from "./types";
 
-const SDSPaletteLight = (appTheme: AppTheme) => {
+export const SDSPaletteLight = (appTheme: AppTheme): SDSPalette => {
   return {
     accent: {
       border: appTheme.colors.blue[500],
@@ -13,25 +13,32 @@ const SDSPaletteLight = (appTheme: AppTheme) => {
       fillHover: appTheme.colors.blue[600],
       fillPressed: appTheme.colors.blue[700],
       fillPrimary: appTheme.colors.blue[500],
-      icon: appTheme.colors.blue[500],
-      iconFocus: appTheme.colors.blue[500],
-      iconHover: appTheme.colors.blue[600],
-      iconOpen: appTheme.colors.blue[500],
-      iconPressed: appTheme.colors.blue[700],
-      iconSelected: appTheme.colors.blue[500],
-      surfacePrimary: appTheme.colors.blue[100],
-      surfaceSecondary: appTheme.colors.blue[500],
+      ornament: appTheme.colors.blue[500],
+      ornamentFocus: appTheme.colors.blue[500],
+      ornamentHover: appTheme.colors.blue[600],
+      ornamentOpen: appTheme.colors.blue[500],
+      ornamentPressed: appTheme.colors.blue[700],
+      ornamentSelected: appTheme.colors.blue[500],
+      surfacePrimary: appTheme.colors.blue[500],
+      surfaceSecondary: appTheme.colors.blue[100],
       textAction: appTheme.colors.blue[500],
       textActionHover: appTheme.colors.blue[600],
       textActionPressed: appTheme.colors.blue[700],
     },
     base: {
-      border: appTheme.colors.gray[500],
+      backgroundPrimary: appTheme.colors.gray[50]!,
+      backgroundPrimaryInverse: appTheme.colors.gray[900]!,
+      backgroundSecondary: appTheme.colors.gray[100],
+      backgroundSecondaryInverse: appTheme.colors.gray[700],
+      backgroundTertiary: appTheme.colors.gray[200],
+      border: appTheme.colors.gray[600],
       borderDisabled: appTheme.colors.gray[300],
       borderHover: appTheme.colors.gray[900]!,
+      borderInverse: appTheme.colors.gray[50]!,
       borderPressed: appTheme.colors.gray[900]!,
       borderTable: appTheme.colors.gray[300],
       divider: appTheme.colors.gray[200],
+      dividerInverse: appTheme.colors.gray[600],
       fillDisabled: appTheme.colors.gray[200],
       /* the number 47 is the opacity of the color, which is equal to 28% */
       fillHover: appTheme.colors.gray[300] + "47",
@@ -39,56 +46,53 @@ const SDSPaletteLight = (appTheme: AppTheme) => {
       fillPressed: appTheme.colors.gray[300] + "47",
       fillPrimary: appTheme.colors.gray[50]!,
       fillSelected: appTheme.colors.gray[900]!,
-      iconDisabled: appTheme.colors.gray[300],
-      iconPrimary: appTheme.colors.gray[500],
-      iconPrimaryHover: appTheme.colors.gray[900]!,
-      iconPrimaryInverse: appTheme.colors.gray[50]!,
-      iconPrimaryInverseHover: appTheme.colors.gray[400],
-      iconPrimaryInversePressed: appTheme.colors.gray[400],
-      iconPrimaryPressed: appTheme.colors.gray[900]!,
-      iconSecondary: appTheme.colors.gray[900]!,
-      surfaceBackground: appTheme.colors.gray[50]!,
-      surfacePrimary: appTheme.colors.gray[50]!,
-      surfacePrimaryInverse: appTheme.colors.gray[900]!,
-      surfaceSecondary: appTheme.colors.gray[100],
-      surfaceTertiary: appTheme.colors.gray[200],
+      ornamentDisabled: appTheme.colors.gray[300],
+      ornamentOnFill: appTheme.colors.gray[50]!,
+      ornamentPrimary: appTheme.colors.gray[900]!,
+      ornamentPrimaryInverse: appTheme.colors.gray[50]!,
+      ornamentSecondary: appTheme.colors.gray[600],
+      ornamentSecondaryHover: appTheme.colors.gray[900]!,
+      ornamentSecondaryPressed: appTheme.colors.gray[900]!,
+      surface: appTheme.colors.gray[50]!,
+      surfaceInverse: appTheme.colors.gray[900]!,
       textDisabled: appTheme.colors.gray[300],
+      textOnFill: appTheme.colors.gray[50]!,
       textPrimary: appTheme.colors.gray[900]!,
       textPrimaryInverse: appTheme.colors.gray[50]!,
       textSecondary: appTheme.colors.gray[600],
       textSecondaryInverse: appTheme.colors.gray[300],
     },
     beta: {
-      border: appTheme.colors.purple[500],
+      border: appTheme.colors.purple[600],
       fillHover: appTheme.colors.purple[600],
       fillPressed: appTheme.colors.purple[700],
       fillPrimary: appTheme.colors.purple[500],
       fillSecondary: appTheme.colors.purple[100],
       ornament: appTheme.colors.purple[600],
-      surfacePrimary: appTheme.colors.purple[100],
-      surfaceSecondary: appTheme.colors.purple[500],
+      surfacePrimary: appTheme.colors.purple[500],
+      surfaceSecondary: appTheme.colors.purple[100],
       text: appTheme.colors.purple[600],
     },
     info: {
-      border: appTheme.colors.blue[500],
+      border: appTheme.colors.blue[600],
       fillHover: appTheme.colors.blue[600],
       fillPressed: appTheme.colors.blue[700],
       fillPrimary: appTheme.colors.blue[500],
       fillSecondary: appTheme.colors.blue[100],
       ornament: appTheme.colors.blue[600],
-      surfacePrimary: appTheme.colors.blue[100],
-      surfaceSecondary: appTheme.colors.blue[500],
+      surfacePrimary: appTheme.colors.blue[500],
+      surfaceSecondary: appTheme.colors.blue[100],
       text: appTheme.colors.blue[600],
     },
     negative: {
-      border: appTheme.colors.red[500],
+      border: appTheme.colors.red[600],
       fillHover: appTheme.colors.red[600],
       fillPressed: appTheme.colors.red[700],
       fillPrimary: appTheme.colors.red[500],
       fillSecondary: appTheme.colors.red[100],
       ornament: appTheme.colors.red[600],
-      surfacePrimary: appTheme.colors.red[100],
-      surfaceSecondary: appTheme.colors.red[500],
+      surfacePrimary: appTheme.colors.red[500],
+      surfaceSecondary: appTheme.colors.red[100],
       text: appTheme.colors.red[600],
     },
     neutral: {
@@ -96,68 +100,75 @@ const SDSPaletteLight = (appTheme: AppTheme) => {
       fillHover: appTheme.colors.gray[600],
       fillPressed: appTheme.colors.gray[700],
       fillPrimary: appTheme.colors.gray[500],
-      fillSecondary: appTheme.colors.gray[100],
+      fillSecondary: appTheme.colors.gray[200],
       ornament: appTheme.colors.gray[700],
-      surfacePrimary: appTheme.colors.gray[200],
-      surfaceSecondary: appTheme.colors.gray[500],
+      surfacePrimary: appTheme.colors.gray[500],
+      surfaceSecondary: appTheme.colors.gray[200],
       text: appTheme.colors.gray[700],
     },
     notice: {
-      border: appTheme.colors.yellow[500],
+      border: appTheme.colors.yellow[600],
       fillHover: appTheme.colors.yellow[600],
       fillPressed: appTheme.colors.yellow[700],
       fillPrimary: appTheme.colors.yellow[500],
       fillSecondary: appTheme.colors.yellow[100],
       ornament: appTheme.colors.yellow[600],
-      surfacePrimary: appTheme.colors.yellow[100],
-      surfaceSecondary: appTheme.colors.yellow[500],
+      surfacePrimary: appTheme.colors.yellow[500],
+      surfaceSecondary: appTheme.colors.yellow[100],
       text: appTheme.colors.yellow[600],
     },
     positive: {
-      border: appTheme.colors.green[500],
+      border: appTheme.colors.green[600],
       fillHover: appTheme.colors.green[600],
       fillPressed: appTheme.colors.green[700],
       fillPrimary: appTheme.colors.green[500],
       fillSecondary: appTheme.colors.green[100],
       ornament: appTheme.colors.green[600],
-      surfacePrimary: appTheme.colors.green[100],
-      surfaceSecondary: appTheme.colors.green[500],
+      surfacePrimary: appTheme.colors.green[500],
+      surfaceSecondary: appTheme.colors.green[100],
       text: appTheme.colors.green[600],
     },
   };
 };
 
-const SDSPaletteDark = (appTheme: AppTheme) => {
+export const SDSPaletteDark = (appTheme: AppTheme): SDSPalette => {
   return {
     accent: {
-      border: appTheme.colors.blue[500],
-      borderFocus: appTheme.colors.blue[500],
-      borderHover: appTheme.colors.blue[600],
-      borderOpen: appTheme.colors.blue[500],
-      borderPressed: appTheme.colors.blue[700],
-      borderSelected: appTheme.colors.blue[500],
-      fillHover: appTheme.colors.blue[600],
-      fillPressed: appTheme.colors.blue[700],
-      fillPrimary: appTheme.colors.blue[500],
-      icon: appTheme.colors.blue[500],
-      iconFocus: appTheme.colors.blue[500],
-      iconHover: appTheme.colors.blue[600],
-      iconOpen: appTheme.colors.blue[500],
-      iconPressed: appTheme.colors.blue[700],
-      iconSelected: appTheme.colors.blue[500],
-      surfacePrimary: appTheme.colors.blue[100],
-      surfaceSecondary: appTheme.colors.blue[500],
-      textAction: appTheme.colors.blue[500],
-      textActionHover: appTheme.colors.blue[600],
-      textActionPressed: appTheme.colors.blue[700],
+      border: appTheme.colors.blue[600],
+      borderFocus: appTheme.colors.blue[600],
+      borderHover: appTheme.colors.blue[700],
+      borderOpen: appTheme.colors.blue[600],
+      borderPressed: appTheme.colors.blue[800],
+      borderSelected: appTheme.colors.blue[600],
+      fillHover: appTheme.colors.blue[700],
+      fillPressed: appTheme.colors.blue[800],
+      fillPrimary: appTheme.colors.blue[400],
+      ornament: appTheme.colors.blue[600],
+      ornamentFocus: appTheme.colors.blue[600],
+      ornamentHover: appTheme.colors.blue[700],
+      ornamentOpen: appTheme.colors.blue[600],
+      ornamentPressed: appTheme.colors.blue[800],
+      ornamentSelected: appTheme.colors.blue[600],
+      surfacePrimary: appTheme.colors.blue[400],
+      surfaceSecondary: appTheme.colors.blue[100],
+      textAction: appTheme.colors.blue[600],
+      textActionHover: appTheme.colors.blue[700],
+      textActionPressed: appTheme.colors.blue[800],
     },
     base: {
-      border: appTheme.colors.gray[500],
+      backgroundPrimary: appTheme.colors.gray[75]!,
+      backgroundPrimaryInverse: appTheme.colors.gray[900]!,
+      backgroundSecondary: appTheme.colors.gray[100],
+      backgroundSecondaryInverse: appTheme.colors.gray[700],
+      backgroundTertiary: appTheme.colors.gray[200],
+      border: appTheme.colors.gray[600],
       borderDisabled: appTheme.colors.gray[300],
       borderHover: appTheme.colors.gray[900]!,
+      borderInverse: appTheme.colors.gray[50]!,
       borderPressed: appTheme.colors.gray[900]!,
       borderTable: appTheme.colors.gray[300],
       divider: appTheme.colors.gray[200],
+      dividerInverse: appTheme.colors.gray[600],
       fillDisabled: appTheme.colors.gray[200],
       /* the number 47 is the opacity of the color, which is equal to 28% */
       fillHover: appTheme.colors.gray[300] + "47",
@@ -165,56 +176,53 @@ const SDSPaletteDark = (appTheme: AppTheme) => {
       fillPressed: appTheme.colors.gray[300] + "47",
       fillPrimary: appTheme.colors.gray[100],
       fillSelected: appTheme.colors.gray[900]!,
-      iconDisabled: appTheme.colors.gray[300],
-      iconPrimary: appTheme.colors.gray[500],
-      iconPrimaryHover: appTheme.colors.gray[900]!,
-      iconPrimaryInverse: appTheme.colors.gray[50]!,
-      iconPrimaryInverseHover: appTheme.colors.gray[400],
-      iconPrimaryInversePressed: appTheme.colors.gray[400],
-      iconPrimaryPressed: appTheme.colors.gray[900]!,
-      iconSecondary: appTheme.colors.gray[900]!,
-      surfaceBackground: appTheme.colors.gray[75]!,
-      surfacePrimary: appTheme.colors.gray[100],
-      surfacePrimaryInverse: appTheme.colors.gray[900]!,
-      surfaceSecondary: appTheme.colors.gray[200],
-      surfaceTertiary: appTheme.colors.gray[300],
+      ornamentDisabled: appTheme.colors.gray[300],
+      ornamentOnFill: appTheme.colors.gray[900]!,
+      ornamentPrimary: appTheme.colors.gray[900]!,
+      ornamentPrimaryInverse: appTheme.colors.gray[50]!,
+      ornamentSecondary: appTheme.colors.gray[600],
+      ornamentSecondaryHover: appTheme.colors.gray[900]!,
+      ornamentSecondaryPressed: appTheme.colors.gray[900]!,
+      surface: appTheme.colors.gray[100],
+      surfaceInverse: appTheme.colors.gray[900]!,
       textDisabled: appTheme.colors.gray[300],
+      textOnFill: appTheme.colors.gray[900]!,
       textPrimary: appTheme.colors.gray[900]!,
       textPrimaryInverse: appTheme.colors.gray[50]!,
       textSecondary: appTheme.colors.gray[600],
       textSecondaryInverse: appTheme.colors.gray[300],
     },
     beta: {
-      border: appTheme.colors.purple[500],
-      fillHover: appTheme.colors.purple[600],
-      fillPressed: appTheme.colors.purple[700],
-      fillPrimary: appTheme.colors.purple[500],
+      border: appTheme.colors.purple[600],
+      fillHover: appTheme.colors.purple[700],
+      fillPressed: appTheme.colors.purple[800],
+      fillPrimary: appTheme.colors.purple[400],
       fillSecondary: appTheme.colors.purple[100],
       ornament: appTheme.colors.purple[600],
-      surfacePrimary: appTheme.colors.purple[100],
-      surfaceSecondary: appTheme.colors.purple[500],
+      surfacePrimary: appTheme.colors.purple[400],
+      surfaceSecondary: appTheme.colors.purple[100],
       text: appTheme.colors.purple[600],
     },
     info: {
-      border: appTheme.colors.blue[500],
-      fillHover: appTheme.colors.blue[600],
-      fillPressed: appTheme.colors.blue[700],
-      fillPrimary: appTheme.colors.blue[500],
+      border: appTheme.colors.blue[600],
+      fillHover: appTheme.colors.blue[700],
+      fillPressed: appTheme.colors.blue[800],
+      fillPrimary: appTheme.colors.blue[400],
       fillSecondary: appTheme.colors.blue[100],
       ornament: appTheme.colors.blue[600],
-      surfacePrimary: appTheme.colors.blue[100],
-      surfaceSecondary: appTheme.colors.blue[500],
+      surfacePrimary: appTheme.colors.blue[400],
+      surfaceSecondary: appTheme.colors.blue[100],
       text: appTheme.colors.blue[600],
     },
     negative: {
-      border: appTheme.colors.red[500],
-      fillHover: appTheme.colors.red[600],
-      fillPressed: appTheme.colors.red[700],
-      fillPrimary: appTheme.colors.red[500],
+      border: appTheme.colors.red[600],
+      fillHover: appTheme.colors.red[700],
+      fillPressed: appTheme.colors.red[800],
+      fillPrimary: appTheme.colors.red[400],
       fillSecondary: appTheme.colors.red[100],
       ornament: appTheme.colors.red[600],
-      surfacePrimary: appTheme.colors.red[100],
-      surfaceSecondary: appTheme.colors.red[500],
+      surfacePrimary: appTheme.colors.red[400],
+      surfaceSecondary: appTheme.colors.red[100],
       text: appTheme.colors.red[600],
     },
     neutral: {
@@ -222,32 +230,32 @@ const SDSPaletteDark = (appTheme: AppTheme) => {
       fillHover: appTheme.colors.gray[600],
       fillPressed: appTheme.colors.gray[700],
       fillPrimary: appTheme.colors.gray[500],
-      fillSecondary: appTheme.colors.gray[100],
+      fillSecondary: appTheme.colors.gray[200],
       ornament: appTheme.colors.gray[700],
-      surfacePrimary: appTheme.colors.gray[200],
-      surfaceSecondary: appTheme.colors.gray[500],
+      surfacePrimary: appTheme.colors.gray[500],
+      surfaceSecondary: appTheme.colors.gray[200],
       text: appTheme.colors.gray[700],
     },
     notice: {
-      border: appTheme.colors.yellow[500],
-      fillHover: appTheme.colors.yellow[600],
-      fillPressed: appTheme.colors.yellow[700],
-      fillPrimary: appTheme.colors.yellow[500],
+      border: appTheme.colors.yellow[600],
+      fillHover: appTheme.colors.yellow[700],
+      fillPressed: appTheme.colors.yellow[800],
+      fillPrimary: appTheme.colors.yellow[400],
       fillSecondary: appTheme.colors.yellow[100],
       ornament: appTheme.colors.yellow[600],
-      surfacePrimary: appTheme.colors.yellow[100],
-      surfaceSecondary: appTheme.colors.yellow[500],
-      text: appTheme.colors.yellow[700],
+      surfacePrimary: appTheme.colors.yellow[400],
+      surfaceSecondary: appTheme.colors.yellow[100],
+      text: appTheme.colors.yellow[600],
     },
     positive: {
-      border: appTheme.colors.green[500],
-      fillHover: appTheme.colors.green[600],
-      fillPressed: appTheme.colors.green[700],
-      fillPrimary: appTheme.colors.green[500],
+      border: appTheme.colors.green[600],
+      fillHover: appTheme.colors.green[700],
+      fillPressed: appTheme.colors.green[800],
+      fillPrimary: appTheme.colors.green[400],
       fillSecondary: appTheme.colors.green[100],
       ornament: appTheme.colors.green[600],
-      surfacePrimary: appTheme.colors.green[100],
-      surfaceSecondary: appTheme.colors.green[500],
+      surfacePrimary: appTheme.colors.green[400],
+      surfaceSecondary: appTheme.colors.green[100],
       text: appTheme.colors.green[600],
     },
   };
diff --git a/packages/components/src/core/styles/common/types.ts b/packages/components/src/core/styles/common/types.ts
index 6867f7fb1..4f45f17b7 100644
--- a/packages/components/src/core/styles/common/types.ts
+++ b/packages/components/src/core/styles/common/types.ts
@@ -16,25 +16,28 @@ export interface AccentColor {
   borderOpen: string;
   borderFocus: string;
   borderSelected: string;
-  icon: string;
-  iconHover: string;
-  iconPressed: string;
-  iconOpen: string;
-  iconFocus: string;
-  iconSelected: string;
+  ornament: string;
+  ornamentHover: string;
+  ornamentPressed: string;
+  ornamentOpen: string;
+  ornamentFocus: string;
+  ornamentSelected: string;
 }
 
 export interface BaseColor {
-  surfaceBackground: string;
-  surfacePrimary: string;
-  surfaceSecondary: string;
-  surfaceTertiary: string;
-  surfacePrimaryInverse: string;
+  backgroundPrimary: string;
+  backgroundPrimaryInverse: string;
+  backgroundSecondary: string;
+  backgroundSecondaryInverse: string;
+  backgroundTertiary: string;
+  surface: string;
+  surfaceInverse: string;
   textPrimary: string;
   textPrimaryInverse: string;
   textSecondary: string;
   textSecondaryInverse: string;
   textDisabled: string;
+  textOnFill: string;
   fillHover: string;
   fillPressed: string;
   fillPrimary: string;
@@ -42,19 +45,20 @@ export interface BaseColor {
   fillSelected: string;
   fillDisabled: string;
   divider: string;
+  dividerInverse: string;
   border: string;
+  borderInverse: string;
   borderHover: string;
   borderPressed: string;
   borderDisabled: string;
   borderTable: string;
-  iconPrimary: string;
-  iconPrimaryHover: string;
-  iconPrimaryPressed: string;
-  iconSecondary: string;
-  iconPrimaryInverse: string;
-  iconPrimaryInverseHover: string;
-  iconPrimaryInversePressed: string;
-  iconDisabled: string;
+  ornamentDisabled: string;
+  ornamentOnFill: string;
+  ornamentPrimary: string;
+  ornamentPrimaryInverse: string;
+  ornamentSecondary: string;
+  ornamentSecondaryHover: string;
+  ornamentSecondaryPressed: string;
 }
 
 export interface IntentColor {
@@ -287,10 +291,12 @@ export interface IconSizes {
 export interface Border {
   default?: string;
   divider?: string;
+  dividerInverse?: string;
   black?: string;
   solid?: string;
   dashed?: string;
   hover?: string;
+  inverse?: string;
   disabled?: string;
   table?: string;
   pressed?: string;
diff --git a/packages/data-viz/rollup.config.mjs b/packages/data-viz/rollup.config.mjs
index 79cfdc350..57c3dc1f5 100644
--- a/packages/data-viz/rollup.config.mjs
+++ b/packages/data-viz/rollup.config.mjs
@@ -1,8 +1,5 @@
 import url from "@rollup/plugin-url";
 import svgr from "@svgr/rollup";
-import bundleScss from "rollup-plugin-bundle-scss";
-import copy from "rollup-plugin-copy";
-import css from "rollup-plugin-css-only";
 import del from "rollup-plugin-delete";
 import ts from "rollup-plugin-ts";
 import resolve from "@rollup/plugin-node-resolve";
@@ -46,7 +43,7 @@ const config = [
 
       // Clean up the `dist` folder and any other specified paths before building.
       del({
-        targets: ["dist/*", "playground/src/components"],
+        targets: ["dist/*", "playground/src/data-viz"],
       }),
 
       // Allow imports for assets like images, fonts, etc., and handle them properly.
diff --git a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/index.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/index.tsx
index a5645ecbb..346c2f3d2 100644
--- a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/index.tsx
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/index.tsx
@@ -25,7 +25,7 @@ const Header = () => {
   return (
     <StyledHeader>
       <HeaderLeft>
-        <Icon sdsIcon="Grid" sdsType="static" sdsSize="xl" color="gray" />
+        <Icon sdsIcon="Grid" sdsSize="xl" color="gray" />
         <h3 style={{ marginLeft: 10 }}>
           Heatmap ({renderer === "svg" ? "SVG version" : "Canvas version"})
         </h3>
@@ -35,7 +35,7 @@ const Header = () => {
         <Button
           sdsType="primary"
           sdsStyle="rounded"
-          endIcon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+          endIcon={<Icon sdsIcon="Download" sdsSize="l" />}
           onClick={() => saveAsImage("sds-heatmap")}
         >
           Download as {renderer === "svg" ? ".svg" : ".png"}
@@ -55,7 +55,7 @@ const Header = () => {
               format.
             </div>
           }
-          sdsStyle="light"
+          hasInvertedStyle={false}
           placement="bottom-end"
           arrow
         >
diff --git a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts
index 3e0ed53e9..1b1ff5b14 100644
--- a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts
@@ -8,7 +8,7 @@ export const StyledHeader = styled("div")`
     const theme = useContext(ThemeContext) as SDSTheme;
 
     return `
-      background-color: ${theme?.palette?.sds?.base?.surfaceBackground};
+      background-color: ${theme?.palette?.sds?.base?.backgroundPrimary};
     `;
   }}
   grid-area: 1 / 1 / 2 / 6;
diff --git a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts
index a87314194..5dc4708c0 100644
--- a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts
@@ -24,7 +24,7 @@ export const Sidebar = styled("div")`
     const theme = useContext(ThemeContext) as SDSTheme;
 
     return `
-      background-color: ${theme?.palette?.sds?.base?.surfaceBackground};
+      background-color: ${theme?.palette?.sds?.base?.backgroundPrimary};
     `;
   }}
   grid-area: 2 / 1 / 6 / 2;
diff --git a/packages/data-viz/tsconfig.json b/packages/data-viz/tsconfig.json
index 145771f0e..02d529fd1 100644
--- a/packages/data-viz/tsconfig.json
+++ b/packages/data-viz/tsconfig.json
@@ -1,16 +1,11 @@
 {
-    "extends": "../../tsconfig.json",
-    "compilerOptions": {
-        "baseUrl": "./",
-        "outDir": "./dist",
-        "composite": true
-    },
-    "include": [
-        "./src/**/*",
-        "../../.eslintrc.js"
-    ],
-    "exclude": [
-        "node_modules"
-    ],
-    "references": []
-}
\ No newline at end of file
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist",
+    "composite": true
+  },
+  "include": ["./src/**/*", "jest.setup.ts", "../../.eslintrc.js"],
+  "exclude": ["node_modules", "**/*.scss", "**/*.css"],
+  "references": []
+}