@gitlab/ui 102.2.0 → 102.4.0

package/dist/tokens/scss/_tokens.scss

@@ -459,7 +459,7 @@ $gl-background-color-section: $gl-color-neutral-0; // Used for containers, like
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
-$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -652,6 +652,7 @@ $gl-button-danger-secondary-border-color-active: $gl-color-red-900; // Used for
 $gl-button-danger-tertiary-background-color-default: $gl-action-danger-background-color-default; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-color-hover; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.
 $gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
+$gl-button-dashed-border-color-default: $gl-color-neutral-400; // Used for the border of a dashed button in the default state.
 $gl-button-dashed-border-color-active: $gl-color-neutral-600; // Used for the border of a dashed button in the active state.
 $gl-button-selected-border-color-default: $gl-color-neutral-300; // Used for the border of a selected button in the default state.
 $gl-button-selected-border-color-hover: $gl-color-neutral-400; // Used for the border of a selected button in the hover state.
@@ -863,7 +864,8 @@ $gl-button-danger-tertiary-foreground-color-hover: $gl-action-danger-foreground-
 $gl-button-danger-tertiary-foreground-color-active: $gl-action-danger-foreground-color-active; // Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.
 $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-color-focus; // Used for the background of a borderless, tertiary danger (destructive) button in the focus state.
 $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
-$gl-button-dashed-border-color-default: $gl-border-color-strong; // Used for the border of a dashed button in the default state.
+$gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
+$gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
 $gl-button-selected-background-color-default: $gl-button-default-primary-background-color-default; // Used for the background of a selected button in the default state.
@@ -927,8 +929,6 @@ $gl-button-danger-tertiary-foreground-color-focus: $gl-action-danger-foreground-
 $gl-button-danger-tertiary-border-color-hover: $gl-action-danger-border-color-hover; // Used for the border of a borderless, tertiary danger (destructive) button in the hover state.
 $gl-button-danger-tertiary-border-color-focus: $gl-action-danger-border-color-focus; // Used for the border of a borderless, tertiary danger (destructive) button in the focus state.
 $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-active; // Used for the border of a borderless, tertiary danger (destructive) button in the active state.
-$gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
-$gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
 $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
 $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.

package/dist/tokens/tailwind/tokens.cjs

