@salesforce-ux/design-system/design-tokens/dist/primitive.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(229, 229, 229);
/* 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(229, 229, 229);
/* 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(1, 68, 134, 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(238, 244, 255);
/* 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(1, 68, 134);
/* 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(11, 92, 171);
/* 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(68, 68, 68);
/* 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(24, 24, 24);
/* 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(24, 24, 24);
/* 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(68, 68, 68);
/* Input placeholder text on dark backgrounds. */
@color-text-placeholder-inverse: rgb(243, 243, 243);
/* Link text (508) */
@color-text-link: rgb(11, 92, 171);
/* 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(68, 68, 68);
/* 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;