@gitlab/ui 91.12.0 → 91.13.0

package/dist/tokens/json/tokens.json

@@ -1868,6 +1868,47 @@
           "disabled"
         ]
       },
+      "overlap": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
+        },
+        "name": "BACKGROUND_COLOR_OVERLAP",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "overlap"
+        ]
+      },
+      "section": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "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.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{background.color.overlap}",
+          "$type": "color",
+          "comment": "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."
+        },
+        "name": "BACKGROUND_COLOR_SECTION",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "section"
+        ]
+      },
       "overlay": {
         "value": "rgba(05, 05, 06, 0.24)",
         "$type": "color",
@@ -1960,6 +2001,28 @@
           "strong"
         ]
       },
+      "section": {
+        "value": "#dcdcde",
+        "$type": "color",
+        "comment": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{border.color.default}",
+            "dark": "{background.color.default}"
+          },
+          "$type": "color",
+          "comment": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page."
+        },
+        "name": "BORDER_COLOR_SECTION",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "section"
+        ]
+      },
       "transparent": {
         "value": "transparent",
         "$type": "color",

package/dist/tokens/scss/_tokens.dark.scss

@@ -721,6 +721,7 @@ $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border th
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
+$gl-background-color-overlap: $gl-color-neutral-800; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
@@ -834,6 +835,8 @@ $gl-alert-info-background-color: $gl-background-color-subtle; // Used for the ba
 $gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
+$gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-background-color-section: $gl-background-color-overlap; // 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-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

package/dist/tokens/scss/_tokens.scss

@@ -721,6 +721,7 @@ $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border th
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
+$gl-background-color-overlap: $gl-color-neutral-0; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
@@ -834,6 +835,8 @@ $gl-alert-info-background-color: $gl-feedback-info-background-color; // Used for
 $gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
+$gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-background-color-section: $gl-background-color-overlap; // 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-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -82,10 +82,13 @@ $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
 $gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-background-color-overlap: var(--gl-background-color-overlap);
+$gl-background-color-section: var(--gl-background-color-section);
 $gl-background-color-overlay: var(--gl-background-color-overlay);
 $gl-border-color-default: var(--gl-border-color-default);
 $gl-border-color-subtle: var(--gl-border-color-subtle);
 $gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-section: var(--gl-border-color-section);
 $gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);

package/dist/tokens/tailwind/tokens.cjs

@@ -218,6 +218,8 @@ const backgroundColors = {
   subtle: 'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
   strong: 'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
   disabled: 'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+  overlap: 'var(--gl-background-color-overlap, var(--gl-color-neutral-0, #fff))',
+  section: 'var(--gl-background-color-section, var(--gl-background-color-overlap, #fff))',
   overlay:
     'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24)))',
 };
@@ -225,6 +227,7 @@ 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))',
+  section: 'var(--gl-border-color-section, var(--gl-border-color-default, #dcdcde))',
   transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "91.12.0",
+  "version": "91.13.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss

@@ -27,7 +27,7 @@
     position: absolute;
     @include gl-transition-medium;
     @include gl-opacity-0;
-    right: $gl-spacing-scale-4;
+    right: $gl-spacing-scale-3;
     top: $gl-spacing-scale-3;
   }
 
@@ -62,4 +62,4 @@
   copy-code {
     margin-right: 0;
   }
-}
+}

package/src/tokens/background.tokens.json

@@ -33,6 +33,19 @@
         "$type": "color",
         "$description": "Used to identify a disabled section."
       },
+      "overlap": {
+        "$value": {
+          "default": "{color.neutral.0}",
+          "dark": "{color.neutral.800}"
+        },
+        "$type": "color",
+        "$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
+      },
+      "section": {
+        "$value": "{background.color.overlap}",
+        "$type": "color",
+        "$description": "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."
+      },
       "overlay": {
         "$value": {
           "default": "{color.alpha.dark.24}",

package/src/tokens/border.tokens.json

@@ -25,6 +25,14 @@
         "$type": "color",
         "$description": "Used for a distinct border that emphasizes an edge or boundaries."
       },
+      "section": {
+        "$value": {
+          "default": "{border.color.default}",
+          "dark": "{background.color.default}"
+        },
+        "$type": "color",
+        "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page."
+      },
       "transparent": {
         "$value": "{color.alpha.0}",
         "$type": "color",

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

@@ -723,6 +723,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
   --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */
+  --gl-background-color-overlap: var(--gl-color-neutral-0); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
@@ -836,6 +837,8 @@
   --gl-alert-info-title-color: var(--gl-text-color-heading); /* Used for the title color of an info alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
+  --gl-border-color-section: var(--gl-border-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-background-color-section: var(--gl-background-color-overlap); /* 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-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */

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

@@ -723,6 +723,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-800); /* Used for the default border color. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
+  --gl-background-color-overlap: var(--gl-color-neutral-800); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
@@ -836,6 +837,8 @@
   --gl-alert-info-title-color: var(--gl-color-blue-300); /* Used for the title color of an info alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
+  --gl-border-color-section: var(--gl-background-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-background-color-section: var(--gl-background-color-overlap); /* 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-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */

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

@@ -82,10 +82,13 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#18171d'; // Used for the default ba
 export const GL_BACKGROUND_COLOR_SUBTLE = '#28272d'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#3a383f'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#28272d'; // Used to identify a disabled section.
+export const GL_BACKGROUND_COLOR_OVERLAP = '#3a383f'; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
+export const GL_BACKGROUND_COLOR_SECTION = '#3a383f'; // 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.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)'; // Used for an overlay that covers other content.
 export const GL_BORDER_COLOR_DEFAULT = '#3a383f'; // Used for the default border color.
 export const GL_BORDER_COLOR_SUBTLE = '#28272d'; // Used for a subtle border in combination with the default background.
 export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_SECTION = '#18171d'; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';
 export const GL_COLOR_ALPHA_DARK_2 = 'rgba(05, 05, 06, 0.02)';

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

@@ -82,10 +82,13 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default backg
 export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
+export const GL_BACKGROUND_COLOR_OVERLAP = '#fff'; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
+export const GL_BACKGROUND_COLOR_SECTION = '#fff'; // 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.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(05, 05, 06, 0.24)'; // Used for an overlay that covers other content.
 export const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
 export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a subtle border in combination with the default background.
 export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_SECTION = '#dcdcde'; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';
 export const GL_COLOR_ALPHA_DARK_2 = 'rgba(05, 05, 06, 0.02)';

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

@@ -1868,6 +1868,47 @@
           "disabled"
         ]
       },
