@gitlab/ui 91.11.0 → 91.13.0

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

@@ -570,6 +570,46 @@ $gl-button-default-primary-background-color-active: $gl-color-neutral-800; // Us
 $gl-button-default-primary-background-color-hover: $gl-color-neutral-900; // Used for the background of an default primary button in the hover state.
 $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-broadcast-banner-text-color-red: $gl-color-neutral-0; // Used for the text for the red banner type.
+$gl-broadcast-banner-text-color-lightred: $gl-color-neutral-0; // Used for the text for the lightred banner type.
+$gl-broadcast-banner-text-color-lightindigo: $gl-color-neutral-0; // Used for the text for the lightindigo banner type.
+$gl-broadcast-banner-text-color-lightgreen: $gl-color-neutral-0; // Used for the text for the lightgreen banner type.
+$gl-broadcast-banner-text-color-lightblue: $gl-color-neutral-0; // Used for the text for the lightblue banner type.
+$gl-broadcast-banner-text-color-light: $gl-color-neutral-900; // Used for the text for the light banner type.
+$gl-broadcast-banner-text-color-indigo: $gl-color-neutral-0; // Used for the text for the indigo banner type.
+$gl-broadcast-banner-text-color-green: $gl-color-neutral-0; // Used for the text for the green banner type.
+$gl-broadcast-banner-text-color-dark: $gl-color-neutral-0; // Used for the text for the dark banner type.
+$gl-broadcast-banner-text-color-blue: $gl-color-neutral-0; // Used for the text for the blue banner type.
+$gl-broadcast-banner-icon-color-red: $gl-color-neutral-0; // Used for the icon for the red banner type.
+$gl-broadcast-banner-icon-color-lightred: $gl-color-neutral-0; // Used for the icon for the lightred banner type.
+$gl-broadcast-banner-icon-color-lightindigo: $gl-color-neutral-0; // Used for the icon for the lightindigo banner type.
+$gl-broadcast-banner-icon-color-lightgreen: $gl-color-neutral-0; // Used for the icon for the lightgreen banner type.
+$gl-broadcast-banner-icon-color-lightblue: $gl-color-neutral-0; // Used for the icon for the lightblue banner type.
+$gl-broadcast-banner-icon-color-light: $gl-color-neutral-900; // Used for the icon for the light banner type.
+$gl-broadcast-banner-icon-color-indigo: $gl-color-neutral-0; // Used for the icon for the indigo banner type.
+$gl-broadcast-banner-icon-color-green: $gl-color-neutral-0; // Used for the icon for the green banner type.
+$gl-broadcast-banner-icon-color-dark: $gl-color-neutral-0; // Used for the icon for the dark banner type.
+$gl-broadcast-banner-icon-color-blue: $gl-color-neutral-0; // Used for the icon for the blue banner type.
+$gl-broadcast-banner-border-color-red: $gl-color-theme-red-900; // Used for the border for the red banner type.
+$gl-broadcast-banner-border-color-lightred: $gl-color-theme-red-700; // Used for the border for the lightred banner type.
+$gl-broadcast-banner-border-color-lightindigo: $gl-color-theme-indigo-700; // Used for the border for the lightindigo banner type.
+$gl-broadcast-banner-border-color-lightgreen: $gl-color-theme-green-700; // Used for the border for the lightgreen banner type.
+$gl-broadcast-banner-border-color-lightblue: $gl-color-theme-blue-700; // Used for the border for the lightblue banner type.
+$gl-broadcast-banner-border-color-light: $gl-color-neutral-100; // Used for the border for the light banner type.
+$gl-broadcast-banner-border-color-indigo: $gl-color-theme-indigo-900; // Used for the border for the indigo banner type.
+$gl-broadcast-banner-border-color-green: $gl-color-theme-green-900; // Used for the border for the green banner type.
+$gl-broadcast-banner-border-color-dark: $gl-color-neutral-700; // Used for the border for the dark banner type.
+$gl-broadcast-banner-border-color-blue: $gl-color-theme-blue-900; // Used for the border for the blue banner type.
+$gl-broadcast-banner-background-color-red: $gl-color-theme-red-700; // Used for the background for the red banner type.
+$gl-broadcast-banner-background-color-lightred: $gl-color-theme-red-500; // Used for the background for the lightred banner type.
+$gl-broadcast-banner-background-color-lightindigo: $gl-color-theme-indigo-500; // Used for the background for the lightindigo banner type.
+$gl-broadcast-banner-background-color-lightgreen: $gl-color-theme-green-500; // Used for the background for the lightgreen banner type.
+$gl-broadcast-banner-background-color-lightblue: $gl-color-theme-blue-500; // Used for the background for the lightblue banner type.
+$gl-broadcast-banner-background-color-light: $gl-color-neutral-50; // Used for the background for the light banner type.
+$gl-broadcast-banner-background-color-indigo: $gl-color-theme-indigo-700; // Used for the background for the indigo banner type.
+$gl-broadcast-banner-background-color-green: $gl-color-theme-green-700; // Used for the background for the green banner type.
+$gl-broadcast-banner-background-color-dark: $gl-color-neutral-500; // Used for the background for the dark banner type.
+$gl-broadcast-banner-background-color-blue: $gl-color-theme-blue-700; // Used for the background for the blue banner type.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $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.
@@ -681,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.
@@ -794,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