@@ -226,7 +226,7 @@ const backgroundColors = {
 const borderColors = {
   default: 'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
   subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
-  strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
+  strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-200, #bfbfc3))',
   section: 'var(--gl-border-color-section, var(--gl-border-color-default, #dcdcde))',
   transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "102.2.0",
+  "version": "102.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -108,7 +108,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "20.5.0",
+    "@gitlab/eslint-plugin": "20.6.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
     "@gitlab/svgs": "3.120.0",

package/src/components/base/loading_icon/loading_icon.scss

@@ -71,7 +71,7 @@ $gl-loader-dots-size-xl: 1rem;
 
   &.gl-spinner-light {
     // This is the variant we use on backgrounds that are dark even in light mode.
-    // This varient doesn't change its colors for dark mode.
+    // This variant doesn't change its colors for dark mode.
     border-color: var(--gl-spinner-track-color-light);
     border-top-color: var(--gl-spinner-segment-color-light);
   }

package/src/tokens/border.tokens.json

@@ -4,7 +4,7 @@
       "default": {
         "$value": {
           "default": "{color.neutral.100}",
-          "dark": "{color.neutral.800}"
+          "dark": "{color.neutral.700}"
         },
         "$type": "color",
         "$description": "Used for the default border color."
@@ -19,8 +19,8 @@
       },
       "strong": {
         "$value": {
-          "default": "{color.neutral.400}",
-          "dark": "{color.neutral.400}"
+          "default": "{color.neutral.200}",
+          "dark": "{color.neutral.600}"
         },
         "$type": "color",
         "$description": "Used for a distinct border that emphasizes an edge or boundaries."

package/src/tokens/build/css/tokens.css

@@ -461,7 +461,7 @@
   --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */
   --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
   --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
-  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-strong: var(--gl-color-neutral-200); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /* Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */
@@ -654,6 +654,7 @@
   --gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /* Used for the background of a borderless, tertiary danger (destructive) button in the default state. */
   --gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /* Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */
   --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /* Used for the background of a borderless, tertiary danger (destructive) button in the active state. */
+  --gl-button-dashed-border-color-default: var(--gl-color-neutral-400); /* Used for the border of a dashed button in the default state. */
   --gl-button-dashed-border-color-active: var(--gl-color-neutral-600); /* Used for the border of a dashed button in the active state. */
   --gl-button-selected-border-color-default: var(--gl-color-neutral-300); /* Used for the border of a selected button in the default state. */
   --gl-button-selected-border-color-hover: var(--gl-color-neutral-400); /* Used for the border of a selected button in the hover state. */
@@ -865,7 +866,8 @@
   --gl-button-danger-tertiary-foreground-color-active: var(--gl-action-danger-foreground-color-active); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the active state. */
   --gl-button-danger-tertiary-background-color-focus: var(--gl-action-danger-background-color-focus); /* Used for the background of a borderless, tertiary danger (destructive) button in the focus state. */
   --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /* Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
-  --gl-button-dashed-border-color-default: var(--gl-border-color-strong); /* Used for the border of a dashed button in the default state. */
+  --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the hover state. */
+  --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the focus state. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /* Used for the text of a link button in the default state. */
   --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a selected button in the default state. */
   --gl-button-selected-background-color-default: var(--gl-button-default-primary-background-color-default); /* Used for the background of a selected button in the default state. */
@@ -929,8 +931,6 @@
   --gl-button-danger-tertiary-border-color-hover: var(--gl-action-danger-border-color-hover); /* Used for the border of a borderless, tertiary danger (destructive) button in the hover state. */
   --gl-button-danger-tertiary-border-color-focus: var(--gl-action-danger-border-color-focus); /* Used for the border of a borderless, tertiary danger (destructive) button in the focus state. */
   --gl-button-danger-tertiary-border-color-active: var(--gl-action-danger-border-color-active); /* Used for the border of a borderless, tertiary danger (destructive) button in the active state. */
-  --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the hover state. */
-  --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the focus state. */
   --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the hover state. */
   --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the focus state. */
   --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the active state. */

package/src/tokens/build/css/tokens.dark.css

@@ -459,9 +459,9 @@
   --gl-background-color-overlap: var(--gl-color-neutral-900); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-section: var(--gl-color-neutral-800); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
-  --gl-border-color-default: var(--gl-color-neutral-800); /* Used for the default border color. */
+  --gl-border-color-default: var(--gl-color-neutral-700); /* Used for the default border color. */
   --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
-  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-strong: var(--gl-color-neutral-600); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */
@@ -654,6 +654,7 @@
   --gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /* Used for the background of a borderless, tertiary danger (destructive) button in the default state. */
   --gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /* Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */
   --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /* Used for the background of a borderless, tertiary danger (destructive) button in the active state. */
+  --gl-button-dashed-border-color-default: var(--gl-color-neutral-400); /* Used for the border of a dashed button in the default state. */
   --gl-button-dashed-border-color-active: var(--gl-color-neutral-300); /* Used for the border of a dashed button in the active state. */
   --gl-button-selected-border-color-default: var(--gl-color-neutral-600); /* Used for the border of a selected button in the default state. */
   --gl-button-selected-border-color-hover: var(--gl-color-neutral-500); /* Used for the border of a selected button in the hover state. */
@@ -694,9 +695,9 @@
   --gl-progress-bar-track-color: var(--gl-color-neutral-700); /* Used for the track color for all progress-bar variants. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /* Used for the skeleton loader background color. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /* Used for the animated shimmer effect in a skeleton loader. */
-  --gl-spinner-track-color-default: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner. */
+  --gl-spinner-track-color-default: var(--gl-color-neutral-600); /* Used for the static track (background) of a loading spinner. */
   --gl-spinner-track-color-light: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner on a dark background. */
-  --gl-spinner-segment-color-default: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner. */
+  --gl-spinner-segment-color-default: var(--gl-color-neutral-100); /* Used for the animated segment of a loading spinner. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-tab-selected-indicator-color-default: var(--gl-color-blue-400); /* Used for the selected indicator of a tab. */
   --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-600); /* Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
@@ -747,7 +748,7 @@
   --gl-icon-color-warning: var(--gl-color-orange-300); /* Used for an icon associated with a warning. */
   --gl-icon-color-danger: var(--gl-color-red-300); /* Used for an icon associated with an error or danger. */
   --gl-icon-color-success: var(--gl-color-green-300); /* Used for an icon associated with success or validity. */
-  --gl-shadow-color-default: var(--gl-color-alpha-dark-24); /* Used for the default shadow color. */
+  --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. */
@@ -865,7 +866,8 @@
   --gl-button-danger-tertiary-foreground-color-active: var(--gl-action-danger-foreground-color-active); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the active state. */
   --gl-button-danger-tertiary-background-color-focus: var(--gl-action-danger-background-color-focus); /* Used for the background of a borderless, tertiary danger (destructive) button in the focus state. */
   --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /* Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
-  --gl-button-dashed-border-color-default: var(--gl-border-color-strong); /* Used for the border of a dashed button in the default state. */
+  --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the hover state. */
+  --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the focus state. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /* Used for the text of a link button in the default state. */
   --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a selected button in the default state. */
   --gl-button-selected-background-color-default: var(--gl-button-default-primary-background-color-default); /* Used for the background of a selected button in the default state. */
@@ -929,8 +931,6 @@
   --gl-button-danger-tertiary-border-color-hover: var(--gl-action-danger-border-color-hover); /* Used for the border of a borderless, tertiary danger (destructive) button in the hover state. */
   --gl-button-danger-tertiary-border-color-focus: var(--gl-action-danger-border-color-focus); /* Used for the border of a borderless, tertiary danger (destructive) button in the focus state. */
   --gl-button-danger-tertiary-border-color-active: var(--gl-action-danger-border-color-active); /* Used for the border of a borderless, tertiary danger (destructive) button in the active state. */
-  --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the hover state. */
-  --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the focus state. */
   --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the hover state. */
   --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the focus state. */
   --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the active state. */

package/src/tokens/build/js/tokens.dark.js

@@ -84,9 +84,9 @@ export const GL_BACKGROUND_COLOR_DISABLED = '#28272d';
 export const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
 export const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
-export const GL_BORDER_COLOR_DEFAULT = '#3a383f';
+export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
 export const GL_BORDER_COLOR_SUBTLE = '#28272d';
-export const GL_BORDER_COLOR_STRONG = '#89888d';
+export const GL_BORDER_COLOR_STRONG = '#626168';
 export const GL_BORDER_COLOR_SECTION = '#18171d';
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
 export const GL_COLOR_ALPHA_0 = 'transparent';
@@ -674,9 +674,9 @@ export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#ec5941';
 export const GL_PROGRESS_BAR_TRACK_COLOR = '#4c4b51';
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f';
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51';
-export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#3a383f';
+export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#626168';
 export const GL_SPINNER_TRACK_COLOR_LIGHT = '#3a383f';
-export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#bfbfc3';
+export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#dcdcde';
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3';
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d';
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff';
@@ -918,7 +918,7 @@ export const GL_LINE_HEIGHT_36 = '2.25rem';
 export const GL_LINE_HEIGHT_42 = '2.625rem';
 export const GL_LINE_HEIGHT_44 = '2.75rem';
 export const GL_LINE_HEIGHT_52 = '3.25rem';
-export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.24)';
+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';

package/src/tokens/build/js/tokens.js

@@ -86,7 +86,7 @@ export const GL_BACKGROUND_COLOR_SECTION = '#fff';
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(05, 05, 06, 0.24)';
 export const GL_BORDER_COLOR_DEFAULT = '#dcdcde';
 export const GL_BORDER_COLOR_SUBTLE = '#ececef';
-export const GL_BORDER_COLOR_STRONG = '#89888d';
+export const GL_BORDER_COLOR_STRONG = '#bfbfc3';
 export const GL_BORDER_COLOR_SECTION = '#dcdcde';
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
 export const GL_COLOR_ALPHA_0 = 'transparent';

package/src/tokens/build/json/tokens.dark.json

@@ -1954,7 +1954,7 @@
   "border": {
     "color": {
       "default": {
-        "$value": "#3a383f",
+        "$value": "#4c4b51",
         "$type": "color",
         "$description": "Used for the default border color.",
         "filePath": "src/tokens/border.tokens.json",
@@ -1962,7 +1962,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.100}",
-            "dark": "{color.neutral.800}"
+            "dark": "{color.neutral.700}"
           },
           "$type": "color",
           "$description": "Used for the default border color."
@@ -1998,15 +1998,15 @@
         ]
       },
       "strong": {
-        "$value": "#89888d",
+        "$value": "#626168",
         "$type": "color",
         "$description": "Used for a distinct border that emphasizes an edge or boundaries.",
         "filePath": "src/tokens/border.tokens.json",
         "isSource": true,
         "original": {
           "$value": {
-            "default": "{color.neutral.400}",
-            "dark": "{color.neutral.400}"
+            "default": "{color.neutral.200}",
+            "dark": "{color.neutral.600}"
           },
           "$type": "color",
           "$description": "Used for a distinct border that emphasizes an edge or boundaries."
@@ -13184,7 +13184,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{border.color.strong}",
+              "$value": {
+                "default": "{color.neutral.400}",
+                "dark": "{color.neutral.400}"
+              },
               "$type": "color",
               "$description": "Used for the border of a dashed button in the default state."
             },
@@ -14975,7 +14978,7 @@
     "track": {
       "color": {
         "default": {
-          "$value": "#3a383f",
+          "$value": "#626168",
           "$type": "color",
           "$description": "Used for the static track (background) of a loading spinner.",
           "filePath": "src/tokens/contextual/spinner.tokens.json",
@@ -14983,7 +14986,7 @@
           "original": {
             "$value": {
               "default": "{color.neutral.100}",
-              "dark": "{color.neutral.800}"
+              "dark": "{color.neutral.600}"
             },
             "$type": "color",
             "$description": "Used for the static track (background) of a loading spinner."
@@ -15022,7 +15025,7 @@
     "segment": {
       "color": {
         "default": {
-          "$value": "#bfbfc3",
+          "$value": "#dcdcde",
           "$type": "color",
           "$description": "Used for the animated segment of a loading spinner.",
           "filePath": "src/tokens/contextual/spinner.tokens.json",
@@ -15030,7 +15033,7 @@
           "original": {
             "$value": {
               "default": "{color.neutral.700}",
-              "dark": "{color.neutral.200}"
+              "dark": "{color.neutral.100}"
             },
             "$type": "color",
             "$description": "Used for the animated segment of a loading spinner."
@@ -21083,7 +21086,7 @@
   "shadow": {
     "color": {
       "default": {
-        "$value": "rgba(05, 05, 06, 0.24)",
+        "$value": "rgba(05, 05, 06, 0.4)",
         "$type": "color",
         "$description": "Used for the default shadow color.",
         "filePath": "src/tokens/shadow.tokens.json",
@@ -21091,7 +21094,7 @@
         "original": {
           "$value": {
             "default": "{color.alpha.dark.16}",
-            "dark": "{color.alpha.dark.24}"
+            "dark": "{color.alpha.dark.40}"
           },
           "$type": "color",
           "$description": "Used for the default shadow color."

package/src/tokens/build/json/tokens.json

@@ -1962,7 +1962,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.100}",
-            "dark": "{color.neutral.800}"
+            "dark": "{color.neutral.700}"
           },
           "$type": "color",
           "$description": "Used for the default border color."
@@ -1998,15 +1998,15 @@
         ]
       },
       "strong": {
-        "$value": "#89888d",
+        "$value": "#bfbfc3",
         "$type": "color",
         "$description": "Used for a distinct border that emphasizes an edge or boundaries.",
         "filePath": "src/tokens/border.tokens.json",
         "isSource": true,
         "original": {
           "$value": {
-            "default": "{color.neutral.400}",
-            "dark": "{color.neutral.400}"
+            "default": "{color.neutral.200}",
+            "dark": "{color.neutral.600}"
           },
           "$type": "color",
           "$description": "Used for a distinct border that emphasizes an edge or boundaries."
@@ -13184,7 +13184,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{border.color.strong}",
+              "$value": {
+                "default": "{color.neutral.400}",
+                "dark": "{color.neutral.400}"
+              },
               "$type": "color",
               "$description": "Used for the border of a dashed button in the default state."
             },
@@ -14983,7 +14986,7 @@
           "original": {
             "$value": {
               "default": "{color.neutral.100}",
-              "dark": "{color.neutral.800}"
+              "dark": "{color.neutral.600}"
             },
             "$type": "color",
             "$description": "Used for the static track (background) of a loading spinner."
@@ -15030,7 +15033,7 @@
           "original": {
             "$value": {
               "default": "{color.neutral.700}",
-              "dark": "{color.neutral.200}"
+              "dark": "{color.neutral.100}"
             },
             "$type": "color",
             "$description": "Used for the animated segment of a loading spinner."
@@ -21091,7 +21094,7 @@
         "original": {
           "$value": {
             "default": "{color.alpha.dark.16}",
-            "dark": "{color.alpha.dark.24}"
+            "dark": "{color.alpha.dark.40}"
           },
           "$type": "color",
           "$description": "Used for the default shadow color."

package/src/tokens/build/scss/_tokens.dark.scss

@@ -457,9 +457,9 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
 $gl-background-color-overlap: $gl-color-neutral-900; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-section: $gl-color-neutral-800; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
-$gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
+$gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
-$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -652,6 +652,7 @@ $gl-button-danger-secondary-border-color-active: $gl-color-alpha-0; // Used for
 $gl-button-danger-tertiary-background-color-default: $gl-action-danger-background-color-default; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-color-hover; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.
 $gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
+$gl-button-dashed-border-color-default: $gl-color-neutral-400; // Used for the border of a dashed button in the default state.
 $gl-button-dashed-border-color-active: $gl-color-neutral-300; // Used for the border of a dashed button in the active state.
 $gl-button-selected-border-color-default: $gl-color-neutral-600; // Used for the border of a selected button in the default state.
 $gl-button-selected-border-color-hover: $gl-color-neutral-500; // Used for the border of a selected button in the hover state.
@@ -692,9 +693,9 @@ $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the
 $gl-progress-bar-track-color: $gl-color-neutral-700; // Used for the track color for all progress-bar variants.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
-$gl-spinner-track-color-default: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner.
+$gl-spinner-track-color-default: $gl-color-neutral-600; // Used for the static track (background) of a loading spinner.
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
-$gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.
+$gl-spinner-segment-color-default: $gl-color-neutral-100; // Used for the animated segment of a loading spinner.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
 $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-600; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
@@ -745,7 +746,7 @@ $gl-icon-color-info: $gl-color-blue-300; // Used for an icon associated with inf
 $gl-icon-color-warning: $gl-color-orange-300; // Used for an icon associated with a warning.
 $gl-icon-color-danger: $gl-color-red-300; // Used for an icon associated with an error or danger.
 $gl-icon-color-success: $gl-color-green-300; // Used for an icon associated with success or validity.
-$gl-shadow-color-default: $gl-color-alpha-dark-24; // Used for the default shadow color.
+$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.
@@ -863,7 +864,8 @@ $gl-button-danger-tertiary-foreground-color-hover: $gl-action-danger-foreground-
 $gl-button-danger-tertiary-foreground-color-active: $gl-action-danger-foreground-color-active; // Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.
 $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-color-focus; // Used for the background of a borderless, tertiary danger (destructive) button in the focus state.
 $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
-$gl-button-dashed-border-color-default: $gl-border-color-strong; // Used for the border of a dashed button in the default state.
+$gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
+$gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
 $gl-button-selected-background-color-default: $gl-button-default-primary-background-color-default; // Used for the background of a selected button in the default state.
@@ -927,8 +929,6 @@ $gl-button-danger-tertiary-foreground-color-focus: $gl-action-danger-foreground-
 $gl-button-danger-tertiary-border-color-hover: $gl-action-danger-border-color-hover; // Used for the border of a borderless, tertiary danger (destructive) button in the hover state.
 $gl-button-danger-tertiary-border-color-focus: $gl-action-danger-border-color-focus; // Used for the border of a borderless, tertiary danger (destructive) button in the focus state.
 $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-active; // Used for the border of a borderless, tertiary danger (destructive) button in the active state.
-$gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
-$gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
 $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
 $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.

package/src/tokens/build/scss/_tokens.scss

@@ -459,7 +459,7 @@ $gl-background-color-section: $gl-color-neutral-0; // Used for containers, like
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
-$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -652,6 +652,7 @@ $gl-button-danger-secondary-border-color-active: $gl-color-red-900; // Used for
 $gl-button-danger-tertiary-background-color-default: $gl-action-danger-background-color-default; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-color-hover; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.
 $gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
+$gl-button-dashed-border-color-default: $gl-color-neutral-400; // Used for the border of a dashed button in the default state.
 $gl-button-dashed-border-color-active: $gl-color-neutral-600; // Used for the border of a dashed button in the active state.
 $gl-button-selected-border-color-default: $gl-color-neutral-300; // Used for the border of a selected button in the default state.
 $gl-button-selected-border-color-hover: $gl-color-neutral-400; // Used for the border of a selected button in the hover state.
@@ -863,7 +864,8 @@ $gl-button-danger-tertiary-foreground-color-hover: $gl-action-danger-foreground-
 $gl-button-danger-tertiary-foreground-color-active: $gl-action-danger-foreground-color-active; // Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.
 $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-color-focus; // Used for the background of a borderless, tertiary danger (destructive) button in the focus state.
 $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
-$gl-button-dashed-border-color-default: $gl-border-color-strong; // Used for the border of a dashed button in the default state.
+$gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
+$gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
 $gl-button-selected-background-color-default: $gl-button-default-primary-background-color-default; // Used for the background of a selected button in the default state.
@@ -927,8 +929,6 @@ $gl-button-danger-tertiary-foreground-color-focus: $gl-action-danger-foreground-
 $gl-button-danger-tertiary-border-color-hover: $gl-action-danger-border-color-hover; // Used for the border of a borderless, tertiary danger (destructive) button in the hover state.
 $gl-button-danger-tertiary-border-color-focus: $gl-action-danger-border-color-focus; // Used for the border of a borderless, tertiary danger (destructive) button in the focus state.
 $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-active; // Used for the border of a borderless, tertiary danger (destructive) button in the active state.
-$gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
-$gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
 $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
 $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.

package/src/tokens/build/tailwind/tokens.cjs

@@ -226,7 +226,7 @@ const backgroundColors = {
 const borderColors = {
   default: 'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
   subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
-  strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
+  strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-200, #bfbfc3))',
   section: 'var(--gl-border-color-section, var(--gl-border-color-default, #dcdcde))',
   transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };

package/src/tokens/contextual/button.tokens.json

@@ -710,7 +710,10 @@
       "border": {
         "color": {
           "default": {
-            "$value": "{border.color.strong}",
+            "$value": {
+              "default": "{color.neutral.400}",
+              "dark": "{color.neutral.400}"
+            },
             "$type": "color",
             "$description": "Used for the border of a dashed button in the default state."
           },

package/src/tokens/contextual/spinner.tokens.json

@@ -5,7 +5,7 @@
         "default": {
           "$value": {
             "default": "{color.neutral.100}",
-            "dark": "{color.neutral.800}"
+            "dark": "{color.neutral.600}"
           },
           "$type": "color",
           "$description": "Used for the static track (background) of a loading spinner."
@@ -22,7 +22,7 @@
         "default": {
           "$value": {
             "default": "{color.neutral.700}",
-            "dark": "{color.neutral.200}"
+            "dark": "{color.neutral.100}"
           },
           "$type": "color",
           "$description": "Used for the animated segment of a loading spinner."

package/src/tokens/shadow.tokens.json

@@ -4,7 +4,7 @@
       "default": {
         "$value": {
           "default": "{color.alpha.dark.16}",
-          "dark": "{color.alpha.dark.24}"
+          "dark": "{color.alpha.dark.40}"
         },
         "$type": "color",
         "$description": "Used for the default shadow color."

package/tailwind.defaults.js

@@ -448,7 +448,7 @@ module.exports = {
     boxShadow: {
       DEFAULT: '0 1px 4px 0 #0000004d',
       none: 'none',
-      sm: '0 0 2px var(--gl-shadow-color-default, #05050629), 0 1px 4px var(--gl-shadow-color-default, #05050629),',
+      sm: '0 0 2px var(--gl-shadow-color-default, #05050629), 0 1px 4px var(--gl-shadow-color-default, #05050629)',
       md: '0 0 1px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 2px 8px var(--gl-shadow-color-default, #05050629)',
       lg: '0 0 2px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 4px 12px var(--gl-shadow-color-default, #05050629)',
       'inner-1-blue-500': 'inset 0 0 0 1px var(--blue-500, #1f75cb)',