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

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);