// Variable spacing token for size X Large
$var-spacing-x-large: 2rem !default;
// Variable horizontal spacing token for size Small
$var-spacing-horizontal-small: 0.75rem !default;
// Variable horizontal spacing token for size XX Large
$var-spacing-horizontal-xx-large: 3rem !default;
// Constant spacing token for size X small
$spacing-x-small: 0.5rem !default;
// Constant spacing token for size XXX small
$spacing-xxx-small: 0.125rem !default;
// Constant spacing token for size XX small
$spacing-xx-small: 0.25rem !default;
$border-width-thin: 1px !default;
// Variable vertical spacing token for size Large
$var-spacing-vertical-large: 1.5rem !default;
// Variable spacing token for size Large
$var-spacing-large: 1.5rem !default;
// Variable spacing token for size Medium
$var-spacing-medium: 1rem !default;
// Variable vertical spacing token for size Medium
$var-spacing-vertical-medium: 1rem !default;
// Variable vertical spacing token for size X Small
$var-spacing-vertical-x-small: 0.5rem !default;
// Constant spacing token for size Small
$spacing-small: 0.75rem !default;
// Variable vertical spacing token for size XXX Small
$var-spacing-vertical-xxx-small: 0.125rem !default;
// Variable spacing token for size X Small
$var-spacing-x-small: 0.5rem !default;
// Variable spacing token for size XXX Small
$var-spacing-xxx-small: 0.125rem !default;
// Variable horizontal spacing token for size X Large
$var-spacing-horizontal-x-large: 2rem !default;
// Variable horizontal spacing token for size XX Small
$var-spacing-horizontal-xx-small: 0.25rem !default;
// Variable spacing token for size XX Large
$var-spacing-xx-large: 3rem !default;
$border-width-thick: 2px !default;
// Constant spacing token for size Medium
$spacing-medium: 1rem !default;
// Variable vertical spacing token for size XX Large
$var-spacing-vertical-xx-large: 3rem !default;
// Variable vertical spacing token for size Small
$var-spacing-vertical-small: 0.75rem !default;
// Variable spacing token for size Small
$var-spacing-small: 0.75rem !default;
// Constant spacing token for 0
$spacing-none: 0 !default;
// Variable horizontal spacing token for size Large
$var-spacing-horizontal-large: 1.5rem !default;
// Constant spacing token for size X Large
$spacing-x-large: 2rem !default;
// Constant spacing token for size XX Large
$spacing-xx-large: 3rem !default;
// Variable horizontal spacing token for size XXX Small
$var-spacing-horizontal-xxx-small: 0.125rem !default;
// Variable horizontal spacing token for size X Small
$var-spacing-horizontal-x-small: 0.5rem !default;
// Variable spacing token for size XX Small
$var-spacing-xx-small: 0.25rem !default;
// Variable horizontal spacing token for size Medium
$var-spacing-horizontal-medium: 1rem !default;
// Variable vertical spacing token for size XX Small
$var-spacing-vertical-xx-small: 0.25rem !default;
// Variable vertical spacing token for size X Large
$var-spacing-vertical-x-large: 2rem !default;
// Constant spacing token for size Large
$spacing-large: 1.5rem !default;
// Constant typography token for font size 1
$font-size-1: 0.625rem !default;
// Constant typography token for font size 2
$font-size-2: 0.75rem !default;
// Constant typography token for font size 3
$font-size-3: 0.8125rem !default;
// Variable typography token for font size 10
$var-font-size-10: 2rem !default;
// Constant typography token for font size 4
$font-size-4: 0.875rem !default;
// Variable typography token for font size 11
$var-font-size-11: 2.625rem !default;
// Constant typography token for font size 5
$font-size-5: 1rem !default;
// Constant typography token for font size 6
$font-size-6: 1.125rem !default;
// Constant typography token for font size 7
$font-size-7: 1.25rem !default;
// Constant typography token for font size 8
$font-size-8: 1.5rem !default;
// Variable typography token for font size 1
$var-font-size-1: 0.625rem !default;
// Constant typography token for font size 9
$font-size-9: 1.75rem !default;
// Variable typography token for font size 2
$var-font-size-2: 0.75rem !default;
// Variable typography token for font size 3
$var-font-size-3: 0.8125rem !default;
// Constant typography token for font size 10
$font-size-10: 2rem !default;
// Variable typography token for font size 4
$var-font-size-4: 0.875rem !default;
// Constant typography token for font size 11
$font-size-11: 2.625rem !default;
// Variable typography token for font size 5
$var-font-size-5: 1rem !default;
// Variable typography token for font size 6
$var-font-size-6: 1.125rem !default;
// Variable typography token for font size 7
$var-font-size-7: 1.25rem !default;
// Variable typography token for font size 8
$var-font-size-8: 1.5rem !default;
// Variable typography token for font size 9
$var-font-size-9: 1.75rem !default;
// Unitless line-heights for reusability
$line-height-heading: 1.25 !default;
// Unitless line-heights for reusability
$line-height-text: 1.5 !default;
// Remove extra leading. Unitless line-heights for reusability
$line-height-reset: 1 !default;
// Line heights for tabs
$line-height-tab: 2.5rem !default;
// Variable unitless line-heights for reusability
$var-line-height-text: 1.5 !default;
// Generic sizing token scale for UI components.
$size-x-small: 12rem !default;
// Generic sizing token scale for UI components.
$size-xxx-small: 3rem !default;
// Large utility icon without border.
$square-icon-utility-large: 1.5rem !default;
// Generic sizing token scale for UI components.
$size-xx-small: 6rem !default;
// Search Results: Outer colored tile
$square-icon-small-boundary: 1.5rem !default;
// Generic sizing token scale for UI components.
$size-small: 15rem !default;
// Medium utility icon without border.
$square-icon-utility-medium: 1.25rem !default;
// Very small icon button boundary.
$square-icon-x-small-boundary: 1.25rem !default;
// Small utility icon without border.
$square-icon-utility-small: 1rem !default;
// Stage left & actions: Outer colored tile
$square-icon-medium-boundary: 2rem !default;
// Anchor: Icon content (white shape)
$square-icon-large-content: 2rem !default;
// Anchor: Outer colored tile
$square-icon-large-boundary: 3rem !default;
// Generic sizing token scale for UI components.
$size-medium: 20rem !default;
// Stage left & actions: Icon content (white shape)
$square-icon-medium-content: 1rem !default;
// Generic sizing token scale for UI components.
$size-x-large: 40rem !default;
// Very small icons in icon buttons.
$square-icon-x-small-content: .5rem !default;
// Variable medium boundary for square icons
$var-square-icon-medium-boundary: 2rem !default;
// Icon button boundary.
$square-icon-medium-boundary-alt: 2.25rem !default;
// Generic sizing token scale for UI components.
$size-xx-large: 60rem !default;
// Anchor: avatar
$square-icon-large-boundary-alt: 5rem !default;
// Generic sizing token scale for UI components.
$size-large: 25rem !default;
// Search Results: Icon content (white shape)
$square-icon-small-content: .75rem !default;
// Very very small icon button boundary.
$square-icon-xx-small-boundary: 1rem !default;
// Alternate medium tap target size
$square-icon-medium-content-alt: 0.875rem !default;
$border-stroke-width-thin: 1px !default;
$border-stroke-width-thick: 2px !default;
$component-spacing-margin: 0 !default;
$component-spacing-padding: 1rem !default;
// Small tap target size
$square-icon-small: 1rem !default;
// Very small icons to replace force font with temporary override.
$square-icon-xx-small-content: .875rem !default;
// Minimum height of a pill.
$height-pill: 1.625rem !default;
// Large tap target size.
$square-icon-large: 3.125rem !default;
// Use squareIconMediumBoundary
$square-icon-medium: 2.375rem !default;
// Brand fill color
$fill-brand: rgb(0, 112, 210) !default;
// Brand hover fill color
$fill-brand-hover: rgb(0, 95, 178) !default;
// Brand active fill color
$fill-brand-active: rgb(22, 50, 92) !default;
// Header button icon color
$fill-header-button: rgb(176, 173, 171) !default;
// Hovered header button icon color
$fill-header-button-hover: rgb(0, 95, 178) !default;
// Focused header button icon color
$fill-header-button-focus: rgb(0, 112, 210) !default;
// Use for large headings only.
$font-weight-light: 300 !default;
// Most all body copy.
$font-weight-regular: 400 !default;
// Used sparingly for emphasized text within regular body copy.
$font-weight-bold: 700 !default;
// Medium headings.
$font-size-heading-medium: 1.125rem !default;
$font-size-medium: 1rem !default;
// Small body text.
$font-size-text-small: .8125rem !default;
$font-size-medium-a: 1.125rem !default;
$font-size-x-large: 1.5rem !default;
$font-size-x-large-a: 1.57rem !default;
// Extra large headings.
$font-size-heading-x-large: 2rem !default;
$font-size-xx-large: 2rem !default;
// Extra extra small text.
$font-size-text-xx-small: .625rem !default;
$font-size-large: 1.25rem !default;
// Large headings.
$font-size-heading-large: 1.5rem !default;
// Extra large body text.
$font-size-text-x-large: 1.25rem !default;
$font-size-x-small: 0.625rem !default;
// Extra Extra small headings.
$font-size-heading-xx-small: .625rem !default;
// Extra small headings.
$font-size-heading-x-small: .75rem !default;
// Large body text.
$font-size-text-large: 1.125rem !default;
$font-size-small: 0.875rem !default;
// Medium body text.
$font-size-text-medium: 1rem !default;
// Extra small body text.
$font-size-text-x-small: .75rem !default;
// Small headings.
$font-size-heading-small: .875rem !default;
// Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.
$font-family: 'Salesforce Sans', Arial, sans-serif !default;
$font-family-text: 'Salesforce Sans', Arial, sans-serif !default;
$font-family-heading: 'Salesforce Sans', Arial, sans-serif !default;
$font-family-monospace: Consolas, Menlo, Monaco, Courier, monospace !default;
$border-radius-small: .125rem !default;
// Icons in lists, record home icon, unbound input elements
$border-radius-medium: .25rem !default;
$border-radius-large: .5rem !default;
$border-radius-pill: 15rem !default;
// Circle for global use, action icon bgd shape
$border-radius-circle: 50% !default;
// The borders to create the checkmark
$color-border-input-checkbox-selected-checkmark: rgb(255, 255, 255) !default;
// Border color for disabled inverse button.
$color-border-button-inverse-disabled: rgba(255, 255, 255, 0.15) !default;
// 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) !default;
// Dark alternative border color for UI elements related to errors.
$color-border-error-dark: rgb(234, 130, 136) !default;
// 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) !default;
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
$color-border-brand-dark: rgb(0, 112, 210) !default;
// Border color for UI elements related to providing neutral information (not error, success, or warning).
$color-border-info: rgb(107, 109, 112) !default;
// Border color for UI elements that have to do with warnings.
$color-border-warning: rgb(255, 183, 93) !default;
// Border color for an active tab.
$color-border-tab-active: rgb(255, 255, 255) !default;
// Disabled stroke color.
$color-stroke-disabled: rgb(233, 234, 236) !default;
// Hover border color for UI elements that have to do with destructive actions.
$color-border-destructive-hover: rgb(166, 26, 20) !default;
// Default border color for UI elements.
$color-border: rgb(217, 219, 221) !default;
// Border color on disabled form elements.
$color-border-input-disabled: rgb(196, 198, 202) !default;
// Dark alternative border color for UI elements that have to do with success.
$color-border-success-dark: rgb(4, 132, 75) !default;
// Border color on notification reminders.
$color-border-reminder: rgb(236, 235, 234) !default;
// Border color for brandable primary button - disabled state
$color-border-button-brand-disabled: rgba(0, 0, 0, 0) !default;
// Border color for UI elements that have to do with destructive actions.
$color-border-destructive: rgb(194, 57, 52) !default;
$color-border-primary: rgb(217, 219, 221) !default;
// Border color for default secondary button
$color-border-button-default: rgb(217, 219, 221) !default;
// Darkest separator color - used as an alternate separator color when more differentiation is desired.
$color-border-separator-alt-2: rgb(196, 198, 202) !default;
// Border color for UI elements related to the offline state.
$color-border-offline: rgb(62, 64, 65) !default;
$color-border-brand-primary-focus: rgb(0, 112, 210) !default;
// Border color for UI elements that have to do with success.
$color-border-success: rgb(75, 202, 129) !default;
// Lightest separator color - used as default separator on white backgrounds.
$color-border-separator: rgb(249, 249, 250) !default;
// Our product brand blue.
$color-border-brand: rgb(21, 137, 238) !default;
$color-border-brand-primary-hover: rgb(0, 112, 210) !default;
// Used to delineate the boundary of a component that is being clicked. Specific to builders.
$color-border-selection-active: rgb(249, 249, 250) !default;
// Border color for brandable primary button
$color-border-button-brand: rgb(0, 112, 210) !default;
// Border color for UI elements that have to do with errors.
$color-border-error: rgb(194, 57, 52) !default;
// Used to delineate the boundary of a component that is being hovered over. Specific to builders.
$color-border-selection-hover: rgb(21, 137, 238) !default;
$color-border-brand-primary-active: rgb(0, 57, 107) !default;
// Border color on active form elements.
$color-border-input-active: rgb(21, 137, 238) !default;
// Border color on form elements.
$color-border-input: rgb(217, 219, 221) !default;
$color-border-brand-primary: rgb(21, 137, 238) !default;
// These borders create the faux checkmark when the checkbox toggle is in the checked state.
$color-border-toggle-checked: rgb(255, 255, 255) !default;
$color-border-button-focus-inverse: rgb(233, 234, 236) !default;
// 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) !default;
// Border color for UI elements related to the concept of an external user or customer.
$color-border-customer: rgb(255, 154, 60) !default;
// Used to delineate the boundary of a selected component. Specific to builders.
$color-border-selection: rgb(0, 112, 210) !default;
// 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) !default;
// Used as the border color for selected rows or items on list-like components.
$color-border-row-selected: rgb(0, 112, 210) !default;
// Medium separator color - used as default separator on light gray backgrounds.
$color-border-separator-alt: rgb(217, 219, 221) !default;
// Used to delineate the boundary of a selected canvas element. Specific to builders.
$color-border-canvas-element-selection: rgb(94, 180, 255) !default;
// Border color to match UI elements using color-background-inverse.
$color-border-inverse: rgb(6, 28, 63) !default;
// Stroke color for our global header buttons.
$color-stroke-header-button: rgb(171, 173, 176) !default;
// Active border color for UI elements that have to do with destructive actions.
$color-border-destructive-active: rgb(135, 5, 0) !default;
// Alternative border color for UI elements related to errors.
$color-border-error-alt: rgb(234, 130, 136) !default;
$color-border-link-focus-inverse: rgb(233, 234, 236) !default;
// Border color for a selected tab in a tab group.
$color-border-tab-selected: rgb(0, 112, 210) !default;
// Used to delineate the boundary of a specific region. Specific to builders.
$color-border-hint: rgb(42, 66, 108) !default;
// Used as a separator on dark backgrounds, such as stage left navigation.
$color-border-separator-inverse: rgb(42, 66, 108) !default;
// 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) !default;
// Brandable modal header
$color-background-modal-brand: rgb(0, 112, 210) !default;
// Background color for notification list item.
$color-background-notification: rgb(255, 255, 255) !default;
// Background color for a new notification list item.
$color-background-notification-new: rgb(249, 249, 250) !default;
// Notifications badge background color.
$color-background-notification-badge-active: rgb(0, 57, 107) !default;
// Notifications badge background color.
$color-background-notification-badge-hover: rgb(0, 95, 178) !default;
$color-contrast-primary: rgb(249, 249, 250) !default;
// 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) !default;
$color-foreground-primary: rgb(255, 255, 255) !default;
// Dark color for UI elements related to errors. Accessible with white text.
$color-background-error-dark: rgb(194, 57, 52) !default;
// Background color for UI elements related to providing neutral information (not error, success, or warning).
$color-background-info: rgb(107, 109, 112) !default;
// 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) !default;
// Background color for reminder notification on hover
$color-background-reminder-hover: rgb(255, 255, 255) !default;
// Notifications badge background color.
$color-background-notification-badge: rgb(194, 57, 52) !default;
// Color of the indicator dot.
$color-background-indicator-dot: rgb(22, 50, 92) !default;
// Alternative background color for dark portions of the app.
$color-background-alt-inverse: rgb(22, 50, 92) !default;
// Disabled input
$color-background-input-disabled: rgb(233, 234, 236) !default;
// 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) !default;
// Hovered toggle background color.
$color-background-toggle-hover: rgb(145, 146, 151) !default;
// Dark color for UI elements that have to do with success. Accessible with white text.
$color-background-success-dark: rgb(4, 132, 75) !default;
// Background color for reminder notification
$color-background-reminder: rgb(244, 246, 249) !default;
// Used as background for loading stencils on white background.
$color-background-stencil: rgb(242, 242, 243) !default;
// 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) !default;
// Color for UI elements that have to do with warning.
$color-background-warning: rgb(255, 183, 93) !default;
// Hovered background color for success buttons
$color-background-button-success-hover: rgb(4, 132, 75) !default;
// Hover color for utility bar item.
$color-background-utility-bar-hover: rgb(233, 234, 236) !default;
// Background color for highlighting text in search results.
$color-background-highlight-search: rgb(255, 240, 63) !default;
// Toggle background color.
$color-background-toggle: rgb(171, 173, 176) !default;
// Hover color for UI elements related to destructive actions.
$color-background-destructive-hover: rgb(166, 26, 20) !default;
// Default background color for the whole app.
$color-background: rgb(249, 249, 250) !default;
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
$color-brand-dark: rgb(0, 112, 210) !default;
// Background color for success buttons
$color-background-button-success: rgb(75, 202, 129) !default;
// The color of the mask overlay that appears when you enter a modal state.
$color-background-backdrop: rgba(255, 255, 255, 0.75) !default;
// Our product brand blue.
$color-brand: rgb(21, 137, 238) !default;
// Background color for default desktop chrome (ex. global header)
$color-background-chrome-desktop: rgb(255, 255, 255) !default;
// Active button backgrounds on modal headers
$color-background-modal-button-active: rgba(0, 0, 0, 0.16) !default;
// Color for UI elements related to destructive actions.
$color-background-destructive: rgb(194, 57, 52) !default;
// Selected checkboxes
$color-background-input-checkbox-selected: rgb(21, 137, 238) !default;
// Default checkboxes
$color-background-input-checkbox: rgb(255, 255, 255) !default;
$color-background-primary: rgb(255, 255, 255) !default;
// 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) !default;
// Color for UI elements that have to do with success.
$color-background-success: rgb(75, 202, 129) !default;
// Disabled checkboxes
$color-background-input-checkbox-disabled: rgb(217, 219, 221) !default;
// Background color for pills.
$color-background-pill: rgb(255, 255, 255) !default;
// Color of the spinner dot.
$color-background-spinner-dot: rgb(171, 173, 176) !default;
$color-background-brand-primary-focus: rgb(0, 95, 178) !default;
// Color for UI elements related to the offline state.
$color-background-offline: rgb(62, 64, 65) !default;
// The color of the mask overlay that provides user feedback on interaction.
$color-background-backdrop-tint: rgb(249, 249, 250) !default;
$color-background-brand-primary-active: rgb(0, 57, 107) !default;
// Selected input field (when user has clicked or tabbed into field)
$color-background-input-active: rgb(255, 255, 255) !default;
// Used as an alternate background for loading stencils on gray backgrounds.
$color-background-stencil-alt: rgb(233, 234, 236) !default;
// The background color of an internal scrollbar.
$color-background-scrollbar: rgb(233, 234, 236) !default;
// Disabled toggle background color.
$color-background-toggle-disabled: rgb(171, 173, 176) !default;
// Background color for toast messaging.
$color-background-toast: rgb(107, 109, 112) !default;
$color-background-brand-primary-hover: rgb(0, 95, 178) !default;
// Background color for default mobile chrome (ex. global header)
$color-background-chrome-mobile: rgb(0, 112, 210) !default;
// Background color for search input fields.
$color-background-input-search: rgba(0, 0, 0, 0.16) !default;
// Background color for UI elements related to the concept of an external user or customer.
$color-background-customer: rgb(255, 154, 60) !default;
// Color for UI elements related to errors.
$color-background-error: rgb(212, 80, 76) !default;
$color-contrast-secondary: rgb(255, 255, 255) !default;
// Secondary top bar background color (child browser, file preview, etc.)
$color-background-browser: rgb(107, 109, 112) !default;
// Second default background color for the app.
$color-background-alt: rgb(255, 255, 255) !default;
// Background color of comment posts in the feed.
$color-background-post: rgb(249, 249, 250) !default;
$color-background-brand-primary: rgb(0, 112, 210) !default;
// Used as the background color for selected rows or items on list-like components.
$color-background-row-selected: rgb(233, 234, 236) !default;
// Default input field
$color-background-input: rgb(255, 255, 255) !default;
// Background color for success toast messaging.
$color-background-toast-success: rgb(4, 132, 75) !default;
// 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) !default;
// Our product brand blue, darkened even further.
$color-brand-darker: rgb(0, 95, 178) !default;
// 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) !default;
// Background color for text selected with a mouse.
$color-background-selection: rgb(216, 237, 255) !default;
// Used as gray background when more contrast is desired.
$color-background-shade: rgb(233, 234, 236) !default;
// Standard modal header
$color-background-modal: rgb(255, 255, 255) !default;
// Active color for UI elements related to destructive actions.
$color-background-destructive-active: rgb(135, 5, 0) !default;
// Hovered active toggle background color.
$color-background-toggle-active-hover: rgb(0, 95, 178) !default;
// Background color for payloads in the feed.
$color-background-payload: rgb(249, 249, 250) !default;
// Button backgrounds on modal headers
$color-background-modal-button: rgba(0, 0, 0, 0.07) !default;
// Active color for utility bar item.
$color-background-utility-bar-active: rgb(21, 137, 238) !default;
// Active background color for success buttons
$color-background-button-success-active: rgb(4, 132, 75) !default;
// Background color for error toast messaging.
$color-background-toast-error: rgb(194, 57, 52) !default;
// Stage left org switcher dropdown arrow background color.
$color-background-org-switcher-arrow: rgb(6, 28, 63) !default;
// Default background color for dark portions of the app (like Stage Left or tooltips).
$color-background-inverse: rgb(6, 28, 63) !default;
// Active toggle background color.
$color-background-toggle-active: rgb(0, 112, 210) !default;
// Alternative color for UI elements related to errors.
$color-background-error-alt: rgb(234, 130, 136) !default;
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
$page-color-background-primary: rgb(255, 255, 255) !default;
// Used as gray background in conjunction with Shade when more contrast is desired.
$color-background-shade-dark: rgb(217, 219, 221) !default;
// Notifications badge background color.
$color-background-notification-badge-focus: rgb(0, 95, 178) !default;
// Background for utility icons that live in the action bar on mobile.
$color-background-actionbar-icon-utility: rgb(107, 109, 112) !default;
// The background color of an internal scrollbar track.
$color-background-scrollbar-track: rgb(196, 198, 202) !default;
// Background color for input field that has encountered an error.
$color-background-input-error: rgb(255, 221, 225) !default;
// Background color for highlighting UI elements.
$color-background-highlight: rgb(250, 255, 189) !default;
$color-background-secondary: rgb(249, 249, 250) !default;
// Deprecated
$elevation-32: 32 !default;
// Deprecated
$elevation-shadow-16: 0 16px 16px 0 rgba(0, 0, 0, 0.16) !default;
// Deprecated
$elevation-inverse-shadow-0: none !default;
// 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 !default;
// Deprecated: Use SHADOW_DOCKED
$elevation-inverse-shadow-2: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) !default;
// Deprecated
$elevation-inverse-shadow-4: 0 -4px 4px 0 rgba(0, 0, 0, 0.16) !default;
// Deprecated
$elevation-16: 16 !default;
// Deprecated
$elevation-shadow-3-below: 0 3px 3px 0 rgba(0, 0, 0, 0.16) inset !default;
$shadow-soft-primary-hover: none !default;
// Custom glow for focus states on UI elements with explicit containers.
$shadow-button-focus: 0 0 3px #0070D2 !default;
// Deprecated
$elevation-inverse-shadow-8: 0 -8px 8px 0 rgba(0, 0, 0, 0.16) !default;
// Shadow for header.
$shadow-header: 0 2px 4px rgba(0, 0, 0, 0.07) !default;
// Soft dropshadow found on general UI elements such as containers
$shadow-soft-primary: none !default;
// Deprecated
$elevation-inverse-shadow-32: 0 -32px 32px 0 rgba(0, 0, 0, 0.16) !default;
// Hard dropshadow found on general UI elements such as containers
$shadow-hard-primary: none !default;
// Shadow above overflow menu close bar.
$shadow-action-overflow-footer: 0 -2px 4px #F9F9FA !default;
// Deprecated
$elevation-0: 0 !default;
// Deprecated
$elevation-3-inset: -3 !default;
// Deprecated
$elevation-2: 2 !default;
// Shadow for overlays.
$shadow-overlay: 0 -2px 4px rgba(0, 0, 0, 0.07) !default;
// 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) !default;
// Shadow on elements that are docked to the bottom of the viewport.
$shadow-docked: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) !default;
// Shadow for buttons.
$shadow-button: 0 1px 1px 0 rgba(0, 0, 0, 0.05) !default;
// Shadow to make inline edit card pop out.
$shadow-inline-edit: 0 2px 4px 4px rgba(0, 0, 0, 0.16) !default;
// Deprecated
$elevation-4: 4 !default;
// Deprecated
$elevation-shadow-0: none !default;
// Shadow for drag-n-drop.
$shadow-drag: 0 2px 4px 0 rgba(0, 0, 0, 0.40) !default;
// Deprecated
$elevation-inverse-shadow-16: 0 -16px 16px 0 rgba(0, 0, 0, 0.16) !default;
// Shadow for drop down.
$shadow-drop-down: 0 2px 3px 0 rgba(0, 0, 0, 0.16) !default;
// Deprecated
$elevation-shadow-2: 0 2px 2px 0 rgba(0, 0, 0, 0.16) !default;
// Deprecated
$elevation-8: 8 !default;
// Deprecated
$elevation-shadow-4: 0 4px 4px 0 rgba(0, 0, 0, 0.16) !default;
// Inset shadow for editable grid
$shadow-focus-inset: 0 0 2px 2px #1589EE inset !default;
// Deprecated
$elevation-inverse-shadow-3-below: 0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset !default;
$shadow-soft-primary-active: none !default;
// Deprecated
$elevation-shadow-8: 0 8px 8px 0 rgba(0, 0, 0, 0.16) !default;
// 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 !default;
// Shadow on images.
$shadow-image: 0 1px 1px rgba(0, 0, 0, 0.16) !default;
// Deprecated
$elevation-shadow-32: 0 32px 32px 0 rgba(0, 0, 0, 0.16) !default;
// Icon color on dark background
$color-text-icon-inverse: rgb(255, 255, 255) !default;
// Action label text color
$color-text-action-label: rgb(107, 109, 112) !default;
// Link color on dark background
$color-text-link-inverse: rgb(255, 255, 255) !default;
// 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.15) !default;
// 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) !default;
// Input icon
$color-text-input-icon: rgb(171, 173, 176) !default;
// Link color on dark background - active state
$color-text-link-inverse-active: rgba(255, 255, 255, 0.5) !default;
// Action label active text color
$color-text-action-label-active: rgb(22, 50, 92) !default;
// Icon color on dark background - active state
$color-text-icon-inverse-active: rgb(255, 255, 255) !default;
// Color for text on a selected tab in a tab group.
$color-text-tab-label-selected: rgb(0, 112, 210) !default;
// Color for texts or icons that are related to warnings on a dark background.
$color-text-warning: rgb(255, 183, 93) !default;
// 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) !default;
// Color for disabled text in a tab group.
$color-text-tab-label-disabled: rgb(233, 234, 236) !default;
// Text color for default secondary button - hover state
$color-text-button-default-hover: rgb(0, 112, 210) !default;
// Input disabled text
$color-text-input-disabled: rgb(107, 109, 112) !default;
// Tertiary body text color
$color-text-tertiary: rgb(107, 109, 112) !default;
// Focus link text
$color-text-link-focus: rgb(0, 95, 178) !default;
// Text color for destructive actions - hover state
$color-text-destructive-hover: rgb(161, 43, 43) !default;
// Text color for default secondary button
$color-text-button-default: rgb(0, 112, 210) !default;
// Default icon color - disabled state
$color-text-icon-default-disabled: rgb(217, 219, 221) !default;
// Disabled link text
$color-text-link-disabled: rgb(22, 50, 92) !default;
// Body text color
$color-text-default: rgb(22, 50, 92) !default;
// Active state on a standalone link on a dark background.
$color-text-inverse-active: rgb(94, 180, 255) !default;
// Text color for brandable primary button - disabled state
$color-text-button-brand-disabled: rgb(255, 255, 255) !default;
// Primary body text color
$color-text-primary: rgb(22, 50, 92) !default;
// Text color for destructive actions
$color-text-destructive: rgb(194, 57, 52) !default;
$color-text-link-primary-focus: rgb(0, 112, 210) !default;
// Text color for brandable primary button - hover state
$color-text-button-brand-hover: rgb(255, 255, 255) !default;
// Hover link text
$color-text-link-hover: rgb(0, 95, 178) !default;
// Color for text in focus state in a tab group.
$color-text-tab-label-focus: rgb(0, 95, 178) !default;
// Text color for success text.
$color-text-success: rgb(2, 126, 70) !default;
// Color for text that is purposefully de-emphasized to create visual hierarchy.
$color-text-weak: rgb(107, 109, 112) !default;
// Input placeholder text on dark backgrounds.
$color-text-placeholder-inverse: rgb(233, 234, 236) !default;
// Default icon color - hover state.
$color-text-icon-default-hover: rgb(0, 112, 210) !default;
// 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) !default;
// Text color for pills.
$color-text-pill: rgb(0, 112, 210) !default;
$color-text-link-primary-hover: rgb(0, 112, 210) !default;
// Link text (508)
$color-text-link: rgb(0, 112, 210) !default;
// Color for texts that are related to warnings on a light background.
$color-text-warning-alt: rgb(132, 72, 0) !default;
// Text color for brandable primary button
$color-text-button-brand: rgb(255, 255, 255) !default;
// Color for text in active state in a tab group.
$color-text-tab-label-active: rgb(0, 57, 107) !default;
// Default icon color.
$color-text-icon-default: rgb(107, 109, 112) !default;
// Our product brand blue.
$color-text-brand: rgb(21, 137, 238) !default;
// Color for text in hover state in a tab group.
$color-text-tab-label-hover: rgb(0, 95, 178) !default;
// Text color for default secondary button - disabled state
$color-text-button-default-disabled: rgb(217, 219, 221) !default;
// Color for text on toast messages.
$color-text-toast: rgb(233, 234, 236) !default;
// Color for disabled toggles
$color-text-toggle-disabled: rgb(217, 219, 221) !default;
// Top bar icon color
$color-text-browser: rgb(255, 255, 255) !default;
$color-text-link-primary-active: rgb(0, 57, 107) !default;
// Error text for inputs and error misc
$color-text-error: rgb(194, 57, 52) !default;
$color-text-link-primary: rgb(0, 112, 210) !default;
// Top bar active icon color
$color-text-browser-active: rgba(0, 0, 0, 0.4) !default;
// Color for default text in a tab group.
$color-text-tab-label: rgb(22, 50, 92) !default;
// Customer text used in anchor subtitle
$color-text-customer: rgb(255, 154, 60) !default;
// Default icon color - active state.
$color-text-icon-default-active: rgb(0, 57, 107) !default;
// Text color found on any primary brand color
$color-text-brand-primary: rgb(255, 255, 255) !default;
// Active link text
$color-text-link-active: rgb(0, 57, 107) !default;
// 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) !default;
// Text color for brandable primary button - active state
$color-text-button-brand-active: rgb(255, 255, 255) !default;
// Color of required field marker.
$color-text-required: rgb(194, 57, 52) !default;
// Color for non-interactive icons that represent a selected item in a list
$color-text-icon-brand: rgb(0, 112, 210) !default;
// Hover state on a standalone link on a dark background.
$color-text-inverse-hover: rgb(171, 173, 176) !default;
// Modal header title
$color-text-modal: rgb(255, 255, 255) !default;
// 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) !default;
// Modal header button text color
$color-text-modal-button: rgb(107, 109, 112) !default;
// Link color on dark background - disabled state
$color-text-link-inverse-disabled: rgba(255, 255, 255, 0.15) !default;
// Inverse text color for dark backgrounds
$color-text-inverse: rgb(255, 255, 255) !default;
// Text color for default secondary button - active state
$color-text-button-default-active: rgb(0, 112, 210) !default;
// Icon color on dark background - disabled state
$color-text-icon-inverse-disabled: rgba(255, 255, 255, 0.15) !default;
// 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) !default;
// Color for interactive utility icons
$color-text-icon-utility: rgb(171, 173, 176) !default;
// Icon color on dark background - hover state
$color-text-icon-inverse-hover: rgb(255, 255, 255) !default;
// Input placeholder text.
$color-text-placeholder: rgb(107, 109, 112) !default;
// Weak inverse text color for dark backgrounds
$color-text-inverse-weak: rgb(171, 173, 176) !default;
// Secondary body text color
$color-text-secondary: rgb(107, 109, 112) !default;
// Typed input text
$color-text-input-focus-inverse: rgb(22, 50, 92) !default;
// Text in stage left navigation.
$color-text-stage-left: rgb(233, 234, 236) !default;
// Link color on dark background - hover state
$color-text-link-inverse-hover: rgba(255, 255, 255, 0.75) !default;
// Text color for success text on dark backgrounds.
$color-text-success-inverse: rgb(75, 202, 129) !default;
// Text color for field labels.
$color-text-label: rgb(107, 109, 112) !default;
// Default value for text-transform
$text-transform: none !default;
// 50% transparency of an element
$opacity-5: 0.5 !default;
// 80% transparency of an element
$opacity-8: 0.8 !default;
// 0 seconds, 0 frames
$duration-instantly: 0s !default;
// 0.05 seconds, 3 frames
$duration-immediately: 0.05s !default;
// 0.1 seconds, 6 frames
$duration-quickly: 0.1s !default;
// 0.2 seconds, 12 frames
$duration-promptly: 0.2s !default;
// 0.4 seconds, 24 frames
$duration-slowly: 0.4s !default;
// 3.2 seconds, 192 frames
$duration-paused: 3.2s !default;
// 4.8 seconds
$duration-toast-short: 4.8s !default;
// 9.6 seconds
$duration-toast-medium: 9.6s !default;
// Dropdown
$z-index-dropdown: 7000 !default;
// Docked element
$z-index-docked: 4 !default;
// Notifications under modals
$z-index-reminder: 8500 !default;
// Spinner
$z-index-spinner: 9050 !default;
// Default
$z-index-default: 1 !default;
// Deep dive
$z-index-deepdive: -99999 !default;
// Toasts
$z-index-toast: 10000 !default;
// Dialog
$z-index-dialog: 6000 !default;
// Popup
$z-index-popup: 5000 !default;
// Modal
$z-index-modal: 9000 !default;
// Stickied element
$z-index-sticky: 100 !default;
// Overlay
$z-index-overlay: 8000 !default;
$banner-user-default-image: "" !default;
$banner-group-default-image: "" !default;
$user-default-avatar: "/assets/images/profile_avatar_200.png" !default;
$user-default-avatar-medium: "/assets/images/profile_avatar_160.png" !default;
$user-default-avatar-small: "/assets/images/profile_avatar_96.png" !default;
$group-default-avatar: "/assets/images/group_avatar_200.png" !default;
$group-default-avatar-medium: "/assets/images/group_avatar_160.png" !default;
$group-default-avatar-small: "/assets/images/group_avatar_96.png" !default;
// Disabled state of BRAND_HEADER_CONTRAST_WEAK
$brand-header-contrast-weak-disabled: rgba(166, 166, 166, 0.25) !default;
// Gray Color 11
$color-gray-11: rgb(62, 62, 60) !default;
// Transparent value of BRAND_PRIMARY at 10%
$brand-primary-transparent-10: rgba(21, 137, 238, 0.1) !default;
// Gray Color 12
$color-gray-12: rgb(43, 40, 38) !default;
// These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug
$brand-background-dark-transparent: rgba(221, 219, 218, 0) !default;
// Gray Color 13
$color-gray-13: rgb(8, 7, 7) !default;
// Background color a branded app header
$brand-header: rgb(255, 255, 255) !default;
// Active / Hover state of BRAND_LIGHT
$brand-light-active: rgb(227, 229, 237) !default;
// Variant of BRAND_HEADER_CONTRAST that provides a warm color
$brand-header-contrast-warm: rgb(191, 2, 1) !default;
// Disabled state of BRAND_HEADER_ICON
$brand-header-icon-disabled: rgba(145, 145, 145, 0.25) !default;
// Active / Hover state of BRAND_HEADER_CONTRAST
$brand-header-contrast-active: rgb(80, 80, 80) !default;
// Primary page background color
$brand-background-primary: rgb(250, 250, 249) !default;
// Primary brand color
$brand-primary: rgb(21, 137, 238) !default;
// Active / Hover state of BRAND_HEADER_CONTRAST_WEAK
$brand-header-contrast-weak-active: rgb(129, 129, 129) !default;
// Active / Hover state of BRAND_CONTRAST
$brand-contrast-active: rgb(13, 14, 18) !default;
// Variant of BRAND_HEADER_CONTRAST that provides a cool color
$brand-header-contrast-cool: rgb(0, 85, 131) !default;
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
$brand-header-contrast-inverse: rgb(255, 255, 255) !default;
// Dark variant of BRAND that is accessible with light colors
$brand-dark: rgb(24, 35, 55) !default;
// Dark variant of BRAND that is accessible with white
$brand-accessible: rgb(0, 112, 210) !default;
// Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color
$brand-background-dark: rgb(232, 232, 232) !default;
// Active / Hover state of BRAND_TEXT_LINK
$brand-text-link-active: rgb(0, 95, 178) !default;
// Gray Color 1
$color-gray-1: rgb(255, 255, 255) !default;
// Gray Color 2
$color-gray-2: rgb(250, 250, 249) !default;
// Active / Hover state of BRAND_HEADER_ICON
$brand-header-icon-active: rgb(129, 129, 129) !default;
// Gray Color 3
$color-gray-3: rgb(243, 242, 242) !default;
// Icons of BRAND_HEADER that is accessible with BRAND_HEADER
$brand-header-icon: rgb(145, 145, 145) !default;
// Disabled state of BRAND_A11Y
$brand-disabled: rgb(201, 199, 197) !default;
// Primary text link brand color
$brand-text-link: rgb(0, 109, 204) !default;
// Gray Color 4
$color-gray-4: rgb(236, 235, 234) !default;
// Gray Color 5
$color-gray-5: rgb(221, 219, 218) !default;
// Gray Color 6
$color-gray-6: rgb(201, 199, 197) !default;
// Active / Hover state of BRAND_A11Y
$brand-accessible-active: rgb(0, 95, 178) !default;
// Gray Color 7
$color-gray-7: rgb(176, 173, 171) !default;
// Active / Hover state of BRAND_DARK
$brand-dark-active: rgb(37, 48, 69) !default;
// Gray Color 8
$color-gray-8: rgb(150, 148, 146) !default;
// Active / Hover state of BRAND_HEADER_CONTRAST
$brand-header-contrast-inverse-active: rgb(238, 238, 238) !default;
// Active / Hover state of BRAND_HEADER_CONTRAST_COOL
$brand-header-contrast-cool-active: rgb(0, 85, 131) !default;
// Gray Color 9
$color-gray-9: rgb(112, 110, 107) !default;
// Variant of BRAND that is accessible with BRAND
$brand-contrast: rgb(26, 27, 30) !default;
// Weak contrast ratio, useful for iconography
$brand-header-contrast-weak: rgb(145, 145, 145) !default;
// Active / Hover state of BRAND_PRIMARY
$brand-primary-active: rgb(0, 122, 221) !default;
// These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug
$brand-background-primary-transparent: rgba(250, 250, 249, 0) !default;
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
$brand-header-contrast: rgb(94, 94, 94) !default;
// Transparent value of BRAND_PRIMARY
$brand-primary-transparent: rgba(21, 137, 238, 0.1) !default;
// Active / Hover state of BRAND_HEADER_CONTRAST_WARM
$brand-header-contrast-warm-active: rgb(172, 0, 0) !default;
// Transparent value of BRAND_PRIMARY at 40%
$brand-primary-transparent-40: rgba(21, 137, 238, 0.4) !default;
// Light variant of BRAND that is accessible with dark colors
$brand-light: rgb(244, 246, 254) !default;
// Gray Color 10
$color-gray-10: rgb(81, 79, 77) !default;
$illustration-empty-state-assistant: "/assets/images/illustrations/empty-state-assistant.svg" !default;
$illustration-empty-state-events: "/assets/images/illustrations/empty-state-events.svg" !default;
$illustration-empty-state-tasks: "/assets/images/illustrations/empty-state-tasks.svg" !default;
// White avatar group background color.
$avatar-group-color-background-lightest: rgb(255, 255, 255) !default;
// Dark gray avatar group background color.
$avatar-group-color-background-inverse: rgb(112, 110, 107) !default;
// White badge background color.
$badge-color-background-lightest: rgb(255, 255, 255) !default;
// Dark gray badge background color.
$badge-color-background-inverse: rgb(112, 110, 107) !default;
$brand-band-default-image: "" !default;
$brand-band-color-background-primary: rgba(0, 0, 0, 0) !default;
$brand-band-color-background-primary-transparent: rgba(0, 0, 0, 0) !default;
$brand-band-color-background-secondary: rgba(0, 0, 0, 0) !default;
$brand-band-color-background-secondary-transparent: rgba(0, 0, 0, 0) !default;
$brand-band-image-height-small: 6rem !default;
$brand-band-image-height-medium: 12.5rem !default;
$brand-band-image-height-large: 18.75rem !default;
$brand-band-scrim-height: 3.125rem !default;
$template-gutters: 0 !default;
$template-profile-gutters: 0 !default;
$button-icon-color-border-primary: rgb(255, 255, 255) !default;
$button-color-border-primary: rgb(216, 221, 230) !default;
$button-color-border-brand-primary: rgb(0, 112, 210) !default;
$button-color-border-secondary: rgba(255, 255, 255, 0.8) !default;
$button-border-radius: .25rem !default;
// Default secondary button - focus state
$color-background-button-default-focus: rgb(244, 246, 249) !default;
$button-color-background-brand-primary: rgb(0, 112, 210) !default;
// Disabled button backgrounds on inverse/dark backgrounds
$color-background-button-inverse-disabled: rgba(0, 0, 0, 0) !default;
// Default secondary button - hover state
$color-background-button-default-hover: rgb(244, 246, 249) !default;
// Default secondary button
$color-background-button-default: rgb(255, 255, 255) !default;
// Background color for icon-only button - disabled state
$color-background-button-icon-disabled: rgb(255, 255, 255) !default;
// Background color for icon-only button - focus state
$color-background-button-icon-focus: rgb(244, 246, 249) !default;
$button-color-background-secondary: rgba(255, 255, 255, 0.8) !default;
// Brandable primary button - disabled state
$color-background-button-brand-disabled: rgb(224, 229, 238) !default;
// Brandable primary button - hover state
$color-background-button-brand-hover: rgb(0, 95, 178) !default;
// Active button backgrounds on inverse backgrounds on mobile
$color-background-button-inverse-active: rgba(0, 0, 0, 0.24) !default;
// Background color for icon-only button - hover state
$color-background-button-icon-hover: rgb(244, 246, 249) !default;
// Brandable primary button
$color-background-button-brand: rgb(0, 112, 210) !default;
// Background color for icon-only button
$color-background-button-icon: rgba(0, 0, 0, 0) !default;
// Default secondary button - disabled state
$color-background-button-default-disabled: rgb(255, 255, 255) !default;
// Background color for icon-only button - active state
$color-background-button-icon-active: rgb(238, 241, 246) !default;
// Brandable primary button - active state
$color-background-button-brand-active: rgb(0, 57, 107) !default;
// Button backgrounds on inverse/dark backgrounds
$color-background-button-inverse: rgba(0, 0, 0, 0) !default;
$button-color-background-primary: rgb(255, 255, 255) !default;
// Default secondary button - active state
$color-background-button-default-active: rgb(238, 241, 246) !default;
// Line heights for regular buttons
$line-height-button: 1.875rem !default;
// Line heights for small buttons
$line-height-button-small: 1.75rem !default;
$button-color-text-primary: rgb(255, 255, 255) !default;
// Default Card component background color.
$card-color-background: rgb(255, 255, 255) !default;
$card-color-border: rgb(221, 219, 218) !default;
$card-footer-color-border: rgba(0, 0, 0, 0) !default;
$card-shadow: none !default;
// Use for active tab.
$card-font-weight: 400 !default;
$card-footer-margin: 0.75rem !default;
$card-body-padding: 0 1rem !default;
$card-wrapper-spacing: 1rem !default;
$card-header-padding: 0.75rem 1rem 0 !default;
$card-spacing-large: 1.5rem !default;
$card-header-margin: 0 0 0.75rem !default;
// Use for vertical spacing between cards
$card-spacing-margin: 1rem !default;
$card-footer-padding: 0 1rem 0.75rem !default;
$card-spacing-small: 0.75rem !default;
$card-footer-text-align: right !default;
// Default background for carousel card
$carousel-color-background: rgb(255, 255, 255) !default;
// Default background for carousel navigation indicators
$carousel-indicator-color-background: rgb(255, 255, 255) !default;
// Default hover background for carousel navigation indicators
$carousel-indicator-color-background-hover: rgb(250, 250, 249) !default;
// Default focus background for carousel navigation indicators
$carousel-indicator-color-background-focus: rgb(0, 95, 178) !default;
// Default background for active state on carousel navigation indicators
$carousel-indicator-color-background-active: rgb(0, 112, 210) !default;
// Default width for carousel indicator width
$carousel-indicator-width: 1rem !default;
// Inbound chat message background color.
$chat-message-color-background-inbound: rgb(242, 242, 243) !default;
// Outbound chat message background color.
$chat-message-color-background-outbound: rgb(0, 95, 178) !default;
// Outbound agent chat message background color.
$chat-message-color-background-outbound-agent: rgb(107, 109, 112) !default;
// Status chat message background color.
$chat-message-color-background-status: rgb(255, 255, 255) !default;
// Line heights for toggle buttons
$line-height-toggle: 1.3rem !default;
// Slider size for toggle.
$square-toggle-slider: 1.25rem !default;
// Slider width.
$width-toggle: 3rem !default;
// Slider height.
$height-toggle: 1.5rem !default;
$color-picker-slider-thumb-color-background: rgb(250, 250, 249) !default;
$color-picker-slider-thumb-border-color: rgb(81, 79, 77) !default;
$color-picker-swatch-shadow: inset 0 0 1px rgba(0,0,0,0.4) !default;
$color-picker-input-custom-hex-font-size: 0.75rem !default;
$color-picker-selector-width: 14rem !default;
$color-picker-swatches-width: 13.3rem !default;
$color-picker-range-height: 5rem !default;
$color-picker-slider-height: 1.5rem !default;
$color-picker-thumb-width: 0.375rem !default;
$color-picker-range-indicator-size: 0.75rem !default;
$color-picker-input-custom-hex-width: 4.2rem !default;
$color-picker-swatch-size: 1.25rem !default;
// Alternating row background color for tables
$table-color-background-stripes: rgb(250, 250, 249) !default;
// Default background color for table headers
$table-color-background-header: rgb(255, 255, 255) !default;
// Hover state for table header cells
$table-color-background-header-hover: rgb(250, 250, 249) !default;
// Focused state for table header cells
$table-color-background-header-focus: rgb(255, 255, 255) !default;
$table-border-radius: 0 !default;
$table-cell-spacing: 0.5rem !default;
$table-color-text-header: rgb(81, 79, 77) !default;
// Docked panel header’s background color.
$color-background-docked-panel-header: rgb(255, 255, 255) !default;
// Docked panel’s background color when open.
$color-background-docked-panel: rgb(255, 255, 255) !default;
// Height of the docked bar.
$height-docked-bar: 2.5rem !default;
// Utility bar notifications badge background color.
$utility-bar-color-background-notification-badge: rgb(212, 80, 76) !default;
// Utility bar notifications focus background color.
$utility-bar-color-background-notification-focus: rgb(201, 199, 197) !default;
$drop-zone-slot-height: 0.25rem !default;
// Default color for animated icon waffle for app switcher.
$color-background-icon-waffle: rgb(112, 110, 107) !default;
// Default background color for a typing icon dot.
$typing-icon-dot-color-background-gray: rgb(221, 219, 218) !default;
// Active background color for a typing icon dot when animcating.
$typing-icon-dot-color-background-gray-dark: rgb(201, 199, 197) !default;
// Brand fill color
$global-action-fill-hover: rgb(0, 112, 210) !default;
// Global action icon size
$global-action-icon-size: 1.5rem !default;
// Typing icon size
$typing-icon-dot-size: .5rem !default;
$einstein-header-background: "/assets/images/einstein-headers/einstein-header-background.svg" !default;
$einstein-header-figure: "/assets/images/einstein-headers/einstein-figure.svg" !default;
// Background color for Einstein header
$einstein-header-background-color: rgb(149, 203, 252) !default;
// Text shadow color for Einstein header background to make text more readable
$einstein-header-text-shadow: #9EDAFF !default;
$form-label-font-size: 0.75rem !default;
// Global Header background color
$global-header-color-background: rgb(255, 255, 255) !default;
$brand-logo-image: "/assets/images/logo-noname.svg" !default;
// Global identity icon size.
$square-icon-global-identity-icon: 1.25rem !default;
// Hovered context bar item background color.
$color-background-context-bar-item-hover: rgb(255, 255, 255) !default;
// Active context bar item background color.
$color-background-context-bar-item-active: rgb(255, 255, 255) !default;
// Default context bar background color.
$color-background-context-bar: rgb(255, 255, 255) !default;
// Context TAB bar item background color.
$color-background-context-tab-bar-item: rgb(255, 255, 255) !default;
// Hovered context bar item background color.
$color-background-context-bar-inverse-item-hover: rgba(255, 255, 255, 0.2) !default;
// A Gradient used for putting shadows on the bottom when box-shadow is not possible.
$color-background-context-bar-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%) !default;
// Active context bar item background color.
$color-background-context-bar-inverse-item-active: rgba(255, 255, 255, 0.4) !default;
// Brand color in context bar for default theme
$color-background-context-bar-brand-accent: rgb(0, 161, 223) !default;
// Highlight for context bar action (hover and focus states).
$color-background-context-bar-action-highlight: rgba(255, 255, 255, 0.2) !default;
// Divider in context bar
$color-border-context-bar-divider: rgba(255, 255, 255, 0.2) !default;
// Border color in context bar
$color-border-context-bar-item: rgba(0, 0, 0, 0.2) !default;
// Border color in context bar on dark background
$color-border-context-bar-inverse-item: rgba(255, 255, 255, 0.2) !default;
// Border color in context bar for default theme
$color-border-context-bar-theme-default: rgb(0, 161, 223) !default;
// Alternate border color in context bar for default theme
$color-border-context-bar-theme-default-alt: rgb(243, 242, 242) !default;
// Hovered border color in context bar for default theme
$color-border-context-bar-theme-default-hover: rgb(11, 35, 153) !default;
// Active border color in context bar for default theme
$color-border-context-bar-theme-default-active: rgb(243, 242, 242) !default;
// Context bar height.
$height-context-bar: 2.5rem !default;
// Context bar tab accent height when tab is active.
$globalnavigation-item-height-accent-active: 3px !default;
// Context bar tab accent height when tab is focused.
$globalnavigation-item-height-accent-focus: 4px !default;
// Context bar text color
$color-text-context-bar: rgb(62, 62, 60) !default;
// Context bar text color on a dark background
$color-text-context-bar-inverse: rgb(255, 255, 255) !default;
// Context bar action trigger text color
$color-text-context-bar-action-trigger: rgba(255, 255, 255, 0.4) !default;
// Primary color for illustrations
$illustration-color-primary: rgb(140, 211, 248) !default;
// Secondary color for illustrations
$illustration-color-secondary: rgb(194, 232, 255) !default;
$input-static-font-size: 0.8125rem !default;
$input-static-font-weight: 400 !default;
$input-readonly-font-weight: 400 !default;
$input-static-color: rgb(8, 7, 7) !default;
// Default Page Header background color
$page-header-color-background: rgb(250, 250, 249) !default;
// Secondary Page Header background color
$page-header-color-background-alt: rgb(255, 255, 255) !default;
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
$color-background-anchor: rgb(250, 250, 249) !default;
// Page Header background color
$color-background-page-header: rgb(255, 255, 255) !default;
$page-header-color-border: rgba(0, 0, 0, 0) !default;
$page-header-joined-color-border: rgb(221, 219, 218) !default;
$page-header-border-radius: 0 !default;
$page-header-shadow: none !default;
$page-header-title-font-size: 1.125rem !default;
$page-header-title-font-weight: 400 !default;
// Page header Entity Icon size
$page-header-icon-size: 2.25rem !default;
$page-header-spacing-margin: 0 !default;
$page-header-spacing-padding: 1rem !default;
$page-header-spacing-row: 0.75rem 1rem !default;
// Dropshadow found on docked UI panels when positioned to the left of a viewport
$panel-docked-left-shadow: 1px 0 3px rgba(0,0,0,0.25) !default;
// Dropshadow found on docked UI panels when positioned to the left of a viewport
$panel-docked-right-shadow: -1px 0 3px 0 rgba(0,0,0,0.25) !default;
// The hover background color for Salespath stages that have not been completed.
$color-background-path-incomplete-hover: rgb(221, 219, 218) !default;
// The background color for the step action arrow that are the active stage
$color-background-path-step-action-active: rgb(6, 28, 63) !default;
// The background color for Salespath stages that have not been completed.
$color-background-path-incomplete: rgb(236, 235, 234) !default;
// The hover background color for Salespath stages that are the active stage.
$color-background-path-active-hover: rgb(0, 57, 107) !default;
// The background color for the final stage of a Salespath when it has been lost.
$color-background-path-lost: rgb(194, 57, 52) !default;
// The background color for Salespath stages that are the active stage.
$color-background-path-active: rgb(0, 95, 178) !default;
// The background color for Salespath guidance coaching section.
$color-background-guidance: rgb(255, 255, 255) !default;
// The background color for the final stage of a Salespath when it has been lost.
$color-background-path-won: rgb(4, 132, 75) !default;
// The hover background color for Salespath stages that are the current stage.
$color-background-path-current-hover: rgb(255, 255, 255) !default;
// The background color for Salespath stages that are the current stage.
$color-background-path-current: rgb(255, 255, 255) !default;
// The hover background color for Salespath stages that are complete.
$color-background-path-complete-hover: rgb(4, 132, 75) !default;
// The background color for Salespath stages that are complete.
$color-background-path-complete: rgb(75, 202, 129) !default;
// The background color for the step action arrow that are the current stage
$color-background-path-step-action-current: rgb(0, 95, 178) !default;
// The background color for the overall Salespath coaching section.
$color-background-path-expanded: rgb(255, 255, 255) !default;
// Used as a separator between dark colors like the stages of salespath.
$color-border-path-divider: rgb(255, 255, 255) !default;
// Used as a border color for the active Path step.
$color-border-path-current: rgb(0, 95, 178) !default;
// Used as a border color for the current path step on hover.
$color-border-path-current-hover: rgb(0, 57, 107) !default;
// Line heights for salespath
$line-height-salespath: 1.5rem !default;
// Height of Path
$height-sales-path: 2rem !default;
// Width of action button to right
$path-button-width-fixed: 13rem !default;
// Border width of current stage for path item
$width-path-border-current: 0.125rem !default;
// Used as a text color for the active Path step.
$color-text-path-current: rgb(0, 95, 178) !default;
// Used as a text hover color for the active Path step.
$color-text-path-current-hover: rgb(0, 57, 107) !default;
// The default background color for Popover Walkthrough
$popover-walkthrough-color-background: rgb(6, 28, 63) !default;
// The default background color for Popover Walkthrough Header
$popover-walkthrough-header-color-background: rgb(22, 50, 92) !default;
// The default background color for alternative Popover Walkthrough
$popover-walkthrough-color-background-alt: rgb(0, 112, 210) !default;
$popover-walkthrough-header-image: "" !default;
$popover-walkthrough-alt-image: "" !default;
// The background color for nubbins on the bottom of alternate walkthrough popovers
$popover-walkthrough-alt-nubbin-color-background: rgb(0, 112, 210) !default;
// Text color for step counter in walkthrough variant of popovers
$popover-color-text: rgb(217, 219, 221) !default;
// The default background color for Progress Indicator
$progress-color-background: rgb(255, 255, 255) !default;
// The shaded background color for Progress Indicator
$progress-color-background-shade: rgb(250, 250, 249) !default;
// The background color for the Progress Bar
$progress-bar-color-background: rgb(221, 219, 218) !default;
// The background color of the fill for the Progress Bar
$progress-bar-color-background-fill: rgb(94, 180, 255) !default;
// The success background color of the fill for the Progress Bar
$progress-bar-color-background-fill-success: rgb(75, 202, 129) !default;
// Borders of each indicator item within the Progress Indicator
$progress-color-border: rgb(255, 255, 255) !default;
// Shaded borders of each indicator item within the Progress Indicator
$progress-color-border-shade: rgb(250, 250, 249) !default;
// Hovered border color of each indicator item within the Progress Indicator
$progress-color-border-hover: rgb(0, 112, 210) !default;
// Active border color of each indicator item within the Progress Indicator
$progress-color-border-active: rgb(21, 137, 238) !default;
// Height of the Progress Bar
$progress-bar-height: 0.125rem !default;
// Inner color for progress ring component
$color-background-progress-ring-content: rgb(255, 255, 255) !default;
// Thickness of the Progress Ring's ring
$progress-ring-width: 0.1875rem !default;
// Dark notification component background color.
$notification-color-background-inverse: rgb(112, 110, 107) !default;
$slider-handle-color-background: rgb(21, 137, 238) !default;
$slider-handle-color-background-hover: rgb(0, 112, 210) !default;
$slider-handle-color-background-focus: rgb(0, 112, 210) !default;
$slider-handle-color-background-active: rgb(0, 112, 210) !default;
$slider-track-color-background: rgb(236, 235, 234) !default;
$slider-track-color-background-fill: rgb(21, 137, 238) !default;
$slider-color-background-disabled: rgb(236, 235, 234) !default;
$slider-handle-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px !default;
$slider-handle-size: 1rem !default;
$slider-track-height: 4px !default;
$slider-track-width: 100% !default;
// Split View background color.
$split-view-color-background: rgb(250, 250, 249) !default;
// Split View background color on row hover.
$split-view-color-background-row-hover: rgb(255, 255, 255) !default;
// Row dividers in Split View list
$split-view-color-border: rgb(221, 219, 218) !default;
// Default width for split view container
$split-view-width: 25rem !default;
// Use for active tab.
$tabs-font-weight: 400 !default;
// Vertical navigation shaded background color on row hover.
$vertical-navigation-color-background-shade-row-hover: rgb(243, 242, 242) !default;
// Vertical navigation shaded background color on row active.
$vertical-navigation-color-background-shade-row-active: rgb(236, 235, 234) !default;
// Text color for the Info section
$welcome-mat-text-color-info: rgb(0, 57, 107) !default;
// Background Image Path for the Welcome Mat Info section
$welcome-mat-background-image-info: "/assets/images/welcome-mat/bg-info@2x.png" !default;
// Background overflow color for the Welcome Mat Info section
$welcome-mat-background-color-info: rgb(202, 230, 241) !default;
// Progress Bar background is white
$welcome-mat-color-background-progress-bar: rgb(255, 255, 255) !default;
// Box Shadow declaration
$welcome-mat-color-action-shadow: rgba(0, 0, 0, 0.05) !default;
// Completed icon color for the Welcome Mat Boxes
$welcome-mat-color-icon-complete: rgb(201, 199, 197) !default;
// Font size for the info title
$welcome-mat-font-size-info-title: 2.625rem !default;
// Welcome Mat Width
$welcome-mat-width: 52.0625rem !default;
// Min height for Overlay
$welcome-mat-min-height: 25rem !default;
// Max height for Overlay
$welcome-mat-max-height: 37.5rem !default;
// Welcome Mat Progress Bar width
$welcome-mat-width-progress-bar: 12.5rem !default;
// Size of the green completed check mark
$welcome-mat-complete-icon-size: 1.25rem !default;
// Size of the check mark in the green icon
$welcome-mat-check-size: 0.625rem !default;
// Bottom spacing (safe area) for background image
$welcome-mat-spacing-info: 7.75rem !default;