@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
425 lines • 19.9 kB
JavaScript
module.exports = {
// White avatar group background color.
avatarGroupColorBackgroundLightest: "rgb(255, 255, 255)",
// Dark gray avatar group background color.
avatarGroupColorBackgroundInverse: "rgb(116, 116, 116)",
// White badge background color.
badgeColorBackgroundLightest: "rgb(255, 255, 255)",
// Dark gray badge background color.
badgeColorBackgroundInverse: "rgb(116, 116, 116)",
brandBandDefaultImage: "",
brandBandColorBackgroundPrimary: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundPrimaryTransparent: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundSecondary: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundSecondaryTransparent: "rgba(0, 0, 0, 0)",
brandBandImageHeightSmall: "6rem",
brandBandImageHeightMedium: "12.5rem",
brandBandImageHeightLarge: "18.75rem",
brandBandScrimHeight: "3.125rem",
templateGutters: "0",
templateProfileGutters: "0",
buttonIconColorBorderPrimary: "rgb(255, 255, 255)",
buttonIconBoundaryTouch: "2.75rem",
buttonColorBorderPrimary: "rgb(243, 243, 243)",
buttonColorBorderBrandPrimary: "rgb(1, 118, 211)",
buttonColorBorderSecondary: "rgba(255, 255, 255, 0.8)",
buttonBorderRadius: ".25rem",
// Default secondary button - focus state
colorBackgroundButtonDefaultFocus: "rgb(243, 243, 243)",
// Use BRAND_ACCESSIBLE to pick up theming capabilities
buttonColorBackgroundBrandPrimary: "rgb(1, 118, 211)",
// Disabled button backgrounds on inverse/dark backgrounds
colorBackgroundButtonInverseDisabled: "rgba(0, 0, 0, 0)",
// Default secondary button - hover state
colorBackgroundButtonDefaultHover: "rgb(243, 243, 243)",
// Default secondary button
colorBackgroundButtonDefault: "rgb(255, 255, 255)",
// Background color for icon-only button - disabled state
colorBackgroundButtonIconDisabled: "rgb(255, 255, 255)",
// Background color for icon-only button - focus state
colorBackgroundButtonIconFocus: "rgb(243, 243, 243)",
buttonColorBackgroundSecondary: "rgba(255, 255, 255, 0.8)",
// Brandable primary button - disabled state
colorBackgroundButtonBrandDisabled: "rgb(243, 243, 243)",
// Brandable primary button - hover state
colorBackgroundButtonBrandHover: "rgb(1, 68, 134)",
// Active button backgrounds on inverse backgrounds on mobile
colorBackgroundButtonInverseActive: "rgba(0, 0, 0, 0.24)",
// Background color for icon-only button - hover state
colorBackgroundButtonIconHover: "rgb(243, 243, 243)",
// Brandable primary button
colorBackgroundButtonBrand: "rgb(1, 118, 211)",
// Background color for icon-only button
colorBackgroundButtonIcon: "rgba(0, 0, 0, 0)",
// Default secondary button - disabled state
colorBackgroundButtonDefaultDisabled: "rgb(255, 255, 255)",
// Background color for icon-only button - active state
colorBackgroundButtonIconActive: "rgb(243, 243, 243)",
// Brandable primary button - active state
colorBackgroundButtonBrandActive: "rgb(3, 45, 96)",
// Button backgrounds on inverse/dark backgrounds
colorBackgroundButtonInverse: "rgba(0, 0, 0, 0)",
buttonColorBackgroundPrimary: "rgb(255, 255, 255)",
// Default secondary button - active state
colorBackgroundButtonDefaultActive: "rgb(243, 243, 243)",
// Line heights for regular buttons
lineHeightButton: "1.875rem",
// Line heights for small buttons
lineHeightButtonSmall: "1.75rem",
// Line height for touch screens
buttonLineHeightTouch: "2.65rem",
buttonColorTextPrimary: "rgb(255, 255, 255)",
// Default Card component background color.
cardColorBackground: "rgb(255, 255, 255)",
cardColorBorder: "rgb(201, 201, 201)",
cardFooterColorBorder: "rgba(0, 0, 0, 0)",
cardShadow: "none",
// Use for active tab.
cardFontWeight: "400",
//
cardFooterMargin: "0.75rem",
//
cardBodyPadding: "0 1rem",
//
cardWrapperSpacing: "1rem",
//
cardHeaderPadding: "0.75rem 1rem 0",
//
cardSpacingLarge: "1.5rem",
//
cardHeaderMargin: "0 0 0.75rem",
// Use for vertical spacing between cards
cardSpacingMargin: "1rem",
//
cardFooterPadding: "0 1rem 0.75rem",
//
cardSpacingSmall: "0.75rem",
cardFooterTextAlign: "right",
// Default background for carousel card
carouselColorBackground: "rgb(255, 255, 255)",
// Default background for carousel navigation indicators
carouselIndicatorColorBackground: "rgb(255, 255, 255)",
// Default hover background for carousel navigation indicators
carouselIndicatorColorBackgroundHover: "rgb(243, 243, 243)",
// Default focus background for carousel navigation indicators
carouselIndicatorColorBackgroundFocus: "rgb(1, 68, 134)",
// Default background for active state on carousel navigation indicators
carouselIndicatorColorBackgroundActive: "rgb(1, 118, 211)",
// Default width for carousel indicator width
carouselIndicatorWidth: "1rem",
// Inbound chat message background color.
chatMessageColorBackgroundInbound: "rgb(243, 243, 243)",
// Outbound chat message background color.
chatMessageColorBackgroundOutbound: "rgb(1, 68, 134)",
// Outbound agent chat message background color.
chatMessageColorBackgroundOutboundAgent: "rgb(116, 116, 116)",
// Status chat message background color.
chatMessageColorBackgroundStatus: "rgb(255, 255, 255)",
// Line heights for toggle buttons
lineHeightToggle: "1.3rem",
// Slider size for toggle.
squareToggleSlider: "1.25rem",
// Slider width.
widthToggle: "3rem",
// Slider height.
heightToggle: "1.5rem",
colorPickerSliderThumbColorBackground: "rgb(243, 243, 243)",
colorPickerSliderThumbBorderColor: "rgb(68, 68, 68)",
colorPickerSwatchShadow: "inset 0 0 1px rgba(0,0,0,0.4)",
colorPickerInputCustomHexFontSize: "0.75rem",
colorPickerSelectorWidth: "14rem",
colorPickerSwatchesWidth: "13.3rem",
colorPickerRangeHeight: "5rem",
colorPickerSliderHeight: "1.5rem",
colorPickerThumbWidth: "0.375rem",
colorPickerRangeIndicatorSize: "0.75rem",
colorPickerInputCustomHexWidth: "4.2rem",
colorPickerSwatchSize: "1.25rem",
// Alternating row background color for tables
tableColorBackgroundStripes: "rgb(243, 243, 243)",
// Default background color for table headers
tableColorBackgroundHeader: "rgb(255, 255, 255)",
// Hover state for table header cells
tableColorBackgroundHeaderHover: "rgb(243, 243, 243)",
// Focused state for table header cells
tableColorBackgroundHeaderFocus: "rgb(255, 255, 255)",
// Resizable handle color for table header cells
tableColorBackgroundHeaderResizableHandle: "rgb(174, 174, 174)",
tableBorderRadius: "0",
//
tableCellSpacing: "0.5rem",
tableColorTextHeader: "rgb(68, 68, 68)",
datepickerColorTextDayAdjacentMonth: "rgb(116, 116, 116)",
// Docked panel header’s background color.
colorBackgroundDockedPanelHeader: "rgb(255, 255, 255)",
// Docked panel’s background color when open.
colorBackgroundDockedPanel: "rgb(255, 255, 255)",
// Height of the docked bar.
heightDockedBar: "2.5rem",
// Utility bar notifications badge background color.
utilityBarColorBackgroundNotificationBadge: "rgb(254, 92, 76)",
// Utility bar notifications focus background color.
utilityBarColorBackgroundNotificationFocus: "rgb(201, 201, 201)",
dropZoneSlotHeight: "0.25rem",
// Default color for animated icon waffle for app switcher.
colorBackgroundIconWaffle: "rgb(116, 116, 116)",
// Default background color for a typing icon dot.
typingIconDotColorBackgroundGray: "rgb(201, 201, 201)",
// Active background color for a typing icon dot when animcating.
typingIconDotColorBackgroundGrayDark: "rgb(201, 201, 201)",
// Brand fill color
globalActionFillHover: "rgb(1, 68, 134)",
// Global action icon size
globalActionIconSize: "1.5rem",
// Typing icon size
typingIconDotSize: ".5rem",
einsteinHeaderBackground: "/einstein-headers/einstein-header-background.svg",
einsteinHeaderFigure: "/einstein-headers/einstein-figure.svg",
// Background color for Einstein header
einsteinHeaderBackgroundColor: "rgb(144, 208, 254)",
// Text shadow color for Einstein header background to make text more readable
einsteinHeaderTextShadow: "#cfe9fe",
filesZIndexHover: 5,
formLabelFontSize: "0.75rem",
// Global Header background color
globalHeaderColorBackground: "rgb(255, 255, 255)",
brandLogoImage: "/logo-noname.svg",
// Global identity icon size.
squareIconGlobalIdentityIcon: "1.25rem",
// Hovered context bar item background color.
colorBackgroundContextBarItemHover: "rgb(255, 255, 255)",
// Active context bar item background color.
colorBackgroundContextBarItemActive: "rgb(255, 255, 255)",
// Default context bar background color.
colorBackgroundContextBar: "rgb(255, 255, 255)",
// Context TAB bar item background color.
colorBackgroundContextTabBarItem: "rgb(255, 255, 255)",
// Hovered context bar item background color.
colorBackgroundContextBarInverseItemHover: "rgba(255, 255, 255, 0.2)",
// A Gradient used for putting shadows on the bottom when box-shadow is not possible.
colorBackgroundContextBarShadow: "linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)",
// Active context bar item background color.
colorBackgroundContextBarInverseItemActive: "rgba(255, 255, 255, 0.4)",
// Brand color in context bar for default theme
colorBackgroundContextBarBrandAccent: "rgb(13, 157, 218)",
// Highlight for context bar action (hover and focus states).
colorBackgroundContextBarActionHighlight: "rgba(255, 255, 255, 0.2)",
// Divider in context bar
colorBorderContextBarDivider: "rgba(255, 255, 255, 0.2)",
// Border color in context bar
colorBorderContextBarItem: "rgba(0, 0, 0, 0.2)",
// Border color in context bar on dark background
colorBorderContextBarInverseItem: "rgba(255, 255, 255, 0.2)",
// Border color in context bar for default theme
colorBorderContextBarThemeDefault: "rgb(13, 157, 218)",
// Alternate border color in context bar for default theme
colorBorderContextBarThemeDefaultAlt: "rgb(243, 243, 243)",
// Hovered border color in context bar for default theme
colorBorderContextBarThemeDefaultHover: "rgb(50, 29, 113)",
// Active border color in context bar for default theme
colorBorderContextBarThemeDefaultActive: "rgb(243, 243, 243)",
// Context bar height.
heightContextBar: "2.5rem",
// Context bar tab accent height when tab is active.
globalnavigationItemHeightAccentActive: "3px",
// Context bar tab accent height when tab is focused.
globalnavigationItemHeightAccentFocus: "4px",
// Context bar text color
colorTextContextBar: "rgb(68, 68, 68)",
// Context bar text color on a dark background
colorTextContextBarInverse: "rgb(255, 255, 255)",
// Context bar action trigger text color
colorTextContextBarActionTrigger: "rgba(255, 255, 255, 0.4)",
// Primary color for illustrations
illustrationColorPrimary: "rgb(144, 208, 254)",
// Secondary color for illustrations
illustrationColorSecondary: "rgb(207, 233, 254)",
inputStaticFontSize: "0.8125rem",
inputStaticFontWeight: "400",
inputReadonlyFontWeight: "400",
inputStaticColor: "rgb(24, 24, 24)",
// Default Page Header background color
pageHeaderColorBackground: "rgb(243, 243, 243)",
// Secondary Page Header background color
pageHeaderColorBackgroundAlt: "rgb(255, 255, 255)",
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
colorBackgroundAnchor: "rgb(243, 243, 243)",
// Page Header background color
colorBackgroundPageHeader: "rgb(255, 255, 255)",
pageHeaderColorBorder: "rgba(0, 0, 0, 0)",
pageHeaderJoinedColorBorder: "rgb(201, 201, 201)",
pageHeaderBorderRadius: "0",
pageHeaderShadow: "none",
pageHeaderTitleFontSize: "1.125rem",
pageHeaderTitleFontWeight: "400",
// Page header Entity Icon size
pageHeaderIconSize: "2.25rem",
//
pageHeaderSpacingMargin: "0",
//
pageHeaderSpacingPadding: "1rem",
//
pageHeaderSpacingRow: "0.75rem 1rem",
// Dropshadow found on docked UI panels when positioned to the left of a viewport
panelDockedLeftShadow: "1px 0 3px rgba(0,0,0,0.25)",
// Dropshadow found on docked UI panels when positioned to the left of a viewport
panelDockedRightShadow: "-1px 0 3px 0 rgba(0,0,0,0.25)",
// The hover background color for Salespath stages that have not been completed.
colorBackgroundPathIncompleteHover: "rgb(201, 201, 201)",
// The background color for the step action arrow that are the active stage
colorBackgroundPathStepActionActive: "rgb(0, 22, 57)",
// The background color for Salespath stages that have not been completed.
colorBackgroundPathIncomplete: "rgb(243, 243, 243)",
// The hover background color for Salespath stages that are the active stage.
colorBackgroundPathActiveHover: "rgb(3, 45, 96)",
// The background color for the final stage of a Salespath when it has been lost.
colorBackgroundPathLost: "rgb(234, 0, 30)",
// The background color for Salespath stages that are the active stage.
colorBackgroundPathActive: "rgb(1, 68, 134)",
// The background color for Salespath guidance coaching section.
colorBackgroundGuidance: "rgb(255, 255, 255)",
// The background color for the final stage of a Salespath when it has been lost.
colorBackgroundPathWon: "rgb(46, 132, 74)",
// The hover background color for Salespath stages that are the current stage.
colorBackgroundPathCurrentHover: "rgb(255, 255, 255)",
// The background color for Salespath stages that are the current stage.
colorBackgroundPathCurrent: "rgb(255, 255, 255)",
// The hover background color for Salespath stages that are complete.
colorBackgroundPathCompleteHover: "rgb(46, 132, 74)",
// The background color for Salespath stages that are complete.
colorBackgroundPathComplete: "rgb(59, 167, 85)",
// The background color for the step action arrow that are the current stage
colorBackgroundPathStepActionCurrent: "rgb(1, 68, 134)",
// The background color for the overall Salespath coaching section.
colorBackgroundPathExpanded: "rgb(255, 255, 255)",
// Used as a separator between dark colors like the stages of salespath.
colorBorderPathDivider: "rgb(255, 255, 255)",
// Used as a border color for the active Path step.
colorBorderPathCurrent: "rgb(1, 68, 134)",
// Used as a border color for the current path step on hover.
colorBorderPathCurrentHover: "rgb(3, 45, 96)",
// Line heights for salespath
lineHeightSalespath: "1.5rem",
// Height of Path
heightSalesPath: "2rem",
// Width of action button to right
pathButtonWidthFixed: "13rem",
// Border width of current stage for path item
widthPathBorderCurrent: "0.125rem",
// Used as a text color for the active Path step.
colorTextPathCurrent: "rgb(1, 68, 134)",
// Used as a text hover color for the active Path step.
colorTextPathCurrentHover: "rgb(3, 45, 96)",
// The default background color for Popover Walkthrough
popoverWalkthroughColorBackground: "rgb(0, 22, 57)",
// The default background color for Popover Walkthrough Header
popoverWalkthroughHeaderColorBackground: "rgb(3, 45, 96)",
// The default background color for alternative Popover Walkthrough
popoverWalkthroughColorBackgroundAlt: "rgb(1, 118, 211)",
popoverWalkthroughHeaderImage: "",
popoverWalkthroughAltImage: "",
// The background color for nubbins on the bottom of alternate walkthrough popovers
popoverWalkthroughAltNubbinColorBackground: "rgb(1, 118, 211)",
// Tooltip nubbin square size
nubbinSizeDefault: "1rem",
// Tooltip nubbin offset for branded popovers
nubbinTriangleOffset: "-0.1875rem",
// The default border width for Branded Popover
popoverBrandBorderWidth: "0.25rem",
// Text color for step counter in walkthrough variant of popovers
popoverColorText: "rgb(201, 201, 201)",
// The default background color for Progress Indicator
progressColorBackground: "rgb(255, 255, 255)",
// The shaded background color for Progress Indicator
progressColorBackgroundShade: "rgb(243, 243, 243)",
// The background color for the Progress Bar
progressBarColorBackground: "rgb(201, 201, 201)",
// The background color of the fill for the Progress Bar
progressBarColorBackgroundFill: "rgb(26, 185, 255)",
// The success background color of the fill for the Progress Bar
progressBarColorBackgroundFillSuccess: "rgb(46, 132, 74)",
// Borders of each indicator item within the Progress Indicator
progressColorBorder: "rgb(255, 255, 255)",
// Shaded borders of each indicator item within the Progress Indicator
progressColorBorderShade: "rgb(243, 243, 243)",
// Hovered border color of each indicator item within the Progress Indicator
progressColorBorderHover: "rgb(1, 118, 211)",
// Active border color of each indicator item within the Progress Indicator
progressColorBorderActive: "rgb(27, 150, 255)",
// Height of the Progress Bar
progressBarHeight: "0.125rem",
// Inner color for progress ring component
colorBackgroundProgressRingContent: "rgb(255, 255, 255)",
// Thickness of the Progress Ring's ring
progressRingWidth: "0.1875rem",
// Line height for touch screens
radioButtonGroupLineHeightTouch: "2.69rem",
// Dark notification component background color.
notificationColorBackgroundInverse: "rgb(116, 116, 116)",
sliderHandleColorBackground: "rgb(27, 150, 255)",
sliderHandleColorBackgroundHover: "rgb(1, 118, 211)",
sliderHandleColorBackgroundFocus: "rgb(1, 118, 211)",
sliderHandleColorBackgroundActive: "rgb(1, 118, 211)",
sliderTrackColorBackground: "rgb(243, 243, 243)",
sliderTrackColorBackgroundFill: "rgb(27, 150, 255)",
sliderColorBackgroundDisabled: "rgb(243, 243, 243)",
sliderHandleShadow: "rgba(0, 0, 0, 0.16) 0 2px 3px",
//
sliderHandleSize: "1rem",
//
sliderTrackHeight: "4px",
//
sliderTrackWidth: "100%",
// Spinner size for xx-small modifier
spinnerSizeXxSmall: "0.5rem",
// Spinner size for x-small modifier
spinnerSizeXSmall: "1rem",
// Spinner size for small modifier
spinnerSizeSmall: "1.25rem",
// Spinner size for medium modifier
spinnerSizeMedium: "2rem",
// Spinner size for large modifier
spinnerSizeLarge: "2.75rem",
// Split View background color.
splitViewColorBackground: "rgb(243, 243, 243)",
// Split View background color on row hover.
splitViewColorBackgroundRowHover: "rgb(255, 255, 255)",
// Row dividers in Split View list
splitViewColorBorder: "rgb(201, 201, 201)",
// Default width for split view container
splitViewWidth: "25rem",
// Use for active tab.
tabsFontWeight: "400",
// Vertical navigation shaded background color on row hover.
verticalNavigationColorBackgroundShadeRowHover: "rgb(243, 243, 243)",
// Vertical navigation shaded background color on row active.
verticalNavigationColorBackgroundShadeRowActive: "rgb(243, 243, 243)",
// Text color for the Info section
welcomeMatTextColorInfo: "rgb(3, 45, 96)",
// Background Image Path for the Welcome Mat Info section
welcomeMatBackgroundImageInfo: "/welcome-mat/bg-info@2x.png",
// Background overflow color for the Welcome Mat Info section
welcomeMatBackgroundColorInfo: "rgb(207, 233, 254)",
// Progress Bar background is white
welcomeMatColorBackgroundProgressBar: "rgb(255, 255, 255)",
// Box Shadow declaration
welcomeMatColorActionShadow: "rgba(0, 0, 0, 0.05)",
// Completed icon color for the Welcome Mat Boxes
welcomeMatColorIconComplete: "rgb(201, 201, 201)",
// Font size for the info title
welcomeMatFontSizeInfoTitle: "2.625rem",
// Welcome Mat Width
welcomeMatWidth: "52.0625rem",
// Min height for Overlay
welcomeMatMinHeight: "25rem",
// Max height for Overlay
welcomeMatMaxHeight: "37.5rem",
// Welcome Mat Progress Bar width
welcomeMatWidthProgressBar: "12.5rem",
// Size of the green completed check mark
welcomeMatCompleteIconSize: "1.25rem",
// Size of the check mark in the green icon
welcomeMatCheckSize: "0.625rem",
// Bottom spacing (safe area) for background image
welcomeMatSpacingInfo: "7.75rem",
};