npm - @gitlab/ui - Versions diffs - 87.8.0 → 88.1.0 - Mend

@gitlab/ui 87.8.0 → 88.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/CHANGELOG.md +22 -0
package/dist/index.css +2 -2
package/dist/index.css.map +1 -1
package/dist/tokens/build/js/tokens.dark.js +124 -5
package/dist/tokens/build/js/tokens.js +124 -5
package/dist/tokens/css/tokens.css +123 -4
package/dist/tokens/css/tokens.dark.css +123 -4
package/dist/tokens/js/tokens.dark.js +123 -4
package/dist/tokens/js/tokens.js +123 -4
package/dist/tokens/json/tokens.dark.json +2904 -32
package/dist/tokens/json/tokens.json +2904 -32
package/dist/tokens/scss/_tokens.dark.scss +123 -4
package/dist/tokens/scss/_tokens.scss +123 -4
package/dist/tokens/scss/_tokens_custom_properties.scss +123 -4
package/package.json +3 -3
package/src/components/base/button/button.scss +273 -258
package/src/components/base/keyset_pagination/keyset_pagination.scss +0 -7
package/src/components/base/search_box_by_click/search_box_by_click.scss +2 -3
package/src/components/base/tooltip/tooltip.scss +6 -6
package/src/tokens/build/css/tokens.css +123 -4
package/src/tokens/build/css/tokens.dark.css +123 -4
package/src/tokens/build/js/tokens.dark.js +123 -4
package/src/tokens/build/js/tokens.js +123 -4
package/src/tokens/build/json/tokens.dark.json +2904 -32
package/src/tokens/build/json/tokens.json +2904 -32
package/src/tokens/build/scss/_tokens.dark.scss +123 -4
package/src/tokens/build/scss/_tokens.scss +123 -4
package/src/tokens/build/scss/_tokens_custom_properties.scss +123 -4
package/src/tokens/contextual/button.tokens.json +883 -0
package/src/tokens/feedback.tokens.json +13 -19

package/src/components/base/tooltip/tooltip.scss CHANGED Viewed

@@ -8,8 +8,8 @@
     @include gl-font-weight-normal;
     @include gl-py-3;
     @include gl-px-4;
