UNPKG

@salesforce-ux/design-system

Version:
1,082 lines (1,081 loc) 63.7 kB
/* 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) /* Dark 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 /* 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(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 /* 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(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) /* 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) /* Input placeholder text on dark backgrounds. */ $color-text-placeholder-inverse = rgb(233, 234, 236) /* 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) /* 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 /* Brandable modal header */ $color-background-modal-brand = rgb(0, 112, 210) /* Background color for notification list item. */ $color-background-notification = rgb(255, 255, 255) /* Notifications badge background color. */ $color-background-notification-badge-active = rgb(0, 57, 107) /* Notifications badge background color. */ $color-background-notification-badge-hover = rgb(0, 95, 178) $color-contrast-primary = rgb(249, 249, 250) $color-foreground-primary = rgb(255, 255, 255) /* The color of the mask overlay that appears when you enter a modal state. */ $color-background-temp-modal-tint = rgba(126, 140, 153, 0.8) /* Color of the indicator dot. */ $color-background-indicator-dot = rgb(22, 50, 92) /* Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity. */ $color-background-alt-2 = rgb(242, 242, 243) /* Hover color for utility bar item. */ $color-background-utility-bar-hover = rgb(233, 234, 236) /* Brand hover fill color */ $fill-brand-hover = rgb(0, 95, 178) /* Brand fill color */ $fill-brand = rgb(0, 112, 210) /* Background color for default desktop chrome (ex. global header) */ $color-background-chrome-desktop = rgb(255, 255, 255) /* Active button backgrounds on modal headers */ $color-background-modal-button-active = rgba(0, 0, 0, 0.16) /* Selected checkboxes */ $color-background-input-checkbox-selected = rgb(21, 137, 238) /* Default checkboxes */ $color-background-input-checkbox = rgb(255, 255, 255) $color-background-primary = rgb(255, 255, 255) /* The color of the mask overlay that appears when you enter a modal state. */ $color-background-temp-modal-tint-alt = rgba(255, 255, 255, 0.75) $color-background-brand-primary-focus = rgb(0, 95, 178) $color-background-brand-primary-active = rgb(0, 57, 107) $color-background-brand-primary-hover = rgb(0, 95, 178) /* Background color for default mobile chrome (ex. global header) */ $color-background-chrome-mobile = rgb(0, 112, 210) /* Background color for search input fields. */ $color-background-input-search = rgba(0, 0, 0, 0.16) $color-contrast-secondary = rgb(255, 255, 255) /* Secondary top bar background color (child browser, file preview, etc.) */ $color-background-browser = rgb(107, 109, 112) $color-background-brand-primary = rgb(0, 112, 210) /* Used as the default background color for temporary dialog elements, such as the progress spinner background. */ $color-background-temp-modal = rgba(126, 140, 153, 0.8) /* Used as gray background when more contrast is desired. */ $color-background-shade = rgb(233, 234, 236) /* Standard modal header */ $color-background-modal = rgb(255, 255, 255) /* Hovered active toggle background color. */ $color-background-toggle-active-hover = rgb(0, 95, 178) /* Background color for payloads in the feed. */ $color-background-payload = rgb(249, 249, 250) /* Button backgrounds on modal headers */ $color-background-modal-button = rgba(0, 0, 0, 0.07) /* Brand active fill color */ $fill-brand-active = rgb(22, 50, 92) /* Active color for utility bar item. */ $color-background-utility-bar-active = rgb(21, 137, 238) /* Stage left org switcher dropdown arrow background color. */ $color-background-org-switcher-arrow = rgb(6, 28, 63) /* Active toggle background color. */ $color-background-toggle-active = rgb(0, 112, 210) /* Alternative color for UI elements related to errors. */ $color-background-error-alt = rgb(234, 130, 136) /* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */ $page-color-background-primary = rgb(255, 255, 255) /* Used as gray background in conjunction with Shade when more contrast is desired. */ $color-background-shade-dark = rgb(217, 219, 221) /* Notifications badge background color. */ $color-background-notification-badge-focus = rgb(0, 95, 178) /* Background for utility icons that live in the action bar on mobile. */ $color-background-actionbar-icon-utility = rgb(107, 109, 112) $color-background-secondary = rgb(249, 249, 250) /* The borders to create the checkmark */ $color-border-input-checkbox-selected-checkmark = rgb(255, 255, 255) /* Disabled stroke color. */ $color-stroke-disabled = rgb(233, 234, 236) /* Active stroke color for our product brand blue. */ $color-stroke-brand-active = rgb(22, 50, 92) $color-border-primary = rgb(217, 219, 221) $color-border-brand-primary-focus = rgb(0, 112, 210) $color-border-brand-primary-hover = rgb(0, 112, 210) /* Border color for brandable primary button */ $color-border-button-brand = rgb(0, 112, 210) $color-border-brand-primary-active = rgb(0, 57, 107) $color-border-brand-primary = rgb(21, 137, 238) $color-border-button-focus-inverse = rgb(233, 234, 236) /* Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders. */ $color-border-canvas-element-selection-hover = rgb(0, 95, 178) /* Used to delineate the boundary of a selected canvas element. Specific to builders. */ $color-border-canvas-element-selection = rgb(94, 180, 255) /* Hover stroke color for our product brand blue. */ $color-stroke-brand-hover = rgb(0, 112, 210) /* Stroke color for our global header buttons. */ $color-stroke-header-button = rgb(171, 173, 176) $color-border-link-focus-inverse = rgb(233, 234, 236) /* Our product brand blue. */ $color-stroke-brand = rgb(0, 112, 210) /* Used to delineate the boundary of a specific region. Specific to builders. */ $color-border-hint = rgb(42, 66, 108) /* Deprecated */ $elevation-32 = 32 /* Deprecated */ $elevation-shadow-16 = 0 16px 16px 0 rgba(0, 0, 0, 0.16) /* Deprecated */ $elevation-inverse-shadow-0 = none /* 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 #E9EAEC /* Deprecated: Use SHADOW_DOCKED */ $elevation-inverse-shadow-2 = 0 -2px 2px 0 rgba(0, 0, 0, 0.16) /* Deprecated */ $elevation-inverse-shadow-4 = 0 -4px 4px 0 rgba(0, 0, 0, 0.16) /* Deprecated */ $elevation-16 = 16 /* Deprecated */ $elevation-shadow-3-below = 0 3px 3px 0 rgba(0, 0, 0, 0.16) inset $shadow-soft-primary-hover = none /* Deprecated */ $elevation-inverse-shadow-8 = 0 -8px 8px 0 rgba(0, 0, 0, 0.16) /* Soft dropshadow found on general UI elements such as containers */ $shadow-soft-primary = none /* Deprecated */ $elevation-inverse-shadow-32 = 0 -32px 32px 0 rgba(0, 0, 0, 0.16) /* Hard dropshadow found on general UI elements such as containers */ $shadow-hard-primary = none /* Shadow above overflow menu close bar. */ $shadow-action-overflow-footer = 0 -2px 4px #F9F9FA /* Deprecated */ $elevation-0 = 0 /* Deprecated */ $elevation-3-inset = -3 /* Deprecated */ $elevation-2 = 2 /* Shadow for overlays. */ $shadow-overlay = 0 -2px 4px rgba(0, 0, 0, 0.07) /* Shadow for buttons. */ $shadow-button = 0 1px 1px 0 rgba(0, 0, 0, 0.05) /* Deprecated */ $elevation-4 = 4 /* Deprecated */ $elevation-shadow-0 = none /* Deprecated */ $elevation-inverse-shadow-16 = 0 -16px 16px 0 rgba(0, 0, 0, 0.16) /* Deprecated */ $elevation-shadow-2 = 0 2px 2px 0 rgba(0, 0, 0, 0.16) /* Deprecated */ $elevation-8 = 8 /* Deprecated */ $elevation-shadow-4 = 0 4px 4px 0 rgba(0, 0, 0, 0.16) /* Inset shadow for editable grid */ $shadow-focus-inset = 0 0 2px 2px #1589EE inset /* Deprecated */ $elevation-inverse-shadow-3-below = 0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset $shadow-soft-primary-active = none /* Deprecated */ $elevation-shadow-8 = 0 8px 8px 0 rgba(0, 0, 0, 0.16) /* Shadow on images. */ $shadow-image = 0 1px 1px rgba(0, 0, 0, 0.16) /* Deprecated */ $elevation-shadow-32 = 0 32px 32px 0 rgba(0, 0, 0, 0.16) /* Medium headings. */ $font-size-heading-medium = 1.125rem $font-size-medium = 1rem /* Small body text. */ $font-size-text-small = 0.8125rem $font-size-medium-a = 1.125rem $font-size-x-large = 1.5rem $font-size-x-large-a = 1.57rem /* Extra large headings. */ $font-size-heading-x-large = 1.75rem $font-size-xx-large = 2rem /* Extra extra small text. */ $font-size-text-xx-small = 0.625rem $font-size-large = 1.25rem /* Large headings. */ $font-size-heading-large = 1.5rem /* Extra large body text. */ $font-size-text-x-large = 1.25rem $font-size-x-small = 0.625rem /* Extra Extra small headings. */ $font-size-heading-xx-small = 0.625rem /* Extra small headings. */ $font-size-heading-x-small = 0.75rem /* Large body text. */ $font-size-text-large = 1.125rem $font-size-small = 0.875rem /* Medium body text. */ $font-size-text-medium = 1rem /* Extra small body text. */ $font-size-text-x-small = 0.75rem /* Small headings. */ $font-size-heading-small = 0.875rem /* Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings. */ $font-family-text = 'Salesforce Sans', Arial, sans-serif /* Use squareIconMediumBoundary */ $square-icon-medium = 2.375rem /* Small tap target size */ $square-icon-small = 1rem /* Very small icons to replace force font with temporary override. */ $square-icon-xx-small-content = .875rem /* Large tap target size. */ $square-icon-large = 3.125rem $component-spacing-margin = 0 $component-spacing-padding = 1rem /* Hovered icon color for a button that has a parent element that has a hover state */ $color-text-icon-inverse-hint-hover = rgba(255, 255, 255, 0.75) /* Color for text on a selected tab in a tab group. */ $color-text-tab-label-selected = rgb(0, 112, 210) /* Icon color for a button that has a parent element that has a hover state on a dark background. This is the default text/icon color for that button before its parent has been hovered over. */ $color-text-icon-inverse-hint = rgba(255, 255, 255, 0.5) /* Color for disabled text in a tab group. */ $color-text-tab-label-disabled = rgb(233, 234, 236) /* Tertiary body text color */ $color-text-tertiary = rgb(107, 109, 112) /* Active state on a standalone link on a dark background. */ $color-text-inverse-active = rgb(94, 180, 255) /* Primary body text color */ $color-text-primary = rgb(22, 50, 92) $color-text-link-primary-focus = rgb(0, 112, 210) /* Color for text in focus state in a tab group. */ $color-text-tab-label-focus = rgb(0, 95, 178) /* 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(233, 234, 236) /* Text color for pills. */ $color-text-pill = rgb(0, 112, 210) $color-text-link-primary-hover = rgb(0, 112, 210) /* Color for text in active state in a tab group. */ $color-text-tab-label-active = rgb(0, 57, 107) /* Color for text in hover state in a tab group. */ $color-text-tab-label-hover = rgb(0, 95, 178) /* Color for text on toast messages. */ $color-text-toast = rgb(233, 234, 236) /* Color for disabled toggles */ $color-text-toggle-disabled = rgb(217, 219, 221) /* Top bar icon color */ $color-text-browser = rgb(255, 255, 255) $color-text-link-primary-active = rgb(0, 57, 107) $color-text-link-primary = rgb(0, 112, 210) /* Top bar active icon color */ $color-text-browser-active = rgba(0, 0, 0, 0.4) /* Color for non-interactive icons that represent a selected item in a list */ $color-text-icon-brand = rgb(0, 112, 210) /* Hover state on a standalone link on a dark background. */ $color-text-inverse-hover = rgb(171, 173, 176) /* Modal header title */ $color-text-modal = rgb(255, 255, 255) /* Modal header button text color */ $color-text-modal-button = rgb(107, 109, 112) /* Color for interactive utility icons */ $color-text-icon-utility = rgb(171, 173, 176) /* Secondary body text color */ $color-text-secondary = rgb(107, 109, 112) /* Text in stage left navigation. */ $color-text-stage-left = rgb(233, 234, 236) /* Default value for text-transform */ $text-transform = none /* Background color for a new notification list item. */ $color-background-notification-new = rgb(249, 249, 250) /* Focused header button icon color */ $fill-header-button-focus = rgb(0, 112, 210) /* Background color for reminder notification on hover */ $color-background-reminder-hover = rgb(255, 255, 255) /* Notifications badge background color. */ $color-background-notification-badge = rgb(194, 57, 52) /* Hovered header button icon color */ $fill-header-button-hover = rgb(0, 95, 178) /* Disabled input */ $color-background-input-disabled = rgb(233, 234, 236) /* Hovered toggle background color. */ $color-background-toggle-hover = rgb(145, 146, 151) /* Background color for reminder notification */ $color-background-reminder = rgb(244, 246, 249) /* Hovered background color for success buttons */ $color-background-button-success-hover = rgb(4, 132, 75) /* Header button icon color */ $fill-header-button = rgb(176, 173, 171) /* Toggle background color. */ $color-background-toggle = rgb(171, 173, 176) /* Background color for success buttons */ $color-background-button-success = rgb(75, 202, 129) /* Disabled checkboxes */ $color-background-input-checkbox-disabled = rgb(217, 219, 221) /* Background color for pills. */ $color-background-pill = rgb(255, 255, 255) /* Color of the spinner dot. */ $color-background-spinner-dot = rgb(171, 173, 176) /* The color of the mask overlay that provides user feedback on interaction. */ $color-background-backdrop-tint = rgb(249, 249, 250) /* Selected input field (when user has clicked or tabbed into field) */ $color-background-input-active = rgb(255, 255, 255) /* The background color of an internal scrollbar. */ $color-background-scrollbar = rgb(233, 234, 236) /* Disabled toggle background color. */ $color-background-toggle-disabled = rgb(171, 173, 176) /* Background color for toast messaging. */ $color-background-toast = rgb(107, 109, 112) /* Background color of comment posts in the feed. */ $color-background-post = rgb(249, 249, 250) /* Default input field */ $color-background-input = rgb(255, 255, 255) /* Background color for success toast messaging. */ $color-background-toast-success = rgb(4, 132, 75) /* Color of mask overlay that sits on top of an image when text is present. */ $color-background-image-overlay = rgba(0, 0, 0, 0.4) /* Active background color for success buttons */ $color-background-button-success-active = rgb(4, 132, 75) /* Background color for error toast messaging. */ $color-background-toast-error = rgb(194, 57, 52) /* The background color of an internal scrollbar track. */ $color-background-scrollbar-track = rgb(196, 198, 202) /* Background color for input field that has encountered an error. */ $color-background-input-error = rgb(255, 221, 225) /* Border color for disabled inverse button. */ $color-border-button-inverse-disabled = rgba(255, 255, 255, 0.15) /* Hovered border color for a button with an icon that has a parent element that has a hover state */ $color-border-icon-inverse-hint-hover = rgba(255, 255, 255, 0.75) /* Border color for a button with an icon that has a parent element that has a hover state */ $color-border-icon-inverse-hint = rgba(255, 255, 255, 0.5) /* Border color for an active tab. */ $color-border-tab-active = rgb(255, 255, 255) /* Border color on disabled form elements. */ $color-border-input-disabled = rgb(196, 198, 202) /* Border color on notification reminders. */ $color-border-reminder = rgb(236, 235, 234) /* Border color for brandable primary button - disabled state */ $color-border-button-brand-disabled = rgba(0, 0, 0, 0) /* Border color for default secondary button */ $color-border-button-default = rgb(217, 219, 221) /* Border color on active form elements. */ $color-border-input-active = rgb(21, 137, 238) /* Border color on form elements. */ $color-border-input = rgb(217, 219, 221) /* These borders create the faux checkmark when the checkbox toggle is in the checked state. */ $color-border-toggle-checked = rgb(255, 255, 255) /* Border color for a selected tab in a tab group. */ $color-border-tab-selected = rgb(0, 112, 210) $border-stroke-width-thin = 1px $border-stroke-width-thick = 2px /* Shadow for notifications that should be elevated above other components but under modals. */ $shadow-reminder = 0 2px 3px 0 rgba(0, 0, 0, 0.20) /* Custom glow for focus states on UI elements with explicit containers. */ $shadow-button-focus = 0 0 3px #0070D2 /* Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds. */ $shadow-button-focus-inverse = 0 0 3px #E9EAEC /* Shadow to make inline edit card pop out. */ $shadow-inline-edit = 0 2px 4px 4px rgba(0, 0, 0, 0.16) /* Shadow on elements that are docked to the bottom of the viewport. */ $shadow-docked = 0 -2px 2px 0 rgba(0, 0, 0, 0.16) /* Shadow for header. */ $shadow-header = 0 2px 4px rgba(0, 0, 0, 0.07) /* 4.8 seconds */ $duration-toast-short = 4.8s /* 9.6 seconds */ $duration-toast-medium = 9.6s $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" $banner-user-default-image = "" $banner-group-default-image = "" $user-default-avatar = "/assets/images/profile_avatar_200.png" $user-default-avatar-medium = "/assets/images/profile_avatar_160.png" $user-default-avatar-small = "/assets/images/profile_avatar_96.png" $group-default-avatar = "/assets/images/group_avatar_200.png" $group-default-avatar-medium = "/assets/images/group_avatar_160.png" $group-default-avatar-small = "/assets/images/group_avatar_96.png" /* Line heights for tabs */ $line-height-tab = 2.5rem $border-radius-pill = 15rem /* Minimum height of a pill. */ $height-pill = 1.625rem /* Brand header. Phone 44px; Tablet 50px */ $height-header = 2.75rem /* Action footer menu. Phone 44px; Tablet 50px */ $height-footer = 3.75rem /* Text input height */ $height-input = 1.875rem /* Stage left for desktop when closed (showing icons only). */ $width-stage-left-collapsed = 4rem /* Stage left for desktop when open. */ $width-stage-left-expanded = 15rem /* Maximum width for action overflow menu so that it's not full-screen for tablet. */ $max-width-action-overflow-menu = 512px /* Default amount of line breaks before text is truncated */ $line-clamp = 3 /* Icon color on dark background */ $color-text-icon-inverse = rgb(255, 255, 255) /* 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-disabled = rgba(255, 255, 255, 0.5) /* Input icon */ $color-text-input-icon = rgb(171, 173, 176) /* Icon color on dark background - active state */ $color-text-icon-inverse-active = rgb(255, 255, 255) /* Text color for default secondary button - hover state */ $color-text-button-default-hover = rgb(0, 112, 210) /* Input disabled text */ $color-text-input-disabled = rgb(107, 109, 112) /* Text color for default secondary button */ $color-text-button-default = rgb(0, 112, 210) /* Default icon color - disabled state */ $color-text-icon-default-disabled = rgb(217, 219, 221) /* Text color for brandable primary button - disabled state */ $color-text-button-brand-disabled = rgb(255, 255, 255) /* Text color for brandable primary button - hover state */ $color-text-button-brand-hover = rgb(255, 255, 255) /* Default icon color - hover state. */ $color-text-icon-default-hover = rgb(0, 112, 210) /* Text color for brandable primary button */ $color-text-button-brand = rgb(255, 255, 255) /* Text color for default secondary button - disabled state */ $color-text-button-default-disabled = rgb(217, 219, 221) /* Color for default text in a tab group. */ $color-text-tab-label = rgb(22, 50, 92) /* Default icon color - active state. */ $color-text-icon-default-active = rgb(0, 57, 107) /* 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(171, 173, 176) /* Text color for brandable primary button - active state */ $color-text-button-brand-active = rgb(255, 255, 255) /* 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(233, 234, 236) /* Text color for default secondary button - active state */ $color-text-button-default-active = rgb(0, 112, 210) /* Icon color on dark background - disabled state */ $color-text-icon-inverse-disabled = rgba(255, 255, 255, 0.15) /* 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(171, 173, 176) /* Icon color on dark background - hover state */ $color-text-icon-inverse-hover = rgb(255, 255, 255) /* Typed input text */ $color-text-input-focus-inverse = rgb(22, 50, 92) /* White avatar group background color. */ $avatar-group-color-background-lightest = rgb(255, 255, 255) /* Dark gray avatar group background color. */ $avatar-group-color-background-inverse = rgb(112, 110, 107) /* White badge background color. */ $badge-color-background-lightest = rgb(255, 255, 255) /* Dark gray badge background color. */ $badge-color-background-inverse = rgb(112, 110, 107) $brand-band-default-image = "" $brand-band-color-background-primary = rgba(0, 0, 0, 0) $brand-band-color-background-primary-transparent = rgba(0, 0, 0, 0) $brand-band-color-background-secondary = rgba(0, 0, 0, 0) $brand-band-color-background-secondary-transparent = rgba(0, 0, 0, 0) $brand-band-image-height-small = 6rem $brand-band-image-height-medium = 12.5rem $brand-band-image-height-large = 18.75rem $brand-band-scrim-height = 3.125rem $template-gutters = 0 $template-profile-gutters = 0 $button-icon-color-border-primary = rgb(255, 255, 255) $button-icon-boundary-touch = 2.75rem $button-color-border-primary = rgb(216, 221, 230) $button-color-border-brand-primary = rgb(0, 112, 210) $button-color-border-secondary = rgba(255, 255, 255, 0.8) $button-border-radius = .25rem /* Default secondary button - focus state */ $color-background-button-default-focus = rgb(244, 246, 249) /* Use BRAND_ACCESSIBLE to pick up theming capabilities */ $button-color-background-brand-primary = rgb(0, 112, 210) /* Disabled button backgrounds on inverse/dark backgrounds */ $color-background-button-inverse-disabled = rgba(0, 0, 0, 0) /* Default secondary button - hover state */ $color-background-button-default-hover = rgb(244, 246, 249) /* Default secondary button */ $color-background-button-default = rgb(255, 255, 255) /* Background color for icon-only button - disabled state */ $color-background-button-icon-disabled = rgb(255, 255, 255) /* Background color for icon-only button - focus state */ $color-background-button-icon-focus = rgb(244, 246, 249) $button-color-background-secondary = rgba(255, 255, 255, 0.8) /* Brandable primary button - disabled state */ $color-background-button-brand-disabled = rgb(224, 229, 238) /* Brandable primary button - hover state */ $color-background-button-brand-hover = rgb(0, 95, 178) /* Active button backgrounds on inverse backgrounds on mobile */ $color-background-button-inverse-active = rgba(0, 0, 0, 0.24) /* Background color for icon-only button - hover state */ $color-background-button-icon-hover = rgb(244, 246, 249) /* Brandable primary button */ $color-background-button-brand = rgb(0, 112, 210) /* Background color for icon-only button */ $color-background-button-icon = rgba(0, 0, 0, 0) /* Default secondary button - disabled state */ $color-background-button-default-disabled = rgb(255, 255, 255) /* Background color for icon-only button - active state */ $color-background-button-icon-active = rgb(238, 241, 246) /* Brandable primary button - active state */ $color-background-button-brand-active = rgb(0, 57, 107) /* Button backgrounds on inverse/dark backgrounds */ $color-background-button-inverse = rgba(0, 0, 0, 0) $button-color-background-primary = rgb(255, 255, 255) /* Default secondary button - active state */ $color-background-button-default-active = rgb(238, 241, 246) /* Line heights for regular buttons */ $line-height-button = 1.875rem /* Line heights for small buttons */ $line-height-button-small = 1.75rem /* Line height for touch screens */ $button-line-height-touch = 2.65rem $button-color-text-primary = rgb(255, 255, 255) /* Default Card component background color. */ $card-color-background = rgb(255, 255, 255) $card-color-border = rgb(221, 219, 218) $card-footer-color-border = rgba(0, 0, 0, 0) $card-shadow = none /* Use for active tab. */ $card-font-weight = 400 $card-footer-margin = 0.75rem $card-body-padding = 0 1rem $card-wrapper-spacing = 1rem $card-header-padding = 0.75rem 1rem 0 $card-spacing-large = 1.5rem $card-header-margin = 0 0 0.75rem /* Use for vertical spacing between cards */ $card-spacing-margin = 1rem $card-footer-padding = 0 1rem 0.75rem $card-spacing-small = 0.75rem $card-footer-text-align = right /* Default background for carousel card */ $carousel-color-background = rgb(255, 255, 255) /* Default background for carousel navigation indicators */ $carousel-indicator-color-background = rgb(255, 255, 255) /* Default hover background for carousel navigation indicators */ $carousel-indicator-color-background-hover = rgb(250, 250, 249) /* Default focus background for carousel navigation indicators */ $carousel-indicator-color-background-focus = rgb(0, 95, 178) /* Default background for active state on carousel navigation indicators */ $carousel-indicator-color-background-active = rgb(0, 112, 210) /* Default width for carousel indicator width */ $carousel-indicator-width = 1rem /* Inbound chat message background color. */ $chat-message-color-background-inbound = rgb(242, 242, 243) /* Outbound chat message background color. */ $chat-message-color-background-outbound = rgb(0, 95, 178) /* Outbound agent chat message background color. */ $chat-message-color-background-outbound-agent = rgb(107, 109, 112) /* Status chat message background color. */ $chat-message-color-background-status = rgb(255, 255, 255) /* Line heights for toggle buttons */ $line-height-toggle = 1.3rem /* Slider size for toggle. */ $square-toggle-slider = 1.25rem /* Slider width. */ $width-toggle = 3rem /* Slider height. */ $height-toggle = 1.5rem $color-picker-slider-thumb-color-background = rgb(250, 250, 249) $color-picker-slider-thumb-border-color = rgb(81, 79, 77) $color-picker-swatch-shadow = inset 0 0 1px rgba(0,0,0,0.4) $color-picker-input-custom-hex-font-size = 0.75rem $color-picker-selector-width = 14rem $color-picker-swatches-width = 13.3rem $color-picker-range-height = 5rem $color-picker-slider-height = 1.5rem $color-picker-thumb-width = 0.375rem $color-picker-range-indicator-size = 0.75rem $color-picker-input-custom-hex-width = 4.2rem $color-picker-swatch-size = 1.25rem /* Alternating row background color for tables */ $table-color-background-stripes = rgb(250, 250, 249) /* Default background color for table headers */ $table-color-background-header = rgb(255, 255, 255) /* Hover state for table header cells */ $table-color-background-header-hover = rgb(250, 250, 249) /* Focused state for table header