Skip to content
Snippets Groups Projects
Commit 1fe63f60 authored by Scott de Jonge's avatar Scott de Jonge Committed by Paul Gascou-Vaillancourt
Browse files

feat(DesignTokens): refine action design tokens 

Remove action text and color tokens use foreground instead
Remove action selected design tokens
Remove action subtle/strong design tokens
parent 4ed497c3
No related branches found
No related tags found
1 merge request!4428feat(DesignTokens): refine action design tokens
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1108 additions and 5103 deletions
src/tokens/action.tokens.json
+ 101
− 654
View file @ 1fe63f60
{
"action": {
"background": {
"color": {
"disabled": {
"disabled": {
"foreground": {
"color": {
"$value": {
"default": "{color.neutral.400}",
"dark": "{color.neutral.500}"
},
"$type": "color",
"$description": "Used for the foreground of a disabled action."
}
},
"background": {
"color": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.900}"
......@@ -10,11 +20,9 @@
"$type": "color",
"$description": "Used for the background of a disabled action."
}
}
},
"border": {
"color": {
"disabled": {
},
"border": {
"color": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.800}"
......@@ -24,410 +32,94 @@
}
}
},
"text": {
"color": {
"disabled": {
"$value": {
"default": "{color.neutral.500}",
"dark": "{color.neutral.400}"
},
"$type": "color",
"$description": "Used for the text of a disabled action."
}
}
},
"icon": {
"color": {
"disabled": {
"$value": {
"default": "{color.neutral.400}",
"dark": "{color.neutral.500}"
},
"$type": "color",
"$description": "Used for the icon of a disabled action."
}
}
},
"neutral": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined neutral action in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined neutral action in the hover state."
},
"focus": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined neutral action in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.800}"
},
"$type": "color",
"$description": "Used for the background of an outlined neutral action in the active state."
},
"subtle": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the background of a borderless, subtle neutral action in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle neutral action in the hover state."
},
"focus": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle neutral action in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.800}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle neutral action in the active state."
}
},
"strong": {
"default": {
"$value": {
"default": "{color.neutral.500}",
"dark": "{color.neutral.400}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong neutral action in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.300}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong neutral action in the hover state."
},
"focus": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.300}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong neutral action in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.200}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong neutral action in the active state."
}
}
}
},
"border": {
"foreground": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.neutral.700}"
"default": "{color.neutral.900}",
"dark": "{color.neutral.50}"
},
"$type": "color",
"$description": "Used for the border of an outlined neutral action in the default state."
"$description": "Used for the foreground of outlined and borderless neutral actions."
},
"hover": {
"$value": {
"default": "{color.neutral.400}",
"dark": "{color.neutral.500}"
},
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the border of an outlined neutral action in the hover state."
"$description": "Used for the foreground of a neutral action in the hover state."
},
"focus": {
"$value": {
"default": "{color.neutral.400}",
"dark": "{color.neutral.500}"
},
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the border of an outlined neutral action in the focus state."
"$description": "Used for the foreground of a neutral action in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.300}"
},
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the border of an outlined neutral action in the active state."
},
"selected": {
"$value": {
"default": "{color.neutral.300}",
"dark": "{color.neutral.700}"
},
"$type": "color",
"$description": "Used for the border of a outlined neutral action when in a selected or current state."
},
"strong": {
"default": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.300}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong neutral action in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.100}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong neutral action in the hover state."
},
"focus": {
"$value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.100}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong neutral action in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.900}",
"dark": "{color.neutral.50}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong neutral action in the active state."
}
"$description": "Used for the foreground of a neutral action in the active state."
}
}
},
"text": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.900}",
"dark": "{color.neutral.50}"
"default": "rgba(164, 163, 168, 0.0)",
"dark": "rgba(137, 136, 141, 0.0)"
},
"$type": "color",
"$description": "Used for the text of outlined and borderless neutral actions."
"$description": "Used for the background of a neutral action in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.900}",
"dark": "{color.neutral.50}"
"default": "rgba(164, 163, 168, 0.16)",
"dark": "rgba(137, 136, 141, 0.4)"
},
"$type": "color",
"$description": "Used for the text of a neutral action in the hover state."
"$description": "Used for the background of a neutral action in the hover state."
},
"focus": {
"$value": {
"default": "{color.neutral.900}",
"dark": "{color.neutral.50}"
},
"$value": "{action.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the text of a neutral action in the focus state."
"$description": "Used for the background of a neutral action in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.900}",
"dark": "{color.neutral.50}"
},
"$type": "color",
"$description": "Used for the text of a neutral action in the active state."
},
"strong": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
"default": "rgba(83, 81, 88, 0.24)",
"dark": "rgba(137, 136, 141, 0.16)"
},
"$type": "color",
"$description": "Used for the text on a solid, strong neutral action background."
"$description": "Used for the background of a neutral action in the active state."
}
}
},
"icon": {
"border": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.500}",
"dark": "{color.neutral.400}"
},
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the icon of outlined and borderless neutral actions."
"$description": "Used for the border of a neutral action in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.200}"
},
"$value": "{action.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the icon of outlined and borderless neutral actions in the hover state."
"$description": "Used for the border of a neutral action in the hover state."
},
"focus": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.200}"
},
"$value": "{action.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the icon of outlined and borderless neutral actions in the focus state."
"$description": "Used for the border of a neutral action in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.900}",
"dark": "{color.neutral.50}"
},
"$type": "color",
"$description": "Used for the icon of outlined and borderless neutral actions in the active state."
},
"strong": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
},
"$value": "{action.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the icon on a solid, strong neutral action background."
"$description": "Used for the border of a neutral action in the active state."
}
}
}
},
"confirm": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.50}",
"dark": "{color.blue.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.blue.50}",
"dark": "{color.blue.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.100}",
"dark": "{color.blue.800}"
},
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) action in the active state."
},
"subtle": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the background of a borderless, subtle confirm (positive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.50}",
"dark": "{color.blue.900}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle confirm (positive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.blue.50}",
"dark": "{color.blue.900}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle confirm (positive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.100}",
"dark": "{color.blue.800}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle confirm (positive) action in the active state."
}
},
"strong": {
"default": {
"$value": {
"default": "{color.blue.500}",
"dark": "{color.blue.400}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong confirm (positive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.600}",
"dark": "{color.blue.300}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong confirm (positive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.blue.600}",
"dark": "{color.blue.300}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong confirm (positive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.blue.200}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong confirm (positive) action in the active state."
},
"selected": {
"$value": {
"default": "{color.blue.500}",
"dark": "{color.blue.400}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong confirm (positive) action when in a selected or current state."
}
}
}
},
"border": {
"foreground": {
"color": {
"default": {
"$value": {
......@@ -435,7 +127,7 @@
"dark": "{color.blue.400}"
},
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) action in the default state."
"$description": "Used for the foreground of a confirm (positive) action in the default state."
},
"hover": {
"$value": {
......@@ -443,15 +135,12 @@
"dark": "{color.blue.200}"
},
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) action in the hover state."
"$description": "Used for the foreground of a confirm (positive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.blue.200}"
},
"$value": "{action.confirm.foreground.color.hover}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) action in the focus state."
"$description": "Used for the foreground of a confirm (positive) action in the focus state."
},
"active": {
"$value": {
......@@ -459,244 +148,70 @@
"dark": "{color.blue.50}"
},
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) action in the active state."
},
"strong": {
"default": {
"$value": {
"default": "{color.blue.600}",
"dark": "{color.blue.300}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong confirm (positive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.800}",
"dark": "{color.blue.100}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong confirm (positive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.blue.800}",
"dark": "{color.blue.100}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong confirm (positive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.900}",
"dark": "{color.blue.50}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong confirm (positive) action in the active state."
},
"selected": {
"$value": {
"default": "{color.blue.600}",
"dark": "{color.blue.300}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong confirm (positive) action when in a selected or current state."
}
"$description": "Used for the foreground of a confirm (positive) action in the active state."
}
}
},
"text": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.blue.500}",
"dark": "{color.blue.400}"
"default": "rgba(99, 166, 233, 0.0)",
"dark": "rgba(66, 143, 220, 0.0)"
},
"$type": "color",
"$description": "Used for the text of a confirm (positive) action in the default state."
"$description": "Used for the background of a confirm (positive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.blue.200}"
"default": "rgba(99, 166, 233, 0.16)",
"dark": "rgba(66, 143, 220, 0.4)"
},
"$type": "color",
"$description": "Used for the text of a confirm (positive) action in the hover state."
"$description": "Used for the background of a confirm (positive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.blue.200}"
},
"$value": "{action.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the text of a confirm (positive) action in the focus state."
"$description": "Used for the background of a confirm (positive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.900}",
"dark": "{color.blue.50}"
},
"$type": "color",
"$description": "Used for the text of a confirm (positive) action in the active state."
},
"strong": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
"default": "rgba(11, 92, 173, 0.24)",
"dark": "rgba(66, 143, 220, 0.16)"
},
"$type": "color",
"$description": "Used for the text on a solid, strong confirm (positive) action background."
"$description": "Used for the background of a confirm (positive) action in the active state."
}
}
},
"icon": {
"border": {
"color": {
"default": {
"$value": {
"default": "{color.blue.500}",
"dark": "{color.blue.400}"
},
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the icon of a confirm (positive) action in the default state."
"$description": "Used for the border of a confirm action in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.blue.200}"
},
"$value": "{action.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the icon of a confirm (positive) action in the hover state."
"$description": "Used for the border of a confirm action in the hover state."
},
"focus": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.blue.200}"
},
"$value": "{action.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the icon of a confirm (positive) action in the focus state."
"$description": "Used for the border of a confirm action in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.900}",
"dark": "{color.blue.50}"
},
"$type": "color",
"$description": "Used for the icon of a confirm (positive) action in the active state."
},
"strong": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
},
"$value": "{action.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the icon on a solid, strong confirm (positive) action background."
"$description": "Used for the border of a confirm action in the active state."
}
}
}
},
"danger": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.red.50}",
"dark": "{color.red.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.red.50}",
"dark": "{color.red.900}"
},
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.red.100}",
"dark": "{color.red.800}"
},
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) action in the active state."
},
"subtle": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the background of a borderless, subtle danger (destructive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.red.50}",
"dark": "{color.red.900}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle danger (destructive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.red.50}",
"dark": "{color.red.900}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle danger (destructive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.red.100}",
"dark": "{color.red.800}"
},
"$type": "color",
"$description": "Used for the background of a borderless, subtle danger (destructive) action in the active state."
}
},
"strong": {
"default": {
"$value": {
"default": "{color.red.500}",
"dark": "{color.red.400}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong danger (destructive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.red.600}",
"dark": "{color.red.300}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong danger (destructive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.red.600}",
"dark": "{color.red.300}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong danger (destructive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.red.800}",
"dark": "{color.red.100}"
},
"$type": "color",
"$description": "Used for the background of a solid, strong danger (destructive) action in the active state."
}
}
}
},
"border": {
"foreground": {
"color": {
"default": {
"$value": {
......@@ -704,7 +219,7 @@
"dark": "{color.red.400}"
},
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) action in the default state."
"$description": "Used for the foreground of a danger (destructive) action in the default state."
},
"hover": {
"$value": {
......@@ -712,15 +227,12 @@
"dark": "{color.red.200}"
},
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) action in the hover state."
"$description": "Used for the foreground of a danger (destructive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.200}"
},
"$value": "{action.danger.foreground.color.hover}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) action in the focus state."
"$description": "Used for the foreground of a danger (destructive) action in the focus state."
},
"active": {
"$value": {
......@@ -728,129 +240,64 @@
"dark": "{color.red.50}"
},
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) action in the active state."
},
"strong": {
"default": {
"$value": {
"default": "{color.red.600}",
"dark": "{color.red.300}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong danger (destructive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.red.800}",
"dark": "{color.red.100}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong danger (destructive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.red.800}",
"dark": "{color.red.100}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong danger (destructive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.red.900}",
"dark": "{color.red.50}"
},
"$type": "color",
"$description": "Used for the border of a solid, strong danger (destructive) action in the active state."
}
"$description": "Used for the foreground of a danger (destructive) action in the active state."
}
}
},
"text": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.red.500}",
"dark": "{color.red.400}"
"default": "rgba(245, 127, 108, 0.0)",
"dark": "rgba(236, 89, 65, 0.0)"
},
"$type": "color",
"$description": "Used for the text of a danger (destructive) action in the default state."
"$description": "Used for the background of a danger (destructive) action in the default state."
},
"hover": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.200}"
"default": "rgba(245, 127, 108, 0.16)",
"dark": "rgba(236, 89, 65, 0.4)"
},
"$type": "color",
"$description": "Used for the text of a danger (destructive) action in the hover state."
"$description": "Used for the background of a danger (destructive) action in the hover state."
},
"focus": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.200}"
},
"$value": "{action.danger.background.color.hover}",
"$type": "color",
"$description": "Used for the text of a danger (destructive) action in the focus state."
"$description": "Used for the background of a danger (destructive) action in the focus state."
},
"active": {
"$value": {
"default": "{color.red.900}",
"dark": "{color.red.50}"
"default": "rgba(174, 24, 0, 0.24)",
"dark": "rgba(236, 89, 65, 0.16)"
},
"$type": "color",
"$description": "Used for the text of a danger (destructive) action in the active state."
},
"strong": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the text on a solid, strong danger (destructive) action background."
"$description": "Used for the background of a danger (destructive) action in the active state."
}
}
},
"icon": {
"border": {
"color": {
"default": {
"$value": {
"default": "{color.red.500}",
"dark": "{color.red.400}"
},
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the icon of a danger (destructive) action in the default state."
"$description": "Used for the border of a danger action in the default state."
},
"hover": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.200}"
},
"$value": "{action.danger.border.color.default}",
"$type": "color",
"$description": "Used for the icon of a danger (destructive) action in the hover state."
"$description": "Used for the border of a danger action in the hover state."
},
"focus": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.200}"
},
"$value": "{action.danger.border.color.default}",
"$type": "color",
"$description": "Used for the icon of a danger (destructive) action in the focus state."
"$description": "Used for the border of a danger action in the focus state."
},
"active": {
"$value": {
"default": "{color.red.900}",
"dark": "{color.red.50}"
},
"$type": "color",
"$description": "Used for the icon of a danger (destructive) action in the active state."
},
"strong": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
},
"$value": "{action.danger.border.color.default}",
"$type": "color",
"$description": "Used for the icon on a solid, strong danger (destructive) action background."
"$description": "Used for the border of a danger action in the active state."
}
}
}
......
src/tokens/build/css/tokens.css
+ 39
− 97
View file @ 1fe63f60
This diff is collapsed.
src/tokens/build/css/tokens.dark.css
+ 39
− 97
View file @ 1fe63f60
This diff is collapsed.
src/tokens/build/js/tokens.dark.js
+ 39
− 97
View file @ 1fe63f60
This diff is collapsed.
src/tokens/build/js/tokens.js
+ 39
− 97
View file @ 1fe63f60
......@@ -3,103 +3,45 @@
* Do not edit directly
*/
export const GL_ACTION_BACKGROUND_COLOR_DISABLED = '#ececef'; // Used for the background of a disabled action.
export const GL_ACTION_BORDER_COLOR_DISABLED = '#dcdcde'; // Used for the border of a disabled action.
export const GL_ACTION_TEXT_COLOR_DISABLED = '#737278'; // Used for the text of a disabled action.
export const GL_ACTION_ICON_COLOR_DISABLED = '#89888d'; // Used for the icon of a disabled action.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the background of an outlined neutral action in the default state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = '#ececef'; // Used for the background of an outlined neutral action in the hover state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#ececef'; // Used for the background of an outlined neutral action in the focus state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of an outlined neutral action in the active state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle neutral action in the default state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_HOVER = '#ececef'; // Used for the background of a borderless, subtle neutral action in the hover state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_FOCUS = '#ececef'; // Used for the background of a borderless, subtle neutral action in the focus state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#dcdcde'; // Used for the background of a borderless, subtle neutral action in the active state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_DEFAULT = '#737278'; // Used for the background of a solid, strong neutral action in the default state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_HOVER = '#626168'; // Used for the background of a solid, strong neutral action in the hover state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_FOCUS = '#626168'; // Used for the background of a solid, strong neutral action in the focus state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_ACTIVE = '#4c4b51'; // Used for the background of a solid, strong neutral action in the active state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = '#bfbfc3'; // Used for the border of an outlined neutral action in the default state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = '#89888d'; // Used for the border of an outlined neutral action in the hover state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = '#89888d'; // Used for the border of an outlined neutral action in the focus state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = '#626168'; // Used for the border of an outlined neutral action in the active state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_SELECTED = '#a4a3a8'; // Used for the border of a outlined neutral action when in a selected or current state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_DEFAULT = '#626168'; // Used for the border of a solid, strong neutral action in the default state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_HOVER = '#3a383f'; // Used for the border of a solid, strong neutral action in the hover state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_FOCUS = '#3a383f'; // Used for the border of a solid, strong neutral action in the focus state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_ACTIVE = '#28272d'; // Used for the border of a solid, strong neutral action in the active state.
export const GL_ACTION_NEUTRAL_TEXT_COLOR_DEFAULT = '#28272d'; // Used for the text of outlined and borderless neutral actions.
export const GL_ACTION_NEUTRAL_TEXT_COLOR_HOVER = '#28272d'; // Used for the text of a neutral action in the hover state.
export const GL_ACTION_NEUTRAL_TEXT_COLOR_FOCUS = '#28272d'; // Used for the text of a neutral action in the focus state.
export const GL_ACTION_NEUTRAL_TEXT_COLOR_ACTIVE = '#28272d'; // Used for the text of a neutral action in the active state.
export const GL_ACTION_NEUTRAL_TEXT_COLOR_STRONG = '#fff'; // Used for the text on a solid, strong neutral action background.
export const GL_ACTION_NEUTRAL_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of outlined and borderless neutral actions.
export const GL_ACTION_NEUTRAL_ICON_COLOR_HOVER = '#4c4b51'; // Used for the icon of outlined and borderless neutral actions in the hover state.
export const GL_ACTION_NEUTRAL_ICON_COLOR_FOCUS = '#4c4b51'; // Used for the icon of outlined and borderless neutral actions in the focus state.
export const GL_ACTION_NEUTRAL_ICON_COLOR_ACTIVE = '#28272d'; // Used for the icon of outlined and borderless neutral actions in the active state.
export const GL_ACTION_NEUTRAL_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong neutral action background.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the background of an outlined confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = '#e9f3fc'; // Used for the background of an outlined confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = '#e9f3fc'; // Used for the background of an outlined confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#cbe2f9'; // Used for the background of an outlined confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_HOVER = '#e9f3fc'; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_FOCUS = '#e9f3fc'; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#cbe2f9'; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_DEFAULT = '#1f75cb'; // Used for the background of a solid, strong confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_HOVER = '#1068bf'; // Used for the background of a solid, strong confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_FOCUS = '#1068bf'; // Used for the background of a solid, strong confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_ACTIVE = '#0b5cad'; // Used for the background of a solid, strong confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_SELECTED = '#1f75cb'; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT = '#1f75cb'; // Used for the border of an outlined confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of an outlined confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS = '#0b5cad'; // Used for the border of an outlined confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE = '#033464'; // Used for the border of an outlined confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_DEFAULT = '#1068bf'; // Used for the border of a solid, strong confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_HOVER = '#064787'; // Used for the border of a solid, strong confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_FOCUS = '#064787'; // Used for the border of a solid, strong confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_ACTIVE = '#033464'; // Used for the border of a solid, strong confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_SELECTED = '#1068bf'; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
export const GL_ACTION_CONFIRM_TEXT_COLOR_DEFAULT = '#1f75cb'; // Used for the text of a confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_TEXT_COLOR_HOVER = '#0b5cad'; // Used for the text of a confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_TEXT_COLOR_FOCUS = '#0b5cad'; // Used for the text of a confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_TEXT_COLOR_ACTIVE = '#033464'; // Used for the text of a confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_TEXT_COLOR_STRONG = '#fff'; // Used for the text on a solid, strong confirm (positive) action background.
export const GL_ACTION_CONFIRM_ICON_COLOR_DEFAULT = '#1f75cb'; // Used for the icon of a confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_ICON_COLOR_HOVER = '#0b5cad'; // Used for the icon of a confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_ICON_COLOR_FOCUS = '#0b5cad'; // Used for the icon of a confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_ICON_COLOR_ACTIVE = '#033464'; // Used for the icon of a confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong confirm (positive) action background.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the background of an outlined danger (destructive) action in the default state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER = '#fcf1ef'; // Used for the background of an outlined danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = '#fcf1ef'; // Used for the background of an outlined danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE = '#fdd4cd'; // Used for the background of an outlined danger (destructive) action in the active state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_HOVER = '#fcf1ef'; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_FOCUS = '#fcf1ef'; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#fdd4cd'; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_DEFAULT = '#dd2b0e'; // Used for the background of a solid, strong danger (destructive) action in the default state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_HOVER = '#c91c00'; // Used for the background of a solid, strong danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_FOCUS = '#c91c00'; // Used for the background of a solid, strong danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_ACTIVE = '#8d1300'; // Used for the background of a solid, strong danger (destructive) action in the active state.
export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = '#dd2b0e'; // Used for the border of an outlined danger (destructive) action in the default state.
export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of an outlined danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = '#ae1800'; // Used for the border of an outlined danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = '#660e00'; // Used for the border of an outlined danger (destructive) action in the active state.
export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_DEFAULT = '#c91c00'; // Used for the border of a solid, strong danger (destructive) action in the default state.
export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_HOVER = '#8d1300'; // Used for the border of a solid, strong danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_FOCUS = '#8d1300'; // Used for the border of a solid, strong danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_ACTIVE = '#660e00'; // Used for the border of a solid, strong danger (destructive) action in the active state.
export const GL_ACTION_DANGER_TEXT_COLOR_DEFAULT = '#dd2b0e'; // Used for the text of a danger (destructive) action in the default state.
export const GL_ACTION_DANGER_TEXT_COLOR_HOVER = '#ae1800'; // Used for the text of a danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_TEXT_COLOR_FOCUS = '#ae1800'; // Used for the text of a danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_TEXT_COLOR_ACTIVE = '#660e00'; // Used for the text of a danger (destructive) action in the active state.
export const GL_ACTION_DANGER_TEXT_COLOR_STRONG = '#fff'; // Used for the text on a solid, strong danger (destructive) action background.
export const GL_ACTION_DANGER_ICON_COLOR_DEFAULT = '#dd2b0e'; // Used for the icon of a danger (destructive) action in the default state.
export const GL_ACTION_DANGER_ICON_COLOR_HOVER = '#ae1800'; // Used for the icon of a danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_ICON_COLOR_FOCUS = '#ae1800'; // Used for the icon of a danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_ICON_COLOR_ACTIVE = '#660e00'; // Used for the icon of a danger (destructive) action in the active state.
export const GL_ACTION_DANGER_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong danger (destructive) action background.
export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#89888d'; // Used for the foreground of a disabled action.
export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#ececef'; // Used for the background of a disabled action.
export const GL_ACTION_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled action.
export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of outlined and borderless neutral actions.
export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#28272d'; // Used for the foreground of a neutral action in the hover state.
export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#28272d'; // Used for the foreground of a neutral action in the focus state.
export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#28272d'; // Used for the foreground of a neutral action in the active state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = 'rgba(164, 163, 168, 0.0)'; // Used for the background of a neutral action in the default state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = 'rgba(164, 163, 168, 0.16)'; // Used for the background of a neutral action in the hover state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = 'rgba(164, 163, 168, 0.16)'; // Used for the background of a neutral action in the focus state.
export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = 'rgba(83, 81, 88, 0.24)'; // Used for the background of a neutral action in the active state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a neutral action in the default state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a neutral action in the hover state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a neutral action in the focus state.
export const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a neutral action in the active state.
export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#1f75cb'; // Used for the foreground of a confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_HOVER = '#0b5cad'; // Used for the foreground of a confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS = '#0b5cad'; // Used for the foreground of a confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#033464'; // Used for the foreground of a confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = 'rgba(99, 166, 233, 0.0)'; // Used for the background of a confirm (positive) action in the default state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = 'rgba(99, 166, 233, 0.16)'; // Used for the background of a confirm (positive) action in the hover state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = 'rgba(99, 166, 233, 0.16)'; // Used for the background of a confirm (positive) action in the focus state.
export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE = 'rgba(11, 92, 173, 0.24)'; // Used for the background of a confirm (positive) action in the active state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a confirm action in the default state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a confirm action in the hover state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a confirm action in the focus state.
export const GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a confirm action in the active state.
export const GL_ACTION_DANGER_FOREGROUND_COLOR_DEFAULT = '#dd2b0e'; // Used for the foreground of a danger (destructive) action in the default state.
export const GL_ACTION_DANGER_FOREGROUND_COLOR_HOVER = '#ae1800'; // Used for the foreground of a danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_FOREGROUND_COLOR_FOCUS = '#ae1800'; // Used for the foreground of a danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_FOREGROUND_COLOR_ACTIVE = '#660e00'; // Used for the foreground of a danger (destructive) action in the active state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = 'rgba(245, 127, 108, 0.0)'; // Used for the background of a danger (destructive) action in the default state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER = 'rgba(245, 127, 108, 0.16)'; // Used for the background of a danger (destructive) action in the hover state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = 'rgba(245, 127, 108, 0.16)'; // Used for the background of a danger (destructive) action in the focus state.
export const GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE = 'rgba(174, 24, 0, 0.24)'; // Used for the background of a danger (destructive) action in the active state.
export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a danger action in the default state.
export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a danger action in the hover state.
export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger action in the focus state.
export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger action in the active state.
export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background color.
export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
......
src/tokens/build/json/tokens.dark.json
+ 378
− 1896
View file @ 1fe63f60
This diff is collapsed.
src/tokens/build/json/tokens.json
+ 380
− 1898
View file @ 1fe63f60
This diff is collapsed.
src/tokens/build/scss/_tokens.dark.scss
+ 39
− 97
View file @ 1fe63f60
This diff is collapsed.
src/tokens/build/scss/_tokens.scss
+ 39
− 97
View file @ 1fe63f60
This diff is collapsed.
src/tokens/build/scss/_tokens_custom_properties.scss
+ 15
− 73
View file @ 1fe63f60
......@@ -3,103 +3,45 @@
* Do not edit directly
*/
$gl-action-background-color-disabled: var(--gl-action-background-color-disabled);
$gl-action-border-color-disabled: var(--gl-action-border-color-disabled);
$gl-action-text-color-disabled: var(--gl-action-text-color-disabled);
$gl-action-icon-color-disabled: var(--gl-action-icon-color-disabled);
$gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
$gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
$gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
$gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
$gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
$gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);
$gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-active);
$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
$gl-action-neutral-background-color-subtle-default: var(--gl-action-neutral-background-color-subtle-default);
$gl-action-neutral-background-color-subtle-hover: var(--gl-action-neutral-background-color-subtle-hover);
$gl-action-neutral-background-color-subtle-focus: var(--gl-action-neutral-background-color-subtle-focus);
$gl-action-neutral-background-color-subtle-active: var(--gl-action-neutral-background-color-subtle-active);
$gl-action-neutral-background-color-strong-default: var(--gl-action-neutral-background-color-strong-default);
$gl-action-neutral-background-color-strong-hover: var(--gl-action-neutral-background-color-strong-hover);
$gl-action-neutral-background-color-strong-focus: var(--gl-action-neutral-background-color-strong-focus);
$gl-action-neutral-background-color-strong-active: var(--gl-action-neutral-background-color-strong-active);
$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
$gl-action-neutral-border-color-selected: var(--gl-action-neutral-border-color-selected);
$gl-action-neutral-border-color-strong-default: var(--gl-action-neutral-border-color-strong-default);
$gl-action-neutral-border-color-strong-hover: var(--gl-action-neutral-border-color-strong-hover);
$gl-action-neutral-border-color-strong-focus: var(--gl-action-neutral-border-color-strong-focus);
$gl-action-neutral-border-color-strong-active: var(--gl-action-neutral-border-color-strong-active);
$gl-action-neutral-text-color-default: var(--gl-action-neutral-text-color-default);
$gl-action-neutral-text-color-hover: var(--gl-action-neutral-text-color-hover);
$gl-action-neutral-text-color-focus: var(--gl-action-neutral-text-color-focus);
$gl-action-neutral-text-color-active: var(--gl-action-neutral-text-color-active);
$gl-action-neutral-text-color-strong: var(--gl-action-neutral-text-color-strong);
$gl-action-neutral-icon-color-default: var(--gl-action-neutral-icon-color-default);
$gl-action-neutral-icon-color-hover: var(--gl-action-neutral-icon-color-hover);
$gl-action-neutral-icon-color-focus: var(--gl-action-neutral-icon-color-focus);
$gl-action-neutral-icon-color-active: var(--gl-action-neutral-icon-color-active);
$gl-action-neutral-icon-color-strong: var(--gl-action-neutral-icon-color-strong);
$gl-action-confirm-foreground-color-default: var(--gl-action-confirm-foreground-color-default);
$gl-action-confirm-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover);
$gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus);
$gl-action-confirm-foreground-color-active: var(--gl-action-confirm-foreground-color-active);
$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
$gl-action-confirm-background-color-subtle-default: var(--gl-action-confirm-background-color-subtle-default);
$gl-action-confirm-background-color-subtle-hover: var(--gl-action-confirm-background-color-subtle-hover);
$gl-action-confirm-background-color-subtle-focus: var(--gl-action-confirm-background-color-subtle-focus);
$gl-action-confirm-background-color-subtle-active: var(--gl-action-confirm-background-color-subtle-active);
$gl-action-confirm-background-color-strong-default: var(--gl-action-confirm-background-color-strong-default);
$gl-action-confirm-background-color-strong-hover: var(--gl-action-confirm-background-color-strong-hover);
$gl-action-confirm-background-color-strong-focus: var(--gl-action-confirm-background-color-strong-focus);
$gl-action-confirm-background-color-strong-active: var(--gl-action-confirm-background-color-strong-active);
$gl-action-confirm-background-color-strong-selected: var(--gl-action-confirm-background-color-strong-selected);
$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
$gl-action-confirm-border-color-strong-default: var(--gl-action-confirm-border-color-strong-default);
$gl-action-confirm-border-color-strong-hover: var(--gl-action-confirm-border-color-strong-hover);
$gl-action-confirm-border-color-strong-focus: var(--gl-action-confirm-border-color-strong-focus);
$gl-action-confirm-border-color-strong-active: var(--gl-action-confirm-border-color-strong-active);
$gl-action-confirm-border-color-strong-selected: var(--gl-action-confirm-border-color-strong-selected);
$gl-action-confirm-text-color-default: var(--gl-action-confirm-text-color-default);
$gl-action-confirm-text-color-hover: var(--gl-action-confirm-text-color-hover);
$gl-action-confirm-text-color-focus: var(--gl-action-confirm-text-color-focus);
$gl-action-confirm-text-color-active: var(--gl-action-confirm-text-color-active);
$gl-action-confirm-text-color-strong: var(--gl-action-confirm-text-color-strong);
$gl-action-confirm-icon-color-default: var(--gl-action-confirm-icon-color-default);
$gl-action-confirm-icon-color-hover: var(--gl-action-confirm-icon-color-hover);
$gl-action-confirm-icon-color-focus: var(--gl-action-confirm-icon-color-focus);
$gl-action-confirm-icon-color-active: var(--gl-action-confirm-icon-color-active);
$gl-action-confirm-icon-color-strong: var(--gl-action-confirm-icon-color-strong);
$gl-action-danger-foreground-color-default: var(--gl-action-danger-foreground-color-default);
$gl-action-danger-foreground-color-hover: var(--gl-action-danger-foreground-color-hover);
$gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-focus);
$gl-action-danger-foreground-color-active: var(--gl-action-danger-foreground-color-active);
$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
$gl-action-danger-background-color-subtle-default: var(--gl-action-danger-background-color-subtle-default);
$gl-action-danger-background-color-subtle-hover: var(--gl-action-danger-background-color-subtle-hover);
$gl-action-danger-background-color-subtle-focus: var(--gl-action-danger-background-color-subtle-focus);
$gl-action-danger-background-color-subtle-active: var(--gl-action-danger-background-color-subtle-active);
$gl-action-danger-background-color-strong-default: var(--gl-action-danger-background-color-strong-default);
$gl-action-danger-background-color-strong-hover: var(--gl-action-danger-background-color-strong-hover);
$gl-action-danger-background-color-strong-focus: var(--gl-action-danger-background-color-strong-focus);
$gl-action-danger-background-color-strong-active: var(--gl-action-danger-background-color-strong-active);
$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
$gl-action-danger-border-color-strong-default: var(--gl-action-danger-border-color-strong-default);
$gl-action-danger-border-color-strong-hover: var(--gl-action-danger-border-color-strong-hover);
$gl-action-danger-border-color-strong-focus: var(--gl-action-danger-border-color-strong-focus);
$gl-action-danger-border-color-strong-active: var(--gl-action-danger-border-color-strong-active);
$gl-action-danger-text-color-default: var(--gl-action-danger-text-color-default);
$gl-action-danger-text-color-hover: var(--gl-action-danger-text-color-hover);
$gl-action-danger-text-color-focus: var(--gl-action-danger-text-color-focus);
$gl-action-danger-text-color-active: var(--gl-action-danger-text-color-active);
$gl-action-danger-text-color-strong: var(--gl-action-danger-text-color-strong);
$gl-action-danger-icon-color-default: var(--gl-action-danger-icon-color-default);
$gl-action-danger-icon-color-hover: var(--gl-action-danger-icon-color-hover);
$gl-action-danger-icon-color-focus: var(--gl-action-danger-icon-color-focus);
$gl-action-danger-icon-color-active: var(--gl-action-danger-icon-color-active);
$gl-action-danger-icon-color-strong: var(--gl-action-danger-icon-color-strong);
$gl-background-color-default: var(--gl-background-color-default);
$gl-background-color-subtle: var(--gl-background-color-subtle);
$gl-background-color-strong: var(--gl-background-color-strong);
......
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