@salesforce-ux/design-system

{ "properties": [ { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgba(8, 7, 7, 0.6)", "comment": "The color of the mask overlay that appears when you enter a modal state.", "name": "colorBackgroundTempModalTint" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgba(253, 253, 253, 0)", "comment": "Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_DARK_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug", "name": "brandBandColorBackgroundSecondaryTransparent" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(243, 242, 242)", "comment": "Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.", "name": "colorBackgroundAlt2" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(236, 235, 234)", "comment": "Hover color for utility bar item.", "name": "colorBackgroundUtilityBarHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(243, 242, 242)", "comment": "Use COLOR_BACKGROUND_PAGE_HEADER instead.", "name": "colorBackgroundAnchor" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(243, 242, 242)", "name": "colorBackgroundPrimary" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(62, 62, 60)", "comment": "Color for UI elements related to the offline state.", "name": "colorBackgroundOffline" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(253, 253, 253)", "comment": "Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_DARK instead.", "name": "brandBandColorBackgroundSecondary" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgba(253, 253, 253, 0)", "comment": "Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug", "name": "brandBandColorBackgroundPrimaryTransparent" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(243, 242, 242)", "name": "colorContrastSecondary" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(112, 110, 107)", "comment": "Secondary top bar background color (child browser, file preview, etc.)", "name": "colorBackgroundBrowser" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(150, 148, 146)", "comment": "Used as the default background color for temporary dialog elements, such as the progress spinner background.", "name": "colorBackgroundTempModal" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(250, 250, 249)", "comment": "Background color for payloads in the feed.", "name": "colorBackgroundPayload" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(253, 253, 253)", "comment": "Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.", "name": "pageColorBackgroundPrimary" }, { "name": "colorBackgroundShadeDark", "value": "rgb(221, 219, 218)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "specificity": "builders", "category": "background-color", "comment": "Used as gray background in conjunction with Shade when more contrast is desired." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(112, 110, 107)", "comment": "Background for utility icons that live in the action bar on mobile.", "name": "colorBackgroundActionbarIconUtility" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(253, 253, 253)", "comment": "Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.", "name": "brandBandColorBackgroundPrimary" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "deprecated": true, "value": "rgb(255, 255, 255)", "name": "colorBackgroundSecondary" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "stroke" ], "deprecated": true, "value": "rgb(0, 112, 210)", "comment": "Our product brand blue.", "name": "colorStrokeBrand" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "stroke" ], "deprecated": true, "value": "rgb(0, 112, 210)", "comment": "Hover stroke color for our product brand blue.", "name": "colorStrokeBrandHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "stroke" ], "deprecated": true, "value": "rgb(22, 50, 92)", "comment": "Active stroke color for our product brand blue.", "name": "colorStrokeBrandActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "stroke" ], "deprecated": true, "value": "rgb(236, 235, 234)", "comment": "Disabled stroke color.", "name": "colorStrokeDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "stroke" ], "deprecated": true, "value": "rgb(176, 173, 171)", "comment": "Stroke color for our global header buttons.", "name": "colorStrokeHeaderButton" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "rgba(0, 0, 0, 0.10) 0 2px 0", "comment": "Hard dropshadow found on general UI elements such as containers", "name": "shadowHardPrimary" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "rgba(0, 0, 0, 0.10) 0 2px 2px", "comment": "Soft dropshadow found on general UI elements such as containers", "name": "shadowSoftPrimary" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "rgba(0, 0, 0, 0.20) 0 3px 6px", "name": "shadowSoftPrimaryHover" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "rgba(0, 0, 0, 0.20) 0 1px 1px", "name": "shadowSoftPrimaryActive" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "margin*", "padding*" ], "deprecated": true, "value": "12", "name": "cardSpacingMargin" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "margin*", "padding*" ], "deprecated": true, "value": "12", "name": "cardFooterPadding" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(236, 235, 234)", "comment": "Color for text on toast messages.", "name": "colorTextToast" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(62, 62, 60)", "comment": "Modal header button text color", "name": "colorTextModalButton" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(236, 235, 234)", "comment": "Text in stage left navigation.", "name": "colorTextStageLeft" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(236, 235, 234)", "comment": "Used as the background color for the active state on rows or items on list-like components.", "name": "colorBackgroundRowActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Light variant of COLOR_BACKGROUND.", "release": "2.8.0", "name": "colorBackgroundLight" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "comment": "Used as the background color for the hover state on rows or items on list-like components.", "name": "colorBackgroundRowHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(112, 110, 107)", "comment": "Background color for UI elements related to providing neutral information (not error, success, or warning).", "name": "colorBackgroundInfo" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "comment": "Used as background for loading stencils on white background.", "name": "colorBackgroundStencil" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "comment": "Default background color for the whole app.", "name": "colorBackground" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(236, 235, 234)", "comment": "Light variant of COLOR_BACKGROUND.", "release": "2.8.0", "name": "colorBackgroundDark" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(236, 235, 234)", "comment": "Used as an alternate background for loading stencils on gray backgrounds.", "name": "colorBackgroundStencilAlt" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(236, 235, 234)", "comment": "Used as the background color for selected rows or items on list-like components.", "name": "colorBackgroundRowSelected" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "background*" ], "value": "rgb(221, 219, 218)", "comment": "Default border color for UI elements.", "access": "global", "name": "colorBorder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 242, 242)", "comment": "Lightest separator color - used as default separator on white backgrounds.", "access": "global", "name": "colorBorderSeparator" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "comment": "Medium separator color - used as default separator on light gray backgrounds.", "access": "global", "name": "colorBorderSeparatorAlt" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 199, 197)", "comment": "Darkest separator color - used as an alternate separator color when more differentiation is desired.", "access": "global", "name": "colorBorderSeparatorAlt2" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(112, 110, 107)", "comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).", "name": "colorBorderInfo" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(62, 62, 60)", "comment": "Border color for UI elements related to the offline state.", "name": "colorBorderOffline" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 242, 242)", "specificity": "builders", "comment": "Used to delineate the boundary of a component that is being clicked. Specific to builders.", "name": "colorBorderSelectionActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(62, 62, 60)", "comment": "Action label text color", "access": "global", "name": "colorTextActionLabel" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(8, 7, 7)", "comment": "Action label active text color", "access": "global", "name": "colorTextActionLabelActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(8, 7, 7)", "comment": "Body text color", "access": "global", "name": "colorTextDefault" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(8, 7, 7)", "comment": "Primary body text color", "name": "colorTextPrimary" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(62, 62, 60)", "comment": "Color for text that is purposefully de-emphasized to create visual hierarchy.", "access": "global", "name": "colorTextWeak" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(236, 235, 234)", "comment": "Input placeholder text on dark backgrounds.", "name": "colorTextPlaceholderInverse" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(0, 109, 204)", "comment": "Link text (508)", "access": "global", "name": "colorTextLink" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(112, 110, 107)", "comment": "Default icon color.", "name": "colorTextIconDefault" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Inverse text color for dark backgrounds", "access": "global", "name": "colorTextInverse" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(62, 62, 60)", "comment": "Input placeholder text.", "access": "global", "name": "colorTextPlaceholder" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(176, 173, 171)", "comment": "Weak inverse text color for dark backgrounds", "access": "global", "name": "colorTextInverseWeak" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(62, 62, 60)", "comment": "Text color for field labels.", "name": "colorTextLabel" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "comment": "Background color for a new notification list item.", "name": "colorBackgroundNotificationNew" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "name": "colorContrastPrimary" }, { "type": "string", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "/assets/images/popovers/popover-header.png", "name": "popoverWalkthroughHeaderImage" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(236, 235, 234)", "comment": "Disabled input", "name": "colorBackgroundInputDisabled" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(150, 148, 146)", "comment": "Hovered toggle background color.", "name": "colorBackgroundToggleHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(3, 46, 97)", "name": "popoverWalkthroughColorBackground" }, { "type": "string", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "/assets/images/popovers/popover-action.png", "name": "popoverWalkthroughAltImage" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "name": "progressColorBorderShade" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(176, 173, 171)", "comment": "Toggle background color.", "name": "colorBackgroundToggle" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(33, 92, 160)", "name": "popoverWalkthroughAltNubbinColorBackground" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "name": "progressColorBackgroundShade" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "comment": "Default Page Header background color", "name": "pageHeaderColorBackground" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(221, 219, 218)", "comment": "Disabled checkboxes", "name": "colorBackgroundInputCheckboxDisabled" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(176, 173, 171)", "comment": "Color of the spinner dot.", "name": "colorBackgroundSpinnerDot" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(255, 255, 255)", "name": "tableColorBackgroundHeaderHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(250, 250, 249)", "comment": "The color of the mask overlay that provides user feedback on interaction.", "name": "colorBackgroundBackdropTint" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(22, 74, 133)", "name": "popoverWalkthroughColorBackgroundAlt" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(250, 250, 249)", "name": "tableColorBackgroundHeader" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(236, 235, 234)", "comment": "The background color of an internal scrollbar.", "name": "colorBackgroundScrollbar" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(176, 173, 171)", "comment": "Disabled toggle background color.", "name": "colorBackgroundToggleDisabled" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(112, 110, 107)", "comment": "Background color for toast messaging.", "name": "colorBackgroundToast" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "comment": "Background color of comment posts in the feed.", "name": "colorBackgroundPost" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgba(0, 0, 0, 0.6)", "comment": "Color of mask overlay that sits on top of an image when text is present.", "name": "colorBackgroundImageOverlay" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(236, 235, 234)", "specificity": "builders", "comment": "Used as gray background when more contrast is desired.", "name": "colorBackgroundShade" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(243, 242, 242)", "name": "colorPickerSliderThumbColorBackground" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(201, 199, 197)", "comment": "The background color of an internal scrollbar track.", "name": "colorBackgroundScrollbarTrack" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(22, 74, 133)", "name": "popoverWalkthroughHeaderColorBackground" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 199, 197)", "comment": "Border color on disabled form elements.", "name": "colorBorderInputDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(236, 235, 234)", "comment": "Border color on notification reminders.", "name": "colorBorderReminder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "name": "pageHeaderColorBorder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "name": "colorBorderPrimary" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "comment": "Border color for default secondary button", "name": "colorBorderButtonDefault" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "comment": "Border color on form elements.", "name": "colorBorderInput" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(236, 235, 234)", "name": "colorBorderButtonFocusInverse" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "name": "cardColorBorder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "name": "buttonColorBorderPrimary" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(236, 235, 234)", "name": "colorBorderLinkFocusInverse" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "name": "pageHeaderJoinedColorBorder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(221, 219, 218)", "name": "cardFooterColorBorder" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "4", "name": "pageHeaderBorderRadius" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0", "name": "tableBorderRadius" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 0 3px #ecebea", "comment": "Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.", "name": "shadowButtonFocusInverse" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 0 3px #ecebea", "comment": "Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.", "name": "shadowLinkFocusInverse" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 2px 0 rgba(0, 0, 0, 0.10)", "comment": "Hard dropshadow on page header", "name": "pageHeaderShadow" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 2px 0 rgba(0, 0, 0, 0.10)", "comment": "Hard dropshadow found on outer cards", "name": "cardShadow" }, { "category": "font", "type": "font-size", "cssProperties": [ "font-size" ], "value": "12", "name": "formLabelFontSize" }, { "category": "font", "type": "font-size", "cssProperties": [ "font-size" ], "value": "14", "name": "inputStaticFontSize" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "name": "inputStaticFontWeight" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "700", "comment": "Use for active tab.", "name": "tabsFontWeight" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "700", "comment": "Use for active tab.", "name": "cardFontWeight" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "700", "name": "pageHeaderTitleFontWeight" }, { "category": "utility", "type": "string", "value": "/assets/images/themes/oneSalesforce/banner-brand-default.png", "name": "brandBandDefaultImage" }, { "category": "utility", "type": "string", "value": "/assets/images/themes/oneSalesforce/banner-user-default.png", "name": "bannerUserDefaultImage" }, { "category": "utility", "type": "string", "value": "/assets/images/themes/oneSalesforce/banner-group-public-default.png", "name": "bannerGroupDefaultImage" }, { "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "12", "name": "componentSpacingMargin" }, { "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "16", "name": "componentSpacingPadding" }, { "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "12", "name": "templateGutters" }, { "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "128", "name": "templateProfileGutters" }, { "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "4", "name": "tableCellSpacing" }, { "category": "text", "type": "text-align", "cssProperties": [ "text-align" ], "value": "center", "name": "cardFooterTextAlign" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Icon color on dark background", "name": "colorTextIconInverse" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(176, 173, 171)", "comment": "Input icon", "name": "colorTextInputIcon" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Icon color on dark background - active state", "name": "colorTextIconInverseActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(236, 235, 234)", "comment": "Color for disabled text in a tab group.", "name": "colorTextTabLabelDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(62, 62, 60)", "comment": "Input disabled text", "name": "colorTextInputDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(150, 148, 146)", "comment": "Tertiary body text color", "name": "colorTextTertiary" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(221, 219, 218)", "comment": "Default icon color - disabled state", "name": "colorTextIconDefaultDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(94, 180, 255)", "comment": "Active state on a standalone link on a dark background.", "name": "colorTextInverseActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(236, 235, 234)", "comment": "Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "name": "colorTextIconDefaultHintBorderless" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(221, 219, 218)", "comment": "Text color for default secondary button - disabled state", "name": "colorTextButtonDefaultDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(221, 219, 218)", "comment": "Color for disabled toggles", "name": "colorTextToggleDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(176, 173, 171)", "comment": "Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "name": "colorTextIconDefaultHint" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(176, 173, 171)", "comment": "Hover state on a standalone link on a dark background.", "name": "colorTextInverseHover" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(236, 235, 234)", "comment": "Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "name": "colorTextButtonInverse" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(176, 173, 171)", "comment": "Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "name": "colorTextButtonDefaultHint" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(176, 173, 171)", "comment": "Color for interactive utility icons", "name": "colorTextIconUtility" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Icon color on dark background - hover state", "name": "colorTextIconInverseHover" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(62, 62, 60)", "comment": "Secondary body text color", "name": "colorTextSecondary" } ] }