@salesforce-ux/design-system/ui/components/buttons/tokens/color.yml

Salesforce Lightning Design System

global:
  scope: component
  type: color
  category: background-color
  cssProperties:
  - background*
  - border*
  - box-shadow
imports:
- "../../../../design-tokens/aliases/colors.yml"
- "../../../../design-tokens/aliases/color-palettes.yml"
props:
  BUTTON_COLOR_BACKGROUND_PRIMARY:
    value: '{!PALETTE_NEUTRAL_100}'
  BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY:
    value: '{!PALETTE_BLUE_50}'
    deprecated: true
    comment: 'Use BRAND_ACCESSIBLE to pick up theming capabilities'
  BUTTON_COLOR_BACKGROUND_SECONDARY:
    value: '{!WHITE_TRANSPARENT_80}'
    deprecated: true
  COLOR_BACKGROUND_BUTTON_BRAND:
    value: '{!PALETTE_BLUE_50}'
    comment: Brandable primary button
    access: global
  COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE:
    value: '{!PALETTE_BLUE_20}'
    comment: Brandable primary button - active state
    access: global
  COLOR_BACKGROUND_BUTTON_BRAND_HOVER:
    value: '{!PALETTE_BLUE_30}'
    comment: Brandable primary button - hover state
    access: global
  COLOR_BACKGROUND_BUTTON_BRAND_DISABLED:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Brandable primary button - disabled state
    access: global
  COLOR_BACKGROUND_BUTTON_DEFAULT:
    value: '{!PALETTE_NEUTRAL_100}'
    comment: Default secondary button
    access: global
  COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Default secondary button - hover state
    access: global
  COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Default secondary button - focus state
    access: global
  COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Default secondary button - active state
    access: global
  COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED:
    value: '{!PALETTE_NEUTRAL_100}'
    comment: Default secondary button - disabled state
    access: global
  COLOR_BACKGROUND_BUTTON_ICON:
    value: '{!TRANSPARENT}'
    comment: Background color for icon-only button
    access: global
  COLOR_BACKGROUND_BUTTON_ICON_HOVER:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Background color for icon-only button - hover state
    access: global
  COLOR_BACKGROUND_BUTTON_ICON_FOCUS:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Background color for icon-only button - focus state
    access: global
  COLOR_BACKGROUND_BUTTON_ICON_ACTIVE:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Background color for icon-only button - active state
    access: global
  COLOR_BACKGROUND_BUTTON_ICON_DISABLED:
    value: '{!PALETTE_NEUTRAL_100}'
    comment: Background color for icon-only button - disabled state
    access: global
  COLOR_BACKGROUND_BUTTON_INVERSE:
    value: '{!TRANSPARENT}'
    comment: Button backgrounds on inverse/dark backgrounds
    access: global
  COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE:
    value: '{!BLACK_TRANSPARENT_24}'
    comment: Active button backgrounds on inverse backgrounds on mobile
    access: global
  COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED:
    value: '{!TRANSPARENT}'
    comment: Disabled button backgrounds on inverse/dark backgrounds
    access: global