@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
425 lines • 20.5 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",
};