CHANGELOG.md

+# [91.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v90.5.0...v91.0.0) (2024-08-29)
+
+
+### Code Refactoring
+
+* **Path:** Update to tokens ([f57c5e4](https://gitlab.com/gitlab-org/gitlab-ui/commit/f57c5e48d73f9ccb143ddf60e6b604dd84d129ee))
+
+
+### BREAKING CHANGES
+
+* **Path:** Replace SCSS variables with design tokens for the
+Path component and make some minor design tweaks. Remove theme option.
+
 # [90.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v90.4.0...v90.5.0) (2024-08-28)
 
 

package.json

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

src/components/base/path/__snapshots__/path.spec.js.snap

@@ -29,7 +29,7 @@ exports[`Path matches the snapshot 1`] = `
       id="path-1-item-0"
     >
       <button
-        class="gl-path-button gl-path-active-item-indigo"
+        class="gl-path-button gl-path-active-item"
       >
         First
         <span
@@ -221,10 +221,10 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
   >
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-0"
+      id="path-12-item-0"
     >
       <button
-        class="gl-path-button gl-path-active-item-indigo"
+        class="gl-path-button gl-path-active-item"
       >
         <gl-icon-stub
           class="gl-mr-2"
@@ -243,7 +243,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-1"
+      id="path-12-item-1"
     >
       <button
         class="gl-path-button"
@@ -258,7 +258,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-2"
+      id="path-12-item-2"
     >
       <button
         class="gl-path-button"
@@ -273,7 +273,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-3"
+      id="path-12-item-3"
     >
       <button
         class="gl-path-button"
@@ -288,7 +288,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-4"
+      id="path-12-item-4"
     >
       <button
         class="gl-path-button"
@@ -303,7 +303,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-5"
+      id="path-12-item-5"
     >
       <button
         class="gl-path-button"
@@ -318,7 +318,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-6"
+      id="path-12-item-6"
     >
       <button
         class="gl-path-button"
@@ -333,7 +333,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-7"
+      id="path-12-item-7"
     >
       <button
         category="tertiary"
@@ -350,7 +350,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-8"
+      id="path-12-item-8"
     >
       <button
         class="gl-path-button"
@@ -365,7 +365,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-15-item-9"
+      id="path-12-item-9"
     >
       <button
         class="gl-path-button"
@@ -423,10 +423,10 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
   >
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-0"
+      id="path-8-item-0"
     >
       <button
-        class="gl-path-button gl-path-active-item-indigo"
+        class="gl-path-button gl-path-active-item"
       >
         First
         <span
@@ -438,7 +438,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-1"
+      id="path-8-item-1"
     >
       <button
         class="gl-path-button"
@@ -453,7 +453,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-2"
+      id="path-8-item-2"
     >
       <button
         class="gl-path-button"
@@ -468,7 +468,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-3"
+      id="path-8-item-3"
     >
       <button
         class="gl-path-button"
@@ -483,7 +483,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-4"
+      id="path-8-item-4"
     >
       <button
         class="gl-path-button"
@@ -498,7 +498,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-5"
+      id="path-8-item-5"
     >
       <button
         class="gl-path-button"
@@ -513,7 +513,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-6"
+      id="path-8-item-6"
     >
       <button
         class="gl-path-button"
@@ -528,7 +528,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-7"
+      id="path-8-item-7"
     >
       <button
         category="tertiary"
@@ -545,7 +545,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-8"
+      id="path-8-item-8"
     >
       <button
         class="gl-path-button"
@@ -560,7 +560,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
     </li>
     <li
       class="gl-path-nav-list-item"
-      id="path-11-item-9"
+      id="path-8-item-9"
     >
       <button
         class="gl-path-button"

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);
-  }
 }

src/components/base/path/path.spec.js

@@ -3,8 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { mockPathItems } from './data';
 import GlPath from './path.vue';
 
-const SELECTED_CLASS_INDIGO = 'gl-path-active-item-indigo';
-const SELECTED_CLASS_GREEN = 'gl-path-active-item-green';
+const PATH_ACTIVE_ITEM_CLASS = 'gl-path-active-item';
 const BACKGROUND_COLOR_DEFAULT = 'rgba(0,0,0,0)';
 const BACKGROUND_COLOR_LIGHT_GRAY = '#f0f0f0';
 
@@ -49,24 +48,6 @@ describe('Path', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  describe('theme selection', () => {
-    describe('default', () => {
-      it('applies the indigo theme', () => {
-        expect(pathItemAt(0).classList).toContain(SELECTED_CLASS_INDIGO);
-      });
-    });
-
-    describe('with a theme specified', () => {
-      beforeEach(() => {
-        wrapper = createComponent({ theme: 'green' });
-      });
-
-      it('sets the correct theme', () => {
-        expect(pathItemAt(0).classList).toContain(SELECTED_CLASS_GREEN);
-      });
-    });
-  });
-
   describe('background color selection', () => {
     describe('with no background color specified', () => {
       it('displays the default background color', () => {
@@ -142,7 +123,7 @@ describe('Path', () => {
   describe('renders the correct selected item', () => {
     describe('with no selected item passed in', () => {
       it('selects the first item', () => {
-        expect(pathItemAt(0).classList).toContain(SELECTED_CLASS_INDIGO);
+        expect(pathItemAt(0).classList).toContain(PATH_ACTIVE_ITEM_CLASS);
       });
 
       it('updates the selected item when props change', async () => {
@@ -152,8 +133,8 @@ describe('Path', () => {
         wrapper.setProps({ items });
         await nextTick();
 
-        expect(pathItemAt(0).classList).not.toContain(SELECTED_CLASS_INDIGO);
-        expect(pathItemAt(3).classList).toContain(SELECTED_CLASS_INDIGO);
+        expect(pathItemAt(0).classList).not.toContain(PATH_ACTIVE_ITEM_CLASS);
+        expect(pathItemAt(3).classList).toContain(PATH_ACTIVE_ITEM_CLASS);
       });
     });
 
@@ -166,7 +147,7 @@ describe('Path', () => {
       });
 
       it('selects the correct item', () => {
-        expect(pathItemAt(3).classList).toContain(SELECTED_CLASS_INDIGO);
+        expect(pathItemAt(3).classList).toContain(PATH_ACTIVE_ITEM_CLASS);
       });
     });
 
@@ -180,8 +161,8 @@ describe('Path', () => {
       });
 
       it('selects the first selected option', () => {
-        expect(pathItemAt(3).classList).toContain(SELECTED_CLASS_INDIGO);
-        expect(pathItemAt(5).classList).not.toContain(SELECTED_CLASS_INDIGO);
+        expect(pathItemAt(3).classList).toContain(PATH_ACTIVE_ITEM_CLASS);
+        expect(pathItemAt(5).classList).not.toContain(PATH_ACTIVE_ITEM_CLASS);
       });
     });
   });

src/components/base/path/path.stories.js

 import GlPopover from '../popover/popover.vue';
-import { glThemes } from '../../../utils/constants';
 import GlPath from './path.vue';
 import { mockPathItems } from './data';
 import readme from './path.md';
@@ -7,17 +6,15 @@ import readme from './path.md';
 const defaultValue = (prop) => GlPath.props[prop].default;
 
 const generateProps = ({
-  theme = defaultValue('theme'),
   items = mockPathItems,
   backgroundColor = defaultValue('backgroundColor'),
 } = {}) => ({
-  theme,
   items,
   backgroundColor,
 });
 
 const template = (slot = '') => `
-  <gl-path :items="items" :theme="theme" :background-color="backgroundColor">
+  <gl-path :items="items" :background-color="backgroundColor">
     ${slot}
   </gl-path>`;
 
@@ -73,10 +70,6 @@ export default {
     },
   },
   argTypes: {
-    theme: {
-      options: glThemes,
-      control: 'select',
-    },
     backgroundColor: {
       control: 'color',
     },

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

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": {

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. */
 }

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. */
 }

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.

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.

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

@@ -77,6 +77,284 @@
         }
       }
     },
+    "selected": {
+      "foreground": {
+        "color": {
+          "default": {
+            "value": "#18171d",
+            "$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": "#18171d",
+            "$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": "#18171d",
+            "$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": "#18171d",
+            "$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": "#63a6e9",
+            "$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": "#9dc7f1",
+            "$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": "#9dc7f1",
+            "$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": "#cbe2f9",
+            "$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": "#63a6e9",
+            "$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": "#9dc7f1",
+            "$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": "#9dc7f1",
+            "$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": "#cbe2f9",
+            "$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": {

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": {

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.

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.

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);

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',