npm - @gitlab/ui - Versions diffs - 89.2.0 → 89.4.0 - Mend

@gitlab/ui 89.2.0 → 89.4.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 +20 -0
package/dist/index.css +2 -2
package/dist/index.css.map +1 -1
package/dist/tokens/build/js/tokens.dark.js +116 -92
package/dist/tokens/build/js/tokens.js +33 -9
package/dist/tokens/css/tokens.css +38 -14
package/dist/tokens/css/tokens.dark.css +95 -71
package/dist/tokens/js/tokens.dark.js +115 -91
package/dist/tokens/js/tokens.js +32 -8
package/dist/tokens/json/tokens.dark.json +744 -177
package/dist/tokens/json/tokens.json +661 -94
package/dist/tokens/scss/_tokens.dark.scss +95 -71
package/dist/tokens/scss/_tokens.scss +38 -14
package/dist/tokens/scss/_tokens_custom_properties.scss +24 -0
package/package.json +3 -3
package/src/components/base/badge/badge.scss +65 -32
package/src/components/base/datepicker/datepicker.scss +5 -0
package/src/components/base/toggle/toggle.scss +8 -5
package/src/tokens/action.tokens.json +171 -3
package/src/tokens/build/css/tokens.css +38 -14
package/src/tokens/build/css/tokens.dark.css +95 -71
package/src/tokens/build/js/tokens.dark.js +115 -91
package/src/tokens/build/js/tokens.js +32 -8
package/src/tokens/build/json/tokens.dark.json +744 -177
package/src/tokens/build/json/tokens.json +661 -94
package/src/tokens/build/scss/_tokens.dark.scss +95 -71
package/src/tokens/build/scss/_tokens.scss +38 -14
package/src/tokens/build/scss/_tokens_custom_properties.scss +24 -0
package/src/tokens/contextual/badge.tokens.json +69 -69
package/src/tokens/contextual/button.tokens.json +8 -17

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

@@ -557,10 +557,6 @@
   --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. */
@@ -574,90 +570,90 @@
   --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. */
-  --gl-badge-tier-icon-color-active: var(--gl-color-purple-300); /* Used for the icon of a tier related badge in the active state. */
-  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-400); /* Used for the icon of a tier related badge in the hover state. */
-  --gl-badge-tier-icon-color-default: var(--gl-color-purple-500); /* Used for the icon of a tier related badge when static or the default state when linked. */
-  --gl-badge-tier-text-color-active: var(--gl-color-purple-100); /* Used for the text of a tier related badge in the active state. */
-  --gl-badge-tier-text-color-hover: var(--gl-color-purple-200); /* Used for the text of a tier related badge in the hover state. */
-  --gl-badge-tier-text-color-default: var(--gl-color-purple-300); /* Used for the text of a tier related badge when static or the default state when linked. */
+  --gl-badge-tier-icon-color-active: var(--gl-color-purple-950); /* Used for the icon of a tier related badge in the active state. */
+  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-950); /* Used for the icon of a tier related badge in the hover state. */
+  --gl-badge-tier-icon-color-default: var(--gl-color-purple-950); /* Used for the icon of a tier related badge when static or the default state when linked. */
+  --gl-badge-tier-text-color-active: var(--gl-color-purple-950); /* Used for the text of a tier related badge in the active state. */
+  --gl-badge-tier-text-color-hover: var(--gl-color-purple-950); /* Used for the text of a tier related badge in the hover state. */
+  --gl-badge-tier-text-color-default: var(--gl-color-purple-950); /* Used for the text of a tier related badge when static or the default state when linked. */
   --gl-badge-tier-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a tier related badge in the active state. */
   --gl-badge-tier-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a tier related badge in the focus state. */
-  --gl-badge-tier-border-color-hover: var(--gl-color-purple-800); /* Used for the border of a tier related badge in the hover state. */
+  --gl-badge-tier-border-color-hover: var(--gl-color-purple-200); /* Used for the border of a tier related badge in the hover state. */
   --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a tier related badge when static or the default state when linked. */
-  --gl-badge-tier-background-color-active: var(--gl-color-purple-800); /* Used for the background of a tier related badge in the active state. */
-  --gl-badge-tier-background-color-default: var(--gl-color-purple-900); /* Used for the background of a tier related badge when static or the default state when linked. */
-  --gl-badge-danger-icon-color-active: var(--gl-color-red-200); /* Used for the icon of a danger badge in the active state. */
-  --gl-badge-danger-icon-color-hover: var(--gl-color-red-300); /* Used for the icon of a danger badge in the hover state. */
-  --gl-badge-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger badge when static or the default state when linked. */
-  --gl-badge-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger badge in the active state. */
-  --gl-badge-danger-text-color-hover: var(--gl-color-red-100); /* Used for the text of a danger badge in the hover state. */
-  --gl-badge-danger-text-color-default: var(--gl-color-red-200); /* Used for the text of a danger badge when static or the default state when linked. */
+  --gl-badge-tier-background-color-active: var(--gl-color-purple-200); /* Used for the background of a tier related badge in the active state. */
+  --gl-badge-tier-background-color-default: var(--gl-color-purple-300); /* Used for the background of a tier related badge when static or the default state when linked. */
+  --gl-badge-danger-icon-color-active: var(--gl-color-red-950); /* Used for the icon of a danger badge in the active state. */
+  --gl-badge-danger-icon-color-hover: var(--gl-color-red-950); /* Used for the icon of a danger badge in the hover state. */
+  --gl-badge-danger-icon-color-default: var(--gl-color-red-950); /* Used for the icon of a danger badge when static or the default state when linked. */
+  --gl-badge-danger-text-color-active: var(--gl-color-red-950); /* Used for the text of a danger badge in the active state. */
+  --gl-badge-danger-text-color-hover: var(--gl-color-red-950); /* Used for the text of a danger badge in the hover state. */
+  --gl-badge-danger-text-color-default: var(--gl-color-red-950); /* Used for the text of a danger badge when static or the default state when linked. */
   --gl-badge-danger-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a danger badge in the active state. */
   --gl-badge-danger-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a danger badge in the focus state. */
