@gitlab/ui 102.3.0 → 102.4.0

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."
             },

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."
             },

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.
@@ -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."
           },