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

Salesforce Lightning Design System

$border-width-thin = 1px
$border-width-thick = 2px
$border-stroke-width-thin = 1px
$border-stroke-width-thick = 2px
$spacing-none = 0
$spacing-xxx-small = 0.125rem
$spacing-xx-small = 0.25rem
$spacing-x-small = 0.5rem
$spacing-small = 0.75rem
$spacing-medium = 1rem
$spacing-large = 1.5rem
$spacing-x-large = 2rem
$spacing-xx-large = 3rem
// Generic sizing token scale for UI components.
$size-xx-small = 6rem
// Generic sizing token scale for UI components.
$size-x-small = 12rem
// Generic sizing token scale for UI components.
$size-small = 15rem
// Generic sizing token scale for UI components.
$size-medium = 20rem
// Generic sizing token scale for UI components.
$size-large = 25rem
// Generic sizing token scale for UI components.
$size-x-large = 40rem
// Generic sizing token scale for UI components.
$size-xx-large = 60rem
// Small utility icon without border.
$square-icon-utility-small = 1rem
// Medium utility icon without border.
$square-icon-utility-medium = 1.25rem
// Large utility icon without border.
$square-icon-utility-large = 1.5rem
// Anchor: Outer colored tile
$square-icon-large-boundary = 3rem
// Anchor: avatar
$square-icon-large-boundary-alt = 5rem
// Anchor: Icon content (white shape)
$square-icon-large-content = 2rem
// Use squareIconMediumBoundary
$square-icon-medium = 2.375rem
// Stage left & actions: Outer colored tile
$square-icon-medium-boundary = 2rem
// Icon button boundary.
$square-icon-medium-boundary-alt = 2.25rem
// Stage left & actions: Icon content (white shape)
$square-icon-medium-content = 1rem
// Alternate medium tap target size
$square-icon-medium-content-alt = 0.875rem
// Small tap target size
$square-icon-small = 1rem
// Search Results: Outer colored tile
$square-icon-small-boundary = 1.5rem
// Search Results: Icon content (white shape)
$square-icon-small-content = .75rem
// Very small icon button boundary.
$square-icon-x-small-boundary = 1.25rem
// Very small icons in icon buttons.
$square-icon-x-small-content = .5rem
// Very very small icon button boundary.
$square-icon-xx-small-boundary = 1rem
// Very small icons to replace force font with temporary override.
$square-icon-xx-small-content = .875rem
// Large tap target size.
$square-icon-large = 3.125rem
// Minimum height of a pill.
$height-pill = 1.625rem
// Brand fill color
$fill-brand = rgb(0, 112, 210)
// Brand hover fill color
$fill-brand-hover = rgb(0, 95, 178)
// Brand active fill color
$fill-brand-active = rgb(22, 50, 92)
// Header button icon color
$fill-header-button = rgb(159, 170, 181)
// Hovered header button icon color
$fill-header-button-hover = rgb(0, 95, 178)
// 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
$font-size-x-small = 0.625rem
$font-size-small = 0.875rem
$font-size-medium = 1rem
$font-size-medium-a = 1.125rem
$font-size-large = 1.25rem
$font-size-x-large = 1.5rem
$font-size-x-large-a = 1.57rem
$font-size-xx-large = 2rem
// Extra extra small text.
$font-size-text-xx-small = .625rem
// Extra small body text.
$font-size-text-x-small = .75rem
// Small body text.
$font-size-text-small = .8125rem
// Medium body text.
$font-size-text-medium = 1rem
// Large body text.
$font-size-text-large = 1.125rem
// Extra large body text.
$font-size-text-x-large = 1.25rem
// Extra Extra small headings.
$font-size-heading-xx-small = .625rem
// Extra small headings.
$font-size-heading-x-small = .75rem
// Small headings.
$font-size-heading-small = .875rem
// Medium headings.
$font-size-heading-medium = 1.125rem
// Large headings.
$font-size-heading-large = 1.5rem
// Extra large headings.
$font-size-heading-x-large = 2rem
// Unitless line-heights for reusability
$line-height-heading = 1.25
// Unitless line-heights for reusability
$line-height-text = 1.375
// Remove extra leading. Unitless line-heights for reusability
$line-height-reset = 1
// Line heights for tabs
$line-height-tab = 2.5rem
// Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.
$font-family = 'Salesforce Sans', Arial, sans-serif
$font-family-text = 'Salesforce Sans', Arial, sans-serif
$font-family-heading = 'Salesforce Sans', Arial, sans-serif
$border-radius-small = .125rem
// Icons in lists, record home icon, unbound input elements
$border-radius-medium = .25rem
$border-radius-large = .5rem
$border-radius-pill = 15rem
// Circle for global use, action icon bgd shape
$border-radius-circle = 50%
// Default border color for UI elements.
$color-border = rgb(216, 221, 230)
// Our product brand blue.
$color-border-brand = rgb(21, 137, 238)
// 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 the concept of an external user or customer.
$color-border-customer = rgb(255, 154, 60)
// Border color for UI elements that have to do with destructive actions.
$color-border-destructive = rgb(194, 57, 52)
// Hover border color for UI elements that have to do with destructive actions.
$color-border-destructive-hover = rgb(166, 26, 20)
// Active border color for UI elements that have to do with destructive actions.
$color-border-destructive-active = rgb(135, 5, 0)
// Border color for UI elements related to providing neutral information (not error, success, or warning).
$color-border-info = rgb(84, 105, 141)
// Border color for UI elements that have to do with errors.
$color-border-error = rgb(194, 57, 52)
// Alternative border color for UI elements related to errors.
$color-border-error-alt = rgb(234, 130, 136)
// Dark alternative border color for UI elements related to errors.
$color-border-error-dark = rgb(234, 130, 136)
// Border color for UI elements related to the offline state.
$color-border-offline = rgb(68, 68, 68)
// Border color for UI elements that have to do with success.
$color-border-success = rgb(75, 202, 129)
// 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 warnings.
$color-border-warning = rgb(255, 183, 93)
// Border color to match UI elements using color-background-inverse.
$color-border-inverse = rgb(6, 28, 63)
// Border color for a selected tab in a tab group.
$color-border-tab-selected = rgb(0, 112, 210)
// Border color for an active tab.
$color-border-tab-active = rgb(255, 255, 255)
// Lightest separator color - used as default separator on white backgrounds.
$color-border-separator = rgb(244, 246, 249)
// Medium separator color - used as default separator on light gray backgrounds.
$color-border-separator-alt = rgb(216, 221, 230)
// Darkest separator color - used as an alternate separator color when more differentiation is desired.
$color-border-separator-alt-2 = rgb(168, 183, 199)
// Used as a separator on dark backgrounds, such as stage left navigation.
$color-border-separator-inverse = rgb(42, 66, 108)
// Used as the border color for selected rows or items on list-like components.
$color-border-row-selected = rgb(0, 112, 210)
// 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)
// Used to delineate the boundary of a specific region. Specific to builders.
$color-border-hint = rgb(42, 66, 108)
// Used to delineate the boundary of a selected component. Specific to builders.
$color-border-selection = rgb(0, 112, 210)
// 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 to delineate the boundary of a component that is being clicked. Specific to builders.
$color-border-selection-active = rgb(244, 246, 249)
// Used to delineate the boundary of a selected canvas element. Specific to builders.
$color-border-canvas-element-selection = rgb(94, 180, 255)
// Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.
$color-border-canvas-element-selection-hover = rgb(0, 95, 178)
// Border color for a button with an icon that has a parent element that has a hover state
$color-border-icon-inverse-hint = rgba(255, 255, 255, 0.5)
// Hovered border color for a button with an icon that has a parent element that has a hover state
$color-border-icon-inverse-hint-hover = rgba(255, 255, 255, 0.75)
// Border color for brandable primary button
$color-border-button-brand = rgb(0, 112, 210)
// Border color for brandable primary button - disabled state
$color-border-button-brand-disabled = rgba(0, 0, 0, 0)
// Border color for default secondary button
$color-border-button-default = rgb(216, 221, 230)
// Border color for disabled inverse button.
$color-border-button-inverse-disabled = rgba(255, 255, 255, 0.15)
// Border color on form elements.
$color-border-input = rgb(216, 221, 230)
// Border color on active form elements.
$color-border-input-active = rgb(21, 137, 238)
// Border color on disabled form elements.
$color-border-input-disabled = rgb(168, 183, 199)
// The borders to create the checkmark
$color-border-input-checkbox-selected-checkmark = rgb(255, 255, 255)
// These borders create the faux checkmark when the checkbox toggle is in the checked state.
$color-border-toggle-checked = rgb(255, 255, 255)
// Our product brand blue.
$color-stroke-brand = rgb(0, 112, 210)
// Hover stroke color for our product brand blue.
$color-stroke-brand-hover = rgb(0, 112, 210)
// Active stroke color for our product brand blue.
$color-stroke-brand-active = rgb(22, 50, 92)
// Disabled stroke color.
$color-stroke-disabled = rgb(224, 229, 238)
// Stroke color for our global header buttons.
$color-stroke-header-button = rgb(159, 170, 181)
// Default background color for the whole app.
$color-background = rgb(244, 246, 249)
// Second default background color for the app.
$color-background-alt = rgb(253, 253, 253)
// Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
$color-background-alt-2 = rgb(238, 241, 246)
// Alternative background color for dark portions of the app.
$color-background-alt-inverse = rgb(22, 50, 92)
// Used as the background color for the hover state on rows or items on list-like components.
$color-background-row-hover = rgb(244, 246, 249)
// Used as the background color for the active state on rows or items on list-like components.
$color-background-row-active = rgb(238, 241, 246)
// Used as the background color for selected rows or items on list-like components.
$color-background-row-selected = rgb(240, 248, 252)
// 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)
// Default background color for dark portions of the app (like Stage Left or tooltips).
$color-background-inverse = rgb(6, 28, 63)
// Secondary top bar background color (child browser, file preview, etc.)
$color-background-browser = rgb(84, 105, 141)
// Background color for default mobile chrome (ex. global header)
$color-background-chrome-mobile = rgb(0, 112, 210)
// Background color for default desktop chrome (ex. global header)
$color-background-chrome-desktop = rgb(255, 255, 255)
// Background color for UI elements related to the concept of an external user or customer.
$color-background-customer = rgb(255, 154, 60)
// Background color for highlighting UI elements.
$color-background-highlight = rgb(250, 255, 189)
// Background color for highlighting text in search results.
$color-background-highlight-search = rgb(255, 240, 63)
// Background color for text selected with a mouse.
$color-background-selection = rgb(216, 237, 255)
// Background for utility icons that live in the action bar on mobile.
$color-background-actionbar-icon-utility = rgb(84, 105, 141)
// Color of the indicator dot.
$color-background-indicator-dot = rgb(22, 50, 92)
// Color of the spinner dot.
$color-background-spinner-dot = rgb(159, 170, 181)
// Standard modal header
$color-background-modal = rgb(255, 255, 255)
// Brandable modal header
$color-background-modal-brand = rgb(0, 112, 210)
// Notifications badge background color.
$color-background-notification-badge = rgb(194, 57, 52)
// Notifications badge background color.
$color-background-notification-badge-hover = rgb(0, 95, 178)
// Notifications badge background color.
$color-background-notification-badge-focus = rgb(0, 95, 178)
// Notifications badge background color.
$color-background-notification-badge-active = rgb(0, 57, 107)
// Background color for notification list item.
$color-background-notification = rgb(255, 255, 255)
// Background color for a new notification list item.
$color-background-notification-new = rgb(240, 248, 252)
// Stage left org switcher dropdown arrow background color.
$color-background-org-switcher-arrow = rgb(6, 28, 63)
// Background color for payloads in the feed.
$color-background-payload = rgb(244, 246, 249)
// Background color of comment posts in the feed.
$color-background-post = rgb(247, 249, 251)
// Hover color for utility bar item.
$color-background-utility-bar-hover = rgb(224, 229, 238)
// Active color for utility bar item.
$color-background-utility-bar-active = rgb(21, 137, 238)
// Used as gray background when more contrast is desired.
$color-background-shade = rgb(224, 229, 238)
// Used as gray background in conjunction with Shade when more contrast is desired.
$color-background-shade-dark = rgb(216, 221, 230)
// Used as background for loading stencils on white background.
$color-background-stencil = rgb(238, 241, 246)
// Used as an alternate background for loading stencils on gray backgrounds.
$color-background-stencil-alt = rgb(224, 229, 238)
// Used as the default background color for temporary dialog elements, such as the progress spinner background.
$color-background-temp-modal = rgba(126, 140, 153, 0.8)
// The color of the mask overlay that appears when you enter a modal state.
$color-background-temp-modal-tint = rgba(126, 140, 153, 0.8)
// The color of the mask overlay that appears when you enter a modal state.
$color-background-temp-modal-tint-alt = rgba(255, 255, 255, 0.75)
// The color of the mask overlay that appears when you enter a modal state.
$color-background-backdrop = rgba(255, 255, 255, 0.75)
// The color of the mask overlay that provides user feedback on interaction.
$color-background-backdrop-tint = rgba(240, 248, 252, 0.75)
// The background color of an internal scrollbar.
$color-background-scrollbar = rgb(224, 229, 238)
// The background color of an internal scrollbar track.
$color-background-scrollbar-track = rgb(168, 183, 199)
// Our product brand blue.
$color-brand = rgb(21, 137, 238)
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
$color-brand-dark = rgb(0, 112, 210)
// Our product brand blue, darkened even further.
$color-brand-darker = rgb(0, 95, 178)
// Toggle background color.
$color-background-toggle = rgb(159, 170, 181)
// Disabled toggle background color.
$color-background-toggle-disabled = rgb(159, 170, 181)
// Hovered toggle background color.
$color-background-toggle-hover = rgb(126, 140, 153)
// Active toggle background color.
$color-background-toggle-active = rgb(0, 112, 210)
// Hovered active toggle background color.
$color-background-toggle-active-hover = rgb(0, 95, 178)
// Button backgrounds on modal headers
$color-background-modal-button = rgba(0, 0, 0, 0.07)
// Active button backgrounds on modal headers
$color-background-modal-button-active = rgba(0, 0, 0, 0.16)
// Default input field
$color-background-input = rgb(255, 255, 255)
// Selected input field (when user has clicked or tabbed into field)
$color-background-input-active = rgb(255, 255, 255)
// Default checkboxes
$color-background-input-checkbox = rgb(255, 255, 255)
// Disabled checkboxes
$color-background-input-checkbox-disabled = rgb(216, 221, 230)
// Selected checkboxes
$color-background-input-checkbox-selected = rgb(21, 137, 238)
// Disabled input
$color-background-input-disabled = rgb(224, 229, 238)
// Background color for input field that has encountered an error.
$color-background-input-error = rgb(255, 221, 225)
// Background color for search input fields.
$color-background-input-search = rgba(0, 0, 0, 0.16)
// Background color for pills.
$color-background-pill = rgb(255, 255, 255)
// Color of mask overlay that sits on top of an image when text is present.
$color-background-image-overlay = rgba(0, 0, 0, 0.4)
// Color for UI elements related to destructive actions.
$color-background-destructive = rgb(194, 57, 52)
// Hover color for UI elements related to destructive actions.
$color-background-destructive-hover = rgb(166, 26, 20)
// Active color for UI elements related to destructive actions.
$color-background-destructive-active = rgb(135, 5, 0)
// Background color for UI elements related to providing neutral information (not error, success, or warning).
$color-background-info = rgb(84, 105, 141)
// Color for UI elements related to errors.
$color-background-error = rgb(212, 80, 76)
// Dark color for UI elements related to errors. Accessible with white text.
$color-background-error-dark = rgb(194, 57, 52)
// Alternative color for UI elements related to errors.
$color-background-error-alt = rgb(234, 130, 136)
// Color for UI elements related to the offline state.
$color-background-offline = rgb(68, 68, 68)
// 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 success. Accessible with white text.
$color-background-success-dark = rgb(4, 132, 75)
// Background color for toast messaging.
$color-background-toast = rgba(84, 105, 141, 0.95)
// Background color for success toast messaging.
$color-background-toast-success = rgb(4, 132, 75)
// Background color for error toast messaging.
$color-background-toast-error = rgba(194, 57, 52, 0.95)
// Color for UI elements that have to do with warning.
$color-background-warning = rgb(255, 183, 93)
// Background color for success buttons
$color-background-button-success = rgb(75, 202, 129)
// Hovered background color for success buttons
$color-background-button-success-hover = rgb(4, 132, 75)
// Active background color for success buttons
$color-background-button-success-active = rgb(4, 132, 75)
// Shadow above overflow menu close bar.
$shadow-action-overflow-footer = 0 -2px 4px #F4F6F9
// Shadow for overlays.
$shadow-overlay = 0 -2px 4px rgba(0, 0, 0, 0.07)
// 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)
// Shadow for buttons.
$shadow-button = 0 1px 1px 0 rgba(0, 0, 0, 0.05)
// Custom glow for focus states on UI elements with explicit containers.
$shadow-button-focus = 0 0 3px #0070D2
// Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.
$shadow-button-focus-inverse = 0 0 3px #E0E5EE
// Shadow to make inline edit card pop out.
$shadow-inline-edit = 0 2px 4px 4px rgba(0, 0, 0, 0.16)
// Inset shadow for editable grid
$shadow-focus-inset = 0 0 2px 2px #1589EE inset
// Shadow on elements that are docked to the bottom of the viewport.
$shadow-docked = 0 -2px 2px 0 rgba(0, 0, 0, 0.16)
// Shadow on images.
$shadow-image = 0 1px 1px rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-3-inset = -3
// Deprecated
$elevation-0 = 0
// Deprecated
$elevation-2 = 2
// Deprecated
$elevation-4 = 4
// Deprecated
$elevation-8 = 8
// Deprecated
$elevation-16 = 16
// Deprecated
$elevation-32 = 32
// Deprecated
$elevation-shadow-3-below = 0 3px 3px 0 rgba(0, 0, 0, 0.16) inset
// Deprecated
$elevation-shadow-0 = none
// Deprecated
$elevation-shadow-2 = 0 2px 2px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-shadow-4 = 0 4px 4px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-shadow-8 = 0 8px 8px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-shadow-16 = 0 16px 16px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-shadow-32 = 0 32px 32px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-inverse-shadow-3-below = 0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset
// Deprecated
$elevation-inverse-shadow-0 = none
// Deprecated: Use SHADOW_DOCKED
$elevation-inverse-shadow-2 = 0 -2px 2px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-inverse-shadow-4 = 0 -4px 4px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-inverse-shadow-8 = 0 -8px 8px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-inverse-shadow-16 = 0 -16px 16px 0 rgba(0, 0, 0, 0.16)
// Deprecated
$elevation-inverse-shadow-32 = 0 -32px 32px 0 rgba(0, 0, 0, 0.16)
// Action label text color
$color-text-action-label = rgb(84, 105, 141)
// Action label active text color
$color-text-action-label-active = rgb(22, 50, 92)
// Our product brand blue.
$color-text-brand = rgb(21, 137, 238)
// Top bar icon color
$color-text-browser = rgb(255, 255, 255)
// Top bar active icon color
$color-text-browser-active = rgba(0, 0, 0, 0.4)
// Customer text used in anchor subtitle
$color-text-customer = rgb(255, 154, 60)
// Body text color
$color-text-default = rgb(22, 50, 92)
// Error text for inputs and error misc
$color-text-error = rgb(194, 57, 52)
// Input disabled text
$color-text-input-disabled = rgb(84, 105, 141)
// Typed input text
$color-text-input-focus-inverse = rgb(22, 50, 92)
// Input icon
$color-text-input-icon = rgb(159, 170, 181)
// Inverse text color for dark backgrounds
$color-text-inverse = rgb(255, 255, 255)
// Weak inverse text color for dark backgrounds
$color-text-inverse-weak = rgb(159, 170, 181)
// Active state on a standalone link on a dark background.
$color-text-inverse-active = rgb(94, 180, 255)
// Hover state on a standalone link on a dark background.
$color-text-inverse-hover = rgb(159, 170, 181)
// Link text (508)
$color-text-link = rgb(0, 112, 210)
// Active link text
$color-text-link-active = rgb(0, 57, 107)
// Disabled link text
$color-text-link-disabled = rgb(22, 50, 92)
// Focus link text
$color-text-link-focus = rgb(0, 95, 178)
// Hover link text
$color-text-link-hover = rgb(0, 95, 178)
// Link color on dark background
$color-text-link-inverse = rgb(255, 255, 255)
// Link color on dark background - hover state
$color-text-link-inverse-hover = rgba(255, 255, 255, 0.75)
// Link color on dark background - active state
$color-text-link-inverse-active = rgba(255, 255, 255, 0.5)
// Link color on dark background - disabled state
$color-text-link-inverse-disabled = rgba(255, 255, 255, 0.15)
// Modal header title
$color-text-modal = rgb(255, 255, 255)
// Modal header button text color
$color-text-modal-button = rgb(84, 105, 141)
// Text in stage left navigation.
$color-text-stage-left = rgb(224, 229, 238)
// Color for default text in a tab group.
$color-text-tab-label = rgb(22, 50, 92)
// Color for text on a selected tab in a tab group.
$color-text-tab-label-selected = rgb(0, 112, 210)
// Color for text in hover state in a tab group.
$color-text-tab-label-hover = rgb(0, 95, 178)
// Color for text in focus state in a tab group.
$color-text-tab-label-focus = rgb(0, 95, 178)
// Color for text in active state in a tab group.
$color-text-tab-label-active = rgb(0, 57, 107)
// Color for disabled text in a tab group.
$color-text-tab-label-disabled = rgb(224, 229, 238)
// Color for text on toast messages.
$color-text-toast = rgb(224, 229, 238)
// Color for texts or icons that are related to warnings on a dark background.
$color-text-warning = rgb(255, 183, 93)
// Color for texts that are related to warnings on a light background.
$color-text-warning-alt = rgb(132, 72, 0)
// Color for text that is purposefully de-emphasized to create visual hierarchy.
$color-text-weak = rgb(84, 105, 141)
// Color for non-interactive icons that represent a selected item in a list
$color-text-icon-brand = rgb(0, 112, 210)
// Color for interactive utility icons
$color-text-icon-utility = rgb(159, 170, 181)
// Color for disabled toggles
$color-text-toggle-disabled = rgb(216, 221, 230)
// Text color for brandable primary button
$color-text-button-brand = rgb(255, 255, 255)
// Text color for brandable primary button - hover state
$color-text-button-brand-hover = rgb(255, 255, 255)
// Text color for brandable primary button - active state
$color-text-button-brand-active = rgb(255, 255, 255)
// Text color for brandable primary button - disabled state
$color-text-button-brand-disabled = rgb(255, 255, 255)
// Text color for default secondary button
$color-text-button-default = rgb(0, 112, 210)
// Text color for default secondary button - hover state
$color-text-button-default-hover = rgb(0, 112, 210)
// Text color for default secondary button - active state
$color-text-button-default-active = rgb(0, 112, 210)
// Text color for default secondary button - disabled state
$color-text-button-default-disabled = rgb(216, 221, 230)
// Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.
$color-text-button-default-hint = rgb(159, 170, 181)
// Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.
$color-text-button-inverse = rgb(224, 229, 238)
// Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.
$color-text-button-inverse-disabled = rgba(255, 255, 255, 0.15)
// Default icon color.
$color-text-icon-default = rgb(84, 105, 141)
// Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.
$color-text-icon-default-hint = rgb(159, 170, 181)
// Icon color for a button that has a parent element that has a hover state on a dark background. This is the default text/icon color for that button before its parent has been hovered over.
$color-text-icon-inverse-hint = rgba(255, 255, 255, 0.5)
// Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.
$color-text-icon-default-hint-borderless = rgb(224, 229, 238)
// Default icon color - hover state.
$color-text-icon-default-hover = rgb(0, 112, 210)
// Default icon color - active state.
$color-text-icon-default-active = rgb(0, 57, 107)
// Default icon color - disabled state
$color-text-icon-default-disabled = rgb(216, 221, 230)
// Icon color on dark background
$color-text-icon-inverse = rgb(255, 255, 255)
// Icon color on dark background - hover state
$color-text-icon-inverse-hover = rgb(255, 255, 255)
// Icon color on dark background - active state
$color-text-icon-inverse-active = rgb(255, 255, 255)
// Icon color on dark background - disabled state
$color-text-icon-inverse-disabled = rgba(255, 255, 255, 0.15)
// Hovered icon color for a button that has a parent element that has a hover state
$color-text-icon-inverse-hint-hover = rgba(255, 255, 255, 0.75)
// Text color for field labels.
$color-text-label = rgb(84, 105, 141)
// Input placeholder text.
$color-text-placeholder = rgb(84, 105, 141)
// Input placeholder text on dark backgrounds.
$color-text-placeholder-inverse = rgb(224, 229, 238)
// Color of required field marker.
$color-text-required = rgb(194, 57, 52)
// Text color for pills.
$color-text-pill = rgb(0, 112, 210)
// Text color for success text.
$color-text-success = rgb(2, 128, 72)
// Text color for success text on dark backgrounds.
$color-text-success-inverse = rgb(75, 202, 129)
// Default value for text-transform
$text-transform = none
// 50% transparency of an element
$opacity-5 = 0.5
// 80% transparency of an element
$opacity-8 = 0.8
// 0 seconds, 0 frames
$duration-instantly = 0s
// 0.05 seconds, 3 frames
$duration-immediately = 0.05s
// 0.1 seconds, 6 frames
$duration-quickly = 0.1s
// 0.2 seconds, 12 frames
$duration-promptly = 0.2s
// 0.4 seconds, 24 frames
$duration-slowly = 0.4s
// 3.2 seconds, 192 frames
$duration-paused = 3.2s
// 4.8 seconds
$duration-toast-short = 4.8s
// 9.6 seconds
$duration-toast-medium = 9.6s
// Toasts
$z-index-toast = 10000
// Spinner
$z-index-spinner = 9050
// Modal
$z-index-modal = 9000
// Overlay
$z-index-overlay = 8000
// Dropdown
$z-index-dropdown = 7000
// Dialog
$z-index-dialog = 6000
// Popup
$z-index-popup = 5000
// Stickied element
$z-index-sticky = 100
// Default
$z-index-default = 1
// Docked element
$z-index-docked = 4
// Deep dive
$z-index-deepdive = -99999
// Brandable primary button
$color-background-button-brand = rgb(0, 112, 210)
// Brandable primary button - active state
$color-background-button-brand-active = rgb(0, 57, 107)
// Brandable primary button - hover state
$color-background-button-brand-hover = rgb(0, 95, 178)
// Brandable primary button - disabled state
$color-background-button-brand-disabled = rgb(224, 229, 238)
// Default secondary button
$color-background-button-default = rgb(255, 255, 255)
// Default secondary button - hover state
$color-background-button-default-hover = rgb(244, 246, 249)
// Default secondary button - focus state
$color-background-button-default-focus = rgb(244, 246, 249)
// Default secondary button - active state
$color-background-button-default-active = rgb(238, 241, 246)
// Default secondary button - disabled state
$color-background-button-default-disabled = rgb(255, 255, 255)
// Background color for icon-only button
$color-background-button-icon = rgba(0, 0, 0, 0)
// Background color for icon-only button - hover state
$color-background-button-icon-hover = rgb(244, 246, 249)
// Background color for icon-only button - focus state
$color-background-button-icon-focus = rgb(244, 246, 249)
// Background color for icon-only button - active state
$color-background-button-icon-active = rgb(238, 241, 246)
// Background color for icon-only button - disabled state
$color-background-button-icon-disabled = rgb(255, 255, 255)
// Button backgrounds on inverse/dark backgrounds
$color-background-button-inverse = rgba(0, 0, 0, 0)
// Active button backgrounds on inverse backgrounds on mobile
$color-background-button-inverse-active = rgba(0, 0, 0, 0.24)
// Disabled button backgrounds on inverse/dark backgrounds
$color-background-button-inverse-disabled = rgba(0, 0, 0, 0)
// Line heights for regular buttons
$line-height-button = 1.875rem
// Line heights for small buttons
$line-height-button-small = 1.75rem
// Default Card component background color.
$card-color-background = rgb(255, 255, 255)
$card-spacing-small = 0.75rem
$card-spacing-medium = 1rem
$card-spacing-large = 1.5rem
// Line heights for toggle buttons
$line-height-toggle = 1.3rem
// Slider size for toggle.
$square-toggle-slider = 1.25rem
// Slider width.
$width-toggle = 3rem
// Slider height.
$height-toggle = 1.5rem
$table-spacing-x-small = 0.5rem
// Docked panel header’s background color.
$color-background-docked-panel-header = rgb(247, 249, 251)
// Height of the docked bar.
$height-docked-bar = 2.5rem
// Utility bar notifications badge background color.
$utility-bar-color-background-notification-badge = rgb(212, 80, 76)
// Utility bar notifications focus background color.
$utility-bar-color-background-notification-focus = rgb(168, 183, 199)
// Default color for animated icon waffle for app switcher.
$color-background-icon-waffle = rgb(84, 105, 141)
// Global identity icon size.
$square-icon-global-identity-icon = 1.25rem
// Default context bar background color.
$color-background-context-bar = rgb(255, 255, 255)
// Brand color in context bar for default theme
$color-background-context-bar-brand-accent = rgb(0, 161, 223)
// Hovered context bar item background color.
$color-background-context-bar-item-hover = rgb(247, 249, 251)
// Active context bar item background color.
$color-background-context-bar-item-active = rgb(247, 249, 251)
// Context TAB bar item background color.
$color-background-context-tab-bar-item = rgb(255, 255, 255)
// Hovered context bar item background color.
$color-background-context-bar-inverse-item-hover = rgba(255, 255, 255, 0.2)
// Active context bar item background color.
$color-background-context-bar-inverse-item-active = rgba(255, 255, 255, 0.4)
// A Gradient used for putting shadows on the bottom when box-shadow is not possible.
$color-background-context-bar-shadow = linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)
// Highlight for context bar action (hover and focus states).
$color-background-context-bar-action-highlight = rgba(255, 255, 255, 0.2)
// Divider in context bar
$color-border-context-bar-divider = rgba(255, 255, 255, 0.2)
// Border color in context bar
$color-border-context-bar-item = rgba(0, 0, 0, 0.2)
// Border color in context bar on dark background
$color-border-context-bar-inverse-item = rgba(255, 255, 255, 0.2)
// Border color in context bar for default theme
$color-border-context-bar-theme-default = rgb(0, 161, 223)
// Alternate border color in context bar for default theme
$color-border-context-bar-theme-default-alt = rgb(228, 233, 243)
// Hovered border color in context bar for default theme
$color-border-context-bar-theme-default-hover = rgb(11, 35, 153)
// Active border color in context bar for default theme
$color-border-context-bar-theme-default-active = rgb(228, 233, 243)
// Context bar height.
$height-context-bar = 2.5rem
// Context bar text color
$color-text-context-bar = rgb(84, 105, 141)
// Context bar text color on a dark background
$color-text-context-bar-inverse = rgb(255, 255, 255)
// Context bar action trigger text color
$color-text-context-bar-action-trigger = rgba(255, 255, 255, 0.4)
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
$color-background-anchor = rgb(244, 246, 249)
// Page Header background color
$color-background-page-header = rgb(247, 249, 251)
// The background color for Salespath stages that are complete.
$color-background-path-complete = rgb(75, 202, 129)
// The hover background color for Salespath stages that are complete.
$color-background-path-complete-hover = rgb(4, 132, 75)
// The background color for Salespath stages that are the current stage.
$color-background-path-current = rgb(0, 112, 210)
// The hover background color for Salespath stages that are the current stage.
$color-background-path-current-hover = rgb(0, 95, 178)
// The background color for Salespath stages that have not been completed.
$color-background-path-incomplete = rgb(224, 229, 238)
// The hover background color for Salespath stages that have not been completed.
$color-background-path-incomplete-hover = rgb(216, 221, 230)
// The background color for the final stage of a Salespath when it has been lost.
$color-background-path-lost = rgb(194, 57, 52)
// The background color for Salespath guidance coaching section.
$color-background-guidance = rgb(250, 250, 251)
// Used as a separator between dark colors like the stages of salespath.
$color-border-path-divider = rgb(255, 255, 255)
// Line heights for salespath
$line-height-salespath = 1.5rem
// Height of Salespath
$height-sales-path = 2rem
// The default background color for Progress Indicator
$progress-color-background = rgb(255, 255, 255)
// The shaded background color for Progress Indicator
$progress-color-background-shade = rgb(244, 246, 249)
// The background color for the Progress Bar
$progress-bar-color-background = rgb(216, 221, 230)
// The background color of the fill for the Progess Bar
$progress-bar-color-background-fill = rgb(94, 180, 255)
// Borders of each indicator item within the Progress Indicator
$progress-color-border = rgb(255, 255, 255)
// Shaded borders of each indicator item within the Progress Indicator
$progress-color-border-shade = rgb(244, 246, 249)
// Hovered border color of each indicator item within the Progress Indicator
$progress-color-border-hover = rgb(0, 112, 210)
// Active border color of each indicator item within the Progress Indicator
$progress-color-border-active = rgb(21, 137, 238)
// Height of the Progress Bar
$progress-bar-height = 0.125rem
// Split View background color.
$split-view-color-background = rgb(228, 233, 243)
// Split View background color on row hover.
$split-view-color-background-row-hover = rgb(238, 241, 246)
// Row dividers in Split View list
$split-view-color-border = rgb(206, 213, 225)
// Vertical navigation shaded background color on row hover.
$vertical-navigation-color-background-shade-row-hover = rgb(238, 241, 246)
// Vertical navigation shaded background color on row active.
$vertical-navigation-color-background-shade-row-active = rgb(232, 236, 243)