@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
501 lines • 22.2 kB
JavaScript
module.exports = {
// Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.
fontFamily: "'Salesforce Sans', Arial, sans-serif",
// Used as the background color for the active state on rows or items on list-like components.
colorBackgroundRowActive: "rgb(242, 242, 243)",
// 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(249, 249, 250)",
// Dark color for UI elements related to errors. Accessible with white text.
colorBackgroundErrorDark: "rgb(194, 57, 52)",
// Background color for UI elements related to providing neutral information (not error, success, or warning).
colorBackgroundInfo: "rgb(107, 109, 112)",
// Alternative background color for dark portions of the app.
colorBackgroundAltInverse: "rgb(22, 50, 92)",
// Used as the background color for the new state on rows or items on list-like components.
colorBackgroundRowNew: "rgb(217, 255, 223)",
// Dark color for UI elements that have to do with success. Accessible with white text.
colorBackgroundSuccessDark: "rgb(4, 132, 75)",
// Used as background for loading stencils on white background.
colorBackgroundStencil: "rgb(242, 242, 243)",
// Color for UI elements that have to do with warning.
colorBackgroundWarning: "rgb(255, 183, 93)",
// Background color for highlighting text in search results.
colorBackgroundHighlightSearch: "rgb(255, 240, 63)",
// Hover color for UI elements related to destructive actions.
colorBackgroundDestructiveHover: "rgb(166, 26, 20)",
// Default background color for the whole app.
colorBackground: "rgb(249, 249, 250)",
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
colorBrandDark: "rgb(0, 112, 210)",
// The color of the mask overlay that appears when you enter a modal state.
colorBackgroundBackdrop: "rgba(255, 255, 255, 0.75)",
// Light variant of COLOR_BACKGROUND.
colorBackgroundDark: "rgb(233, 234, 236)",
// Our product brand blue.
colorBrand: "rgb(21, 137, 238)",
// Color for UI elements related to destructive actions.
colorBackgroundDestructive: "rgb(194, 57, 52)",
// Color for UI elements that have to do with success.
colorBackgroundSuccess: "rgb(75, 202, 129)",
// Dark Color for UI elements that have to do with warning.
colorBackgroundWarningDark: "rgb(255, 158, 44)",
// Color for UI elements related to the offline state.
colorBackgroundOffline: "rgb(62, 64, 65)",
// Used as an alternate background for loading stencils on gray backgrounds.
colorBackgroundStencilAlt: "rgb(233, 234, 236)",
// Light variant of COLOR_BACKGROUND_INVERSE.
colorBackgroundInverseLight: "rgb(22, 50, 92)",
// Background color for UI elements related to the concept of an external user or customer.
colorBackgroundCustomer: "rgb(255, 154, 60)",
// Color for UI elements related to errors.
colorBackgroundError: "rgb(212, 80, 76)",
// Second default background color for the app.
colorBackgroundAlt: "rgb(255, 255, 255)",
// Darker color for UI elements that have to do with success. Accessible with white text.
colorBackgroundSuccessDarker: "rgb(0, 74, 41)",
// Used as the background color for selected rows or items on list-like components.
colorBackgroundRowSelected: "rgb(233, 234, 236)",
// Our product brand blue, darkened even further.
colorBrandDarker: "rgb(0, 95, 178)",
// Background color for text selected with a mouse.
colorBackgroundSelection: "rgb(216, 237, 255)",
// Active color for UI elements related to destructive actions.
colorBackgroundDestructiveActive: "rgb(135, 5, 0)",
// Default background color for dark portions of the app (like Stage Left or tooltips).
colorBackgroundInverse: "rgb(6, 28, 63)",
// Background color for highlighting UI elements.
colorBackgroundHighlight: "rgb(250, 255, 189)",
// Dark alternative border color for UI elements related to errors.
colorBorderErrorDark: "rgb(234, 130, 136)",
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
colorBorderBrandDark: "rgb(0, 112, 210)",
// Border color for UI elements related to providing neutral information (not error, success, or warning).
colorBorderInfo: "rgb(107, 109, 112)",
// Border color for UI elements that have to do with warnings.
colorBorderWarning: "rgb(255, 183, 93)",
// Hover border color for UI elements that have to do with destructive actions.
colorBorderDestructiveHover: "rgb(166, 26, 20)",
// Default border color for UI elements.
colorBorder: "rgb(217, 219, 221)",
// Dark alternative border color for UI elements that have to do with success.
colorBorderSuccessDark: "rgb(4, 132, 75)",
// Border color for UI elements that have to do with destructive actions.
colorBorderDestructive: "rgb(194, 57, 52)",
// Darkest separator color - used as an alternate separator color when more differentiation is desired.
colorBorderSeparatorAlt2: "rgb(196, 198, 202)",
// Border color for UI elements related to the offline state.
colorBorderOffline: "rgb(62, 64, 65)",
// Border color for UI elements that have to do with success.
colorBorderSuccess: "rgb(75, 202, 129)",
// Lightest separator color - used as default separator on white backgrounds.
colorBorderSeparator: "rgb(249, 249, 250)",
// Our product brand blue.
colorBorderBrand: "rgb(21, 137, 238)",
// Used to delineate the boundary of a component that is being clicked. Specific to builders.
colorBorderSelectionActive: "rgb(249, 249, 250)",
// Border color for UI elements that have to do with errors.
colorBorderError: "rgb(194, 57, 52)",
// Used to delineate the boundary of a component that is being hovered over. Specific to builders.
colorBorderSelectionHover: "rgb(21, 137, 238)",
// Used as the border color for the hover state on selected rows or items on list-like components.
colorBorderRowSelectedHover: "rgb(21, 137, 238)",
// Border color for UI elements related to the concept of an external user or customer.
colorBorderCustomer: "rgb(255, 154, 60)",
// Used to delineate the boundary of a selected component. Specific to builders.
colorBorderSelection: "rgb(0, 112, 210)",
// Used as the border color for selected rows or items on list-like components.
colorBorderRowSelected: "rgb(0, 112, 210)",
// Medium separator color - used as default separator on light gray backgrounds.
colorBorderSeparatorAlt: "rgb(217, 219, 221)",
// Border color to match UI elements using color-background-inverse.
colorBorderInverse: "rgb(6, 28, 63)",
// Active border color for UI elements that have to do with destructive actions.
colorBorderDestructiveActive: "rgb(135, 5, 0)",
// Alternative border color for UI elements related to errors.
colorBorderErrorAlt: "rgb(234, 130, 136)",
// Used as a separator on dark backgrounds, such as stage left navigation.
colorBorderSeparatorInverse: "rgb(42, 66, 108)",
borderRadiusSmall: "0.125rem",
// Icons in lists, record home icon, unbound input elements
borderRadiusMedium: "0.25rem",
borderRadiusLarge: "0.5rem",
borderRadiusPill: "15rem",
// Circle for global use, action icon bgd shape
borderRadiusCircle: "50%",
// Shadow for drag-n-drop.
shadowDrag: "0 2px 4px 0 rgba(0, 0, 0, 0.40)",
// Shadow for drop down.
shadowDropDown: "0 2px 3px 0 rgba(0, 0, 0, 0.16)",
// Shadow for header.
shadowHeader: "0 2px 4px rgba(0, 0, 0, 0.07)",
fontFamilyText: "'Salesforce Sans', Arial, sans-serif",
fontFamilyHeading: "'Salesforce Sans', Arial, sans-serif",
fontFamilyMonospace: "Consolas, Menlo, Monaco, Courier, monospace",
// Constant typography token for font size 1
fontSize1: "0.625rem",
// Constant typography token for font size 2
fontSize2: "0.75rem",
// Constant typography token for font size 3
fontSize3: "0.8125rem",
// Variable typography token for font size 10
varFontSize10: "2rem",
// Constant typography token for font size 4
fontSize4: "0.875rem",
// Variable typography token for font size 11
varFontSize11: "2.625rem",
// Constant typography token for font size 5
fontSize5: "1rem",
// Constant typography token for font size 6
fontSize6: "1.125rem",
// Constant typography token for font size 7
fontSize7: "1.25rem",
// Constant typography token for font size 8
fontSize8: "1.5rem",
// Variable typography token for font size 1
varFontSize1: "0.625rem",
// Constant typography token for font size 9
fontSize9: "1.75rem",
// Variable typography token for font size 2
varFontSize2: "0.75rem",
// Variable typography token for font size 3
varFontSize3: "0.8125rem",
// Constant typography token for font size 10
fontSize10: "2rem",
// Variable typography token for font size 4
varFontSize4: "0.875rem",
// Constant typography token for font size 11
fontSize11: "2.625rem",
// Variable typography token for font size 5
varFontSize5: "1rem",
// Variable typography token for font size 6
varFontSize6: "1.125rem",
// Variable typography token for font size 7
varFontSize7: "1.25rem",
// Variable typography token for font size 8
varFontSize8: "1.5rem",
// Variable typography token for font size 9
varFontSize9: "1.75rem",
// Use for large headings only.
fontWeightLight: "300",
// Most all body copy.
fontWeightRegular: "400",
// Used sparingly for emphasized text within regular body copy.
fontWeightBold: "700",
illustrationEmptyStateAssistant: "/assets/images/illustrations/empty-state-assistant.svg",
illustrationEmptyStateEvents: "/assets/images/illustrations/empty-state-events.svg",
illustrationEmptyStateTasks: "/assets/images/illustrations/empty-state-tasks.svg",
// Unitless line-heights for reusability
lineHeightHeading: "1.25",
// Unitless line-heights for reusability
lineHeightText: "1.5",
// Remove extra leading. Unitless line-heights for reusability
lineHeightReset: "1",
// Line heights for tabs
lineHeightTab: "2.5rem",
// Variable unitless line-heights for reusability
varLineHeightText: "1.5",
// 50% transparency of an element
opacity5: "0.5",
// 80% transparency of an element
opacity8: "0.8",
// Disabled state of BRAND_HEADER_CONTRAST_WEAK
brandHeaderContrastWeakDisabled: "rgba(166, 166, 166, 0.25)",
// Gray Color 11
colorGray11: "rgb(62, 62, 60)",
// Transparent value of BRAND_PRIMARY at 10%
brandPrimaryTransparent10: "rgba(21, 137, 238, 0.1)",
// Gray Color 12
colorGray12: "rgb(43, 40, 38)",
// These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug
brandBackgroundDarkTransparent: "rgba(221, 219, 218, 0)",
// Gray Color 13
colorGray13: "rgb(8, 7, 7)",
// Background color a branded app header
brandHeader: "rgb(255, 255, 255)",
// Active / Hover state of BRAND_LIGHT
brandLightActive: "rgb(227, 229, 237)",
// Variant of BRAND_HEADER_CONTRAST that provides a warm color
brandHeaderContrastWarm: "rgb(191, 2, 1)",
// Disabled state of BRAND_HEADER_ICON
brandHeaderIconDisabled: "rgba(145, 145, 145, 0.25)",
// Active / Hover state of BRAND_HEADER_CONTRAST
brandHeaderContrastActive: "rgb(80, 80, 80)",
// Primary page background color
brandBackgroundPrimary: "rgb(250, 250, 249)",
// Primary brand color
brandPrimary: "rgb(21, 137, 238)",
// Active / Hover state of BRAND_HEADER_CONTRAST_WEAK
brandHeaderContrastWeakActive: "rgb(129, 129, 129)",
// Active / Hover state of BRAND_CONTRAST
brandContrastActive: "rgb(13, 14, 18)",
// Variant of BRAND_HEADER_CONTRAST that provides a cool color
brandHeaderContrastCool: "rgb(0, 85, 131)",
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
brandHeaderContrastInverse: "rgb(255, 255, 255)",
// Dark variant of BRAND that is accessible with light colors
brandDark: "rgb(24, 35, 55)",
// Dark variant of BRAND that is accessible with white
brandAccessible: "rgb(0, 112, 210)",
// Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color
brandBackgroundDark: "rgb(232, 232, 232)",
// Active / Hover state of BRAND_TEXT_LINK
brandTextLinkActive: "rgb(0, 95, 178)",
// Gray Color 1
colorGray1: "rgb(255, 255, 255)",
// Gray Color 2
colorGray2: "rgb(250, 250, 249)",
// Active / Hover state of BRAND_HEADER_ICON
brandHeaderIconActive: "rgb(129, 129, 129)",
// Gray Color 3
colorGray3: "rgb(243, 242, 242)",
// Icons of BRAND_HEADER that is accessible with BRAND_HEADER
brandHeaderIcon: "rgb(145, 145, 145)",
// Disabled state of BRAND_A11Y
brandDisabled: "rgb(201, 199, 197)",
// Primary text link brand color
brandTextLink: "rgb(0, 109, 204)",
// Gray Color 4
colorGray4: "rgb(236, 235, 234)",
// Gray Color 5
colorGray5: "rgb(221, 219, 218)",
// Gray Color 6
colorGray6: "rgb(201, 199, 197)",
// Active / Hover state of BRAND_A11Y
brandAccessibleActive: "rgb(0, 95, 178)",
// Gray Color 7
colorGray7: "rgb(176, 173, 171)",
// Active / Hover state of BRAND_DARK
brandDarkActive: "rgb(37, 48, 69)",
// Gray Color 8
colorGray8: "rgb(150, 148, 146)",
// Active / Hover state of BRAND_HEADER_CONTRAST
brandHeaderContrastInverseActive: "rgb(238, 238, 238)",
// Active / Hover state of BRAND_HEADER_CONTRAST_COOL
brandHeaderContrastCoolActive: "rgb(0, 85, 131)",
// Gray Color 9
colorGray9: "rgb(112, 110, 107)",
// Variant of BRAND that is accessible with BRAND
brandContrast: "rgb(26, 27, 30)",
// Weak contrast ratio, useful for iconography
brandHeaderContrastWeak: "rgb(145, 145, 145)",
// Active / Hover state of BRAND_PRIMARY
brandPrimaryActive: "rgb(0, 122, 221)",
// These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug
brandBackgroundPrimaryTransparent: "rgba(250, 250, 249, 0)",
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
brandHeaderContrast: "rgb(94, 94, 94)",
// Transparent value of BRAND_PRIMARY
brandPrimaryTransparent: "rgba(21, 137, 238, 0.1)",
// Active / Hover state of BRAND_HEADER_CONTRAST_WARM
brandHeaderContrastWarmActive: "rgb(172, 0, 0)",
// Transparent value of BRAND_PRIMARY at 40%
brandPrimaryTransparent40: "rgba(21, 137, 238, 0.4)",
// Light variant of BRAND that is accessible with dark colors
brandLight: "rgb(244, 246, 254)",
// Gray Color 10
colorGray10: "rgb(81, 79, 77)",
// Generic sizing token scale for UI components.
sizeXSmall: "12rem",
// Generic sizing token scale for UI components.
sizeXxxSmall: "3rem",
// Large utility icon without border.
squareIconUtilityLarge: "1.5rem",
// Generic sizing token scale for UI components.
sizeXxSmall: "6rem",
// Search Results: Outer colored tile
squareIconSmallBoundary: "1.5rem",
// Generic sizing token scale for UI components.
sizeSmall: "15rem",
// Medium utility icon without border.
squareIconUtilityMedium: "1.25rem",
// Very small icon button boundary.
squareIconXSmallBoundary: "1.25rem",
// Small utility icon without border.
squareIconUtilitySmall: "1rem",
// Stage left & actions: Outer colored tile
squareIconMediumBoundary: "2rem",
// Anchor: Icon content (white shape)
squareIconLargeContent: "2rem",
// Anchor: Outer colored tile
squareIconLargeBoundary: "3rem",
// Generic sizing token scale for UI components.
sizeMedium: "20rem",
// Stage left & actions: Icon content (white shape)
squareIconMediumContent: "1rem",
// Generic sizing token scale for UI components.
sizeXLarge: "40rem",
// Very small icons in icon buttons.
squareIconXSmallContent: "0.5rem",
// Variable medium boundary for square icons
varSquareIconMediumBoundary: "2rem",
// Icon button boundary.
squareIconMediumBoundaryAlt: "2.25rem",
// Generic sizing token scale for UI components.
sizeXxLarge: "60rem",
// Anchor: avatar
squareIconLargeBoundaryAlt: "5rem",
// Generic sizing token scale for UI components.
sizeLarge: "25rem",
// Search Results: Icon content (white shape)
squareIconSmallContent: "0.75rem",
// Very very small icon button boundary.
squareIconXxSmallBoundary: "1rem",
// Alternate medium tap target size
squareIconMediumContentAlt: "0.875rem",
// Variable spacing token for size X Large
varSpacingXLarge: "2rem",
// Variable horizontal spacing token for size Small
varSpacingHorizontalSmall: "0.75rem",
// Variable horizontal spacing token for size XX Large
varSpacingHorizontalXxLarge: "3rem",
// Constant spacing token for size X small
spacingXSmall: "0.5rem",
// Constant spacing token for size XXX small
spacingXxxSmall: "0.125rem",
// Constant spacing token for size XX small
spacingXxSmall: "0.25rem",
//
borderWidthThin: "1px",
// Variable vertical spacing token for size Large
varSpacingVerticalLarge: "1.5rem",
// Variable spacing token for size Large
varSpacingLarge: "1.5rem",
// Variable spacing token for size Medium
varSpacingMedium: "1rem",
// Variable vertical spacing token for size Medium
varSpacingVerticalMedium: "1rem",
// Variable vertical spacing token for size X Small
varSpacingVerticalXSmall: "0.5rem",
// Constant spacing token for size Small
spacingSmall: "0.75rem",
// Variable vertical spacing token for size XXX Small
varSpacingVerticalXxxSmall: "0.125rem",
// Variable spacing token for size X Small
varSpacingXSmall: "0.5rem",
// Variable spacing token for size XXX Small
varSpacingXxxSmall: "0.125rem",
// Variable horizontal spacing token for size X Large
varSpacingHorizontalXLarge: "2rem",
// Variable horizontal spacing token for size XX Small
varSpacingHorizontalXxSmall: "0.25rem",
// Variable spacing token for size XX Large
varSpacingXxLarge: "3rem",
//
borderWidthThick: "2px",
// Constant spacing token for size Medium
spacingMedium: "1rem",
// Variable vertical spacing token for size XX Large
varSpacingVerticalXxLarge: "3rem",
// Variable vertical spacing token for size Small
varSpacingVerticalSmall: "0.75rem",
// Variable spacing token for size Small
varSpacingSmall: "0.75rem",
// Constant spacing token for 0
spacingNone: "0",
// Variable horizontal spacing token for size Large
varSpacingHorizontalLarge: "1.5rem",
// Constant spacing token for size X Large
spacingXLarge: "2rem",
// Constant spacing token for size XX Large
spacingXxLarge: "3rem",
// Variable horizontal spacing token for size XXX Small
varSpacingHorizontalXxxSmall: "0.125rem",
// Variable horizontal spacing token for size X Small
varSpacingHorizontalXSmall: "0.5rem",
// Variable spacing token for size XX Small
varSpacingXxSmall: "0.25rem",
// Variable horizontal spacing token for size Medium
varSpacingHorizontalMedium: "1rem",
// Variable vertical spacing token for size XX Small
varSpacingVerticalXxSmall: "0.25rem",
// Variable vertical spacing token for size X Large
varSpacingVerticalXLarge: "2rem",
// Constant spacing token for size Large
spacingLarge: "1.5rem",
// Action label text color
colorTextActionLabel: "rgb(107, 109, 112)",
// Link color on dark background
colorTextLinkInverse: "rgb(255, 255, 255)",
// Link color on dark background - active state
colorTextLinkInverseActive: "rgba(255, 255, 255, 0.5)",
// Action label active text color
colorTextActionLabelActive: "rgb(22, 50, 92)",
// Color for texts or icons that are related to warnings on a dark background.
colorTextWarning: "rgb(255, 183, 93)",
// Focus link text
colorTextLinkFocus: "rgb(0, 95, 178)",
// Text color for destructive actions - hover state
colorTextDestructiveHover: "rgb(161, 43, 43)",
// Disabled link text
colorTextLinkDisabled: "rgb(22, 50, 92)",
// Body text color
colorTextDefault: "rgb(22, 50, 92)",
// Primary body text color
colorTextPrimary: "rgb(22, 50, 92)",
// Text color for destructive actions
colorTextDestructive: "rgb(194, 57, 52)",
// Hover link text
colorTextLinkHover: "rgb(0, 95, 178)",
// Text color for success text.
colorTextSuccess: "rgb(2, 126, 70)",
// Color for text that is purposefully de-emphasized to create visual hierarchy.
colorTextWeak: "rgb(107, 109, 112)",
// Link text (508)
colorTextLink: "rgb(0, 112, 210)",
// Color for texts that are related to warnings on a light background.
colorTextWarningAlt: "rgb(132, 72, 0)",
// Default icon color.
colorTextIconDefault: "rgb(107, 109, 112)",
// Our product brand blue.
colorTextBrand: "rgb(21, 137, 238)",
// Error text for inputs and error misc
colorTextError: "rgb(194, 57, 52)",
// Customer text used in anchor subtitle
colorTextCustomer: "rgb(255, 154, 60)",
// Text color found on any primary brand color
colorTextBrandPrimary: "rgb(255, 255, 255)",
// Active link text
colorTextLinkActive: "rgb(0, 57, 107)",
// Color of required field marker.
colorTextRequired: "rgb(194, 57, 52)",
// Link color on dark background - disabled state
colorTextLinkInverseDisabled: "rgba(255, 255, 255, 0.15)",
// Inverse text color for dark backgrounds
colorTextInverse: "rgb(255, 255, 255)",
// Input placeholder text.
colorTextPlaceholder: "rgb(107, 109, 112)",
// Weak inverse text color for dark backgrounds
colorTextInverseWeak: "rgb(171, 173, 176)",
// Link color on dark background - hover state
colorTextLinkInverseHover: "rgba(255, 255, 255, 0.75)",
// Text color for success text on dark backgrounds.
colorTextSuccessInverse: "rgb(75, 202, 129)",
// Text color for field labels.
colorTextLabel: "rgb(107, 109, 112)",
// Dropdown
zIndexDropdown: "7000",
// Docked element
zIndexDocked: "4",
// Notifications under modals
zIndexReminder: "8500",
// Spinner
zIndexSpinner: "9050",
// Default
zIndexDefault: "1",
// Deep dive
zIndexDeepdive: "-99999",
// Toasts
zIndexToast: "10000",
// Dialog
zIndexDialog: "6000",
// Popup
zIndexPopup: "5000",
// Modal
zIndexModal: "9000",
// Stickied element
zIndexSticky: "100",
// Overlay
zIndexOverlay: "8000",
};