@salesforce-ux/design-system/design-tokens/dist/theme-one-salesforce.styl

Salesforce Lightning Design System

// The color of the mask overlay that appears when you enter a modal state.
$color-background-temp-modal-tint = rgba(8, 7, 7, 0.6)
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_DARK_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug
$brand-band-color-background-secondary-transparent = rgba(253, 253, 253, 0)
// Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
$color-background-alt-2 = rgb(243, 242, 242)
// Hover color for utility bar item.
$color-background-utility-bar-hover = rgb(236, 235, 234)
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
$color-background-anchor = rgb(243, 242, 242)
$color-background-primary = rgb(243, 242, 242)
// Color for UI elements related to the offline state.
$color-background-offline = rgb(62, 62, 60)
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_DARK instead.
$brand-band-color-background-secondary = rgb(253, 253, 253)
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug
$brand-band-color-background-primary-transparent = rgba(253, 253, 253, 0)
$color-contrast-secondary = rgb(243, 242, 242)
// Secondary top bar background color (child browser, file preview, etc.)
$color-background-browser = rgb(112, 110, 107)
// Used as the default background color for temporary dialog elements, such as the progress spinner background.
$color-background-temp-modal = rgb(150, 148, 146)
// Background color for payloads in the feed.
$color-background-payload = rgb(250, 250, 249)
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
$page-color-background-primary = rgb(253, 253, 253)
// Used as gray background in conjunction with Shade when more contrast is desired.
$color-background-shade-dark = rgb(221, 219, 218)
// Background for utility icons that live in the action bar on mobile.
$color-background-actionbar-icon-utility = rgb(112, 110, 107)
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
$brand-band-color-background-primary = rgb(253, 253, 253)
$color-background-secondary = 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(236, 235, 234)
// Stroke color for our global header buttons.
$color-stroke-header-button = rgb(176, 173, 171)
// Hard dropshadow found on general UI elements such as containers
$shadow-hard-primary = rgba(0, 0, 0, 0.10) 0 2px 0
// Soft dropshadow found on general UI elements such as containers
$shadow-soft-primary = rgba(0, 0, 0, 0.10) 0 2px 2px
$shadow-soft-primary-hover = rgba(0, 0, 0, 0.20) 0 3px 6px
$shadow-soft-primary-active = rgba(0, 0, 0, 0.20) 0 1px 1px
$card-spacing-margin = 0.75rem
$card-footer-padding = 0.75rem 1rem
// Color for text on toast messages.
$color-text-toast = rgb(236, 235, 234)
// Modal header button text color
$color-text-modal-button = rgb(62, 62, 60)
// Text in stage left navigation.
$color-text-stage-left = rgb(236, 235, 234)
// Used as the background color for the active state on rows or items on list-like components.
$color-background-row-active = rgb(236, 235, 234)
// 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(243, 242, 242)
// Background color for UI elements related to providing neutral information (not error, success, or warning).
$color-background-info = rgb(112, 110, 107)
// Used as background for loading stencils on white background.
$color-background-stencil = rgb(243, 242, 242)
// Default background color for the whole app.
$color-background = rgb(243, 242, 242)
// Light variant of COLOR_BACKGROUND.
$color-background-dark = rgb(236, 235, 234)
// Used as an alternate background for loading stencils on gray backgrounds.
$color-background-stencil-alt = rgb(236, 235, 234)
// Used as the background color for selected rows or items on list-like components.
$color-background-row-selected = rgb(236, 235, 234)
// Default border color for UI elements.
$color-border = rgb(221, 219, 218)
// Lightest separator color - used as default separator on white backgrounds.
$color-border-separator = rgb(243, 242, 242)
// Medium separator color - used as default separator on light gray backgrounds.
$color-border-separator-alt = rgb(221, 219, 218)
// Darkest separator color - used as an alternate separator color when more differentiation is desired.
$color-border-separator-alt-2 = rgb(201, 199, 197)
// Border color for UI elements related to providing neutral information (not error, success, or warning).
$color-border-info = rgb(112, 110, 107)
// Border color for UI elements related to the offline state.
$color-border-offline = rgb(62, 62, 60)
// Used to delineate the boundary of a component that is being clicked. Specific to builders.
$color-border-selection-active = rgb(243, 242, 242)
// Action label text color
$color-text-action-label = rgb(62, 62, 60)
// Action label active text color
$color-text-action-label-active = rgb(8, 7, 7)
// Body text color
$color-text-default = rgb(8, 7, 7)
// Primary body text color
$color-text-primary = rgb(8, 7, 7)
// Color for text that is purposefully de-emphasized to create visual hierarchy.
$color-text-weak = rgb(62, 62, 60)
// Input placeholder text on dark backgrounds.
$color-text-placeholder-inverse = rgb(236, 235, 234)
// Link text (508)
$color-text-link = rgb(0, 109, 204)
// Default icon color.
$color-text-icon-default = rgb(112, 110, 107)
// Inverse text color for dark backgrounds
$color-text-inverse = rgb(255, 255, 255)
// Input placeholder text.
$color-text-placeholder = rgb(62, 62, 60)
// Weak inverse text color for dark backgrounds
$color-text-inverse-weak = rgb(176, 173, 171)
// Text color for field labels.
$color-text-label = rgb(62, 62, 60)
// Background color for a new notification list item.
$color-background-notification-new = rgb(243, 242, 242)
$color-contrast-primary = rgb(243, 242, 242)
$popover-walkthrough-header-image = "/assets/images/popovers/popover-header.png"
// Disabled input
$color-background-input-disabled = rgb(236, 235, 234)
// Hovered toggle background color.
$color-background-toggle-hover = rgb(150, 148, 146)
$popover-walkthrough-color-background = rgb(3, 46, 97)
$popover-walkthrough-alt-image = "/assets/images/popovers/popover-action.png"
$progress-color-border-shade = rgb(243, 242, 242)
// Toggle background color.
$color-background-toggle = rgb(176, 173, 171)
$popover-walkthrough-alt-nubbin-color-background = rgb(33, 92, 160)
$progress-color-background-shade = rgb(243, 242, 242)
// Default Page Header background color
$page-header-color-background = rgb(243, 242, 242)
// Disabled checkboxes
$color-background-input-checkbox-disabled = rgb(221, 219, 218)
// Color of the spinner dot.
$color-background-spinner-dot = rgb(176, 173, 171)
$table-color-background-header-hover = rgb(255, 255, 255)
// The color of the mask overlay that provides user feedback on interaction.
$color-background-backdrop-tint = rgb(250, 250, 249)
$popover-walkthrough-color-background-alt = rgb(22, 74, 133)
$table-color-background-header = rgb(250, 250, 249)
// The background color of an internal scrollbar.
$color-background-scrollbar = rgb(236, 235, 234)
// Disabled toggle background color.
$color-background-toggle-disabled = rgb(176, 173, 171)
// Background color for toast messaging.
$color-background-toast = rgb(112, 110, 107)
// Background color of comment posts in the feed.
$color-background-post = rgb(243, 242, 242)
// Color of mask overlay that sits on top of an image when text is present.
$color-background-image-overlay = rgba(0, 0, 0, 0.6)
// Used as gray background when more contrast is desired.
$color-background-shade = rgb(236, 235, 234)
$color-picker-slider-thumb-color-background = rgb(243, 242, 242)
// The background color of an internal scrollbar track.
$color-background-scrollbar-track = rgb(201, 199, 197)
$popover-walkthrough-header-color-background = rgb(22, 74, 133)
// Border color on disabled form elements.
$color-border-input-disabled = rgb(201, 199, 197)
// Border color on notification reminders.
$color-border-reminder = rgb(236, 235, 234)
$page-header-color-border = rgb(221, 219, 218)
$color-border-primary = rgb(221, 219, 218)
// Border color for default secondary button
$color-border-button-default = rgb(221, 219, 218)
// Border color on form elements.
$color-border-input = rgb(221, 219, 218)
$color-border-button-focus-inverse = rgb(236, 235, 234)
$card-color-border = rgb(221, 219, 218)
$button-color-border-primary = rgb(221, 219, 218)
$color-border-link-focus-inverse = rgb(236, 235, 234)
$page-header-joined-color-border = rgb(221, 219, 218)
$card-footer-color-border = rgb(221, 219, 218)
$page-header-border-radius = 0.25rem
$table-border-radius = 0 0 0.25rem 0.25rem
// Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.
$shadow-button-focus-inverse = 0 0 3px #ecebea
// Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.
$shadow-link-focus-inverse = 0 0 3px #ecebea
// Hard dropshadow on page header
$page-header-shadow = 0 2px 2px 0 rgba(0, 0, 0, 0.10)
// Hard dropshadow found on outer cards
$card-shadow = 0 2px 2px 0 rgba(0, 0, 0, 0.10)
$form-label-font-size = 0.75rem
$input-static-font-size = 0.875rem
$input-static-font-weight = 400
// Use for active tab.
$tabs-font-weight = 700
// Use for active tab.
$card-font-weight = 700
$page-header-title-font-weight = 700
$brand-band-default-image = "/assets/images/themes/oneSalesforce/banner-brand-default.png"
$banner-user-default-image = "/assets/images/themes/oneSalesforce/banner-user-default.png"
$banner-group-default-image = "/assets/images/themes/oneSalesforce/banner-group-public-default.png"
$component-spacing-margin = 0.75rem
$component-spacing-padding = 1rem
$template-gutters = 0.75rem
$template-profile-gutters = 8rem 0.75rem 0.75rem
$table-cell-spacing = 0.25rem 0.5rem
$card-footer-text-align = center
// Icon color on dark background
$color-text-icon-inverse = rgb(255, 255, 255)
// Input icon
$color-text-input-icon = rgb(176, 173, 171)
// Icon color on dark background - active state
$color-text-icon-inverse-active = rgb(255, 255, 255)
// Color for disabled text in a tab group.
$color-text-tab-label-disabled = rgb(236, 235, 234)
// Input disabled text
$color-text-input-disabled = rgb(62, 62, 60)
// Tertiary body text color
$color-text-tertiary = rgb(150, 148, 146)
// Default icon color - disabled state
$color-text-icon-default-disabled = rgb(221, 219, 218)
// Active state on a standalone link on a dark background.
$color-text-inverse-active = rgb(94, 180, 255)
// 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(236, 235, 234)
// Text color for default secondary button - disabled state
$color-text-button-default-disabled = rgb(221, 219, 218)
// Color for disabled toggles
$color-text-toggle-disabled = rgb(221, 219, 218)
// 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(176, 173, 171)
// Hover state on a standalone link on a dark background.
$color-text-inverse-hover = rgb(176, 173, 171)
// 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(236, 235, 234)
// 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(176, 173, 171)
// Color for interactive utility icons
$color-text-icon-utility = rgb(176, 173, 171)
// Icon color on dark background - hover state
$color-text-icon-inverse-hover = rgb(255, 255, 255)
// Secondary body text color
$color-text-secondary = rgb(62, 62, 60)