@salesforce-ux/design-system/design-tokens/dist/global-base.styl

Salesforce Lightning Design System

// Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.
$font-family = 'Salesforce Sans', Arial, sans-serif
// Used as the background color for the active state on rows or items on list-like components.
$color-background-row-active = rgb(242, 242, 243)
// Light variant of COLOR_BACKGROUND.
$color-background-light = rgb(255, 255, 255)
// Used as the background color for the hover state on rows or items on list-like components.
$color-background-row-hover = rgb(249, 249, 250)
// Dark color for UI elements related to errors. Accessible with white text.
$color-background-error-dark = rgb(194, 57, 52)
// Background color for UI elements related to providing neutral information (not error, success, or warning).
$color-background-info = rgb(107, 109, 112)
// Alternative background color for dark portions of the app.
$color-background-alt-inverse = rgb(22, 50, 92)
// Used as the background color for the new state on rows or items on list-like components.
$color-background-row-new = rgb(217, 255, 223)
// Dark color for UI elements that have to do with success. Accessible with white text.
$color-background-success-dark = rgb(4, 132, 75)
// Used as background for loading stencils on white background.
$color-background-stencil = rgb(242, 242, 243)
// Color for UI elements that have to do with warning.
$color-background-warning = rgb(255, 183, 93)
// Background color for highlighting text in search results.
$color-background-highlight-search = rgb(255, 240, 63)
// Hover color for UI elements related to destructive actions.
$color-background-destructive-hover = rgb(166, 26, 20)
// Default background color for the whole app.
$color-background = rgb(249, 249, 250)
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
$color-brand-dark = rgb(0, 112, 210)
// The color of the mask overlay that appears when you enter a modal state.
$color-background-backdrop = rgba(255, 255, 255, 0.75)
// Light variant of COLOR_BACKGROUND.
$color-background-dark = rgb(233, 234, 236)
// Our product brand blue.
$color-brand = rgb(21, 137, 238)
// Color for UI elements related to destructive actions.
$color-background-destructive = rgb(194, 57, 52)
// Color for UI elements that have to do with success.
$color-background-success = rgb(75, 202, 129)
// Dark Color for UI elements that have to do with warning.
$color-background-warning-dark = rgb(255, 158, 44)
// Color for UI elements related to the offline state.
$color-background-offline = rgb(62, 64, 65)
// Used as an alternate background for loading stencils on gray backgrounds.
$color-background-stencil-alt = rgb(233, 234, 236)
// Light variant of COLOR_BACKGROUND_INVERSE.
$color-background-inverse-light = rgb(22, 50, 92)
// Background color for UI elements related to the concept of an external user or customer.
$color-background-customer = rgb(255, 154, 60)
// Color for UI elements related to errors.
$color-background-error = rgb(212, 80, 76)
// Second default background color for the app.
$color-background-alt = rgb(255, 255, 255)
// Darker color for UI elements that have to do with success. Accessible with white text.
$color-background-success-darker = rgb(0, 74, 41)
// Used as the background color for selected rows or items on list-like components.
$color-background-row-selected = rgb(233, 234, 236)
// Our product brand blue, darkened even further.
$color-brand-darker = rgb(0, 95, 178)
// Background color for text selected with a mouse.
$color-background-selection = rgb(216, 237, 255)
// Active color for UI elements related to destructive actions.
$color-background-destructive-active = rgb(135, 5, 0)
// Default background color for dark portions of the app (like Stage Left or tooltips).
$color-background-inverse = rgb(6, 28, 63)
// Background color for highlighting UI elements.
$color-background-highlight = rgb(250, 255, 189)
// Dark alternative border color for UI elements related to errors.
$color-border-error-dark = rgb(234, 130, 136)
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
$color-border-brand-dark = rgb(0, 112, 210)
// Border color for UI elements related to providing neutral information (not error, success, or warning).
$color-border-info = rgb(107, 109, 112)
// Border color for UI elements that have to do with warnings.
$color-border-warning = rgb(255, 183, 93)
// Hover border color for UI elements that have to do with destructive actions.
$color-border-destructive-hover = rgb(166, 26, 20)
// Default border color for UI elements.
$color-border = rgb(217, 219, 221)
// Dark alternative border color for UI elements that have to do with success.
$color-border-success-dark = rgb(4, 132, 75)
// Border color for UI elements that have to do with destructive actions.
$color-border-destructive = rgb(194, 57, 52)
// Darkest separator color - used as an alternate separator color when more differentiation is desired.
$color-border-separator-alt-2 = rgb(196, 198, 202)
// Border color for UI elements related to the offline state.
$color-border-offline = rgb(62, 64, 65)
// Border color for UI elements that have to do with success.
$color-border-success = rgb(75, 202, 129)
// Lightest separator color - used as default separator on white backgrounds.
$color-border-separator = rgb(249, 249, 250)
// Our product brand blue.
$color-border-brand = rgb(21, 137, 238)
// Used to delineate the boundary of a component that is being clicked. Specific to builders.
$color-border-selection-active = rgb(249, 249, 250)
// Border color for UI elements that have to do with errors.
$color-border-error = rgb(194, 57, 52)
// Used to delineate the boundary of a component that is being hovered over. Specific to builders.
$color-border-selection-hover = rgb(21, 137, 238)
// Used as the border color for the hover state on selected rows or items on list-like components.
$color-border-row-selected-hover = rgb(21, 137, 238)
// Border color for UI elements related to the concept of an external user or customer.
$color-border-customer = rgb(255, 154, 60)
// Used to delineate the boundary of a selected component. Specific to builders.
$color-border-selection = rgb(0, 112, 210)
// Used as the border color for selected rows or items on list-like components.
$color-border-row-selected = rgb(0, 112, 210)
// Medium separator color - used as default separator on light gray backgrounds.
$color-border-separator-alt = rgb(217, 219, 221)
// Border color to match UI elements using color-background-inverse.
$color-border-inverse = rgb(6, 28, 63)
// Active border color for UI elements that have to do with destructive actions.
$color-border-destructive-active = rgb(135, 5, 0)
// Alternative border color for UI elements related to errors.
$color-border-error-alt = rgb(234, 130, 136)
// Used as a separator on dark backgrounds, such as stage left navigation.
$color-border-separator-inverse = rgb(42, 66, 108)
$border-radius-small = 0.125rem
// Icons in lists, record home icon, unbound input elements
$border-radius-medium = 0.25rem
$border-radius-large = 0.5rem
$border-radius-pill = 15rem
// Circle for global use, action icon bgd shape
$border-radius-circle = 50%
// Shadow for drag-n-drop.
$shadow-drag = 0 2px 4px 0 rgba(0, 0, 0, 0.40)
// Shadow for drop down.
$shadow-drop-down = 0 2px 3px 0 rgba(0, 0, 0, 0.16)
// Shadow for header.
$shadow-header = 0 2px 4px rgba(0, 0, 0, 0.07)
$font-family-text = 'Salesforce Sans', Arial, sans-serif
$font-family-heading = 'Salesforce Sans', Arial, sans-serif
$font-family-monospace = Consolas, Menlo, Monaco, Courier, monospace
// Constant typography token for font size 1
$font-size-1 = 0.625rem
// Constant typography token for font size 2
$font-size-2 = 0.75rem
// Constant typography token for font size 3
$font-size-3 = 0.8125rem
// Variable typography token for font size 10
$var-font-size-10 = 2rem
// Constant typography token for font size 4
$font-size-4 = 0.875rem
// Variable typography token for font size 11
$var-font-size-11 = 2.625rem
// Constant typography token for font size 5
$font-size-5 = 1rem
// Constant typography token for font size 6
$font-size-6 = 1.125rem
// Constant typography token for font size 7
$font-size-7 = 1.25rem
// Constant typography token for font size 8
$font-size-8 = 1.5rem
// Variable typography token for font size 1
$var-font-size-1 = 0.625rem
// Constant typography token for font size 9
$font-size-9 = 1.75rem
// Variable typography token for font size 2
$var-font-size-2 = 0.75rem
// Variable typography token for font size 3
$var-font-size-3 = 0.8125rem
// Constant typography token for font size 10
$font-size-10 = 2rem
// Variable typography token for font size 4
$var-font-size-4 = 0.875rem
// Constant typography token for font size 11
$font-size-11 = 2.625rem
// Variable typography token for font size 5
$var-font-size-5 = 1rem
// Variable typography token for font size 6
$var-font-size-6 = 1.125rem
// Variable typography token for font size 7
$var-font-size-7 = 1.25rem
// Variable typography token for font size 8
$var-font-size-8 = 1.5rem
// Variable typography token for font size 9
$var-font-size-9 = 1.75rem
// Use for large headings only.
$font-weight-light = 300
// Most all body copy.
$font-weight-regular = 400
// Used sparingly for emphasized text within regular body copy.
$font-weight-bold = 700
$illustration-empty-state-assistant = "/assets/images/illustrations/empty-state-assistant.svg"
$illustration-empty-state-events = "/assets/images/illustrations/empty-state-events.svg"
$illustration-empty-state-tasks = "/assets/images/illustrations/empty-state-tasks.svg"
// Unitless line-heights for reusability
$line-height-heading = 1.25
// Unitless line-heights for reusability
$line-height-text = 1.5
// Remove extra leading. Unitless line-heights for reusability
$line-height-reset = 1
// Line heights for tabs
$line-height-tab = 2.5rem
// Variable unitless line-heights for reusability
$var-line-height-text = 1.5
// 50% transparency of an element
$opacity-5 = 0.5
// 80% transparency of an element
$opacity-8 = 0.8
// Disabled state of BRAND_HEADER_CONTRAST_WEAK
$brand-header-contrast-weak-disabled = rgba(166, 166, 166, 0.25)
// Gray Color 11
$color-gray-11 = rgb(62, 62, 60)
// Transparent value of BRAND_PRIMARY at 10%
$brand-primary-transparent-10 = rgba(21, 137, 238, 0.1)
// Gray Color 12
$color-gray-12 = rgb(43, 40, 38)
// These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug
$brand-background-dark-transparent = rgba(221, 219, 218, 0)
// Gray Color 13
$color-gray-13 = rgb(8, 7, 7)
// Background color a branded app header
$brand-header = rgb(255, 255, 255)
// Active / Hover state of BRAND_LIGHT
$brand-light-active = rgb(227, 229, 237)
// Variant of BRAND_HEADER_CONTRAST that provides a warm color
$brand-header-contrast-warm = rgb(191, 2, 1)
// Disabled state of BRAND_HEADER_ICON
$brand-header-icon-disabled = rgba(145, 145, 145, 0.25)
// Active / Hover state of BRAND_HEADER_CONTRAST
$brand-header-contrast-active = rgb(80, 80, 80)
// Primary page background color
$brand-background-primary = rgb(250, 250, 249)
// Primary brand color
$brand-primary = rgb(21, 137, 238)
// Active / Hover state of BRAND_HEADER_CONTRAST_WEAK
$brand-header-contrast-weak-active = rgb(129, 129, 129)
// Active / Hover state of BRAND_CONTRAST
$brand-contrast-active = rgb(13, 14, 18)
// Variant of BRAND_HEADER_CONTRAST that provides a cool color
$brand-header-contrast-cool = rgb(0, 85, 131)
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
$brand-header-contrast-inverse = rgb(255, 255, 255)
// Dark variant of BRAND that is accessible with light colors
$brand-dark = rgb(24, 35, 55)
// Dark variant of BRAND that is accessible with white
$brand-accessible = rgb(0, 112, 210)
// Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color
$brand-background-dark = rgb(232, 232, 232)
// Active / Hover state of BRAND_TEXT_LINK
$brand-text-link-active = rgb(0, 95, 178)
// Gray Color 1
$color-gray-1 = rgb(255, 255, 255)
// Gray Color 2
$color-gray-2 = rgb(250, 250, 249)
// Active / Hover state of BRAND_HEADER_ICON
$brand-header-icon-active = rgb(129, 129, 129)
// Gray Color 3
$color-gray-3 = rgb(243, 242, 242)
// Icons of BRAND_HEADER that is accessible with BRAND_HEADER
$brand-header-icon = rgb(145, 145, 145)
// Disabled state of BRAND_A11Y
$brand-disabled = rgb(201, 199, 197)
// Primary text link brand color
$brand-text-link = rgb(0, 109, 204)
// Gray Color 4
$color-gray-4 = rgb(236, 235, 234)
// Gray Color 5
$color-gray-5 = rgb(221, 219, 218)
// Gray Color 6
$color-gray-6 = rgb(201, 199, 197)
// Active / Hover state of BRAND_A11Y
$brand-accessible-active = rgb(0, 95, 178)
// Gray Color 7
$color-gray-7 = rgb(176, 173, 171)
// Active / Hover state of BRAND_DARK
$brand-dark-active = rgb(37, 48, 69)
// Gray Color 8
$color-gray-8 = rgb(150, 148, 146)
// Active / Hover state of BRAND_HEADER_CONTRAST
$brand-header-contrast-inverse-active = rgb(238, 238, 238)
// Active / Hover state of BRAND_HEADER_CONTRAST_COOL
$brand-header-contrast-cool-active = rgb(0, 85, 131)
// Gray Color 9
$color-gray-9 = rgb(112, 110, 107)
// Variant of BRAND that is accessible with BRAND
$brand-contrast = rgb(26, 27, 30)
// Weak contrast ratio, useful for iconography
$brand-header-contrast-weak = rgb(145, 145, 145)
// Active / Hover state of BRAND_PRIMARY
$brand-primary-active = rgb(0, 122, 221)
// These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug
$brand-background-primary-transparent = rgba(250, 250, 249, 0)
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
$brand-header-contrast = rgb(94, 94, 94)
// Transparent value of BRAND_PRIMARY
$brand-primary-transparent = rgba(21, 137, 238, 0.1)
// Active / Hover state of BRAND_HEADER_CONTRAST_WARM
$brand-header-contrast-warm-active = rgb(172, 0, 0)
// Transparent value of BRAND_PRIMARY at 40%
$brand-primary-transparent-40 = rgba(21, 137, 238, 0.4)
// Light variant of BRAND that is accessible with dark colors
$brand-light = rgb(244, 246, 254)
// Gray Color 10
$color-gray-10 = rgb(81, 79, 77)
// Generic sizing token scale for UI components.
$size-x-small = 12rem
// Generic sizing token scale for UI components.
$size-xxx-small = 3rem
// Large utility icon without border.
$square-icon-utility-large = 1.5rem
// Generic sizing token scale for UI components.
$size-xx-small = 6rem
// Search Results: Outer colored tile
$square-icon-small-boundary = 1.5rem
// Generic sizing token scale for UI components.
$size-small = 15rem
// Medium utility icon without border.
$square-icon-utility-medium = 1.25rem
// Very small icon button boundary.
$square-icon-x-small-boundary = 1.25rem
// Small utility icon without border.
$square-icon-utility-small = 1rem
// Stage left & actions: Outer colored tile
$square-icon-medium-boundary = 2rem
// Anchor: Icon content (white shape)
$square-icon-large-content = 2rem
// Anchor: Outer colored tile
$square-icon-large-boundary = 3rem
// Generic sizing token scale for UI components.
$size-medium = 20rem
// Stage left & actions: Icon content (white shape)
$square-icon-medium-content = 1rem
// Generic sizing token scale for UI components.
$size-x-large = 40rem
// Very small icons in icon buttons.
$square-icon-x-small-content = 0.5rem
// Variable medium boundary for square icons
$var-square-icon-medium-boundary = 2rem
// Icon button boundary.
$square-icon-medium-boundary-alt = 2.25rem
// Generic sizing token scale for UI components.
$size-xx-large = 60rem
// Anchor: avatar
$square-icon-large-boundary-alt = 5rem
// Generic sizing token scale for UI components.
$size-large = 25rem
// Search Results: Icon content (white shape)
$square-icon-small-content = 0.75rem
// Very very small icon button boundary.
$square-icon-xx-small-boundary = 1rem
// Alternate medium tap target size
$square-icon-medium-content-alt = 0.875rem
// Variable spacing token for size X Large
$var-spacing-x-large = 2rem
// Variable horizontal spacing token for size Small
$var-spacing-horizontal-small = 0.75rem
// Variable horizontal spacing token for size XX Large
$var-spacing-horizontal-xx-large = 3rem
// Constant spacing token for size X small
$spacing-x-small = 0.5rem
// Constant spacing token for size XXX small
$spacing-xxx-small = 0.125rem
// Constant spacing token for size XX small
$spacing-xx-small = 0.25rem
$border-width-thin = 1px
// Variable vertical spacing token for size Large
$var-spacing-vertical-large = 1.5rem
// Variable spacing token for size Large
$var-spacing-large = 1.5rem
// Variable spacing token for size Medium
$var-spacing-medium = 1rem
// Variable vertical spacing token for size Medium
$var-spacing-vertical-medium = 1rem
// Variable vertical spacing token for size X Small
$var-spacing-vertical-x-small = 0.5rem
// Constant spacing token for size Small
$spacing-small = 0.75rem
// Variable vertical spacing token for size XXX Small
$var-spacing-vertical-xxx-small = 0.125rem
// Variable spacing token for size X Small
$var-spacing-x-small = 0.5rem
// Variable spacing token for size XXX Small
$var-spacing-xxx-small = 0.125rem
// Variable horizontal spacing token for size X Large
$var-spacing-horizontal-x-large = 2rem
// Variable horizontal spacing token for size XX Small
$var-spacing-horizontal-xx-small = 0.25rem
// Variable spacing token for size XX Large
$var-spacing-xx-large = 3rem
$border-width-thick = 2px
// Constant spacing token for size Medium
$spacing-medium = 1rem
// Variable vertical spacing token for size XX Large
$var-spacing-vertical-xx-large = 3rem
// Variable vertical spacing token for size Small
$var-spacing-vertical-small = 0.75rem
// Variable spacing token for size Small
$var-spacing-small = 0.75rem
// Constant spacing token for 0
$spacing-none = 0
// Variable horizontal spacing token for size Large
$var-spacing-horizontal-large = 1.5rem
// Constant spacing token for size X Large
$spacing-x-large = 2rem
// Constant spacing token for size XX Large
$spacing-xx-large = 3rem
// Variable horizontal spacing token for size XXX Small
$var-spacing-horizontal-xxx-small = 0.125rem
// Variable horizontal spacing token for size X Small
$var-spacing-horizontal-x-small = 0.5rem
// Variable spacing token for size XX Small
$var-spacing-xx-small = 0.25rem
// Variable horizontal spacing token for size Medium
$var-spacing-horizontal-medium = 1rem
// Variable vertical spacing token for size XX Small
$var-spacing-vertical-xx-small = 0.25rem
// Variable vertical spacing token for size X Large
$var-spacing-vertical-x-large = 2rem
// Constant spacing token for size Large
$spacing-large = 1.5rem
// Action label text color
$color-text-action-label = rgb(107, 109, 112)
// Link color on dark background
$color-text-link-inverse = rgb(255, 255, 255)
// Link color on dark background - active state
$color-text-link-inverse-active = rgba(255, 255, 255, 0.5)
// Action label active text color
$color-text-action-label-active = rgb(22, 50, 92)
// Color for texts or icons that are related to warnings on a dark background.
$color-text-warning = rgb(255, 183, 93)
// Focus link text
$color-text-link-focus = rgb(0, 95, 178)
// Text color for destructive actions - hover state
$color-text-destructive-hover = rgb(161, 43, 43)
// Disabled link text
$color-text-link-disabled = rgb(22, 50, 92)
// Body text color
$color-text-default = rgb(22, 50, 92)
// Primary body text color
$color-text-primary = rgb(22, 50, 92)
// Text color for destructive actions
$color-text-destructive = rgb(194, 57, 52)
// Hover link text
$color-text-link-hover = rgb(0, 95, 178)
// Text color for success text.
$color-text-success = rgb(2, 126, 70)
// Color for text that is purposefully de-emphasized to create visual hierarchy.
$color-text-weak = rgb(107, 109, 112)
// Link text (508)
$color-text-link = rgb(0, 112, 210)
// Color for texts that are related to warnings on a light background.
$color-text-warning-alt = rgb(132, 72, 0)
// Default icon color.
$color-text-icon-default = rgb(107, 109, 112)
// Our product brand blue.
$color-text-brand = rgb(21, 137, 238)
// Error text for inputs and error misc
$color-text-error = rgb(194, 57, 52)
// Customer text used in anchor subtitle
$color-text-customer = rgb(255, 154, 60)
// Text color found on any primary brand color
$color-text-brand-primary = rgb(255, 255, 255)
// Active link text
$color-text-link-active = rgb(0, 57, 107)
// Color of required field marker.
$color-text-required = rgb(194, 57, 52)
// Link color on dark background - disabled state
$color-text-link-inverse-disabled = rgba(255, 255, 255, 0.15)
// Inverse text color for dark backgrounds
$color-text-inverse = rgb(255, 255, 255)
// Input placeholder text.
$color-text-placeholder = rgb(107, 109, 112)
// Weak inverse text color for dark backgrounds
$color-text-inverse-weak = rgb(171, 173, 176)
// Link color on dark background - hover state
$color-text-link-inverse-hover = rgba(255, 255, 255, 0.75)
// Text color for success text on dark backgrounds.
$color-text-success-inverse = rgb(75, 202, 129)
// Text color for field labels.
$color-text-label = rgb(107, 109, 112)
// Dropdown
$z-index-dropdown = 7000
// Docked element
$z-index-docked = 4
// Notifications under modals
$z-index-reminder = 8500
// Spinner
$z-index-spinner = 9050
// Default
$z-index-default = 1
// Deep dive
$z-index-deepdive = -99999
// Toasts
$z-index-toast = 10000
// Dialog
$z-index-dialog = 6000
// Popup
$z-index-popup = 5000
// Modal
$z-index-modal = 9000
// Stickied element
$z-index-sticky = 100
// Overlay
$z-index-overlay = 8000