-  --gl-badge-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger badge in the hover state. */
+  --gl-badge-danger-border-color-hover: var(--gl-color-red-200); /* Used for the border of a danger badge in the hover state. */
   --gl-badge-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger badge when static or the default state when linked. */
-  --gl-badge-danger-background-color-active: var(--gl-color-red-700); /* Used for the background of a danger badge in the active state. */
-  --gl-badge-danger-background-color-default: var(--gl-color-red-800); /* Used for the background of a danger badge when static or the default state when linked. */
-  --gl-badge-warning-icon-color-active: var(--gl-color-orange-200); /* Used for the icon of a warning badge in the active state. */
-  --gl-badge-warning-icon-color-hover: var(--gl-color-orange-300); /* Used for the icon of a warning badge in the hover state. */
-  --gl-badge-warning-icon-color-default: var(--gl-color-orange-400); /* Used for the icon of a warning badge when static or the default state when linked. */
-  --gl-badge-warning-text-color-active: var(--gl-color-orange-50); /* Used for the text of a warning badge in the active state. */
-  --gl-badge-warning-text-color-hover: var(--gl-color-orange-100); /* Used for the text of a warning badge in the hover state. */
-  --gl-badge-warning-text-color-default: var(--gl-color-orange-200); /* Used for the text of a warning badge when static or the default state when linked. */
+  --gl-badge-danger-background-color-active: var(--gl-color-red-200); /* Used for the background of a danger badge in the active state. */
+  --gl-badge-danger-background-color-default: var(--gl-color-red-300); /* Used for the background of a danger badge when static or the default state when linked. */
+  --gl-badge-warning-icon-color-active: var(--gl-color-orange-950); /* Used for the icon of a warning badge in the active state. */
+  --gl-badge-warning-icon-color-hover: var(--gl-color-orange-950); /* Used for the icon of a warning badge in the hover state. */
+  --gl-badge-warning-icon-color-default: var(--gl-color-orange-950); /* Used for the icon of a warning badge when static or the default state when linked. */
+  --gl-badge-warning-text-color-active: var(--gl-color-orange-950); /* Used for the text of a warning badge in the active state. */
+  --gl-badge-warning-text-color-hover: var(--gl-color-orange-950); /* Used for the text of a warning badge in the hover state. */
+  --gl-badge-warning-text-color-default: var(--gl-color-orange-950); /* Used for the text of a warning badge when static or the default state when linked. */
   --gl-badge-warning-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a warning badge in the active state. */
   --gl-badge-warning-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a warning badge in the focus state. */
-  --gl-badge-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning badge in the hover state. */
+  --gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /* Used for the border of a warning badge in the hover state. */
   --gl-badge-warning-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a warning badge when static or the default state when linked. */
-  --gl-badge-warning-background-color-active: var(--gl-color-orange-700); /* Used for the background of a warning badge in the active state. */
-  --gl-badge-warning-background-color-default: var(--gl-color-orange-800); /* Used for the background of a warning badge when static or the default state when linked. */
-  --gl-badge-success-icon-color-active: var(--gl-color-green-200); /* Used for the icon of a success badge in the active state. */
-  --gl-badge-success-icon-color-hover: var(--gl-color-green-300); /* Used for the icon of a success badge in the hover state. */
-  --gl-badge-success-icon-color-default: var(--gl-color-green-400); /* Used for the icon of a success badge when static or the default state when linked. */
-  --gl-badge-success-text-color-active: var(--gl-color-green-50); /* Used for the text of a success badge in the active state. */
-  --gl-badge-success-text-color-hover: var(--gl-color-green-100); /* Used for the text of a success badge in the hover state. */
-  --gl-badge-success-text-color-default: var(--gl-color-green-200); /* Used for the text of a success badge when static or the default state when linked. */
+  --gl-badge-warning-background-color-active: var(--gl-color-orange-200); /* Used for the background of a warning badge in the active state. */
+  --gl-badge-warning-background-color-default: var(--gl-color-orange-300); /* Used for the background of a warning badge when static or the default state when linked. */
+  --gl-badge-success-icon-color-active: var(--gl-color-green-950); /* Used for the icon of a success badge in the active state. */
+  --gl-badge-success-icon-color-hover: var(--gl-color-green-950); /* Used for the icon of a success badge in the hover state. */
+  --gl-badge-success-icon-color-default: var(--gl-color-green-950); /* Used for the icon of a success badge when static or the default state when linked. */
+  --gl-badge-success-text-color-active: var(--gl-color-green-950); /* Used for the text of a success badge in the active state. */
+  --gl-badge-success-text-color-hover: var(--gl-color-green-950); /* Used for the text of a success badge in the hover state. */
+  --gl-badge-success-text-color-default: var(--gl-color-green-950); /* Used for the text of a success badge when static or the default state when linked. */
   --gl-badge-success-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a success badge in the active state. */
   --gl-badge-success-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a success badge in the focus state. */
