UNPKG

@salesforce-ux/design-system

Version:
516 lines (514 loc) 22.8 kB
/* 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); /* 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(112, 110, 107); /* 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(243, 242, 242); /* 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(243, 242, 242); /* 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); /* Dark variant of COLOR_BACKGROUND. */ @color-background-dark: rgb(236, 235, 234); /* 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, 62, 60); /* Used as an alternate background for loading stencils on gray backgrounds. */ @color-background-stencil-alt: rgb(236, 235, 234); /* 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(236, 235, 234); /* 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(112, 110, 107); /* 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(221, 219, 218); /* 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(201, 199, 197); /* Border color for UI elements related to the offline state. */ @color-border-offline: rgb(62, 62, 60); /* 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(250, 250, 249); /* 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(250, 250, 249); /* 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(221, 219, 218); /* 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; /* Circle for global use, action icon bgd shape */ @border-radius-circle: 50%; @border-width-thin: 1px; @border-width-thick: 2px; /* Shadow for active states on interactive elements. */ @shadow-active: 0 0 2px #0070d2; /* 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); /* 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; /* Default font-family for Salesforce applications */ @font-family: '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; /* 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; /* 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(25, 85, 148, 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(176, 196, 223); /* 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(25, 85, 148); /* 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(176, 196, 223, 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; /* 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; /* 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(62, 62, 60); /* 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(8, 7, 7); /* 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(8, 7, 7); /* 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(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); /* 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(112, 110, 107); /* 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(112, 110, 107); /* Weak inverse text color for dark backgrounds */ @color-text-inverse-weak: rgb(176, 173, 171); /* 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(62, 62, 60); /* Tap target size for elements that rely on width and height dimensions */ @square-tappable: 2.75rem; /* Small tap target size for elements that rely on width and height dimensions */ @square-tappable-small: 2rem; /* X-small tap target size for elements that rely on width and height dimensions */ @square-tappable-x-small: 1.5rem; /* Xx-small tap target size for elements that rely on width and height dimensions */ @square-tappable-xx-small: 1.25rem; /* Tap target size for elements that rely on height or line-height */ @height-tappable: 2.75rem; /* Small tap target size for elements that rely on height or line-height */ @height-tappable-small: 2rem; /* 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;