@salesforce-ux/design-system

{ "properties": [ { "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.", "access": "global", "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.", "access": "global", "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.", "access": "global", "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.", "access": "global", "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.", "access": "global", "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" } ] }