-  --gl-badge-success-border-color-hover: var(--gl-color-green-700); /* Used for the border of a success badge in the hover state. */
+  --gl-badge-success-border-color-hover: var(--gl-color-green-200); /* Used for the border of a success badge in the hover state. */
   --gl-badge-success-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a success badge when static or the default state when linked. */
-  --gl-badge-success-background-color-active: var(--gl-color-green-700); /* Used for the background of a success badge in the active state. */
-  --gl-badge-success-background-color-default: var(--gl-color-green-800); /* Used for the background of a success badge when static or the default state when linked. */
-  --gl-badge-info-icon-color-active: var(--gl-color-blue-200); /* Used for the icon of an informational badge in the active state. */
-  --gl-badge-info-icon-color-hover: var(--gl-color-blue-300); /* Used for the icon of an informational badge in the hover state. */
-  --gl-badge-info-icon-color-default: var(--gl-color-blue-400); /* Used for the icon of an informational badge when static or the default state when linked. */
-  --gl-badge-info-text-color-active: var(--gl-color-blue-50); /* Used for the text of an informational badge in the active state. */
-  --gl-badge-info-text-color-hover: var(--gl-color-blue-100); /* Used for the text of an informational badge in the hover state. */
-  --gl-badge-info-text-color-default: var(--gl-color-blue-200); /* Used for the text of an informational badge when static or the default state when linked. */
+  --gl-badge-success-background-color-active: var(--gl-color-green-200); /* Used for the background of a success badge in the active state. */
+  --gl-badge-success-background-color-default: var(--gl-color-green-300); /* Used for the background of a success badge when static or the default state when linked. */
+  --gl-badge-info-icon-color-active: var(--gl-color-blue-950); /* Used for the icon of an informational badge in the active state. */
+  --gl-badge-info-icon-color-hover: var(--gl-color-blue-950); /* Used for the icon of an informational badge in the hover state. */
+  --gl-badge-info-icon-color-default: var(--gl-color-blue-950); /* Used for the icon of an informational badge when static or the default state when linked. */
+  --gl-badge-info-text-color-active: var(--gl-color-blue-950); /* Used for the text of an informational badge in the active state. */
+  --gl-badge-info-text-color-hover: var(--gl-color-blue-950); /* Used for the text of an informational badge in the hover state. */
+  --gl-badge-info-text-color-default: var(--gl-color-blue-950); /* Used for the text of an informational badge when static or the default state when linked. */
   --gl-badge-info-border-color-active: var(--gl-color-alpha-0); /* Used for the border of an informational badge in the active state. */
   --gl-badge-info-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of an informational badge in the focus state. */
-  --gl-badge-info-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an informational badge in the hover state. */
+  --gl-badge-info-border-color-hover: var(--gl-color-blue-200); /* Used for the border of an informational badge in the hover state. */
   --gl-badge-info-border-color-default: var(--gl-color-alpha-0); /* Used for the border of an informational badge when static or the default state when linked. */
-  --gl-badge-info-background-color-active: var(--gl-color-blue-700); /* Used for the background of an informational badge in the active state. */
-  --gl-badge-info-background-color-default: var(--gl-color-blue-800); /* Used for the background of an informational badge when static or the default state when linked. */
-  --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a neutral badge in the active state. */
-  --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a neutral badge in the hover state. */
-  --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a neutral badge when static or the default state when linked. */
-  --gl-badge-neutral-text-color-active: var(--gl-color-neutral-50); /* Used for the text of a neutral badge in the active state. */
-  --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-100); /* Used for the text of a neutral badge in the hover state. */
-  --gl-badge-neutral-text-color-default: var(--gl-color-neutral-200); /* Used for the text of a neutral badge when static or the default state when linked. */
+  --gl-badge-info-background-color-active: var(--gl-color-blue-200); /* Used for the background of an informational badge in the active state. */
+  --gl-badge-info-background-color-default: var(--gl-color-blue-300); /* Used for the background of an informational badge when static or the default state when linked. */
+  --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-950); /* Used for the icon of a neutral badge in the active state. */
+  --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-950); /* Used for the icon of a neutral badge in the hover state. */
+  --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-950); /* Used for the icon of a neutral badge when static or the default state when linked. */
+  --gl-badge-neutral-text-color-active: var(--gl-color-neutral-950); /* Used for the text of a neutral badge in the active state. */
+  --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-950); /* Used for the text of a neutral badge in the hover state. */
+  --gl-badge-neutral-text-color-default: var(--gl-color-neutral-950); /* Used for the text of a neutral badge when static or the default state when linked. */
   --gl-badge-neutral-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a neutral badge in the active state. */
   --gl-badge-neutral-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a neutral badge in the focus state. */
-  --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a neutral badge in the hover state. */
+  --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-200); /* Used for the border of a neutral badge in the hover state. */
   --gl-badge-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral badge when static or the default state when linked. */
