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

Salesforce Lightning Design System

/* Blue 10 */
$palette-blue-10 = rgb(0, 22, 57)
/* Blue 65 */
$palette-blue-65 = rgb(87, 163, 253)
/* Blue 15 */
$palette-blue-15 = rgb(3, 35, 77)
/* Blue 90 */
$palette-blue-90 = rgb(216, 230, 254)
/* Blue 80 */
$palette-blue-80 = rgb(170, 203, 255)
/* Blue 70 */
$palette-blue-70 = rgb(120, 176, 253)
/* Blue 60 */
$palette-blue-60 = rgb(27, 150, 255)
/* Blue 50 */
$palette-blue-50 = rgb(1, 118, 211)
/* Blue 40 */
$palette-blue-40 = rgb(11, 92, 171)
/* Blue 95 */
$palette-blue-95 = rgb(238, 244, 255)
/* Blue 30 */
$palette-blue-30 = rgb(1, 68, 134)
/* Blue 20 */
$palette-blue-20 = rgb(3, 45, 96)
/* Cloud Blue 90 */
$palette-cloud-blue-90 = rgb(207, 233, 254)
/* Cloud Blue 80 */
$palette-cloud-blue-80 = rgb(144, 208, 254)
/* Cloud Blue 70 */
$palette-cloud-blue-70 = rgb(26, 185, 255)
/* Cloud Blue 60 */
$palette-cloud-blue-60 = rgb(13, 157, 218)
/* Cloud Blue 50 */
$palette-cloud-blue-50 = rgb(16, 124, 173)
/* Cloud Blue 40 */
$palette-cloud-blue-40 = rgb(5, 98, 138)
/* Cloud Blue 95 */
$palette-cloud-blue-95 = rgb(234, 245, 254)
/* Cloud Blue 30 */
$palette-cloud-blue-30 = rgb(8, 73, 104)
/* Cloud Blue 20 */
$palette-cloud-blue-20 = rgb(2, 50, 72)
/* Cloud Blue 10 */
$palette-cloud-blue-10 = rgb(0, 26, 40)
/* Cloud Blue 65 */
$palette-cloud-blue-65 = rgb(8, 171, 237)
/* Cloud Blue 15 */
$palette-cloud-blue-15 = rgb(10, 38, 54)
/* Green 15 */
$palette-green-15 = rgb(12, 41, 18)
/* Green 90 */
$palette-green-90 = rgb(205, 239, 196)
/* Green 80 */
$palette-green-80 = rgb(145, 219, 139)
/* Green 70 */
$palette-green-70 = rgb(69, 198, 90)
/* Green 60 */
$palette-green-60 = rgb(59, 167, 85)
/* Green 50 */
$palette-green-50 = rgb(46, 132, 74)
/* Green 40 */
$palette-green-40 = rgb(57, 101, 71)
/* Green 95 */
$palette-green-95 = rgb(235, 247, 230)
/* Green 30 */
$palette-green-30 = rgb(25, 78, 49)
/* Green 20 */
$palette-green-20 = rgb(28, 51, 38)
/* Green 10 */
$palette-green-10 = rgb(7, 27, 18)
/* Green 65 */
$palette-green-65 = rgb(65, 182, 88)
/* Hot Orange 90 */
$palette-hot-orange-90 = rgb(255, 222, 213)
/* Hot Orange 80 */
$palette-hot-orange-80 = rgb(254, 185, 165)
/* Hot Orange 70 */
$palette-hot-orange-70 = rgb(255, 144, 110)
/* Hot Orange 60 */
$palette-hot-orange-60 = rgb(255, 93, 45)
/* Hot Orange 50 */
$palette-hot-orange-50 = rgb(216, 58, 0)
/* Hot Orange 40 */
$palette-hot-orange-40 = rgb(170, 48, 1)
/* Hot Orange 95 */
$palette-hot-orange-95 = rgb(254, 241, 237)
/* Hot Orange 30 */
$palette-hot-orange-30 = rgb(126, 38, 0)
/* Hot Orange 20 */
$palette-hot-orange-20 = rgb(74, 36, 19)
/* Hot Orange 10 */
$palette-hot-orange-10 = rgb(40, 18, 2)
/* Hot Orange 65 */
$palette-hot-orange-65 = rgb(255, 120, 79)
/* Hot Orange 15 */
$palette-hot-orange-15 = rgb(66, 22, 4)
/* Indigo 90 */
$palette-indigo-90 = rgb(224, 229, 248)
/* Indigo 80 */
$palette-indigo-80 = rgb(190, 199, 246)
/* Indigo 70 */
$palette-indigo-70 = rgb(158, 169, 241)
/* Indigo 60 */
$palette-indigo-60 = rgb(127, 140, 237)
/* Indigo 50 */
$palette-indigo-50 = rgb(88, 103, 232)
/* Indigo 40 */
$palette-indigo-40 = rgb(58, 73, 218)
/* Indigo 95 */
$palette-indigo-95 = rgb(241, 243, 251)
/* Indigo 30 */
$palette-indigo-30 = rgb(47, 44, 183)
/* Indigo 20 */
$palette-indigo-20 = rgb(50, 29, 113)
/* Indigo 10 */
$palette-indigo-10 = rgb(32, 6, 71)
/* Indigo 65 */
$palette-indigo-65 = rgb(142, 155, 239)
/* Indigo 15 */
$palette-indigo-15 = rgb(31, 9, 116)
/* Neutral 90 */
$palette-neutral-90 = rgb(229, 229, 229)
/* Neutral 80 */
$palette-neutral-80 = rgb(201, 201, 201)
/* Neutral 70 */
$palette-neutral-70 = rgb(174, 174, 174)
/* Neutral 100 */
$palette-neutral-100 = rgb(255, 255, 255)
/* Neutral 60 */
$palette-neutral-60 = rgb(147, 147, 147)
/* Neutral 50 */
$palette-neutral-50 = rgb(116, 116, 116)
/* Neutral 40 */
$palette-neutral-40 = rgb(92, 92, 92)
/* Neutral 95 */
$palette-neutral-95 = rgb(243, 243, 243)
/* Neutral 30 */
$palette-neutral-30 = rgb(68, 68, 68)
/* Neutral 20 */
$palette-neutral-20 = rgb(46, 46, 46)
/* Neutral 10 */
$palette-neutral-10 = rgb(24, 24, 24)
/* Orange 90 */
$palette-orange-90 = rgb(254, 223, 208)
/* Orange 80 */
$palette-orange-80 = rgb(255, 186, 144)
/* Orange 70 */
$palette-orange-70 = rgb(254, 147, 57)
/* Orange 60 */
$palette-orange-60 = rgb(221, 122, 1)
/* Orange 50 */
$palette-orange-50 = rgb(169, 100, 4)
/* Orange 40 */
$palette-orange-40 = rgb(130, 81, 1)
/* Orange 95 */
$palette-orange-95 = rgb(255, 241, 234)
/* Orange 30 */
$palette-orange-30 = rgb(95, 62, 2)
/* Orange 20 */
$palette-orange-20 = rgb(62, 43, 2)
/* Orange 10 */
$palette-orange-10 = rgb(32, 22, 0)
/* Orange 65 */
$palette-orange-65 = rgb(243, 131, 3)
/* Orange 15 */
$palette-orange-15 = rgb(55, 30, 3)
/* Pink 50 */
$palette-pink-50 = rgb(227, 6, 106)
/* Pink 40 */
$palette-pink-40 = rgb(182, 5, 84)
/* Pink 95 */
$palette-pink-95 = rgb(254, 240, 243)
/* Pink 30 */
$palette-pink-30 = rgb(138, 3, 62)
/* Pink 20 */
$palette-pink-20 = rgb(97, 2, 42)
/* Pink 65 */
$palette-pink-65 = rgb(254, 114, 152)
/* Pink 10 */
$palette-pink-10 = rgb(55, 1, 20)
/* Pink 15 */
$palette-pink-15 = rgb(75, 6, 32)
/* Pink 90 */
$palette-pink-90 = rgb(253, 221, 227)
/* Pink 80 */
$palette-pink-80 = rgb(253, 182, 197)
/* Pink 70 */
$palette-pink-70 = rgb(254, 138, 167)
/* Pink 60 */
$palette-pink-60 = rgb(255, 83, 138)
/* Purple 15 */
$palette-purple-15 = rgb(48, 11, 96)
/* Purple 90 */
$palette-purple-90 = rgb(236, 225, 249)
/* Purple 80 */
$palette-purple-80 = rgb(215, 191, 242)
/* Purple 70 */
$palette-purple-70 = rgb(194, 158, 241)
/* Purple 60 */
$palette-purple-60 = rgb(173, 123, 238)
/* Purple 50 */
$palette-purple-50 = rgb(144, 80, 233)
/* Purple 40 */
$palette-purple-40 = rgb(117, 38, 227)
/* Purple 95 */
$palette-purple-95 = rgb(246, 242, 251)
/* Purple 30 */
$palette-purple-30 = rgb(90, 27, 169)
/* Purple 20 */
$palette-purple-20 = rgb(64, 16, 117)
/* Purple 10 */
$palette-purple-10 = rgb(36, 6, 67)
/* Purple 65 */
$palette-purple-65 = rgb(183, 141, 239)
/* Red 90 */
$palette-red-90 = rgb(254, 222, 216)
/* Red 80 */
$palette-red-80 = rgb(254, 184, 171)
/* Red 70 */
$palette-red-70 = rgb(254, 143, 125)
/* Red 60 */
$palette-red-60 = rgb(254, 92, 76)
/* Red 50 */
$palette-red-50 = rgb(234, 0, 30)
/* Red 95 */
$palette-red-95 = rgb(254, 241, 238)
/* Red 40 */
$palette-red-40 = rgb(186, 5, 23)
/* Red 30 */
$palette-red-30 = rgb(142, 3, 15)
/* Red 20 */
$palette-red-20 = rgb(100, 1, 3)
/* Red 10 */
$palette-red-10 = rgb(48, 12, 1)
/* Red 65 */
$palette-red-65 = rgb(254, 119, 101)
/* Red 15 */
$palette-red-15 = rgb(74, 12, 4)
/* Teal 15 */
$palette-teal-15 = rgb(7, 40, 37)
/* Teal 90 */
$palette-teal-90 = rgb(172, 243, 228)
/* Teal 80 */
$palette-teal-80 = rgb(4, 225, 203)
/* Teal 70 */
$palette-teal-70 = rgb(1, 195, 179)
/* Teal 60 */
$palette-teal-60 = rgb(6, 165, 154)
/* Teal 50 */
$palette-teal-50 = rgb(11, 130, 124)
/* Teal 40 */
$palette-teal-40 = rgb(5, 103, 100)
/* Teal 95 */
$palette-teal-95 = rgb(222, 249, 243)
/* Teal 30 */
$palette-teal-30 = rgb(2, 77, 76)
/* Teal 20 */
$palette-teal-20 = rgb(2, 52, 52)
/* Teal 10 */
$palette-teal-10 = rgb(7, 27, 18)
/* Teal 65 */
$palette-teal-65 = rgb(3, 180, 167)
/* Violet 15 */
$palette-violet-15 = rgb(61, 1, 87)
/* Violet 90 */
$palette-violet-90 = rgb(242, 222, 254)
/* Violet 80 */
$palette-violet-80 = rgb(229, 185, 254)
/* Violet 70 */
$palette-violet-70 = rgb(216, 146, 254)
/* Violet 60 */
$palette-violet-60 = rgb(203, 101, 255)
/* Violet 50 */
$palette-violet-50 = rgb(186, 1, 255)
/* Violet 40 */
$palette-violet-40 = rgb(150, 2, 199)
/* Violet 95 */
$palette-violet-95 = rgb(249, 240, 255)
/* Violet 30 */
$palette-violet-30 = rgb(115, 3, 148)
/* Violet 20 */
$palette-violet-20 = rgb(72, 26, 84)
/* Violet 10 */
$palette-violet-10 = rgb(46, 0, 57)
/* Violet 65 */
$palette-violet-65 = rgb(209, 125, 254)
/* Yellow 70 */
$palette-yellow-70 = rgb(228, 162, 1)
/* Yellow 60 */
$palette-yellow-60 = rgb(202, 133, 1)
/* Yellow 50 */
$palette-yellow-50 = rgb(168, 100, 3)
/* Yellow 40 */
$palette-yellow-40 = rgb(140, 75, 2)
/* Yellow 95 */
$palette-yellow-95 = rgb(251, 243, 224)
/* Yellow 30 */
$palette-yellow-30 = rgb(111, 52, 0)
/* Yellow 20 */
$palette-yellow-20 = rgb(79, 33, 0)
/* Yellow 10 */
$palette-yellow-10 = rgb(40, 18, 2)
/* Yellow 65 */
$palette-yellow-65 = rgb(215, 147, 4)
/* Yellow 15 */
$palette-yellow-15 = rgb(46, 34, 4)
/* Yellow 90 */
$palette-yellow-90 = rgb(249, 227, 182)
/* Yellow 80 */
$palette-yellow-80 = rgb(252, 192, 3)
/* Used as the background color for the active state on rows or items on list-like components. */
$color-background-row-active = rgb(243, 243, 243)
/* Light variant of COLOR_BACKGROUND. */
$color-background-light = rgb(255, 255, 255)
/* Used as the background color for the hover state on rows or items on list-like components. */
$color-background-row-hover = rgb(243, 243, 243)
/* Dark color for UI elements related to errors. Accessible with white text. */
$color-background-error-dark = rgb(186, 5, 23)
/* Background color for UI elements related to providing neutral information (not error, success, or warning). */
$color-background-info = rgb(116, 116, 116)
/* Alternative background color for dark portions of the app. */
$color-background-alt-inverse = rgb(3, 45, 96)
/* Used as the background color for the new state on rows or items on list-like components. */
$color-background-row-new = rgb(205, 239, 196)
/* Dark color for UI elements that have to do with success. Accessible with white text. */
$color-background-success-dark = rgb(46, 132, 74)
/* Used as background for loading stencils on white background. */
$color-background-stencil = rgb(243, 243, 243)
/* Color for UI elements that have to do with warning. */
$color-background-warning = rgb(254, 147, 57)
/* Background color for highlighting text in search results. */
$color-background-highlight-search = rgb(255, 240, 63)
/* Hover color for UI elements related to destructive actions. */
$color-background-destructive-hover = rgb(142, 3, 15)
/* Default background color for the whole app. */
$color-background = rgb(243, 243, 243)
/* Our product brand blue, darkened to meet accessibility color contrast ratios with white text. */
$color-brand-dark = rgb(1, 118, 211)
/* The color of the mask overlay that appears when you enter a modal state. */
$color-background-backdrop = rgba(255, 255, 255, 0.75)
/* Dark variant of COLOR_BACKGROUND. */
$color-background-dark = rgb(243, 243, 243)
/* Our product brand blue. */
$color-brand = rgb(27, 150, 255)
/* Color for UI elements related to destructive actions. */
$color-background-destructive = rgb(186, 5, 23)
/* Color for UI elements that have to do with success. */
$color-background-success = rgb(69, 198, 90)
/* Dark Color for UI elements that have to do with warning. */
$color-background-warning-dark = rgb(254, 147, 57)
/* Color for UI elements related to the offline state. */
$color-background-offline = rgb(68, 68, 68)
/* Used as an alternate background for loading stencils on gray backgrounds. */
$color-background-stencil-alt = rgb(243, 243, 243)
/* Light variant of COLOR_BACKGROUND_INVERSE. */
$color-background-inverse-light = rgb(3, 45, 96)
/* Background color for UI elements related to the concept of an external user or customer. */
$color-background-customer = rgb(254, 147, 57)
/* Color for UI elements related to errors. */
$color-background-error = rgb(254, 92, 76)
/* Second default background color for the app. */
$color-background-alt = rgb(255, 255, 255)
/* Darker color for UI elements that have to do with success. Accessible with white text. */
$color-background-success-darker = rgb(25, 78, 49)
/* Used as the background color for selected rows or items on list-like components. */
$color-background-row-selected = rgb(243, 243, 243)
/* Our product brand blue, darkened even further. */
$color-brand-darker = rgb(1, 68, 134)
/* Background color for text selected with a mouse. */
$color-background-selection = rgb(216, 230, 254)
/* Active color for UI elements related to destructive actions. */
$color-background-destructive-active = rgb(142, 3, 15)
/* Default background color for dark portions of the app (like Stage Left or tooltips). */
$color-background-inverse = rgb(0, 22, 57)
/* Background color for highlighting UI elements. */
$color-background-highlight = rgb(250, 255, 189)
/* Dark alternative border color for UI elements related to errors. */
$color-border-error-dark = rgb(254, 143, 125)
/* Our product brand blue, darkened to meet accessibility color contrast ratios with white text. */
$color-border-brand-dark = rgb(1, 68, 134)
/* Border color for UI elements related to providing neutral information (not error, success, or warning). */
$color-border-info = rgb(116, 116, 116)
/* Border color for UI elements that have to do with warnings. */
$color-border-warning = rgb(254, 147, 57)
/* Hover border color for UI elements that have to do with destructive actions. */
$color-border-destructive-hover = rgb(186, 5, 23)
/* Default border color for UI elements. */
$color-border = rgb(201, 201, 201)
/* Dark alternative border color for UI elements that have to do with success. */
$color-border-success-dark = rgb(46, 132, 74)
/* Border color for UI elements that have to do with destructive actions. */
$color-border-destructive = rgb(234, 0, 30)
/* Darkest separator color - used as an alternate separator color when more differentiation is desired. */
$color-border-separator-alt-2 = rgb(201, 201, 201)
/* Border color for UI elements related to the offline state. */
$color-border-offline = rgb(68, 68, 68)
/* Border color for UI elements that have to do with success. */
$color-border-success = rgb(145, 219, 139)
/* Lightest separator color - used as default separator on white backgrounds. */
$color-border-separator = rgb(243, 243, 243)
/* Our product brand blue. */
$color-border-brand = rgb(27, 150, 255)
/* Used to delineate the boundary of a component that is being clicked. Specific to builders. */
$color-border-selection-active = rgb(243, 243, 243)
/* Border color for UI elements that have to do with errors. */
$color-border-error = rgb(234, 0, 30)
/* Used to delineate the boundary of a component that is being hovered over. Specific to builders. */
$color-border-selection-hover = rgb(27, 150, 255)
/* Used as the border color for the hover state on selected rows or items on list-like components. */
$color-border-row-selected-hover = rgb(27, 150, 255)
/* Border color for UI elements related to the concept of an external user or customer. */
$color-border-customer = rgb(254, 147, 57)
/* Used to delineate the boundary of a selected component. Specific to builders. */
$color-border-selection = rgb(1, 118, 211)
/* Used as the border color for selected rows or items on list-like components. */
$color-border-row-selected = rgb(1, 118, 211)
/* Medium separator color - used as default separator on light gray backgrounds. */
$color-border-separator-alt = rgb(201, 201, 201)
/* Border color to match UI elements using color-background-inverse. */
$color-border-inverse = rgb(0, 22, 57)
/* Active border color for UI elements that have to do with destructive actions. */
$color-border-destructive-active = rgb(142, 3, 15)
/* Alternative border color for UI elements related to errors. */
$color-border-error-alt = rgb(254, 143, 125)
/* Used as a separator on dark backgrounds, such as stage left navigation. */
$color-border-separator-inverse = rgb(3, 45, 96)
$border-radius-small = 0.125rem
/* Icons in lists, record home icon, unbound input elements */
$border-radius-medium = 0.25rem
$border-radius-large = 0.5rem
/* Circle for global use, action icon bgd shape */
$border-radius-circle = 50%
$border-width-thin = 1px
$border-width-thick = 2px
/* Shadow for active states on interactive elements. */
$shadow-active = 0 0 2px #0176d3
/* Shadow for drag-n-drop. */
$shadow-drag = 0 2px 4px 0 rgba(0, 0, 0, 0.40)
/* Shadow for drop down. */
$shadow-drop-down = 0 2px 3px 0 rgba(0, 0, 0, 0.16)
/* 0 seconds, 0 frames */
$duration-instantly = 0s
/* 0.05 seconds, 3 frames */
$duration-immediately = 0.05s
/* 0.1 seconds, 6 frames */
$duration-quickly = 0.1s
/* 0.2 seconds, 12 frames */
$duration-promptly = 0.2s
/* 0.4 seconds, 24 frames */
$duration-slowly = 0.4s
/* 3.2 seconds, 192 frames */
$duration-paused = 3.2s
/* Default font-family for Salesforce applications */
$font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
$font-family-heading = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
$font-family-monospace = Consolas, Menlo, Monaco, Courier, monospace
/* Constant typography token for font size 1 */
$font-size-1 = 0.625rem
/* Constant typography token for font size 2 */
$font-size-2 = 0.75rem
/* Constant typography token for font size 3 */
$font-size-3 = 0.8125rem
/* Variable typography token for font size 10 */
$var-font-size-10 = 2rem
/* Constant typography token for font size 4 */
$font-size-4 = 0.875rem
/* Variable typography token for font size 11 */
$var-font-size-11 = 2.625rem
/* Constant typography token for font size 5 */
$font-size-5 = 1rem
/* Constant typography token for font size 6 */
$font-size-6 = 1.125rem
/* Constant typography token for font size 7 */
$font-size-7 = 1.25rem
/* Constant typography token for font size 8 */
$font-size-8 = 1.5rem
/* Variable typography token for font size 1 */
$var-font-size-1 = 0.625rem
/* Constant typography token for font size 9 */
$font-size-9 = 1.75rem
/* Variable typography token for font size 2 */
$var-font-size-2 = 0.75rem
/* Variable typography token for font size 3 */
$var-font-size-3 = 0.8125rem
/* Constant typography token for font size 10 */
$font-size-10 = 2rem
/* Variable typography token for font size 4 */
$var-font-size-4 = 0.875rem
/* Constant typography token for font size 11 */
$font-size-11 = 2.625rem
/* Variable typography token for font size 5 */
$var-font-size-5 = 1rem
/* Variable typography token for font size 6 */
$var-font-size-6 = 1.125rem
/* Variable typography token for font size 7 */
$var-font-size-7 = 1.25rem
/* Variable typography token for font size 8 */
$var-font-size-8 = 1.5rem
/* Variable typography token for font size 9 */
$var-font-size-9 = 1.75rem
/* Use for large headings only. */
$font-weight-light = 300
/* Most all body copy. */
$font-weight-regular = 400
/* Used sparingly for emphasized text within regular body copy. */
$font-weight-bold = 700
/* Unitless line-heights for reusability */
$line-height-heading = 1.25
/* Unitless line-heights for reusability */
$line-height-text = 1.5
/* Remove extra leading. Unitless line-heights for reusability */
$line-height-reset = 1
/* Variable unitless line-heights for reusability */
$var-line-height-text = 1.5
/* 50% transparency of an element */
$opacity-5 = 0.5
/* 80% transparency of an element */
$opacity-8 = 0.8
/* Disabled state of BRAND_HEADER_CONTRAST_WEAK */
$brand-header-contrast-weak-disabled = rgba(166, 166, 166, 0.25)
/* Gray Color 11 */
$color-gray-11 = rgb(62, 62, 60)
/* Transparent value of BRAND_PRIMARY at 10% */
$brand-primary-transparent-10 = rgba(21, 137, 238, 0.1)
/* Gray Color 12 */
$color-gray-12 = rgb(43, 40, 38)
/* These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug */
$brand-background-dark-transparent = rgba(221, 219, 218, 0)
/* Gray Color 13 */
$color-gray-13 = rgb(8, 7, 7)
/* Background color a branded app header */
$brand-header = rgb(255, 255, 255)
/* Active / Hover state of BRAND_LIGHT */
$brand-light-active = rgb(227, 229, 237)
/* Variant of BRAND_HEADER_CONTRAST that provides a warm color */
$brand-header-contrast-warm = rgb(186, 5, 23)
/* Disabled state of BRAND_HEADER_ICON */
$brand-header-icon-disabled = rgba(145, 145, 145, 0.25)
/* Active / Hover state of BRAND_HEADER_CONTRAST */
$brand-header-contrast-active = rgb(80, 80, 80)
/* Primary page background color */
$brand-background-primary = rgb(250, 250, 249)
/* Primary brand color */
$brand-primary = rgb(27, 150, 255)
/* Active / Hover state of BRAND_HEADER_CONTRAST_WEAK */
$brand-header-contrast-weak-active = rgb(129, 129, 129)
/* Active / Hover state of BRAND_CONTRAST */
$brand-contrast-active = rgb(13, 14, 18)
/* Variant of BRAND_HEADER_CONTRAST that provides a cool color */
$brand-header-contrast-cool = rgb(1, 68, 134)
/* Variant of BRAND_HEADER that is accessible with BRAND_HEADER */
$brand-header-contrast-inverse = rgb(255, 255, 255)
/* Dark variant of BRAND that is accessible with light colors */
$brand-dark = rgb(1, 118, 211)
/* Dark variant of BRAND that is accessible with white */
$brand-accessible = rgb(1, 118, 211)
/* Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color */
$brand-background-dark = rgb(232, 232, 232)
/* Active / Hover state of BRAND_TEXT_LINK */
$brand-text-link-active = rgb(1, 68, 134)
/* Gray Color 1 */
$color-gray-1 = rgb(255, 255, 255)
/* Gray Color 2 */
$color-gray-2 = rgb(250, 250, 249)
/* Active / Hover state of BRAND_HEADER_ICON */
$brand-header-icon-active = rgb(129, 129, 129)
/* Gray Color 3 */
$color-gray-3 = rgb(243, 242, 242)
/* Icons of BRAND_HEADER that is accessible with BRAND_HEADER */
$brand-header-icon = rgb(145, 145, 145)
/* Disabled state of BRAND_A11Y */
$brand-disabled = rgb(201, 199, 197)
/* Primary text link brand color */
$brand-text-link = rgb(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(116, 116, 116)
/* Link color on dark background */
$color-text-link-inverse = rgb(255, 255, 255)
/* Link color on dark background - active state */
$color-text-link-inverse-active = rgba(255, 255, 255, 0.5)
/* Action label active text color */
$color-text-action-label-active = rgb(3, 45, 96)
/* Color for texts or icons that are related to warnings on a dark background. */
$color-text-warning = rgb(254, 147, 57)
/* Focus link text */
$color-text-link-focus = rgb(1, 68, 134)
/* Text color for destructive actions - hover state */
$color-text-destructive-hover = rgb(186, 5, 23)
/* Disabled link text */
$color-text-link-disabled = rgb(3, 45, 96)
/* Body text color */
$color-text-default = rgb(3, 45, 96)
/* Text color for destructive actions */
$color-text-destructive = rgb(234, 0, 30)
/* Hover link text */
$color-text-link-hover = rgb(1, 68, 134)
/* Text color for success text. */
$color-text-success = rgb(46, 132, 74)
/* Color for text that is purposefully de-emphasized to create visual hierarchy. */
$color-text-weak = rgb(116, 116, 116)
/* Input placeholder text on dark backgrounds. */
$color-text-placeholder-inverse = rgb(243, 243, 243)
/* Link text (508) */
$color-text-link = rgb(1, 118, 211)
/* Color for texts that are related to warnings on a light background. */
$color-text-warning-alt = rgb(140, 75, 2)
/* Default icon color. */
$color-text-icon-default = rgb(116, 116, 116)
/* Our product brand blue. */
$color-text-brand = rgb(27, 150, 255)
/* Error text for inputs and error misc */
$color-text-error = rgb(234, 0, 30)
/* Customer text used in anchor subtitle */
$color-text-customer = rgb(254, 147, 57)
/* Text color found on any primary brand color */
$color-text-brand-primary = rgb(255, 255, 255)
/* Active link text */
$color-text-link-active = rgb(3, 45, 96)
/* Color of required field marker. */
$color-text-required = rgb(234, 0, 30)
/* Link color on dark background - disabled state */
$color-text-link-inverse-disabled = rgba(255, 255, 255, 0.15)
/* Inverse text color for dark backgrounds */
$color-text-inverse = rgb(255, 255, 255)
/* Input placeholder text. */
$color-text-placeholder = rgb(116, 116, 116)
/* Weak inverse text color for dark backgrounds */
$color-text-inverse-weak = rgb(174, 174, 174)
/* Link color on dark background - hover state */
$color-text-link-inverse-hover = rgba(255, 255, 255, 0.75)
/* Text color for success text on dark backgrounds. */
$color-text-success-inverse = rgb(69, 198, 90)
/* Text color for field labels. */
$color-text-label = rgb(116, 116, 116)
/* Tap target size for elements that rely on width and height dimensions */
$square-tappable = 2.75rem
/* Small tap target size for elements that rely on width and height dimensions */
$square-tappable-small = 2rem
/* X-small tap target size for elements that rely on width and height dimensions */
$square-tappable-x-small = 1.5rem
/* Xx-small tap target size for elements that rely on width and height dimensions */
$square-tappable-xx-small = 1.25rem
/* Tap target size for elements that rely on height or line-height */
$height-tappable = 2.75rem
/* Small tap target size for elements that rely on height or line-height */
$height-tappable-small = 2rem
/* Dropdown */
$z-index-dropdown = 7000
/* Docked element */
$z-index-docked = 4
/* Notifications under modals */
$z-index-reminder = 8500
/* Spinner */
$z-index-spinner = 9050
/* Default */
$z-index-default = 1
/* Deep dive */
$z-index-deepdive = -99999
/* Toasts */
$z-index-toast = 10000
/* Dialog */
$z-index-dialog = 6000
/* Popup */
$z-index-popup = 5000
/* Modal */
$z-index-modal = 9000
/* Stickied element */
$z-index-sticky = 100
/* Overlay */
$z-index-overlay = 8000
/* Brandable modal header */
$color-background-modal-brand = rgb(1, 68, 134)
/* Background color for notification list item. */
$color-background-notification = rgb(255, 255, 255)
/* Notifications badge background color. */
$color-background-notification-badge-active = rgb(3, 45, 96)
/* Notifications badge background color. */
$color-background-notification-badge-hover = rgb(1, 68, 134)
$color-contrast-primary = rgb(243, 243, 243)
$color-foreground-primary = rgb(255, 255, 255)
/* The color of the mask overlay that appears when you enter a modal state. */
$color-background-temp-modal-tint = rgba(126, 140, 153, 0.8)
/* Color of the indicator dot. */
$color-background-indicator-dot = rgb(3, 45, 96)
/* Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity. */
$color-background-alt-2 = rgb(243, 243, 243)
/* Hover color for utility bar item. */
$color-background-utility-bar-hover = rgb(243, 243, 243)
/* Brand hover fill color */
$fill-brand-hover = rgb(1, 68, 134)
/* Brand fill color */
$fill-brand = rgb(1, 118, 211)
/* Background color for default desktop chrome (ex. global header) */
$color-background-chrome-desktop = rgb(255, 255, 255)
/* Active button backgrounds on modal headers */
$color-background-modal-button-active = rgba(0, 0, 0, 0.16)
/* Selected checkboxes */
$color-background-input-checkbox-selected = rgb(27, 150, 255)
/* Default checkboxes */
$color-background-input-checkbox = rgb(255, 255, 255)
$color-background-primary = rgb(255, 255, 255)
/* The color of the mask overlay that appears when you enter a modal state. */
$color-background-temp-modal-tint-alt = rgba(255, 255, 255, 0.75)
$color-background-brand-primary-focus = rgb(1, 68, 134)
$color-background-brand-primary-active = rgb(3, 45, 96)
$color-background-brand-primary-hover = rgb(1, 68, 134)
/* Background color for default mobile chrome (ex. global header) */
$color-background-chrome-mobile = rgb(1, 118, 211)
/* Background color for search input fields. */
$color-background-input-search = rgba(0, 0, 0, 0.16)
$color-contrast-secondary = rgb(255, 255, 255)
/* Secondary top bar background color (child browser, file preview, etc.) */
$color-background-browser = rgb(116, 116, 116)
$color-background-brand-primary = rgb(1, 118, 211)
/* Used as the default background color for temporary dialog elements, such as the progress spinner background. */
$color-background-temp-modal = rgba(126, 140, 153, 0.8)
/* Used as gray background when more contrast is desired. */
$color-background-shade = rgb(243, 243, 243)
/* Standard modal header */
$color-background-modal = rgb(255, 255, 255)
/* Hovered active toggle background color. */
$color-background-toggle-active-hover = rgb(1, 68, 134)
/* Background color for payloads in the feed. */
$color-background-payload = rgb(243, 243, 243)
/* Button backgrounds on modal headers */
$color-background-modal-button = rgba(0, 0, 0, 0.07)
/* Brand active fill color */
$fill-brand-active = rgb(3, 45, 96)
/* Active color for utility bar item. */
$color-background-utility-bar-active = rgb(27, 150, 255)
/* Stage left org switcher dropdown arrow background color. */
$color-background-org-switcher-arrow = rgb(0, 22, 57)
/* Active toggle background color. */
$color-background-toggle-active = rgb(1, 68, 134)
/* Alternative color for UI elements related to errors. */
$color-background-error-alt = rgb(254, 143, 125)
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */
$page-color-background-primary = rgb(255, 255, 255)
/* Used as gray background in conjunction with Shade when more contrast is desired. */
$color-background-shade-dark = rgb(201, 201, 201)
/* Notifications badge background color. */
$color-background-notification-badge-focus = rgb(1, 68, 134)
/* Background for utility icons that live in the action bar on mobile. */
$color-background-actionbar-icon-utility = rgb(116, 116, 116)
$color-background-secondary = rgb(243, 243, 243)
/* The borders to create the checkmark */
$color-border-input-checkbox-selected-checkmark = rgb(255, 255, 255)
/* Disabled stroke color. */
$color-stroke-disabled = rgb(243, 243, 243)
/* Active stroke color for our product brand blue. */
$color-stroke-brand-active = rgb(3, 45, 96)
$color-border-primary = rgb(201, 201, 201)
$color-border-brand-primary-focus = rgb(1, 118, 211)
$color-border-brand-primary-hover = rgb(1, 118, 211)
/* Border color for brandable primary button */
$color-border-button-brand = rgb(1, 118, 211)
$color-border-brand-primary-active = rgb(3, 45, 96)
$color-border-brand-primary = rgb(27, 150, 255)
$color-border-button-focus-inverse = rgb(243, 243, 243)
/* Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders. */
$color-border-canvas-element-selection-hover = rgb(1, 68, 134)
/* Used to delineate the boundary of a selected canvas element. Specific to builders. */
$color-border-canvas-element-selection = rgb(26, 185, 255)
/* Hover stroke color for our product brand blue. */
$color-stroke-brand-hover = rgb(1, 118, 211)
/* Stroke color for our global header buttons. */
$color-stroke-header-button = rgb(174, 174, 174)
$color-border-link-focus-inverse = rgb(243, 243, 243)
/* Our product brand blue. */
$color-stroke-brand = rgb(1, 118, 211)
/* Used to delineate the boundary of a specific region. Specific to builders. */
$color-border-hint = rgb(3, 45, 96)
/* Deprecated */
$elevation-32 = 32
/* Deprecated */
$elevation-shadow-16 = 0 16px 16px 0 rgba(0, 0, 0, 0.16)
/* Deprecated */
$elevation-inverse-shadow-0 = none
/* Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds. */
$shadow-link-focus-inverse = 0 0 3px #f3f3f3
/* Deprecated: Use SHADOW_DOCKED */
$elevation-inverse-shadow-2 = 0 -2px 2px 0 rgba(0, 0, 0, 0.16)
/* Deprecated */
$elevation-inverse-shadow-4 = 0 -4px 4px 0 rgba(0, 0, 0, 0.16)
/* Deprecated */
$elevation-16 = 16
/* Deprecated */
$elevation-shadow-3-below = 0 3px 3px 0 rgba(0, 0, 0, 0.16) inset
$shadow-soft-primary-hover = none
/* Deprecated */
$elevation-inverse-shadow-8 = 0 -8px 8px 0 rgba(0, 0, 0, 0.16)
/* Soft dropshadow found on general UI elements such as containers */
$shadow-soft-primary = none
/* Deprecated */
$elevation-inverse-shadow-32 = 0 -32px 32px 0 rgba(0, 0, 0, 0.16)
/* Hard dropshadow found on general UI elements such as containers */
$shadow-hard-primary = none
/* Shadow above overflow menu close bar. */
$shadow-action-overflow-footer = 0 -2px 4px #f3f3f3
/* Deprecated */
$elevation-0 = 0
/* Deprecated */
$elevation-3-inset = -3
/* Deprecated */
$elevation-2 = 2
/* Shadow for overlays. */
$shadow-overlay = 0 -2px 4px rgba(0, 0, 0, 0.07)
/* Shadow for buttons. */
$shadow-button = 0 1px 1px 0 rgba(0, 0, 0, 0.05)
/* Deprecated */
$elevation-4 = 4
/* Deprecated */
$elevation-shadow-0 = none
/* Deprecated */
$elevation-inverse-shadow-16 = 0 -16px 16px 0 rgba(0, 0, 0, 0.16)
/* Deprecated */
$elevation-shadow-2 = 0 2px 2px 0 rgba(0, 0, 0, 0.16)
/* Deprecated */
$elevation-8 = 8
/* Deprecated */
$elevation-shadow-4 = 0 4px 4px 0 rgba(0, 0, 0, 0.16)
/* Inset shadow for editable grid */
$shadow-focus-inset = 0 0 2px 2px #1b96ff inset
/* Deprecated */
$elevation-inverse-shadow-3-below = 0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset
$shadow-soft-primary-active = none
/* Deprecated */
$elevation-shadow-8 = 0 8px 8px 0 rgba(0, 0, 0, 0.16)
/* Shadow on images. */
$shadow-image = 0 1px 1px rgba(0, 0, 0, 0.16)
/* Deprecated */
$elevation-shadow-32 = 0 32px 32px 0 rgba(0, 0, 0, 0.16)
/* Medium headings. */
$font-size-heading-medium = 1.125rem
$font-size-medium = 1rem
/* Small body text. */
$font-size-text-small = 0.8125rem
$font-size-medium-a = 1.125rem
$font-size-x-large = 1.5rem
$font-size-x-large-a = 1.57rem
/* Extra large headings. */
$font-size-heading-x-large = 1.75rem
$font-size-xx-large = 2rem
/* Extra extra small text. */
$font-size-text-xx-small = 0.625rem
$font-size-large = 1.25rem
/* Large headings. */
$font-size-heading-large = 1.5rem
/* Extra large body text. */
$font-size-text-x-large = 1.25rem
$font-size-x-small = 0.625rem
/* Extra Extra small headings. */
$font-size-heading-xx-small = 0.625rem
/* Extra small headings. */
$font-size-heading-x-small = 0.75rem
/* Large body text. */
$font-size-text-large = 1.125rem
$font-size-small = 0.875rem
/* Medium body text. */
$font-size-text-medium = 1rem
/* Extra small body text. */
$font-size-text-x-small = 0.75rem
/* Small headings. */
$font-size-heading-small = 0.875rem
/* Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings. */
$font-family-text = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
/* Use squareIconMediumBoundary */
$square-icon-medium = 2.375rem
/* Small tap target size */
$square-icon-small = 1rem
/* Very small icons to replace force font with temporary override. */
$square-icon-xx-small-content = .875rem
/* Large tap target size. */
$square-icon-large = 3.125rem
$component-spacing-margin = 0
$component-spacing-padding = 1rem
/* Hovered icon color for a button that has a parent element that has a hover state */
$color-text-icon-inverse-hint-hover = rgba(255, 255, 255, 0.75)
/* Color for text on a selected tab in a tab group. */
$color-text-tab-label-selected = rgb(1, 118, 211)
/* Icon color for a button that has a parent element that has a hover state on a dark background. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-icon-inverse-hint = rgba(255, 255, 255, 0.5)
/* Color for disabled text in a tab group. */
$color-text-tab-label-disabled = rgb(243, 243, 243)
/* Tertiary body text color */
$color-text-tertiary = rgb(116, 116, 116)
/* Active state on a standalone link on a dark background. */
$color-text-inverse-active = rgb(26, 185, 255)
/* Primary body text color */
$color-text-primary = rgb(3, 45, 96)
$color-text-link-primary-focus = rgb(1, 118, 211)
/* Color for text in focus state in a tab group. */
$color-text-tab-label-focus = rgb(1, 68, 134)
/* Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-icon-default-hint-borderless = rgb(243, 243, 243)
/* Text color for pills. */
$color-text-pill = rgb(1, 118, 211)
$color-text-link-primary-hover = rgb(1, 118, 211)
/* Color for text in active state in a tab group. */
$color-text-tab-label-active = rgb(3, 45, 96)
/* Color for text in hover state in a tab group. */
$color-text-tab-label-hover = rgb(1, 68, 134)
/* Color for text on toast messages. */
$color-text-toast = rgb(243, 243, 243)
/* Color for disabled toggles */
$color-text-toggle-disabled = rgb(201, 201, 201)
/* Top bar icon color */
$color-text-browser = rgb(255, 255, 255)
$color-text-link-primary-active = rgb(3, 45, 96)
$color-text-link-primary = rgb(1, 118, 211)
/* Top bar active icon color */
$color-text-browser-active = rgba(0, 0, 0, 0.4)
/* Color for non-interactive icons that represent a selected item in a list */
$color-text-icon-brand = rgb(1, 118, 211)
/* Hover state on a standalone link on a dark background. */
$color-text-inverse-hover = rgb(174, 174, 174)
/* Modal header title */
$color-text-modal = rgb(255, 255, 255)
/* Modal header button text color */
$color-text-modal-button = rgb(116, 116, 116)
/* Color for interactive utility icons */
$color-text-icon-utility = rgb(174, 174, 174)
/* Secondary body text color */
$color-text-secondary = rgb(116, 116, 116)
/* Text in stage left navigation. */
$color-text-stage-left = rgb(243, 243, 243)
/* Default value for text-transform */
$text-transform = none
/* Background color for a new notification list item. */
$color-background-notification-new = rgb(243, 243, 243)
/* Focused header button icon color */
$fill-header-button-focus = rgb(1, 118, 211)
/* Background color for reminder notification on hover */
$color-background-reminder-hover = rgb(255, 255, 255)
/* Notifications badge background color. */
$color-background-notification-badge = rgb(234, 0, 30)
/* Hovered header button icon color */
$fill-header-button-hover = rgb(1, 68, 134)
/* Disabled input */
$color-background-input-disabled = rgb(243, 243, 243)
/* Hovered toggle background color. */
$color-background-toggle-hover = rgb(147, 147, 147)
/* Background color for reminder notification */
$color-background-reminder = rgb(243, 243, 243)
/* Hovered background color for success buttons */
$color-background-button-success-hover = rgb(46, 132, 74)
/* Header button icon color */
$fill-header-button = rgb(174, 174, 174)
/* Toggle background color. */
$color-background-toggle = rgb(174, 174, 174)
/* Background color for success buttons */
$color-background-button-success = rgb(69, 198, 90)
/* Disabled checkboxes */
$color-background-input-checkbox-disabled = rgb(201, 201, 201)
/* Background color for pills. */
$color-background-pill = rgb(255, 255, 255)
/* Color of the spinner dot. */
$color-background-spinner-dot = rgb(174, 174, 174)
/* The color of the mask overlay that provides user feedback on interaction. */
$color-background-backdrop-tint = rgb(243, 243, 243)
/* Selected input field (when user has clicked or tabbed into field) */
$color-background-input-active = rgb(255, 255, 255)
/* The background color of an internal scrollbar. */
$color-background-scrollbar = rgb(243, 243, 243)
/* Disabled toggle background color. */
$color-background-toggle-disabled = rgb(174, 174, 174)
/* Background color for toast messaging. */
$color-background-toast = rgb(116, 116, 116)
/* Background color of comment posts in the feed. */
$color-background-post = rgb(243, 243, 243)
/* Default input field */
$color-background-input = rgb(255, 255, 255)
/* Background color for success toast messaging. */
$color-background-toast-success = rgb(46, 132, 74)
/* Color of mask overlay that sits on top of an image when text is present. */
$color-background-image-overlay = rgba(0, 0, 0, 0.4)
/* Active background color for success buttons */
$color-background-button-success-active = rgb(46, 132, 74)
/* Background color for error toast messaging. */
$color-background-toast-error = rgb(234, 0, 30)
/* The background color of an internal scrollbar track. */
$color-background-scrollbar-track = rgb(201, 201, 201)
/* Background color for input field that has encountered an error. */
$color-background-input-error = rgb(253, 221, 227)
/* Border color for disabled inverse button. */
$color-border-button-inverse-disabled = rgba(255, 255, 255, 0.15)
/* Hovered border color for a button with an icon that has a parent element that has a hover state */
$color-border-icon-inverse-hint-hover = rgba(255, 255, 255, 0.75)
/* Border color for a button with an icon that has a parent element that has a hover state */
$color-border-icon-inverse-hint = rgba(255, 255, 255, 0.5)
/* Border color for an active tab. */
$color-border-tab-active = rgb(255, 255, 255)
/* Border color on disabled form elements. */
$color-border-input-disabled = rgb(201, 201, 201)
/* Border color on notification reminders. */
$color-border-reminder = rgb(243, 243, 243)
/* Border color for brandable primary button - disabled state */
$color-border-button-brand-disabled = rgba(0, 0, 0, 0)
/* Border color for default secondary button */
$color-border-button-default = rgb(201, 201, 201)
/* Border color on active form elements. */
$color-border-input-active = rgb(27, 150, 255)
/* Border color on form elements. */
$color-border-input = rgb(201, 201, 201)
/* These borders create the faux checkmark when the checkbox toggle is in the checked state. */
$color-border-toggle-checked = rgb(255, 255, 255)
/* Border color for a selected tab in a tab group. */
$color-border-tab-selected = rgb(1, 118, 211)
$border-stroke-width-thin = 1px
$border-stroke-width-thick = 2px
/* Shadow for notifications that should be elevated above other components but under modals. */
$shadow-reminder = 0 2px 3px 0 rgba(0, 0, 0, 0.20)
/* Custom glow for focus states on UI elements with explicit containers. */
$shadow-button-focus = 0 0 3px #0176d3
/* Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds. */
$shadow-button-focus-inverse = 0 0 3px #f3f3f3
/* Shadow to make inline edit card pop out. */
$shadow-inline-edit = 0 2px 4px 4px rgba(0, 0, 0, 0.16)
/* Shadow on elements that are docked to the bottom of the viewport. */
$shadow-docked = 0 -2px 2px 0 rgba(0, 0, 0, 0.16)
/* Shadow for header. */
$shadow-header = 0 2px 4px rgba(0, 0, 0, 0.07)
/* 4.8 seconds */
$duration-toast-short = 4.8s
/* 9.6 seconds */
$duration-toast-medium = 9.6s
$illustration-empty-state-assistant = "/assets/images/illustrations/empty-state-assistant.svg"
$illustration-empty-state-events = "/assets/images/illustrations/empty-state-events.svg"
$illustration-empty-state-tasks = "/assets/images/illustrations/empty-state-tasks.svg"
$banner-user-default-image = ""
$banner-group-default-image = ""
$user-default-avatar = "/profile_avatar_200.png"
$user-default-avatar-medium = "/profile_avatar_160.png"
$user-default-avatar-small = "/profile_avatar_96.png"
$group-default-avatar = "/group_avatar_200.png"
$group-default-avatar-medium = "/group_avatar_160.png"
$group-default-avatar-small = "/group_avatar_96.png"
/* Line heights for tabs */
$line-height-tab = 2.5rem
$border-radius-pill = 15rem
/* Minimum height of a pill. */
$height-pill = 1.625rem
/* Brand header. Phone 44px; Tablet 50px */
$height-header = 2.75rem
/* Action footer menu. Phone 44px; Tablet 50px */
$height-footer = 3.75rem
/* Text input height */
$height-input = 1.875rem
/* Stage left for desktop when closed (showing icons only). */
$width-stage-left-collapsed = 4rem
/* Stage left for desktop when open. */
$width-stage-left-expanded = 15rem
/* Maximum width for action overflow menu so that it's not full-screen for tablet. */
$max-width-action-overflow-menu = 512px
/* Default amount of line breaks before text is truncated */
$line-clamp = 3
/* Icon color on dark background */
$color-text-icon-inverse = rgb(255, 255, 255)
/* Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-button-inverse-disabled = rgba(255, 255, 255, 0.5)
/* Input icon */
$color-text-input-icon = rgb(174, 174, 174)
/* Icon color on dark background - active state */
$color-text-icon-inverse-active = rgb(255, 2