@salesforce/design-system-react/module/utilities/design-tokens/dist/components.common.js

Salesforce Lightning Design System for React

module.exports = {
  // 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',
  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)',
  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',
  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)',
  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',
  tableColorBackgroundStripes: 'rgb(250, 250, 249)',
  tableColorBackgroundHeader: 'rgb(255, 255, 255)',
  tableColorBackgroundHeaderHover: 'rgb(250, 250, 249)',
  tableColorBackgroundHeaderFocus: 'rgb(255, 255, 255)',
  tableBorderRadius: '0',
  //
  tableCellSpacing: '0.5rem',
  tableColorTextHeader: 'rgb(81, 79, 77)',
  // 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)',
  // 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)',
  // Generic sizing token scale for UI components.
  sizeXSmall: '12rem',
  // Generic sizing token scale for UI components.
  sizeXxxSmall: '3rem',
  // Small tap target size
  squareIconSmall: '1rem',
  // 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',
  // Very small icons to replace force font with temporary override.
  squareIconXxSmallContent: '.875rem',
  // 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',
  // Minimum height of a pill.
  heightPill: '1.625rem',
  // 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: '.5rem',
  // Large tap target size.
  squareIconLarge: '3.125rem',
  // Use squareIconMediumBoundary
  squareIconMedium: '2.375rem',
  // 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: '.75rem',
  // Very very small icon button boundary.
  squareIconXxSmallBoundary: '1rem',
  // Alternate medium tap target size
  squareIconMediumContentAlt: '0.875rem',
  // 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',
  einsteinHeaderBackgroundColor: 'rgb(149, 203, 252)',
  // Text shadow color for Einstein header background to make text more readable
  einsteinHeaderTextShadow: '#9EDAFF',
  formLabelFontSize: '0.75rem',
  // Global Header background color
  globalHeaderColorBackground: 'rgb(255, 255, 255)',
  brandLogoImage: '/assets/images/logo.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 text color
  colorTextContextBar: 'rgb(112, 110, 107)',
  // 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: '.8125rem',
  inputStaticFontWeight: '400',
  inputReadonlyFontWeight: '400',
  inputStaticColor: 'rgb(43, 40, 38)',
  // 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',
  //
  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 hovered background color for Salespath stages that are complete.
  colorBackgroundPathActiveHover: 'rgb(22, 50, 92)',
  // 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 active.
  colorBackgroundPathActive: 'rgb(6, 28, 63)',
  // 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(75, 202, 129)',
  // The hover background color for Salespath stages that are the current stage.
  colorBackgroundPathCurrentHover: 'rgb(0, 95, 178)',
  // 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 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, 112, 210)',
  // 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)',
  // Line heights for salespath
  lineHeightSalespath: '1.5rem',
  // Height of Salespath
  heightSalesPath: '2rem',
  // Width of action button to right
  pathButtonWidthFixed: '13rem',
  // 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)',
  // 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',
  // 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%',
  // 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(167, 185, 209)',
  // 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'
};
//# sourceMappingURL=components.common.js.map