@salesforce-ux/design-system

{ "auraImports": [ "force:mqCommons", "force:fontCommons" ], "props": { "COLOR_BACKGROUND_ROW_ACTIVE": { "originalValue": "{!PALETTE_COOL_GRAY_3}", "access": "global", "primitive": true, "name": "COLOR_BACKGROUND_ROW_ACTIVE", "value": "#F2F2F3", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as the background color for the active state on rows or items on list-like components." }, "COLOR_BACKGROUND_LIGHT": { "originalValue": "{!PALETTE_COOL_GRAY_1}", "release": "2.8.0", "primitive": true, "name": "COLOR_BACKGROUND_LIGHT", "value": "#FFFFFF", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Light variant of COLOR_BACKGROUND." }, "COLOR_BACKGROUND_ROW_HOVER": { "originalValue": "{!PALETTE_COOL_GRAY_2}", "access": "global", "primitive": true, "name": "COLOR_BACKGROUND_ROW_HOVER", "value": "#F9F9FA", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as the background color for the hover state on rows or items on list-like components." }, "COLOR_BACKGROUND_ERROR_DARK": { "originalValue": "{!FLUSH_MAHOGANY}", "primitive": true, "name": "COLOR_BACKGROUND_ERROR_DARK", "value": "#C23934", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Dark color for UI elements related to errors. Accessible with white text." }, "COLOR_BACKGROUND_INFO": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "primitive": true, "value": "#6B6D70", "comment": "Background color for UI elements related to providing neutral information (not error, success, or warning).", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_BACKGROUND_INFO" }, "COLOR_BACKGROUND_ALT_INVERSE": { "originalValue": "{!BISCAY}", "access": "global", "release": "1.0.0", "primitive": true, "name": "COLOR_BACKGROUND_ALT_INVERSE", "value": "#16325C", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Alternative background color for dark portions of the app." }, "COLOR_BACKGROUND_ROW_NEW": { "originalValue": "{!SNOWY_MINT}", "access": "global", "primitive": true, "name": "COLOR_BACKGROUND_ROW_NEW", "value": "#D9FFDF", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Used as the background color for the new state on rows or items on list-like components." }, "COLOR_BACKGROUND_SUCCESS_DARK": { "originalValue": "{!SALEM}", "primitive": true, "name": "COLOR_BACKGROUND_SUCCESS_DARK", "value": "#04844B", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Dark color for UI elements that have to do with success. Accessible with white text." }, "COLOR_BACKGROUND_STENCIL": { "originalValue": "{!PALETTE_COOL_GRAY_3}", "access": "global", "primitive": true, "name": "COLOR_BACKGROUND_STENCIL", "value": "#F2F2F3", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as background for loading stencils on white background." }, "COLOR_BACKGROUND_WARNING": { "originalValue": "{!KOROMIKO}", "primitive": true, "name": "COLOR_BACKGROUND_WARNING", "value": "#FFB75D", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Color for UI elements that have to do with warning." }, "COLOR_BACKGROUND_HIGHLIGHT_SEARCH": { "originalValue": "{!GORSE}", "primitive": true, "name": "COLOR_BACKGROUND_HIGHLIGHT_SEARCH", "value": "#fff03f", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for highlighting text in search results." }, "COLOR_BACKGROUND_DESTRUCTIVE_HOVER": { "originalValue": "{!TABASCO}", "primitive": true, "name": "COLOR_BACKGROUND_DESTRUCTIVE_HOVER", "value": "#A61A14", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Hover color for UI elements related to destructive actions." }, "COLOR_BACKGROUND": { "originalValue": "{!PALETTE_COOL_GRAY_2}", "access": "global", "primitive": true, "name": "COLOR_BACKGROUND", "value": "#F9F9FA", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Default background color for the whole app." }, "COLOR_BRAND_DARK": { "originalValue": "{!BRAND_ACCESSIBLE}", "access": "global", "primitive": true, "name": "COLOR_BRAND_DARK", "value": "#0070d2", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text." }, "COLOR_BACKGROUND_BACKDROP": { "originalValue": "{!WHITE_TRANSPARENT_75}", "primitive": true, "name": "COLOR_BACKGROUND_BACKDROP", "value": "rgba(255, 255, 255, 0.75)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "The color of the mask overlay that appears when you enter a modal state." }, "COLOR_BACKGROUND_DARK": { "originalValue": "{!PALETTE_COOL_GRAY_4}", "release": "2.8.0", "primitive": true, "name": "COLOR_BACKGROUND_DARK", "value": "#E9EAEC", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Dark variant of COLOR_BACKGROUND." }, "COLOR_BRAND": { "originalValue": "{!BRAND_PRIMARY}", "access": "global", "primitive": true, "name": "COLOR_BRAND", "value": "#1589ee", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Our product brand blue." }, "COLOR_BACKGROUND_DESTRUCTIVE": { "originalValue": "{!FLUSH_MAHOGANY}", "primitive": true, "name": "COLOR_BACKGROUND_DESTRUCTIVE", "value": "#C23934", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Color for UI elements related to destructive actions." }, "COLOR_BACKGROUND_SUCCESS": { "originalValue": "{!EMERALD}", "primitive": true, "name": "COLOR_BACKGROUND_SUCCESS", "value": "#4BCA81", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Color for UI elements that have to do with success." }, "COLOR_BACKGROUND_WARNING_DARK": { "originalValue": "{!SUNSHADE}", "primitive": true, "name": "COLOR_BACKGROUND_WARNING_DARK", "value": "#FF9E2C", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Dark Color for UI elements that have to do with warning." }, "COLOR_BACKGROUND_OFFLINE": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "primitive": true, "value": "#3E4041", "comment": "Color for UI elements related to the offline state.", "originalValue": "{!PALETTE_COOL_GRAY_11}", "name": "COLOR_BACKGROUND_OFFLINE" }, "COLOR_BACKGROUND_STENCIL_ALT": { "originalValue": "{!PALETTE_COOL_GRAY_4}", "access": "global", "primitive": true, "name": "COLOR_BACKGROUND_STENCIL_ALT", "value": "#E9EAEC", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as an alternate background for loading stencils on gray backgrounds." }, "COLOR_BACKGROUND_INVERSE_LIGHT": { "originalValue": "{!BISCAY}", "release": "2.8.0", "primitive": true, "name": "COLOR_BACKGROUND_INVERSE_LIGHT", "value": "#16325C", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Light variant of COLOR_BACKGROUND_INVERSE." }, "COLOR_BACKGROUND_CUSTOMER": { "originalValue": "{!TANGERINE}", "primitive": true, "name": "COLOR_BACKGROUND_CUSTOMER", "value": "#FF9A3C", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for UI elements related to the concept of an external user or customer." }, "COLOR_BACKGROUND_ERROR": { "originalValue": "{!VALENCIA}", "primitive": true, "name": "COLOR_BACKGROUND_ERROR", "value": "#D4504C", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Color for UI elements related to errors." }, "COLOR_BACKGROUND_ALT": { "originalValue": "{!WHITE}", "access": "global", "release": "1.0.0", "primitive": true, "name": "COLOR_BACKGROUND_ALT", "value": "#FFFFFF", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Second default background color for the app." }, "COLOR_BACKGROUND_SUCCESS_DARKER": { "originalValue": "{!KAITOKE_GREEN}", "primitive": true, "name": "COLOR_BACKGROUND_SUCCESS_DARKER", "value": "#004a29", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Darker color for UI elements that have to do with success. Accessible with white text." }, "COLOR_BACKGROUND_ROW_SELECTED": { "originalValue": "{!PALETTE_COOL_GRAY_4}", "access": "global", "primitive": true, "name": "COLOR_BACKGROUND_ROW_SELECTED", "value": "#E9EAEC", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as the background color for selected rows or items on list-like components." }, "COLOR_BRAND_DARKER": { "originalValue": "{!ENDEAVOUR}", "primitive": true, "name": "COLOR_BRAND_DARKER", "value": "#005FB2", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Our product brand blue, darkened even further." }, "COLOR_BACKGROUND_SELECTION": { "originalValue": "{!PATTEN_BLUE}", "primitive": true, "name": "COLOR_BACKGROUND_SELECTION", "value": "#D8EDFF", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for text selected with a mouse." }, "COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE": { "originalValue": "{!MAROON}", "primitive": true, "name": "COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE", "value": "#870500", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active color for UI elements related to destructive actions." }, "COLOR_BACKGROUND_INVERSE": { "originalValue": "{!DEEP_COVE}", "access": "global", "release": "1.0.0", "primitive": true, "name": "COLOR_BACKGROUND_INVERSE", "value": "#061C3F", "scope": "global", "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)." }, "COLOR_BACKGROUND_HIGHLIGHT": { "originalValue": "{!LEMON_CHIFFON}", "access": "global", "primitive": true, "name": "COLOR_BACKGROUND_HIGHLIGHT", "value": "#FAFFBD", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for highlighting UI elements." }, "COLOR_BORDER_ERROR_DARK": { "originalValue": "{!DEEP_BLUSH}", "primitive": true, "name": "COLOR_BORDER_ERROR_DARK", "value": "#EA8288", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Dark alternative border color for UI elements related to errors." }, "COLOR_BORDER_BRAND_DARK": { "originalValue": "{!BRAND_ACCESSIBLE}", "primitive": true, "name": "COLOR_BORDER_BRAND_DARK", "value": "#0070d2", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text." }, "COLOR_BORDER_INFO": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "primitive": true, "value": "#6B6D70", "comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_BORDER_INFO" }, "COLOR_BORDER_WARNING": { "originalValue": "{!KOROMIKO}", "access": "global", "primitive": true, "name": "COLOR_BORDER_WARNING", "value": "#FFB75D", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements that have to do with warnings." }, "COLOR_BORDER_DESTRUCTIVE_HOVER": { "originalValue": "{!TABASCO}", "primitive": true, "name": "COLOR_BORDER_DESTRUCTIVE_HOVER", "value": "#A61A14", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Hover border color for UI elements that have to do with destructive actions." }, "COLOR_BORDER": { "originalValue": "{!PALETTE_COOL_GRAY_5}", "access": "global", "primitive": true, "name": "COLOR_BORDER", "value": "#D9DBDD", "cssProperties": [ "border*", "box-shadow", "background*" ], "type": "color", "category": "border-color", "comment": "Default border color for UI elements." }, "COLOR_BORDER_SUCCESS_DARK": { "originalValue": "{!SALEM}", "primitive": true, "name": "COLOR_BORDER_SUCCESS_DARK", "value": "#04844B", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Dark alternative border color for UI elements that have to do with success." }, "COLOR_BORDER_DESTRUCTIVE": { "originalValue": "{!FLUSH_MAHOGANY}", "primitive": true, "name": "COLOR_BORDER_DESTRUCTIVE", "value": "#C23934", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements that have to do with destructive actions." }, "COLOR_BORDER_SEPARATOR_ALT_2": { "originalValue": "{!PALETTE_COOL_GRAY_6}", "access": "global", "primitive": true, "name": "COLOR_BORDER_SEPARATOR_ALT_2", "value": "#C4C6CA", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Darkest separator color - used as an alternate separator color when more differentiation is desired." }, "COLOR_BORDER_OFFLINE": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "primitive": true, "value": "#3E4041", "comment": "Border color for UI elements related to the offline state.", "originalValue": "{!PALETTE_COOL_GRAY_11}", "name": "COLOR_BORDER_OFFLINE" }, "COLOR_BORDER_SUCCESS": { "originalValue": "{!EMERALD}", "access": "global", "primitive": true, "name": "COLOR_BORDER_SUCCESS", "value": "#4BCA81", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements that have to do with success." }, "COLOR_BORDER_SEPARATOR": { "originalValue": "{!PALETTE_COOL_GRAY_2}", "access": "global", "primitive": true, "name": "COLOR_BORDER_SEPARATOR", "value": "#F9F9FA", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Lightest separator color - used as default separator on white backgrounds." }, "COLOR_BORDER_BRAND": { "originalValue": "{!BRAND_PRIMARY}", "access": "global", "primitive": true, "name": "COLOR_BORDER_BRAND", "value": "#1589ee", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Our product brand blue." }, "COLOR_BORDER_SELECTION_ACTIVE": { "originalValue": "{!PALETTE_COOL_GRAY_2}", "primitive": true, "name": "COLOR_BORDER_SELECTION_ACTIVE", "value": "#F9F9FA", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a component that is being clicked. Specific to builders." }, "COLOR_BORDER_ERROR": { "originalValue": "{!FLUSH_MAHOGANY}", "access": "global", "primitive": true, "name": "COLOR_BORDER_ERROR", "value": "#C23934", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements that have to do with errors." }, "COLOR_BORDER_SELECTION_HOVER": { "originalValue": "{!BRAND_PRIMARY}", "primitive": true, "name": "COLOR_BORDER_SELECTION_HOVER", "value": "#1589ee", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a component that is being hovered over. Specific to builders." }, "COLOR_BORDER_ROW_SELECTED_HOVER": { "originalValue": "{!BRAND_PRIMARY}", "access": "global", "primitive": true, "name": "COLOR_BORDER_ROW_SELECTED_HOVER", "value": "#1589ee", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Used as the border color for the hover state on selected rows or items on list-like components." }, "COLOR_BORDER_CUSTOMER": { "originalValue": "{!TANGERINE}", "primitive": true, "name": "COLOR_BORDER_CUSTOMER", "value": "#FF9A3C", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements related to the concept of an external user or customer." }, "COLOR_BORDER_SELECTION": { "originalValue": "{!BRAND_ACCESSIBLE}", "primitive": true, "name": "COLOR_BORDER_SELECTION", "value": "#0070d2", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a selected component. Specific to builders." }, "COLOR_BORDER_ROW_SELECTED": { "originalValue": "{!BRAND_ACCESSIBLE}", "access": "global", "primitive": true, "name": "COLOR_BORDER_ROW_SELECTED", "value": "#0070d2", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Used as the border color for selected rows or items on list-like components." }, "COLOR_BORDER_SEPARATOR_ALT": { "originalValue": "{!PALETTE_COOL_GRAY_5}", "access": "global", "primitive": true, "name": "COLOR_BORDER_SEPARATOR_ALT", "value": "#D9DBDD", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Medium separator color - used as default separator on light gray backgrounds." }, "COLOR_BORDER_INVERSE": { "originalValue": "{!DEEP_COVE}", "primitive": true, "name": "COLOR_BORDER_INVERSE", "value": "#061C3F", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color to match UI elements using color-background-inverse." }, "COLOR_BORDER_DESTRUCTIVE_ACTIVE": { "originalValue": "{!MAROON}", "primitive": true, "name": "COLOR_BORDER_DESTRUCTIVE_ACTIVE", "value": "#870500", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Active border color for UI elements that have to do with destructive actions." }, "COLOR_BORDER_ERROR_ALT": { "originalValue": "{!DEEP_BLUSH}", "primitive": true, "name": "COLOR_BORDER_ERROR_ALT", "value": "#EA8288", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Alternative border color for UI elements related to errors." }, "COLOR_BORDER_SEPARATOR_INVERSE": { "originalValue": "{!SAN_JUAN}", "access": "global", "primitive": true, "name": "COLOR_BORDER_SEPARATOR_INVERSE", "value": "#2A426C", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Used as a separator on dark backgrounds, such as stage left navigation." }, "BORDER_RADIUS_SMALL": { "originalValue": "{!BORDER_RADIUS_SMALL}", "access": "global", "primitive": true, "name": "BORDER_RADIUS_SMALL", "value": "0.125rem", "scope": "global", "cssProperties": [ "border*radius" ], "type": "size", "category": "radius" }, "BORDER_RADIUS_MEDIUM": { "originalValue": "{!BORDER_RADIUS_MEDIUM}", "access": "global", "primitive": true, "name": "BORDER_RADIUS_MEDIUM", "value": "0.25rem", "scope": "global", "cssProperties": [ "border*radius" ], "type": "size", "category": "radius", "comment": "Icons in lists, record home icon, unbound input elements" }, "BORDER_RADIUS_LARGE": { "originalValue": "{!BORDER_RADIUS_LARGE}", "access": "global", "primitive": true, "name": "BORDER_RADIUS_LARGE", "value": "0.5rem", "scope": "global", "cssProperties": [ "border*radius" ], "type": "size", "category": "radius" }, "BORDER_RADIUS_CIRCLE": { "originalValue": "{!BORDER_RADIUS_CIRCLE}", "access": "global", "primitive": true, "name": "BORDER_RADIUS_CIRCLE", "value": "50%", "scope": "global", "cssProperties": [ "border*radius" ], "type": "size", "category": "radius", "comment": "Circle for global use, action icon bgd shape" }, "BORDER_WIDTH_THIN": { "originalValue": "1px", "access": "global", "primitive": true, "name": "BORDER_WIDTH_THIN", "value": "1px", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "border-style" }, "BORDER_WIDTH_THICK": { "originalValue": "2px", "access": "global", "primitive": true, "name": "BORDER_WIDTH_THICK", "value": "2px", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "border-style" }, "SHADOW_ACTIVE": { "originalValue": "{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_X_SMALL}px {!BRAND_ACCESSIBLE}", "primitive": true, "name": "SHADOW_ACTIVE", "value": "0 0 2px #0070d2", "scope": "global", "cssProperties": [ "box-shadow" ], "type": "box-shadow", "category": "shadow", "comment": "Shadow for active states on interactive elements." }, "SHADOW_DRAG": { "originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_40}", "access": "global", "primitive": true, "name": "SHADOW_DRAG", "value": "0 2px 4px 0 rgba(0, 0, 0, 0.40)", "scope": "global", "cssProperties": [ "box-shadow" ], "type": "box-shadow", "category": "shadow", "comment": "Shadow for drag-n-drop." }, "SHADOW_DROP_DOWN": { "originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}", "access": "global", "primitive": true, "name": "SHADOW_DROP_DOWN", "value": "0 2px 3px 0 rgba(0, 0, 0, 0.16)", "scope": "global", "cssProperties": [ "box-shadow" ], "type": "box-shadow", "category": "shadow", "comment": "Shadow for drop down." }, "DURATION_INSTANTLY": { "originalValue": "{!DURATION_INSTANTLY}", "access": "global", "primitive": true, "name": "DURATION_INSTANTLY", "value": "0s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0 seconds, 0 frames" }, "DURATION_IMMEDIATELY": { "originalValue": "{!DURATION_IMMEDIATELY}", "access": "global", "primitive": true, "name": "DURATION_IMMEDIATELY", "value": "0.05s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0.05 seconds, 3 frames" }, "DURATION_QUICKLY": { "originalValue": "{!DURATION_QUICKLY}", "access": "global", "primitive": true, "name": "DURATION_QUICKLY", "value": "0.1s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0.1 seconds, 6 frames" }, "DURATION_PROMPTLY": { "originalValue": "{!DURATION_PROMPTLY}", "access": "global", "primitive": true, "name": "DURATION_PROMPTLY", "value": "0.2s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0.2 seconds, 12 frames" }, "DURATION_SLOWLY": { "originalValue": "{!DURATION_SLOWLY}", "access": "global", "primitive": true, "name": "DURATION_SLOWLY", "value": "0.4s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0.4 seconds, 24 frames" }, "DURATION_PAUSED": { "originalValue": "{!DURATION_PAUSED}", "access": "global", "primitive": true, "name": "DURATION_PAUSED", "value": "3.2s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "3.2 seconds, 192 frames" }, "FONT_FAMILY": { "originalValue": "{!SANS_SERIF}", "access": "global", "primitive": true, "name": "FONT_FAMILY", "value": "'Salesforce Sans', Arial, sans-serif", "scope": "global", "cssProperties": [ "font", "font-family" ], "type": "font", "category": "font", "comment": "Default font-family for Salesforce applications" }, "FONT_FAMILY_HEADING": { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "scope": "global", "primitive": true, "value": "'Salesforce Sans', Arial, sans-serif", "originalValue": "{!SANS_SERIF}", "name": "FONT_FAMILY_HEADING" }, "FONT_FAMILY_MONOSPACE": { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "scope": "global", "primitive": true, "value": "Consolas, Menlo, Monaco, Courier, monospace", "originalValue": "{!MONOSPACE}", "name": "FONT_FAMILY_MONOSPACE" }, "FONT_SIZE_1": { "originalValue": "{!FONT_SIZE_1}", "primitive": true, "name": "FONT_SIZE_1", "value": "0.625rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 1" }, "FONT_SIZE_2": { "originalValue": "{!FONT_SIZE_2}", "primitive": true, "name": "FONT_SIZE_2", "value": "0.75rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 2" }, "FONT_SIZE_3": { "originalValue": "{!FONT_SIZE_3}", "primitive": true, "name": "FONT_SIZE_3", "value": "0.8125rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 3" }, "VAR_FONT_SIZE_10": { "originalValue": "{!FONT_SIZE_10}", "primitive": true, "name": "VAR_FONT_SIZE_10", "value": "2rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 10" }, "FONT_SIZE_4": { "originalValue": "{!FONT_SIZE_4}", "primitive": true, "name": "FONT_SIZE_4", "value": "0.875rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 4" }, "VAR_FONT_SIZE_11": { "originalValue": "{!FONT_SIZE_11}", "primitive": true, "name": "VAR_FONT_SIZE_11", "value": "2.625rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 11" }, "FONT_SIZE_5": { "originalValue": "{!FONT_SIZE_5}", "primitive": true, "name": "FONT_SIZE_5", "value": "1rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 5" }, "FONT_SIZE_6": { "originalValue": "{!FONT_SIZE_6}", "primitive": true, "name": "FONT_SIZE_6", "value": "1.125rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 6" }, "FONT_SIZE_7": { "originalValue": "{!FONT_SIZE_7}", "primitive": true, "name": "FONT_SIZE_7", "value": "1.25rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 7" }, "FONT_SIZE_8": { "originalValue": "{!FONT_SIZE_8}", "primitive": true, "name": "FONT_SIZE_8", "value": "1.5rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 8" }, "VAR_FONT_SIZE_1": { "originalValue": "{!FONT_SIZE_1}", "primitive": true, "name": "VAR_FONT_SIZE_1", "value": "0.625rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 1" }, "FONT_SIZE_9": { "originalValue": "{!FONT_SIZE_9}", "primitive": true, "name": "FONT_SIZE_9", "value": "1.75rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 9" }, "VAR_FONT_SIZE_2": { "originalValue": "{!FONT_SIZE_2}", "primitive": true, "name": "VAR_FONT_SIZE_2", "value": "0.75rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 2" }, "VAR_FONT_SIZE_3": { "originalValue": "{!FONT_SIZE_3}", "primitive": true, "name": "VAR_FONT_SIZE_3", "value": "0.8125rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 3" }, "FONT_SIZE_10": { "originalValue": "{!FONT_SIZE_10}", "primitive": true, "name": "FONT_SIZE_10", "value": "2rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 10" }, "VAR_FONT_SIZE_4": { "originalValue": "{!FONT_SIZE_4}", "primitive": true, "name": "VAR_FONT_SIZE_4", "value": "0.875rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 4" }, "FONT_SIZE_11": { "originalValue": "{!FONT_SIZE_11}", "primitive": true, "name": "FONT_SIZE_11", "value": "2.625rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 11" }, "VAR_FONT_SIZE_5": { "originalValue": "{!FONT_SIZE_5}", "primitive": true, "name": "VAR_FONT_SIZE_5", "value": "1rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 5" }, "VAR_FONT_SIZE_6": { "originalValue": "{!FONT_SIZE_6}", "primitive": true, "name": "VAR_FONT_SIZE_6", "value": "1.125rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 6" }, "VAR_FONT_SIZE_7": { "originalValue": "{!FONT_SIZE_7}", "primitive": true, "name": "VAR_FONT_SIZE_7", "value": "1.25rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 7" }, "VAR_FONT_SIZE_8": { "originalValue": "{!FONT_SIZE_8}", "primitive": true, "name": "VAR_FONT_SIZE_8", "value": "1.5rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 8" }, "VAR_FONT_SIZE_9": { "originalValue": "{!FONT_SIZE_9}", "primitive": true, "name": "VAR_FONT_SIZE_9", "value": "1.75rem", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 9" }, "FONT_WEIGHT_LIGHT": { "originalValue": "{!FONT_WEIGHT_LIGHT}", "access": "global", "primitive": true, "name": "FONT_WEIGHT_LIGHT", "value": "300", "scope": "global", "cssProperties": [ "font", "font-weight" ], "type": "font-weight", "category": "font", "comment": "Use for large headings only." }, "FONT_WEIGHT_REGULAR": { "originalValue": "{!FONT_WEIGHT_REGULAR}", "access": "global", "primitive": true, "name": "FONT_WEIGHT_REGULAR", "value": "400", "scope": "global", "cssProperties": [ "font", "font-weight" ], "type": "font-weight", "category": "font", "comment": "Most all body copy." }, "FONT_WEIGHT_BOLD": { "originalValue": "{!FONT_WEIGHT_BOLD}", "access": "global", "primitive": true, "name": "FONT_WEIGHT_BOLD", "value": "700", "scope": "global", "cssProperties": [ "font", "font-weight" ], "type": "font-weight", "category": "font", "comment": "Used sparingly for emphasized text within regular body copy." }, "LINE_HEIGHT_HEADING": { "originalValue": "1.25", "access": "global", "primitive": true, "name": "LINE_HEIGHT_HEADING", "value": "1.25", "scope": "global", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Unitless line-heights for reusability" }, "LINE_HEIGHT_TEXT": { "originalValue": "1.5", "access": "global", "primitive": true, "name": "LINE_HEIGHT_TEXT", "value": "1.5", "scope": "global", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Unitless line-heights for reusability" }, "LINE_HEIGHT_RESET": { "originalValue": "1", "access": "global", "primitive": true, "name": "LINE_HEIGHT_RESET", "value": "1", "scope": "global", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Remove extra leading. Unitless line-heights for reusability" }, "VAR_LINE_HEIGHT_TEXT": { "originalValue": "1.5", "primitive": true, "name": "VAR_LINE_HEIGHT_TEXT", "value": "1.5", "scope": "global", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Variable unitless line-heights for reusability" }, "OPACITY_5": { "originalValue": "0.5", "primitive": true, "name": "OPACITY_5", "value": "0.5", "scope": "global", "cssProperties": [ "opacity" ], "type": "opacity", "category": "opacity", "comment": "50% transparency of an element" }, "OPACITY_8": { "originalValue": "0.8", "primitive": true, "name": "OPACITY_8", "value": "0.8", "scope": "global", "cssProperties": [ "opacity" ], "type": "opacity", "category": "opacity", "comment": "80% transparency of an element" }, "BRAND_HEADER_CONTRAST_WEAK_DISABLED": { "originalValue": "rgba(166,166,166,0.25)", "themeable": true, "release": "2.6.0", "primitive": true, "name": "BRAND_HEADER_CONTRAST_WEAK_DISABLED", "value": "rgba(166,166,166,0.25)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_HEADER_CONTRAST_WEAK" }, "COLOR_GRAY_11": { "originalValue": "{!PALETTE_GRAY_11}", "release": "2.5.0", "primitive": true, "name": "COLOR_GRAY_11", "value": "#3e3e3c", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 11" }, "BRAND_PRIMARY_TRANSPARENT_10": { "originalValue": "rgba(21,137,238,0.1)", "themeable": true, "release": "2.6.0", "primitive": true, "name": "BRAND_PRIMARY_TRANSPARENT_10", "value": "rgba(21,137,238,0.1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY at 10%" }, "COLOR_GRAY_12": { "originalValue": "{!PALETTE_GRAY_12}", "release": "2.5.0", "primitive": true, "name": "COLOR_GRAY_12", "value": "#2B2826", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 12" }, "BRAND_BACKGROUND_DARK_TRANSPARENT": { "originalValue": "rgba(221,219,218,0)", "themeable": true, "release": "2.6.0", "primitive": true, "name": "BRAND_BACKGROUND_DARK_TRANSPARENT", "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" }, "COLOR_GRAY_13": { "originalValue": "{!PALETTE_GRAY_13}", "release": "2.5.0", "primitive": true, "name": "COLOR_GRAY_13", "value": "#080707", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 13" }, "BRAND_HEADER": { "originalValue": "{!PALETTE_GRAY_1}", "themeable": true, "release": "2.6.0", "primitive": true, "name": "BRAND_HEADER", "value": "#FFFFFF", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Background color a branded app header" }, "BRAND_LIGHT_ACTIVE": { "originalValue": "{!BRAND_LIGHT_ACTIVE}", "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "BRAND_LIGHT_ACTIVE", "value": "#e3e5ed", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_LIGHT" }, "BRAND_HEADER_CONTRAST_WARM": { "originalValue": "#BF0201", "themeable": true, "release": "2.6.0", "primitive": true, "name": "BRAND_HEADER_CONTRAST_WARM", "value": "#BF0201", "scope": "global", "cssProperties": [ "background-col