@salesforce-ux/design-system

/* 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 $color-contrast-primary = rgb(243, 242, 242) /* 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) /* 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) /* Used as gray background when more contrast is desired. */ $color-background-shade = rgb(236, 235, 234) /* 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) $color-border-primary = rgb(221, 219, 218) /* 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 /* 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 $component-spacing-margin = 0.75rem $component-spacing-padding = 1rem $card-spacing-margin = 0.75rem $card-footer-padding = 0.75rem 1rem /* Tertiary body text color */ $color-text-tertiary = rgb(150, 148, 146) /* 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) /* Color for text on toast messages. */ $color-text-toast = rgb(236, 235, 234) /* Hover state on a standalone link on a dark background. */ $color-text-inverse-hover = rgb(176, 173, 171) /* Modal header button text color */ $color-text-modal-button = rgb(62, 62, 60) /* Color for interactive utility icons */ $color-text-icon-utility = rgb(176, 173, 171) /* Secondary body text color */ $color-text-secondary = rgb(62, 62, 60) /* Text in stage left navigation. */ $color-text-stage-left = rgb(236, 235, 234) /* Background color for a new notification list item. */ $color-background-notification-new = 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) $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) /* 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 /* 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" $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) /* Default icon color - disabled state */ $color-text-icon-default-disabled = rgb(221, 219, 218) /* 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) /* Color for default text in a tab group. */ $color-text-tab-label = rgb(43, 40, 38) /* 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) /* 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) /* Icon color on dark background - hover state */ $color-text-icon-inverse-hover = rgb(255, 255, 255)