@salesforce-ux/design-system/design-tokens/primitive/border-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: border-color
  cssProperties:
  - 'border*'
  - box-shadow
  - outline
  - outline-color
  scope: global
  primitive: true
imports:
- ../aliases/colors.yml
- ../aliases/color-palettes.yml
props:
  COLOR_BORDER:
    value: '{!PALETTE_NEUTRAL_90}'
    comment: Default border color for UI elements.
    cssProperties:
    - 'border*'
    - box-shadow
    - 'background*'
    access: global
  COLOR_BORDER_BRAND:
    value: '{!PALETTE_BLUE_60}'
    comment: Our product brand blue.
    access: global
  COLOR_BORDER_BRAND_DARK:
    value: '{!PALETTE_BLUE_30}'
    comment: 'Our product brand blue, darkened to meet accessibility color contrast ratios with white text.'
  COLOR_BORDER_CUSTOMER:
    value: '{!PALETTE_ORANGE_70}'
    comment: Border color for UI elements related to the concept of an external user or customer.
  COLOR_BORDER_DESTRUCTIVE:
    value: '{!PALETTE_RED_50}'
    comment: Border color for UI elements that have to do with destructive actions.
  COLOR_BORDER_DESTRUCTIVE_HOVER:
    value: '{!PALETTE_RED_40}'
    comment: Hover border color for UI elements that have to do with destructive actions.
  COLOR_BORDER_DESTRUCTIVE_ACTIVE:
    value: '{!PALETTE_RED_30}'
    comment: Active border color for UI elements that have to do with destructive actions.
  COLOR_BORDER_INFO:
    value: '{!PALETTE_NEUTRAL_50}'
    comment: 'Border color for UI elements related to providing neutral information (not error, success, or warning).'
  COLOR_BORDER_ERROR:
    value: '{!PALETTE_RED_50}'
    comment: Border color for UI elements that have to do with errors.
    access: global
  COLOR_BORDER_ERROR_ALT:
    value: '{!PALETTE_RED_70}'
    comment: Alternative border color for UI elements related to errors.
  COLOR_BORDER_ERROR_DARK:
    value: '{!PALETTE_RED_70}'
    comment: Dark alternative border color for UI elements related to errors.
  COLOR_BORDER_OFFLINE:
    value: '{!PALETTE_NEUTRAL_30}'
    comment: Border color for UI elements related to the offline state.
  COLOR_BORDER_SUCCESS:
    value: '{!PALETTE_GREEN_80}'
    comment: Border color for UI elements that have to do with success.
    access: global
  COLOR_BORDER_SUCCESS_DARK:
    value: '{!PALETTE_GREEN_50}'
    comment: Dark alternative border color for UI elements that have to do with success.
  COLOR_BORDER_WARNING:
    value: '{!PALETTE_ORANGE_70}'
    comment: Border color for UI elements that have to do with warnings.
    access: global
  COLOR_BORDER_INVERSE:
    value: '{!PALETTE_BLUE_10}'
    comment: Border color to match UI elements using color-background-inverse.
  COLOR_BORDER_SEPARATOR:
    value: '{!PALETTE_NEUTRAL_95}'
    comment: Lightest separator color - used as default separator on white backgrounds.
    access: global
  COLOR_BORDER_SEPARATOR_ALT:
    value: '{!PALETTE_NEUTRAL_90}'
    comment: Medium separator color - used as default separator on light gray backgrounds.
    access: global
  COLOR_BORDER_SEPARATOR_ALT_2:
    value: '{!PALETTE_NEUTRAL_80}'
    comment: Darkest separator color - used as an alternate separator color when more differentiation is desired.
  COLOR_BORDER_SEPARATOR_INVERSE:
    value: '{!PALETTE_BLUE_20}'
    comment: 'Used as a separator on dark backgrounds, such as stage left navigation.'
    access: global
  COLOR_BORDER_ROW_SELECTED:
    value: '{!PALETTE_BLUE_50}'
    comment: Used as the border color for selected rows or items on list-like components.
    access: global
  COLOR_BORDER_ROW_SELECTED_HOVER:
    value: '{!PALETTE_BLUE_60}'
    comment: Used as the border color for the hover state on selected rows or items on list-like components.
    access: global
  COLOR_BORDER_SELECTION:
    value: '{!PALETTE_BLUE_50}'
    specificity: builders
    comment: Used to delineate the boundary of a selected component. Specific to builders.
  COLOR_BORDER_SELECTION_HOVER:
    value: '{!PALETTE_BLUE_60}'
    specificity: builders
    comment: Used to delineate the boundary of a component that is being hovered over. Specific to builders.
  COLOR_BORDER_SELECTION_ACTIVE:
    value: '{!PALETTE_NEUTRAL_95}'
    specificity: builders
    comment: Used to delineate the boundary of a component that is being clicked. Specific to builders.