+      "overlap": {
+        "value": "#3a383f",
+        "$type": "color",
+        "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
+        },
+        "name": "BACKGROUND_COLOR_OVERLAP",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "overlap"
+        ]
+      },
+      "section": {
+        "value": "#3a383f",
+        "$type": "color",
+        "comment": "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.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{background.color.overlap}",
+          "$type": "color",
+          "comment": "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."
+        },
+        "name": "BACKGROUND_COLOR_SECTION",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "section"
+        ]
+      },
       "overlay": {
         "value": "rgba(0,0,0,0.64)",
         "$type": "color",
@@ -1960,6 +2001,28 @@
           "strong"
         ]
       },
+      "section": {
+        "value": "#18171d",
+        "$type": "color",
+        "comment": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{border.color.default}",
+            "dark": "{background.color.default}"
+          },
+          "$type": "color",
+          "comment": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page."
+        },
+        "name": "BORDER_COLOR_SECTION",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "section"
+        ]
+      },
       "transparent": {
         "value": "transparent",
         "$type": "color",

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

@@ -1868,6 +1868,47 @@
           "disabled"
         ]
       },
+      "overlap": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
+        },
+        "name": "BACKGROUND_COLOR_OVERLAP",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "overlap"
+        ]
+      },
+      "section": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "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.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{background.color.overlap}",
+          "$type": "color",
+          "comment": "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."
+        },
+        "name": "BACKGROUND_COLOR_SECTION",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "section"
+        ]
+      },
       "overlay": {
         "value": "rgba(05, 05, 06, 0.24)",
         "$type": "color",
@@ -1960,6 +2001,28 @@
           "strong"
         ]
       },
+      "section": {
+        "value": "#dcdcde",
+        "$type": "color",
+        "comment": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{border.color.default}",
+            "dark": "{background.color.default}"
+          },
+          "$type": "color",
+          "comment": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page."
+        },
+        "name": "BORDER_COLOR_SECTION",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "section"
+        ]
+      },
       "transparent": {
         "value": "transparent",
         "$type": "color",

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

@@ -721,6 +721,7 @@ $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border th
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
+$gl-background-color-overlap: $gl-color-neutral-800; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
@@ -834,6 +835,8 @@ $gl-alert-info-background-color: $gl-background-color-subtle; // Used for the ba
 $gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
+$gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-background-color-section: $gl-background-color-overlap; // 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-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

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

@@ -721,6 +721,7 @@ $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border th
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
+$gl-background-color-overlap: $gl-color-neutral-0; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
@@ -834,6 +835,8 @@ $gl-alert-info-background-color: $gl-feedback-info-background-color; // Used for
 $gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
+$gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-background-color-section: $gl-background-color-overlap; // 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-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

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

@@ -82,10 +82,13 @@ $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
 $gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-background-color-overlap: var(--gl-background-color-overlap);
+$gl-background-color-section: var(--gl-background-color-section);
 $gl-background-color-overlay: var(--gl-background-color-overlay);
 $gl-border-color-default: var(--gl-border-color-default);
 $gl-border-color-subtle: var(--gl-border-color-subtle);
 $gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-section: var(--gl-border-color-section);
 $gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);

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

@@ -218,6 +218,8 @@ const backgroundColors = {
   subtle: 'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
   strong: 'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
   disabled: 'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+  overlap: 'var(--gl-background-color-overlap, var(--gl-color-neutral-0, #fff))',
+  section: 'var(--gl-background-color-section, var(--gl-background-color-overlap, #fff))',
   overlay:
     'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24)))',
 };
@@ -225,6 +227,7 @@ 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))',
+  section: 'var(--gl-border-color-section, var(--gl-border-color-default, #dcdcde))',
   transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {