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

Salesforce Lightning Design System

// Blue 10
@palette-blue-10: rgb(0, 22, 57);
// Blue 65
@palette-blue-65: rgb(87, 163, 253);
// Blue 15
@palette-blue-15: rgb(3, 35, 77);
// Blue 90
@palette-blue-90: rgb(216, 230, 254);
// Blue 80
@palette-blue-80: rgb(170, 203, 255);
// Blue 70
@palette-blue-70: rgb(120, 176, 253);
// Blue 60
@palette-blue-60: rgb(27, 150, 255);
// Blue 50
@palette-blue-50: rgb(1, 118, 211);
// Blue 40
@palette-blue-40: rgb(11, 92, 171);
// Blue 95
@palette-blue-95: rgb(238, 244, 255);
// Blue 30
@palette-blue-30: rgb(1, 68, 134);
// Blue 20
@palette-blue-20: rgb(3, 45, 96);
// Cloud Blue 90
@palette-cloud-blue-90: rgb(207, 233, 254);
// Cloud Blue 80
@palette-cloud-blue-80: rgb(144, 208, 254);
// Cloud Blue 70
@palette-cloud-blue-70: rgb(26, 185, 255);
// Cloud Blue 60
@palette-cloud-blue-60: rgb(13, 157, 218);
// Cloud Blue 50
@palette-cloud-blue-50: rgb(16, 124, 173);
// Cloud Blue 40
@palette-cloud-blue-40: rgb(5, 98, 138);
// Cloud Blue 95
@palette-cloud-blue-95: rgb(234, 245, 254);
// Cloud Blue 30
@palette-cloud-blue-30: rgb(8, 73, 104);
// Cloud Blue 20
@palette-cloud-blue-20: rgb(2, 50, 72);
// Cloud Blue 10
@palette-cloud-blue-10: rgb(0, 26, 40);
// Cloud Blue 65
@palette-cloud-blue-65: rgb(8, 171, 237);
// Cloud Blue 15
@palette-cloud-blue-15: rgb(10, 38, 54);
// Green 15
@palette-green-15: rgb(12, 41, 18);
// Green 90
@palette-green-90: rgb(205, 239, 196);
// Green 80
@palette-green-80: rgb(145, 219, 139);
// Green 70
@palette-green-70: rgb(69, 198, 90);
// Green 60
@palette-green-60: rgb(59, 167, 85);
// Green 50
@palette-green-50: rgb(46, 132, 74);
// Green 40
@palette-green-40: rgb(57, 101, 71);
// Green 95
@palette-green-95: rgb(235, 247, 230);
// Green 30
@palette-green-30: rgb(25, 78, 49);
// Green 20
@palette-green-20: rgb(28, 51, 38);
// Green 10
@palette-green-10: rgb(7, 27, 18);
// Green 65
@palette-green-65: rgb(65, 182, 88);
// Hot Orange 90
@palette-hot-orange-90: rgb(255, 222, 213);
// Hot Orange 80
@palette-hot-orange-80: rgb(254, 185, 165);
// Hot Orange 70
@palette-hot-orange-70: rgb(255, 144, 110);
// Hot Orange 60
@palette-hot-orange-60: rgb(255, 93, 45);
// Hot Orange 50
@palette-hot-orange-50: rgb(216, 58, 0);
// Hot Orange 40
@palette-hot-orange-40: rgb(170, 48, 1);
// Hot Orange 95
@palette-hot-orange-95: rgb(254, 241, 237);
// Hot Orange 30
@palette-hot-orange-30: rgb(126, 38, 0);
// Hot Orange 20
@palette-hot-orange-20: rgb(74, 36, 19);
// Hot Orange 10
@palette-hot-orange-10: rgb(40, 18, 2);
// Hot Orange 65
@palette-hot-orange-65: rgb(255, 120, 79);
// Hot Orange 15
@palette-hot-orange-15: rgb(66, 22, 4);
// Indigo 90
@palette-indigo-90: rgb(224, 229, 248);
// Indigo 80
@palette-indigo-80: rgb(190, 199, 246);
// Indigo 70
@palette-indigo-70: rgb(158, 169, 241);
// Indigo 60
@palette-indigo-60: rgb(127, 140, 237);
// Indigo 50
@palette-indigo-50: rgb(88, 103, 232);
// Indigo 40
@palette-indigo-40: rgb(58, 73, 218);
// Indigo 95
@palette-indigo-95: rgb(241, 243, 251);
// Indigo 30
@palette-indigo-30: rgb(47, 44, 183);
// Indigo 20
@palette-indigo-20: rgb(50, 29, 113);
// Indigo 10
@palette-indigo-10: rgb(32, 6, 71);
// Indigo 65
@palette-indigo-65: rgb(142, 155, 239);
// Indigo 15
@palette-indigo-15: rgb(31, 9, 116);
// Neutral 90
@palette-neutral-90: rgb(229, 229, 229);
// Neutral 80
@palette-neutral-80: rgb(201, 201, 201);
// Neutral 70
@palette-neutral-70: rgb(174, 174, 174);
// Neutral 100
@palette-neutral-100: rgb(255, 255, 255);
// Neutral 60
@palette-neutral-60: rgb(147, 147, 147);
// Neutral 50
@palette-neutral-50: rgb(116, 116, 116);
// Neutral 40
@palette-neutral-40: rgb(92, 92, 92);
// Neutral 95
@palette-neutral-95: rgb(243, 243, 243);
// Neutral 30
@palette-neutral-30: rgb(68, 68, 68);
// Neutral 20
@palette-neutral-20: rgb(46, 46, 46);
// Neutral 10
@palette-neutral-10: rgb(24, 24, 24);
// Orange 90
@palette-orange-90: rgb(254, 223, 208);
// Orange 80
@palette-orange-80: rgb(255, 186, 144);
// Orange 70
@palette-orange-70: rgb(254, 147, 57);
// Orange 60
@palette-orange-60: rgb(221, 122, 1);
// Orange 50
@palette-orange-50: rgb(169, 100, 4);
// Orange 40
@palette-orange-40: rgb(130, 81, 1);
// Orange 95
@palette-orange-95: rgb(255, 241, 234);
// Orange 30
@palette-orange-30: rgb(95, 62, 2);
// Orange 20
@palette-orange-20: rgb(62, 43, 2);
// Orange 10
@palette-orange-10: rgb(32, 22, 0);
// Orange 65
@palette-orange-65: rgb(243, 131, 3);
// Orange 15
@palette-orange-15: rgb(55, 30, 3);
// Pink 50
@palette-pink-50: rgb(227, 6, 106);
// Pink 40
@palette-pink-40: rgb(182, 5, 84);
// Pink 95
@palette-pink-95: rgb(254, 240, 243);
// Pink 30
@palette-pink-30: rgb(138, 3, 62);
// Pink 20
@palette-pink-20: rgb(97, 2, 42);
// Pink 65
@palette-pink-65: rgb(254, 114, 152);
// Pink 10
@palette-pink-10: rgb(55, 1, 20);
// Pink 15
@palette-pink-15: rgb(75, 6, 32);
// Pink 90
@palette-pink-90: rgb(253, 221, 227);
// Pink 80
@palette-pink-80: rgb(253, 182, 197);
// Pink 70
@palette-pink-70: rgb(254, 138, 167);
// Pink 60
@palette-pink-60: rgb(255, 83, 138);
// Purple 15
@palette-purple-15: rgb(48, 11, 96);
// Purple 90
@palette-purple-90: rgb(236, 225, 249);
// Purple 80
@palette-purple-80: rgb(215, 191, 242);
// Purple 70
@palette-purple-70: rgb(194, 158, 241);
// Purple 60
@palette-purple-60: rgb(173, 123, 238);
// Purple 50
@palette-purple-50: rgb(144, 80, 233);
// Purple 40
@palette-purple-40: rgb(117, 38, 227);
// Purple 95
@palette-purple-95: rgb(246, 242, 251);
// Purple 30
@palette-purple-30: rgb(90, 27, 169);
// Purple 20
@palette-purple-20: rgb(64, 16, 117);
// Purple 10
@palette-purple-10: rgb(36, 6, 67);
// Purple 65
@palette-purple-65: rgb(183, 141, 239);
// Red 90
@palette-red-90: rgb(254, 222, 216);
// Red 80
@palette-red-80: rgb(254, 184, 171);
// Red 70
@palette-red-70: rgb(254, 143, 125);
// Red 60
@palette-red-60: rgb(254, 92, 76);
// Red 50
@palette-red-50: rgb(234, 0, 30);
// Red 95
@palette-red-95: rgb(254, 241, 238);
// Red 40
@palette-red-40: rgb(186, 5, 23);
// Red 30
@palette-red-30: rgb(142, 3, 15);
// Red 20
@palette-red-20: rgb(100, 1, 3);
// Red 10
@palette-red-10: rgb(48, 12, 1);
// Red 65
@palette-red-65: rgb(254, 119, 101);
// Red 15
@palette-red-15: rgb(74, 12, 4);
// Teal 15
@palette-teal-15: rgb(7, 40, 37);
// Teal 90
@palette-teal-90: rgb(172, 243, 228);
// Teal 80
@palette-teal-80: rgb(4, 225, 203);
// Teal 70
@palette-teal-70: rgb(1, 195, 179);
// Teal 60
@palette-teal-60: rgb(6, 165, 154);
// Teal 50
@palette-teal-50: rgb(11, 130, 124);
// Teal 40
@palette-teal-40: rgb(5, 103, 100);
// Teal 95
@palette-teal-95: rgb(222, 249, 243);
// Teal 30
@palette-teal-30: rgb(2, 77, 76);
// Teal 20
@palette-teal-20: rgb(2, 52, 52);
// Teal 10
@palette-teal-10: rgb(7, 27, 18);
// Teal 65
@palette-teal-65: rgb(3, 180, 167);
// Violet 15
@palette-violet-15: rgb(61, 1, 87);
// Violet 90
@palette-violet-90: rgb(242, 222, 254);
// Violet 80
@palette-violet-80: rgb(229, 185, 254);
// Violet 70
@palette-violet-70: rgb(216, 146, 254);
// Violet 60
@palette-violet-60: rgb(203, 101, 255);
// Violet 50
@palette-violet-50: rgb(186, 1, 255);
// Violet 40
@palette-violet-40: rgb(150, 2, 199);
// Violet 95
@palette-violet-95: rgb(249, 240, 255);
// Violet 30
@palette-violet-30: rgb(115, 3, 148);
// Violet 20
@palette-violet-20: rgb(72, 26, 84);
// Violet 10
@palette-violet-10: rgb(46, 0, 57);
// Violet 65
@palette-violet-65: rgb(209, 125, 254);
// Yellow 70
@palette-yellow-70: rgb(228, 162, 1);
// Yellow 60
@palette-yellow-60: rgb(202, 133, 1);
// Yellow 50
@palette-yellow-50: rgb(168, 100, 3);
// Yellow 40
@palette-yellow-40: rgb(140, 75, 2);
// Yellow 95
@palette-yellow-95: rgb(251, 243, 224);
// Yellow 30
@palette-yellow-30: rgb(111, 52, 0);
// Yellow 20
@palette-yellow-20: rgb(79, 33, 0);
// Yellow 10
@palette-yellow-10: rgb(40, 18, 2);
// Yellow 65
@palette-yellow-65: rgb(215, 147, 4);
// Yellow 15
@palette-yellow-15: rgb(46, 34, 4);
// Yellow 90
@palette-yellow-90: rgb(249, 227, 182);
// Yellow 80
@palette-yellow-80: rgb(252, 192, 3);
// Used as the background color for the active state on rows or items on list-like components.
@color-background-row-active: rgb(243, 243, 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(243, 243, 243);
// Dark color for UI elements related to errors. Accessible with white text.
@color-background-error-dark: rgb(186, 5, 23);
// Background color for UI elements related to providing neutral information (not error, success, or warning).
@color-background-info: rgb(116, 116, 116);
// Alternative background color for dark portions of the app.
@color-background-alt-inverse: rgb(3, 45, 96);
// Used as the background color for the new state on rows or items on list-like components.
@color-background-row-new: rgb(205, 239, 196);
// Dark color for UI elements that have to do with success. Accessible with white text.
@color-background-success-dark: rgb(46, 132, 74);
// Used as background for loading stencils on white background.
@color-background-stencil: rgb(243, 243, 243);
// Color for UI elements that have to do with warning.
@color-background-warning: rgb(254, 147, 57);
// 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(142, 3, 15);
// Default background color for the whole app.
@color-background: rgb(243, 243, 243);
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
@color-brand-dark: rgb(1, 118, 211);
// 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(243, 243, 243);
// Our product brand blue.
@color-brand: rgb(27, 150, 255);
// Color for UI elements related to destructive actions.
@color-background-destructive: rgb(186, 5, 23);
// Color for UI elements that have to do with success.
@color-background-success: rgb(69, 198, 90);
// Dark Color for UI elements that have to do with warning.
@color-background-warning-dark: rgb(254, 147, 57);
// Color for UI elements related to the offline state.
@color-background-offline: rgb(68, 68, 68);
// Used as an alternate background for loading stencils on gray backgrounds.
@color-background-stencil-alt: rgb(243, 243, 243);
// Light variant of COLOR_BACKGROUND_INVERSE.
@color-background-inverse-light: rgb(3, 45, 96);
// Background color for UI elements related to the concept of an external user or customer.
@color-background-customer: rgb(254, 147, 57);
// Color for UI elements related to errors.
@color-background-error: rgb(254, 92, 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(25, 78, 49);
// Used as the background color for selected rows or items on list-like components.
@color-background-row-selected: rgb(243, 243, 243);
// Our product brand blue, darkened even further.
@color-brand-darker: rgb(1, 68, 134);
// Background color for text selected with a mouse.
@color-background-selection: rgb(216, 230, 254);
// Active color for UI elements related to destructive actions.
@color-background-destructive-active: rgb(142, 3, 15);
// Default background color for dark portions of the app (like Stage Left or tooltips).
@color-background-inverse: rgb(0, 22, 57);
// 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(254, 143, 125);
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
@color-border-brand-dark: rgb(1, 68, 134);
// Border color for UI elements related to providing neutral information (not error, success, or warning).
@color-border-info: rgb(116, 116, 116);
// Border color for UI elements that have to do with warnings.
@color-border-warning: rgb(254, 147, 57);
// Hover border color for UI elements that have to do with destructive actions.
@color-border-destructive-hover: rgb(186, 5, 23);
// Default border color for UI elements.
@color-border: rgb(201, 201, 201);
// Dark alternative border color for UI elements that have to do with success.
@color-border-success-dark: rgb(46, 132, 74);
// Border color for UI elements that have to do with destructive actions.
@color-border-destructive: rgb(234, 0, 30);
// Darkest separator color - used as an alternate separator color when more differentiation is desired.
@color-border-separator-alt-2: rgb(201, 201, 201);
// Border color for UI elements related to the offline state.
@color-border-offline: rgb(68, 68, 68);
// Border color for UI elements that have to do with success.
@color-border-success: rgb(145, 219, 139);
// Lightest separator color - used as default separator on white backgrounds.
@color-border-separator: rgb(243, 243, 243);
// Our product brand blue.
@color-border-brand: rgb(27, 150, 255);
// Used to delineate the boundary of a component that is being clicked. Specific to builders.
@color-border-selection-active: rgb(243, 243, 243);
// Border color for UI elements that have to do with errors.
@color-border-error: rgb(234, 0, 30);
// Used to delineate the boundary of a component that is being hovered over. Specific to builders.
@color-border-selection-hover: rgb(27, 150, 255);
// Used as the border color for the hover state on selected rows or items on list-like components.
@color-border-row-selected-hover: rgb(27, 150, 255);
// Border color for UI elements related to the concept of an external user or customer.
@color-border-customer: rgb(254, 147, 57);
// Used to delineate the boundary of a selected component. Specific to builders.
@color-border-selection: rgb(1, 118, 211);
// Used as the border color for selected rows or items on list-like components.
@color-border-row-selected: rgb(1, 118, 211);
// Medium separator color - used as default separator on light gray backgrounds.
@color-border-separator-alt: rgb(201, 201, 201);
// Border color to match UI elements using color-background-inverse.
@color-border-inverse: rgb(0, 22, 57);
// Active border color for UI elements that have to do with destructive actions.
@color-border-destructive-active: rgb(142, 3, 15);
// Alternative border color for UI elements related to errors.
@color-border-error-alt: rgb(254, 143, 125);
// Used as a separator on dark backgrounds, such as stage left navigation.
@color-border-separator-inverse: rgb(3, 45, 96);
@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 #0176d3;
// 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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@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(186, 5, 23);
// 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(27, 150, 255);
// 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(1, 68, 134);
// 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(1, 118, 211);
// Dark variant of BRAND that is accessible with white
@brand-accessible: rgb(1, 118, 211);
// 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(1, 68, 134);
// 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(1, 118, 211);
// 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(1, 68, 134);
// 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(1, 68, 134);
// 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(1, 118, 211);
// These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug
@brand-background-primary-transparent: rgba(176, 196, 223, 0);
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
@brand-header-contrast: rgb(94, 94, 94);
// Transparent value of BRAND_PRIMARY
@brand-primary-transparent: rgba(21, 137, 238, 0.1);
// Active / Hover state of BRAND_HEADER_CONTRAST_WARM
@brand-header-contrast-warm-active: rgb(186, 5, 23);
// 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(116, 116, 116);
// 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(3, 45, 96);
// Color for texts or icons that are related to warnings on a dark background.
@color-text-warning: rgb(254, 147, 57);
// Focus link text
@color-text-link-focus: rgb(1, 68, 134);
// Text color for destructive actions - hover state
@color-text-destructive-hover: rgb(186, 5, 23);
// Disabled link text
@color-text-link-disabled: rgb(3, 45, 96);
// Body text color
@color-text-default: rgb(3, 45, 96);
// Text color for destructive actions
@color-text-destructive: rgb(234, 0, 30);
// Hover link text
@color-text-link-hover: rgb(1, 68, 134);
// Text color for success text.
@color-text-success: rgb(46, 132, 74);
// Color for text that is purposefully de-emphasized to create visual hierarchy.
@color-text-weak: rgb(116, 116, 116);
// Input placeholder text on dark backgrounds.
@color-text-placeholder-inverse: rgb(243, 243, 243);
// Link text (508)
@color-text-link: rgb(1, 118, 211);
// Color for texts that are related to warnings on a light background.
@color-text-warning-alt: rgb(140, 75, 2);
// Default icon color.
@color-text-icon-default: rgb(116, 116, 116);
// Our product brand blue.
@color-text-brand: rgb(27, 150, 255);
// Error text for inputs and error misc
@color-text-error: rgb(234, 0, 30);
// Customer text used in anchor subtitle
@color-text-customer: rgb(254, 147, 57);
// Text color found on any primary brand color
@color-text-brand-primary: rgb(255, 255, 255);
// Active link text
@color-text-link-active: rgb(3, 45, 96);
// Color of required field marker.
@color-text-required: rgb(234, 0, 30);
// 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(116, 116, 116);
// Weak inverse text color for dark backgrounds
@color-text-inverse-weak: rgb(174, 174, 174);
// 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(69, 198, 90);
// Text color for field labels.
@color-text-label: rgb(116, 116, 116);
// 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(1, 68, 134);
// Background color for notification list item.
@color-background-notification: rgb(255, 255, 255);
// Notifications badge background color.
@color-background-notification-badge-active: rgb(3, 45, 96);
// Notifications badge background color.
@color-background-notification-badge-hover: rgb(1, 68, 134);
@color-contrast-primary: rgb(243, 243, 243);
@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(3, 45, 96);
// Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
@color-background-alt-2: rgb(243, 243, 243);
// Hover color for utility bar item.
@color-background-utility-bar-hover: rgb(243, 243, 243);
// Brand hover fill color
@fill-brand-hover: rgb(1, 68, 134);
// Brand fill color
@fill-brand: rgb(1, 118, 211);
// 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(27, 150, 255);
// 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(1, 68, 134);
@color-background-brand-primary-active: rgb(3, 45, 96);
@color-background-brand-primary-hover: rgb(1, 68, 134);
// Background color for default mobile chrome (ex. global header)
@color-background-chrome-mobile: rgb(1, 118, 211);
// 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(116, 116, 116);
@color-background-brand-primary: rgb(1, 118, 211);
// 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(243, 243, 243);
// Standard modal header
@color-background-modal: rgb(255, 255, 255);
// Hovered active toggle background color.
@color-background-toggle-active-hover: rgb(1, 68, 134);
// Background color for payloads in the feed.
@color-background-payload: rgb(243, 243, 243);
// Button backgrounds on modal headers
@color-background-modal-button: rgba(0, 0, 0, 0.07);
// Brand active fill color
@fill-brand-active: rgb(3, 45, 96);
// Active color for utility bar item.
@color-background-utility-bar-active: rgb(27, 150, 255);
// Stage left org switcher dropdown arrow background color.
@color-background-org-switcher-arrow: rgb(0, 22, 57);
// Active toggle background color.
@color-background-toggle-active: rgb(1, 68, 134);
// Alternative color for UI elements related to errors.
@color-background-error-alt: rgb(254, 143, 125);
// 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(201, 201, 201);
// Notifications badge background color.
@color-background-notification-badge-focus: rgb(1, 68, 134);
// Background for utility icons that live in the action bar on mobile.
@color-background-actionbar-icon-utility: rgb(116, 116, 116);
@color-background-secondary: rgb(243, 243, 243);
// The borders to create the checkmark
@color-border-input-checkbox-selected-checkmark: rgb(255, 255, 255);
// Disabled stroke color.
@color-stroke-disabled: rgb(243, 243, 243);
// Active stroke color for our product brand blue.
@color-stroke-brand-active: rgb(3, 45, 96);
@color-border-primary: rgb(201, 201, 201);
@color-border-brand-primary-focus: rgb(1, 118, 211);
@color-border-brand-primary-hover: rgb(1, 118, 211);
// Border color for brandable primary button
@color-border-button-brand: rgb(1, 118, 211);
@color-border-brand-primary-active: rgb(3, 45, 96);
@color-border-brand-primary: rgb(27, 150, 255);
@color-border-button-focus-inverse: rgb(243, 243, 243);
// 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(1, 68, 134);
// Used to delineate the boundary of a selected canvas element. Specific to builders.
@color-border-canvas-element-selection: rgb(26, 185, 255);
// Hover stroke color for our product brand blue.
@color-stroke-brand-hover: rgb(1, 118, 211);
// Stroke color for our global header buttons.
@color-stroke-header-button: rgb(174, 174, 174);
@color-border-link-focus-inverse: rgb(243, 243, 243);
// Our product brand blue.
@color-stroke-brand: rgb(1, 118, 211);
// Used to delineate the boundary of a specific region. Specific to builders.
@color-border-hint: rgb(3, 45, 96);
// 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 #f3f3f3;
// 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 #f3f3f3;
// 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 #1b96ff 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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
// 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(1, 118, 211);
// 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(243, 243, 243);
// Tertiary body text color
@color-text-tertiary: rgb(116, 116, 116);
// Active state on a standalone link on a dark background.
@color-text-inverse-active: rgb(26, 185, 255);
// Primary body text color
@color-text-primary: rgb(3, 45, 96);
@color-text-link-primary-focus: rgb(1, 118, 211);
// Color for text in focus state in a tab group.
@color-text-tab-label-focus: rgb(1, 68, 134);
// 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(243, 243, 243);
// Text color for pills.
@color-text-pill: rgb(1, 118, 211);
@color-text-link-primary-hover: rgb(1, 118, 211);
// Color for text in active state in a tab group.
@color-text-tab-label-active: rgb(3, 45, 96);
// Color for text in hover state in a tab group.
@color-text-tab-label-hover: rgb(1, 68, 134);
// Color for text on toast messages.
@color-text-toast: rgb(243, 243, 243);
// Color for disabled toggles
@color-text-toggle-disabled: rgb(201, 201, 201);
// Top bar icon color
@color-text-browser: rgb(255, 255, 255);
@color-text-link-primary-active: rgb(3, 45, 96);
@color-text-link-primary: rgb(1, 118, 211);
// 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(1, 118, 211);
// Hover state on a standalone link on a dark background.
@color-text-inverse-hover: rgb(174, 174, 174);
// Modal header title
@color-text-modal: rgb(255, 255, 255);
// Modal header button text color
@color-text-modal-button: rgb(116, 116, 116);
// Color for interactive utility icons
@color-text-icon-utility: rgb(174, 174, 174);
// Secondary body text color
@color-text-secondary: rgb(116, 116, 116);
// Text in stage left navigation.
@color-text-stage-left: rgb(243, 243, 243);
// Default value for text-transform
@text-transform: none;
// Background color for a new notification list item.
@color-background-notification-new: rgb(243, 243, 243);
// Focused header button icon color
@fill-header-button-focus: rgb(1, 118, 211);
// Background color for reminder notification on hover
@color-background-reminder-hover: rgb(255, 255, 255);
// Notifications badge background color.
@color-background-notification-badge: rgb(234, 0, 30);
// Hovered header button icon color
@fill-header-button-hover: rgb(1, 68, 134);
// Disabled input
@color-background-input-disabled: rgb(243, 243, 243);
// Hovered toggle background color.
@color-background-toggle-hover: rgb(147, 147, 147);
// Background color for reminder notification
@color-background-reminder: rgb(243, 243, 243);
// Hovered background color for success buttons
@color-background-button-success-hover: rgb(46, 132, 74);
// Header button icon color
@fill-header-button: rgb(174, 174, 174);
// Toggle background color.
@color-background-toggle: rgb(174, 174, 174);
// Background color for success buttons
@color-background-button-success: rgb(69, 198, 90);
// Disabled checkboxes
@color-background-input-checkbox-disabled: rgb(201, 201, 201);
// Background color for pills.
@color-background-pill: rgb(255, 255, 255);
// Color of the spinner dot.
@color-background-spinner-dot: rgb(174, 174, 174);
// The color of the mask overlay that provides user feedback on interaction.
@color-background-backdrop-tint: rgb(243, 243, 243);
// 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(243, 243, 243);
// Disabled toggle background color.
@color-background-toggle-disabled: rgb(174, 174, 174);
// Background color for toast messaging.
@color-background-toast: rgb(116, 116, 116);
// Background color of comment posts in the feed.
@color-background-post: rgb(243, 243, 243);
// Default input field
@color-background-input: rgb(255, 255, 255);
// Background color for success toast messaging.
@color-background-toast-success: rgb(46, 132, 74);
// 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(46, 132, 74);
// Background color for error toast messaging.
@color-background-toast-error: rgb(234, 0, 30);
// The background color of an internal scrollbar track.
@color-background-scrollbar-track: rgb(201, 201, 201);
// Background color for input field that has encountered an error.
@color-background-input-error: rgb(253, 221, 227);
// 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(201, 201, 201);
// Border color on notification reminders.
@color-border-reminder: rgb(243, 243, 243);
// 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(201, 201, 201);
// Border color on active form elements.
@color-border-input-active: rgb(27, 150, 255);
// Border color on form elements.
@color-border-input: rgb(201, 201, 201);
// 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(1, 118, 211);
@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 #0176d3;
// 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 #f3f3f3;
// 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: "/profile_avatar_200.png";
@user-default-avatar-medium: "/profile_avatar_160.png";
@user-default-avatar-small: "/profile_avatar_96.png";
@group-default-avatar: "/group_avatar_200.png";
@group-default-avatar-medium: "/group_avatar_160.png";
@group-default-avatar-small: "/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(174, 174, 174);
// 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(1, 118, 211);
// Input disabled text
@color-text-input-disabled: rgb(116, 116, 116);
// Text color for default secondary button
@color-text-button-default: rgb(1, 118, 211);
// Default icon color - disabled state
@color-text-icon-default-disabled: rgb(201, 201, 201);
// 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(1, 118, 211);
// 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(201, 201, 201);
// Color for default text in a tab group.
@color-text-tab-label: rgb(3, 45, 96);
// Default icon color - active state.
@color-text-icon-default-active: rgb(3, 45, 96);
// 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(174, 174, 174);
// 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(243, 243, 243);
// Text color for default secondary button - active state
@color-text-button-default-active: rgb(1, 118, 211);
// Icon color on dark backgroun