Skip to content
Snippets Groups Projects
Commit d36a5f85 authored by Dan MH's avatar Dan MH :pinched_fingers:
Browse files

feat: Add missing badge design tokens 

- Add design tokens needed for Figma implementation (from
  !4451)
- Update descriptions to be more specific to badge types
- Remove generic status-related language from descriptions
parent f7f0bd92
No related branches found
No related tags found
1 merge request!4468feat: Add missing badge design tokens
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2526 additions and 447 deletions
src/tokens/build/css/tokens.css
+ 68
− 33
View file @ d36a5f85
......@@ -182,6 +182,27 @@
--theme-indigo-100: #dbdbf8;
--theme-indigo-50: #f1f1ff;
--theme-indigo-10: #f8f8ff;
--gl-badge-tier-border-color-active: #cbbbf200; /* Used for the border of a tier related badge in the active state. */
--gl-badge-tier-border-color-focus: #cbbbf200; /* Used for the border of a tier related badge in the focus state. */
--gl-badge-tier-border-color-default: #cbbbf200; /* Used for the border of a tier related badge when static or the default state when linked. */
--gl-badge-danger-border-color-active: #fcb5aa00; /* Used for the border of a danger badge in the active state. */
--gl-badge-danger-border-color-focus: #fcb5aa00; /* Used for the border of a danger badge in the focus state. */
--gl-badge-danger-border-color-default: #fcb5aa00; /* Used for the border of a danger badge when static or the default state when linked. */
--gl-badge-warning-border-color-active: #e9be7400; /* Used for the border of a warning badge in the active state. */
--gl-badge-warning-border-color-focus: #e9be7400; /* Used for the border of a warning badge in the focus state. */
--gl-badge-warning-border-color-default: #e9be7400; /* Used for the border of a warning badge when static or the default state when linked. */
--gl-badge-success-border-color-active: #91d4a800; /* Used for the border of a success badge in the active state. */
--gl-badge-success-border-color-focus: #91d4a800; /* Used for the border of a success badge in the focus state. */
--gl-badge-success-border-color-default: #91d4a800; /* Used for the border of a success badge when static or the default state when linked. */
--gl-badge-info-border-color-active: #9dc7f100; /* Used for the border of an informational badge in the active state. */
--gl-badge-info-border-color-focus: #9dc7f100; /* Used for the border of an informational badge in the focus state. */
--gl-badge-info-border-color-default: #9dc7f100; /* Used for the border of an informational badge when static or the default state when linked. */
--gl-badge-neutral-border-color-active: #bfbfc300; /* Used for the border of a neutral badge in the active state. */
--gl-badge-neutral-border-color-focus: #bfbfc300; /* Used for the border of a neutral badge in the focus state. */
--gl-badge-neutral-border-color-default: #bfbfc300; /* Used for the border of a neutral badge when static or the default state when linked. */
--gl-badge-muted-border-color-active: #bfbfc300; /* Used for the border of a muted badge in the active state. */
--gl-badge-muted-border-color-focus: #bfbfc300; /* Used for the border of a muted badge in the focus state. */
--gl-badge-muted-border-color-default: #bfbfc300; /* Used for the border of a muted badge when static or the default state when linked. */
--data-viz-orange-950: #4b2707;
--data-viz-orange-900: #5e2f05;
--data-viz-orange-800: #6f3500;
......@@ -576,24 +597,24 @@
--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-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-100); /* 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-700); /* Used for the icon of a danger (critical) badge in the active state. */
--gl-badge-danger-icon-color-hover: var(--gl-color-red-600); /* Used for the icon of a danger (critical) badge in the hover state. */
--gl-badge-danger-icon-color-default: var(--gl-color-red-500); /* Used for the icon of a danger (critical) badge when static or the default state when linked. */
--gl-badge-danger-text-color-active: var(--gl-color-red-900); /* Used for the text of a danger (critical) badge in the active state. */
--gl-badge-danger-text-color-hover: var(--gl-color-red-800); /* Used for the text of a danger (critical) badge in the hover state. */
--gl-badge-danger-text-color-default: var(--gl-color-red-700); /* Used for the text of a danger (critical) badge when static or the default state when linked. */
--gl-badge-danger-border-color-hover: var(--gl-color-red-200); /* Used for the border of a danger (critical) badge in the hover state. */
--gl-badge-danger-background-color-active: var(--gl-color-red-200); /* Used for the background of a danger (critical) badge in the active state. */
--gl-badge-danger-background-color-default: var(--gl-color-red-100); /* Used for the background of a danger (critical) badge when static or the default state when linked. */
--gl-badge-warning-icon-color-active: var(--gl-color-orange-700); /* Used for the icon of a warning status or confidential item in the active state. */
--gl-badge-warning-icon-color-hover: var(--gl-color-orange-600); /* Used for the icon of a warning status or confidential item in the hover state. */
--gl-badge-warning-icon-color-default: var(--gl-color-orange-500); /* Used for the icon of a warning status or confidential item when static or the default state when linked. */
--gl-badge-warning-text-color-active: var(--gl-color-orange-900); /* Used for the text of a warning status or confidential item in the active state.N */
--gl-badge-warning-text-color-hover: var(--gl-color-orange-800); /* Used for the text of a warning status or confidential item in the hover state. */
--gl-badge-warning-text-color-default: var(--gl-color-orange-700); /* Used for the text of a warning status or confidential item when static or the default state when linked. */
--gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /* Used for the border of a warning status or confidential item in the hover state. */
--gl-badge-warning-background-color-active: var(--gl-color-orange-200); /* Used for the background of a warning status or confidential item in the active state. */
--gl-badge-warning-background-color-default: var(--gl-color-orange-100); /* Used for the background of a warning status or confidential item when static or the default state when linked. */
--gl-badge-danger-icon-color-active: var(--gl-color-red-700); /* Used for the icon of a danger badge in the active state. */
--gl-badge-danger-icon-color-hover: var(--gl-color-red-600); /* Used for the icon of a danger badge in the hover state. */
--gl-badge-danger-icon-color-default: var(--gl-color-red-500); /* 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-900); /* Used for the text of a danger badge in the active state. */
--gl-badge-danger-text-color-hover: var(--gl-color-red-800); /* Used for the text of a danger badge in the hover state. */
--gl-badge-danger-text-color-default: var(--gl-color-red-700); /* Used for the text of a danger badge when static or the default state when linked. */
--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-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-100); /* 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-700); /* Used for the icon of a warning badge in the active state. */
--gl-badge-warning-icon-color-hover: var(--gl-color-orange-600); /* Used for the icon of a warning badge in the hover state. */
--gl-badge-warning-icon-color-default: var(--gl-color-orange-500); /* 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-900); /* Used for the text of a warning badge in the active state. */
--gl-badge-warning-text-color-hover: var(--gl-color-orange-800); /* Used for the text of a warning badge in the hover state. */
--gl-badge-warning-text-color-default: var(--gl-color-orange-700); /* Used for the text of a warning badge when static or the default state when linked. */
--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-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-100); /* 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-700); /* Used for the icon of a success badge in the active state. */
--gl-badge-success-icon-color-hover: var(--gl-color-green-600); /* Used for the icon of a success badge in the hover state. */
--gl-badge-success-icon-color-default: var(--gl-color-green-500); /* Used for the icon of a success badge when static or the default state when linked. */
......@@ -621,15 +642,15 @@
--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-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-100); /* 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-700); /* Used for the icon of a subtle neutral badge in the active state. */
--gl-badge-muted-icon-color-hover: var(--gl-color-neutral-600); /* Used for the icon of a subtle neutral badge in the hover state. */
--gl-badge-muted-icon-color-default: var(--gl-color-neutral-500); /* Used for the icon of a subtle neutral badge when static or the default state when linked. */
--gl-badge-muted-text-color-active: var(--gl-color-neutral-800); /* Used for the text of a subtle neutral badge in the active state. */
--gl-badge-muted-text-color-hover: var(--gl-color-neutral-700); /* Used for the text of a subtle neutral badge in the hover state. */
--gl-badge-muted-text-color-default: var(--gl-color-neutral-600); /* Used for the text of a subtle neutral badge when static or the default state when linked. */
--gl-badge-muted-border-color-hover: var(--gl-color-neutral-200); /* Used for the border of a subtle neutral badge in the hover state. */
--gl-badge-muted-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a subtle neutral badge in the active state. */
--gl-badge-muted-background-color-default: var(--gl-color-neutral-50); /* Used for the background of a subtle neutral badge when static or the default state when linked. */
--gl-badge-muted-icon-color-active: var(--gl-color-neutral-700); /* Used for the icon of a muted badge in the active state. */
--gl-badge-muted-icon-color-hover: var(--gl-color-neutral-600); /* Used for the icon of a muted badge in the hover state. */
--gl-badge-muted-icon-color-default: var(--gl-color-neutral-500); /* 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-800); /* Used for the text of a muted badge in the active state. */
--gl-badge-muted-text-color-hover: var(--gl-color-neutral-700); /* Used for the text of a muted badge in the hover state. */
--gl-badge-muted-text-color-default: var(--gl-color-neutral-600); /* Used for the text of a muted badge when static or the default state when linked. */
--gl-badge-muted-border-color-hover: var(--gl-color-neutral-200); /* Used for the border of a muted badge in the hover state. */
--gl-badge-muted-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a muted badge in the active state. */
--gl-badge-muted-background-color-default: var(--gl-color-neutral-50); /* Used for the background of a muted badge when static or the default state when linked. */
--gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-50); /* Neutral background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-orange: var(--gl-color-orange-50); /* Orange background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-green: var(--gl-color-green-50); /* Green background for avatar fallback with no particular meaning. */
......@@ -709,18 +730,25 @@
--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. */
--gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger (critical) badge in the focus state. */
--gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning status or confidential item in the focus state. */
--gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning status or confidential item in the focus state. */
--gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-default); /* Used for the background of a tier related badge in the hover state. */
--gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger badge in the focus state. */
--gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger badge in the focus state. */
--gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-default); /* Used for the background of a danger badge in the hover state. */
--gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning badge in the focus state. */
--gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning badge in the focus state. */
--gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-default); /* Used for the background of a warning badge in the hover state. */
--gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-hover); /* Used for the icon of a success badge in the focus state. */
--gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-hover); /* Used for the text of a success badge in the focus state. */
--gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-default); /* Used for the background of a success badge in the hover state. */
--gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-hover); /* Used for the icon of an informational badge in the focus state. */
--gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-hover); /* Used for the text of an informational badge in the focus state. */
--gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-default); /* Used for the background of an informational badge in the hover state. */
--gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-hover); /* Used for the icon of a neutral badge in the focus state. */
--gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-hover); /* Used for the text of a neutral badge in the focus state. */
--gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a subtle neutral badge in the focus state. */
--gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a subtle neutral badge in the focus state. */
--gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-default); /* Used for the background of a neutral badge in the hover state. */
--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-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. */
......@@ -758,4 +786,11 @@
--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. */
--gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /* Used for the background of a tier related badge in the focus state. */
--gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /* Used for the background of a danger badge in the focus state. */
--gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /* Used for the background of a warning badge in the focus state. */
--gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-hover); /* Used for the background of a success badge in the focus state. */
--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. */
}
src/tokens/build/css/tokens.dark.css
+ 68
− 33
View file @ d36a5f85
......@@ -182,6 +182,27 @@
--theme-indigo-100: #303083;
--theme-indigo-50: #222261;
--theme-indigo-10: #14143d;
--gl-badge-tier-border-color-active: #5943b600; /* Used for the border of a tier related badge in the active state. */
--gl-badge-tier-border-color-focus: #5943b600; /* Used for the border of a tier related badge in the focus state. */
--gl-badge-tier-border-color-default: #5943b600; /* Used for the border of a tier related badge when static or the default state when linked. */
--gl-badge-danger-border-color-active: #ae180000; /* Used for the border of a danger badge in the active state. */
--gl-badge-danger-border-color-focus: #ae180000; /* Used for the border of a danger badge in the focus state. */
--gl-badge-danger-border-color-default: #ae180000; /* Used for the border of a danger badge when static or the default state when linked. */
--gl-badge-warning-border-color-active: #8f470000; /* Used for the border of a warning badge in the active state. */
--gl-badge-warning-border-color-focus: #8f470000; /* Used for the border of a warning badge in the focus state. */
--gl-badge-warning-border-color-default: #8f470000; /* Used for the border of a warning badge when static or the default state when linked. */
--gl-badge-success-border-color-active: #24663b00; /* Used for the border of a success badge in the active state. */
--gl-badge-success-border-color-focus: #24663b00; /* Used for the border of a success badge in the focus state. */
--gl-badge-success-border-color-default: #24663b00; /* Used for the border of a success badge when static or the default state when linked. */
--gl-badge-info-border-color-active: #0b5cad00; /* Used for the border of an informational badge in the active state. */
--gl-badge-info-border-color-focus: #0b5cad00; /* Used for the border of an informational badge in the focus state. */
--gl-badge-info-border-color-default: #0b5cad00; /* Used for the border of an informational badge when static or the default state when linked. */
--gl-badge-neutral-border-color-active: #4c4b5100; /* Used for the border of a neutral badge in the active state. */
--gl-badge-neutral-border-color-focus: #4c4b5100; /* Used for the border of a neutral badge in the focus state. */
--gl-badge-neutral-border-color-default: #4c4b5100; /* Used for the border of a neutral badge when static or the default state when linked. */
--gl-badge-muted-border-color-active: #4c4b5100; /* Used for the border of a muted badge in the active state. */
--gl-badge-muted-border-color-focus: #4c4b5100; /* Used for the border of a muted badge in the focus state. */
--gl-badge-muted-border-color-default: #4c4b5100; /* Used for the border of a muted badge when static or the default state when linked. */
--data-viz-orange-950: #fae8d1;
--data-viz-orange-900: #f5d6b3;
--data-viz-orange-800: #eebd8c;
......@@ -576,24 +597,24 @@
--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-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 (critical) badge in the active state. */
--gl-badge-danger-icon-color-hover: var(--gl-color-red-300); /* Used for the icon of a danger (critical) badge in the hover state. */
--gl-badge-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger (critical) 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 (critical) badge in the active state. */
--gl-badge-danger-text-color-hover: var(--gl-color-red-100); /* Used for the text of a danger (critical) badge in the hover state. */
--gl-badge-danger-text-color-default: var(--gl-color-red-200); /* Used for the text of a danger (critical) badge when static or the default state when linked. */
--gl-badge-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger (critical) badge in the hover state. */
--gl-badge-danger-background-color-active: var(--gl-color-red-700); /* Used for the background of a danger (critical) badge in the active state. */
--gl-badge-danger-background-color-default: var(--gl-color-red-800); /* Used for the background of a danger (critical) 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 status or confidential item in the active state. */
--gl-badge-warning-icon-color-hover: var(--gl-color-orange-300); /* Used for the icon of a warning status or confidential item in the hover state. */
--gl-badge-warning-icon-color-default: var(--gl-color-orange-400); /* Used for the icon of a warning status or confidential item 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 status or confidential item in the active state.N */
--gl-badge-warning-text-color-hover: var(--gl-color-orange-100); /* Used for the text of a warning status or confidential item in the hover state. */
--gl-badge-warning-text-color-default: var(--gl-color-orange-200); /* Used for the text of a warning status or confidential item when static or the default state when linked. */
--gl-badge-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning status or confidential item in the hover state. */
--gl-badge-warning-background-color-active: var(--gl-color-orange-700); /* Used for the background of a warning status or confidential item in the active state. */
--gl-badge-warning-background-color-default: var(--gl-color-orange-800); /* Used for the background of a warning status or confidential item 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-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger badge in the hover state. */
--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-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning badge in the hover state. */
--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. */
......@@ -621,15 +642,15 @@
--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-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 subtle neutral badge in the active state. */
--gl-badge-muted-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a subtle neutral badge in the hover state. */
--gl-badge-muted-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a subtle neutral 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 subtle neutral badge in the active state. */
--gl-badge-muted-text-color-hover: var(--gl-color-neutral-200); /* Used for the text of a subtle neutral badge in the hover state. */
--gl-badge-muted-text-color-default: var(--gl-color-neutral-300); /* Used for the text of a subtle neutral badge when static or the default state when linked. */
--gl-badge-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a subtle neutral badge in the hover state. */
--gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a subtle neutral badge in the active state. */
--gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a subtle 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-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a muted badge in the hover state. */
--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-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-orange: var(--gl-color-orange-900); /* Orange background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-green: var(--gl-color-green-900); /* Green background for avatar fallback with no particular meaning. */
......@@ -709,18 +730,25 @@
--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. */
--gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger (critical) badge in the focus state. */
--gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning status or confidential item in the focus state. */
--gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning status or confidential item in the focus state. */
--gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-default); /* Used for the background of a tier related badge in the hover state. */
--gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger badge in the focus state. */
--gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger badge in the focus state. */
--gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-default); /* Used for the background of a danger badge in the hover state. */
--gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning badge in the focus state. */
--gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning badge in the focus state. */
--gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-default); /* Used for the background of a warning badge in the hover state. */
--gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-hover); /* Used for the icon of a success badge in the focus state. */
--gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-hover); /* Used for the text of a success badge in the focus state. */
--gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-default); /* Used for the background of a success badge in the hover state. */
--gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-hover); /* Used for the icon of an informational badge in the focus state. */
--gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-hover); /* Used for the text of an informational badge in the focus state. */
--gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-default); /* Used for the background of an informational badge in the hover state. */
--gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-hover); /* Used for the icon of a neutral badge in the focus state. */
--gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-hover); /* Used for the text of a neutral badge in the focus state. */
--gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a subtle neutral badge in the focus state. */
--gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a subtle neutral badge in the focus state. */
--gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-default); /* Used for the background of a neutral badge in the hover state. */
--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-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. */
......@@ -758,4 +786,11 @@
--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. */
--gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /* Used for the background of a tier related badge in the focus state. */
--gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /* Used for the background of a danger badge in the focus state. */
--gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /* Used for the background of a warning badge in the focus state. */
--gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-hover); /* Used for the background of a success badge in the focus state. */
--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. */
}
src/tokens/build/js/tokens.dark.js
+ 68
− 33
View file @ d36a5f85
......@@ -284,20 +284,30 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#033464'; // Blue backg
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#0a4020'; // Green background for avatar fallback with no particular meaning.
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange background for avatar fallback with no particular meaning.
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral badge when static or the default state when linked.
export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral badge in the active state.
export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a subtle neutral badge in the hover state.
export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a subtle neutral badge when static or the default state when linked.
export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a subtle neutral badge in the hover state.
export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a subtle neutral badge in the focus state.
export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a subtle neutral badge in the active state.
export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a subtle neutral badge when static or the default state when linked.
export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a subtle neutral badge in the hover state.
export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a subtle neutral badge in the focus state.
export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a subtle neutral badge in the active state.
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_BORDER_COLOR_DEFAULT = '#4c4b5100'; // 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_FOCUS = '#4c4b5100'; // Used for the border of a muted badge in the focus state.
export const GL_BADGE_MUTED_BORDER_COLOR_ACTIVE = '#4c4b5100'; // 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_NEUTRAL_BORDER_COLOR_DEFAULT = '#4c4b5100'; // 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_FOCUS = '#4c4b5100'; // Used for the border of a neutral badge in the focus state.
export const GL_BADGE_NEUTRAL_BORDER_COLOR_ACTIVE = '#4c4b5100'; // 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.
......@@ -307,8 +317,13 @@ export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon
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_INFO_BORDER_COLOR_DEFAULT = '#0b5cad00'; // 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_FOCUS = '#0b5cad00'; // Used for the border of an informational badge in the focus state.
export const GL_BADGE_INFO_BORDER_COLOR_ACTIVE = '#0b5cad00'; // 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.
......@@ -318,8 +333,13 @@ export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#63a6e9'; // Used for the icon of
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_SUCCESS_BORDER_COLOR_DEFAULT = '#24663b00'; // 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_FOCUS = '#24663b00'; // Used for the border of a success badge in the focus state.
export const GL_BADGE_SUCCESS_BORDER_COLOR_ACTIVE = '#24663b00'; // 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.
......@@ -328,31 +348,46 @@ export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#2da160'; // Used for the ic
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 status or confidential item when static or the default state when linked.
export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning status or confidential item in the active state.
export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning status or confidential item in the hover state.
export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning status or confidential item when static or the default state when linked.
export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning status or confidential item in the hover state.
export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning status or confidential item in the focus state.
export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning status or confidential item in the active state.N
export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning status or confidential item in the hover state.
export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning status or confidential item in the focus state.
export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning status or confidential item in the active state.
export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger (critical) badge when static or the default state when linked.
export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger (critical) badge in the active state.
export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger (critical) badge in the hover state.
export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger (critical) 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 (critical) badge in the hover state.
export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger (critical) badge in the focus state.
export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (critical) badge in the active state.
export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (critical) 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 (critical) badge in the hover state.
export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger (critical) badge in the focus state.
export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger (critical) 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_WARNING_BORDER_COLOR_DEFAULT = '#8f470000'; // 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_FOCUS = '#8f470000'; // Used for the border of a warning badge in the focus state.
export const GL_BADGE_WARNING_BORDER_COLOR_ACTIVE = '#8f470000'; // 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_DANGER_BORDER_COLOR_DEFAULT = '#ae180000'; // 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_FOCUS = '#ae180000'; // Used for the border of a danger badge in the focus state.
export const GL_BADGE_DANGER_BORDER_COLOR_ACTIVE = '#ae180000'; // 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_TIER_BORDER_COLOR_DEFAULT = '#5943b600'; // 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_FOCUS = '#5943b600'; // Used for the border of a tier related badge in the focus state.
export const GL_BADGE_TIER_BORDER_COLOR_ACTIVE = '#5943b600'; // 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.
......
src/tokens/build/js/tokens.js
+ 68
− 33
View file @ d36a5f85
......@@ -284,20 +284,30 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#e9f3fc'; // Blue backg
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a subtle neutral badge when static or the default state when linked.
export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a subtle neutral badge in the active state.
export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a subtle neutral badge in the hover state.
export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#626168'; // Used for the text of a subtle neutral badge when static or the default state when linked.
export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#4c4b51'; // Used for the text of a subtle neutral badge in the hover state.
export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#4c4b51'; // Used for the text of a subtle neutral badge in the focus state.
export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#3a383f'; // Used for the text of a subtle neutral badge in the active state.
export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a subtle neutral badge when static or the default state when linked.
export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a subtle neutral badge in the hover state.
export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a subtle neutral badge in the focus state.
export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a subtle neutral badge in the active state.
export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a muted badge when static or the default state when linked.
export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#ececef'; // Used for the background of a muted badge in the hover state.
export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#ececef'; // Used for the background of a muted badge in the focus state.
export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a muted badge in the active state.
export const GL_BADGE_MUTED_BORDER_COLOR_DEFAULT = '#bfbfc300'; // Used for the border of a muted badge when static or the default state when linked.
export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a muted badge in the hover state.
export const GL_BADGE_MUTED_BORDER_COLOR_FOCUS = '#bfbfc300'; // Used for the border of a muted badge in the focus state.
export const GL_BADGE_MUTED_BORDER_COLOR_ACTIVE = '#bfbfc300'; // Used for the border of a muted badge in the active state.
export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#626168'; // Used for the text of a muted badge when static or the default state when linked.
export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#4c4b51'; // Used for the text of a muted badge in the hover state.
export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#4c4b51'; // Used for the text of a muted badge in the focus state.
export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#3a383f'; // Used for the text of a muted badge in the active state.
export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a muted badge when static or the default state when linked.
export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a muted badge in the hover state.
export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a muted badge in the focus state.
export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a muted badge in the active state.
export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#dcdcde'; // Used for the background of a neutral badge when static or the default state when linked.
export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_HOVER = '#dcdcde'; // Used for the background of a neutral badge in the hover state.
export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#dcdcde'; // 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 = '#bfbfc300'; // Used for the border of a neutral badge when static or the default state when linked.
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 = '#bfbfc300'; // Used for the border of a neutral badge in the focus state.
export const GL_BADGE_NEUTRAL_BORDER_COLOR_ACTIVE = '#bfbfc300'; // Used for the border of a neutral badge in the active state.
export const GL_BADGE_NEUTRAL_TEXT_COLOR_DEFAULT = '#4c4b51'; // Used for the text of a neutral badge when static or the default state when linked.
export const GL_BADGE_NEUTRAL_TEXT_COLOR_HOVER = '#3a383f'; // Used for the text of a neutral badge in the hover state.
export const GL_BADGE_NEUTRAL_TEXT_COLOR_FOCUS = '#3a383f'; // Used for the text of a neutral badge in the focus state.
......@@ -307,8 +317,13 @@ export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#626168'; // Used for the icon
export const GL_BADGE_NEUTRAL_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a neutral badge in the focus state.
export const GL_BADGE_NEUTRAL_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a neutral badge in the active state.
export const GL_BADGE_INFO_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the background of an informational badge when static or the default state when linked.
export const GL_BADGE_INFO_BACKGROUND_COLOR_HOVER = '#cbe2f9'; // Used for the background of an informational badge in the hover state.
export const GL_BADGE_INFO_BACKGROUND_COLOR_FOCUS = '#cbe2f9'; // 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 = '#9dc7f100'; // Used for the border of an informational badge when static or the default state when linked.
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 = '#9dc7f100'; // Used for the border of an informational badge in the focus state.
export const GL_BADGE_INFO_BORDER_COLOR_ACTIVE = '#9dc7f100'; // Used for the border of an informational badge in the active state.
export const GL_BADGE_INFO_TEXT_COLOR_DEFAULT = '#0b5cad'; // Used for the text of an informational badge when static or the default state when linked.
export const GL_BADGE_INFO_TEXT_COLOR_HOVER = '#064787'; // Used for the text of an informational badge in the hover state.
export const GL_BADGE_INFO_TEXT_COLOR_FOCUS = '#064787'; // Used for the text of an informational badge in the focus state.
......@@ -318,8 +333,13 @@ export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#1068bf'; // Used for the icon of
export const GL_BADGE_INFO_ICON_COLOR_FOCUS = '#1068bf'; // Used for the icon of an informational badge in the focus state.
export const GL_BADGE_INFO_ICON_COLOR_ACTIVE = '#0b5cad'; // Used for the icon of an informational badge in the active state.
export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#c3e6cd'; // Used for the background of a success badge when static or the default state when linked.
export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_HOVER = '#c3e6cd'; // Used for the background of a success badge in the hover state.
export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_FOCUS = '#c3e6cd'; // 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 = '#91d4a800'; // Used for the border of a success badge when static or the default state when linked.
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 = '#91d4a800'; // Used for the border of a success badge in the focus state.
export const GL_BADGE_SUCCESS_BORDER_COLOR_ACTIVE = '#91d4a800'; // Used for the border of a success badge in the active state.
export const GL_BADGE_SUCCESS_TEXT_COLOR_DEFAULT = '#24663b'; // Used for the text of a success badge when static or the default state when linked.
export const GL_BADGE_SUCCESS_TEXT_COLOR_HOVER = '#0d532a'; // Used for the text of a success badge in the hover state.
export const GL_BADGE_SUCCESS_TEXT_COLOR_FOCUS = '#0d532a'; // Used for the text of a success badge in the focus state.
......@@ -328,31 +348,46 @@ export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#108548'; // Used for the ic
export const GL_BADGE_SUCCESS_ICON_COLOR_HOVER = '#217645'; // Used for the icon of a success badge in the hover state.
export const GL_BADGE_SUCCESS_ICON_COLOR_FOCUS = '#217645'; // Used for the icon of a success badge in the focus state.
export const GL_BADGE_SUCCESS_ICON_COLOR_ACTIVE = '#24663b'; // Used for the icon of a success badge in the active state.
export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#f5d9a8'; // Used for the background of a warning status or confidential item when static or the default state when linked.
export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#e9be74'; // Used for the background of a warning status or confidential item in the active state.
export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#e9be74'; // Used for the border of a warning status or confidential item in the hover state.
export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#8f4700'; // Used for the text of a warning status or confidential item when static or the default state when linked.
export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#703800'; // Used for the text of a warning status or confidential item in the hover state.
export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#703800'; // Used for the text of a warning status or confidential item in the focus state.
export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#5c2900'; // Used for the text of a warning status or confidential item in the active state.N
export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#ab6100'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#9e5400'; // Used for the icon of a warning status or confidential item in the hover state.
export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#9e5400'; // Used for the icon of a warning status or confidential item in the focus state.
export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#8f4700'; // Used for the icon of a warning status or confidential item in the active state.
export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#fdd4cd'; // Used for the background of a danger (critical) badge when static or the default state when linked.
export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#fcb5aa'; // Used for the background of a danger (critical) badge in the active state.
export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of a danger (critical) badge in the hover state.
export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#ae1800'; // Used for the text of a danger (critical) badge when static or the default state when linked.
export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#8d1300'; // Used for the text of a danger (critical) badge in the hover state.
export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#8d1300'; // Used for the text of a danger (critical) badge in the focus state.
export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#660e00'; // Used for the text of a danger (critical) badge in the active state.
export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#dd2b0e'; // Used for the icon of a danger (critical) badge when static or the default state when linked.
export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#c91c00'; // Used for the icon of a danger (critical) badge in the hover state.
export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#c91c00'; // Used for the icon of a danger (critical) badge in the focus state.
export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#ae1800'; // Used for the icon of a danger (critical) badge in the active state.
export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#f5d9a8'; // Used for the background of a warning badge when static or the default state when linked.
export const GL_BADGE_WARNING_BACKGROUND_COLOR_HOVER = '#f5d9a8'; // Used for the background of a warning badge in the hover state.
export const GL_BADGE_WARNING_BACKGROUND_COLOR_FOCUS = '#f5d9a8'; // 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 = '#e9be7400'; // Used for the border of a warning badge when static or the default state when linked.
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 = '#e9be7400'; // Used for the border of a warning badge in the focus state.
export const GL_BADGE_WARNING_BORDER_COLOR_ACTIVE = '#e9be7400'; // Used for the border of a warning badge in the active state.
export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#8f4700'; // Used for the text of a warning badge when static or the default state when linked.
export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#703800'; // Used for the text of a warning badge in the hover state.
export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#703800'; // Used for the text of a warning badge in the focus state.
export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#5c2900'; // Used for the text of a warning badge in the active state.
export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#ab6100'; // Used for the icon of a warning badge when static or the default state when linked.
export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#9e5400'; // Used for the icon of a warning badge in the hover state.
export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#9e5400'; // Used for the icon of a warning badge in the focus state.
export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#8f4700'; // Used for the icon of a warning badge in the active state.
export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#fdd4cd'; // Used for the background of a danger badge when static or the default state when linked.
export const GL_BADGE_DANGER_BACKGROUND_COLOR_HOVER = '#fdd4cd'; // Used for the background of a danger badge in the hover state.
export const GL_BADGE_DANGER_BACKGROUND_COLOR_FOCUS = '#fdd4cd'; // 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 = '#fcb5aa00'; // Used for the border of a danger badge when static or the default state when linked.
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 = '#fcb5aa00'; // Used for the border of a danger badge in the focus state.
export const GL_BADGE_DANGER_BORDER_COLOR_ACTIVE = '#fcb5aa00'; // Used for the border of a danger badge in the active state.
export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#ae1800'; // Used for the text of a danger badge when static or the default state when linked.
export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#8d1300'; // Used for the text of a danger badge in the hover state.
export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#8d1300'; // Used for the text of a danger badge in the focus state.
export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#660e00'; // Used for the text of a danger badge in the active state.
export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#dd2b0e'; // Used for the icon of a danger badge when static or the default state when linked.
export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#c91c00'; // Used for the icon of a danger badge in the hover state.
export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#c91c00'; // Used for the icon of a danger badge in the focus state.
export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#ae1800'; // Used for the icon of a danger badge in the active state.
export const GL_BADGE_TIER_BACKGROUND_COLOR_DEFAULT = '#e1d8f9'; // 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 = '#e1d8f9'; // Used for the background of a tier related badge in the hover state.
export const GL_BADGE_TIER_BACKGROUND_COLOR_FOCUS = '#e1d8f9'; // 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 = '#cbbbf200'; // 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 = '#cbbbf2'; // Used for the border of a tier related badge in the hover state.
export const GL_BADGE_TIER_BORDER_COLOR_FOCUS = '#cbbbf200'; // Used for the border of a tier related badge in the focus state.
export const GL_BADGE_TIER_BORDER_COLOR_ACTIVE = '#cbbbf200'; // Used for the border of a tier related badge in the active state.
export const GL_BADGE_TIER_TEXT_COLOR_DEFAULT = '#5943b6'; // 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 = '#453894'; // Used for the text of a tier related badge in the hover state.
export const GL_BADGE_TIER_TEXT_COLOR_FOCUS = '#453894'; // Used for the text of a tier related badge in the focus state.
......
src/tokens/build/json/tokens.dark.json
+ 906
− 108
View file @ d36a5f85
This diff is collapsed.
src/tokens/build/json/tokens.json
+ 906
− 108
View file @ d36a5f85
This diff is collapsed.
src/tokens/build/scss/_tokens.dark.scss
+ 68
− 33
View file @ d36a5f85
......@@ -180,6 +180,27 @@ $theme-indigo-200: #41419f !default;
$theme-indigo-100: #303083 !default;
$theme-indigo-50: #222261 !default;
$theme-indigo-10: #14143d !default;
$gl-badge-tier-border-color-active: #5943b600; // Used for the border of a tier related badge in the active state.
$gl-badge-tier-border-color-focus: #5943b600; // Used for the border of a tier related badge in the focus state.
$gl-badge-tier-border-color-default: #5943b600; // Used for the border of a tier related badge when static or the default state when linked.
$gl-badge-danger-border-color-active: #ae180000; // Used for the border of a danger badge in the active state.
$gl-badge-danger-border-color-focus: #ae180000; // Used for the border of a danger badge in the focus state.
$gl-badge-danger-border-color-default: #ae180000; // Used for the border of a danger badge when static or the default state when linked.
$gl-badge-warning-border-color-active: #8f470000; // Used for the border of a warning badge in the active state.
$gl-badge-warning-border-color-focus: #8f470000; // Used for the border of a warning badge in the focus state.
$gl-badge-warning-border-color-default: #8f470000; // Used for the border of a warning badge when static or the default state when linked.
$gl-badge-success-border-color-active: #24663b00; // Used for the border of a success badge in the active state.
$gl-badge-success-border-color-focus: #24663b00; // Used for the border of a success badge in the focus state.
$gl-badge-success-border-color-default: #24663b00; // Used for the border of a success badge when static or the default state when linked.
$gl-badge-info-border-color-active: #0b5cad00; // Used for the border of an informational badge in the active state.
$gl-badge-info-border-color-focus: #0b5cad00; // Used for the border of an informational badge in the focus state.
$gl-badge-info-border-color-default: #0b5cad00; // Used for the border of an informational badge when static or the default state when linked.
$gl-badge-neutral-border-color-active: #4c4b5100; // Used for the border of a neutral badge in the active state.
$gl-badge-neutral-border-color-focus: #4c4b5100; // Used for the border of a neutral badge in the focus state.
$gl-badge-neutral-border-color-default: #4c4b5100; // Used for the border of a neutral badge when static or the default state when linked.
$gl-badge-muted-border-color-active: #4c4b5100; // Used for the border of a muted badge in the active state.
$gl-badge-muted-border-color-focus: #4c4b5100; // Used for the border of a muted badge in the focus state.
$gl-badge-muted-border-color-default: #4c4b5100; // Used for the border of a muted badge when static or the default state when linked.
$data-viz-orange-950: #fae8d1 !default;
$data-viz-orange-900: #f5d6b3 !default;
$data-viz-orange-800: #eebd8c !default;
......@@ -574,24 +595,24 @@ $gl-badge-tier-text-color-default: $gl-color-purple-300; // Used for the text of
$gl-badge-tier-border-color-hover: $gl-color-purple-800; // Used for the border of a tier related badge in the hover state.
$gl-badge-tier-background-color-active: $gl-color-purple-800; // Used for the background of a tier related badge in the active state.
$gl-badge-tier-background-color-default: $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: $gl-color-red-200; // Used for the icon of a danger (critical) badge in the active state.
$gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger (critical) badge in the hover state.
$gl-badge-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger (critical) badge when static or the default state when linked.
$gl-badge-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger (critical) badge in the active state.
$gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger (critical) badge in the hover state.
$gl-badge-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger (critical) badge when static or the default state when linked.
$gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger (critical) badge in the hover state.
$gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger (critical) badge in the active state.
$gl-badge-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger (critical) badge when static or the default state when linked.
$gl-badge-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning status or confidential item in the active state.
$gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning status or confidential item in the hover state.
$gl-badge-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning status or confidential item when static or the default state when linked.
$gl-badge-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning status or confidential item in the active state.N
$gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning status or confidential item in the hover state.
$gl-badge-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning status or confidential item when static or the default state when linked.
$gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning status or confidential item in the hover state.
$gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning status or confidential item in the active state.
$gl-badge-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning status or confidential item when static or the default state when linked.
$gl-badge-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger badge in the active state.
$gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger badge in the hover state.
$gl-badge-danger-icon-color-default: $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: $gl-color-red-50; // Used for the text of a danger badge in the active state.
$gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger badge in the hover state.
$gl-badge-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger badge when static or the default state when linked.
$gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger badge in the hover state.
$gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger badge in the active state.
$gl-badge-danger-background-color-default: $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: $gl-color-orange-200; // Used for the icon of a warning badge in the active state.
$gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning badge in the hover state.
$gl-badge-warning-icon-color-default: $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: $gl-color-orange-50; // Used for the text of a warning badge in the active state.
$gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning badge in the hover state.
$gl-badge-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning badge when static or the default state when linked.
$gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning badge in the hover state.
$gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning badge in the active state.
$gl-badge-warning-background-color-default: $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: $gl-color-green-200; // Used for the icon of a success badge in the active state.
$gl-badge-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success badge in the hover state.
$gl-badge-success-icon-color-default: $gl-color-green-400; // Used for the icon of a success badge when static or the default state when linked.
......@@ -619,15 +640,15 @@ $gl-badge-neutral-text-color-default: $gl-color-neutral-200; // Used for the tex
$gl-badge-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral badge in the hover state.
$gl-badge-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral badge in the active state.
$gl-badge-neutral-background-color-default: $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: $gl-color-neutral-200; // Used for the icon of a subtle neutral badge in the active state.
$gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a subtle neutral badge in the hover state.
$gl-badge-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a subtle neutral badge when static or the default state when linked.
$gl-badge-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a subtle neutral badge in the active state.
$gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a subtle neutral badge in the hover state.
$gl-badge-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a subtle neutral badge when static or the default state when linked.
$gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a subtle neutral badge in the hover state.
$gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral badge in the active state.
$gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a subtle neutral badge when static or the default state when linked.
$gl-badge-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a muted badge in the active state.
$gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a muted badge in the hover state.
$gl-badge-muted-icon-color-default: $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: $gl-color-neutral-100; // Used for the text of a muted badge in the active state.
$gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a muted badge in the hover state.
$gl-badge-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a muted badge when static or the default state when linked.
$gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a muted badge in the hover state.
$gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a muted badge in the active state.
$gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a muted badge when static or the default state when linked.
$gl-avatar-fallback-background-color-neutral: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.
$gl-avatar-fallback-background-color-orange: $gl-color-orange-900; // Orange background for avatar fallback with no particular meaning.
$gl-avatar-fallback-background-color-green: $gl-color-green-900; // Green background for avatar fallback with no particular meaning.
......@@ -707,18 +728,25 @@ $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-fo
$gl-button-default-primary-foreground-color-hover: $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: $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: $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: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger (critical) badge in the focus state.
$gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger (critical) badge in the focus state.
$gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning status or confidential item in the focus state.
$gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning status or confidential item in the focus state.
$gl-badge-tier-background-color-hover: $gl-badge-tier-background-color-default; // Used for the background of a tier related badge in the hover state.
$gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger badge in the focus state.
$gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger badge in the focus state.
$gl-badge-danger-background-color-hover: $gl-badge-danger-background-color-default; // Used for the background of a danger badge in the hover state.
$gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning badge in the focus state.
$gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning badge in the focus state.
$gl-badge-warning-background-color-hover: $gl-badge-warning-background-color-default; // Used for the background of a warning badge in the hover state.
$gl-badge-success-icon-color-focus: $gl-badge-success-icon-color-hover; // Used for the icon of a success badge in the focus state.
$gl-badge-success-text-color-focus: $gl-badge-success-text-color-hover; // Used for the text of a success badge in the focus state.
$gl-badge-success-background-color-hover: $gl-badge-success-background-color-default; // Used for the background of a success badge in the hover state.
$gl-badge-info-icon-color-focus: $gl-badge-info-icon-color-hover; // Used for the icon of an informational badge in the focus state.
$gl-badge-info-text-color-focus: $gl-badge-info-text-color-hover; // Used for the text of an informational badge in the focus state.
$gl-badge-info-background-color-hover: $gl-badge-info-background-color-default; // Used for the background of an informational badge in the hover state.
$gl-badge-neutral-icon-color-focus: $gl-badge-neutral-icon-color-hover; // Used for the icon of a neutral badge in the focus state.
$gl-badge-neutral-text-color-focus: $gl-badge-neutral-text-color-hover; // Used for the text of a neutral badge in the focus state.
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a subtle neutral badge in the focus state.
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a subtle neutral badge in the focus state.
$gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-default; // Used for the background of a neutral badge in the hover state.
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
$gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
$gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
$gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
$gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
......@@ -756,3 +784,10 @@ $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-
$gl-button-default-tertiary-foreground-color-active: $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: $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: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
$gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
$gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
$gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hover; // Used for the background of a warning badge in the focus state.
$gl-badge-success-background-color-focus: $gl-badge-success-background-color-hover; // Used for the background of a success badge in the focus state.
$gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
$gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
$gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
src/tokens/build/scss/_tokens.scss
+ 68
− 33
View file @ d36a5f85
......@@ -180,6 +180,27 @@ $theme-indigo-200: #c7c7f2 !default;
$theme-indigo-100: #dbdbf8 !default;
$theme-indigo-50: #f1f1ff !default;
$theme-indigo-10: #f8f8ff !default;
$gl-badge-tier-border-color-active: #cbbbf200; // Used for the border of a tier related badge in the active state.
$gl-badge-tier-border-color-focus: #cbbbf200; // Used for the border of a tier related badge in the focus state.
$gl-badge-tier-border-color-default: #cbbbf200; // Used for the border of a tier related badge when static or the default state when linked.
$gl-badge-danger-border-color-active: #fcb5aa00; // Used for the border of a danger badge in the active state.
$gl-badge-danger-border-color-focus: #fcb5aa00; // Used for the border of a danger badge in the focus state.
$gl-badge-danger-border-color-default: #fcb5aa00; // Used for the border of a danger badge when static or the default state when linked.
$gl-badge-warning-border-color-active: #e9be7400; // Used for the border of a warning badge in the active state.
$gl-badge-warning-border-color-focus: #e9be7400; // Used for the border of a warning badge in the focus state.
$gl-badge-warning-border-color-default: #e9be7400; // Used for the border of a warning badge when static or the default state when linked.
$gl-badge-success-border-color-active: #91d4a800; // Used for the border of a success badge in the active state.
$gl-badge-success-border-color-focus: #91d4a800; // Used for the border of a success badge in the focus state.
$gl-badge-success-border-color-default: #91d4a800; // Used for the border of a success badge when static or the default state when linked.
$gl-badge-info-border-color-active: #9dc7f100; // Used for the border of an informational badge in the active state.
$gl-badge-info-border-color-focus: #9dc7f100; // Used for the border of an informational badge in the focus state.
$gl-badge-info-border-color-default: #9dc7f100; // Used for the border of an informational badge when static or the default state when linked.
$gl-badge-neutral-border-color-active: #bfbfc300; // Used for the border of a neutral badge in the active state.
$gl-badge-neutral-border-color-focus: #bfbfc300; // Used for the border of a neutral badge in the focus state.
$gl-badge-neutral-border-color-default: #bfbfc300; // Used for the border of a neutral badge when static or the default state when linked.
$gl-badge-muted-border-color-active: #bfbfc300; // Used for the border of a muted badge in the active state.
$gl-badge-muted-border-color-focus: #bfbfc300; // Used for the border of a muted badge in the focus state.
$gl-badge-muted-border-color-default: #bfbfc300; // Used for the border of a muted badge when static or the default state when linked.
$data-viz-orange-950: #4b2707 !default;
$data-viz-orange-900: #5e2f05 !default;
$data-viz-orange-800: #6f3500 !default;
......@@ -574,24 +595,24 @@ $gl-badge-tier-text-color-default: $gl-color-purple-700; // Used for the text of
$gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border of a tier related badge in the hover state.
$gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
$gl-badge-tier-background-color-default: $gl-color-purple-100; // Used for the background of a tier related badge when static or the default state when linked.
$gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger (critical) badge in the active state.
$gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger (critical) badge in the hover state.
$gl-badge-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger (critical) badge when static or the default state when linked.
$gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger (critical) badge in the active state.
$gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger (critical) badge in the hover state.
$gl-badge-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger (critical) badge when static or the default state when linked.
$gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger (critical) badge in the hover state.
$gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger (critical) badge in the active state.
$gl-badge-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger (critical) badge when static or the default state when linked.
$gl-badge-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning status or confidential item in the active state.
$gl-badge-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the hover state.
$gl-badge-warning-icon-color-default: $gl-color-orange-500; // Used for the icon of a warning status or confidential item when static or the default state when linked.
$gl-badge-warning-text-color-active: $gl-color-orange-900; // Used for the text of a warning status or confidential item in the active state.N
$gl-badge-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the hover state.
$gl-badge-warning-text-color-default: $gl-color-orange-700; // Used for the text of a warning status or confidential item when static or the default state when linked.
$gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning status or confidential item in the hover state.
$gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning status or confidential item in the active state.
$gl-badge-warning-background-color-default: $gl-color-orange-100; // Used for the background of a warning status or confidential item when static or the default state when linked.
$gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger badge in the active state.
$gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger badge in the hover state.
$gl-badge-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger badge when static or the default state when linked.
$gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger badge in the active state.
$gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger badge in the hover state.
$gl-badge-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger badge when static or the default state when linked.
$gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger badge in the hover state.
$gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger badge in the active state.
$gl-badge-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger badge when static or the default state when linked.
$gl-badge-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning badge in the active state.
$gl-badge-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning badge in the hover state.
$gl-badge-warning-icon-color-default: $gl-color-orange-500; // Used for the icon of a warning badge when static or the default state when linked.
$gl-badge-warning-text-color-active: $gl-color-orange-900; // Used for the text of a warning badge in the active state.
$gl-badge-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning badge in the hover state.
$gl-badge-warning-text-color-default: $gl-color-orange-700; // Used for the text of a warning badge when static or the default state when linked.
$gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning badge in the hover state.
$gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning badge in the active state.
$gl-badge-warning-background-color-default: $gl-color-orange-100; // Used for the background of a warning badge when static or the default state when linked.
$gl-badge-success-icon-color-active: $gl-color-green-700; // Used for the icon of a success badge in the active state.
$gl-badge-success-icon-color-hover: $gl-color-green-600; // Used for the icon of a success badge in the hover state.
$gl-badge-success-icon-color-default: $gl-color-green-500; // Used for the icon of a success badge when static or the default state when linked.
......@@ -619,15 +640,15 @@ $gl-badge-neutral-text-color-default: $gl-color-neutral-700; // Used for the tex
$gl-badge-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral badge in the hover state.
$gl-badge-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral badge in the active state.
$gl-badge-neutral-background-color-default: $gl-color-neutral-100; // Used for the background of a neutral badge when static or the default state when linked.
$gl-badge-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a subtle neutral badge in the active state.
$gl-badge-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a subtle neutral badge in the hover state.
$gl-badge-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a subtle neutral badge when static or the default state when linked.
$gl-badge-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a subtle neutral badge in the active state.
$gl-badge-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a subtle neutral badge in the hover state.
$gl-badge-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a subtle neutral badge when static or the default state when linked.
$gl-badge-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a subtle neutral badge in the hover state.
$gl-badge-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a subtle neutral badge in the active state.
$gl-badge-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a subtle neutral badge when static or the default state when linked.
$gl-badge-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a muted badge in the active state.
$gl-badge-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a muted badge in the hover state.
$gl-badge-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a muted badge when static or the default state when linked.
$gl-badge-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a muted badge in the active state.
$gl-badge-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a muted badge in the hover state.
$gl-badge-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a muted badge when static or the default state when linked.
$gl-badge-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a muted badge in the hover state.
$gl-badge-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a muted badge in the active state.
$gl-badge-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a muted badge when static or the default state when linked.
$gl-avatar-fallback-background-color-neutral: $gl-color-neutral-50; // Neutral background for avatar fallback with no particular meaning.
$gl-avatar-fallback-background-color-orange: $gl-color-orange-50; // Orange background for avatar fallback with no particular meaning.
$gl-avatar-fallback-background-color-green: $gl-color-green-50; // Green background for avatar fallback with no particular meaning.
......@@ -707,18 +728,25 @@ $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-fo
$gl-button-default-primary-foreground-color-hover: $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: $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: $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: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger (critical) badge in the focus state.
$gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger (critical) badge in the focus state.
$gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning status or confidential item in the focus state.
$gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning status or confidential item in the focus state.
$gl-badge-tier-background-color-hover: $gl-badge-tier-background-color-default; // Used for the background of a tier related badge in the hover state.
$gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger badge in the focus state.
$gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger badge in the focus state.
$gl-badge-danger-background-color-hover: $gl-badge-danger-background-color-default; // Used for the background of a danger badge in the hover state.
$gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning badge in the focus state.
$gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning badge in the focus state.
$gl-badge-warning-background-color-hover: $gl-badge-warning-background-color-default; // Used for the background of a warning badge in the hover state.
$gl-badge-success-icon-color-focus: $gl-badge-success-icon-color-hover; // Used for the icon of a success badge in the focus state.
$gl-badge-success-text-color-focus: $gl-badge-success-text-color-hover; // Used for the text of a success badge in the focus state.
$gl-badge-success-background-color-hover: $gl-badge-success-background-color-default; // Used for the background of a success badge in the hover state.
$gl-badge-info-icon-color-focus: $gl-badge-info-icon-color-hover; // Used for the icon of an informational badge in the focus state.
$gl-badge-info-text-color-focus: $gl-badge-info-text-color-hover; // Used for the text of an informational badge in the focus state.
$gl-badge-info-background-color-hover: $gl-badge-info-background-color-default; // Used for the background of an informational badge in the hover state.
$gl-badge-neutral-icon-color-focus: $gl-badge-neutral-icon-color-hover; // Used for the icon of a neutral badge in the focus state.
$gl-badge-neutral-text-color-focus: $gl-badge-neutral-text-color-hover; // Used for the text of a neutral badge in the focus state.
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a subtle neutral badge in the focus state.
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a subtle neutral badge in the focus state.
$gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-default; // Used for the background of a neutral badge in the hover state.
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
$gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
$gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
$gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
$gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
......@@ -756,3 +784,10 @@ $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-
$gl-button-default-tertiary-foreground-color-active: $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: $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: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
$gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
$gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
$gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hover; // Used for the background of a warning badge in the focus state.
$gl-badge-success-background-color-focus: $gl-badge-success-background-color-hover; // Used for the background of a success badge in the focus state.
$gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
$gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
$gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
src/tokens/build/scss/_tokens_custom_properties.scss
+ 35
− 0
View file @ d36a5f85
......@@ -285,8 +285,13 @@ $gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-
$gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
$gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
$gl-badge-muted-background-color-default: var(--gl-badge-muted-background-color-default);
$gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-hover);
$gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-focus);
$gl-badge-muted-background-color-active: var(--gl-badge-muted-background-color-active);
$gl-badge-muted-border-color-default: var(--gl-badge-muted-border-color-default);
$gl-badge-muted-border-color-hover: var(--gl-badge-muted-border-color-hover);
$gl-badge-muted-border-color-focus: var(--gl-badge-muted-border-color-focus);
$gl-badge-muted-border-color-active: var(--gl-badge-muted-border-color-active);
$gl-badge-muted-text-color-default: var(--gl-badge-muted-text-color-default);
$gl-badge-muted-text-color-hover: var(--gl-badge-muted-text-color-hover);
$gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-focus);
......@@ -296,8 +301,13 @@ $gl-badge-muted-icon-color-hover: var(--gl-badge-muted-icon-color-hover);
$gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-focus);
$gl-badge-muted-icon-color-active: var(--gl-badge-muted-icon-color-active);
$gl-badge-neutral-background-color-default: var(--gl-badge-neutral-background-color-default);
$gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-hover);
$gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-focus);
$gl-badge-neutral-background-color-active: var(--gl-badge-neutral-background-color-active);
$gl-badge-neutral-border-color-default: var(--gl-badge-neutral-border-color-default);
$gl-badge-neutral-border-color-hover: var(--gl-badge-neutral-border-color-hover);
$gl-badge-neutral-border-color-focus: var(--gl-badge-neutral-border-color-focus);
$gl-badge-neutral-border-color-active: var(--gl-badge-neutral-border-color-active);
$gl-badge-neutral-text-color-default: var(--gl-badge-neutral-text-color-default);
$gl-badge-neutral-text-color-hover: var(--gl-badge-neutral-text-color-hover);
$gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-focus);
......@@ -307,8 +317,13 @@ $gl-badge-neutral-icon-color-hover: var(--gl-badge-neutral-icon-color-hover);
$gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-focus);
$gl-badge-neutral-icon-color-active: var(--gl-badge-neutral-icon-color-active);
$gl-badge-info-background-color-default: var(--gl-badge-info-background-color-default);
$gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-hover);
$gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-focus);
$gl-badge-info-background-color-active: var(--gl-badge-info-background-color-active);
$gl-badge-info-border-color-default: var(--gl-badge-info-border-color-default);
$gl-badge-info-border-color-hover: var(--gl-badge-info-border-color-hover);
$gl-badge-info-border-color-focus: var(--gl-badge-info-border-color-focus);
$gl-badge-info-border-color-active: var(--gl-badge-info-border-color-active);
$gl-badge-info-text-color-default: var(--gl-badge-info-text-color-default);
$gl-badge-info-text-color-hover: var(--gl-badge-info-text-color-hover);
$gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-focus);
......@@ -318,8 +333,13 @@ $gl-badge-info-icon-color-hover: var(--gl-badge-info-icon-color-hover);
$gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-focus);
$gl-badge-info-icon-color-active: var(--gl-badge-info-icon-color-active);
$gl-badge-success-background-color-default: var(--gl-badge-success-background-color-default);
$gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-hover);
$gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-focus);
$gl-badge-success-background-color-active: var(--gl-badge-success-background-color-active);
$gl-badge-success-border-color-default: var(--gl-badge-success-border-color-default);
$gl-badge-success-border-color-hover: var(--gl-badge-success-border-color-hover);
$gl-badge-success-border-color-focus: var(--gl-badge-success-border-color-focus);
$gl-badge-success-border-color-active: var(--gl-badge-success-border-color-active);
$gl-badge-success-text-color-default: var(--gl-badge-success-text-color-default);
$gl-badge-success-text-color-hover: var(--gl-badge-success-text-color-hover);
$gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-focus);
......@@ -329,8 +349,13 @@ $gl-badge-success-icon-color-hover: var(--gl-badge-success-icon-color-hover);
$gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-focus);
$gl-badge-success-icon-color-active: var(--gl-badge-success-icon-color-active);
$gl-badge-warning-background-color-default: var(--gl-badge-warning-background-color-default);
$gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-hover);
$gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-focus);
$gl-badge-warning-background-color-active: var(--gl-badge-warning-background-color-active);
$gl-badge-warning-border-color-default: var(--gl-badge-warning-border-color-default);
$gl-badge-warning-border-color-hover: var(--gl-badge-warning-border-color-hover);
$gl-badge-warning-border-color-focus: var(--gl-badge-warning-border-color-focus);
$gl-badge-warning-border-color-active: var(--gl-badge-warning-border-color-active);
$gl-badge-warning-text-color-default: var(--gl-badge-warning-text-color-default);
$gl-badge-warning-text-color-hover: var(--gl-badge-warning-text-color-hover);
$gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-focus);
......@@ -340,8 +365,13 @@ $gl-badge-warning-icon-color-hover: var(--gl-badge-warning-icon-color-hover);
$gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-focus);
$gl-badge-warning-icon-color-active: var(--gl-badge-warning-icon-color-active);
$gl-badge-danger-background-color-default: var(--gl-badge-danger-background-color-default);
$gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-hover);
$gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-focus);
$gl-badge-danger-background-color-active: var(--gl-badge-danger-background-color-active);
$gl-badge-danger-border-color-default: var(--gl-badge-danger-border-color-default);
$gl-badge-danger-border-color-hover: var(--gl-badge-danger-border-color-hover);
$gl-badge-danger-border-color-focus: var(--gl-badge-danger-border-color-focus);
$gl-badge-danger-border-color-active: var(--gl-badge-danger-border-color-active);
$gl-badge-danger-text-color-default: var(--gl-badge-danger-text-color-default);
$gl-badge-danger-text-color-hover: var(--gl-badge-danger-text-color-hover);
$gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-focus);
......@@ -351,8 +381,13 @@ $gl-badge-danger-icon-color-hover: var(--gl-badge-danger-icon-color-hover);
$gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-focus);
$gl-badge-danger-icon-color-active: var(--gl-badge-danger-icon-color-active);
$gl-badge-tier-background-color-default: var(--gl-badge-tier-background-color-default);
$gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-hover);
$gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-focus);
$gl-badge-tier-background-color-active: var(--gl-badge-tier-background-color-active);
$gl-badge-tier-border-color-default: var(--gl-badge-tier-border-color-default);
$gl-badge-tier-border-color-hover: var(--gl-badge-tier-border-color-hover);
$gl-badge-tier-border-color-focus: var(--gl-badge-tier-border-color-focus);
$gl-badge-tier-border-color-active: var(--gl-badge-tier-border-color-active);
$gl-badge-tier-text-color-default: var(--gl-badge-tier-text-color-default);
$gl-badge-tier-text-color-hover: var(--gl-badge-tier-text-color-hover);
$gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-focus);
......
src/tokens/contextual/badge.tokens.json
+ 271
− 33
View file @ d36a5f85
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment