@salesforce-ux/design-system/design-tokens/primitive/background-color.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: background-color
  cssProperties:
  - 'background*'
  - 'border*'
  - box-shadow
  scope: global
  primitive: true
imports:
- ../aliases/colors.yml
- ../aliases/color-palettes.yml
props:
  COLOR_BACKGROUND:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Default background color for the whole app.
    release: 1.0.0
    access: global
  COLOR_BACKGROUND_LIGHT:
    value: '{!PALETTE_NEUTRAL_100}'
    comment: Light variant of COLOR_BACKGROUND.
    release: 2.8.0
  COLOR_BACKGROUND_DARK:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Dark variant of COLOR_BACKGROUND.
    release: 2.8.0

  COLOR_BACKGROUND_ALT:
    value: '{!WHITE}'
    comment: Second default background color for the app.
    release: 1.0.0
    access: global
  COLOR_BACKGROUND_ALT_INVERSE:
    value: '{!PALETTE_BLUE_20}'
    comment: Alternative background color for dark portions of the app.
    release: 1.0.0
    access: global
  COLOR_BACKGROUND_INVERSE:
    value: '{!PALETTE_BLUE_10}'
    comment: Default background color for dark portions of the app (like Stage Left or tooltips).
    release: 1.0.0
    access: global
  COLOR_BACKGROUND_INVERSE_LIGHT:
    value: '{!PALETTE_BLUE_20}'
    comment: Light variant of COLOR_BACKGROUND_INVERSE.
    release: 2.8.0

  COLOR_BACKGROUND_ROW_HOVER:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Used as the background color for the hover state on rows or items on list-like components.
    access: global
  COLOR_BACKGROUND_ROW_ACTIVE:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Used as the background color for the active state on rows or items on list-like components.
    access: global
  COLOR_BACKGROUND_ROW_SELECTED:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Used as the background color for selected rows or items on list-like components.
    access: global
  COLOR_BACKGROUND_ROW_NEW:
    value: '{!PALETTE_GREEN_90}'
    comment: Used as the background color for the new state on rows or items on list-like components.
    access: global

  COLOR_BACKGROUND_CUSTOMER:
    value: '{!PALETTE_ORANGE_70}'
    comment: Background color for UI elements related to the concept of an external user or customer.
  COLOR_BACKGROUND_HIGHLIGHT:
    value: '{!LEMON_CHIFFON}'
    comment: Background color for highlighting UI elements.
    access: global
  COLOR_BACKGROUND_HIGHLIGHT_SEARCH:
    value: '{!GORSE}'
    comment: Background color for highlighting text in search results.

  COLOR_BACKGROUND_SELECTION:
    value: '{!PALETTE_BLUE_90}'
    comment: Background color for text selected with a mouse.

  COLOR_BACKGROUND_STENCIL:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Used as background for loading stencils on white background.
    access: global
  COLOR_BACKGROUND_STENCIL_ALT:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Used as an alternate background for loading stencils on gray backgrounds.
    access: global
  COLOR_BACKGROUND_BACKDROP:
    value: '{!WHITE_TRANSPARENT_75}'
    comment: The color of the mask overlay that appears when you enter a modal state.

  COLOR_BRAND:
    value: '{!PALETTE_BLUE_60}'
    comment: Our product brand blue.
    access: global
  COLOR_BRAND_DARK:
    value: '{!PALETTE_BLUE_50}'
    comment: 'Our product brand blue, darkened to meet accessibility color contrast ratios with white text.'
    access: global

  COLOR_BRAND_DARKER:
    value: '{!PALETTE_BLUE_30}'
    comment: 'Our product brand blue, darkened even further.'

  COLOR_BACKGROUND_DESTRUCTIVE:
    value: '{!PALETTE_RED_40}'
    comment: Color for UI elements related to destructive actions.
  COLOR_BACKGROUND_DESTRUCTIVE_HOVER:
    value: '{!PALETTE_RED_30}'
    comment: Hover color for UI elements related to destructive actions.
  COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE:
    value: '{!PALETTE_RED_30}'
    comment: Active color for UI elements related to destructive actions.
  COLOR_BACKGROUND_INFO:
    value: '{!PALETTE_NEUTRAL_50}'
    comment: 'Background color for UI elements related to providing neutral information (not error, success, or warning).'
  COLOR_BACKGROUND_ERROR:
    value: '{!PALETTE_RED_60}'
    comment: Color for UI elements related to errors.
  COLOR_BACKGROUND_ERROR_DARK:
    value: '{!PALETTE_RED_40}'
    comment: Dark color for UI elements related to errors. Accessible with white text.
  COLOR_BACKGROUND_OFFLINE:
    value: '{!PALETTE_NEUTRAL_30}'
    comment: Color for UI elements related to the offline state.
  COLOR_BACKGROUND_SUCCESS:
    value: '{!PALETTE_GREEN_70}'
    comment: Color for UI elements that have to do with success.
  COLOR_BACKGROUND_SUCCESS_DARK:
    value: '{!PALETTE_GREEN_50}'
    comment: Dark color for UI elements that have to do with success. Accessible with white text.
  COLOR_BACKGROUND_SUCCESS_DARKER:
    value: '{!PALETTE_GREEN_30}'
    comment: Darker color for UI elements that have to do with success. Accessible with white text.
  COLOR_BACKGROUND_WARNING:
    value: '{!PALETTE_ORANGE_70}'
    comment: Color for UI elements that have to do with warning.
  COLOR_BACKGROUND_WARNING_DARK:
    value: '{!PALETTE_ORANGE_70}'
    comment: Dark Color for UI elements that have to do with warning.