@salesforce-ux/design-system/design-tokens/dist/ui-force.less

Salesforce Lightning Design System

/* 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