@salesforce-ux/design-system

{ "properties": [ { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "deprecated": true, "value": "'Salesforce Sans', Arial, sans-serif", "comment": "Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.", "name": "fontFamily" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(242, 242, 243)", "comment": "Used as the background color for the active state on rows or items on list-like components.", "access": "global", "name": "colorBackgroundRowActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Light variant of COLOR_BACKGROUND.", "release": "2.8.0", "name": "colorBackgroundLight" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(249, 249, 250)", "comment": "Used as the background color for the hover state on rows or items on list-like components.", "access": "global", "name": "colorBackgroundRowHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(194, 57, 52)", "comment": "Dark color for UI elements related to errors. Accessible with white text.", "name": "colorBackgroundErrorDark" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(107, 109, 112)", "comment": "Background color for UI elements related to providing neutral information (not error, success, or warning).", "name": "colorBackgroundInfo" }, { "access": "global", "release": "1.0.0", "name": "colorBackgroundAltInverse", "value": "rgb(22, 50, 92)", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Alternative background color for dark portions of the app." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(217, 255, 223)", "comment": "Used as the background color for the new state on rows or items on list-like components.", "access": "global", "name": "colorBackgroundRowNew" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(4, 132, 75)", "comment": "Dark color for UI elements that have to do with success. Accessible with white text.", "name": "colorBackgroundSuccessDark" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(242, 242, 243)", "comment": "Used as background for loading stencils on white background.", "name": "colorBackgroundStencil" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 183, 93)", "comment": "Color for UI elements that have to do with warning.", "name": "colorBackgroundWarning" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 240, 63)", "comment": "Background color for highlighting text in search results.", "name": "colorBackgroundHighlightSearch" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(166, 26, 20)", "comment": "Hover color for UI elements related to destructive actions.", "name": "colorBackgroundDestructiveHover" }, { "access": "global", "release": "1.0.0", "name": "colorBackground", "value": "rgb(249, 249, 250)", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default background color for the whole app." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(0, 112, 210)", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text.", "access": "global", "name": "colorBrandDark" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.75)", "comment": "The color of the mask overlay that appears when you enter a modal state.", "name": "colorBackgroundBackdrop" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(233, 234, 236)", "comment": "Light variant of COLOR_BACKGROUND.", "release": "2.8.0", "name": "colorBackgroundDark" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(21, 137, 238)", "comment": "Our product brand blue.", "access": "global", "name": "colorBrand" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(194, 57, 52)", "comment": "Color for UI elements related to destructive actions.", "name": "colorBackgroundDestructive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(75, 202, 129)", "comment": "Color for UI elements that have to do with success.", "name": "colorBackgroundSuccess" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 158, 44)", "comment": "Dark Color for UI elements that have to do with warning.", "name": "colorBackgroundWarningDark" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(62, 64, 65)", "comment": "Color for UI elements related to the offline state.", "name": "colorBackgroundOffline" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(233, 234, 236)", "comment": "Used as an alternate background for loading stencils on gray backgrounds.", "name": "colorBackgroundStencilAlt" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(22, 50, 92)", "comment": "Light variant of COLOR_BACKGROUND_INVERSE.", "release": "2.8.0", "name": "colorBackgroundInverseLight" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 154, 60)", "comment": "Background color for UI elements related to the concept of an external user or customer.", "name": "colorBackgroundCustomer" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(212, 80, 76)", "comment": "Color for UI elements related to errors.", "name": "colorBackgroundError" }, { "access": "global", "release": "1.0.0", "name": "colorBackgroundAlt", "value": "rgb(255, 255, 255)", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Second default background color for the app." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(0, 74, 41)", "comment": "Darker color for UI elements that have to do with success. Accessible with white text.", "name": "colorBackgroundSuccessDarker" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(233, 234, 236)", "comment": "Used as the background color for selected rows or items on list-like components.", "access": "global", "name": "colorBackgroundRowSelected" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(0, 95, 178)", "comment": "Our product brand blue, darkened even further.", "name": "colorBrandDarker" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(216, 237, 255)", "comment": "Background color for text selected with a mouse.", "name": "colorBackgroundSelection" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(135, 5, 0)", "comment": "Active color for UI elements related to destructive actions.", "name": "colorBackgroundDestructiveActive" }, { "access": "global", "release": "1.0.0", "name": "colorBackgroundInverse", "value": "rgb(6, 28, 63)", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default background color for dark portions of the app (like Stage Left or tooltips)." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(250, 255, 189)", "comment": "Background color for highlighting UI elements.", "access": "global", "name": "colorBackgroundHighlight" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(234, 130, 136)", "comment": "Dark alternative border color for UI elements related to errors.", "name": "colorBorderErrorDark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(0, 112, 210)", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text.", "name": "colorBorderBrandDark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(107, 109, 112)", "comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).", "name": "colorBorderInfo" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(255, 183, 93)", "comment": "Border color for UI elements that have to do with warnings.", "access": "global", "name": "colorBorderWarning" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(166, 26, 20)", "comment": "Hover border color for UI elements that have to do with destructive actions.", "name": "colorBorderDestructiveHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "background*" ], "value": "rgb(217, 219, 221)", "comment": "Default border color for UI elements.", "access": "global", "name": "colorBorder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(4, 132, 75)", "comment": "Dark alternative border color for UI elements that have to do with success.", "name": "colorBorderSuccessDark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(194, 57, 52)", "comment": "Border color for UI elements that have to do with destructive actions.", "name": "colorBorderDestructive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(196, 198, 202)", "comment": "Darkest separator color - used as an alternate separator color when more differentiation is desired.", "name": "colorBorderSeparatorAlt2" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(62, 64, 65)", "comment": "Border color for UI elements related to the offline state.", "name": "colorBorderOffline" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(75, 202, 129)", "comment": "Border color for UI elements that have to do with success.", "name": "colorBorderSuccess" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(249, 249, 250)", "comment": "Lightest separator color - used as default separator on white backgrounds.", "access": "global", "name": "colorBorderSeparator" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(21, 137, 238)", "comment": "Our product brand blue.", "access": "global", "name": "colorBorderBrand" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(249, 249, 250)", "specificity": "builders", "comment": "Used to delineate the boundary of a component that is being clicked. Specific to builders.", "name": "colorBorderSelectionActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(194, 57, 52)", "comment": "Border color for UI elements that have to do with errors.", "access": "global", "name": "colorBorderError" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(21, 137, 238)", "specificity": "builders", "comment": "Used to delineate the boundary of a component that is being hovered over. Specific to builders.", "name": "colorBorderSelectionHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(21, 137, 238)", "comment": "Used as the border color for the hover state on selected rows or items on list-like components.", "access": "global", "name": "colorBorderRowSelectedHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(255, 154, 60)", "comment": "Border color for UI elements related to the concept of an external user or customer.", "name": "colorBorderCustomer" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(0, 112, 210)", "specificity": "builders", "comment": "Used to delineate the boundary of a selected component. Specific to builders.", "name": "colorBorderSelection" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(0, 112, 210)", "comment": "Used as the border color for selected rows or items on list-like components.", "access": "global", "name": "colorBorderRowSelected" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(217, 219, 221)", "comment": "Medium separator color - used as default separator on light gray backgrounds.", "access": "global", "name": "colorBorderSeparatorAlt" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(6, 28, 63)", "comment": "Border color to match UI elements using color-background-inverse.", "name": "colorBorderInverse" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(135, 5, 0)", "comment": "Active border color for UI elements that have to do with destructive actions.", "name": "colorBorderDestructiveActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(234, 130, 136)", "comment": "Alternative border color for UI elements related to errors.", "name": "colorBorderErrorAlt" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(42, 66, 108)", "comment": "Used as a separator on dark backgrounds, such as stage left navigation.", "access": "global", "name": "colorBorderSeparatorInverse" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "2", "access": "global", "name": "borderRadiusSmall" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "4", "comment": "Icons in lists, record home icon, unbound input elements", "access": "global", "name": "borderRadiusMedium" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "8", "access": "global", "name": "borderRadiusLarge" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "240", "access": "global", "name": "borderRadiusPill" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0.5", "comment": "Circle for global use, action icon bgd shape", "access": "global", "name": "borderRadiusCircle" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 4px 0 rgba(0, 0, 0, 0.40)", "comment": "Shadow for drag-n-drop.", "access": "global", "name": "shadowDrag" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 3px 0 rgba(0, 0, 0, 0.16)", "comment": "Shadow for drop down.", "access": "global", "name": "shadowDropDown" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 4px rgba(0, 0, 0, 0.07)", "comment": "Shadow for header.", "access": "global", "name": "shadowHeader" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", "name": "fontFamilyText" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", "name": "fontFamilyHeading" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "Consolas, Menlo, Monaco, Courier, monospace", "name": "fontFamilyMonospace" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "10", "comment": "Constant typography token for font size 1", "name": "fontSize1" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "comment": "Constant typography token for font size 2", "name": "fontSize2" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "13", "comment": "Constant typography token for font size 3", "name": "fontSize3" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "32", "comment": "Variable typography token for font size 10", "name": "varFontSize10" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "14", "comment": "Constant typography token for font size 4", "name": "fontSize4" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "42", "comment": "Variable typography token for font size 11", "name": "varFontSize11" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "16", "comment": "Constant typography token for font size 5", "name": "fontSize5" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "comment": "Constant typography token for font size 6", "name": "fontSize6" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "20", "comment": "Constant typography token for font size 7", "name": "fontSize7" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "24", "comment": "Constant typography token for font size 8", "name": "fontSize8" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "10", "comment": "Variable typography token for font size 1", "name": "varFontSize1" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "28", "comment": "Constant typography token for font size 9", "name": "fontSize9" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "comment": "Variable typography token for font size 2", "name": "varFontSize2" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "13", "comment": "Variable typography token for font size 3", "name": "varFontSize3" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "32", "comment": "Constant typography token for font size 10", "name": "fontSize10" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "14", "comment": "Variable typography token for font size 4", "name": "varFontSize4" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "42", "comment": "Constant typography token for font size 11", "name": "fontSize11" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "16", "comment": "Variable typography token for font size 5", "name": "varFontSize5" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "comment": "Variable typography token for font size 6", "name": "varFontSize6" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "20", "comment": "Variable typography token for font size 7", "name": "varFontSize7" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "24", "comment": "Variable typography token for font size 8", "name": "varFontSize8" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "28", "comment": "Variable typography token for font size 9", "name": "varFontSize9" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "300", "comment": "Use for large headings only.", "access": "global", "name": "fontWeightLight" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "comment": "Most all body copy.", "access": "global", "name": "fontWeightRegular" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "700", "comment": "Used sparingly for emphasized text within regular body copy.", "access": "global", "name": "fontWeightBold" }, { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-assistant.svg", "name": "illustrationEmptyStateAssistant" }, { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-events.svg", "name": "illustrationEmptyStateEvents" }, { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-tasks.svg", "name": "illustrationEmptyStateTasks" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.25", "comment": "Unitless line-heights for reusability", "access": "global", "name": "lineHeightHeading" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.5", "comment": "Unitless line-heights for reusability", "access": "global", "name": "lineHeightText" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1", "comment": "Remove extra leading. Unitless line-heights for reusability", "access": "global", "name": "lineHeightReset" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "40", "comment": "Line heights for tabs", "access": "global", "name": "lineHeightTab" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.5", "comment": "Variable unitless line-heights for reusability", "name": "varLineHeightText" }, { "type": "opacity", "category": "opacity", "cssProperties": [ "opacity" ], "value": "0.5", "comment": "50% transparency of an element", "name": "opacity5" }, { "type": "opacity", "category": "opacity", "cssProperties": [ "opacity" ], "value": "0.8", "comment": "80% transparency of an element", "name": "opacity8" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastWeakDisabled", "value": "rgba(166, 166, 166, 0.25)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_HEADER_CONTRAST_WEAK" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(62, 62, 60)", "comment": "Gray Color 11", "release": "2.5.0", "name": "colorGray11" }, { "themeable": true, "release": "2.6.0", "name": "brandPrimaryTransparent10", "value": "rgba(21, 137, 238, 0.1)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY at 10%" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(43, 40, 38)", "comment": "Gray Color 12", "release": "2.5.0", "name": "colorGray12" }, { "themeable": true, "release": "2.6.0", "name": "brandBackgroundDarkTransparent", "value": "rgba(221, 219, 218, 0)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(8, 7, 7)", "comment": "Gray Color 13", "release": "2.5.0", "name": "colorGray13" }, { "themeable": true, "release": "2.6.0", "name": "brandHeader", "value": "rgb(255, 255, 255)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Background color a branded app header" }, { "themeable": true, "release": "2.6.0", "name": "brandLightActive", "value": "rgb(227, 229, 237)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_LIGHT" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastWarm", "value": "rgb(191, 2, 1)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER_CONTRAST that provides a warm color" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderIconDisabled", "value": "rgba(145, 145, 145, 0.25)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_HEADER_ICON" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastActive", "value": "rgb(80, 80, 80)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST" }, { "themeable": true, "release": "2.6.0", "name": "brandBackgroundPrimary", "value": "rgb(250, 250, 249)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary page background color" }, { "themeable": true, "release": "2.6.0", "name": "brandPrimary", "value": "rgb(21, 137, 238)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary brand color" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastWeakActive", "value": "rgb(129, 129, 129)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_WEAK" }, { "themeable": true, "release": "2.6.0", "name": "brandContrastActive", "value": "rgb(13, 14, 18)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_CONTRAST" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastCool", "value": "rgb(0, 85, 131)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER_CONTRAST that provides a cool color" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastInverse", "value": "rgb(255, 255, 255)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER that is accessible with BRAND_HEADER" }, { "themeable": true, "release": "2.6.0", "name": "brandDark", "value": "rgb(24, 35, 55)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND that is accessible with light colors" }, { "themeable": true, "release": "2.6.0", "name": "brandAccessible", "value": "rgb(0, 112, 210)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND that is accessible with white" }, { "themeable": true, "release": "2.6.0", "name": "brandBackgroundDark", "value": "rgb(232, 232, 232)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color" }, { "themeable": true, "release": "2.6.0", "name": "brandTextLinkActive", "value": "rgb(0, 95, 178)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_TEXT_LINK" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(255, 255, 255)", "comment": "Gray Color 1", "release": "2.5.0", "name": "colorGray1" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(250, 250, 249)", "comment": "Gray Color 2", "release": "2.5.0", "name": "colorGray2" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderIconActive", "value": "rgb(129, 129, 129)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_ICON" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(243, 242, 242)", "comment": "Gray Color 3", "release": "2.5.0", "name": "colorGray3" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderIcon", "value": "rgb(145, 145, 145)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Icons of BRAND_HEADER that is accessible with BRAND_HEADER" }, { "themeable": true, "release": "2.6.0", "name": "brandDisabled", "value": "rgb(201, 199, 197)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_A11Y" }, { "themeable": true, "release": "2.6.0", "name": "brandTextLink", "value": "rgb(0, 109, 204)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary text link brand color" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(236, 235, 234)", "comment": "Gray Color 4", "release": "2.5.0", "name": "colorGray4" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(221, 219, 218)", "comment": "Gray Color 5", "release": "2.5.0", "name": "colorGray5" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(201, 199, 197)", "comment": "Gray Color 6", "release": "2.5.0", "name": "colorGray6" }, { "themeable": true, "release": "2.6.0", "name": "brandAccessibleActive", "value": "rgb(0, 95, 178)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_A11Y" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(176, 173, 171)", "comment": "Gray Color 7", "release": "2.5.0", "name": "colorGray7" }, { "themeable": true, "release": "2.6.0", "name": "brandDarkActive", "value": "rgb(37, 48, 69)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_DARK" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(150, 148, 146)", "comment": "Gray Color 8", "release": "2.5.0", "name": "colorGray8" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastInverseActive", "value": "rgb(238, 238, 238)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastCoolActive", "value": "rgb(0, 85, 131)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_COOL" }, { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "rgb(112, 110, 107)", "comment": "Gray Color 9", "release": "2.5.0", "name": "colorGray9" }, { "themeable": true, "release": "2.6.0", "name": "brandContrast", "value": "rgb(26, 27, 30)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND that is accessible with BRAND" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastWeak", "value": "rgb(145, 145, 145)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Weak contrast ratio, useful for iconography" }, { "themeable": true, "release": "2.6.0", "name": "brandPrimaryActive", "value": "rgb(0, 122, 221)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_PRIMARY" }, { "themeable": true, "release": "2.6.0", "name": "brandBackgroundPrimaryTransparent", "value": "rgba(250, 250, 249, 0)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrast", "value": "rgb(94, 94, 94)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER that is accessible with BRAND_HEADER" }, { "themeable": true, "release": "2.6.0", "name": "brandPrimaryTransparent", "value": "rgba(21, 137, 238, 0.1)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY" }, { "themeable": true, "release": "2.6.0", "name": "brandHeaderContrastWarmActive", "value": "rgb(172, 0, 0)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_WARM" }, { "themeable": true, "release": "2.6.0", "name": "brandPrimaryTransparent40", "value": "rgba(21, 137, 238, 0.4)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY at 40%" }, { "themeable": true, "release": "2.6.0", "name": "brandLight", "value": "rgb(244, 246, 254)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category"