@gitlab/ui 89.4.0 → 89.6.0

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

@@ -8999,18 +8999,18 @@
     "intro": {
       "border": {
         "color": {
-          "value": "#1068bf",
+          "value": "#064787",
           "$type": "color",
-          "comment": "Used to compliment the info banner.",
+          "comment": "Used for the border of an info banner.",
           "filePath": "src/tokens/contextual/banner.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.blue.300}",
-              "dark": "{color.blue.600}"
+              "default": "{color.blue.100}",
+              "dark": "{color.blue.800}"
             },
             "$type": "color",
-            "comment": "Used to compliment the info banner."
+            "comment": "Used for the border of an info banner."
           },
           "name": "BANNER_INTRO_BORDER_COLOR",
           "attributes": {},
@@ -9026,18 +9026,18 @@
     "promo": {
       "background": {
         "color": {
-          "value": "#28272d",
+          "value": "#232150",
           "$type": "color",
-          "comment": "Used as background for the default banner type.",
+          "comment": "Used for the background of a promo banner.",
           "filePath": "src/tokens/contextual/banner.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.purple.50}",
+              "dark": "{color.purple.950}"
             },
             "$type": "color",
-            "comment": "Used as background for the default banner type."
+            "comment": "Used for the background of a promo banner."
           },
           "name": "BANNER_PROMO_BACKGROUND_COLOR",
           "attributes": {},
@@ -9048,6 +9048,31 @@
             "color"
           ]
         }
+      },
+      "border": {
+        "color": {
+          "value": "#453894",
+          "$type": "color",
+          "comment": "Used for the border of a promo banner.",
+          "filePath": "src/tokens/contextual/banner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.purple.100}",
+              "dark": "{color.purple.800}"
+            },
+            "$type": "color",
+            "comment": "Used for the border of a promo banner."
+          },
+          "name": "BANNER_PROMO_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "banner",
+            "promo",
+            "border",
+            "color"
+          ]
+        }
       }
     }
   },
@@ -12535,6 +12560,38 @@
       }
     }
   },
+  "tab": {
+    "selected": {
+      "indicator": {
+        "color": {
+          "default": {
+            "value": "#428fdc",
+            "$type": "color",
+            "comment": "Used for the selected indicator of a tab.",
+            "filePath": "src/tokens/contextual/tabs.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "comment": "Used for the selected indicator of a tab."
+            },
+            "name": "TAB_SELECTED_INDICATOR_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "tab",
+              "selected",
+              "indicator",
+              "color",
+              "default"
+            ]
+          }
+        }
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {
@@ -17417,7 +17474,7 @@
     "info": {
       "background": {
         "color": {
-          "value": "#033464",
+          "value": "#002850",
           "$type": "color",
           "comment": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
           "filePath": "src/tokens/feedback.tokens.json",
@@ -17425,7 +17482,7 @@
           "original": {
             "value": {
               "default": "{color.blue.50}",
-              "dark": "{color.blue.900}"
+              "dark": "{color.blue.950}"
             },
             "$type": "color",
             "comment": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."

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

@@ -8999,18 +8999,18 @@
     "intro": {
       "border": {
         "color": {
-          "value": "#63a6e9",
+          "value": "#cbe2f9",
           "$type": "color",
-          "comment": "Used to compliment the info banner.",
+          "comment": "Used for the border of an info banner.",
           "filePath": "src/tokens/contextual/banner.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.blue.300}",
-              "dark": "{color.blue.600}"
+              "default": "{color.blue.100}",
+              "dark": "{color.blue.800}"
             },
             "$type": "color",
-            "comment": "Used to compliment the info banner."
+            "comment": "Used for the border of an info banner."
           },
           "name": "BANNER_INTRO_BORDER_COLOR",
           "attributes": {},
@@ -9026,18 +9026,18 @@
     "promo": {
       "background": {
         "color": {
-          "value": "#fbfafd",
+          "value": "#f4f0ff",
           "$type": "color",
-          "comment": "Used as background for the default banner type.",
+          "comment": "Used for the background of a promo banner.",
           "filePath": "src/tokens/contextual/banner.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.purple.50}",
+              "dark": "{color.purple.950}"
             },
             "$type": "color",
-            "comment": "Used as background for the default banner type."
+            "comment": "Used for the background of a promo banner."
           },
           "name": "BANNER_PROMO_BACKGROUND_COLOR",
           "attributes": {},
@@ -9048,6 +9048,31 @@
             "color"
           ]
         }
+      },
+      "border": {
+        "color": {
+          "value": "#e1d8f9",
+          "$type": "color",
+          "comment": "Used for the border of a promo banner.",
+          "filePath": "src/tokens/contextual/banner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.purple.100}",
+              "dark": "{color.purple.800}"
+            },
+            "$type": "color",
+            "comment": "Used for the border of a promo banner."
+          },
+          "name": "BANNER_PROMO_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "banner",
+            "promo",
+            "border",
+            "color"
+          ]
+        }
       }
     }
   },
@@ -12535,6 +12560,38 @@
       }
     }
   },