@@ -570,6 +570,46 @@ $gl-button-default-primary-background-color-active: $gl-color-neutral-100; // Us
 $gl-button-default-primary-background-color-hover: $gl-color-neutral-50; // Used for the background of an default primary button in the hover state.
 $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-broadcast-banner-text-color-red: $gl-color-neutral-0; // Used for the text for the red banner type.
+$gl-broadcast-banner-text-color-lightred: $gl-color-neutral-0; // Used for the text for the lightred banner type.
+$gl-broadcast-banner-text-color-lightindigo: $gl-color-neutral-0; // Used for the text for the lightindigo banner type.
+$gl-broadcast-banner-text-color-lightgreen: $gl-color-neutral-0; // Used for the text for the lightgreen banner type.
+$gl-broadcast-banner-text-color-lightblue: $gl-color-neutral-0; // Used for the text for the lightblue banner type.
+$gl-broadcast-banner-text-color-light: $gl-color-neutral-900; // Used for the text for the light banner type.
+$gl-broadcast-banner-text-color-indigo: $gl-color-neutral-0; // Used for the text for the indigo banner type.
+$gl-broadcast-banner-text-color-green: $gl-color-neutral-0; // Used for the text for the green banner type.
+$gl-broadcast-banner-text-color-dark: $gl-color-neutral-0; // Used for the text for the dark banner type.
+$gl-broadcast-banner-text-color-blue: $gl-color-neutral-0; // Used for the text for the blue banner type.
+$gl-broadcast-banner-icon-color-red: $gl-color-neutral-0; // Used for the icon for the red banner type.
+$gl-broadcast-banner-icon-color-lightred: $gl-color-neutral-0; // Used for the icon for the lightred banner type.
+$gl-broadcast-banner-icon-color-lightindigo: $gl-color-neutral-0; // Used for the icon for the lightindigo banner type.
+$gl-broadcast-banner-icon-color-lightgreen: $gl-color-neutral-0; // Used for the icon for the lightgreen banner type.
+$gl-broadcast-banner-icon-color-lightblue: $gl-color-neutral-0; // Used for the icon for the lightblue banner type.
+$gl-broadcast-banner-icon-color-light: $gl-color-neutral-900; // Used for the icon for the light banner type.
+$gl-broadcast-banner-icon-color-indigo: $gl-color-neutral-0; // Used for the icon for the indigo banner type.
+$gl-broadcast-banner-icon-color-green: $gl-color-neutral-0; // Used for the icon for the green banner type.
+$gl-broadcast-banner-icon-color-dark: $gl-color-neutral-0; // Used for the icon for the dark banner type.
+$gl-broadcast-banner-icon-color-blue: $gl-color-neutral-0; // Used for the icon for the blue banner type.
+$gl-broadcast-banner-border-color-red: $gl-color-theme-red-900; // Used for the border for the red banner type.
+$gl-broadcast-banner-border-color-lightred: $gl-color-theme-red-700; // Used for the border for the lightred banner type.
+$gl-broadcast-banner-border-color-lightindigo: $gl-color-theme-indigo-700; // Used for the border for the lightindigo banner type.
+$gl-broadcast-banner-border-color-lightgreen: $gl-color-theme-green-700; // Used for the border for the lightgreen banner type.
+$gl-broadcast-banner-border-color-lightblue: $gl-color-theme-blue-700; // Used for the border for the lightblue banner type.
+$gl-broadcast-banner-border-color-light: $gl-color-neutral-100; // Used for the border for the light banner type.
+$gl-broadcast-banner-border-color-indigo: $gl-color-theme-indigo-900; // Used for the border for the indigo banner type.
+$gl-broadcast-banner-border-color-green: $gl-color-theme-green-900; // Used for the border for the green banner type.
+$gl-broadcast-banner-border-color-dark: $gl-color-neutral-700; // Used for the border for the dark banner type.
+$gl-broadcast-banner-border-color-blue: $gl-color-theme-blue-900; // Used for the border for the blue banner type.
+$gl-broadcast-banner-background-color-red: $gl-color-theme-red-700; // Used for the background for the red banner type.
+$gl-broadcast-banner-background-color-lightred: $gl-color-theme-red-500; // Used for the background for the lightred banner type.
+$gl-broadcast-banner-background-color-lightindigo: $gl-color-theme-indigo-500; // Used for the background for the lightindigo banner type.
+$gl-broadcast-banner-background-color-lightgreen: $gl-color-theme-green-500; // Used for the background for the lightgreen banner type.
+$gl-broadcast-banner-background-color-lightblue: $gl-color-theme-blue-500; // Used for the background for the lightblue banner type.
+$gl-broadcast-banner-background-color-light: $gl-color-neutral-50; // Used for the background for the light banner type.
+$gl-broadcast-banner-background-color-indigo: $gl-color-theme-indigo-700; // Used for the background for the indigo banner type.
+$gl-broadcast-banner-background-color-green: $gl-color-theme-green-700; // Used for the background for the green banner type.
+$gl-broadcast-banner-background-color-dark: $gl-color-neutral-500; // Used for the background for the dark banner type.
+$gl-broadcast-banner-background-color-blue: $gl-color-theme-blue-700; // Used for the background for the blue banner type.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $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.
@@ -681,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.
@@ -794,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);
@@ -463,6 +466,46 @@ $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-broadcast-banner-background-color-blue: var(--gl-broadcast-banner-background-color-blue);
+$gl-broadcast-banner-background-color-dark: var(--gl-broadcast-banner-background-color-dark);
+$gl-broadcast-banner-background-color-green: var(--gl-broadcast-banner-background-color-green);
+$gl-broadcast-banner-background-color-indigo: var(--gl-broadcast-banner-background-color-indigo);
+$gl-broadcast-banner-background-color-light: var(--gl-broadcast-banner-background-color-light);
+$gl-broadcast-banner-background-color-lightblue: var(--gl-broadcast-banner-background-color-lightblue);
+$gl-broadcast-banner-background-color-lightgreen: var(--gl-broadcast-banner-background-color-lightgreen);
+$gl-broadcast-banner-background-color-lightindigo: var(--gl-broadcast-banner-background-color-lightindigo);
+$gl-broadcast-banner-background-color-lightred: var(--gl-broadcast-banner-background-color-lightred);
+$gl-broadcast-banner-background-color-red: var(--gl-broadcast-banner-background-color-red);
+$gl-broadcast-banner-border-color-blue: var(--gl-broadcast-banner-border-color-blue);
+$gl-broadcast-banner-border-color-dark: var(--gl-broadcast-banner-border-color-dark);
+$gl-broadcast-banner-border-color-green: var(--gl-broadcast-banner-border-color-green);
+$gl-broadcast-banner-border-color-indigo: var(--gl-broadcast-banner-border-color-indigo);
+$gl-broadcast-banner-border-color-light: var(--gl-broadcast-banner-border-color-light);
+$gl-broadcast-banner-border-color-lightblue: var(--gl-broadcast-banner-border-color-lightblue);
+$gl-broadcast-banner-border-color-lightgreen: var(--gl-broadcast-banner-border-color-lightgreen);
+$gl-broadcast-banner-border-color-lightindigo: var(--gl-broadcast-banner-border-color-lightindigo);
+$gl-broadcast-banner-border-color-lightred: var(--gl-broadcast-banner-border-color-lightred);
+$gl-broadcast-banner-border-color-red: var(--gl-broadcast-banner-border-color-red);
+$gl-broadcast-banner-icon-color-blue: var(--gl-broadcast-banner-icon-color-blue);
+$gl-broadcast-banner-icon-color-dark: var(--gl-broadcast-banner-icon-color-dark);
+$gl-broadcast-banner-icon-color-green: var(--gl-broadcast-banner-icon-color-green);
+$gl-broadcast-banner-icon-color-indigo: var(--gl-broadcast-banner-icon-color-indigo);
+$gl-broadcast-banner-icon-color-light: var(--gl-broadcast-banner-icon-color-light);
+$gl-broadcast-banner-icon-color-lightblue: var(--gl-broadcast-banner-icon-color-lightblue);
+$gl-broadcast-banner-icon-color-lightgreen: var(--gl-broadcast-banner-icon-color-lightgreen);
+$gl-broadcast-banner-icon-color-lightindigo: var(--gl-broadcast-banner-icon-color-lightindigo);
+$gl-broadcast-banner-icon-color-lightred: var(--gl-broadcast-banner-icon-color-lightred);
+$gl-broadcast-banner-icon-color-red: var(--gl-broadcast-banner-icon-color-red);
+$gl-broadcast-banner-text-color-blue: var(--gl-broadcast-banner-text-color-blue);
+$gl-broadcast-banner-text-color-dark: var(--gl-broadcast-banner-text-color-dark);
+$gl-broadcast-banner-text-color-green: var(--gl-broadcast-banner-text-color-green);
+$gl-broadcast-banner-text-color-indigo: var(--gl-broadcast-banner-text-color-indigo);
+$gl-broadcast-banner-text-color-light: var(--gl-broadcast-banner-text-color-light);
+$gl-broadcast-banner-text-color-lightblue: var(--gl-broadcast-banner-text-color-lightblue);
+$gl-broadcast-banner-text-color-lightgreen: var(--gl-broadcast-banner-text-color-lightgreen);
+$gl-broadcast-banner-text-color-lightindigo: var(--gl-broadcast-banner-text-color-lightindigo);
+$gl-broadcast-banner-text-color-lightred: var(--gl-broadcast-banner-text-color-lightred);
+$gl-broadcast-banner-text-color-red: var(--gl-broadcast-banner-text-color-red);
 $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);
 $gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus);

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 = {

package/src/tokens/contextual/broadcast.tokens.json

@@ -0,0 +1,222 @@
+{
+  "broadcast": {
+    "banner": {
+      "background": {
+        "color": {
+          "blue": {
+            "$value": "{color.theme-blue.700}",
+            "$type": "color",
+            "$description": "Used for the background for the blue banner type."
+          },
+          "dark": {
+            "$value": "{color.neutral.500}",
+            "$type": "color",
+            "$description": "Used for the background for the dark banner type."
+          },
+          "green": {
+            "$value": "{color.theme-green.700}",
+            "$type": "color",
+            "$description": "Used for the background for the green banner type."
+          },
+          "indigo": {
+            "$value": "{color.theme-indigo.700}",
+            "$type": "color",
+            "$description": "Used for the background for the indigo banner type."
+          },
+          "light": {
+            "$value": "{color.neutral.50}",
+            "$type": "color",
+            "$description": "Used for the background for the light banner type."
+          },
+          "lightblue": {
+            "$value": "{color.theme-blue.500}",
+            "$type": "color",
+            "$description": "Used for the background for the lightblue banner type."
+          },
+          "lightgreen": {
+            "$value": "{color.theme-green.500}",
+            "$type": "color",
+            "$description": "Used for the background for the lightgreen banner type."
+          },
+          "lightindigo": {
+            "$value": "{color.theme-indigo.500}",
+            "$type": "color",
+            "$description": "Used for the background for the lightindigo banner type."
+          },
+          "lightred": {
+            "$value": "{color.theme-red.500}",
+            "$type": "color",
+            "$description": "Used for the background for the lightred banner type."
+          },
+          "red": {
+            "$value": "{color.theme-red.700}",
+            "$type": "color",
+            "$description": "Used for the background for the red banner type."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "blue": {
+            "$value": "{color.theme-blue.900}",
+            "$type": "color",
+            "$description": "Used for the border for the blue banner type."
+          },
+          "dark": {
+            "$value": "{color.neutral.700}",
+            "$type": "color",
+            "$description": "Used for the border for the dark banner type."
+          },
+          "green": {
+            "$value": "{color.theme-green.900}",
+            "$type": "color",
+            "$description": "Used for the border for the green banner type."
+          },
+          "indigo": {
+            "$value": "{color.theme-indigo.900}",
+            "$type": "color",
+            "$description": "Used for the border for the indigo banner type."
+          },
+          "light": {
+            "$value": "{color.neutral.100}",
+            "$type": "color",
+            "$description": "Used for the border for the light banner type."
+          },
+          "lightblue": {
+            "$value": "{color.theme-blue.700}",
+            "$type": "color",
+            "$description": "Used for the border for the lightblue banner type."
+          },
+          "lightgreen": {
+            "$value": "{color.theme-green.700}",
+            "$type": "color",
+            "$description": "Used for the border for the lightgreen banner type."
+          },
+          "lightindigo": {
+            "$value": "{color.theme-indigo.700}",
+            "$type": "color",
+            "$description": "Used for the border for the lightindigo banner type."
+          },
+          "lightred": {
+            "$value": "{color.theme-red.700}",
+            "$type": "color",
+            "$description": "Used for the border for the lightred banner type."
+          },
+          "red": {
+            "$value": "{color.theme-red.900}",
+            "$type": "color",
+            "$description": "Used for the border for the red banner type."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "blue": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the blue banner type."
+          },
+          "dark": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the dark banner type."
+          },
+          "green": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the green banner type."
+          },
+          "indigo": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the indigo banner type."
+          },
+          "light": {
+            "$value": "{color.neutral.900}",
+            "$type": "color",
+            "$description": "Used for the icon for the light banner type."
+          },
+          "lightblue": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the lightblue banner type."
+          },
+          "lightgreen": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the lightgreen banner type."
+          },
+          "lightindigo": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the lightindigo banner type."
+          },
+          "lightred": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the lightred banner type."
+          },
+          "red": {
+            "$value": "{color.neutral.0}",
+            "$type": "color",
+            "$description": "Used for the icon for the red banner type."
+          }
+        }
+      },
+      "text": {
+        "color": {
+           "blue": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the blue banner type."
+           },
+           "dark": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the dark banner type."
+           },
+           "green": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the green banner type."
+           },
+           "indigo": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the indigo banner type."
+           },
+           "light": {
+             "$value": "{color.neutral.900}",
+             "$type": "color",
+             "$description": "Used for the text for the light banner type."
+           },
+           "lightblue": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the lightblue banner type."
+           },
+           "lightgreen": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the lightgreen banner type."
+           },
+           "lightindigo": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the lightindigo banner type."
+           },
+           "lightred": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the lightred banner type."
+           },
+           "red": {
+             "$value": "{color.neutral.0}",
+             "$type": "color",
+             "$description": "Used for the text for the red banner type."
+           }
+         }
+      }
+    }
+  }
+}