-    background: var(--gl-feedback-background-color-strong);
-    color: var(--gl-feedback-text-color-strong);
+    background: var(--gl-feedback-strong-background-color);
+    color: var(--gl-feedback-strong-text-color);
   }
   .arrow {
@@ -32,20 +32,20 @@
 .gl-tooltip.bs-tooltip-top .arrow::before {
   @apply gl-border-b-0;
-  border-top-color: var(--gl-feedback-background-color-strong);
+  border-top-color: var(--gl-feedback-strong-background-color);
 }
 .gl-tooltip.bs-tooltip-right .arrow::before {
   @apply gl-border-l-0;
-  border-right-color: var(--gl-feedback-background-color-strong);
+  border-right-color: var(--gl-feedback-strong-background-color);
 }
 .gl-tooltip.bs-tooltip-bottom .arrow::before {
   @apply gl-border-t-0;
-  border-bottom-color: var(--gl-feedback-background-color-strong);
+  border-bottom-color: var(--gl-feedback-strong-background-color);
 }
 .gl-tooltip.bs-tooltip-left .arrow::before {
   @apply gl-border-r-0;
-  border-left-color: var(--gl-feedback-background-color-strong);
+  border-left-color: var(--gl-feedback-strong-background-color);
 }

package/src/tokens/build/css/tokens.css CHANGED Viewed

@@ -468,10 +468,10 @@
   --gl-feedback-neutral-icon-color: var(--gl-color-neutral-600); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-text-color: var(--gl-color-neutral-700); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-background-color: var(--gl-color-neutral-50); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
-  --gl-feedback-link-color-strong: var(--gl-color-blue-300); /* Used for a link on a strong feedback background. */
-  --gl-feedback-icon-color-strong: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */
-  --gl-feedback-text-color-strong: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */
-  --gl-feedback-background-color-strong: var(--gl-color-neutral-950); /* Used for a background associated with feedback like a tooltip or toast message. */
+  --gl-feedback-strong-link-color: var(--gl-color-blue-300); /* Used for a link on a strong feedback background. */
+  --gl-feedback-strong-icon-color: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */
+  --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */
+  --gl-feedback-strong-background-color: var(--gl-color-neutral-950); /* Used for a background associated with strong feedback like a tooltip or toast message. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /* Used for disabled checkbox and radio button state indicators. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /* Used for checkbox and radio button state indicators. */
   --gl-control-placeholder-color: var(--gl-color-neutral-400); /* Used for placeholder text within inputs. */
@@ -509,6 +509,61 @@
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
+  --gl-button-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled button. */
+  --gl-button-disabled-background-color: var(--gl-color-neutral-10); /* Used for the background of a disabled button. */
+  --gl-button-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled button. */
+  --gl-button-selected-border-color-active: var(--gl-color-neutral-600); /* Used for the border of a selected button in the active state. */
+  --gl-button-selected-border-color-hover: var(--gl-color-neutral-400); /* Used for the border of a selected button in the hover state. */
+  --gl-button-selected-border-color-default: var(--gl-color-neutral-300); /* Used for the border of a selected button in the default state. */
+  --gl-button-dashed-border-color-active: var(--gl-color-neutral-600); /* Used for the border of a dashed button in the active state. */
+  --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /* Used for the background of a borderless, tertiary danger (destructive) button in the active state. */
+  --gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /* Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */
+  --gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /* Used for the background of a borderless, tertiary danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-border-color-active: var(--gl-color-red-900); /* Used for the border of an outlined danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-border-color-hover: var(--gl-color-red-700); /* Used for the border of an outlined danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-border-color-default: var(--gl-color-red-500); /* Used for the border of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-background-color-active: var(--gl-color-red-100); /* Used for the background of an outlined danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-background-color-hover: var(--gl-color-red-50); /* Used for the background of an outlined danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-900); /* Used for the foreground of a danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-700); /* Used for the foreground of a danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-500); /* Used for the foreground of a danger (destructive) button in the default state. */
+  --gl-button-danger-primary-border-color-active: var(--gl-color-red-900); /* Used for the border of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-border-color-hover: var(--gl-color-red-800); /* Used for the border of a danger (destructive) primary button in the hover state. */
+  --gl-button-danger-primary-border-color-default: var(--gl-color-red-600); /* Used for the border of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-primary-background-color-active: var(--gl-color-red-800); /* Used for the background of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-background-color-hover: var(--gl-color-red-600); /* Used for the background of a danger (destructive) primary button in the hover state. */
+  --gl-button-danger-primary-background-color-default: var(--gl-color-red-500); /* Used for the background of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a danger (destructive) primary button in the default state. */
+  --gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /* Used for the background of a borderless, tertiary confirm (positive) button in the active state. */
+  --gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /* Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */
+  --gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /* Used for the background of a borderless, tertiary confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-border-color-active: var(--gl-color-blue-900); /* Used for the border of an outlined confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-border-color-default: var(--gl-color-blue-500); /* Used for the border of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-background-color-active: var(--gl-color-blue-100); /* Used for the background of an outlined confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-background-color-hover: var(--gl-color-blue-50); /* Used for the background of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-900); /* Used for the foreground of a confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-700); /* Used for the foreground of a confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-blue-500); /* Used for the foreground of a confirm (positive) button in the default state. */
+  --gl-button-confirm-primary-border-color-active: var(--gl-color-blue-900); /* Used for the border of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-border-color-hover: var(--gl-color-blue-800); /* Used for the border of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-border-color-default: var(--gl-color-blue-600); /* Used for the border of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-background-color-active: var(--gl-color-blue-700); /* Used for the background of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-background-color-hover: var(--gl-color-blue-600); /* Used for the background of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-background-color-default: var(--gl-color-blue-500); /* Used for the background of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a confirm (positive) primary button in the default state. */
+  --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /* Used for the background of a default borderless, tertiary button in the active state. */
+  --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of a default borderless, tertiary button in the hover state. */
+  --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /* Used for the background of a default borderless, tertiary button in the default state. */
+  --gl-button-default-primary-border-color-active: var(--gl-color-neutral-600); /* Used for the border of an default primary button in the active state. */
+  --gl-button-default-primary-border-color-hover: var(--gl-color-neutral-400); /* Used for the border of an default primary button in the hover state. */
+  --gl-button-default-primary-border-color-default: var(--gl-color-neutral-200); /* Used for the border of an default primary button in the default state. */
+  --gl-button-default-primary-background-color-active: var(--gl-color-neutral-100); /* Used for the background of an default primary button in the active state. */
+  --gl-button-default-primary-background-color-hover: var(--gl-color-neutral-50); /* Used for the background of an default primary button in the hover state. */
+  --gl-button-default-primary-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an default primary button in the default state. */
+  --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-800); /* Used for the foreground of a default primary button in the default state. */
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-10); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-300); /* Used to compliment the info banner. */
@@ -611,6 +666,47 @@
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
+  --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
+  --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /* Used for the background of a selected button in the hover state. */
+  --gl-button-selected-background-color-default: var(--gl-button-default-primary-background-color-default); /* Used for the background of a selected button in the default state. */
+  --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a selected button in the default state. */
+  --gl-button-link-text-color-default: var(--gl-text-color-link); /* Used for the text of a link button in the default state. */
+  --gl-button-dashed-border-color-default: var(--gl-border-color-strong); /* Used for the border of a dashed button in the default state. */
+  --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /* Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
+  --gl-button-danger-tertiary-background-color-focus: var(--gl-action-danger-background-color-focus); /* Used for the background of a borderless, tertiary danger (destructive) button in the focus state. */
+  --gl-button-danger-tertiary-foreground-color-active: var(--gl-action-danger-foreground-color-active); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the active state. */
+  --gl-button-danger-tertiary-foreground-color-hover: var(--gl-action-danger-foreground-color-hover); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state. */
+  --gl-button-danger-tertiary-foreground-color-default: var(--gl-action-danger-foreground-color-default); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-border-color-focus: var(--gl-button-danger-secondary-border-color-hover); /* Used for the border of an outlined danger (destructive) button in the focus state. */
+  --gl-button-danger-secondary-background-color-focus: var(--gl-button-danger-secondary-background-color-hover); /* Used for the background of an outlined danger (destructive) button in the focus state. */
+  --gl-button-danger-secondary-foreground-color-focus: var(--gl-button-danger-secondary-foreground-color-hover); /* Used for the foreground of a danger (destructive) button in the focus state. */
+  --gl-button-danger-primary-border-color-focus: var(--gl-button-danger-primary-border-color-hover); /* Used for the border of a danger (destructive) primary button in the focus state. */
+  --gl-button-danger-primary-background-color-focus: var(--gl-button-danger-primary-background-color-hover); /* Used for the background of a danger (destructive) primary button in the focus state. */
+  --gl-button-danger-primary-foreground-color-active: var(--gl-button-danger-primary-foreground-color-default); /* Used for the foreground of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-foreground-color-focus: var(--gl-button-danger-primary-foreground-color-default); /* Used for the foreground of a danger (destructive) primary button in the focus state. */
+  --gl-button-danger-primary-foreground-color-hover: var(--gl-button-danger-primary-foreground-color-default); /* Used for the foreground of a danger (destructive) primary button in the hover state. */
+  --gl-button-confirm-tertiary-border-color-default: var(--gl-action-confirm-border-color-default); /* Used for the border of a borderless, tertiary confirm (positive) button in the default state. */
+  --gl-button-confirm-tertiary-background-color-focus: var(--gl-action-confirm-background-color-focus); /* Used for the background of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-confirm-tertiary-foreground-color-active: var(--gl-action-confirm-foreground-color-active); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the active state. */
+  --gl-button-confirm-tertiary-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state. */
+  --gl-button-confirm-tertiary-foreground-color-default: var(--gl-action-confirm-foreground-color-default); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-border-color-focus: var(--gl-button-confirm-secondary-border-color-hover); /* Used for the border of an outlined confirm (positive) button in the focus state. */
+  --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /* Used for the background of an outlined confirm (positive) button in the focus state. */
+  --gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-hover); /* Used for the foreground of a confirm (positive) button in the focus state. */
+  --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-hover); /* Used for the border of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-background-color-focus: var(--gl-button-confirm-primary-background-color-hover); /* Used for the background of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-foreground-color-focus: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-foreground-color-hover: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the hover state. */
+  --gl-button-default-tertiary-border-color-default: var(--gl-action-neutral-border-color-default); /* Used for the border of a default borderless, tertiary button in the default state. */
+  --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of a default borderless, tertiary button in the focus state. */
+  --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a default borderless, tertiary button in the default state. */
+  --gl-button-default-primary-border-color-focus: var(--gl-button-default-primary-border-color-hover); /* Used for the border of an default primary button in the focus state. */
+  --gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-hover); /* Used for the background of an default primary button in the focus state. */
+  --gl-button-default-primary-foreground-color-active: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a default primary button in the active state. */
+  --gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a default primary button in the focus state. */
+  --gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a default primary button in the hover state. */
   --gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-hover); /* Used for the icon of a tier related badge in the focus state. */
   --gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-hover); /* Used for the text of a tier related badge in the focus state. */
   --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger (critical) badge in the focus state. */
