@salesforce-ux/design-system

{ "auraImports": [ "one:actionBackgrounds" ], "props": { "DURATION_SLIDE": { "type": "time", "category": "time", "cssProperties": [ "animation*", "transition*" ], "value": "0.25s", "originalValue": "0.25s", "name": "DURATION_SLIDE" }, "WIDTH_STAGE_LEFT": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "88%", "originalValue": "88%", "name": "WIDTH_STAGE_LEFT" }, "SQUARE_TOOLTIP": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1.25rem", "comment": "Tooltip square size", "deprecated": true, "originalValue": "1.25rem", "name": "SQUARE_TOOLTIP" }, "MAX_WIDTH_HEADER_BRAND": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "156px", "comment": "Maximum width for brand logos in header.", "deprecated": true, "originalValue": "156px", "name": "MAX_WIDTH_HEADER_BRAND" }, "SQUARE_TOOLTIP_NUBBIN": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1rem", "comment": "Tooltip nubbin square size", "originalValue": "1rem", "name": "SQUARE_TOOLTIP_NUBBIN" }, "SQUARE_RECORD_ANCHOR_PIC": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "3rem", "comment": "Use squareIconLargeBoundary", "deprecated": true, "originalValue": "3rem", "name": "SQUARE_RECORD_ANCHOR_PIC" }, "FLEX_MASTER_PANEL": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "7", "comment": "2 Column Layout - Master", "originalValue": "7", "name": "FLEX_MASTER_PANEL" }, "MAX_HEIGHT_CARD_MEDIA": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "144px", "comment": "Maximum height for photos and such in cards.", "deprecated": true, "originalValue": "144px", "name": "MAX_HEIGHT_CARD_MEDIA" }, "MAX_HEIGHT_HEADER_BRAND": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "32px", "comment": "Maximum height for brand logos in header.", "deprecated": true, "originalValue": "32px", "name": "MAX_HEIGHT_HEADER_BRAND" }, "HEIGHT_FOOTER": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "3.75rem", "comment": "Action footer menu. Phone 44px; Tablet 50px", "originalValue": "3.75rem", "name": "HEIGHT_FOOTER" }, "MAX_WIDTH_ACTION_BAR_WITH_LABELS": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "320px", "comment": "Maximum width for action icons in action bar when there are only 2 items with labels.", "originalValue": "320px", "name": "MAX_WIDTH_ACTION_BAR_WITH_LABELS" }, "FLEX_DETAIL_PANEL": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "3", "comment": "2 Column Layout - Detail", "originalValue": "3", "name": "FLEX_DETAIL_PANEL" }, "HEIGHT_OVERFLOW_START": { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "144px", "comment": "Space above overflow menu before scrolling.", "originalValue": "144px", "name": "HEIGHT_OVERFLOW_START" }, "AVATAR_GROUP_COLOR_BACKGROUND_LIGHTEST": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "White avatar group background color.", "originalValue": "{!PALETTE_GRAY_1}", "name": "AVATAR_GROUP_COLOR_BACKGROUND_LIGHTEST" }, "AVATAR_GROUP_COLOR_BACKGROUND_INVERSE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#706e6b", "comment": "Dark gray avatar group background color.", "originalValue": "{!PALETTE_GRAY_9}", "name": "AVATAR_GROUP_COLOR_BACKGROUND_INVERSE" }, "BADGE_COLOR_BACKGROUND_LIGHTEST": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "White badge background color.", "originalValue": "{!PALETTE_GRAY_1}", "name": "BADGE_COLOR_BACKGROUND_LIGHTEST" }, "BADGE_COLOR_BACKGROUND_INVERSE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#706e6b", "comment": "Dark gray badge background color.", "originalValue": "{!PALETTE_GRAY_9}", "name": "BADGE_COLOR_BACKGROUND_INVERSE" }, "BRAND_BAND_DEFAULT_IMAGE": { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "", "originalValue": "", "name": "BRAND_BAND_DEFAULT_IMAGE" }, "BRAND_BAND_COLOR_BACKGROUND_PRIMARY": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "transparent", "originalValue": "transparent", "name": "BRAND_BAND_COLOR_BACKGROUND_PRIMARY" }, "BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "transparent", "originalValue": "transparent", "name": "BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT" }, "BRAND_BAND_COLOR_BACKGROUND_SECONDARY": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "transparent", "originalValue": "transparent", "name": "BRAND_BAND_COLOR_BACKGROUND_SECONDARY" }, "BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "transparent", "originalValue": "transparent", "name": "BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT" }, "BRAND_BAND_IMAGE_HEIGHT_SMALL": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "6rem", "originalValue": "6rem", "name": "BRAND_BAND_IMAGE_HEIGHT_SMALL" }, "BRAND_BAND_IMAGE_HEIGHT_MEDIUM": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "12.5rem", "originalValue": "12.5rem", "name": "BRAND_BAND_IMAGE_HEIGHT_MEDIUM" }, "BRAND_BAND_IMAGE_HEIGHT_LARGE": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "18.75rem", "originalValue": "18.75rem", "name": "BRAND_BAND_IMAGE_HEIGHT_LARGE" }, "BRAND_BAND_SCRIM_HEIGHT": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "3.125rem", "originalValue": "3.125rem", "name": "BRAND_BAND_SCRIM_HEIGHT" }, "TEMPLATE_GUTTERS": { "scope": "component", "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "0", "originalValue": "0", "name": "TEMPLATE_GUTTERS" }, "TEMPLATE_PROFILE_GUTTERS": { "scope": "component", "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "0", "originalValue": "0", "name": "TEMPLATE_PROFILE_GUTTERS" }, "BUTTON_ICON_COLOR_BORDER_PRIMARY": { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "#FFFFFF", "originalValue": "{!PALETTE_GRAY_1}", "name": "BUTTON_ICON_COLOR_BORDER_PRIMARY" }, "BUTTON_COLOR_BORDER_PRIMARY": { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "#D8DDE6", "originalValue": "{!GEYSER}", "name": "BUTTON_COLOR_BORDER_PRIMARY" }, "BUTTON_COLOR_BORDER_BRAND_PRIMARY": { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "#0070D2", "originalValue": "{!SCIENCE_BLUE}", "name": "BUTTON_COLOR_BORDER_BRAND_PRIMARY" }, "BUTTON_COLOR_BORDER_SECONDARY": { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.80)", "originalValue": "{!WHITE_TRANSPARENT_80}", "name": "BUTTON_COLOR_BORDER_SECONDARY" }, "BUTTON_BORDER_RADIUS": { "scope": "component", "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": ".25rem", "originalValue": ".25rem", "name": "BUTTON_BORDER_RADIUS" }, "COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#F4F6F9", "comment": "Default secondary button - focus state", "originalValue": "{!LINK_WATER}", "name": "COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS" }, "BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#0070D2", "originalValue": "{!SCIENCE_BLUE}", "name": "BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY" }, "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "transparent", "comment": "Disabled button backgrounds on inverse/dark backgrounds", "originalValue": "{!TRANSPARENT}", "name": "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED" }, "COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#F4F6F9", "comment": "Default secondary button - hover state", "originalValue": "{!LINK_WATER}", "name": "COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER" }, "COLOR_BACKGROUND_BUTTON_DEFAULT": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Default secondary button", "originalValue": "{!WHITE}", "name": "COLOR_BACKGROUND_BUTTON_DEFAULT" }, "COLOR_BACKGROUND_BUTTON_ICON_DISABLED": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Background color for icon-only button - disabled state", "originalValue": "{!WHITE}", "name": "COLOR_BACKGROUND_BUTTON_ICON_DISABLED" }, "COLOR_BACKGROUND_BUTTON_ICON_FOCUS": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#F4F6F9", "comment": "Background color for icon-only button - focus state", "originalValue": "{!LINK_WATER}", "name": "COLOR_BACKGROUND_BUTTON_ICON_FOCUS" }, "BUTTON_COLOR_BACKGROUND_SECONDARY": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.80)", "originalValue": "{!WHITE_TRANSPARENT_80}", "name": "BUTTON_COLOR_BACKGROUND_SECONDARY" }, "COLOR_BACKGROUND_BUTTON_BRAND_DISABLED": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#E0E5EE", "comment": "Brandable primary button - disabled state", "originalValue": "{!STEAM}", "name": "COLOR_BACKGROUND_BUTTON_BRAND_DISABLED" }, "COLOR_BACKGROUND_BUTTON_BRAND_HOVER": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#005FB2", "comment": "Brandable primary button - hover state", "originalValue": "{!ENDEAVOUR}", "name": "COLOR_BACKGROUND_BUTTON_BRAND_HOVER" }, "COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0.24)", "comment": "Active button backgrounds on inverse backgrounds on mobile", "originalValue": "{!BLACK_TRANSPARENT_24}", "name": "COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE" }, "COLOR_BACKGROUND_BUTTON_ICON_HOVER": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#F4F6F9", "comment": "Background color for icon-only button - hover state", "originalValue": "{!LINK_WATER}", "name": "COLOR_BACKGROUND_BUTTON_ICON_HOVER" }, "COLOR_BACKGROUND_BUTTON_BRAND": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#0070D2", "comment": "Brandable primary button", "originalValue": "{!SCIENCE_BLUE}", "name": "COLOR_BACKGROUND_BUTTON_BRAND" }, "COLOR_BACKGROUND_BUTTON_ICON": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "transparent", "comment": "Background color for icon-only button", "originalValue": "{!TRANSPARENT}", "name": "COLOR_BACKGROUND_BUTTON_ICON" }, "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Default secondary button - disabled state", "originalValue": "{!WHITE}", "name": "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED" }, "COLOR_BACKGROUND_BUTTON_ICON_ACTIVE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#EEF1F6", "comment": "Background color for icon-only button - active state", "originalValue": "{!WHITE_LILAC}", "name": "COLOR_BACKGROUND_BUTTON_ICON_ACTIVE" }, "COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#00396B", "comment": "Brandable primary button - active state", "originalValue": "{!MIDNIGHT_BLUE}", "name": "COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE" }, "COLOR_BACKGROUND_BUTTON_INVERSE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "transparent", "comment": "Button backgrounds on inverse/dark backgrounds", "originalValue": "{!TRANSPARENT}", "name": "COLOR_BACKGROUND_BUTTON_INVERSE" }, "BUTTON_COLOR_BACKGROUND_PRIMARY": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "originalValue": "{!WHITE}", "name": "BUTTON_COLOR_BACKGROUND_PRIMARY" }, "COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#EEF1F6", "comment": "Default secondary button - active state", "originalValue": "{!WHITE_LILAC}", "name": "COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE" }, "LINE_HEIGHT_BUTTON": { "originalValue": "1.875rem", "access": "global", "name": "LINE_HEIGHT_BUTTON", "value": "1.875rem", "scope": "component", "cssProperties": [ "font", "*height", "bottom" ], "type": "number", "category": "line-height", "comment": "Line heights for regular buttons" }, "LINE_HEIGHT_BUTTON_SMALL": { "originalValue": "1.75rem", "access": "global", "name": "LINE_HEIGHT_BUTTON_SMALL", "value": "1.75rem", "scope": "component", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Line heights for small buttons" }, "BUTTON_COLOR_TEXT_PRIMARY": { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#FFFFFF", "originalValue": "{!WHITE}", "name": "BUTTON_COLOR_TEXT_PRIMARY" }, "CARD_COLOR_BACKGROUND": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Default Card component background color.", "originalValue": "{!PALETTE_GRAY_1}", "name": "CARD_COLOR_BACKGROUND" }, "CARD_COLOR_BORDER": { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "#dddbda", "originalValue": "{!PALETTE_GRAY_5}", "name": "CARD_COLOR_BORDER" }, "CARD_FOOTER_COLOR_BORDER": { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "transparent", "originalValue": "transparent", "name": "CARD_FOOTER_COLOR_BORDER" }, "CARD_SHADOW": { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "none", "originalValue": "none", "name": "CARD_SHADOW" }, "CARD_FONT_WEIGHT": { "scope": "component", "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "comment": "Use for active tab.", "originalValue": "400", "name": "CARD_FONT_WEIGHT" }, "CARD_FOOTER_MARGIN": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0.75rem", "originalValue": "{!SPACING_SMALL}", "name": "CARD_FOOTER_MARGIN" }, "CARD_BODY_PADDING": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0 1rem", "originalValue": "0 {!SPACING_MEDIUM}", "name": "CARD_BODY_PADDING" }, "CARD_WRAPPER_SPACING": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "1rem", "originalValue": "{!SPACING_MEDIUM}", "name": "CARD_WRAPPER_SPACING" }, "CARD_HEADER_PADDING": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0.75rem 1rem 0", "originalValue": "{!SPACING_SMALL} {!SPACING_MEDIUM} 0", "name": "CARD_HEADER_PADDING" }, "CARD_SPACING_LARGE": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "1.5rem", "originalValue": "{!SPACING_LARGE}", "name": "CARD_SPACING_LARGE" }, "CARD_HEADER_MARGIN": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0 0 0.75rem", "originalValue": "0 0 {!SPACING_SMALL}", "name": "CARD_HEADER_MARGIN" }, "CARD_SPACING_MARGIN": { "scope": "component", "category": "spacing", "type": "size", "comment": "Use for vertical spacing between cards", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "1rem", "originalValue": "{!SPACING_MEDIUM}", "name": "CARD_SPACING_MARGIN" }, "CARD_FOOTER_PADDING": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0 1rem 0.75rem", "originalValue": "0 {!SPACING_MEDIUM} {!SPACING_SMALL}", "name": "CARD_FOOTER_PADDING" }, "CARD_SPACING_SMALL": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0.75rem", "originalValue": "{!SPACING_SMALL}", "name": "CARD_SPACING_SMALL" }, "CARD_FOOTER_TEXT_ALIGN": { "scope": "component", "category": "text", "type": "text-align", "cssProperties": [ "text-align" ], "value": "right", "originalValue": "right", "name": "CARD_FOOTER_TEXT_ALIGN" }, "CAROUSEL_COLOR_BACKGROUND": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Default background for carousel card", "originalValue": "{!PALETTE_GRAY_1}", "name": "CAROUSEL_COLOR_BACKGROUND" }, "CAROUSEL_INDICATOR_COLOR_BACKGROUND": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Default background for carousel navigation indicators", "originalValue": "{!PALETTE_GRAY_1}", "name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND" }, "CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#fafaf9", "comment": "Default hover background for carousel navigation indicators", "originalValue": "{!PALETTE_GRAY_2}", "name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER" }, "CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#005FB2", "comment": "Default focus background for carousel navigation indicators", "originalValue": "{!ENDEAVOUR}", "name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS" }, "CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#0070D2", "comment": "Default background for active state on carousel navigation indicators", "originalValue": "{!SCIENCE_BLUE}", "name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE" }, "CAROUSEL_INDICATOR_WIDTH": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1rem", "comment": "Default width for carousel indicator width", "originalValue": "1rem", "name": "CAROUSEL_INDICATOR_WIDTH" }, "CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#F2F2F3", "comment": "Inbound chat message background color.", "originalValue": "{!PALETTE_COOL_GRAY_3}", "name": "CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND" }, "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#005FB2", "comment": "Outbound chat message background color.", "originalValue": "{!ENDEAVOUR}", "name": "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND" }, "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#6B6D70", "comment": "Outbound agent chat message background color.", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT" }, "CHAT_MESSAGE_COLOR_BACKGROUND_STATUS": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Status chat message background color.", "originalValue": "{!PALETTE_COOL_GRAY_1}", "name": "CHAT_MESSAGE_COLOR_BACKGROUND_STATUS" }, "LINE_HEIGHT_TOGGLE": { "scope": "component", "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.3rem", "comment": "Line heights for toggle buttons", "originalValue": "1.3rem", "name": "LINE_HEIGHT_TOGGLE" }, "SQUARE_TOGGLE_SLIDER": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1.25rem", "comment": "Slider size for toggle.", "originalValue": "1.25rem", "name": "SQUARE_TOGGLE_SLIDER" }, "WIDTH_TOGGLE": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "3rem", "comment": "Slider width.", "originalValue": "3rem", "name": "WIDTH_TOGGLE" }, "HEIGHT_TOGGLE": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1.5rem", "comment": "Slider height.", "originalValue": "1.5rem", "name": "HEIGHT_TOGGLE" }, "COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "#fafaf9", "originalValue": "{!PALETTE_GRAY_2}", "name": "COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND" }, "COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR": { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*" ], "value": "#514f4d", "originalValue": "{!PALETTE_GRAY_10}", "name": "COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR" }, "COLOR_PICKER_SWATCH_SHADOW": { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "inset 0 0 1px rgba(0,0,0,0.4)", "originalValue": "inset 0 0 1px rgba(0,0,0,0.4)", "name": "COLOR_PICKER_SWATCH_SHADOW" }, "COLOR_PICKER_INPUT_CUSTOM_HEX_FONT_SIZE": { "scope": "component", "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.75rem", "originalValue": "0.75rem", "name": "COLOR_PICKER_INPUT_CUSTOM_HEX_FONT_SIZE" }, "COLOR_PICKER_SELECTOR_WIDTH": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "14rem", "originalValue": "14rem", "name": "COLOR_PICKER_SELECTOR_WIDTH" }, "COLOR_PICKER_SWATCHES_WIDTH": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "13.3rem", "originalValue": "13.3rem", "name": "COLOR_PICKER_SWATCHES_WIDTH" }, "COLOR_PICKER_RANGE_HEIGHT": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "5rem", "originalValue": "5rem", "name": "COLOR_PICKER_RANGE_HEIGHT" }, "COLOR_PICKER_SLIDER_HEIGHT": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "1.5rem", "originalValue": "1.5rem", "name": "COLOR_PICKER_SLIDER_HEIGHT" }, "COLOR_PICKER_THUMB_WIDTH": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "0.375rem", "originalValue": "0.375rem", "name": "COLOR_PICKER_THUMB_WIDTH" }, "COLOR_PICKER_RANGE_INDICATOR_SIZE": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "0.75rem", "originalValue": "0.75rem", "name": "COLOR_PICKER_RANGE_INDICATOR_SIZE" }, "COLOR_PICKER_INPUT_CUSTOM_HEX_WIDTH": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "4.2rem", "originalValue": "4.2rem", "name": "COLOR_PICKER_INPUT_CUSTOM_HEX_WIDTH" }, "COLOR_PICKER_SWATCH_SIZE": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "1.25rem", "originalValue": "1.25rem", "name": "COLOR_PICKER_SWATCH_SIZE" }, "TABLE_COLOR_BACKGROUND_STRIPES": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#fafaf9", "comment": "Alternating row background color for tables", "originalValue": "{!PALETTE_GRAY_2}", "name": "TABLE_COLOR_BACKGROUND_STRIPES" }, "TABLE_COLOR_BACKGROUND_HEADER": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Default background color for table headers", "originalValue": "{!PALETTE_GRAY_1}", "name": "TABLE_COLOR_BACKGROUND_HEADER" }, "TABLE_COLOR_BACKGROUND_HEADER_HOVER": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#fafaf9", "comment": "Hover state for table header cells", "originalValue": "{!PALETTE_GRAY_2}", "name": "TABLE_COLOR_BACKGROUND_HEADER_HOVER" }, "TABLE_COLOR_BACKGROUND_HEADER_FOCUS": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Focused state for table header cells", "originalValue": "{!PALETTE_GRAY_1}", "name": "TABLE_COLOR_BACKGROUND_HEADER_FOCUS" }, "TABLE_BORDER_RADIUS": { "scope": "component", "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0", "originalValue": "0", "name": "TABLE_BORDER_RADIUS" }, "TABLE_CELL_SPACING": { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0.5rem", "originalValue": "{!SPACING_X_SMALL}", "name": "TABLE_CELL_SPACING" }, "TABLE_COLOR_TEXT_HEADER": { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#514f4d", "originalValue": "{!PALETTE_GRAY_10}", "name": "TABLE_COLOR_TEXT_HEADER" }, "COLOR_BACKGROUND_DOCKED_PANEL_HEADER": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Docked panel header’s background color.", "originalValue": "{!PALETTE_GRAY_1}", "name": "COLOR_BACKGROUND_DOCKED_PANEL_HEADER" }, "COLOR_BACKGROUND_DOCKED_PANEL": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Docked panel’s background color when open.", "originalValue": "{!PALETTE_GRAY_1}", "name": "COLOR_BACKGROUND_DOCKED_PANEL" }, "HEIGHT_DOCKED_BAR": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "2.5rem", "comment": "Height of the docked bar.", "originalValue": "2.5rem", "name": "HEIGHT_DOCKED_BAR" }, "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_BADGE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#D4504C", "comment": "Utility bar notifications badge background color.", "originalValue": "{!VALENCIA}", "name": "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_BADGE" }, "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_FOCUS": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#c9c7c5", "comment": "Utility bar notifications focus background color.", "originalValue": "{!PALETTE_GRAY_6}", "name": "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_FOCUS" }, "DROP_ZONE_SLOT_HEIGHT": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "0.25rem", "originalValue": "0.25rem", "name": "DROP_ZONE_SLOT_HEIGHT" }, "COLOR_BACKGROUND_ICON_WAFFLE": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#706e6b", "comment": "Default color for animated icon waffle for app switcher.", "originalValue": "{!PALETTE_GRAY_9}", "name": "COLOR_BACKGROUND_ICON_WAFFLE" }, "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#dddbda", "comment": "Default background color for a typing icon dot.", "originalValue": "{!PALETTE_GRAY_5}", "name": "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY" }, "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY_DARK": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#c9c7c5", "comment": "Active background color for a typing icon dot when animcating.", "originalValue": "{!PALETTE_GRAY_6}", "name": "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY_DARK" }, "GLOBAL_ACTION_FILL_HOVER": { "scope": "component", "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "#0070D2", "comment": "Brand fill color", "originalValue": "{!SCIENCE_BLUE}", "name": "GLOBAL_ACTION_FILL_HOVER" }, "GLOBAL_ACTION_ICON_SIZE": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*width", "*height" ], "value": "1.5rem", "comment": "Global action icon size", "originalValue": "1.5rem", "name": "GLOBAL_ACTION_ICON_SIZE" }, "TYPING_ICON_DOT_SIZE": { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*width", "*height" ], "value": ".5rem", "comment": "Typing icon size", "originalValue": ".5rem", "name": "TYPING_ICON_DOT_SIZE" }, "EINSTEIN_HEADER_BACKGROUND": { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/assets/images/einstein-headers/einstein-header-background.svg", "originalValue": "/assets/images/einstein-headers/einstein-header-background.svg", "name": "EINSTEIN_HEADER_BACKGROUND" }, "EINSTEIN_HEADER_FIGURE": { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/assets/images/einstein-headers/einstein-figure.svg", "originalValue": "/assets/images/einstein-headers/einstein-figure.svg", "name": "EINSTEIN_HEADER_FIGURE" }, "EINSTEIN_HEADER_BACKGROUND_COLOR": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "#95CBFC", "comment": "Background color for Einstein header", "originalValue": "#95CBFC", "name": "EINSTEIN_HEADER_BACKGROUND_COLOR" }, "EINSTEIN_HEADER_TEXT_SHADOW": { "scope": "component", "type": "shadow", "category": "text-shadow", "cssProperties": [ "text-shadow" ], "value": "#9EDAFF", "comment": "Text shadow color for Einstein header background to make text more readable", "originalValue": "#9EDAFF", "name": "EINSTEIN_HEADER_TEXT_SHADOW" }, "FORM_LABEL_FONT_SIZE": { "scope": "component", "type": "size", "cssProperties": [ "font", "font-size" ], "category": "font-size", "value": "0.75rem", "originalValue": "0.75rem", "name": "FORM_LABEL_FONT_SIZE" }, "GLOBAL_HEADER_COLOR_BACKGROUND": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "#FFFFFF", "comment": "Global Header background color", "originalValue": "{!PALETTE_GRAY_1}", "name": "GLOBAL_HEADER_COLOR_BACKGROUND" }, "BRAND_LOGO_IMAGE": { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/assets/images/logo-noname.svg", "originalValue": "/assets/images/logo-noname.svg", "name": "BRAND_LOGO_IMAGE" }, "SQUARE_ICON_GLOBAL_IDENTITY_ICON": { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1.25rem", "comment": "Global identity icon size.", "originalValue": "1.25rem", "name": "SQUARE_ICON_GLOBAL_IDENTITY_ICON" }, "COLOR_BACKGROUND_CONTEXT_BAR_ITEM_HOVER": { "originalValue": "{!PALETTE_GRAY_1}", "name": "COLOR_BACKGROUND_CONTEXT_BAR_ITEM_HOVER", "value": "#FFFFFF", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Hovered context bar item background color." }, "COLOR_BACKGROUND_CONTEXT_BAR_ITEM_ACTIVE": { "originalValue": "{!PALETTE_GRAY_1}", "name": "COLOR_BACKGROUND_CONTEXT_BAR_ITEM_ACTIVE", "value": "#FFFFFF", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active context bar item background color." }, "COLOR_BACKGROUND_CONTEXT_BAR": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Default context bar background color.", "originalValue": "{!WHITE}", "name": "COLOR_BACKGROUND_CONTEXT_BAR" }, "COLOR_BACKGROUND_CONTEXT_TAB_BAR_ITEM": { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Context TAB bar item background color.", "originalValue": "{!WHITE}", "name": "COLOR_BACKGROUND_CONTEXT_TAB_BAR_ITEM" }, "COLOR_BACKGROUND_CONTEXT_BAR_INVERSE_ITEM_HOVER": { "originalValue": "{!WHITE_TRANSPARENT_20}", "name": "COLOR_BACKGROUND_CONTEXT_BAR_INVERSE_ITEM_HOVER