Skip to content
Commits on Source (5)
Hide whitespace changes
Inline Side-by-side
.gitlab/issue_templates/Component.md
View file @ 492adadb
......@@ -43,4 +43,4 @@ Make sure the following are completed before closing the issue:
[adding-components]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_components.md
[adding-css]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_css.md
[breaking-changes]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/breaking_changes_to_components.md
[eng-week-in-review-doc]: https://docs.google.com/document/d/1GQbnOP_lr9KVMVaBQx19WwKITCmh7H3YlgO-XqVwv0M/edit
[eng-week-in-review-doc]: https://docs.google.com/document/d/1JBdCl3MAOSdlgq3kzzRmtzTsFWsTIQ9iQg0RHhMht6E/edit
CHANGELOG.md
View file @ 492adadb
# [95.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v95.3.0...v95.4.0) (2024-10-09)
### Features
* **design-tokens:** Add new design tokens for GlToggle ([fd32020](https://gitlab.com/gitlab-org/gitlab-ui/commit/fd320201ccae9d467b6990609d398c886b9c03de))
# [95.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v95.2.1...v95.3.0) (2024-10-08)
......
package.json
View file @ 492adadb
{
"name": "@gitlab/ui",
"version": "95.3.0",
"version": "95.4.0",
"description": "GitLab UI Components",
"license": "MIT",
"main": "dist/index.js",
......
src/tokens/action.tokens.json
View file @ 492adadb
......@@ -426,7 +426,10 @@
"foreground": {
"color": {
"default": {
"$value": "{color.neutral.0}",
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the default state."
},
......@@ -478,7 +481,7 @@
"default": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.300}"
"dark": "{color.neutral.700}"
},
"$type": "color",
"$description": "Used for the background of a strong neutral action in the default state."
......@@ -486,7 +489,7 @@
"hover": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.200}"
"dark": "{color.neutral.600}"
},
"$type": "color",
"$description": "Used for the background of a strong neutral action in the hover state."
......@@ -499,7 +502,7 @@
"active": {
"$value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.100}"
"dark": "{color.neutral.500}"
},
"$type": "color",
"$description": "Used for the background of a strong neutral action in the active state."
......@@ -509,7 +512,10 @@
"foreground": {
"color": {
"default": {
"$value": "{color.neutral.0}",
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.50}"
},
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the default state."
},
......
src/tokens/build/css/tokens.css
View file @ 492adadb
......@@ -780,6 +780,13 @@
--gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
--gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
--gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
--gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /* Used for the icon color of a disabled toggle switch. */
--gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the icon color of a checked toggle switch in the active state. */
--gl-toggle-switch-icon-color-checked-hover: var(--gl-action-strong-confirm-background-color-hover); /* Used for the icon color of a checked toggle switch in the hover state. */
--gl-toggle-switch-icon-color-checked-default: var(--gl-action-strong-confirm-background-color-default); /* Used for the icon color of a checked toggle switch in the default state. */
--gl-toggle-switch-icon-color-unchecked-active: var(--gl-action-strong-neutral-background-color-active); /* Used for the icon color of an unchecked toggle switch in the active state. */
--gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-strong-neutral-background-color-hover); /* Used for the icon color of an unchecked toggle switch in the hover state. */
--gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-strong-neutral-background-color-default); /* Used for the icon color of an unchecked toggle switch in the default state. */
--gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
--gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
--gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /* Used for the indicator color for the danger progress-bar variant. */
......@@ -893,6 +900,8 @@
--gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
--gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
--gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
--gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /* Used for the icon color of a checked toggle switch in the focus state. */
--gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /* Used for the icon color of an unchecked toggle switch in the focus state. */
--gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */
--gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the text of a dropdown option in the focus state. */
--gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */
......
src/tokens/build/css/tokens.dark.css
View file @ 492adadb
......@@ -746,12 +746,12 @@
--gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
--gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
--gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong neutral action in the default state. */
--gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong neutral action in the default state. */
--gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a strong neutral action in the active state. */
--gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-200); /* Used for the background of a strong neutral action in the hover state. */
--gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-300); /* Used for the background of a strong neutral action in the default state. */
--gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a strong neutral action in the default state. */
--gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-500); /* Used for the background of a strong neutral action in the active state. */
--gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-600); /* Used for the background of a strong neutral action in the hover state. */
--gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-700); /* Used for the background of a strong neutral action in the default state. */
--gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong confirm action in the default state. */
--gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong confirm action in the default state. */
--gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a strong confirm action in the default state. */
--gl-action-strong-confirm-background-color-active: var(--gl-color-blue-200); /* Used for the background of a strong confirm action in the active state. */
--gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-300); /* Used for the background of a strong confirm action in the hover state. */
--gl-action-strong-confirm-background-color-default: var(--gl-color-blue-400); /* Used for the background of a strong confirm action in the default state. */
......@@ -780,6 +780,13 @@
--gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
--gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
--gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
--gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /* Used for the icon color of a disabled toggle switch. */
--gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the icon color of a checked toggle switch in the active state. */
--gl-toggle-switch-icon-color-checked-hover: var(--gl-action-strong-confirm-background-color-hover); /* Used for the icon color of a checked toggle switch in the hover state. */
--gl-toggle-switch-icon-color-checked-default: var(--gl-action-strong-confirm-background-color-default); /* Used for the icon color of a checked toggle switch in the default state. */
--gl-toggle-switch-icon-color-unchecked-active: var(--gl-action-strong-neutral-background-color-active); /* Used for the icon color of an unchecked toggle switch in the active state. */
--gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-strong-neutral-background-color-hover); /* Used for the icon color of an unchecked toggle switch in the hover state. */
--gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-strong-neutral-background-color-default); /* Used for the icon color of an unchecked toggle switch in the default state. */
--gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
--gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
--gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /* Used for the indicator color for the danger progress-bar variant. */
......@@ -893,6 +900,8 @@
--gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
--gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
--gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
--gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /* Used for the icon color of a checked toggle switch in the focus state. */
--gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /* Used for the icon color of an unchecked toggle switch in the focus state. */
--gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */
--gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the text of a dropdown option in the focus state. */
--gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */
......
src/tokens/build/js/tokens.dark.js
View file @ 492adadb
......@@ -58,22 +58,22 @@ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#428fdc'; // U
export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_HOVER = '#63a6e9'; // Used for the background of a strong confirm action in the hover state.
export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_FOCUS = '#63a6e9'; // Used for the background of a strong confirm action in the focus state.
export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of a strong confirm action in the active state.
export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong confirm action in the default state.
export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong confirm action in the hover state.
export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong confirm action in the focus state.
export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong confirm action in the active state.
export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#18171d'; // Used for the foreground of a strong confirm action in the default state.
export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#18171d'; // Used for the foreground of a strong confirm action in the hover state.
export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#18171d'; // Used for the foreground of a strong confirm action in the focus state.
export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#18171d'; // Used for the foreground of a strong confirm action in the active state.
export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong confirm action in the default state.
export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong confirm action in the hover state.
export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong confirm action in the focus state.
export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a strong confirm action in the active state.
export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#a4a3a8'; // Used for the background of a strong neutral action in the default state.
export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#bfbfc3'; // Used for the background of a strong neutral action in the hover state.
export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#bfbfc3'; // Used for the background of a strong neutral action in the focus state.
export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a strong neutral action in the active state.
export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong neutral action in the default state.
export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong neutral action in the hover state.
export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong neutral action in the focus state.
export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong neutral action in the active state.
export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#4c4b51'; // Used for the background of a strong neutral action in the default state.
export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#626168'; // Used for the background of a strong neutral action in the hover state.
export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#626168'; // Used for the background of a strong neutral action in the focus state.
export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#737278'; // Used for the background of a strong neutral action in the active state.
export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a strong neutral action in the default state.
export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a strong neutral action in the hover state.
export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a strong neutral action in the focus state.
export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a strong neutral action in the active state.
export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong neutral action in the default state.
export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong neutral action in the hover state.
export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong neutral action in the focus state.
......@@ -530,10 +530,10 @@ export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_DEFAULT = 'transparent'; //
export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a default borderless, tertiary button in the hover state.
export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a default borderless, tertiary button in the focus state.
export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a default borderless, tertiary button in the active state.
export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a confirm (positive) primary button in the default state.
export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a confirm (positive) primary button in the hover state.
export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a confirm (positive) primary button in the focus state.
export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a confirm (positive) primary button in the active state.
export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#18171d'; // Used for the foreground of a confirm (positive) primary button in the default state.
export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_HOVER = '#18171d'; // Used for the foreground of a confirm (positive) primary button in the hover state.
export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_FOCUS = '#18171d'; // Used for the foreground of a confirm (positive) primary button in the focus state.
export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_ACTIVE = '#18171d'; // Used for the foreground of a confirm (positive) primary button in the active state.
export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_DEFAULT = '#428fdc'; // Used for the background of a confirm (positive) primary button in the default state.
export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_HOVER = '#63a6e9'; // Used for the background of a confirm (positive) primary button in the hover state.
export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_FOCUS = '#63a6e9'; // Used for the background of a confirm (positive) primary button in the focus state.
......@@ -682,6 +682,15 @@ export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animate
export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a table row in hover state.
export const GL_TABLE_SORTING_ICON_COLOR = '#fff'; // Used for the color of the sorting icons in the column headers.
export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for the selected indicator of a tab.
export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#4c4b51'; // Used for the icon color of an unchecked toggle switch in the default state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER = '#626168'; // Used for the icon color of an unchecked toggle switch in the hover state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS = '#626168'; // Used for the icon color of an unchecked toggle switch in the focus state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE = '#737278'; // Used for the icon color of an unchecked toggle switch in the active state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT = '#428fdc'; // Used for the icon color of a checked toggle switch in the default state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#63a6e9'; // Used for the icon color of a checked toggle switch in the hover state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#63a6e9'; // Used for the icon color of a checked toggle switch in the focus state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#9dc7f1'; // Used for the icon color of a checked toggle switch in the active state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d'; // Used for the icon color of a disabled toggle switch.
export const GL_TOKEN_FOREGROUND_COLOR = '#ececef'; // Used for the token foreground color.
export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f'; // Used for the token background color.
export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
......
src/tokens/build/js/tokens.js
View file @ 492adadb
......@@ -682,6 +682,15 @@ export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animate
export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#fbfafd'; // Used for the background of a table row in hover state.
export const GL_TABLE_SORTING_ICON_COLOR = '#18171d'; // Used for the color of the sorting icons in the column headers.
export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for the selected indicator of a tab.
export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#626168'; // Used for the icon color of an unchecked toggle switch in the default state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER = '#4c4b51'; // Used for the icon color of an unchecked toggle switch in the hover state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS = '#4c4b51'; // Used for the icon color of an unchecked toggle switch in the focus state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE = '#3a383f'; // Used for the icon color of an unchecked toggle switch in the active state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT = '#1f75cb'; // Used for the icon color of a checked toggle switch in the default state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#1068bf'; // Used for the icon color of a checked toggle switch in the hover state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#1068bf'; // Used for the icon color of a checked toggle switch in the focus state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#0b5cad'; // Used for the icon color of a checked toggle switch in the active state.
export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#ececef'; // Used for the icon color of a disabled toggle switch.
export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f'; // Used for the token foreground color.
export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde'; // Used for the token background color.
export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
......
src/tokens/build/json/tokens.dark.json
View file @ 492adadb
......@@ -1307,13 +1307,16 @@
"foreground": {
"color": {
"default": {
"value": "#fff",
"value": "#18171d",
"$type": "color",
"comment": "Used for the foreground of a strong confirm action in the default state.",
"filePath": "src/tokens/action.tokens.json",
"isSource": true,
"original": {
"value": "{color.neutral.0}",
"value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"comment": "Used for the foreground of a strong confirm action in the default state."
},
......@@ -1329,7 +1332,7 @@
]
},
"hover": {
"value": "#fff",
"value": "#18171d",
"$type": "color",
"comment": "Used for the foreground of a strong confirm action in the hover state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1351,7 +1354,7 @@
]
},
"focus": {
"value": "#fff",
"value": "#18171d",
"$type": "color",
"comment": "Used for the foreground of a strong confirm action in the focus state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1373,7 +1376,7 @@
]
},
"active": {
"value": "#fff",
"value": "#18171d",
"$type": "color",
"comment": "Used for the foreground of a strong confirm action in the active state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1493,7 +1496,7 @@
"background": {
"color": {
"default": {
"value": "#a4a3a8",
"value": "#4c4b51",
"$type": "color",
"comment": "Used for the background of a strong neutral action in the default state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1501,7 +1504,7 @@
"original": {
"value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.300}"
"dark": "{color.neutral.700}"
},
"$type": "color",
"comment": "Used for the background of a strong neutral action in the default state."
......@@ -1518,7 +1521,7 @@
]
},
"hover": {
"value": "#bfbfc3",
"value": "#626168",
"$type": "color",
"comment": "Used for the background of a strong neutral action in the hover state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1526,7 +1529,7 @@
"original": {
"value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.200}"
"dark": "{color.neutral.600}"
},
"$type": "color",
"comment": "Used for the background of a strong neutral action in the hover state."
......@@ -1543,7 +1546,7 @@
]
},
"focus": {
"value": "#bfbfc3",
"value": "#626168",
"$type": "color",
"comment": "Used for the background of a strong neutral action in the focus state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1565,7 +1568,7 @@
]
},
"active": {
"value": "#dcdcde",
"value": "#737278",
"$type": "color",
"comment": "Used for the background of a strong neutral action in the active state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1573,7 +1576,7 @@
"original": {
"value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.100}"
"dark": "{color.neutral.500}"
},
"$type": "color",
"comment": "Used for the background of a strong neutral action in the active state."
......@@ -1594,13 +1597,16 @@
"foreground": {
"color": {
"default": {
"value": "#fff",
"value": "#ececef",
"$type": "color",
"comment": "Used for the foreground of a strong neutral action in the default state.",
"filePath": "src/tokens/action.tokens.json",
"isSource": true,
"original": {
"value": "{color.neutral.0}",
"value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.50}"
},
"$type": "color",
"comment": "Used for the foreground of a strong neutral action in the default state."
},
......@@ -1616,7 +1622,7 @@
]
},
"hover": {
"value": "#fff",
"value": "#ececef",
"$type": "color",
"comment": "Used for the foreground of a strong neutral action in the hover state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1638,7 +1644,7 @@
]
},
"focus": {
"value": "#fff",
"value": "#ececef",
"$type": "color",
"comment": "Used for the foreground of a strong neutral action in the focus state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -1660,7 +1666,7 @@
]
},
"active": {
"value": "#fff",
"value": "#ececef",
"$type": "color",
"comment": "Used for the foreground of a strong neutral action in the active state.",
"filePath": "src/tokens/action.tokens.json",
......@@ -11405,7 +11411,7 @@
"foreground": {
"color": {
"default": {
"value": "#fff",
"value": "#18171d",
"$type": "color",
"comment": "Used for the foreground of a confirm (positive) primary button in the default state.",
"filePath": "src/tokens/contextual/button.tokens.json",
......@@ -11427,7 +11433,7 @@
]
},
"hover": {
"value": "#fff",
"value": "#18171d",
"$type": "color",
"comment": "Used for the foreground of a confirm (positive) primary button in the hover state.",
"filePath": "src/tokens/contextual/button.tokens.json",
......@@ -11449,7 +11455,7 @@
]
},
"focus": {
"value": "#fff",
"value": "#18171d",
"$type": "color",
"comment": "Used for the foreground of a confirm (positive) primary button in the focus state.",
"filePath": "src/tokens/contextual/button.tokens.json",
......@@ -11471,7 +11477,7 @@
]
},
"active": {
"value": "#fff",
"value": "#18171d",
"$type": "color",
"comment": "Used for the foreground of a confirm (positive) primary button in the active state.",
"filePath": "src/tokens/contextual/button.tokens.json",
......@@ -15134,6 +15140,215 @@
}
}
},
"toggle": {
"switch": {
"icon": {
"color": {
"unchecked": {
"default": {
"value": "#4c4b51",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the default state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.neutral.background.color.default}",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the default state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"default"
]
},
"hover": {
"value": "#626168",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the hover state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.neutral.background.color.hover}",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the hover state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"hover"
]
},
"focus": {
"value": "#626168",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the focus state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.neutral.background.color.focus}",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the focus state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"focus"
]
},
"active": {
"value": "#737278",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the active state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.neutral.background.color.active}",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the active state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"active"
]
}
},
"checked": {
"default": {
"value": "#428fdc",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the default state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.confirm.background.color.default}",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the default state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"default"
]
},
"hover": {
"value": "#63a6e9",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the hover state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.confirm.background.color.hover}",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the hover state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"hover"
]
},
"focus": {
"value": "#63a6e9",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the focus state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.confirm.background.color.focus}",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the focus state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"focus"
]
},
"active": {
"value": "#9dc7f1",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the active state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.confirm.background.color.active}",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the active state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"active"
]
}
},
"disabled": {
"value": "#28272d",
"$type": "color",
"comment": "Used for the icon color of a disabled toggle switch.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.disabled.background.color}",
"$type": "color",
"comment": "Used for the icon color of a disabled toggle switch."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_DISABLED",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"disabled"
]
}
}
}
}
},
"token": {
"foreground": {
"color": {
......
src/tokens/build/json/tokens.json
View file @ 492adadb
......@@ -1313,7 +1313,10 @@
"filePath": "src/tokens/action.tokens.json",
"isSource": true,
"original": {
"value": "{color.neutral.0}",
"value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"comment": "Used for the foreground of a strong confirm action in the default state."
},
......@@ -1501,7 +1504,7 @@
"original": {
"value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.300}"
"dark": "{color.neutral.700}"
},
"$type": "color",
"comment": "Used for the background of a strong neutral action in the default state."
......@@ -1526,7 +1529,7 @@
"original": {
"value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.200}"
"dark": "{color.neutral.600}"
},
"$type": "color",
"comment": "Used for the background of a strong neutral action in the hover state."
......@@ -1573,7 +1576,7 @@
"original": {
"value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.100}"
"dark": "{color.neutral.500}"
},
"$type": "color",
"comment": "Used for the background of a strong neutral action in the active state."
......@@ -1600,7 +1603,10 @@
"filePath": "src/tokens/action.tokens.json",
"isSource": true,
"original": {
"value": "{color.neutral.0}",
"value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.50}"
},
"$type": "color",
"comment": "Used for the foreground of a strong neutral action in the default state."
},
......@@ -15134,6 +15140,215 @@
}
}
},
"toggle": {
"switch": {
"icon": {
"color": {
"unchecked": {
"default": {
"value": "#626168",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the default state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.neutral.background.color.default}",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the default state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"default"
]
},
"hover": {
"value": "#4c4b51",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the hover state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.neutral.background.color.hover}",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the hover state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"hover"
]
},
"focus": {
"value": "#4c4b51",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the focus state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.neutral.background.color.focus}",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the focus state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"focus"
]
},
"active": {
"value": "#3a383f",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the active state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.neutral.background.color.active}",
"$type": "color",
"comment": "Used for the icon color of an unchecked toggle switch in the active state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"active"
]
}
},
"checked": {
"default": {
"value": "#1f75cb",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the default state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.confirm.background.color.default}",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the default state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"default"
]
},
"hover": {
"value": "#1068bf",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the hover state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.confirm.background.color.hover}",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the hover state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"hover"
]
},
"focus": {
"value": "#1068bf",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the focus state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.confirm.background.color.focus}",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the focus state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"focus"
]
},
"active": {
"value": "#0b5cad",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the active state.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.strong.confirm.background.color.active}",
"$type": "color",
"comment": "Used for the icon color of a checked toggle switch in the active state."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"active"
]
}
},
"disabled": {
"value": "#ececef",
"$type": "color",
"comment": "Used for the icon color of a disabled toggle switch.",
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"value": "{action.disabled.background.color}",
"$type": "color",
"comment": "Used for the icon color of a disabled toggle switch."
},
"name": "TOGGLE_SWITCH_ICON_COLOR_DISABLED",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"disabled"
]
}
}
}
}
},
"token": {
"foreground": {
"color": {
......
src/tokens/build/scss/_tokens.dark.scss
View file @ 492adadb
......@@ -744,12 +744,12 @@ $gl-background-color-strong: $gl-color-neutral-800; // Used to make the backgrou
$gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
$gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
$gl-action-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
$gl-action-strong-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of a strong neutral action in the active state.
$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-200; // Used for the background of a strong neutral action in the hover state.
$gl-action-strong-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a strong neutral action in the default state.
$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a strong neutral action in the default state.
$gl-action-strong-neutral-background-color-active: $gl-color-neutral-500; // Used for the background of a strong neutral action in the active state.
$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-600; // Used for the background of a strong neutral action in the hover state.
$gl-action-strong-neutral-background-color-default: $gl-color-neutral-700; // Used for the background of a strong neutral action in the default state.
$gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a strong confirm action in the default state.
$gl-action-strong-confirm-background-color-active: $gl-color-blue-200; // Used for the background of a strong confirm action in the active state.
$gl-action-strong-confirm-background-color-hover: $gl-color-blue-300; // Used for the background of a strong confirm action in the hover state.
$gl-action-strong-confirm-background-color-default: $gl-color-blue-400; // Used for the background of a strong confirm action in the default state.
......@@ -778,6 +778,13 @@ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder
$gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
$gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
$gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
$gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
$gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
$gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
......@@ -891,6 +898,8 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
$gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
$gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
$gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
$gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
$gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
$gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
$gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
$gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
......
src/tokens/build/scss/_tokens.scss
View file @ 492adadb
......@@ -778,6 +778,13 @@ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder
$gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
$gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
$gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
$gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
$gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
$gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
......@@ -891,6 +898,8 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
$gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
$gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
$gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
$gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
$gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
$gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
$gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
$gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
......
src/tokens/build/scss/_tokens_custom_properties.scss
View file @ 492adadb
......@@ -682,6 +682,15 @@ $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
$gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
$gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
$gl-tab-selected-indicator-color-default: var(--gl-tab-selected-indicator-color-default);
$gl-toggle-switch-icon-color-unchecked-default: var(--gl-toggle-switch-icon-color-unchecked-default);
$gl-toggle-switch-icon-color-unchecked-hover: var(--gl-toggle-switch-icon-color-unchecked-hover);
$gl-toggle-switch-icon-color-unchecked-focus: var(--gl-toggle-switch-icon-color-unchecked-focus);
$gl-toggle-switch-icon-color-unchecked-active: var(--gl-toggle-switch-icon-color-unchecked-active);
$gl-toggle-switch-icon-color-checked-default: var(--gl-toggle-switch-icon-color-checked-default);
$gl-toggle-switch-icon-color-checked-hover: var(--gl-toggle-switch-icon-color-checked-hover);
$gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-checked-focus);
$gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
$gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
$gl-token-foreground-color: var(--gl-token-foreground-color);
$gl-token-background-color: var(--gl-token-background-color);
$gl-control-background-color-default: var(--gl-control-background-color-default);
......
src/tokens/contextual/toggle.tokens.json 0 → 100644
View file @ 492adadb
{
"toggle": {
"switch": {
"icon": {
"color": {
"unchecked": {
"default": {
"$value": "{action.strong.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the default state."
},
"hover": {
"$value": "{action.strong.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the hover state."
},
"focus": {
"$value": "{action.strong.neutral.background.color.focus}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the focus state."
},
"active": {
"$value": "{action.strong.neutral.background.color.active}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the active state."
}
},
"checked": {
"default": {
"$value": "{action.strong.confirm.background.color.default}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the default state."
},
"hover": {
"$value": "{action.strong.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the hover state."
},
"focus": {
"$value": "{action.strong.confirm.background.color.focus}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the focus state."
},
"active": {
"$value": "{action.strong.confirm.background.color.active}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the active state."
}
},
"disabled": {
"$value": "{action.disabled.background.color}",
"$type": "color",
"$description": "Used for the icon color of a disabled toggle switch."
}
}
}
}
}
}