-  --gl-badge-neutral-background-color-active: var(--gl-color-neutral-700); /* Used for the background of a neutral badge in the active state. */
-  --gl-badge-neutral-background-color-default: var(--gl-color-neutral-800); /* Used for the background of a neutral badge when static or the default state when linked. */
-  --gl-badge-muted-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a muted badge in the active state. */
-  --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a muted badge in the hover state. */
-  --gl-badge-muted-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a muted badge when static or the default state when linked. */
-  --gl-badge-muted-text-color-active: var(--gl-color-neutral-100); /* Used for the text of a muted badge in the active state. */
-  --gl-badge-muted-text-color-hover: var(--gl-color-neutral-200); /* Used for the text of a muted badge in the hover state. */
-  --gl-badge-muted-text-color-default: var(--gl-color-neutral-300); /* Used for the text of a muted badge when static or the default state when linked. */
+  --gl-badge-neutral-background-color-active: var(--gl-color-neutral-200); /* Used for the background of a neutral badge in the active state. */
+  --gl-badge-neutral-background-color-default: var(--gl-color-neutral-300); /* Used for the background of a neutral badge when static or the default state when linked. */
+  --gl-badge-muted-icon-color-active: var(--gl-color-neutral-950); /* Used for the icon of a muted badge in the active state. */
+  --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-950); /* Used for the icon of a muted badge in the hover state. */
+  --gl-badge-muted-icon-color-default: var(--gl-color-neutral-950); /* Used for the icon of a muted badge when static or the default state when linked. */
+  --gl-badge-muted-text-color-active: var(--gl-color-neutral-950); /* Used for the text of a muted badge in the active state. */
+  --gl-badge-muted-text-color-hover: var(--gl-color-neutral-950); /* Used for the text of a muted badge in the hover state. */
+  --gl-badge-muted-text-color-default: var(--gl-color-neutral-950); /* Used for the text of a muted badge when static or the default state when linked. */
   --gl-badge-muted-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a muted badge in the active state. */
   --gl-badge-muted-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a muted badge in the focus state. */
-  --gl-badge-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a muted badge in the hover state. */
+  --gl-badge-muted-border-color-hover: var(--gl-color-neutral-300); /* Used for the border of a muted badge in the hover state. */
   --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a muted badge when static or the default state when linked. */
-  --gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a muted badge in the active state. */
-  --gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a muted badge when static or the default state when linked. */
+  --gl-badge-muted-background-color-active: var(--gl-color-neutral-300); /* Used for the background of a muted badge in the active state. */
+  --gl-badge-muted-background-color-default: var(--gl-color-neutral-400); /* Used for the background of a muted badge when static or the default state when linked. */
   --gl-avatar-fallback-text-color-neutral: var(--gl-color-neutral-200); /* Neutral text color for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-200); /* Orange text color for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-text-color-green: var(--gl-color-green-200); /* Green text color for avatar fallback with no particular meaning. */
@@ -675,6 +671,16 @@
   --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
   --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
+  --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong neutral action in the default state. */
+  --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong neutral action in the default state. */
+  --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a strong neutral action in the active state. */
+  --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-200); /* Used for the background of a strong neutral action in the hover state. */
+  --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-300); /* Used for the background of a strong neutral action in the default state. */
+  --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong confirm action in the default state. */
+  --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong confirm action in the default state. */
+  --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-200); /* Used for the background of a strong confirm action in the active state. */
+  --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-300); /* Used for the background of a strong confirm action in the hover state. */
+  --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-400); /* Used for the background of a strong confirm action in the default state. */
   --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger action in the default state. */
   --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /* Used for the background of a danger (destructive) action in the focus state. */
   --gl-action-danger-foreground-color-active: var(--gl-color-red-50); /* Used for the foreground of a danger (destructive) action in the active state. */
@@ -727,10 +733,10 @@
   --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-confirm-primary-background-color-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the background of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-background-color-hover: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-background-color-default: var(--gl-action-strong-confirm-background-color-default); /* Used for the background of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the default 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. */
@@ -760,6 +766,12 @@
   --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a muted badge in the focus state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a muted badge in the focus state. */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /* Used for the background of a muted badge in the hover state. */
+  --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
+  --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
+  --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */
+  --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /* Used for the border of a strong confirm action in the hover state. */
+  --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a strong confirm action in the hover state. */
+  --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a strong confirm action in the focus state. */
   --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
   --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
   --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
@@ -791,6 +803,8 @@
   --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-confirm-primary-background-color-focus: var(--gl-action-strong-confirm-background-color-focus); /* Used for the background of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a confirm (positive) primary button in the hover 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. */
@@ -804,4 +818,14 @@
   --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /* Used for the background of an informational badge in the focus state. */
   --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /* Used for the background of a neutral badge in the focus state. */
   --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /* Used for the background of a muted badge in the focus state. */
+  --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /* Used for the border of a strong neutral action in the focus state. */
+  --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-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-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /* Used for the foreground of a confirm (positive) primary button in the active state. */
 }

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

@@ -42,6 +42,30 @@ export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for
 export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a danger action in the hover state.
 export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger action in the focus state.
 export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger action in the active state.
