@salesforce-ux/design-system/design-tokens/primitive/text-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: text-color
  cssProperties:
  - color
  - fill
  scope: global
  primitive: true
imports:
- ../aliases/colors.yml
- ../aliases/color-palettes.yml
props:
  COLOR_TEXT_DEFAULT:
    value: '{!PALETTE_NEUTRAL_10}'
    comment: Body text color
    access: global
  COLOR_TEXT_BRAND_PRIMARY:
    value: '{!WHITE}'
    comment: Text color found on any primary brand color

  COLOR_TEXT_ACTION_LABEL:
    value: '{!PALETTE_NEUTRAL_30}'
    comment: Action label text color
    access: global
  COLOR_TEXT_ACTION_LABEL_ACTIVE:
    value: '{!PALETTE_NEUTRAL_10}'
    comment: Action label active text color
    access: global
  COLOR_TEXT_BRAND:
    value: '{!PALETTE_BLUE_60}'
    comment: Our product brand blue.
    access: global

  COLOR_TEXT_CUSTOMER:
    value: '{!PALETTE_ORANGE_70}'
    comment: Customer text used in anchor subtitle

  COLOR_TEXT_ERROR:
    value: '{!PALETTE_RED_50}'
    comment: Error text for inputs and error misc
    access: global
  COLOR_TEXT_INVERSE:
    value: '{!WHITE}'
    comment: Inverse text color for dark backgrounds
    access: global
  COLOR_TEXT_INVERSE_WEAK:
    value: '{!PALETTE_NEUTRAL_70}'
    comment: Weak inverse text color for dark backgrounds
    access: global
  COLOR_TEXT_LINK:
    value: '{!BRAND_TEXT_LINK}'
    comment: Link text (508)
    access: global
  COLOR_TEXT_LINK_ACTIVE:
    value: '{!PALETTE_BLUE_20}'
    comment: Active link text
    access: global
  COLOR_TEXT_LINK_DISABLED:
    value: '{!PALETTE_BLUE_20}'
    comment: Disabled link text
    access: global
  COLOR_TEXT_LINK_FOCUS:
    value: '{!PALETTE_BLUE_30}'
    comment: Focus link text
    access: global
  COLOR_TEXT_LINK_HOVER:
    value: '{!BRAND_TEXT_LINK_ACTIVE}'
    cssProperties:
      - color
      - 'border*'
    comment: Hover link text
    access: global

  COLOR_TEXT_LINK_INVERSE:
    value: '{!WHITE}'
    comment: Link color on dark background
    access: global
  COLOR_TEXT_LINK_INVERSE_HOVER:
    value: '{!WHITE_TRANSPARENT_75}'
    comment: Link color on dark background - hover state
    access: global
  COLOR_TEXT_LINK_INVERSE_ACTIVE:
    value: '{!WHITE_TRANSPARENT_50}'
    comment: Link color on dark background - active state
    access: global
  COLOR_TEXT_LINK_INVERSE_DISABLED:
    value: '{!WHITE_TRANSPARENT_15}'
    comment: Link color on dark background - disabled state
    access: global

  COLOR_TEXT_WARNING:
    value: '{!PALETTE_ORANGE_70}'
    comment: Color for texts or icons that are related to warnings on a dark background.

  COLOR_TEXT_WARNING_ALT:
    value: '{!PALETTE_YELLOW_40}'
    comment: Color for texts that are related to warnings on a light background.

  COLOR_TEXT_WEAK:
    value: '{!PALETTE_NEUTRAL_30}'
    comment: Color for text that is purposefully de-emphasized to create visual hierarchy.
    access: global

  COLOR_TEXT_ICON_DEFAULT:
    value: '{!PALETTE_NEUTRAL_50}'
    comment: Default icon color.
    access: global
  COLOR_TEXT_LABEL:
    value: '{!PALETTE_NEUTRAL_30}'
    comment: Text color for field labels.
    access: global
  COLOR_TEXT_PLACEHOLDER:
    value: '{!PALETTE_NEUTRAL_50}'
    comment: Input placeholder text.
    access: global
  COLOR_TEXT_PLACEHOLDER_INVERSE:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Input placeholder text on dark backgrounds.
    access: global
  COLOR_TEXT_REQUIRED:
    value: '{!PALETTE_RED_50}'
    comment: Color of required field marker.
    access: global
  COLOR_TEXT_SUCCESS:
    value: '{!PALETTE_GREEN_50}'
    comment: Text color for success text.
  COLOR_TEXT_SUCCESS_INVERSE:
    value: '{!PALETTE_GREEN_70}'
    comment: Text color for success text on dark backgrounds.
  COLOR_TEXT_DESTRUCTIVE:
    value: '{!PALETTE_RED_50}'
    comment: Text color for destructive actions
  COLOR_TEXT_DESTRUCTIVE_HOVER:
    value: '{!PALETTE_RED_40}'
    comment: Text color for destructive actions - hover state