@gitlab/ui 90.5.0 → 91.1.0

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

@@ -77,6 +77,284 @@
         }
       }
     },
+    "selected": {
+      "foreground": {
+        "color": {
+          "default": {
+            "value": "#fff",
+            "$type": "color",
+            "comment": "Used for the foreground of a selected action in the default state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.neutral.0}",
+                "dark": "{color.neutral.950}"
+              },
+              "$type": "color",
+              "comment": "Used for the foreground of a selected action in the default state."
+            },
+            "name": "ACTION_SELECTED_FOREGROUND_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "foreground",
+              "color",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#fff",
+            "$type": "color",
+            "comment": "Used for the foreground of a selected action in the hover state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.selected.foreground.color.default}",
+              "$type": "color",
+              "comment": "Used for the foreground of a selected action in the hover state."
+            },
+            "name": "ACTION_SELECTED_FOREGROUND_COLOR_HOVER",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "foreground",
+              "color",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#fff",
+            "$type": "color",
+            "comment": "Used for the foreground of a selected action in the focus state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.selected.foreground.color.hover}",
+              "$type": "color",
+              "comment": "Used for the foreground of a selected action in the focus state."
+            },
+            "name": "ACTION_SELECTED_FOREGROUND_COLOR_FOCUS",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "foreground",
+              "color",
+              "focus"
+            ]
+          },
+          "active": {
+            "value": "#fff",
+            "$type": "color",
+            "comment": "Used for the foreground of a selected action in the active state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.selected.foreground.color.focus}",
+              "$type": "color",
+              "comment": "Used for the foreground of a selected action in the active state."
+            },
+            "name": "ACTION_SELECTED_FOREGROUND_COLOR_ACTIVE",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "foreground",
+              "color",
+              "active"
+            ]
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "default": {
+            "value": "#1f75cb",
+            "$type": "color",
+            "comment": "Used for the background of a selected action in the default state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.300}"
+              },
+              "$type": "color",
+              "comment": "Used for the background of a selected action in the default state."
+            },
+            "name": "ACTION_SELECTED_BACKGROUND_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "background",
+              "color",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for the background of a selected action in the hover state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for the background of a selected action in the hover state."
+            },
+            "name": "ACTION_SELECTED_BACKGROUND_COLOR_HOVER",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "background",
+              "color",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for the background of a selected action in the focus state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.selected.background.color.hover}",
+              "$type": "color",
+              "comment": "Used for the background of a selected action in the focus state."
+            },
+            "name": "ACTION_SELECTED_BACKGROUND_COLOR_FOCUS",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "background",
+              "color",
+              "focus"
+            ]
+          },
+          "active": {
+            "value": "#064787",
+            "$type": "color",
+            "comment": "Used for the background of a selected action in the active state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.800}",
+                "dark": "{color.blue.100}"
+              },
+              "$type": "color",
+              "comment": "Used for the background of a selected action in the active state."
+            },
+            "name": "ACTION_SELECTED_BACKGROUND_COLOR_ACTIVE",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "background",
+              "color",
+              "active"
+            ]
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "value": "#1f75cb",
+            "$type": "color",
+            "comment": "Used for the border of a selected action in the default state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.selected.background.color.default}",
+              "$type": "color",
+              "comment": "Used for the border of a selected action in the default state."
+            },
+            "name": "ACTION_SELECTED_BORDER_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "border",
+              "color",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for the border of a selected action in the hover state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.selected.background.color.hover}",
+              "$type": "color",
+              "comment": "Used for the border of a selected action in the hover state."
+            },
+            "name": "ACTION_SELECTED_BORDER_COLOR_HOVER",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "border",
+              "color",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for the border of a selected action in the focus state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.selected.background.color.focus}",
+              "$type": "color",
+              "comment": "Used for the border of a selected action in the focus state."
+            },
+            "name": "ACTION_SELECTED_BORDER_COLOR_FOCUS",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "border",
+              "color",
+              "focus"
+            ]
+          },
+          "active": {
+            "value": "#064787",
+            "$type": "color",
+            "comment": "Used for the border of a selected action in the active state.",
+            "filePath": "src/tokens/action.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.selected.background.color.active}",
+              "$type": "color",
+              "comment": "Used for the border of a selected action in the active state."
+            },
+            "name": "ACTION_SELECTED_BORDER_COLOR_ACTIVE",
+            "attributes": {},
+            "path": [
+              "action",
+              "selected",
+              "border",
+              "color",
+              "active"
+            ]
+          }
+        }
+      }
+    },
     "neutral": {
       "foreground": {
         "color": {

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

@@ -706,6 +706,10 @@ $gl-action-confirm-foreground-color-default: $gl-color-blue-400; // Used for the
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
 $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
 $gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a neutral action in the default state.
+$gl-action-selected-background-color-active: $gl-color-blue-100; // Used for the background of a selected action in the active state.
+$gl-action-selected-background-color-hover: $gl-color-blue-200; // Used for the background of a selected action in the hover state.
+$gl-action-selected-background-color-default: $gl-color-blue-300; // Used for the background of a selected action in the default state.
+$gl-action-selected-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a selected action in the default state.
 $gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled action.
@@ -808,6 +812,11 @@ $gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default;
 $gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
 $gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
 $gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
+$gl-action-selected-border-color-active: $gl-action-selected-background-color-active; // Used for the border of a selected action in the active state.
+$gl-action-selected-border-color-hover: $gl-action-selected-background-color-hover; // Used for the border of a selected action in the hover state.
+$gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
+$gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
+$gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
 $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
@@ -844,9 +853,12 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
 $gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-foreground-color-hover; // Used for the foreground of a strong neutral action in the focus state.
 $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
+$gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
+$gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
 $gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
+$gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.

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

@@ -706,6 +706,10 @@ $gl-action-confirm-foreground-color-default: $gl-color-blue-500; // Used for the
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
 $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
 $gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a neutral action in the default state.
+$gl-action-selected-background-color-active: $gl-color-blue-800; // Used for the background of a selected action in the active state.
+$gl-action-selected-background-color-hover: $gl-color-blue-700; // Used for the background of a selected action in the hover state.
+$gl-action-selected-background-color-default: $gl-color-blue-500; // Used for the background of a selected action in the default state.
+$gl-action-selected-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a selected action in the default state.
 $gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.
@@ -808,6 +812,11 @@ $gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default;
 $gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
 $gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
 $gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
+$gl-action-selected-border-color-active: $gl-action-selected-background-color-active; // Used for the border of a selected action in the active state.
+$gl-action-selected-border-color-hover: $gl-action-selected-background-color-hover; // Used for the border of a selected action in the hover state.
+$gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
+$gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
+$gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
 $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
@@ -844,9 +853,12 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
 $gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-foreground-color-hover; // Used for the foreground of a strong neutral action in the focus state.
 $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
+$gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
+$gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
 $gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
+$gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.

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

@@ -6,6 +6,18 @@
 $gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
 $gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
 $gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
+$gl-action-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default);
+$gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover);
+$gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus);
+$gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active);
+$gl-action-selected-background-color-default: var(--gl-action-selected-background-color-default);
+$gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
+$gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
+$gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
+$gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
+$gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
+$gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);
+$gl-action-selected-border-color-active: var(--gl-action-selected-border-color-active);
 $gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
 $gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
 $gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);

package/src/utils/constants.js

@@ -33,8 +33,6 @@ export const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 
 export const LEFT_MOUSE_BUTTON = 0;
 
-export const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
-
 export const variantOptions = {
   primary: 'primary',
   secondary: 'secondary',

package/translations.js

@@ -1,8 +1,11 @@
 /* eslint-disable import/no-default-export */
 export default {
   'ClearIconButton.title': 'Clear',
+  'DuoChatContextItemPopover.DisabledReason': 'This item is disabled',
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage': null,
+  'GlDuoChatMessage.SelectedContextItemsTitleUserMessage': null,
   'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',
   'GlDuoWorkflowPanel.expandButtonTitle': 'Expand',
   'GlDuoWorkflowPrompt.cancelButtonText': 'Cancel',