+export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#428fdc'; // Used for the background of a strong confirm action in the default state.
+export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_HOVER = '#63a6e9'; // Used for the background of a strong confirm action in the hover state.
+export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_FOCUS = '#63a6e9'; // Used for the background of a strong confirm action in the focus state.
+export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of a strong confirm action in the active state.
+export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong confirm action in the default state.
+export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong confirm action in the hover state.
+export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong confirm action in the focus state.
+export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong confirm action in the active state.
+export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong confirm action in the default state.
+export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong confirm action in the hover state.
+export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong confirm action in the focus state.
+export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a strong confirm action in the active state.
+export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#a4a3a8'; // Used for the background of a strong neutral action in the default state.
+export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#bfbfc3'; // Used for the background of a strong neutral action in the hover state.
+export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#bfbfc3'; // Used for the background of a strong neutral action in the focus state.
+export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a strong neutral action in the active state.
+export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong neutral action in the default state.
+export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong neutral action in the hover state.
+export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong neutral action in the focus state.
+export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong neutral action in the active state.
+export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong neutral action in the default state.
+export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong neutral action in the hover state.
+export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong neutral action in the focus state.
+export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a strong neutral action in the active state.
 export const GL_BACKGROUND_COLOR_DEFAULT = '#18171d'; // Used for the default background color.
 export const GL_BACKGROUND_COLOR_SUBTLE = '#28272d'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#3a383f'; // Used to make the background easily stand out from the default.
@@ -291,118 +315,118 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#9dc7f13d'; // Blue bac
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#91d4a83d'; // Green background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#e9be743d'; // Orange background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#bfbfc33d'; // Neutral background for avatar fallback with no particular meaning.
-export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a muted badge when static or the default state when linked.
-export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a muted badge in the hover state.
-export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of a muted badge in the focus state.
-export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a muted badge in the active state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#89888d'; // Used for the background of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#89888d'; // Used for the background of a muted badge in the hover state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#89888d'; // Used for the background of a muted badge in the focus state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#a4a3a8'; // Used for the background of a muted badge in the active state.
 export const GL_BADGE_MUTED_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a muted badge when static or the default state when linked.
-export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a muted badge in the hover state.
+export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#a4a3a8'; // Used for the border of a muted badge in the hover state.
 export const GL_BADGE_MUTED_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a muted badge in the focus state.
 export const GL_BADGE_MUTED_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a muted badge in the active state.
-export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a muted badge when static or the default state when linked.
-export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a muted badge in the hover state.
-export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a muted badge in the focus state.
-export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a muted badge in the active state.
-export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a muted badge when static or the default state when linked.
-export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a muted badge in the hover state.
-export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a muted badge in the focus state.
-export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a muted badge in the active state.
-export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the background of a neutral badge when static or the default state when linked.
-export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_HOVER = '#3a383f'; // Used for the background of a neutral badge in the hover state.
-export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#3a383f'; // Used for the background of a neutral badge in the focus state.
-export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#4c4b51'; // Used for the background of a neutral badge in the active state.
+export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#18171d'; // Used for the text of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#18171d'; // Used for the text of a muted badge in the hover state.
+export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#18171d'; // Used for the text of a muted badge in the focus state.
+export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#18171d'; // Used for the text of a muted badge in the active state.
+export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#18171d'; // Used for the icon of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#18171d'; // Used for the icon of a muted badge in the hover state.
+export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#18171d'; // Used for the icon of a muted badge in the focus state.
+export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#18171d'; // Used for the icon of a muted badge in the active state.
+export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#a4a3a8'; // Used for the background of a neutral badge when static or the default state when linked.
+export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_HOVER = '#a4a3a8'; // Used for the background of a neutral badge in the hover state.
+export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#a4a3a8'; // Used for the background of a neutral badge in the focus state.
+export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#bfbfc3'; // Used for the background of a neutral badge in the active state.
 export const GL_BADGE_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a neutral badge when static or the default state when linked.
-export const GL_BADGE_NEUTRAL_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a neutral badge in the hover state.
+export const GL_BADGE_NEUTRAL_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a neutral badge in the hover state.
 export const GL_BADGE_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a neutral badge in the focus state.
 export const GL_BADGE_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a neutral badge in the active state.
