Jeremy Elder · 🤖 GitLab Bot 🤖 · 🤖 GitLab Bot 🤖 · Sascha Eggenberger · Simon Knox · 🤖 GitLab Bot 🤖
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
+# [103.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.3.0...v103.4.0) (2024-11-22)
+
+
+### Features
+
+* **Drawer:** Apply suggestions ([fca336a](https://gitlab.com/gitlab-org/gitlab-ui/commit/fca336a1ef97e46333827c8b09b191173ba34e0e))
+* **Drawer:** Cleanup apply and classes ([de760bf](https://gitlab.com/gitlab-org/gitlab-ui/commit/de760bf0ac69aecfcf6b4c2e7a2ec45ce357e0e4))
+* **Drawer:** Update design tokens ([34dc4c5](https://gitlab.com/gitlab-org/gitlab-ui/commit/34dc4c5a4810e889afb3613f5f26613de2ba231b))
+* **StatusTokens:** Update status icon token values ([5005220](https://gitlab.com/gitlab-org/gitlab-ui/commit/5005220435496f838b39261f77e92150a8a98942))
+
 # [103.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.2.0...v103.3.0) (2024-11-19)



--- a/package.json
+++ b/package.json
 {
  "name": "@gitlab/ui",
-  "version": "103.3.0",
+  "version": "103.4.0",
  "description": "GitLab UI Components",
  "license": "MIT",
  "main": "dist/index.js",

--- a/src/components/base/drawer/drawer.scss
+++ b/src/components/base/drawer/drawer.scss
@@ -2,12 +2,12 @@ $gl-drawer-width: 400px;
 $gl-sidebar-width: 290px;
 $gl-drawer-scrim-gradient: linear-gradient(
  to bottom,
-  $transparent-rgba,
-  var(--drawer-variant-bg-color)
+  var(--gl-color-alpha-0),
+  var(--gl-background-color-overlap)
 );

 .gl-drawer {
-  background-color: var(--drawer-variant-bg-color);
+  @apply gl-bg-overlap;
  right: 0;
  @apply gl-transition-all;
  position: fixed;
@@ -21,14 +21,13 @@ $gl-drawer-scrim-gradient: linear-gradient(
  @apply gl-flex-col;

  .gl-drawer-header-sticky {
-    background-color: var(--drawer-variant-bg-color);
+    @apply gl-bg-overlap;
    top: 0;
    position: sticky;
  }
 }

 .gl-drawer-default {
-  --drawer-variant-bg-color: var(--gl-background-color-default);
  @include media-breakpoint-up(md) {
    width: $gl-drawer-width;
  }
@@ -40,7 +39,6 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }

 .gl-drawer-sidebar {
-  --drawer-variant-bg-color: var(--gl-background-color-subtle);
  @include media-breakpoint-up(md) {
    width: $gl-sidebar-width;
  }
@@ -60,8 +58,8 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }

 .gl-drawer-footer {
-  @apply gl-border-t-solid gl-border-t-1;
-  border-top-color: var(--gl-border-color-default);
+  @apply gl-bg-overlap;
+  @apply gl-border-t;
  @apply gl-p-5;
 }

@@ -80,14 +78,12 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }

 .gl-drawer-footer-sticky {
-  background-color: var(--drawer-variant-bg-color);
  bottom: 0;
  position: sticky;
 }

 .gl-drawer-header {
-  @apply gl-border-b-solid gl-border-b-1;
-  border-bottom-color: var(--gl-border-color-default);
+  @apply gl-border-b;
 }

 .gl-drawer-title {
@@ -130,8 +126,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }

 .gl-drawer-body > * {
-  @apply gl-border-b-solid gl-border-b-1;
-  border-bottom-color: var(--gl-border-color-default);
+  @apply gl-border-b;

  &:last-child {
    @apply gl-border-none;

--- a/src/tokens/build/css/tokens.dark.css
+++ b/src/tokens/build/css/tokens.dark.css
@@ -751,19 +751,19 @@
  --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /* Used for the default shadow color. */
  --gl-status-neutral-background-color: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
  --gl-status-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
-  --gl-status-neutral-icon-color: var(--gl-color-neutral-400); /* Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
+  --gl-status-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
  --gl-status-info-background-color: var(--gl-color-blue-800); /* Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
  --gl-status-info-text-color: var(--gl-color-blue-200); /* Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
-  --gl-status-info-icon-color: var(--gl-color-blue-400); /* Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
+  --gl-status-info-icon-color: var(--gl-color-blue-300); /* Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
  --gl-status-success-background-color: var(--gl-color-green-800); /* Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
  --gl-status-success-text-color: var(--gl-color-green-200); /* Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
-  --gl-status-success-icon-color: var(--gl-color-green-400); /* Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
+  --gl-status-success-icon-color: var(--gl-color-green-300); /* Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
  --gl-status-warning-background-color: var(--gl-color-orange-800); /* Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
  --gl-status-warning-text-color: var(--gl-color-orange-200); /* Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
-  --gl-status-warning-icon-color: var(--gl-color-orange-400); /* Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
+  --gl-status-warning-icon-color: var(--gl-color-orange-300); /* Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
  --gl-status-danger-background-color: var(--gl-color-red-800); /* Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
  --gl-status-danger-text-color: var(--gl-color-red-200); /* Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
-  --gl-status-danger-icon-color: var(--gl-color-red-400); /* Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
+  --gl-status-danger-icon-color: var(--gl-color-red-300); /* Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
  --gl-status-brand-background-color: var(--gl-color-purple-900); /* Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
  --gl-status-brand-text-color: var(--gl-color-purple-300); /* Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
  --gl-status-brand-icon-color: var(--gl-color-purple-500); /* Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */

--- a/src/tokens/build/js/tokens.dark.js
+++ b/src/tokens/build/js/tokens.dark.js
@@ -667,10 +667,10 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#9dc7f1';
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#064787';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#703800';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#428fdc';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#2da160';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#c17d10';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#ec5941';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#63a6e9';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#52b87a';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#d99530';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#f6806d';
 export const GL_PROGRESS_BAR_TRACK_COLOR = '#4c4b51';
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f';
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51';
@@ -921,19 +921,19 @@ export const GL_LINE_HEIGHT_52 = '3.25rem';
 export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
 export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR = '#3a383f';
 export const GL_STATUS_NEUTRAL_TEXT_COLOR = '#bfbfc3';
-export const GL_STATUS_NEUTRAL_ICON_COLOR = '#89888d';
+export const GL_STATUS_NEUTRAL_ICON_COLOR = '#a4a3a8';
 export const GL_STATUS_INFO_BACKGROUND_COLOR = '#064787';
 export const GL_STATUS_INFO_TEXT_COLOR = '#9dc7f1';
-export const GL_STATUS_INFO_ICON_COLOR = '#428fdc';
+export const GL_STATUS_INFO_ICON_COLOR = '#63a6e9';
 export const GL_STATUS_SUCCESS_BACKGROUND_COLOR = '#0d532a';
 export const GL_STATUS_SUCCESS_TEXT_COLOR = '#91d4a8';
-export const GL_STATUS_SUCCESS_ICON_COLOR = '#2da160';
+export const GL_STATUS_SUCCESS_ICON_COLOR = '#52b87a';
 export const GL_STATUS_WARNING_BACKGROUND_COLOR = '#703800';
 export const GL_STATUS_WARNING_TEXT_COLOR = '#e9be74';
-export const GL_STATUS_WARNING_ICON_COLOR = '#c17d10';
+export const GL_STATUS_WARNING_ICON_COLOR = '#d99530';
 export const GL_STATUS_DANGER_BACKGROUND_COLOR = '#8d1300';
 export const GL_STATUS_DANGER_TEXT_COLOR = '#fcb5aa';
-export const GL_STATUS_DANGER_ICON_COLOR = '#ec5941';
+export const GL_STATUS_DANGER_ICON_COLOR = '#f6806d';
 export const GL_STATUS_BRAND_BACKGROUND_COLOR = '#2f2a6b';
 export const GL_STATUS_BRAND_TEXT_COLOR = '#ac93e6';
 export const GL_STATUS_BRAND_ICON_COLOR = '#7b58cf';

--- a/src/tokens/build/json/tokens.dark.json
+++ b/src/tokens/build/json/tokens.dark.json
@@ -14818,7 +14818,7 @@
    "indicator": {
      "color": {
        "default": {
-          "$value": "#428fdc",
+          "$value": "#63a6e9",
          "$type": "color",
          "$description": "Used for the indicator color for the primary progress-bar variant.",
          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14838,7 +14838,7 @@
          ]
        },
        "success": {
-          "$value": "#2da160",
+          "$value": "#52b87a",
          "$type": "color",
          "$description": "Used for the indicator color for the success progress-bar variant.",
          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14858,7 +14858,7 @@
          ]
        },
        "warning": {
-          "$value": "#c17d10",
+          "$value": "#d99530",
          "$type": "color",
          "$description": "Used for the indicator color for the warning progress-bar variant.",
          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14878,7 +14878,7 @@
          ]
        },
        "danger": {
-          "$value": "#ec5941",
+          "$value": "#f6806d",
          "$type": "color",
          "$description": "Used for the indicator color for the danger progress-bar variant.",
          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -21163,7 +21163,7 @@
      },
      "icon": {
        "color": {
-          "$value": "#89888d",
+          "$value": "#a4a3a8",
          "$type": "color",
          "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
          "filePath": "src/tokens/status.tokens.json",
@@ -21171,7 +21171,7 @@
          "original": {
            "$value": {
              "default": "{color.neutral.500}",
-              "dark": "{color.neutral.400}"
+              "dark": "{color.neutral.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
@@ -21240,7 +21240,7 @@
      },
      "icon": {
        "color": {
-          "$value": "#428fdc",
+          "$value": "#63a6e9",
          "$type": "color",
          "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
          "filePath": "src/tokens/status.tokens.json",
@@ -21248,7 +21248,7 @@
          "original": {
            "$value": {
              "default": "{color.blue.500}",
-              "dark": "{color.blue.400}"
+              "dark": "{color.blue.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
@@ -21317,7 +21317,7 @@
      },
      "icon": {
        "color": {
-          "$value": "#2da160",
+          "$value": "#52b87a",
          "$type": "color",
          "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
          "filePath": "src/tokens/status.tokens.json",
@@ -21325,7 +21325,7 @@
          "original": {
            "$value": {
              "default": "{color.green.500}",
-              "dark": "{color.green.400}"
+              "dark": "{color.green.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
@@ -21394,7 +21394,7 @@
      },
      "icon": {
        "color": {
-          "$value": "#c17d10",
+          "$value": "#d99530",
          "$type": "color",
          "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
          "filePath": "src/tokens/status.tokens.json",
@@ -21402,7 +21402,7 @@
          "original": {
            "$value": {
              "default": "{color.orange.500}",
-              "dark": "{color.orange.400}"
+              "dark": "{color.orange.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
@@ -21471,7 +21471,7 @@
      },
      "icon": {
        "color": {
-          "$value": "#ec5941",
+          "$value": "#f6806d",
          "$type": "color",
          "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
          "filePath": "src/tokens/status.tokens.json",
@@ -21479,7 +21479,7 @@
          "original": {
            "$value": {
              "default": "{color.red.500}",
-              "dark": "{color.red.400}"
+              "dark": "{color.red.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."

--- a/src/tokens/build/json/tokens.json
+++ b/src/tokens/build/json/tokens.json
@@ -21171,7 +21171,7 @@
          "original": {
            "$value": {
              "default": "{color.neutral.500}",
-              "dark": "{color.neutral.400}"
+              "dark": "{color.neutral.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
@@ -21248,7 +21248,7 @@
          "original": {
            "$value": {
              "default": "{color.blue.500}",
-              "dark": "{color.blue.400}"
+              "dark": "{color.blue.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
@@ -21325,7 +21325,7 @@
          "original": {
            "$value": {
              "default": "{color.green.500}",
-              "dark": "{color.green.400}"
+              "dark": "{color.green.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
@@ -21402,7 +21402,7 @@
          "original": {
            "$value": {
              "default": "{color.orange.500}",
-              "dark": "{color.orange.400}"
+              "dark": "{color.orange.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
@@ -21479,7 +21479,7 @@
          "original": {
            "$value": {
              "default": "{color.red.500}",
-              "dark": "{color.red.400}"
+              "dark": "{color.red.300}"
            },
            "$type": "color",
            "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."

--- a/src/tokens/build/scss/_tokens.dark.scss
+++ b/src/tokens/build/scss/_tokens.dark.scss
@@ -749,19 +749,19 @@ $gl-icon-color-success: $gl-color-green-300; // Used for an icon associated with
 $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-status-neutral-background-color: $gl-color-neutral-800; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
-$gl-status-neutral-icon-color: $gl-color-neutral-400; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
+$gl-status-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-info-background-color: $gl-color-blue-800; // Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
 $gl-status-info-text-color: $gl-color-blue-200; // Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
-$gl-status-info-icon-color: $gl-color-blue-400; // Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
+$gl-status-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
 $gl-status-success-background-color: $gl-color-green-800; // Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
 $gl-status-success-text-color: $gl-color-green-200; // Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
-$gl-status-success-icon-color: $gl-color-green-400; // Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
+$gl-status-success-icon-color: $gl-color-green-300; // Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
 $gl-status-warning-background-color: $gl-color-orange-800; // Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
 $gl-status-warning-text-color: $gl-color-orange-200; // Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
-$gl-status-warning-icon-color: $gl-color-orange-400; // Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
+$gl-status-warning-icon-color: $gl-color-orange-300; // Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
 $gl-status-danger-background-color: $gl-color-red-800; // Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
 $gl-status-danger-text-color: $gl-color-red-200; // Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
-$gl-status-danger-icon-color: $gl-color-red-400; // Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
+$gl-status-danger-icon-color: $gl-color-red-300; // Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
 $gl-status-brand-background-color: $gl-color-purple-900; // Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
 $gl-status-brand-text-color: $gl-color-purple-300; // Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
 $gl-status-brand-icon-color: $gl-color-purple-500; // Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.

--- a/src/tokens/status.tokens.json
+++ b/src/tokens/status.tokens.json
@@ -25,7 +25,7 @@
        "color": {
          "$value": {
            "default": "{color.neutral.500}",
-            "dark": "{color.neutral.400}"
+            "dark": "{color.neutral.300}"
          },
          "$type": "color",
          "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
@@ -57,7 +57,7 @@
        "color": {
          "$value": {
            "default": "{color.blue.500}",
-            "dark": "{color.blue.400}"
+            "dark": "{color.blue.300}"
          },
          "$type": "color",
          "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
@@ -89,7 +89,7 @@
        "color": {
          "$value": {
            "default": "{color.green.500}",
-            "dark": "{color.green.400}"
+            "dark": "{color.green.300}"
          },
          "$type": "color",
          "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
@@ -121,7 +121,7 @@
        "color": {
          "$value": {
            "default": "{color.orange.500}",
-            "dark": "{color.orange.400}"
+            "dark": "{color.orange.300}"
          },
          "$type": "color",
          "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
@@ -153,7 +153,7 @@
        "color": {
          "$value": {
            "default": "{color.red.500}",
-            "dark": "{color.red.400}"
+            "dark": "{color.red.300}"
          },
          "$type": "color",
          "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."

--- a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-drawer-sidebar-variant-1-snap.png
+++ b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-drawer-sidebar-variant-1-snap.png
--- a/yarn.lock
+++ b/yarn.lock
@@ -3692,6 +3692,11 @@
  resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
  integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
  
+"@types/trusted-types@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/unist@^2.0.0":
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
@@ -6457,9 +6462,11 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
    domelementtype "^2.2.0"
  
 dompurify@^3.1.2:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.7.tgz#711a8c96479fb6ced93453732c160c3c72418a6a"
-  integrity sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.1.tgz#d480972aeb1a59eb8ac47cba95558fbd72a0127b"
+  integrity sha512-NBHEsc0/kzRYQd+AY6HR6B/IgsqzBABrqJbpCDQII/OK6h7B7LXzweZTDsqSW2LkTRpoxf18YUP+YjGySk6B3w==
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
  
 domutils@^1.5.1:
  version "1.7.0"