@salesforce-ux/design-system

{ "properties": [ { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "White avatar group background color.", "name": "avatarGroupColorBackgroundLightest" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Dark gray avatar group background color.", "name": "avatarGroupColorBackgroundInverse" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "White badge background color.", "name": "badgeColorBackgroundLightest" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Dark gray badge background color.", "name": "badgeColorBackgroundInverse" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "", "name": "brandBandDefaultImage" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgba(0, 0, 0, 0)", "name": "brandBandColorBackgroundPrimary" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgba(0, 0, 0, 0)", "name": "brandBandColorBackgroundPrimaryTransparent" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgba(0, 0, 0, 0)", "name": "brandBandColorBackgroundSecondary" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgba(0, 0, 0, 0)", "name": "brandBandColorBackgroundSecondaryTransparent" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "96", "name": "brandBandImageHeightSmall" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "200", "name": "brandBandImageHeightMedium" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "300", "name": "brandBandImageHeightLarge" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "50", "name": "brandBandScrimHeight" }, { "scope": "component", "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "0", "name": "templateGutters" }, { "scope": "component", "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "0", "name": "templateProfileGutters" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "name": "buttonIconColorBorderPrimary" }, { "scope": "component", "type": "sizing", "category": "height", "cssProperties": [ "width", "height" ], "value": "44", "name": "buttonIconBoundaryTouch" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "name": "buttonColorBorderPrimary" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "deprecated": true, "name": "buttonColorBorderBrandPrimary" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.8)", "deprecated": true, "name": "buttonColorBorderSecondary" }, { "scope": "component", "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "4", "name": "buttonBorderRadius" }, { "access": "global", "name": "colorBackgroundButtonDefaultFocus", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button - focus state" }, { "name": "buttonColorBackgroundBrandPrimary", "value": "rgb(1, 118, 211)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Use BRAND_ACCESSIBLE to pick up theming capabilities" }, { "access": "global", "name": "colorBackgroundButtonInverseDisabled", "value": "rgba(0, 0, 0, 0)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Disabled button backgrounds on inverse/dark backgrounds" }, { "access": "global", "name": "colorBackgroundButtonDefaultHover", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button - hover state" }, { "access": "global", "name": "colorBackgroundButtonDefault", "value": "rgb(255, 255, 255)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button" }, { "access": "global", "name": "colorBackgroundButtonIconDisabled", "value": "rgb(255, 255, 255)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button - disabled state" }, { "access": "global", "name": "colorBackgroundButtonIconFocus", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button - focus state" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.8)", "deprecated": true, "name": "buttonColorBackgroundSecondary" }, { "access": "global", "name": "colorBackgroundButtonBrandDisabled", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable primary button - disabled state" }, { "access": "global", "name": "colorBackgroundButtonBrandHover", "value": "rgb(1, 68, 134)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable primary button - hover state" }, { "access": "global", "name": "colorBackgroundButtonInverseActive", "value": "rgba(0, 0, 0, 0.24)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active button backgrounds on inverse backgrounds on mobile" }, { "access": "global", "name": "colorBackgroundButtonIconHover", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button - hover state" }, { "access": "global", "name": "colorBackgroundButtonBrand", "value": "rgb(1, 118, 211)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable primary button" }, { "access": "global", "name": "colorBackgroundButtonIcon", "value": "rgba(0, 0, 0, 0)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button" }, { "access": "global", "name": "colorBackgroundButtonDefaultDisabled", "value": "rgb(255, 255, 255)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button - disabled state" }, { "access": "global", "name": "colorBackgroundButtonIconActive", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button - active state" }, { "access": "global", "name": "colorBackgroundButtonBrandActive", "value": "rgb(3, 45, 96)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable primary button - active state" }, { "access": "global", "name": "colorBackgroundButtonInverse", "value": "rgba(0, 0, 0, 0)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Button backgrounds on inverse/dark backgrounds" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "name": "buttonColorBackgroundPrimary" }, { "access": "global", "name": "colorBackgroundButtonDefaultActive", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button - active state" }, { "access": "global", "name": "lineHeightButton", "value": "30", "scope": "component", "cssProperties": [ "font", "*height", "bottom" ], "type": "number", "category": "line-height", "comment": "Line heights for regular buttons" }, { "access": "global", "name": "lineHeightButtonSmall", "value": "28", "scope": "component", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Line heights for small buttons" }, { "name": "buttonLineHeightTouch", "value": "42.4", "deprecated": true, "scope": "component", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Line height for touch screens" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "name": "buttonColorTextPrimary" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default Card component background color.", "name": "cardColorBackground" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "name": "cardColorBorder" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0)", "name": "cardFooterColorBorder" }, { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "none", "name": "cardShadow" }, { "scope": "component", "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "comment": "Use for active tab.", "name": "cardFontWeight" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "12", "name": "cardFooterMargin" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0", "name": "cardBodyPadding" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "16", "name": "cardWrapperSpacing" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0.75rem 1rem 0", "name": "cardHeaderPadding" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "24", "name": "cardSpacingLarge" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0", "name": "cardHeaderMargin" }, { "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": "16", "name": "cardSpacingMargin" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0", "name": "cardFooterPadding" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "12", "name": "cardSpacingSmall" }, { "scope": "component", "category": "text", "type": "text-align", "cssProperties": [ "text-align" ], "value": "right", "name": "cardFooterTextAlign" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default background for carousel card", "name": "carouselColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default background for carousel navigation indicators", "name": "carouselIndicatorColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Default hover background for carousel navigation indicators", "name": "carouselIndicatorColorBackgroundHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 68, 134)", "comment": "Default focus background for carousel navigation indicators", "name": "carouselIndicatorColorBackgroundFocus" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "comment": "Default background for active state on carousel navigation indicators", "name": "carouselIndicatorColorBackgroundActive" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "16", "comment": "Default width for carousel indicator width", "name": "carouselIndicatorWidth" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Inbound chat message background color.", "name": "chatMessageColorBackgroundInbound" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 68, 134)", "comment": "Outbound chat message background color.", "name": "chatMessageColorBackgroundOutbound" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Outbound agent chat message background color.", "name": "chatMessageColorBackgroundOutboundAgent" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Status chat message background color.", "name": "chatMessageColorBackgroundStatus" }, { "scope": "component", "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "20.8", "comment": "Line heights for toggle buttons", "name": "lineHeightToggle" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "20", "comment": "Slider size for toggle.", "name": "squareToggleSlider" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "48", "comment": "Slider width.", "name": "widthToggle" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "24", "comment": "Slider height.", "name": "heightToggle" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgb(243, 243, 243)", "name": "colorPickerSliderThumbColorBackground" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*" ], "value": "rgb(68, 68, 68)", "name": "colorPickerSliderThumbBorderColor" }, { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "inset 0 0 1px rgba(0,0,0,0.4)", "name": "colorPickerSwatchShadow" }, { "scope": "component", "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "name": "colorPickerInputCustomHexFontSize" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "224", "name": "colorPickerSelectorWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "212.8", "name": "colorPickerSwatchesWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "80", "name": "colorPickerRangeHeight" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "24", "name": "colorPickerSliderHeight" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "6", "name": "colorPickerThumbWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "12", "name": "colorPickerRangeIndicatorSize" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "67.2", "name": "colorPickerInputCustomHexWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "20", "name": "colorPickerSwatchSize" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Alternating row background color for tables", "name": "tableColorBackgroundStripes" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default background color for table headers", "name": "tableColorBackgroundHeader" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Hover state for table header cells", "name": "tableColorBackgroundHeaderHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Focused state for table header cells", "name": "tableColorBackgroundHeaderFocus" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(174, 174, 174)", "comment": "Resizable handle color for table header cells", "name": "tableColorBackgroundHeaderResizableHandle" }, { "scope": "component", "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0", "name": "tableBorderRadius" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "8", "name": "tableCellSpacing" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(68, 68, 68)", "name": "tableColorTextHeader" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color" ], "value": "rgb(116, 116, 116)", "name": "datepickerColorTextDayAdjacentMonth" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Docked panel header’s background color.", "name": "colorBackgroundDockedPanelHeader" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Docked panel’s background color when open.", "name": "colorBackgroundDockedPanel" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "40", "comment": "Height of the docked bar.", "name": "heightDockedBar" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(254, 92, 76)", "comment": "Utility bar notifications badge background color.", "name": "utilityBarColorBackgroundNotificationBadge" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Utility bar notifications focus background color.", "name": "utilityBarColorBackgroundNotificationFocus" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "4", "name": "dropZoneSlotHeight" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Default color for animated icon waffle for app switcher.", "name": "colorBackgroundIconWaffle" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Default background color for a typing icon dot.", "name": "typingIconDotColorBackgroundGray" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Active background color for a typing icon dot when animcating.", "name": "typingIconDotColorBackgroundGrayDark" }, { "scope": "component", "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(1, 68, 134)", "comment": "Brand fill color", "name": "globalActionFillHover" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*width", "*height" ], "value": "24", "comment": "Global action icon size", "name": "globalActionIconSize" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*width", "*height" ], "value": "8", "comment": "Typing icon size", "name": "typingIconDotSize" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/einstein-headers/einstein-header-background.svg", "name": "einsteinHeaderBackground" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/einstein-headers/einstein-figure.svg", "name": "einsteinHeaderFigure" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgb(144, 208, 254)", "comment": "Background color for Einstein header", "name": "einsteinHeaderBackgroundColor" }, { "scope": "component", "type": "shadow", "category": "text-shadow", "cssProperties": [ "text-shadow" ], "value": "#cfe9fe", "comment": "Text shadow color for Einstein header background to make text more readable", "name": "einsteinHeaderTextShadow" }, { "scope": "component", "type": "number", "category": "z-index", "cssProperties": [ "z-index" ], "value": 5, "name": "filesZIndexHover" }, { "scope": "component", "type": "size", "cssProperties": [ "font", "font-size" ], "category": "font-size", "value": "12", "name": "formLabelFontSize" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgb(255, 255, 255)", "comment": "Global Header background color", "name": "globalHeaderColorBackground" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/logo-noname.svg", "name": "brandLogoImage" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "20", "comment": "Global identity icon size.", "name": "squareIconGlobalIdentityIcon" }, { "name": "colorBackgroundContextBarItemHover", "value": "rgb(255, 255, 255)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Hovered context bar item background color." }, { "name": "colorBackgroundContextBarItemActive", "value": "rgb(255, 255, 255)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active context bar item background color." }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default context bar background color.", "name": "colorBackgroundContextBar" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Context TAB bar item background color.", "name": "colorBackgroundContextTabBarItem" }, { "name": "colorBackgroundContextBarInverseItemHover", "value": "rgba(255, 255, 255, 0.2)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Hovered context bar item background color." }, { "name": "colorBackgroundContextBarShadow", "value": "linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 1)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "gradient", "category": "background-color", "comment": "A Gradient used for putting shadows on the bottom when box-shadow is not possible." }, { "name": "colorBackgroundContextBarInverseItemActive", "value": "rgba(255, 255, 255, 0.4)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active context bar item background color." }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(13, 157, 218)", "comment": "Brand color in context bar for default theme", "name": "colorBackgroundContextBarBrandAccent" }, { "name": "colorBackgroundContextBarActionHighlight", "value": "rgba(255, 255, 255, 0.2)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Highlight for context bar action (hover and focus states)." }, { "name": "colorBorderContextBarDivider", "value": "rgba(255, 255, 255, 0.2)", "deprecated": true, "scope": "component", "cssProperties": [ "border*", "box-shadow" ], "type": "color", "category": "border-color", "comment": "Divider in context bar" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0.2)", "comment": "Border color in context bar", "name": "colorBorderContextBarItem" }, { "name": "colorBorderContextBarInverseItem", "value": "rgba(255, 255, 255, 0.2)", "deprecated": true, "scope": "component", "cssProperties": [ "border*", "box-shadow" ], "type": "color", "category": "border-color", "comment": "Border color in context bar on dark background" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(13, 157, 218)", "comment": "Border color in context bar for default theme", "name": "colorBorderContextBarThemeDefault" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Alternate border color in context bar for default theme", "name": "colorBorderContextBarThemeDefaultAlt" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(50, 29, 113)", "comment": "Hovered border color in context bar for default theme", "name": "colorBorderContextBarThemeDefaultHover" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Active border color in context bar for default theme", "name": "colorBorderContextBarThemeDefaultActive" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "40", "comment": "Context bar height.", "name": "heightContextBar" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "3px", "comment": "Context bar tab accent height when tab is active.", "name": "globalnavigationItemHeightAccentActive" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "4px", "comment": "Context bar tab accent height when tab is focused.", "name": "globalnavigationItemHeightAccentFocus" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(68, 68, 68)", "comment": "Context bar text color", "name": "colorTextContextBar" }, { "name": "colorTextContextBarInverse", "value": "rgb(255, 255, 255)", "deprecated": true, "scope": "component", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Context bar text color on a dark background" }, { "name": "colorTextContextBarActionTrigger", "value": "rgba(255, 255, 255, 0.4)", "deprecated": true, "scope": "component", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Context bar action trigger text color" }, { "type": "color", "category": "stroke-color", "cssProperties": [ "stroke", "fill" ], "value": "rgb(144, 208, 254)", "comment": "Primary color for illustrations", "name": "illustrationColorPrimary" }, { "type": "color", "category": "stroke-color", "cssProperties": [ "stroke", "fill" ], "value": "rgb(207, 233, 254)", "comment": "Secondary color for illustrations", "name": "illustrationColorSecondary" }, { "scope": "component", "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "13", "name": "inputStaticFontSize" }, { "scope": "component", "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "name": "inputStaticFontWeight" }, { "scope": "component", "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "name": "inputReadonlyFontWeight" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(24, 24, 24)", "name": "inputStaticColor" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Default Page Header background color", "name": "pageHeaderColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Secondary Page Header background color", "name": "pageHeaderColorBackgroundAlt" }, { "access": "global", "name": "colorBackgroundAnchor", "value": "rgb(243, 243, 243)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Use COLOR_BACKGROUND_PAGE_HEADER instead." }, { "name": "colorBackgroundPageHeader", "value": "rgb(255, 255, 255)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Page Header background color" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0)", "name": "pageHeaderColorBorder" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "name": "pageHeaderJoinedColorBorder" }, { "scope": "component", "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0", "name": "pageHeaderBorderRadius" }, { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "none", "name": "pageHeaderShadow" }, { "scope": "component", "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "name": "pageHeaderTitleFontSize" }, { "scope": "component", "category": "font-weight", "type": "font-weight", "cssProperties": [ "font-weight" ], "value": "400", "name": "pageHeaderTitleFontWeight" }, { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "36", "comment": "Page header Entity Icon size", "name": "pageHeaderIconSize" }, { "name": "pageHeaderSpacingMargin", "value": "0", "deprecated": true, "scope": "component", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "type": "size", "category": "spacing", "comment": "" }, { "name": "pageHeaderSpacingPadding", "value": "16", "deprecated": true, "scope": "component", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "type": "size", "category": "spacing", "comment": "" }, { "name": "pageHeaderSpacingRow", "value": "12", "deprecated": true, "scope": "component", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "type": "size", "category": "spacing", "comment": "" }, { "type": "box-shadow", "category": "shadow",