@@ -639,4 +735,27 @@
   --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-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. */
+  --gl-button-selected-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover); /* Used for the foreground of a selected button in the hover state. */
+  --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the active state. */
+  --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the focus state. */
+  --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the hover state. */
+  --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the focus state. */
+  --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the hover state. */
+  --gl-button-danger-tertiary-border-color-active: var(--gl-action-danger-border-color-active); /* Used for the border of a borderless, tertiary danger (destructive) button in the active state. */
+  --gl-button-danger-tertiary-border-color-focus: var(--gl-action-danger-border-color-focus); /* Used for the border of a borderless, tertiary danger (destructive) button in the focus state. */
+  --gl-button-danger-tertiary-border-color-hover: var(--gl-action-danger-border-color-hover); /* Used for the border of a borderless, tertiary danger (destructive) button in the hover state. */
+  --gl-button-danger-tertiary-foreground-color-focus: var(--gl-action-danger-foreground-color-focus); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state. */
+  --gl-button-confirm-tertiary-border-color-active: var(--gl-action-confirm-border-color-active); /* Used for the border of a borderless, tertiary confirm (positive) button in the active state. */
+  --gl-button-confirm-tertiary-border-color-focus: var(--gl-action-confirm-border-color-focus); /* Used for the border of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-confirm-tertiary-border-color-hover: var(--gl-action-confirm-border-color-hover); /* Used for the border of a borderless, tertiary confirm (positive) button in the hover state. */
+  --gl-button-confirm-tertiary-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-default-tertiary-border-color-active: var(--gl-action-neutral-border-color-active); /* Used for the border of a default borderless, tertiary button in the active state. */
+  --gl-button-default-tertiary-border-color-focus: var(--gl-action-neutral-border-color-focus); /* Used for the border of a default borderless, tertiary button in the focus state. */
+  --gl-button-default-tertiary-border-color-hover: var(--gl-action-neutral-border-color-hover); /* Used for the border of a default borderless, tertiary button in the hover state. */
+  --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the foreground of a default borderless, tertiary button in the active state. */
+  --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the foreground of a default borderless, tertiary button in the focus state. */
+  --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the foreground of a default borderless, tertiary button in the hover state. */
 }

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

@@ -468,10 +468,10 @@
   --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
-  --gl-feedback-link-color-strong: var(--gl-color-blue-700); /* Used for a link on a strong feedback background. */
-  --gl-feedback-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon on a strong feedback background. */
-  --gl-feedback-text-color-strong: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */
-  --gl-feedback-background-color-strong: var(--gl-color-neutral-10); /* Used for a background associated with feedback like a tooltip or toast message. */
+  --gl-feedback-strong-link-color: var(--gl-color-blue-700); /* Used for a link on a strong feedback background. */
+  --gl-feedback-strong-icon-color: var(--gl-color-neutral-900); /* Used for an icon on a strong feedback background. */
+  --gl-feedback-strong-text-color: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */
+  --gl-feedback-strong-background-color: var(--gl-color-neutral-10); /* Used for a background associated with strong feedback like a tooltip or toast message. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /* Used for disabled checkbox and radio button state indicators. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-900); /* Used for checkbox and radio button state indicators. */
   --gl-control-placeholder-color: var(--gl-color-neutral-500); /* Used for placeholder text within inputs. */