-export const GL_BADGE_NEUTRAL_TEXT_COLOR_DEFAULT = '#bfbfc3'; // Used for the text of a neutral badge when static or the default state when linked.
-export const GL_BADGE_NEUTRAL_TEXT_COLOR_HOVER = '#dcdcde'; // Used for the text of a neutral badge in the hover state.
-export const GL_BADGE_NEUTRAL_TEXT_COLOR_FOCUS = '#dcdcde'; // Used for the text of a neutral badge in the focus state.
-export const GL_BADGE_NEUTRAL_TEXT_COLOR_ACTIVE = '#ececef'; // Used for the text of a neutral badge in the active state.
-export const GL_BADGE_NEUTRAL_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a neutral badge when static or the default state when linked.
-export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a neutral badge in the hover state.
-export const GL_BADGE_NEUTRAL_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a neutral badge in the focus state.
-export const GL_BADGE_NEUTRAL_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a neutral badge in the active state.
-export const GL_BADGE_INFO_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the background of an informational badge when static or the default state when linked.
-export const GL_BADGE_INFO_BACKGROUND_COLOR_HOVER = '#064787'; // Used for the background of an informational badge in the hover state.
-export const GL_BADGE_INFO_BACKGROUND_COLOR_FOCUS = '#064787'; // Used for the background of an informational badge in the focus state.
-export const GL_BADGE_INFO_BACKGROUND_COLOR_ACTIVE = '#0b5cad'; // Used for the background of an informational badge in the active state.
+export const GL_BADGE_NEUTRAL_TEXT_COLOR_DEFAULT = '#18171d'; // Used for the text of a neutral badge when static or the default state when linked.
+export const GL_BADGE_NEUTRAL_TEXT_COLOR_HOVER = '#18171d'; // Used for the text of a neutral badge in the hover state.
+export const GL_BADGE_NEUTRAL_TEXT_COLOR_FOCUS = '#18171d'; // Used for the text of a neutral badge in the focus state.
+export const GL_BADGE_NEUTRAL_TEXT_COLOR_ACTIVE = '#18171d'; // Used for the text of a neutral badge in the active state.
+export const GL_BADGE_NEUTRAL_ICON_COLOR_DEFAULT = '#18171d'; // Used for the icon of a neutral badge when static or the default state when linked.
+export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#18171d'; // Used for the icon of a neutral badge in the hover state.
+export const GL_BADGE_NEUTRAL_ICON_COLOR_FOCUS = '#18171d'; // Used for the icon of a neutral badge in the focus state.
+export const GL_BADGE_NEUTRAL_ICON_COLOR_ACTIVE = '#18171d'; // Used for the icon of a neutral badge in the active state.
+export const GL_BADGE_INFO_BACKGROUND_COLOR_DEFAULT = '#63a6e9'; // Used for the background of an informational badge when static or the default state when linked.
+export const GL_BADGE_INFO_BACKGROUND_COLOR_HOVER = '#63a6e9'; // Used for the background of an informational badge in the hover state.
+export const GL_BADGE_INFO_BACKGROUND_COLOR_FOCUS = '#63a6e9'; // Used for the background of an informational badge in the focus state.
+export const GL_BADGE_INFO_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of an informational badge in the active state.
 export const GL_BADGE_INFO_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of an informational badge when static or the default state when linked.
-export const GL_BADGE_INFO_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of an informational badge in the hover state.
+export const GL_BADGE_INFO_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of an informational badge in the hover state.
 export const GL_BADGE_INFO_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of an informational badge in the focus state.
 export const GL_BADGE_INFO_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of an informational badge in the active state.
-export const GL_BADGE_INFO_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the text of an informational badge when static or the default state when linked.
-export const GL_BADGE_INFO_TEXT_COLOR_HOVER = '#cbe2f9'; // Used for the text of an informational badge in the hover state.
-export const GL_BADGE_INFO_TEXT_COLOR_FOCUS = '#cbe2f9'; // Used for the text of an informational badge in the focus state.
-export const GL_BADGE_INFO_TEXT_COLOR_ACTIVE = '#e9f3fc'; // Used for the text of an informational badge in the active state.
-export const GL_BADGE_INFO_ICON_COLOR_DEFAULT = '#428fdc'; // Used for the icon of an informational badge when static or the default state when linked.
-export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#63a6e9'; // Used for the icon of an informational badge in the hover state.
-export const GL_BADGE_INFO_ICON_COLOR_FOCUS = '#63a6e9'; // Used for the icon of an informational badge in the focus state.
-export const GL_BADGE_INFO_ICON_COLOR_ACTIVE = '#9dc7f1'; // Used for the icon of an informational badge in the active state.
-export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#0d532a'; // Used for the background of a success badge when static or the default state when linked.
-export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_HOVER = '#0d532a'; // Used for the background of a success badge in the hover state.
-export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_FOCUS = '#0d532a'; // Used for the background of a success badge in the focus state.
-export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#24663b'; // Used for the background of a success badge in the active state.
+export const GL_BADGE_INFO_TEXT_COLOR_DEFAULT = '#002850'; // Used for the text of an informational badge when static or the default state when linked.
+export const GL_BADGE_INFO_TEXT_COLOR_HOVER = '#002850'; // Used for the text of an informational badge in the hover state.
+export const GL_BADGE_INFO_TEXT_COLOR_FOCUS = '#002850'; // Used for the text of an informational badge in the focus state.
+export const GL_BADGE_INFO_TEXT_COLOR_ACTIVE = '#002850'; // Used for the text of an informational badge in the active state.
+export const GL_BADGE_INFO_ICON_COLOR_DEFAULT = '#002850'; // Used for the icon of an informational badge when static or the default state when linked.
+export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#002850'; // Used for the icon of an informational badge in the hover state.
+export const GL_BADGE_INFO_ICON_COLOR_FOCUS = '#002850'; // Used for the icon of an informational badge in the focus state.
+export const GL_BADGE_INFO_ICON_COLOR_ACTIVE = '#002850'; // Used for the icon of an informational badge in the active state.
+export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#52b87a'; // Used for the background of a success badge when static or the default state when linked.
+export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_HOVER = '#52b87a'; // Used for the background of a success badge in the hover state.
+export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_FOCUS = '#52b87a'; // Used for the background of a success badge in the focus state.
+export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#91d4a8'; // Used for the background of a success badge in the active state.
 export const GL_BADGE_SUCCESS_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a success badge when static or the default state when linked.
