@gitlab/ui 90.4.0 → 91.0.0

package/dist/utils/constants.js

@@ -26,7 +26,6 @@ const CONTRAST_LEVELS = [{
 }];
 const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const LEFT_MOUSE_BUTTON = 0;
-const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
 const variantOptions = {
   primary: 'primary',
   secondary: 'secondary',
@@ -306,4 +305,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

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

package/src/components/base/alert/alert.scss

@@ -42,6 +42,7 @@ $gl-alert-top-border-size: 2px;
   position: relative;
   padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
   @include gl-py-5;
+  @apply gl-rounded-base;
 
   @media (forced-colors: active) {
     border: 1px solid transparent;
@@ -81,9 +82,7 @@ $gl-alert-top-border-size: 2px;
 }
 
 .gl-alert-title {
-  @include gl-heading-scale-500;
-  @include gl-mb-3;
-  color: var(--gl-text-color-heading);
+  @apply gl-heading-scale-400 -gl-mt-1 gl-mb-2;
 }
 
 .gl-alert-icon-container {
@@ -95,8 +94,7 @@ $gl-alert-top-border-size: 2px;
   height: $gl-line-height-20;
 
   .gl-alert-has-title & {
-    @include gl-heading-scale-500; // get dynamic font-size
-    height: $gl-line-height-heading * 1em; // give unit to unitless relative line-height (1.25)
+    top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
   }
 }
 
@@ -107,7 +105,7 @@ $gl-alert-top-border-size: 2px;
 
 .gl-alert-actions {
   @include gl-display-flex;
-  @include gl-mt-5;
+  @include gl-mt-3;
 }
 
 .gl-alert-action {
@@ -121,6 +119,10 @@ $gl-alert-top-border-size: 2px;
   position: absolute;
   top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
   right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
+
+  .gl-alert-has-title & {
+    top: $gl-spacing-scale-4;
+  }
 }
 
 /* Variants */

package/src/components/base/path/path.scss

@@ -6,25 +6,14 @@ $path-chevron-dimension: px-to-rem(24px);
 $path-chevron-border-radius: px-to-rem(10px);
 $path-chevron-tip-border-radius: px-to-rem(2px);
 $path-button-right-padding: 1.25 * $grid-size;
-$path-chevron-drop-shadow: drop-shadow(0 0 px-to-rem(1px) $white)
-  drop-shadow(0 0 px-to-rem(2px) $blue-500);
 $path-chevron-transformation: rotate(45deg) skew(14deg, 14deg);
 $path-chevron-right-margin: px-to-rem(14px);
 
 // Mixins
-@mixin gl-path-active-item-color($color) {
-  @include gl-text-contrast-light;
-  background-color: $color;
-
-  &::after {
-    background-color: $color;
-  }
-}
-
 @mixin gl-path-chevron {
+  @include gl-reset-bg;
   content: '';
   position: absolute;
-  @include gl-reset-bg;
   top: $path-chevron-top;
   right: $path-chevron-right;
   width: $path-chevron-dimension;
@@ -34,6 +23,7 @@ $path-chevron-right-margin: px-to-rem(14px);
   border-top-left-radius: $path-chevron-border-radius;
   border-bottom-right-radius: $path-chevron-border-radius;
   border-top-right-radius: $path-chevron-tip-border-radius;
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
 }
 
 .gl-path-nav {
@@ -43,11 +33,11 @@ $path-chevron-right-margin: px-to-rem(14px);
   .gl-path-nav-list {
     @include gl-p-1;
     @include gl-m-0;
-    position: relative;
     @include gl-list-style-none;
     @include gl-display-inline-flex;
     @include gl-overflow-hidden;
     margin-left: -1px;
+    position: relative;
   }
 
   .gl-path-nav-list-item {
@@ -65,18 +55,18 @@ $path-chevron-right-margin: px-to-rem(14px);
     @include gl-pl-5;
     @include gl-py-3;
     @include gl-display-flex;
-    position: relative;
     @include gl-font-base;
     @include gl-z-index-0;
-    @apply gl-border-none;
-    @include gl-text-gray-500;
     @include gl-font-weight-bold;
     @include gl-line-height-normal;
     @include gl-rounded-top-left-base;
     @include gl-rounded-bottom-left-base;
-    background-color: var(--path-bg-color);
-    padding-right: $path-button-right-padding;
+    @apply gl-border-none;
+    background-color: var(--gl-action-neutral-background-color-default);
+    color: var(--gl-action-neutral-foreground-color-default);
     margin-right: $path-chevron-right-margin;
+    padding-right: $path-button-right-padding;
+    position: relative;
 
     &::before,
     &::after {
@@ -85,47 +75,69 @@ $path-chevron-right-margin: px-to-rem(14px);
 
     // Pseudo focus element
     &::before {
+      background-color: var(--gl-color-alpha-0);
       display: none;
       z-index: 2;
       right: calc(-0.75rem + 1px);
-      box-shadow: 0 0 0 1px $white, 0.5px -0.5px 0 2.5px $blue-400;
+      box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0.5px -0.5px 0 2.5px var(--gl-focus-ring-outer-color);
       clip-path: polygon(0% 0%, 0% -30%, 160% 0%, 75% 130%, 100% 100%);
       transform: rotate(45deg) skew(14deg, 14deg) scale(0.99);
     }
 
-    &[disabled] {
-      color: $gl-text-color-disabled;
-      @include gl-cursor-not-allowed;
+    &:hover {
+      background-color: var(--gl-action-neutral-background-color-hover);
+      color: var(--gl-action-neutral-foreground-color-hover);
+    }
+
+    &:focus {
+      background-color: var(--gl-action-neutral-background-color-focus);
+      color: var(--gl-action-neutral-foreground-color-focus);
     }
 
-    &:not([disabled]):hover {
-      @include gl-path-active-item-color($gray-100);
-      color: $gl-text-color;
+    &:active {
+      background-color: var(--gl-action-neutral-background-color-active);
+      color: var(--gl-action-neutral-foreground-color-active);
     }
 
     &:active,
     &:focus,
     &:focus:active {
-      // Custom focus
+      // Custom focus to account for path shape
+      box-shadow: 5px -3px 0 -2px var(--gl-focus-ring-inner-color), 5px 3px 0 -2px var(--gl-focus-ring-inner-color), 0 0 0 1px var(--gl-focus-ring-inner-color),
+        0 0 0 3px var(--gl-focus-ring-outer-color);
+      outline: none;
       border-top-right-radius: 1px;
       border-bottom-right-radius: 1px;
-      box-shadow: 5px -3px 0 -2px $white, 5px 3px 0 -2px $white, 0 0 0 1px $white,
-        0 0 0 3px $blue-400;
-      outline: none;
 
       &::before {
         display: block;
       }
     }
+
+    &.gl-path-active-item {
+      background-color: var(--gl-action-selected-background-color-default);
+      color: var(--gl-action-selected-foreground-color-default);
+    }
+
+    &:disabled {
+      @include gl-cursor-not-allowed;
+      background-color: var(--gl-color-alpha-0);
+      box-shadow: none;
+      color: var(--gl-action-disabled-foreground-color);
+
+      &::before {
+        box-shadow: none;
+      }
+    }
   }
 
   .gl-path-fade {
     @include gl-w-8;
     @include gl-h-full;
+    @include gl-z-index-2;
     bottom: 0;
+    color: var(--gl-text-color-subtle);
     position: absolute;
-    @include gl-z-index-2;
-    @include gl-text-gray-500;
 
     &-left {
       left: 0;
@@ -141,41 +153,11 @@ $path-chevron-right-margin: px-to-rem(14px);
 
   .gl-clear-icon-button {
     @include gl-p-0;
-    @include gl-text-gray-400;
     @include gl-h-full;
+    color: var(--gl-icon-color-subtle);
 
     .gl-icon {
       @include gl-vertical-align-middle;
     }
   }
-
-  .gl-path-active-item-indigo,
-  .gl-path-active-item-indigo:hover {
-    @include gl-path-active-item-color($theme-indigo-700);
-  }
-
-  .gl-path-active-item-blue,
-  .gl-path-active-item-blue:hover {
-    @include gl-path-active-item-color($theme-blue-500);
-  }
-
-  .gl-path-active-item-light-blue,
-  .gl-path-active-item-light-blue:hover {
-    @include gl-path-active-item-color($theme-light-blue-500);
-  }
-
-  .gl-path-active-item-red,
-  .gl-path-active-item-red:hover {
-    @include gl-path-active-item-color($theme-red-500);
-  }
-
-  .gl-path-active-item-light-red,
-  .gl-path-active-item-light-red:hover {
-    @include gl-path-active-item-color($theme-light-red-500);
-  }
-
-  .gl-path-active-item-green,
-  .gl-path-active-item-green:hover {
-    @include gl-path-active-item-color($theme-green-500);
-  }
 }

package/src/components/base/path/path.vue

@@ -4,12 +4,11 @@ import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import uniqueId from 'lodash/uniqueId';
 import findLast from 'lodash/findLast';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import { glThemes } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 
 const BOUNDARY_WIDTH = 40;
 const PATH_ITEM_CLASS = 'gl-path-button';
-const PATH_ACTIVE_ITEM_PREFIX = 'gl-path-active-item';
+const PATH_ACTIVE_ITEM_CLASS = 'gl-path-active-item';
 
 export default {
   name: 'GlPath',
@@ -36,15 +35,6 @@ export default {
       required: false,
       default: () => [],
     },
-    /**
-     * The color theme to be used.
-     */
-    theme: {
-      type: String,
-      required: false,
-      default: 'indigo',
-      validator: (theme) => glThemes.includes(theme),
-    },
     /**
      * The items' background color.
      */
@@ -62,9 +52,6 @@ export default {
     };
   },
   computed: {
-    activeClass() {
-      return `${PATH_ACTIVE_ITEM_PREFIX}-${this.theme}`;
-    },
     entireListVisible() {
       return this.width >= this.getScrollWidth();
     },
@@ -97,7 +84,7 @@ export default {
   methods: {
     pathItemClass(index) {
       return index === this.selectedIndex
-        ? `${PATH_ITEM_CLASS} ${this.activeClass}`
+        ? `${PATH_ITEM_CLASS} ${PATH_ACTIVE_ITEM_CLASS}`
         : PATH_ITEM_CLASS;
     },
     onItemClicked(selectedIndex) {

package/src/tokens/action.tokens.json

@@ -32,6 +32,92 @@
         }
       }
     },
+    "selected": {
+      "foreground": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the foreground of a selected action in the default state."
+          },
+          "hover": {
+            "$value": "{action.selected.foreground.color.default}",
+            "$type": "color",
+            "$description": "Used for the foreground of a selected action in the hover state."
+          },
+          "focus": {
+            "$value": "{action.selected.foreground.color.hover}",
+            "$type": "color",
+            "$description": "Used for the foreground of a selected action in the focus state."
+          },
+          "active": {
+            "$value": "{action.selected.foreground.color.focus}",
+            "$type": "color",
+            "$description": "Used for the foreground of a selected action in the active state."
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a selected action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a selected action in the hover state."
+          },
+          "focus": {
+            "$value": "{action.selected.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of a selected action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.blue.800}",
+              "dark": "{color.blue.100}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a selected action in the active state."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": "{action.selected.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the border of a selected action in the default state."
+          },
+          "hover": {
+            "$value": "{action.selected.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the border of a selected action in the hover state."
+          },
+          "focus": {
+            "$value": "{action.selected.background.color.focus}",
+            "$type": "color",
+            "$description": "Used for the border of a selected action in the focus state."
+          },
+          "active": {
+            "$value": "{action.selected.background.color.active}",
+            "$type": "color",
+            "$description": "Used for the border of a selected action in the active state."
+          }
+        }
+      }
+    },
     "neutral": {
       "foreground": {
         "color": {

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

@@ -708,6 +708,10 @@
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
   --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of a neutral action in the default state. */
+  --gl-action-selected-background-color-active: var(--gl-color-blue-800); /* Used for the background of a selected action in the active state. */
+  --gl-action-selected-background-color-hover: var(--gl-color-blue-700); /* Used for the background of a selected action in the hover state. */
+  --gl-action-selected-background-color-default: var(--gl-color-blue-500); /* Used for the background of a selected action in the default state. */
+  --gl-action-selected-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a selected action in the default state. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled action. */
@@ -810,6 +814,11 @@
   --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the active state. */
   --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the focus state. */
   --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the hover state. */
+  --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /* Used for the border of a selected action in the active state. */
+  --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /* Used for the border of a selected action in the hover state. */
+  --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
+  --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
+  --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
   --gl-button-selected-background-color-focus: var(--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: var(--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: var(--gl-button-default-primary-foreground-color-focus); /* Used for the foreground of a selected button in the focus state. */
@@ -846,10 +855,13 @@
   --gl-action-strong-neutral-foreground-color-focus: var(--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: var(--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: var(--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: var(--gl-action-selected-background-color-focus); /* Used for the border of a selected action in the focus state. */
+  --gl-action-selected-foreground-color-focus: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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/css/tokens.dark.css

@@ -708,6 +708,10 @@
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
   --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a neutral action in the default state. */
+  --gl-action-selected-background-color-active: var(--gl-color-blue-100); /* Used for the background of a selected action in the active state. */
+  --gl-action-selected-background-color-hover: var(--gl-color-blue-200); /* Used for the background of a selected action in the hover state. */
+  --gl-action-selected-background-color-default: var(--gl-color-blue-300); /* Used for the background of a selected action in the default state. */
+  --gl-action-selected-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a selected action in the default state. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled action. */
@@ -810,6 +814,11 @@
   --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the active state. */
   --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the focus state. */
   --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the hover state. */
+  --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /* Used for the border of a selected action in the active state. */
+  --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /* Used for the border of a selected action in the hover state. */
+  --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
+  --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
+  --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
   --gl-button-selected-background-color-focus: var(--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: var(--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: var(--gl-button-default-primary-foreground-color-focus); /* Used for the foreground of a selected button in the focus state. */
@@ -846,10 +855,13 @@
   --gl-action-strong-neutral-foreground-color-focus: var(--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: var(--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: var(--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: var(--gl-action-selected-background-color-focus); /* Used for the border of a selected action in the focus state. */
+  --gl-action-selected-foreground-color-focus: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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/js/tokens.dark.js

@@ -6,6 +6,18 @@
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#737278'; // Used for the foreground of a disabled action.
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#28272d'; // Used for the background of a disabled action.
 export const GL_ACTION_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled action.
+export const GL_ACTION_SELECTED_FOREGROUND_COLOR_DEFAULT = '#18171d'; // Used for the foreground of a selected action in the default state.
+export const GL_ACTION_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d'; // Used for the foreground of a selected action in the hover state.
+export const GL_ACTION_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d'; // Used for the foreground of a selected action in the focus state.
+export const GL_ACTION_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d'; // Used for the foreground of a selected action in the active state.
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_DEFAULT = '#63a6e9'; // Used for the background of a selected action in the default state.
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_HOVER = '#9dc7f1'; // Used for the background of a selected action in the hover state.
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_FOCUS = '#9dc7f1'; // Used for the background of a selected action in the focus state.
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_ACTIVE = '#cbe2f9'; // Used for the background of a selected action in the active state.
+export const GL_ACTION_SELECTED_BORDER_COLOR_DEFAULT = '#63a6e9'; // Used for the border of a selected action in the default state.
+export const GL_ACTION_SELECTED_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of a selected action in the hover state.
+export const GL_ACTION_SELECTED_BORDER_COLOR_FOCUS = '#9dc7f1'; // Used for the border of a selected action in the focus state.
+export const GL_ACTION_SELECTED_BORDER_COLOR_ACTIVE = '#cbe2f9'; // Used for the border of a selected action in the active state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a neutral action in the default state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a neutral action in the focus state.

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

@@ -6,6 +6,18 @@
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#89888d'; // Used for the foreground of a disabled action.
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#ececef'; // Used for the background of a disabled action.
 export const GL_ACTION_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled action.
+export const GL_ACTION_SELECTED_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a selected action in the default state.
+export const GL_ACTION_SELECTED_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a selected action in the hover state.
+export const GL_ACTION_SELECTED_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a selected action in the focus state.
+export const GL_ACTION_SELECTED_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a selected action in the active state.
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_DEFAULT = '#1f75cb'; // Used for the background of a selected action in the default state.
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_HOVER = '#0b5cad'; // Used for the background of a selected action in the hover state.
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_FOCUS = '#0b5cad'; // Used for the background of a selected action in the focus state.
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_ACTIVE = '#064787'; // Used for the background of a selected action in the active state.
+export const GL_ACTION_SELECTED_BORDER_COLOR_DEFAULT = '#1f75cb'; // Used for the border of a selected action in the default state.
+export const GL_ACTION_SELECTED_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of a selected action in the hover state.
+export const GL_ACTION_SELECTED_BORDER_COLOR_FOCUS = '#0b5cad'; // Used for the border of a selected action in the focus state.
+export const GL_ACTION_SELECTED_BORDER_COLOR_ACTIVE = '#064787'; // Used for the border of a selected action in the active state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of a neutral action in the default state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#28272d'; // Used for the foreground of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#28272d'; // Used for the foreground of a neutral action in the focus state.