@@ -509,6 +509,61 @@
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
+  --gl-button-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled button. */
+  --gl-button-disabled-background-color: var(--gl-color-neutral-950); /* Used for the background of a disabled button. */
+  --gl-button-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled button. */
+  --gl-button-selected-border-color-active: var(--gl-color-neutral-300); /* Used for the border of a selected button in the active state. */
+  --gl-button-selected-border-color-hover: var(--gl-color-neutral-500); /* Used for the border of a selected button in the hover state. */
+  --gl-button-selected-border-color-default: var(--gl-color-neutral-600); /* Used for the border of a selected button in the default state. */
+  --gl-button-dashed-border-color-active: var(--gl-color-neutral-300); /* Used for the border of a dashed button in the active state. */
+  --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /* Used for the background of a borderless, tertiary danger (destructive) button in the active state. */
+  --gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /* Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */
+  --gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /* Used for the background of a borderless, tertiary danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-border-color-active: var(--gl-color-red-50); /* Used for the border of an outlined danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-border-color-hover: var(--gl-color-red-200); /* Used for the border of an outlined danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-border-color-default: var(--gl-color-red-400); /* Used for the border of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-background-color-active: var(--gl-color-red-800); /* Used for the background of an outlined danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-background-color-hover: var(--gl-color-red-900); /* Used for the background of an outlined danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-50); /* Used for the foreground of a danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-200); /* Used for the foreground of a danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-400); /* Used for the foreground of a danger (destructive) button in the default state. */
+  --gl-button-danger-primary-border-color-active: var(--gl-color-red-50); /* Used for the border of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-border-color-hover: var(--gl-color-red-100); /* Used for the border of a danger (destructive) primary button in the hover state. */
+  --gl-button-danger-primary-border-color-default: var(--gl-color-red-300); /* Used for the border of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-primary-background-color-active: var(--gl-color-red-100); /* Used for the background of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-background-color-hover: var(--gl-color-red-300); /* Used for the background of a danger (destructive) primary button in the hover state. */
+  --gl-button-danger-primary-background-color-default: var(--gl-color-red-400); /* Used for the background of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a danger (destructive) primary button in the default state. */
+  --gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /* Used for the background of a borderless, tertiary confirm (positive) button in the active state. */
+  --gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /* Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */
+  --gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /* Used for the background of a borderless, tertiary confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-border-color-active: var(--gl-color-blue-50); /* Used for the border of an outlined confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-border-color-hover: var(--gl-color-blue-200); /* Used for the border of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-border-color-default: var(--gl-color-blue-400); /* Used for the border of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-background-color-active: var(--gl-color-blue-800); /* Used for the background of an outlined confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-background-color-hover: var(--gl-color-blue-900); /* Used for the background of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-50); /* Used for the foreground of a confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-200); /* Used for the foreground of a confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-blue-400); /* Used for the foreground of a confirm (positive) button in the default state. */
+  --gl-button-confirm-primary-border-color-active: var(--gl-color-blue-50); /* Used for the border of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-border-color-hover: var(--gl-color-blue-100); /* Used for the border of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-border-color-default: var(--gl-color-blue-300); /* Used for the border of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-background-color-active: var(--gl-color-blue-200); /* Used for the background of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-background-color-hover: var(--gl-color-blue-300); /* Used for the background of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-background-color-default: var(--gl-color-blue-400); /* Used for the background of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a confirm (positive) primary button in the default state. */
+  --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /* Used for the background of a default borderless, tertiary button in the active state. */
+  --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of a default borderless, tertiary button in the hover state. */
+  --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /* Used for the background of a default borderless, tertiary button in the default state. */
+  --gl-button-default-primary-border-color-active: var(--gl-color-neutral-300); /* Used for the border of an default primary button in the active state. */
+  --gl-button-default-primary-border-color-hover: var(--gl-color-neutral-500); /* Used for the border of an default primary button in the hover state. */
+  --gl-button-default-primary-border-color-default: var(--gl-color-neutral-700); /* Used for the border of an default primary button in the default state. */
+  --gl-button-default-primary-background-color-active: var(--gl-color-neutral-800); /* Used for the background of an default primary button in the active state. */
+  --gl-button-default-primary-background-color-hover: var(--gl-color-neutral-900); /* Used for the background of an default primary button in the hover state. */
+  --gl-button-default-primary-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an default primary button in the default state. */
+  --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a default primary button in the default state. */
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-900); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-600); /* Used to compliment the info banner. */
@@ -611,6 +666,47 @@
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
+  --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
+  --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /* Used for the background of a selected button in the hover state. */
+  --gl-button-selected-background-color-default: var(--gl-button-default-primary-background-color-default); /* Used for the background of a selected button in the default state. */
+  --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a selected button in the default state. */
+  --gl-button-link-text-color-default: var(--gl-text-color-link); /* Used for the text of a link button in the default state. */
+  --gl-button-dashed-border-color-default: var(--gl-border-color-strong); /* Used for the border of a dashed button in the default state. */
+  --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /* Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
+  --gl-button-danger-tertiary-background-color-focus: var(--gl-action-danger-background-color-focus); /* Used for the background of a borderless, tertiary danger (destructive) button in the focus state. */
+  --gl-button-danger-tertiary-foreground-color-active: var(--gl-action-danger-foreground-color-active); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the active state. */
+  --gl-button-danger-tertiary-foreground-color-hover: var(--gl-action-danger-foreground-color-hover); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state. */
+  --gl-button-danger-tertiary-foreground-color-default: var(--gl-action-danger-foreground-color-default); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-border-color-focus: var(--gl-button-danger-secondary-border-color-hover); /* Used for the border of an outlined danger (destructive) button in the focus state. */
+  --gl-button-danger-secondary-background-color-focus: var(--gl-button-danger-secondary-background-color-hover); /* Used for the background of an outlined danger (destructive) button in the focus state. */
+  --gl-button-danger-secondary-foreground-color-focus: var(--gl-button-danger-secondary-foreground-color-hover); /* Used for the foreground of a danger (destructive) button in the focus state. */
+  --gl-button-danger-primary-border-color-focus: var(--gl-button-danger-primary-border-color-hover); /* Used for the border of a danger (destructive) primary button in the focus state. */
+  --gl-button-danger-primary-background-color-focus: var(--gl-button-danger-primary-background-color-hover); /* Used for the background of a danger (destructive) primary button in the focus state. */
+  --gl-button-danger-primary-foreground-color-active: var(--gl-button-danger-primary-foreground-color-default); /* Used for the foreground of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-foreground-color-focus: var(--gl-button-danger-primary-foreground-color-default); /* Used for the foreground of a danger (destructive) primary button in the focus state. */
+  --gl-button-danger-primary-foreground-color-hover: var(--gl-button-danger-primary-foreground-color-default); /* Used for the foreground of a danger (destructive) primary button in the hover state. */
+  --gl-button-confirm-tertiary-border-color-default: var(--gl-action-confirm-border-color-default); /* Used for the border of a borderless, tertiary confirm (positive) button in the default state. */
+  --gl-button-confirm-tertiary-background-color-focus: var(--gl-action-confirm-background-color-focus); /* Used for the background of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-confirm-tertiary-foreground-color-active: var(--gl-action-confirm-foreground-color-active); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the active state. */
+  --gl-button-confirm-tertiary-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state. */
+  --gl-button-confirm-tertiary-foreground-color-default: var(--gl-action-confirm-foreground-color-default); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-border-color-focus: var(--gl-button-confirm-secondary-border-color-hover); /* Used for the border of an outlined confirm (positive) button in the focus state. */
+  --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /* Used for the background of an outlined confirm (positive) button in the focus state. */
+  --gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-hover); /* Used for the foreground of a confirm (positive) button in the focus state. */
+  --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-hover); /* Used for the border of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-background-color-focus: var(--gl-button-confirm-primary-background-color-hover); /* Used for the background of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-foreground-color-focus: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-foreground-color-hover: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the hover state. */
+  --gl-button-default-tertiary-border-color-default: var(--gl-action-neutral-border-color-default); /* Used for the border of a default borderless, tertiary button in the default state. */
+  --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of a default borderless, tertiary button in the focus state. */
+  --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a default borderless, tertiary button in the default state. */
+  --gl-button-default-primary-border-color-focus: var(--gl-button-default-primary-border-color-hover); /* Used for the border of an default primary button in the focus state. */
+  --gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-hover); /* Used for the background of an default primary button in the focus state. */
+  --gl-button-default-primary-foreground-color-active: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a default primary button in the active state. */
+  --gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a default primary button in the focus state. */
+  --gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a default primary button in the hover state. */
   --gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-hover); /* Used for the icon of a tier related badge in the focus state. */
   --gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-hover); /* Used for the text of a tier related badge in the focus state. */
   --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger (critical) badge in the focus state. */
