action.border.radius
Used for the border radius of an action.
Figma: action-border-radius
CSS: var(--gl-action-border-radius)
SCSS: $gl-action-border-radius
border.radius.lg border.radius.lg
action.confirm.background.color.active
Used for the background of a confirm (positive) action in the active state.
Figma: action-confirm-background-color-active
CSS: var(--gl-action-confirm-background-color-active)
SCSS: $gl-action-confirm-background-color-active
color.alpha.dark.16 color.alpha.light.8
action.confirm.background.color.default
Used for the background of a confirm (positive) action in the default state.
Figma: action-confirm-background-color-default
CSS: var(--gl-action-confirm-background-color-default)
SCSS: $gl-action-confirm-background-color-default
color.alpha.0 color.alpha.0
action.confirm.background.color.focus
Used for the background of a confirm (positive) action in the focus state.
Figma: action-confirm-background-color-focus
CSS: var(--gl-action-confirm-background-color-focus)
SCSS: $gl-action-confirm-background-color-focus
action.confirm.background.color.hover action.confirm.background.color.hover
action.confirm.background.color.hover
Used for the background of a confirm (positive) action in the hover state.
Figma: action-confirm-background-color-hover
CSS: var(--gl-action-confirm-background-color-hover)
SCSS: $gl-action-confirm-background-color-hover
color.alpha.dark.6 color.alpha.light.16
action.confirm.border.color.active
Used for the border of a confirm action in the active state.
Figma: action-confirm-border-color-active
CSS: var(--gl-action-confirm-border-color-active)
SCSS: $gl-action-confirm-border-color-active
action.confirm.border.color.default action.confirm.border.color.default
action.confirm.border.color.default
Used for the border of a confirm action in the default state.
Figma: action-confirm-border-color-default
CSS: var(--gl-action-confirm-border-color-default)
SCSS: $gl-action-confirm-border-color-default
color.alpha.0 color.alpha.0
action.confirm.border.color.focus
Used for the border of a confirm action in the focus state.
Figma: action-confirm-border-color-focus
CSS: var(--gl-action-confirm-border-color-focus)
SCSS: $gl-action-confirm-border-color-focus
action.confirm.border.color.default action.confirm.border.color.default
action.confirm.border.color.hover
Used for the border of a confirm action in the hover state.
Figma: action-confirm-border-color-hover
CSS: var(--gl-action-confirm-border-color-hover)
SCSS: $gl-action-confirm-border-color-hover
action.confirm.border.color.default action.confirm.border.color.default
action.confirm.foreground.color.active
Used for the foreground of a confirm (positive) action in the active state.
Figma: action-confirm-foreground-color-active
CSS: var(--gl-action-confirm-foreground-color-active)
SCSS: $gl-action-confirm-foreground-color-active
color.neutral.1000 color.neutral.0
action.confirm.foreground.color.default
Used for the foreground of a confirm (positive) action in the default state.
Figma: action-confirm-foreground-color-default
CSS: var(--gl-action-confirm-foreground-color-default)
SCSS: $gl-action-confirm-foreground-color-default
color.neutral.800 color.neutral.50
action.confirm.foreground.color.focus
Used for the foreground of a confirm (positive) action in the focus state.
Figma: action-confirm-foreground-color-focus
CSS: var(--gl-action-confirm-foreground-color-focus)
SCSS: $gl-action-confirm-foreground-color-focus
action.confirm.foreground.color.hover action.confirm.foreground.color.hover
action.confirm.foreground.color.hover
Used for the foreground of a confirm (positive) action in the hover state.
Figma: action-confirm-foreground-color-hover
CSS: var(--gl-action-confirm-foreground-color-hover)
SCSS: $gl-action-confirm-foreground-color-hover
color.neutral.950 color.neutral.10
action.danger.background.color.active
Used for the background of a danger (destructive) action in the active state.
Figma: action-danger-background-color-active
CSS: var(--gl-action-danger-background-color-active)
SCSS: $gl-action-danger-background-color-active
rgba(174, 24, 0, 0.24) rgba(236, 89, 65, 0.16)
action.danger.background.color.default
Used for the background of a danger (destructive) action in the default state.
Figma: action-danger-background-color-default
CSS: var(--gl-action-danger-background-color-default)
SCSS: $gl-action-danger-background-color-default
rgba(245, 127, 108, 0) rgba(236, 89, 65, 0)
action.danger.background.color.focus
Used for the background of a danger (destructive) action in the focus state.
Figma: action-danger-background-color-focus
CSS: var(--gl-action-danger-background-color-focus)
SCSS: $gl-action-danger-background-color-focus
action.danger.background.color.hover action.danger.background.color.hover
action.danger.background.color.hover
Used for the background of a danger (destructive) action in the hover state.
Figma: action-danger-background-color-hover
CSS: var(--gl-action-danger-background-color-hover)
SCSS: $gl-action-danger-background-color-hover
rgba(245, 127, 108, 0.16) rgba(236, 89, 65, 0.4)
action.danger.border.color.active
Used for the border of a danger action in the active state.
Figma: action-danger-border-color-active
CSS: var(--gl-action-danger-border-color-active)
SCSS: $gl-action-danger-border-color-active
action.danger.border.color.default action.danger.border.color.default
action.danger.border.color.default
Used for the border of a danger action in the default state.
Figma: action-danger-border-color-default
CSS: var(--gl-action-danger-border-color-default)
SCSS: $gl-action-danger-border-color-default
color.alpha.0 color.alpha.0
action.danger.border.color.focus
Used for the border of a danger action in the focus state.
Figma: action-danger-border-color-focus
CSS: var(--gl-action-danger-border-color-focus)
SCSS: $gl-action-danger-border-color-focus
action.danger.border.color.default action.danger.border.color.default
action.danger.border.color.hover
Used for the border of a danger action in the hover state.
Figma: action-danger-border-color-hover
CSS: var(--gl-action-danger-border-color-hover)
SCSS: $gl-action-danger-border-color-hover
action.danger.border.color.default action.danger.border.color.default
action.danger.foreground.color.active
Used for the foreground of a danger (destructive) action in the active state.
Figma: action-danger-foreground-color-active
CSS: var(--gl-action-danger-foreground-color-active)
SCSS: $gl-action-danger-foreground-color-active
color.red.950 color.red.100
action.danger.foreground.color.default
Used for the foreground of a danger (destructive) action in the default state.
Figma: action-danger-foreground-color-default
CSS: var(--gl-action-danger-foreground-color-default)
SCSS: $gl-action-danger-foreground-color-default
color.red.600 color.red.200
action.danger.foreground.color.focus
Used for the foreground of a danger (destructive) action in the focus state.
Figma: action-danger-foreground-color-focus
CSS: var(--gl-action-danger-foreground-color-focus)
SCSS: $gl-action-danger-foreground-color-focus
action.danger.foreground.color.hover action.danger.foreground.color.hover
action.danger.foreground.color.hover
Used for the foreground of a danger (destructive) action in the hover state.
Figma: action-danger-foreground-color-hover
CSS: var(--gl-action-danger-foreground-color-hover)
SCSS: $gl-action-danger-foreground-color-hover
color.red.800 color.red.100
action.disabled.background.color
Used for the background of a disabled action.
Figma: action-disabled-background-color
CSS: var(--gl-action-disabled-background-color)
SCSS: $gl-action-disabled-background-color
color.neutral.50 color.neutral.900
action.disabled.border.color
Used for the border of a disabled action.
Figma: action-disabled-border-color
CSS: var(--gl-action-disabled-border-color)
SCSS: $gl-action-disabled-border-color
color.neutral.100 color.neutral.800
action.disabled.foreground.color
Used for the foreground of a disabled action.
Figma: action-disabled-foreground-color
CSS: var(--gl-action-disabled-foreground-color)
SCSS: $gl-action-disabled-foreground-color
color.neutral.400 color.neutral.500
action.neutral.background.color.active
Used for the background of a neutral action in the active state.
Figma: action-neutral-background-color-active
CSS: var(--gl-action-neutral-background-color-active)
SCSS: $gl-action-neutral-background-color-active
color.alpha.dark.16 color.alpha.light.8
action.neutral.background.color.default
Used for the background of a neutral action in the default state.
Figma: action-neutral-background-color-default
CSS: var(--gl-action-neutral-background-color-default)
SCSS: $gl-action-neutral-background-color-default
color.alpha.0 color.alpha.0
action.neutral.background.color.focus
Used for the background of a neutral action in the focus state.
Figma: action-neutral-background-color-focus
CSS: var(--gl-action-neutral-background-color-focus)
SCSS: $gl-action-neutral-background-color-focus
action.neutral.background.color.hover action.neutral.background.color.hover
action.neutral.background.color.hover
Used for the background of a neutral action in the hover state.
Figma: action-neutral-background-color-hover
CSS: var(--gl-action-neutral-background-color-hover)
SCSS: $gl-action-neutral-background-color-hover
color.alpha.dark.6 color.alpha.light.16
action.neutral.border.color.active
Used for the border of a neutral action in the active state.
Figma: action-neutral-border-color-active
CSS: var(--gl-action-neutral-border-color-active)
SCSS: $gl-action-neutral-border-color-active
action.neutral.border.color.default action.neutral.border.color.default
action.neutral.border.color.default
Used for the border of a neutral action in the default state.
Figma: action-neutral-border-color-default
CSS: var(--gl-action-neutral-border-color-default)
SCSS: $gl-action-neutral-border-color-default
color.alpha.0 color.alpha.0
action.neutral.border.color.focus
Used for the border of a neutral action in the focus state.
Figma: action-neutral-border-color-focus
CSS: var(--gl-action-neutral-border-color-focus)
SCSS: $gl-action-neutral-border-color-focus
action.neutral.border.color.default action.neutral.border.color.default
action.neutral.border.color.hover
Used for the border of a neutral action in the hover state.
Figma: action-neutral-border-color-hover
CSS: var(--gl-action-neutral-border-color-hover)
SCSS: $gl-action-neutral-border-color-hover
action.neutral.border.color.default action.neutral.border.color.default
action.neutral.foreground.color.active
Used for the foreground of a neutral action in the active state.
Figma: action-neutral-foreground-color-active
CSS: var(--gl-action-neutral-foreground-color-active)
SCSS: $gl-action-neutral-foreground-color-active
action.neutral.foreground.color.default action.neutral.foreground.color.default
action.neutral.foreground.color.default
Used for the foreground of a neutral action in the default state.
Figma: action-neutral-foreground-color-default
CSS: var(--gl-action-neutral-foreground-color-default)
SCSS: $gl-action-neutral-foreground-color-default
color.neutral.900 color.neutral.50
action.neutral.foreground.color.focus
Used for the foreground of a neutral action in the focus state.
Figma: action-neutral-foreground-color-focus
CSS: var(--gl-action-neutral-foreground-color-focus)
SCSS: $gl-action-neutral-foreground-color-focus
action.neutral.foreground.color.default action.neutral.foreground.color.default
action.neutral.foreground.color.hover
Used for the foreground of a neutral action in the hover state.
Figma: action-neutral-foreground-color-hover
CSS: var(--gl-action-neutral-foreground-color-hover)
SCSS: $gl-action-neutral-foreground-color-hover
action.neutral.foreground.color.default action.neutral.foreground.color.default
action.selected.background.color.active
Used for the background of a selected action in the active state.
Figma: action-selected-background-color-active
CSS: var(--gl-action-selected-background-color-active)
SCSS: $gl-action-selected-background-color-active
color.neutral.1000 color.neutral.0
action.selected.background.color.default
Used for the background of a selected action in the default state.
Figma: action-selected-background-color-default
CSS: var(--gl-action-selected-background-color-default)
SCSS: $gl-action-selected-background-color-default
color.neutral.800 color.neutral.50
action.selected.background.color.disabled
Used for the background of a disabled action that stays selected. Sits between the disabled background and the enabled selected background so the selected state keeps 3:1 contrast against the page while still reading as disabled.
Figma: action-selected-background-color-disabled
CSS: var(--gl-action-selected-background-color-disabled)
SCSS: $gl-action-selected-background-color-disabled
color.neutral.400 color.neutral.500
action.selected.background.color.focus
Used for the background of a selected action in the focus state.
Figma: action-selected-background-color-focus
CSS: var(--gl-action-selected-background-color-focus)
SCSS: $gl-action-selected-background-color-focus
action.selected.background.color.hover action.selected.background.color.hover
action.selected.background.color.hover
Used for the background of a selected action in the hover state.
Figma: action-selected-background-color-hover
CSS: var(--gl-action-selected-background-color-hover)
SCSS: $gl-action-selected-background-color-hover
color.neutral.950 color.neutral.10
action.selected.border.color.active
Used for the border of a selected action in the active state.
Figma: action-selected-border-color-active
CSS: var(--gl-action-selected-border-color-active)
SCSS: $gl-action-selected-border-color-active
action.selected.background.color.active action.selected.background.color.active
action.selected.border.color.default
Used for the border of a selected action in the default state.
Figma: action-selected-border-color-default
CSS: var(--gl-action-selected-border-color-default)
SCSS: $gl-action-selected-border-color-default
action.selected.background.color.default action.selected.background.color.default
action.selected.border.color.focus
Used for the border of a selected action in the focus state.
Figma: action-selected-border-color-focus
CSS: var(--gl-action-selected-border-color-focus)
SCSS: $gl-action-selected-border-color-focus
action.selected.background.color.focus action.selected.background.color.focus
action.selected.border.color.hover
Used for the border of a selected action in the hover state.
Figma: action-selected-border-color-hover
CSS: var(--gl-action-selected-border-color-hover)
SCSS: $gl-action-selected-border-color-hover
action.selected.background.color.hover action.selected.background.color.hover
action.selected.foreground.color.active
Used for the foreground of a selected action in the active state.
Figma: action-selected-foreground-color-active
CSS: var(--gl-action-selected-foreground-color-active)
SCSS: $gl-action-selected-foreground-color-active
action.selected.foreground.color.focus action.selected.foreground.color.focus 
