@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
421 lines • 20.4 kB
JavaScript
module.exports = {
/* White avatar group background color. */
avatarGroupColorBackgroundLightest: "rgb(255, 255, 255)",
/* Dark gray avatar group background color. */
avatarGroupColorBackgroundInverse: "rgb(112, 110, 107)",
/* White badge background color. */
badgeColorBackgroundLightest: "rgb(255, 255, 255)",
/* Dark gray badge background color. */
badgeColorBackgroundInverse: "rgb(112, 110, 107)",
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(216, 221, 230)",
buttonColorBorderBrandPrimary: "rgb(0, 112, 210)",
buttonColorBorderSecondary: "rgba(255, 255, 255, 0.8)",
buttonBorderRadius: ".25rem",
/* Default secondary button - focus state */
colorBackgroundButtonDefaultFocus: "rgb(244, 246, 249)",
/* Use BRAND_ACCESSIBLE to pick up theming capabilities */
buttonColorBackgroundBrandPrimary: "rgb(0, 112, 210)",
/* Disabled button backgrounds on inverse/dark backgrounds */
colorBackgroundButtonInverseDisabled: "rgba(0, 0, 0, 0)",
/* Default secondary button - hover state */
colorBackgroundButtonDefaultHover: "rgb(244, 246, 249)",
/* 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(244, 246, 249)",
buttonColorBackgroundSecondary: "rgba(255, 255, 255, 0.8)",
/* Brandable primary button - disabled state */
colorBackgroundButtonBrandDisabled: "rgb(224, 229, 238)",
/* Brandable primary button - hover state */
colorBackgroundButtonBrandHover: "rgb(0, 95, 178)",
/* 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(244, 246, 249)",
/* Brandable primary button */
colorBackgroundButtonBrand: "rgb(0, 112, 210)",
/* 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(238, 241, 246)",
/* Brandable primary button - active state */
colorBackgroundButtonBrandActive: "rgb(0, 57, 107)",
/* Button backgrounds on inverse/dark backgrounds */
colorBackgroundButtonInverse: "rgba(0, 0, 0, 0)",
buttonColorBackgroundPrimary: "rgb(255, 255, 255)",
/* Default secondary button - active state */
colorBackgroundButtonDefaultActive: "rgb(238, 241, 246)",
/* 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(221, 219, 218)",
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(250, 250, 249)",
/* Default focus background for carousel navigation indicators */
carouselIndicatorColorBackgroundFocus: "rgb(0, 95, 178)",
/* Default background for active state on carousel navigation indicators */
carouselIndicatorColorBackgroundActive: "rgb(0, 112, 210)",
/* Default width for carousel indicator width */
carouselIndicatorWidth: "1rem",
/* Inbound chat message background color. */
chatMessageColorBackgroundInbound: "rgb(242, 242, 243)",
/* Outbound chat message background color. */
chatMessageColorBackgroundOutbound: "rgb(0, 95, 178)",
/* Outbound agent chat message background color. */
chatMessageColorBackgroundOutboundAgent: "rgb(107, 109, 112)",
/* 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(250, 250, 249)",
colorPickerSliderThumbBorderColor: "rgb(81, 79, 77)",
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(250, 250, 249)",
/* Default background color for table headers */
tableColorBackgroundHeader: "rgb(255, 255, 255)",
/* Hover state for table header cells */
tableColorBackgroundHeaderHover: "rgb(250, 250, 249)",
/* Focused state for table header cells */
tableColorBackgroundHeaderFocus: "rgb(255, 255, 255)",
/* Resizable handle color for table header cells */
tableColorBackgroundHeaderResizableHandle: "rgb(176, 173, 171)",
tableBorderRadius: "0",
/* */
tableCellSpacing: "0.5rem",
tableColorTextHeader: "rgb(81, 79, 77)",
datepickerColorTextDayAdjacentMonth: "rgb(112, 110, 107)",
/* 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(212, 80, 76)",
/* Utility bar notifications focus background color. */
utilityBarColorBackgroundNotificationFocus: "rgb(201, 199, 197)",
dropZoneSlotHeight: "0.25rem",
/* Default color for animated icon waffle for app switcher. */
colorBackgroundIconWaffle: "rgb(112, 110, 107)",
/* Default background color for a typing icon dot. */
typingIconDotColorBackgroundGray: "rgb(221, 219, 218)",
/* Active background color for a typing icon dot when animcating. */
typingIconDotColorBackgroundGrayDark: "rgb(201, 199, 197)",
/* Brand fill color */
globalActionFillHover: "rgb(0, 112, 210)",
/* Global action icon size */
globalActionIconSize: "1.5rem",
/* Typing icon size */
typingIconDotSize: ".5rem",
einsteinHeaderBackground: "/assets/images/einstein-headers/einstein-header-background.svg",
einsteinHeaderFigure: "/assets/images/einstein-headers/einstein-figure.svg",
/* Background color for Einstein header */
einsteinHeaderBackgroundColor: "rgb(149, 203, 252)",
/* Text shadow color for Einstein header background to make text more readable */
einsteinHeaderTextShadow: "#9EDAFF",
filesZIndexHover: 5,
formLabelFontSize: "0.75rem",
/* Global Header background color */
globalHeaderColorBackground: "rgb(255, 255, 255)",
brandLogoImage: "/assets/images/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(0, 161, 223)",
/* 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(0, 161, 223)",
/* Alternate border color in context bar for default theme */
colorBorderContextBarThemeDefaultAlt: "rgb(243, 242, 242)",
/* Hovered border color in context bar for default theme */
colorBorderContextBarThemeDefaultHover: "rgb(11, 35, 153)",
/* Active border color in context bar for default theme */
colorBorderContextBarThemeDefaultActive: "rgb(243, 242, 242)",
/* 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(62, 62, 60)",
/* 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(140, 211, 248)",
/* Secondary color for illustrations */
illustrationColorSecondary: "rgb(194, 232, 255)",
inputStaticFontSize: "0.8125rem",
inputStaticFontWeight: "400",
inputReadonlyFontWeight: "400",
inputStaticColor: "rgb(8, 7, 7)",
/* Default Page Header background color */
pageHeaderColorBackground: "rgb(250, 250, 249)",
/* Secondary Page Header background color */
pageHeaderColorBackgroundAlt: "rgb(255, 255, 255)",
/* Use COLOR_BACKGROUND_PAGE_HEADER instead. */
colorBackgroundAnchor: "rgb(250, 250, 249)",
/* Page Header background color */
colorBackgroundPageHeader: "rgb(255, 255, 255)",
pageHeaderColorBorder: "rgba(0, 0, 0, 0)",
pageHeaderJoinedColorBorder: "rgb(221, 219, 218)",
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(221, 219, 218)",
/* The background color for the step action arrow that are the active stage */
colorBackgroundPathStepActionActive: "rgb(6, 28, 63)",
/* The background color for Salespath stages that have not been completed. */
colorBackgroundPathIncomplete: "rgb(236, 235, 234)",
/* The hover background color for Salespath stages that are the active stage. */
colorBackgroundPathActiveHover: "rgb(0, 57, 107)",
/* The background color for the final stage of a Salespath when it has been lost. */
colorBackgroundPathLost: "rgb(194, 57, 52)",
/* The background color for Salespath stages that are the active stage. */
colorBackgroundPathActive: "rgb(0, 95, 178)",
/* 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(4, 132, 75)",
/* 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(4, 132, 75)",
/* The background color for Salespath stages that are complete. */
colorBackgroundPathComplete: "rgb(75, 202, 129)",
/* The background color for the step action arrow that are the current stage */
colorBackgroundPathStepActionCurrent: "rgb(0, 95, 178)",
/* 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(0, 95, 178)",
/* Used as a border color for the current path step on hover. */
colorBorderPathCurrentHover: "rgb(0, 57, 107)",
/* 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(0, 95, 178)",
/* Used as a text hover color for the active Path step. */
colorTextPathCurrentHover: "rgb(0, 57, 107)",
/* The default background color for Popover Walkthrough */
popoverWalkthroughColorBackground: "rgb(6, 28, 63)",
/* The default background color for Popover Walkthrough Header */
popoverWalkthroughHeaderColorBackground: "rgb(22, 50, 92)",
/* The default background color for alternative Popover Walkthrough */
popoverWalkthroughColorBackgroundAlt: "rgb(0, 112, 210)",
popoverWalkthroughHeaderImage: "",
popoverWalkthroughAltImage: "",
/* The background color for nubbins on the bottom of alternate walkthrough popovers */
popoverWalkthroughAltNubbinColorBackground: "rgb(0, 112, 210)",
/* Tooltip nubbin square size */
nubbinSizeDefault: "1rem",
/* Text color for step counter in walkthrough variant of popovers */
popoverColorText: "rgb(217, 219, 221)",
/* The default background color for Progress Indicator */
progressColorBackground: "rgb(255, 255, 255)",
/* The shaded background color for Progress Indicator */
progressColorBackgroundShade: "rgb(250, 250, 249)",
/* The background color for the Progress Bar */
progressBarColorBackground: "rgb(221, 219, 218)",
/* The background color of the fill for the Progress Bar */
progressBarColorBackgroundFill: "rgb(94, 180, 255)",
/* The success background color of the fill for the Progress Bar */
progressBarColorBackgroundFillSuccess: "rgb(75, 202, 129)",
/* 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(250, 250, 249)",
/* Hovered border color of each indicator item within the Progress Indicator */
progressColorBorderHover: "rgb(0, 112, 210)",
/* Active border color of each indicator item within the Progress Indicator */
progressColorBorderActive: "rgb(21, 137, 238)",
/* 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(112, 110, 107)",
sliderHandleColorBackground: "rgb(21, 137, 238)",
sliderHandleColorBackgroundHover: "rgb(0, 112, 210)",
sliderHandleColorBackgroundFocus: "rgb(0, 112, 210)",
sliderHandleColorBackgroundActive: "rgb(0, 112, 210)",
sliderTrackColorBackground: "rgb(236, 235, 234)",
sliderTrackColorBackgroundFill: "rgb(21, 137, 238)",
sliderColorBackgroundDisabled: "rgb(236, 235, 234)",
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(250, 250, 249)",
/* Split View background color on row hover. */
splitViewColorBackgroundRowHover: "rgb(255, 255, 255)",
/* Row dividers in Split View list */
splitViewColorBorder: "rgb(221, 219, 218)",
/* 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, 242, 242)",
/* Vertical navigation shaded background color on row active. */
verticalNavigationColorBackgroundShadeRowActive: "rgb(236, 235, 234)",
/* Text color for the Info section */
welcomeMatTextColorInfo: "rgb(0, 57, 107)",
/* Background Image Path for the Welcome Mat Info section */
welcomeMatBackgroundImageInfo: "/assets/images/welcome-mat/bg-info@2x.png",
/* Background overflow color for the Welcome Mat Info section */
welcomeMatBackgroundColorInfo: "rgb(202, 230, 241)",
/* 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, 199, 197)",
/* 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",
};