@@ -639,4 +735,27 @@
   --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-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. */
+  --gl-button-selected-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover); /* Used for the foreground of a selected button in the hover state. */
+  --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the active state. */
+  --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the focus state. */
+  --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the hover state. */
+  --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the focus state. */
+  --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the hover state. */
+  --gl-button-danger-tertiary-border-color-active: var(--gl-action-danger-border-color-active); /* Used for the border of a borderless, tertiary danger (destructive) button in the active state. */
+  --gl-button-danger-tertiary-border-color-focus: var(--gl-action-danger-border-color-focus); /* Used for the border of a borderless, tertiary danger (destructive) button in the focus state. */
+  --gl-button-danger-tertiary-border-color-hover: var(--gl-action-danger-border-color-hover); /* Used for the border of a borderless, tertiary danger (destructive) button in the hover state. */
+  --gl-button-danger-tertiary-foreground-color-focus: var(--gl-action-danger-foreground-color-focus); /* Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state. */
+  --gl-button-confirm-tertiary-border-color-active: var(--gl-action-confirm-border-color-active); /* Used for the border of a borderless, tertiary confirm (positive) button in the active state. */
+  --gl-button-confirm-tertiary-border-color-focus: var(--gl-action-confirm-border-color-focus); /* Used for the border of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-confirm-tertiary-border-color-hover: var(--gl-action-confirm-border-color-hover); /* Used for the border of a borderless, tertiary confirm (positive) button in the hover state. */
+  --gl-button-confirm-tertiary-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-default-tertiary-border-color-active: var(--gl-action-neutral-border-color-active); /* Used for the border of a default borderless, tertiary button in the active state. */
+  --gl-button-default-tertiary-border-color-focus: var(--gl-action-neutral-border-color-focus); /* Used for the border of a default borderless, tertiary button in the focus state. */
+  --gl-button-default-tertiary-border-color-hover: var(--gl-action-neutral-border-color-hover); /* Used for the border of a default borderless, tertiary button in the hover state. */
+  --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the foreground of a default borderless, tertiary button in the active state. */
+  --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the foreground of a default borderless, tertiary button in the focus state. */
+  --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the foreground of a default borderless, tertiary button in the hover state. */
 }

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

