@salesforce-ux/design-system/design-tokens/extensions/ui-force/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
imports:
- ../../aliases/colors.yml
- ../../aliases/color-palettes.yml
props:
  COLOR_FOREGROUND_PRIMARY:
    value: '{!PALETTE_COOL_GRAY_1}'
  COLOR_CONTRAST_PRIMARY:
    value: '{!PALETTE_COOL_GRAY_2}'

  COLOR_BACKGROUND_ACTIONBAR_ICON_UTILITY:
    value: '{!PALETTE_COOL_GRAY_9}'
    comment: Background for utility icons that live in the action bar on mobile.
  COLOR_BACKGROUND_INDICATOR_DOT:
    value: '{!BISCAY}'
    comment: Color of the indicator dot.
  COLOR_BACKGROUND_SPINNER_DOT:
    value: '{!PALETTE_COOL_GRAY_7}'
    comment: Color of the spinner dot.
  COLOR_BACKGROUND_MODAL:
    value: '{!WHITE}'
    comment: Standard modal header
  COLOR_BACKGROUND_MODAL_BRAND:
    value: '{!SCIENCE_BLUE}'
    comment: Brandable modal header
  COLOR_BACKGROUND_NOTIFICATION_BADGE:
    value: '{!FLUSH_MAHOGANY}'
    comment: Notifications badge background color.
  COLOR_BACKGROUND_NOTIFICATION:
    value: '{!WHITE}'
    comment: Background color for notification list item.
  COLOR_BACKGROUND_NOTIFICATION_NEW:
    value: '{!PALETTE_COOL_GRAY_2}'
    comment: Background color for a new notification list item.
  COLOR_BACKGROUND_REMINDER:
    value: '{!LINK_WATER}'
    comment: Background color for reminder notification
    release: 2.5.0
  COLOR_BACKGROUND_REMINDER_HOVER:
    value: '{!WHITE}'
    comment: Background color for reminder notification on hover
  COLOR_BACKGROUND_POST:
    value: '{!PALETTE_COOL_GRAY_2}'
    comment: Background color of comment posts in the feed.
  COLOR_BACKGROUND_SHADE:
    value: '{!PALETTE_COOL_GRAY_4}'
    specificity: builders
    comment: Used as gray background when more contrast is desired.
  COLOR_BACKGROUND_STENCIL:
    value: '{!PALETTE_COOL_GRAY_3}'
    comment: Used as background for loading stencils on white background.
  COLOR_BACKGROUND_STENCIL_ALT:
    value: '{!PALETTE_COOL_GRAY_4}'
    comment: Used as an alternate background for loading stencils on gray backgrounds.

  COLOR_BACKGROUND_BACKDROP_TINT:
    value: '{!PALETTE_COOL_GRAY_2}'
    comment: The color of the mask overlay that provides user feedback on interaction.
  COLOR_BACKGROUND_SCROLLBAR:
    value: '{!PALETTE_COOL_GRAY_4}'
    comment: The background color of an internal scrollbar.
  COLOR_BACKGROUND_SCROLLBAR_TRACK:
    value: '{!PALETTE_COOL_GRAY_6}'
    comment: The background color of an internal scrollbar track.

  COLOR_BACKGROUND_TOGGLE:
    value: '{!PALETTE_COOL_GRAY_7}'
    comment: Toggle background color.
  COLOR_BACKGROUND_TOGGLE_DISABLED:
    value: '{!PALETTE_COOL_GRAY_7}'
    comment: Disabled toggle background color.
  COLOR_BACKGROUND_TOGGLE_HOVER:
    value: '{!PALETTE_COOL_GRAY_8}'
    comment: Hovered toggle background color.
  COLOR_BACKGROUND_MODAL_BUTTON:
    value: '{!BLACK_TRANSPARENT_07}'
    comment: Button backgrounds on modal headers
  COLOR_BACKGROUND_MODAL_BUTTON_ACTIVE:
    value: '{!BLACK_TRANSPARENT_16}'
    comment: Active button backgrounds on modal headers
  COLOR_BACKGROUND_INPUT:
    value: '{!WHITE}'
    comment: Default input field
  COLOR_BACKGROUND_INPUT_ACTIVE:
    value: '{!WHITE}'
    comment: Selected input field (when user has clicked or tabbed into field)
  COLOR_BACKGROUND_INPUT_CHECKBOX_DISABLED:
    value: '{!PALETTE_COOL_GRAY_5}'
    comment: Disabled checkboxes
  COLOR_BACKGROUND_INPUT_DISABLED:
    value: '{!PALETTE_COOL_GRAY_4}'
    comment: Disabled input
  COLOR_BACKGROUND_INPUT_ERROR:
    value: '{!PIPPIN}'
    comment: Background color for input field that has encountered an error.
  COLOR_BACKGROUND_PILL:
    value: '{!WHITE}'
    comment: Background color for pills.
  COLOR_BACKGROUND_IMAGE_OVERLAY:
    value: '{!BLACK_TRANSPARENT_40}'
    comment: Color of mask overlay that sits on top of an image when text is present.

  COLOR_BACKGROUND_TOAST:
    value: '{!PALETTE_COOL_GRAY_9}'
    comment: Background color for toast messaging.
  COLOR_BACKGROUND_TOAST_SUCCESS:
    value: '{!SALEM}'
    comment: Background color for success toast messaging.
  COLOR_BACKGROUND_TOAST_ERROR:
    value: '{!FLUSH_MAHOGANY}'
    comment: Background color for error toast messaging.
  COLOR_BACKGROUND_WARNING:
    value: '{!KOROMIKO}'
    comment: Color for UI elements that have to do with warning.
  COLOR_BACKGROUND_BUTTON_SUCCESS:
    value: '{!EMERALD}'
    comment: Background color for success buttons
  COLOR_BACKGROUND_BUTTON_SUCCESS_HOVER:
    value: '{!SALEM}'
    comment: Hovered background color for success buttons
  COLOR_BACKGROUND_BUTTON_SUCCESS_ACTIVE:
    value: '{!SALEM}'
    comment: Active background color for success buttons
  FILL_BRAND:
    value: '{!SCIENCE_BLUE}'
    comment: 'Brand fill color'
    cssProperties:
    - fill
  FILL_BRAND_HOVER:
    value: '{!ENDEAVOUR}'
    comment: 'Brand hover fill color'
    cssProperties:
    - fill
  FILL_BRAND_ACTIVE:
    value: '{!BISCAY}'
    comment: 'Brand active fill color'
    cssProperties:
    - fill
  FILL_HEADER_BUTTON:
    value: '{!PALETTE_GRAY_7}'
    comment: 'Header button icon color'
    cssProperties:
    - fill
  FILL_HEADER_BUTTON_HOVER:
    value: '{!ENDEAVOUR}'
    comment: 'Hovered header button icon color'
    cssProperties:
    - fill
  FILL_HEADER_BUTTON_FOCUS:
    value: '{!SCIENCE_BLUE}'
    comment: 'Focused header button icon color'
    cssProperties:
    - fill