-export const GL_BADGE_SUCCESS_BORDER_COLOR_HOVER = '#24663b'; // Used for the border of a success badge in the hover state.
+export const GL_BADGE_SUCCESS_BORDER_COLOR_HOVER = '#91d4a8'; // Used for the border of a success badge in the hover state.
 export const GL_BADGE_SUCCESS_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a success badge in the focus state.
 export const GL_BADGE_SUCCESS_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a success badge in the active state.
-export const GL_BADGE_SUCCESS_TEXT_COLOR_DEFAULT = '#91d4a8'; // Used for the text of a success badge when static or the default state when linked.
-export const GL_BADGE_SUCCESS_TEXT_COLOR_HOVER = '#c3e6cd'; // Used for the text of a success badge in the hover state.
-export const GL_BADGE_SUCCESS_TEXT_COLOR_FOCUS = '#c3e6cd'; // Used for the text of a success badge in the focus state.
-export const GL_BADGE_SUCCESS_TEXT_COLOR_ACTIVE = '#ecf4ee'; // Used for the text of a success badge in the active state.
-export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#2da160'; // Used for the icon of a success badge when static or the default state when linked.
-export const GL_BADGE_SUCCESS_ICON_COLOR_HOVER = '#52b87a'; // Used for the icon of a success badge in the hover state.
-export const GL_BADGE_SUCCESS_ICON_COLOR_FOCUS = '#52b87a'; // Used for the icon of a success badge in the focus state.
-export const GL_BADGE_SUCCESS_ICON_COLOR_ACTIVE = '#91d4a8'; // Used for the icon of a success badge in the active state.
-export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#703800'; // Used for the background of a warning badge when static or the default state when linked.
-export const GL_BADGE_WARNING_BACKGROUND_COLOR_HOVER = '#703800'; // Used for the background of a warning badge in the hover state.
-export const GL_BADGE_WARNING_BACKGROUND_COLOR_FOCUS = '#703800'; // Used for the background of a warning badge in the focus state.
-export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning badge in the active state.
+export const GL_BADGE_SUCCESS_TEXT_COLOR_DEFAULT = '#072b15'; // Used for the text of a success badge when static or the default state when linked.
+export const GL_BADGE_SUCCESS_TEXT_COLOR_HOVER = '#072b15'; // Used for the text of a success badge in the hover state.
+export const GL_BADGE_SUCCESS_TEXT_COLOR_FOCUS = '#072b15'; // Used for the text of a success badge in the focus state.
+export const GL_BADGE_SUCCESS_TEXT_COLOR_ACTIVE = '#072b15'; // Used for the text of a success badge in the active state.
+export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#072b15'; // Used for the icon of a success badge when static or the default state when linked.
+export const GL_BADGE_SUCCESS_ICON_COLOR_HOVER = '#072b15'; // Used for the icon of a success badge in the hover state.
+export const GL_BADGE_SUCCESS_ICON_COLOR_FOCUS = '#072b15'; // Used for the icon of a success badge in the focus state.
+export const GL_BADGE_SUCCESS_ICON_COLOR_ACTIVE = '#072b15'; // Used for the icon of a success badge in the active state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#d99530'; // Used for the background of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_HOVER = '#d99530'; // Used for the background of a warning badge in the hover state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_FOCUS = '#d99530'; // Used for the background of a warning badge in the focus state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#e9be74'; // Used for the background of a warning badge in the active state.
 export const GL_BADGE_WARNING_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a warning badge when static or the default state when linked.
-export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning badge in the hover state.
+export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#e9be74'; // Used for the border of a warning badge in the hover state.
 export const GL_BADGE_WARNING_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a warning badge in the focus state.
 export const GL_BADGE_WARNING_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a warning badge in the active state.
-export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning badge when static or the default state when linked.
-export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning badge in the hover state.
-export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning badge in the focus state.
-export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning badge in the active state.
-export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning badge when static or the default state when linked.
-export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning badge in the hover state.
-export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning badge in the focus state.
-export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning badge in the active state.
-export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger badge when static or the default state when linked.
-export const GL_BADGE_DANGER_BACKGROUND_COLOR_HOVER = '#8d1300'; // Used for the background of a danger badge in the hover state.
-export const GL_BADGE_DANGER_BACKGROUND_COLOR_FOCUS = '#8d1300'; // Used for the background of a danger badge in the focus state.
-export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger badge in the active state.
+export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#421f00'; // Used for the text of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#421f00'; // Used for the text of a warning badge in the hover state.
+export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#421f00'; // Used for the text of a warning badge in the focus state.
+export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#421f00'; // Used for the text of a warning badge in the active state.
+export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#421f00'; // Used for the icon of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#421f00'; // Used for the icon of a warning badge in the hover state.
+export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#421f00'; // Used for the icon of a warning badge in the focus state.
+export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#421f00'; // Used for the icon of a warning badge in the active state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#f57f6c'; // Used for the background of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_HOVER = '#f57f6c'; // Used for the background of a danger badge in the hover state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_FOCUS = '#f57f6c'; // Used for the background of a danger badge in the focus state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#fcb5aa'; // Used for the background of a danger badge in the active state.
 export const GL_BADGE_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a danger badge when static or the default state when linked.
