@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(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(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(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(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