@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
160 lines • 8.15 kB
JavaScript
module.exports = {
// Brandable primary button
colorBackgroundButtonBrand: "rgb(0, 112, 210)",
// Brandable primary button - active state
colorBackgroundButtonBrandActive: "rgb(0, 57, 107)",
// Brandable primary button - hover state
colorBackgroundButtonBrandHover: "rgb(0, 95, 178)",
// Brandable primary button - disabled state
colorBackgroundButtonBrandDisabled: "rgb(224, 229, 238)",
// Default secondary button
colorBackgroundButtonDefault: "rgb(255, 255, 255)",
// Default secondary button - hover state
colorBackgroundButtonDefaultHover: "rgb(244, 246, 249)",
// Default secondary button - focus state
colorBackgroundButtonDefaultFocus: "rgb(244, 246, 249)",
// Default secondary button - active state
colorBackgroundButtonDefaultActive: "rgb(238, 241, 246)",
// Default secondary button - disabled state
colorBackgroundButtonDefaultDisabled: "rgb(255, 255, 255)",
// Background color for icon-only button
colorBackgroundButtonIcon: "rgba(0, 0, 0, 0)",
// Background color for icon-only button - hover state
colorBackgroundButtonIconHover: "rgb(244, 246, 249)",
// Background color for icon-only button - focus state
colorBackgroundButtonIconFocus: "rgb(244, 246, 249)",
// Background color for icon-only button - active state
colorBackgroundButtonIconActive: "rgb(238, 241, 246)",
// Background color for icon-only button - disabled state
colorBackgroundButtonIconDisabled: "rgb(255, 255, 255)",
// Button backgrounds on inverse/dark backgrounds
colorBackgroundButtonInverse: "rgba(0, 0, 0, 0)",
// Active button backgrounds on inverse backgrounds on mobile
colorBackgroundButtonInverseActive: "rgba(0, 0, 0, 0.24)",
// Disabled button backgrounds on inverse/dark backgrounds
colorBackgroundButtonInverseDisabled: "rgba(0, 0, 0, 0)",
// Line heights for regular buttons
lineHeightButton: "1.875rem",
// Line heights for small buttons
lineHeightButtonSmall: "1.75rem",
// Default Card component background color.
cardColorBackground: "rgb(255, 255, 255)",
cardSpacingSmall: "0.75rem",
cardSpacingMedium: "1rem",
cardSpacingLarge: "1.5rem",
// Line heights for toggle buttons
lineHeightToggle: "1.3rem",
// Slider size for toggle.
squareToggleSlider: "1.25rem",
// Slider width.
widthToggle: "3rem",
// Slider height.
heightToggle: "1.5rem",
tableSpacingXSmall: "0.5rem",
// Docked panel header’s background color.
colorBackgroundDockedPanelHeader: "rgb(247, 249, 251)",
// 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(168, 183, 199)",
// Default color for animated icon waffle for app switcher.
colorBackgroundIconWaffle: "rgb(84, 105, 141)",
// Global identity icon size.
squareIconGlobalIdentityIcon: "1.25rem",
// Default context bar background color.
colorBackgroundContextBar: "rgb(255, 255, 255)",
// Brand color in context bar for default theme
colorBackgroundContextBarBrandAccent: "rgb(0, 161, 223)",
// Hovered context bar item background color.
colorBackgroundContextBarItemHover: "rgb(247, 249, 251)",
// Active context bar item background color.
colorBackgroundContextBarItemActive: "rgb(247, 249, 251)",
// Context TAB bar item background color.
colorBackgroundContextTabBarItem: "rgb(255, 255, 255)",
// Hovered context bar item background color.
colorBackgroundContextBarInverseItemHover: "rgba(255, 255, 255, 0.2)",
// Active context bar item background color.
colorBackgroundContextBarInverseItemActive: "rgba(255, 255, 255, 0.4)",
// 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%)",
// 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(228, 233, 243)",
// 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(228, 233, 243)",
// Context bar height.
heightContextBar: "2.5rem",
// Context bar text color
colorTextContextBar: "rgb(84, 105, 141)",
// 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)",
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
colorBackgroundAnchor: "rgb(244, 246, 249)",
// Page Header background color
colorBackgroundPageHeader: "rgb(247, 249, 251)",
// The background color for Salespath stages that are complete.
colorBackgroundPathComplete: "rgb(75, 202, 129)",
// The hover background color for Salespath stages that are complete.
colorBackgroundPathCompleteHover: "rgb(4, 132, 75)",
// The background color for Salespath stages that are the current stage.
colorBackgroundPathCurrent: "rgb(0, 112, 210)",
// The hover background color for Salespath stages that are the current stage.
colorBackgroundPathCurrentHover: "rgb(0, 95, 178)",
// The background color for Salespath stages that have not been completed.
colorBackgroundPathIncomplete: "rgb(224, 229, 238)",
// The hover background color for Salespath stages that have not been completed.
colorBackgroundPathIncompleteHover: "rgb(216, 221, 230)",
// 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 guidance coaching section.
colorBackgroundGuidance: "rgb(250, 250, 251)",
// Used as a separator between dark colors like the stages of salespath.
colorBorderPathDivider: "rgb(255, 255, 255)",
// Line heights for salespath
lineHeightSalespath: "1.5rem",
// Height of Salespath
heightSalesPath: "2rem",
// The default background color for Progress Indicator
progressColorBackground: "rgb(255, 255, 255)",
// The shaded background color for Progress Indicator
progressColorBackgroundShade: "rgb(244, 246, 249)",
// The background color for the Progress Bar
progressBarColorBackground: "rgb(216, 221, 230)",
// The background color of the fill for the Progess Bar
progressBarColorBackgroundFill: "rgb(94, 180, 255)",
// 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(244, 246, 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",
// Split View background color.
splitViewColorBackground: "rgb(228, 233, 243)",
// Split View background color on row hover.
splitViewColorBackgroundRowHover: "rgb(238, 241, 246)",
// Row dividers in Split View list
splitViewColorBorder: "rgb(206, 213, 225)",
// Vertical navigation shaded background color on row hover.
verticalNavigationColorBackgroundShadeRowHover: "rgb(238, 241, 246)",
// Vertical navigation shaded background color on row active.
verticalNavigationColorBackgroundShadeRowActive: "rgb(232, 236, 243)"
};