-export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger badge in the hover state.
+export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of a danger badge in the hover state.
 export const GL_BADGE_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger badge in the focus state.
 export const GL_BADGE_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger badge in the active state.
-export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger badge when static or the default state when linked.
-export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#fdd4cd'; // Used for the text of a danger badge in the hover state.
-export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger badge in the focus state.
-export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger badge in the active state.
-export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger badge when static or the default state when linked.
-export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#f57f6c'; // Used for the icon of a danger badge in the hover state.
-export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger badge in the focus state.
-export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger badge in the active state.
-export const GL_BADGE_TIER_BACKGROUND_COLOR_DEFAULT = '#2f2a6b'; // Used for the background of a tier related badge when static or the default state when linked.
-export const GL_BADGE_TIER_BACKGROUND_COLOR_HOVER = '#2f2a6b'; // Used for the background of a tier related badge in the hover state.
-export const GL_BADGE_TIER_BACKGROUND_COLOR_FOCUS = '#2f2a6b'; // Used for the background of a tier related badge in the focus state.
-export const GL_BADGE_TIER_BACKGROUND_COLOR_ACTIVE = '#453894'; // Used for the background of a tier related badge in the active state.
+export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#4d0a00'; // Used for the text of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#4d0a00'; // Used for the text of a danger badge in the hover state.
+export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#4d0a00'; // Used for the text of a danger badge in the focus state.
+export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#4d0a00'; // Used for the text of a danger badge in the active state.
+export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#4d0a00'; // Used for the icon of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#4d0a00'; // Used for the icon of a danger badge in the hover state.
+export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#4d0a00'; // Used for the icon of a danger badge in the focus state.
+export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#4d0a00'; // Used for the icon of a danger badge in the active state.
+export const GL_BADGE_TIER_BACKGROUND_COLOR_DEFAULT = '#ac93e6'; // Used for the background of a tier related badge when static or the default state when linked.
+export const GL_BADGE_TIER_BACKGROUND_COLOR_HOVER = '#ac93e6'; // Used for the background of a tier related badge in the hover state.
+export const GL_BADGE_TIER_BACKGROUND_COLOR_FOCUS = '#ac93e6'; // Used for the background of a tier related badge in the focus state.
+export const GL_BADGE_TIER_BACKGROUND_COLOR_ACTIVE = '#cbbbf2'; // Used for the background of a tier related badge in the active state.
 export const GL_BADGE_TIER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a tier related badge when static or the default state when linked.
-export const GL_BADGE_TIER_BORDER_COLOR_HOVER = '#453894'; // Used for the border of a tier related badge in the hover state.
+export const GL_BADGE_TIER_BORDER_COLOR_HOVER = '#cbbbf2'; // Used for the border of a tier related badge in the hover state.
 export const GL_BADGE_TIER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a tier related badge in the focus state.
 export const GL_BADGE_TIER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a tier related badge in the active state.
-export const GL_BADGE_TIER_TEXT_COLOR_DEFAULT = '#ac93e6'; // Used for the text of a tier related badge when static or the default state when linked.
-export const GL_BADGE_TIER_TEXT_COLOR_HOVER = '#cbbbf2'; // Used for the text of a tier related badge in the hover state.
-export const GL_BADGE_TIER_TEXT_COLOR_FOCUS = '#cbbbf2'; // Used for the text of a tier related badge in the focus state.
-export const GL_BADGE_TIER_TEXT_COLOR_ACTIVE = '#e1d8f9'; // Used for the text of a tier related badge in the active state.
-export const GL_BADGE_TIER_ICON_COLOR_DEFAULT = '#7b58cf'; // Used for the icon of a tier related badge when static or the default state when linked.
-export const GL_BADGE_TIER_ICON_COLOR_HOVER = '#9475db'; // Used for the icon of a tier related badge in the hover state.
-export const GL_BADGE_TIER_ICON_COLOR_FOCUS = '#9475db'; // Used for the icon of a tier related badge in the focus state.
-export const GL_BADGE_TIER_ICON_COLOR_ACTIVE = '#ac93e6'; // Used for the icon of a tier related badge in the active state.
+export const GL_BADGE_TIER_TEXT_COLOR_DEFAULT = '#232150'; // Used for the text of a tier related badge when static or the default state when linked.
+export const GL_BADGE_TIER_TEXT_COLOR_HOVER = '#232150'; // Used for the text of a tier related badge in the hover state.
+export const GL_BADGE_TIER_TEXT_COLOR_FOCUS = '#232150'; // Used for the text of a tier related badge in the focus state.
+export const GL_BADGE_TIER_TEXT_COLOR_ACTIVE = '#232150'; // Used for the text of a tier related badge in the active state.
+export const GL_BADGE_TIER_ICON_COLOR_DEFAULT = '#232150'; // Used for the icon of a tier related badge when static or the default state when linked.
+export const GL_BADGE_TIER_ICON_COLOR_HOVER = '#232150'; // Used for the icon of a tier related badge in the hover state.
+export const GL_BADGE_TIER_ICON_COLOR_FOCUS = '#232150'; // Used for the icon of a tier related badge in the focus state.
+export const GL_BADGE_TIER_ICON_COLOR_ACTIVE = '#232150'; // Used for the icon of a tier related badge in the active state.
 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.