@gitlab/ui 85.4.1 → 85.6.0

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

@@ -421,7 +421,10 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+export const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
+export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
+export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.

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

@@ -8943,6 +8943,62 @@
       ]
     }
   },
+  "banner": {
+    "intro": {
+      "border": {
+        "color": {
+          "value": "#1068bf",
+          "$type": "color",
+          "comment": "Used to compliment the info banner.",
+          "filePath": "src/tokens/contextual/banner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.blue.300}",
+              "dark": "{color.blue.600}"
+            },
+            "$type": "color",
+            "comment": "Used to compliment the info banner."
+          },
+          "name": "BANNER_INTRO_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "banner",
+            "intro",
+            "border",
+            "color"
+          ]
+        }
+      }
+    },
+    "promo": {
+      "background": {
+        "color": {
+          "value": "#333238",
+          "$type": "color",
+          "comment": "Used as background for the default banner type.",
+          "filePath": "src/tokens/contextual/banner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.10}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "comment": "Used as background for the default banner type."
+          },
+          "name": "BANNER_PROMO_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "banner",
+            "promo",
+            "background",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "breadcrumb": {
     "separator": {
       "color": {
@@ -8969,6 +9025,32 @@
       }
     }
   },
+  "popover": {
+    "background": {
+      "color": {
+        "value": "#333238",
+        "$type": "color",
+        "comment": "Used for the background color of popover.",
+        "filePath": "src/tokens/contextual/popover.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used for the background color of popover."
+        },
+        "name": "POPOVER_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "popover",
+          "background",
+          "color"
+        ]
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {

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

@@ -8943,6 +8943,62 @@
       ]
     }
   },
+  "banner": {
+    "intro": {
+      "border": {
+        "color": {
+          "value": "#63a6e9",
+          "$type": "color",
+          "comment": "Used to compliment the info banner.",
+          "filePath": "src/tokens/contextual/banner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.blue.300}",
+              "dark": "{color.blue.600}"
+            },
+            "$type": "color",
+            "comment": "Used to compliment the info banner."
+          },
+          "name": "BANNER_INTRO_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "banner",
+            "intro",
+            "border",
+            "color"
+          ]
+        }
+      }
+    },
+    "promo": {
+      "background": {
+        "color": {
+          "value": "#fbfafd",
+          "$type": "color",
+          "comment": "Used as background for the default banner type.",
+          "filePath": "src/tokens/contextual/banner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.10}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "comment": "Used as background for the default banner type."
+          },
+          "name": "BANNER_PROMO_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "banner",
+            "promo",
+            "background",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "breadcrumb": {
     "separator": {
       "color": {
@@ -8969,6 +9025,32 @@
       }
     }
   },
+  "popover": {
+    "background": {
+      "color": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for the background color of popover.",
+        "filePath": "src/tokens/contextual/popover.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used for the background color of popover."
+        },
+        "name": "POPOVER_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "popover",
+          "background",
+          "color"
+        ]
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {

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

@@ -514,7 +514,10 @@ $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for che
 $gl-control-background-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 $gl-control-background-color-disabled: $gl-color-neutral-950; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-popover-background-color: $gl-color-neutral-900; // Used for the background color of popover.
 $gl-breadcrumb-separator-color: $gl-color-neutral-700; // 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-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.

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

@@ -514,7 +514,10 @@ $gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for che
 $gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 $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-popover-background-color: $gl-color-neutral-0; // Used for the background color of popover.
 $gl-breadcrumb-separator-color: $gl-color-neutral-200; // 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-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.

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

@@ -421,7 +421,10 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
+$gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
+$gl-popover-background-color: var(--gl-popover-background-color);
 $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-selected-default: var(--gl-control-background-color-selected-default);

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

@@ -0,0 +1,28 @@
+{
+  "banner": {
+    "intro": {
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.300}",
+            "dark": "{color.blue.600}"
+          },
+          "$type": "color",
+          "$description": "Used to compliment the info banner."
+        }
+      }
+    },
+    "promo": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "$description": "Used as background for the default banner type."
+        }
+      }
+    }
+  }
+}

package/src/tokens/contextual/popover.tokens.json

@@ -0,0 +1,14 @@
+{
+  "popover": {
+    "background": {
+      "color": {
+        "$value": {
+          "default": "{color.neutral.0}",
+          "dark": "{color.neutral.900}"
+        },
+        "$type": "color",
+        "$description": "Used for the background color of popover."
+      }
+    }
+  }
+}