{
  "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"
    }
  ]
}