@salesforce-ux/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