@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
58 lines • 2.96 kB
JavaScript
module.exports = {
// Used as the background color for the active state on rows or items on list-like components.
colorBackgroundRowActive: "rgb(236, 235, 234)",
// Light variant of COLOR_BACKGROUND.
colorBackgroundLight: "rgb(255, 255, 255)",
// Used as the background color for the hover state on rows or items on list-like components.
colorBackgroundRowHover: "rgb(243, 242, 242)",
// Background color for UI elements related to providing neutral information (not error, success, or warning).
colorBackgroundInfo: "rgb(112, 110, 107)",
// Used as background for loading stencils on white background.
colorBackgroundStencil: "rgb(243, 242, 242)",
// Default background color for the whole app.
colorBackground: "rgb(243, 242, 242)",
// Light variant of COLOR_BACKGROUND.
colorBackgroundDark: "rgb(236, 235, 234)",
// Used as an alternate background for loading stencils on gray backgrounds.
colorBackgroundStencilAlt: "rgb(236, 235, 234)",
// Used as the background color for selected rows or items on list-like components.
colorBackgroundRowSelected: "rgb(236, 235, 234)",
// Default border color for UI elements.
colorBorder: "rgb(221, 219, 218)",
// Lightest separator color - used as default separator on white backgrounds.
colorBorderSeparator: "rgb(243, 242, 242)",
// Medium separator color - used as default separator on light gray backgrounds.
colorBorderSeparatorAlt: "rgb(221, 219, 218)",
// Darkest separator color - used as an alternate separator color when more differentiation is desired.
colorBorderSeparatorAlt2: "rgb(201, 199, 197)",
// Border color for UI elements related to providing neutral information (not error, success, or warning).
colorBorderInfo: "rgb(112, 110, 107)",
// Border color for UI elements related to the offline state.
colorBorderOffline: "rgb(62, 62, 60)",
// Used to delineate the boundary of a component that is being clicked. Specific to builders.
colorBorderSelectionActive: "rgb(243, 242, 242)",
// Action label text color
colorTextActionLabel: "rgb(62, 62, 60)",
// Action label active text color
colorTextActionLabelActive: "rgb(8, 7, 7)",
// Body text color
colorTextDefault: "rgb(8, 7, 7)",
// Primary body text color
colorTextPrimary: "rgb(8, 7, 7)",
// Color for text that is purposefully de-emphasized to create visual hierarchy.
colorTextWeak: "rgb(62, 62, 60)",
// Input placeholder text on dark backgrounds.
colorTextPlaceholderInverse: "rgb(236, 235, 234)",
// Link text (508)
colorTextLink: "rgb(0, 109, 204)",
// Default icon color.
colorTextIconDefault: "rgb(112, 110, 107)",
// Inverse text color for dark backgrounds
colorTextInverse: "rgb(255, 255, 255)",
// Input placeholder text.
colorTextPlaceholder: "rgb(62, 62, 60)",
// Weak inverse text color for dark backgrounds
colorTextInverseWeak: "rgb(176, 173, 171)",
// Text color for field labels.
colorTextLabel: "rgb(62, 62, 60)",
};