@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_BACKGROUND_SPINNER_DOT:
    value: '{!PALETTE_NEUTRAL_70}'
    comment: Color of the spinner dot.

  COLOR_BACKGROUND_NOTIFICATION_BADGE:
    value: '{!PALETTE_RED_50}'
    comment: Notifications badge background color.
    access: global
  COLOR_BACKGROUND_NOTIFICATION_NEW:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Background color for a new notification list item.
    access: global
  COLOR_BACKGROUND_REMINDER:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Background color for reminder notification
    release: 2.5.0
  COLOR_BACKGROUND_REMINDER_HOVER:
    value: '{!PALETTE_NEUTRAL_100}'
    comment: Background color for reminder notification on hover
  COLOR_BACKGROUND_POST:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Background color of comment posts in the feed.

  COLOR_BACKGROUND_BACKDROP_TINT:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: The color of the mask overlay that provides user feedback on interaction.

  COLOR_BACKGROUND_SCROLLBAR:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: The background color of an internal scrollbar.
    access: global
  COLOR_BACKGROUND_SCROLLBAR_TRACK:
    value: '{!PALETTE_NEUTRAL_80}'
    comment: The background color of an internal scrollbar track.
    access: global
  COLOR_BACKGROUND_TOGGLE:
    value: '{!PALETTE_NEUTRAL_70}'
    comment: Toggle background color.
  COLOR_BACKGROUND_TOGGLE_DISABLED:
    value: '{!PALETTE_NEUTRAL_70}'
    comment: Disabled toggle background color.
  COLOR_BACKGROUND_TOGGLE_HOVER:
    value: '{!PALETTE_NEUTRAL_60}'
    comment: Hovered toggle background color.

  COLOR_BACKGROUND_INPUT:
    value: '{!PALETTE_NEUTRAL_100}'
    comment: Default input field
    access: global
  COLOR_BACKGROUND_INPUT_ACTIVE:
    value: '{!PALETTE_NEUTRAL_100}'
    comment: Selected input field (when user has clicked or tabbed into field)
    access: global
  COLOR_BACKGROUND_INPUT_CHECKBOX_DISABLED:
    value: '{!PALETTE_NEUTRAL_80}'
    comment: Disabled checkboxes
    access: global
  COLOR_BACKGROUND_INPUT_DISABLED:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Disabled input
    access: global
  COLOR_BACKGROUND_INPUT_ERROR:
    value: '{!PALETTE_PINK_90}'
    comment: Background color for input field that has encountered an error.
    access: global
  COLOR_BACKGROUND_PILL:
    value: '{!PALETTE_NEUTRAL_100}'
    comment: Background color for pills.
    access: global
  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_BUTTON_SUCCESS:
    value: '{!PALETTE_GREEN_70}'
    comment: Background color for success buttons
  COLOR_BACKGROUND_BUTTON_SUCCESS_HOVER:
    value: '{!PALETTE_GREEN_50}'
    comment: Hovered background color for success buttons
  COLOR_BACKGROUND_BUTTON_SUCCESS_ACTIVE:
    value: '{!PALETTE_GREEN_50}'
    comment: Active background color for success buttons
  COLOR_BACKGROUND_TOAST:
    value: '{!PALETTE_NEUTRAL_50}'
    comment: Background color for toast messaging.
    access: global
  COLOR_BACKGROUND_TOAST_SUCCESS:
    value: '{!PALETTE_GREEN_50}'
    comment: Background color for success toast messaging.
    access: global
  COLOR_BACKGROUND_TOAST_ERROR:
    value: '{!PALETTE_RED_50}'
    comment: Background color for error toast messaging.
    access: global
  FILL_HEADER_BUTTON:
    value: '{!PALETTE_NEUTRAL_70}'
    comment: 'Header button icon color'
    cssProperties:
    - fill
  FILL_HEADER_BUTTON_HOVER:
    value: '{!PALETTE_BLUE_30}'
    comment: 'Hovered header button icon color'
    cssProperties:
    - fill
  FILL_HEADER_BUTTON_FOCUS:
    value: '{!PALETTE_BLUE_50}'
    comment: 'Focused header button icon color'
    cssProperties:
    - fill