@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
499 lines (497 loc) • 21.5 kB
text/less
// 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;