+  "tab": {
+    "selected": {
+      "indicator": {
+        "color": {
+          "default": {
+            "value": "#1f75cb",
+            "$type": "color",
+            "comment": "Used for the selected indicator of a tab.",
+            "filePath": "src/tokens/contextual/tabs.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "comment": "Used for the selected indicator of a tab."
+            },
+            "name": "TAB_SELECTED_INDICATOR_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "tab",
+              "selected",
+              "indicator",
+              "color",
+              "default"
+            ]
+          }
+        }
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {
@@ -17425,7 +17482,7 @@
           "original": {
             "value": {
               "default": "{color.blue.50}",
-              "dark": "{color.blue.900}"
+              "dark": "{color.blue.950}"
             },
             "$type": "color",
             "comment": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."

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

@@ -469,7 +469,7 @@ $gl-feedback-success-text-color: $gl-color-green-200; // Used for the text of a
 $gl-feedback-success-background-color: $gl-color-green-900; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-info-text-color: $gl-color-blue-200; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
-$gl-feedback-info-background-color: $gl-color-blue-900; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-background-color: $gl-color-blue-950; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
@@ -494,6 +494,7 @@ $gl-control-background-color-readonly: $gl-color-neutral-900; // Used for the ba
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment 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-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
@@ -566,8 +567,9 @@ $gl-button-default-primary-background-color-hover: $gl-color-neutral-900; // Use
 $gl-button-default-primary-background-color-default: $gl-color-neutral-900; // Used for the background of an default primary button in the default state.
 $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a default primary button in the default state.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
-$gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
-$gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
+$gl-banner-promo-border-color: $gl-color-purple-800; // Used for the border of a promo banner.
+$gl-banner-promo-background-color: $gl-color-purple-950; // Used for the background of a promo banner.
+$gl-banner-intro-border-color: $gl-color-blue-800; // Used for the border of an info banner.
 $gl-badge-tier-icon-color-active: $gl-color-purple-950; // Used for the icon of a tier related badge in the active state.
 $gl-badge-tier-icon-color-hover: $gl-color-purple-950; // Used for the icon of a tier related badge in the hover state.
 $gl-badge-tier-icon-color-default: $gl-color-purple-950; // Used for the icon of a tier related badge when static or the default state when linked.

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

@@ -494,6 +494,7 @@ $gl-control-background-color-readonly: $gl-color-neutral-10; // Used for the bac
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-tab-selected-indicator-color-default: $gl-color-blue-500; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment 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.
@@ -566,8 +567,9 @@ $gl-button-default-primary-background-color-hover: $gl-color-neutral-50; // Used
 $gl-button-default-primary-background-color-default: $gl-color-neutral-0; // Used for the background of an default primary button in the default state.
 $gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // Used for the foreground of a default primary button in the default state.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
-$gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
-$gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
+$gl-banner-promo-border-color: $gl-color-purple-100; // Used for the border of a promo banner.
+$gl-banner-promo-background-color: $gl-color-purple-50; // Used for the background of a promo banner.
+$gl-banner-intro-border-color: $gl-color-blue-100; // Used for the border of an info banner.
 $gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
 $gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
 $gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -429,6 +429,7 @@ $gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-focus);
 $gl-badge-tier-icon-color-active: var(--gl-badge-tier-icon-color-active);
 $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
 $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
+$gl-banner-promo-border-color: var(--gl-banner-promo-border-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
 $gl-button-default-primary-foreground-color-default: var(--gl-button-default-primary-foreground-color-default);
 $gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover);
@@ -572,6 +573,7 @@ $gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
 $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
 $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
 $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
+$gl-tab-selected-indicator-color-default: var(--gl-tab-selected-indicator-color-default);
 $gl-control-background-color-default: var(--gl-control-background-color-default);
 $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
 $gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);

package/src/tokens/contextual/banner.tokens.json

@@ -4,11 +4,11 @@
       "border": {
         "color": {
           "$value": {
-            "default": "{color.blue.300}",
-            "dark": "{color.blue.600}"
+            "default": "{color.blue.100}",
+            "dark": "{color.blue.800}"
           },
           "$type": "color",
-          "$description": "Used to compliment the info banner."
+          "$description": "Used for the border of an info banner."
         }
       }
     },
@@ -16,11 +16,21 @@
       "background": {
         "color": {
           "$value": {
-            "default": "{color.neutral.10}",
-            "dark": "{color.neutral.900}"
+            "default": "{color.purple.50}",
+            "dark": "{color.purple.950}"
           },
           "$type": "color",
-          "$description": "Used as background for the default banner type."
+          "$description": "Used for the background of a promo banner."
+        }
+      },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.purple.100}",
+            "dark": "{color.purple.800}"
+          },
+          "$type": "color",
+          "$description": "Used for the border of a promo banner."
         }
       }
     }

package/src/tokens/contextual/tabs.tokens.json

@@ -0,0 +1,18 @@
+{
+  "tab": {
+    "selected": {
+      "indicator": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the selected indicator of a tab."
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/feedback.tokens.json

@@ -79,7 +79,7 @@
         "color": {
           "$value": {
             "default": "{color.blue.50}",
-            "dark": "{color.blue.900}"
+            "dark": "{color.blue.950}"
           },
           "$type": "color",
           "$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."