@@ -364,6 +364,125 @@ export const GL_BADGE_TIER_ICON_COLOR_ACTIVE = '#ac93e6'; // Used for the icon o
 export const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#28272d'; // Used as background for the default banner type.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
+export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a default primary button in the default state.
+export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a default primary button in the hover state.
+export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a default primary button in the focus state.
+export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a default primary button in the active state.
+export const GL_BUTTON_DEFAULT_PRIMARY_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an default primary button in the default state.
+export const GL_BUTTON_DEFAULT_PRIMARY_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of an default primary button in the hover state.
+export const GL_BUTTON_DEFAULT_PRIMARY_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of an default primary button in the focus state.
+export const GL_BUTTON_DEFAULT_PRIMARY_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of an default primary button in the active state.
+export const GL_BUTTON_DEFAULT_PRIMARY_BORDER_COLOR_DEFAULT = '#4c4b51'; // Used for the border of an default primary button in the default state.
+export const GL_BUTTON_DEFAULT_PRIMARY_BORDER_COLOR_HOVER = '#737278'; // Used for the border of an default primary button in the hover state.
+export const GL_BUTTON_DEFAULT_PRIMARY_BORDER_COLOR_FOCUS = '#737278'; // Used for the border of an default primary button in the focus state.
+export const GL_BUTTON_DEFAULT_PRIMARY_BORDER_COLOR_ACTIVE = '#a4a3a8'; // Used for the border of an default primary button in the active state.
+export const GL_BUTTON_DEFAULT_TERTIARY_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a default borderless, tertiary button in the default state.
+export const GL_BUTTON_DEFAULT_TERTIARY_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a default borderless, tertiary button in the hover state.
+export const GL_BUTTON_DEFAULT_TERTIARY_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a default borderless, tertiary button in the focus state.
+export const GL_BUTTON_DEFAULT_TERTIARY_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a default borderless, tertiary button in the active state.
+export const GL_BUTTON_DEFAULT_TERTIARY_BACKGROUND_COLOR_DEFAULT = 'rgba(137, 136, 141, 0.0)'; // Used for the background of a default borderless, tertiary button in the default state.
+export const GL_BUTTON_DEFAULT_TERTIARY_BACKGROUND_COLOR_HOVER = 'rgba(137, 136, 141, 0.4)'; // Used for the background of a default borderless, tertiary button in the hover state.
+export const GL_BUTTON_DEFAULT_TERTIARY_BACKGROUND_COLOR_FOCUS = 'rgba(137, 136, 141, 0.4)'; // Used for the background of a default borderless, tertiary button in the focus state.
+export const GL_BUTTON_DEFAULT_TERTIARY_BACKGROUND_COLOR_ACTIVE = 'rgba(137, 136, 141, 0.16)'; // Used for the background of a default borderless, tertiary button in the active state.
+export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a default borderless, tertiary button in the default state.
+export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a default borderless, tertiary button in the hover state.
+export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a default borderless, tertiary button in the focus state.
+export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a default borderless, tertiary button in the active state.
+export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a confirm (positive) primary button in the default state.
+export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a confirm (positive) primary button in the hover state.
+export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a confirm (positive) primary button in the focus state.
+export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a confirm (positive) primary button in the active state.
+export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_DEFAULT = '#428fdc'; // Used for the background of a confirm (positive) primary button in the default state.
+export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_HOVER = '#63a6e9'; // Used for the background of a confirm (positive) primary button in the hover state.
+export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_FOCUS = '#63a6e9'; // Used for the background of a confirm (positive) primary button in the focus state.
+export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of a confirm (positive) primary button in the active state.
+export const GL_BUTTON_CONFIRM_PRIMARY_BORDER_COLOR_DEFAULT = '#63a6e9'; // Used for the border of a confirm (positive) primary button in the default state.
+export const GL_BUTTON_CONFIRM_PRIMARY_BORDER_COLOR_HOVER = '#cbe2f9'; // Used for the border of a confirm (positive) primary button in the hover state.
+export const GL_BUTTON_CONFIRM_PRIMARY_BORDER_COLOR_FOCUS = '#cbe2f9'; // Used for the border of a confirm (positive) primary button in the focus state.
+export const GL_BUTTON_CONFIRM_PRIMARY_BORDER_COLOR_ACTIVE = '#e9f3fc'; // Used for the border of a confirm (positive) primary button in the active state.
+export const GL_BUTTON_CONFIRM_SECONDARY_FOREGROUND_COLOR_DEFAULT = '#428fdc'; // Used for the foreground of a confirm (positive) button in the default state.
+export const GL_BUTTON_CONFIRM_SECONDARY_FOREGROUND_COLOR_HOVER = '#9dc7f1'; // Used for the foreground of a confirm (positive) button in the hover state.
+export const GL_BUTTON_CONFIRM_SECONDARY_FOREGROUND_COLOR_FOCUS = '#9dc7f1'; // Used for the foreground of a confirm (positive) button in the focus state.
+export const GL_BUTTON_CONFIRM_SECONDARY_FOREGROUND_COLOR_ACTIVE = '#e9f3fc'; // Used for the foreground of a confirm (positive) button in the active state.
+export const GL_BUTTON_CONFIRM_SECONDARY_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an outlined confirm (positive) button in the default state.
+export const GL_BUTTON_CONFIRM_SECONDARY_BACKGROUND_COLOR_HOVER = '#033464'; // Used for the background of an outlined confirm (positive) button in the hover state.
+export const GL_BUTTON_CONFIRM_SECONDARY_BACKGROUND_COLOR_FOCUS = '#033464'; // Used for the background of an outlined confirm (positive) button in the focus state.
+export const GL_BUTTON_CONFIRM_SECONDARY_BACKGROUND_COLOR_ACTIVE = '#064787'; // Used for the background of an outlined confirm (positive) button in the active state.
+export const GL_BUTTON_CONFIRM_SECONDARY_BORDER_COLOR_DEFAULT = '#428fdc'; // Used for the border of an outlined confirm (positive) button in the default state.
+export const GL_BUTTON_CONFIRM_SECONDARY_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of an outlined confirm (positive) button in the hover state.
+export const GL_BUTTON_CONFIRM_SECONDARY_BORDER_COLOR_FOCUS = '#9dc7f1'; // Used for the border of an outlined confirm (positive) button in the focus state.
+export const GL_BUTTON_CONFIRM_SECONDARY_BORDER_COLOR_ACTIVE = '#e9f3fc'; // Used for the border of an outlined confirm (positive) button in the active state.
+export const GL_BUTTON_CONFIRM_TERTIARY_FOREGROUND_COLOR_DEFAULT = '#428fdc'; // Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.
+export const GL_BUTTON_CONFIRM_TERTIARY_FOREGROUND_COLOR_HOVER = '#9dc7f1'; // Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.
+export const GL_BUTTON_CONFIRM_TERTIARY_FOREGROUND_COLOR_FOCUS = '#9dc7f1'; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
+export const GL_BUTTON_CONFIRM_TERTIARY_FOREGROUND_COLOR_ACTIVE = '#e9f3fc'; // Used for the foreground of a borderless, tertiary confirm (positive) button in the active state.
+export const GL_BUTTON_CONFIRM_TERTIARY_BACKGROUND_COLOR_DEFAULT = 'rgba(66, 143, 220, 0.0)'; // Used for the background of a borderless, tertiary confirm (positive) button in the default state.
+export const GL_BUTTON_CONFIRM_TERTIARY_BACKGROUND_COLOR_HOVER = 'rgba(66, 143, 220, 0.4)'; // Used for the background of a borderless, tertiary confirm (positive) button in the hover state.
+export const GL_BUTTON_CONFIRM_TERTIARY_BACKGROUND_COLOR_FOCUS = 'rgba(66, 143, 220, 0.4)'; // Used for the background of a borderless, tertiary confirm (positive) button in the focus state.
+export const GL_BUTTON_CONFIRM_TERTIARY_BACKGROUND_COLOR_ACTIVE = 'rgba(66, 143, 220, 0.16)'; // Used for the background of a borderless, tertiary confirm (positive) button in the active state.
+export const GL_BUTTON_CONFIRM_TERTIARY_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a borderless, tertiary confirm (positive) button in the default state.
+export const GL_BUTTON_CONFIRM_TERTIARY_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
+export const GL_BUTTON_CONFIRM_TERTIARY_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
+export const GL_BUTTON_CONFIRM_TERTIARY_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a borderless, tertiary confirm (positive) button in the active state.
+export const GL_BUTTON_DANGER_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a danger (destructive) primary button in the default state.
+export const GL_BUTTON_DANGER_PRIMARY_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a danger (destructive) primary button in the hover state.
+export const GL_BUTTON_DANGER_PRIMARY_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a danger (destructive) primary button in the focus state.
+export const GL_BUTTON_DANGER_PRIMARY_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a danger (destructive) primary button in the active state.
+export const GL_BUTTON_DANGER_PRIMARY_BACKGROUND_COLOR_DEFAULT = '#ec5941'; // Used for the background of a danger (destructive) primary button in the default state.
+export const GL_BUTTON_DANGER_PRIMARY_BACKGROUND_COLOR_HOVER = '#f57f6c'; // Used for the background of a danger (destructive) primary button in the hover state.
+export const GL_BUTTON_DANGER_PRIMARY_BACKGROUND_COLOR_FOCUS = '#f57f6c'; // Used for the background of a danger (destructive) primary button in the focus state.
+export const GL_BUTTON_DANGER_PRIMARY_BACKGROUND_COLOR_ACTIVE = '#fdd4cd'; // Used for the background of a danger (destructive) primary button in the active state.
+export const GL_BUTTON_DANGER_PRIMARY_BORDER_COLOR_DEFAULT = '#f57f6c'; // Used for the border of a danger (destructive) primary button in the default state.
+export const GL_BUTTON_DANGER_PRIMARY_BORDER_COLOR_HOVER = '#fdd4cd'; // Used for the border of a danger (destructive) primary button in the hover state.
+export const GL_BUTTON_DANGER_PRIMARY_BORDER_COLOR_FOCUS = '#fdd4cd'; // Used for the border of a danger (destructive) primary button in the focus state.
+export const GL_BUTTON_DANGER_PRIMARY_BORDER_COLOR_ACTIVE = '#fcf1ef'; // Used for the border of a danger (destructive) primary button in the active state.
+export const GL_BUTTON_DANGER_SECONDARY_FOREGROUND_COLOR_DEFAULT = '#ec5941'; // Used for the foreground of a danger (destructive) button in the default state.
+export const GL_BUTTON_DANGER_SECONDARY_FOREGROUND_COLOR_HOVER = '#fcb5aa'; // Used for the foreground of a danger (destructive) button in the hover state.
+export const GL_BUTTON_DANGER_SECONDARY_FOREGROUND_COLOR_FOCUS = '#fcb5aa'; // Used for the foreground of a danger (destructive) button in the focus state.
+export const GL_BUTTON_DANGER_SECONDARY_FOREGROUND_COLOR_ACTIVE = '#fcf1ef'; // Used for the foreground of a danger (destructive) button in the active state.
+export const GL_BUTTON_DANGER_SECONDARY_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an outlined danger (destructive) button in the default state.
+export const GL_BUTTON_DANGER_SECONDARY_BACKGROUND_COLOR_HOVER = '#660e00'; // Used for the background of an outlined danger (destructive) button in the hover state.
+export const GL_BUTTON_DANGER_SECONDARY_BACKGROUND_COLOR_FOCUS = '#660e00'; // Used for the background of an outlined danger (destructive) button in the focus state.
+export const GL_BUTTON_DANGER_SECONDARY_BACKGROUND_COLOR_ACTIVE = '#8d1300'; // Used for the background of an outlined danger (destructive) button in the active state.
+export const GL_BUTTON_DANGER_SECONDARY_BORDER_COLOR_DEFAULT = '#ec5941'; // Used for the border of an outlined danger (destructive) button in the default state.
+export const GL_BUTTON_DANGER_SECONDARY_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of an outlined danger (destructive) button in the hover state.
+export const GL_BUTTON_DANGER_SECONDARY_BORDER_COLOR_FOCUS = '#fcb5aa'; // Used for the border of an outlined danger (destructive) button in the focus state.
+export const GL_BUTTON_DANGER_SECONDARY_BORDER_COLOR_ACTIVE = '#fcf1ef'; // Used for the border of an outlined danger (destructive) button in the active state.
+export const GL_BUTTON_DANGER_TERTIARY_FOREGROUND_COLOR_DEFAULT = '#ec5941'; // Used for the foreground of a borderless, tertiary danger (destructive) button in the default state.
+export const GL_BUTTON_DANGER_TERTIARY_FOREGROUND_COLOR_HOVER = '#fcb5aa'; // Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state.
+export const GL_BUTTON_DANGER_TERTIARY_FOREGROUND_COLOR_FOCUS = '#fcb5aa'; // Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state.
+export const GL_BUTTON_DANGER_TERTIARY_FOREGROUND_COLOR_ACTIVE = '#fcf1ef'; // Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.
+export const GL_BUTTON_DANGER_TERTIARY_BACKGROUND_COLOR_DEFAULT = 'rgba(236, 89, 65, 0.0)'; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
+export const GL_BUTTON_DANGER_TERTIARY_BACKGROUND_COLOR_HOVER = 'rgba(236, 89, 65, 0.4)'; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.
+export const GL_BUTTON_DANGER_TERTIARY_BACKGROUND_COLOR_FOCUS = 'rgba(236, 89, 65, 0.4)'; // Used for the background of a borderless, tertiary danger (destructive) button in the focus state.
+export const GL_BUTTON_DANGER_TERTIARY_BACKGROUND_COLOR_ACTIVE = 'rgba(236, 89, 65, 0.16)'; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
+export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
+export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a borderless, tertiary danger (destructive) button in the hover state.
+export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a borderless, tertiary danger (destructive) button in the focus state.
+export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a borderless, tertiary danger (destructive) button in the active state.
+export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = '#89888d'; // Used for the border of a dashed button in the default state.
+export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = '#89888d'; // Used for the border of a dashed button in the hover state.
+export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = '#89888d'; // Used for the border of a dashed button in the focus state.
+export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = '#a4a3a8'; // Used for the border of a dashed button in the active state.
+export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#63a6e9'; // Used for the text of a link button in the default state.
+export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#63a6e9'; // Used for the text of a link button in the hover state.
+export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#63a6e9'; // Used for the text of a link button in the focus state.
+export const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#63a6e9'; // Used for the text of a link button in the active state.
+export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a selected button in the default state.
+export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a selected button in the hover state.
+export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a selected button in the focus state.
+export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a selected button in the active state.
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a selected button in the default state.
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a selected button in the hover state.
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of a selected button in the focus state.
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a selected button in the active state.
+export const GL_BUTTON_SELECTED_BORDER_COLOR_DEFAULT = '#626168'; // Used for the border of a selected button in the default state.
+export const GL_BUTTON_SELECTED_BORDER_COLOR_HOVER = '#737278'; // Used for the border of a selected button in the hover state.
+export const GL_BUTTON_SELECTED_BORDER_COLOR_FOCUS = '#737278'; // Used for the border of a selected button in the focus state.
+export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = '#a4a3a8'; // Used for the border of a selected button in the active state.
+export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#89888d'; // Used for the foreground of a disabled button.
+export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#18171d'; // Used for the background of a disabled button.
+export const GL_BUTTON_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled button.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.
@@ -568,10 +687,10 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)'; // Use color.alpha.ligh
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)'; // Use color.alpha.light.4 instead.
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)'; // Use color.alpha.light.6 instead.
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)'; // Use color.alpha.light.8 instead.
-export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#fbfafd'; // Used for a background associated with feedback like a tooltip or toast message.
-export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#28272d'; // Used for text on a strong feedback background.
-export const GL_FEEDBACK_ICON_COLOR_STRONG = '#28272d'; // Used for an icon on a strong feedback background.
-export const GL_FEEDBACK_LINK_COLOR_STRONG = '#0b5cad'; // Used for a link on a strong feedback background.
+export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#fbfafd'; // Used for a background associated with strong feedback like a tooltip or toast message.
+export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#28272d'; // Used for text on a strong feedback background.
+export const GL_FEEDBACK_STRONG_ICON_COLOR = '#28272d'; // Used for an icon on a strong feedback background.
+export const GL_FEEDBACK_STRONG_LINK_COLOR = '#0b5cad'; // Used for a link on a strong feedback background.
 export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
 export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#bfbfc3'; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
 export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8'; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.