@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
238 lines • 12.9 kB
JavaScript
module.exports = {
// The color of the mask overlay that appears when you enter a modal state.
colorBackgroundTempModalTint: "rgba(8, 7, 7, 0.6)",
// 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
brandBandColorBackgroundSecondaryTransparent: "rgba(253, 253, 253, 0)",
// Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
colorBackgroundAlt2: "rgb(243, 242, 242)",
// Hover color for utility bar item.
colorBackgroundUtilityBarHover: "rgb(236, 235, 234)",
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
colorBackgroundAnchor: "rgb(243, 242, 242)",
colorBackgroundPrimary: "rgb(243, 242, 242)",
// Color for UI elements related to the offline state.
colorBackgroundOffline: "rgb(62, 62, 60)",
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_DARK instead.
brandBandColorBackgroundSecondary: "rgb(253, 253, 253)",
// 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
brandBandColorBackgroundPrimaryTransparent: "rgba(253, 253, 253, 0)",
colorContrastSecondary: "rgb(243, 242, 242)",
// Secondary top bar background color (child browser, file preview, etc.)
colorBackgroundBrowser: "rgb(112, 110, 107)",
// Used as the default background color for temporary dialog elements, such as the progress spinner background.
colorBackgroundTempModal: "rgb(150, 148, 146)",
// Background color for payloads in the feed.
colorBackgroundPayload: "rgb(250, 250, 249)",
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
pageColorBackgroundPrimary: "rgb(253, 253, 253)",
// Used as gray background in conjunction with Shade when more contrast is desired.
colorBackgroundShadeDark: "rgb(221, 219, 218)",
// Background for utility icons that live in the action bar on mobile.
colorBackgroundActionbarIconUtility: "rgb(112, 110, 107)",
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
brandBandColorBackgroundPrimary: "rgb(253, 253, 253)",
colorBackgroundSecondary: "rgb(255, 255, 255)",
// Our product brand blue.
colorStrokeBrand: "rgb(0, 112, 210)",
// Hover stroke color for our product brand blue.
colorStrokeBrandHover: "rgb(0, 112, 210)",
// Active stroke color for our product brand blue.
colorStrokeBrandActive: "rgb(22, 50, 92)",
// Disabled stroke color.
colorStrokeDisabled: "rgb(236, 235, 234)",
// Stroke color for our global header buttons.
colorStrokeHeaderButton: "rgb(176, 173, 171)",
// Hard dropshadow found on general UI elements such as containers
shadowHardPrimary: "rgba(0, 0, 0, 0.10) 0 2px 0",
// Soft dropshadow found on general UI elements such as containers
shadowSoftPrimary: "rgba(0, 0, 0, 0.10) 0 2px 2px",
shadowSoftPrimaryHover: "rgba(0, 0, 0, 0.20) 0 3px 6px",
shadowSoftPrimaryActive: "rgba(0, 0, 0, 0.20) 0 1px 1px",
//
cardSpacingMargin: "0.75rem",
//
cardFooterPadding: "0.75rem 1rem",
// Color for text on toast messages.
colorTextToast: "rgb(236, 235, 234)",
// Modal header button text color
colorTextModalButton: "rgb(62, 62, 60)",
// Text in stage left navigation.
colorTextStageLeft: "rgb(236, 235, 234)",
// 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)",
// Background color for a new notification list item.
colorBackgroundNotificationNew: "rgb(243, 242, 242)",
colorContrastPrimary: "rgb(243, 242, 242)",
popoverWalkthroughHeaderImage: "/assets/images/popovers/popover-header.png",
// Disabled input
colorBackgroundInputDisabled: "rgb(236, 235, 234)",
// Hovered toggle background color.
colorBackgroundToggleHover: "rgb(150, 148, 146)",
popoverWalkthroughColorBackground: "rgb(3, 46, 97)",
popoverWalkthroughAltImage: "/assets/images/popovers/popover-action.png",
progressColorBorderShade: "rgb(243, 242, 242)",
// Toggle background color.
colorBackgroundToggle: "rgb(176, 173, 171)",
popoverWalkthroughAltNubbinColorBackground: "rgb(33, 92, 160)",
progressColorBackgroundShade: "rgb(243, 242, 242)",
// Default Page Header background color
pageHeaderColorBackground: "rgb(243, 242, 242)",
// Disabled checkboxes
colorBackgroundInputCheckboxDisabled: "rgb(221, 219, 218)",
// Color of the spinner dot.
colorBackgroundSpinnerDot: "rgb(176, 173, 171)",
tableColorBackgroundHeaderHover: "rgb(255, 255, 255)",
// The color of the mask overlay that provides user feedback on interaction.
colorBackgroundBackdropTint: "rgb(250, 250, 249)",
popoverWalkthroughColorBackgroundAlt: "rgb(22, 74, 133)",
tableColorBackgroundHeader: "rgb(250, 250, 249)",
// The background color of an internal scrollbar.
colorBackgroundScrollbar: "rgb(236, 235, 234)",
// Disabled toggle background color.
colorBackgroundToggleDisabled: "rgb(176, 173, 171)",
// Background color for toast messaging.
colorBackgroundToast: "rgb(112, 110, 107)",
// Background color of comment posts in the feed.
colorBackgroundPost: "rgb(243, 242, 242)",
// Color of mask overlay that sits on top of an image when text is present.
colorBackgroundImageOverlay: "rgba(0, 0, 0, 0.6)",
// Used as gray background when more contrast is desired.
colorBackgroundShade: "rgb(236, 235, 234)",
colorPickerSliderThumbColorBackground: "rgb(243, 242, 242)",
// The background color of an internal scrollbar track.
colorBackgroundScrollbarTrack: "rgb(201, 199, 197)",
popoverWalkthroughHeaderColorBackground: "rgb(22, 74, 133)",
// Border color on disabled form elements.
colorBorderInputDisabled: "rgb(201, 199, 197)",
// Border color on notification reminders.
colorBorderReminder: "rgb(236, 235, 234)",
pageHeaderColorBorder: "rgb(221, 219, 218)",
colorBorderPrimary: "rgb(221, 219, 218)",
// Border color for default secondary button
colorBorderButtonDefault: "rgb(221, 219, 218)",
// Border color on form elements.
colorBorderInput: "rgb(221, 219, 218)",
colorBorderButtonFocusInverse: "rgb(236, 235, 234)",
cardColorBorder: "rgb(221, 219, 218)",
buttonColorBorderPrimary: "rgb(221, 219, 218)",
colorBorderLinkFocusInverse: "rgb(236, 235, 234)",
pageHeaderJoinedColorBorder: "rgb(221, 219, 218)",
cardFooterColorBorder: "rgb(221, 219, 218)",
pageHeaderBorderRadius: "0.25rem",
tableBorderRadius: "0 0 0.25rem 0.25rem",
// Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.
shadowButtonFocusInverse: "0 0 3px #ecebea",
// Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.
shadowLinkFocusInverse: "0 0 3px #ecebea",
// Hard dropshadow on page header
pageHeaderShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.10)",
// Hard dropshadow found on outer cards
cardShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.10)",
formLabelFontSize: "0.75rem",
inputStaticFontSize: "0.875rem",
inputStaticFontWeight: "400",
// Use for active tab.
tabsFontWeight: "700",
// Use for active tab.
cardFontWeight: "700",
pageHeaderTitleFontWeight: "700",
brandBandDefaultImage: "/assets/images/themes/oneSalesforce/banner-brand-default.png",
bannerUserDefaultImage: "/assets/images/themes/oneSalesforce/banner-user-default.png",
bannerGroupDefaultImage: "/assets/images/themes/oneSalesforce/banner-group-public-default.png",
componentSpacingMargin: "0.75rem",
componentSpacingPadding: "1rem",
templateGutters: "0.75rem",
templateProfileGutters: "8rem 0.75rem 0.75rem",
tableCellSpacing: "0.25rem 0.5rem",
cardFooterTextAlign: "center",
// Icon color on dark background
colorTextIconInverse: "rgb(255, 255, 255)",
// Input icon
colorTextInputIcon: "rgb(176, 173, 171)",
// Icon color on dark background - active state
colorTextIconInverseActive: "rgb(255, 255, 255)",
// Color for disabled text in a tab group.
colorTextTabLabelDisabled: "rgb(236, 235, 234)",
// Input disabled text
colorTextInputDisabled: "rgb(62, 62, 60)",
// Tertiary body text color
colorTextTertiary: "rgb(150, 148, 146)",
// Default icon color - disabled state
colorTextIconDefaultDisabled: "rgb(221, 219, 218)",
// Active state on a standalone link on a dark background.
colorTextInverseActive: "rgb(94, 180, 255)",
// 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.
colorTextIconDefaultHintBorderless: "rgb(236, 235, 234)",
// Text color for default secondary button - disabled state
colorTextButtonDefaultDisabled: "rgb(221, 219, 218)",
// Color for disabled toggles
colorTextToggleDisabled: "rgb(221, 219, 218)",
// 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.
colorTextIconDefaultHint: "rgb(176, 173, 171)",
// Hover state on a standalone link on a dark background.
colorTextInverseHover: "rgb(176, 173, 171)",
// 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.
colorTextButtonInverse: "rgb(236, 235, 234)",
// 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.
colorTextButtonDefaultHint: "rgb(176, 173, 171)",
// Color for interactive utility icons
colorTextIconUtility: "rgb(176, 173, 171)",
// Icon color on dark background - hover state
colorTextIconInverseHover: "rgb(255, 255, 255)",
// Secondary body text color
colorTextSecondary: "rgb(62, 62, 60)",
};