@salesforce-ux/design-system/design-tokens/primitive/palette-colors.yml

Salesforce Lightning Design System

# Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
# Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

global:
  type: color
  category: color
  cssProperties:
  - background-color
  - 'border*color'
  - box-shadow
  - fill
  - color
  scope: global
  primitive: true
imports:
- ../aliases/color-palettes.yml
props:
  COLOR_GRAY_1:
    value: "{!PALETTE_GRAY_1}"
    comment: "Gray Color 1"
    release: 2.5.0
  COLOR_GRAY_2:
    value: "{!PALETTE_GRAY_2}"
    comment: "Gray Color 2"
    release: 2.5.0
  COLOR_GRAY_3:
    value: "{!PALETTE_GRAY_3}"
    comment: "Gray Color 3"
    release: 2.5.0
  COLOR_GRAY_4:
    value: "{!PALETTE_GRAY_4}"
    comment: "Gray Color 4"
    release: 2.5.0
  COLOR_GRAY_5:
    value: "{!PALETTE_GRAY_5}"
    comment: "Gray Color 5"
    release: 2.5.0
  COLOR_GRAY_6:
    value: "{!PALETTE_GRAY_6}"
    comment: "Gray Color 6"
    release: 2.5.0
  COLOR_GRAY_7:
    value: "{!PALETTE_GRAY_7}"
    comment: "Gray Color 7"
    release: 2.5.0
  COLOR_GRAY_8:
    value: "{!PALETTE_GRAY_8}"
    comment: "Gray Color 8"
    release: 2.5.0
  COLOR_GRAY_9:
    value: "{!PALETTE_GRAY_9}"
    comment: "Gray Color 9"
    release: 2.5.0
  COLOR_GRAY_10:
    value: "{!PALETTE_GRAY_10}"
    comment: "Gray Color 10"
    release: 2.5.0
  COLOR_GRAY_11:
    value: "{!PALETTE_GRAY_11}"
    comment: "Gray Color 11"
    release: 2.5.0
  COLOR_GRAY_12:
    value: "{!PALETTE_GRAY_12}"
    comment: "Gray Color 12"
    release: 2.5.0
  COLOR_GRAY_13:
    value: "{!PALETTE_GRAY_13}"
    comment: "Gray Color 13"
    release: 2.5.0
  BRAND_PRIMARY:
    value: "{!BRAND_PRIMARY}"
    comment: "Primary brand color"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_PRIMARY_ACTIVE:
    value: "{!BRAND_PRIMARY_ACTIVE}"
    comment: "Active / Hover state of BRAND_PRIMARY"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_PRIMARY_TRANSPARENT:
    value: "rgba(21,137,238,0.1)"
    comment: "Transparent value of BRAND_PRIMARY"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_PRIMARY_TRANSPARENT_10:
    value: "rgba(21,137,238,0.1)"
    comment: "Transparent value of BRAND_PRIMARY at 10%"
    themeable: true
    release: 2.6.0
  BRAND_PRIMARY_TRANSPARENT_40:
    value: "rgba(21,137,238,0.4)"
    comment: "Transparent value of BRAND_PRIMARY at 40%"
    themeable: true
    release: 2.6.0
  BRAND_LIGHT:
    value: "{!BRAND_LIGHT}"
    comment: "Light variant of BRAND that is accessible with dark colors"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_LIGHT_ACTIVE:
    value: "{!BRAND_LIGHT_ACTIVE}"
    comment: "Active / Hover state of BRAND_LIGHT"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_DARK:
    value: "{!BRAND_DARK}"
    comment: "Dark variant of BRAND that is accessible with light colors"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_DARK_ACTIVE:
    value: "{!BRAND_DARK_ACTIVE}"
    comment: "Active / Hover state of BRAND_DARK"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_ACCESSIBLE:
    value: "{!BRAND_ACCESSIBLE}"
    comment: "Dark variant of BRAND that is accessible with white"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_ACCESSIBLE_ACTIVE:
    value: "{!BRAND_ACCESSIBLE_ACTIVE}"
    comment: "Active / Hover state of BRAND_A11Y"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_DISABLED:
    value: "{!BRAND_DISABLED}"
    comment: "Disabled state of BRAND_A11Y"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_CONTRAST:
    value: "{!BRAND_CONTRAST}"
    comment: "Variant of BRAND that is accessible with BRAND"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_CONTRAST_ACTIVE:
    value: "{!BRAND_CONTRAST_ACTIVE}"
    comment: "Active / Hover state of BRAND_CONTRAST"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_BACKGROUND_PRIMARY:
    value: "{!BRAND_BACKGROUND_PRIMARY}"
    comment: "Primary page background color"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_BACKGROUND_PRIMARY_TRANSPARENT:
    value: "rgba(176,196,223,0)"
    comment: "These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug"
    themeable: true
    release: 2.6.0
  BRAND_BACKGROUND_DARK:
    value: "{!BRAND_BACKGROUND_DARK}"
    comment: "Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_BACKGROUND_DARK_TRANSPARENT:
    value: "rgba(1,68,134,0)"
    comment: "These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug"
    themeable: true
    release: 2.6.0
  BRAND_HEADER:
    value: "{!PALETTE_GRAY_1}"
    comment: "Background color a branded app header"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_WEAK:
    value: "#919191"
    comment: "Weak contrast ratio, useful for iconography"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_WEAK_ACTIVE:
    value: "#818181"
    comment: "Active / Hover state of BRAND_HEADER_CONTRAST_WEAK"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_WEAK_DISABLED:
    value: "rgba(166,166,166,0.25)"
    comment: "Disabled state of BRAND_HEADER_CONTRAST_WEAK"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_ICON:
    value: "#919191"
    comment: "Icons of BRAND_HEADER that is accessible with BRAND_HEADER"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_ICON_ACTIVE:
    value: "#818181"
    comment: "Active / Hover state of BRAND_HEADER_ICON"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_ICON_DISABLED:
    value: "rgba(145,145,145,0.25)"
    comment: "Disabled state of BRAND_HEADER_ICON"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST:
    value: "#5e5e5e"
    comment: "Variant of BRAND_HEADER that is accessible with BRAND_HEADER"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_ACTIVE:
    value: "#505050"
    comment: "Active / Hover state of BRAND_HEADER_CONTRAST"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_INVERSE:
    value: "#ffffff"
    comment: "Variant of BRAND_HEADER that is accessible with BRAND_HEADER"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_INVERSE_ACTIVE:
    value: "#eeeeee"
    comment: "Active / Hover state of BRAND_HEADER_CONTRAST"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_COOL:
    value: "{!PALETTE_BLUE_30}"
    comment: "Variant of BRAND_HEADER_CONTRAST that provides a cool color"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_COOL_ACTIVE:
    value: "{!PALETTE_BLUE_30}"
    comment: "Active / Hover state of BRAND_HEADER_CONTRAST_COOL"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_WARM:
    value: "{!PALETTE_RED_40}"
    comment: "Variant of BRAND_HEADER_CONTRAST that provides a warm color"
    themeable: true
    release: 2.6.0
  BRAND_HEADER_CONTRAST_WARM_ACTIVE:
    value: "{!PALETTE_RED_40}"
    comment: "Active / Hover state of BRAND_HEADER_CONTRAST_WARM"
    themeable: true
    release: 2.6.0
  BRAND_TEXT_LINK:
    value: "{!BRAND_TEXT_LINK}"
    comment: "Primary text link brand color"
    themeable: true
    release: 2.6.0
    access: global
  BRAND_TEXT_LINK_ACTIVE:
    value: "{!BRAND_TEXT_LINK_ACTIVE}"
    comment: "Active / Hover state of BRAND_TEXT_LINK"
    themeable: true
    release: 2.6.0
    access: global