@salesforce-ux/design-system/design-tokens/dist/components.less

Salesforce Lightning Design System

// White avatar group background color.
@avatar-group-color-background-lightest: rgb(255, 255, 255);
// Dark gray avatar group background color.
@avatar-group-color-background-inverse: rgb(112, 110, 107);
// White badge background color.
@badge-color-background-lightest: rgb(255, 255, 255);
// Dark gray badge background color.
@badge-color-background-inverse: rgb(112, 110, 107);
@brand-band-default-image: "";
@brand-band-color-background-primary: rgba(0, 0, 0, 0);
@brand-band-color-background-primary-transparent: rgba(0, 0, 0, 0);
@brand-band-color-background-secondary: rgba(0, 0, 0, 0);
@brand-band-color-background-secondary-transparent: rgba(0, 0, 0, 0);
@brand-band-image-height-small: 6rem;
@brand-band-image-height-medium: 12.5rem;
@brand-band-image-height-large: 18.75rem;
@brand-band-scrim-height: 3.125rem;
@template-gutters: 0;
@template-profile-gutters: 0;
@button-icon-color-border-primary: rgb(255, 255, 255);
@button-color-border-primary: rgb(216, 221, 230);
@button-color-border-brand-primary: rgb(0, 112, 210);
@button-color-border-secondary: rgba(255, 255, 255, 0.8);
@button-border-radius: .25rem;
// Default secondary button - focus state
@color-background-button-default-focus: rgb(244, 246, 249);
@button-color-background-brand-primary: rgb(0, 112, 210);
// Disabled button backgrounds on inverse/dark backgrounds
@color-background-button-inverse-disabled: rgba(0, 0, 0, 0);
// Default secondary button - hover state
@color-background-button-default-hover: rgb(244, 246, 249);
// Default secondary button
@color-background-button-default: rgb(255, 255, 255);
// Background color for icon-only button - disabled state
@color-background-button-icon-disabled: rgb(255, 255, 255);
// Background color for icon-only button - focus state
@color-background-button-icon-focus: rgb(244, 246, 249);
@button-color-background-secondary: rgba(255, 255, 255, 0.8);
// Brandable primary button - disabled state
@color-background-button-brand-disabled: rgb(224, 229, 238);
// Brandable primary button - hover state
@color-background-button-brand-hover: rgb(0, 95, 178);
// Active button backgrounds on inverse backgrounds on mobile
@color-background-button-inverse-active: rgba(0, 0, 0, 0.24);
// Background color for icon-only button - hover state
@color-background-button-icon-hover: rgb(244, 246, 249);
// Brandable primary button
@color-background-button-brand: rgb(0, 112, 210);
// Background color for icon-only button
@color-background-button-icon: rgba(0, 0, 0, 0);
// Default secondary button - disabled state
@color-background-button-default-disabled: rgb(255, 255, 255);
// Background color for icon-only button - active state
@color-background-button-icon-active: rgb(238, 241, 246);
// Brandable primary button - active state
@color-background-button-brand-active: rgb(0, 57, 107);
// Button backgrounds on inverse/dark backgrounds
@color-background-button-inverse: rgba(0, 0, 0, 0);
@button-color-background-primary: rgb(255, 255, 255);
// Default secondary button - active state
@color-background-button-default-active: rgb(238, 241, 246);
// Line heights for regular buttons
@line-height-button: 1.875rem;
// Line heights for small buttons
@line-height-button-small: 1.75rem;
@button-color-text-primary: rgb(255, 255, 255);
// Default Card component background color.
@card-color-background: rgb(255, 255, 255);
@card-color-border: rgb(221, 219, 218);
@card-footer-color-border: rgba(0, 0, 0, 0);
@card-shadow: none;
// Use for active tab.
@card-font-weight: 400;
@card-footer-margin: 0.75rem;
@card-body-padding: 0 1rem;
@card-wrapper-spacing: 1rem;
@card-header-padding: 0.75rem 1rem 0;
@card-spacing-large: 1.5rem;
@card-header-margin: 0 0 0.75rem;
// Use for vertical spacing between cards
@card-spacing-margin: 1rem;
@card-footer-padding: 0 1rem 0.75rem;
@card-spacing-small: 0.75rem;
@card-footer-text-align: right;
// Default background for carousel card
@carousel-color-background: rgb(255, 255, 255);
// Default background for carousel navigation indicators
@carousel-indicator-color-background: rgb(255, 255, 255);
// Default hover background for carousel navigation indicators
@carousel-indicator-color-background-hover: rgb(250, 250, 249);
// Default focus background for carousel navigation indicators
@carousel-indicator-color-background-focus: rgb(0, 95, 178);
// Default background for active state on carousel navigation indicators
@carousel-indicator-color-background-active: rgb(0, 112, 210);
// Default width for carousel indicator width
@carousel-indicator-width: 1rem;
// Inbound chat message background color.
@chat-message-color-background-inbound: rgb(242, 242, 243);
// Outbound chat message background color.
@chat-message-color-background-outbound: rgb(0, 95, 178);
// Outbound agent chat message background color.
@chat-message-color-background-outbound-agent: rgb(107, 109, 112);
// Status chat message background color.
@chat-message-color-background-status: rgb(255, 255, 255);
// Line heights for toggle buttons
@line-height-toggle: 1.3rem;
// Slider size for toggle.
@square-toggle-slider: 1.25rem;
// Slider width.
@width-toggle: 3rem;
// Slider height.
@height-toggle: 1.5rem;
@color-picker-slider-thumb-color-background: rgb(250, 250, 249);
@color-picker-slider-thumb-border-color: rgb(81, 79, 77);
@color-picker-swatch-shadow: inset 0 0 1px rgba(0,0,0,0.4);
@color-picker-input-custom-hex-font-size: 0.75rem;
@color-picker-selector-width: 14rem;
@color-picker-swatches-width: 13.3rem;
@color-picker-range-height: 5rem;
@color-picker-slider-height: 1.5rem;
@color-picker-thumb-width: 0.375rem;
@color-picker-range-indicator-size: 0.75rem;
@color-picker-input-custom-hex-width: 4.2rem;
@color-picker-swatch-size: 1.25rem;
// Alternating row background color for tables
@table-color-background-stripes: rgb(250, 250, 249);
// Default background color for table headers
@table-color-background-header: rgb(255, 255, 255);
// Hover state for table header cells
@table-color-background-header-hover: rgb(250, 250, 249);
// Focused state for table header cells
@table-color-background-header-focus: rgb(255, 255, 255);
@table-border-radius: 0;
@table-cell-spacing: 0.5rem;
@table-color-text-header: rgb(81, 79, 77);
// Docked panel header’s background color.
@color-background-docked-panel-header: rgb(255, 255, 255);
// Docked panel’s background color when open.
@color-background-docked-panel: rgb(255, 255, 255);
// Height of the docked bar.
@height-docked-bar: 2.5rem;
// Utility bar notifications badge background color.
@utility-bar-color-background-notification-badge: rgb(212, 80, 76);
// Utility bar notifications focus background color.
@utility-bar-color-background-notification-focus: rgb(201, 199, 197);
@drop-zone-slot-height: 0.25rem;
// Default color for animated icon waffle for app switcher.
@color-background-icon-waffle: rgb(112, 110, 107);
// Default background color for a typing icon dot.
@typing-icon-dot-color-background-gray: rgb(221, 219, 218);
// Active background color for a typing icon dot when animcating.
@typing-icon-dot-color-background-gray-dark: rgb(201, 199, 197);
// Brand fill color
@global-action-fill-hover: rgb(0, 112, 210);
// Global action icon size
@global-action-icon-size: 1.5rem;
// Typing icon size
@typing-icon-dot-size: .5rem;
@einstein-header-background: "/assets/images/einstein-headers/einstein-header-background.svg";
@einstein-header-figure: "/assets/images/einstein-headers/einstein-figure.svg";
// Background color for Einstein header
@einstein-header-background-color: rgb(149, 203, 252);
// Text shadow color for Einstein header background to make text more readable
@einstein-header-text-shadow: #9EDAFF;
@form-label-font-size: 0.75rem;
// Global Header background color
@global-header-color-background: rgb(255, 255, 255);
@brand-logo-image: "/assets/images/logo-noname.svg";
// Global identity icon size.
@square-icon-global-identity-icon: 1.25rem;
// Hovered context bar item background color.
@color-background-context-bar-item-hover: rgb(255, 255, 255);
// Active context bar item background color.
@color-background-context-bar-item-active: rgb(255, 255, 255);
// Default context bar background color.
@color-background-context-bar: rgb(255, 255, 255);
// Context TAB bar item background color.
@color-background-context-tab-bar-item: rgb(255, 255, 255);
// Hovered context bar item background color.
@color-background-context-bar-inverse-item-hover: rgba(255, 255, 255, 0.2);
// A Gradient used for putting shadows on the bottom when box-shadow is not possible.
@color-background-context-bar-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%);
// Active context bar item background color.
@color-background-context-bar-inverse-item-active: rgba(255, 255, 255, 0.4);
// Brand color in context bar for default theme
@color-background-context-bar-brand-accent: rgb(0, 161, 223);
// Highlight for context bar action (hover and focus states).
@color-background-context-bar-action-highlight: rgba(255, 255, 255, 0.2);
// Divider in context bar
@color-border-context-bar-divider: rgba(255, 255, 255, 0.2);
// Border color in context bar
@color-border-context-bar-item: rgba(0, 0, 0, 0.2);
// Border color in context bar on dark background
@color-border-context-bar-inverse-item: rgba(255, 255, 255, 0.2);
// Border color in context bar for default theme
@color-border-context-bar-theme-default: rgb(0, 161, 223);
// Alternate border color in context bar for default theme
@color-border-context-bar-theme-default-alt: rgb(243, 242, 242);
// Hovered border color in context bar for default theme
@color-border-context-bar-theme-default-hover: rgb(11, 35, 153);
// Active border color in context bar for default theme
@color-border-context-bar-theme-default-active: rgb(243, 242, 242);
// Context bar height.
@height-context-bar: 2.5rem;
// Context bar tab accent height when tab is active.
@globalnavigation-item-height-accent-active: 3px;
// Context bar tab accent height when tab is focused.
@globalnavigation-item-height-accent-focus: 4px;
// Context bar text color
@color-text-context-bar: rgb(62, 62, 60);
// Context bar text color on a dark background
@color-text-context-bar-inverse: rgb(255, 255, 255);
// Context bar action trigger text color
@color-text-context-bar-action-trigger: rgba(255, 255, 255, 0.4);
// Primary color for illustrations
@illustration-color-primary: rgb(140, 211, 248);
// Secondary color for illustrations
@illustration-color-secondary: rgb(194, 232, 255);
@input-static-font-size: 0.8125rem;
@input-static-font-weight: 400;
@input-readonly-font-weight: 400;
@input-static-color: rgb(8, 7, 7);
// Default Page Header background color
@page-header-color-background: rgb(250, 250, 249);
// Secondary Page Header background color
@page-header-color-background-alt: rgb(255, 255, 255);
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
@color-background-anchor: rgb(250, 250, 249);
// Page Header background color
@color-background-page-header: rgb(255, 255, 255);
@page-header-color-border: rgba(0, 0, 0, 0);
@page-header-joined-color-border: rgb(221, 219, 218);
@page-header-border-radius: 0;
@page-header-shadow: none;
@page-header-title-font-size: 1.125rem;
@page-header-title-font-weight: 400;
// Page header Entity Icon size
@page-header-icon-size: 2.25rem;
@page-header-spacing-margin: 0;
@page-header-spacing-padding: 1rem;
@page-header-spacing-row: 0.75rem 1rem;
// Dropshadow found on docked UI panels when positioned to the left of a viewport
@panel-docked-left-shadow: 1px 0 3px rgba(0,0,0,0.25);
// Dropshadow found on docked UI panels when positioned to the left of a viewport
@panel-docked-right-shadow: -1px 0 3px 0 rgba(0,0,0,0.25);
// The hover background color for Salespath stages that have not been completed.
@color-background-path-incomplete-hover: rgb(221, 219, 218);
// The background color for the step action arrow that are the active stage
@color-background-path-step-action-active: rgb(6, 28, 63);
// The background color for Salespath stages that have not been completed.
@color-background-path-incomplete: rgb(236, 235, 234);
// The hover background color for Salespath stages that are the active stage.
@color-background-path-active-hover: rgb(0, 57, 107);
// The background color for the final stage of a Salespath when it has been lost.
@color-background-path-lost: rgb(194, 57, 52);
// The background color for Salespath stages that are the active stage.
@color-background-path-active: rgb(0, 95, 178);
// The background color for Salespath guidance coaching section.
@color-background-guidance: rgb(255, 255, 255);
// The background color for the final stage of a Salespath when it has been lost.
@color-background-path-won: rgb(4, 132, 75);
// The hover background color for Salespath stages that are the current stage.
@color-background-path-current-hover: rgb(255, 255, 255);
// The background color for Salespath stages that are the current stage.
@color-background-path-current: rgb(255, 255, 255);
// The hover background color for Salespath stages that are complete.
@color-background-path-complete-hover: rgb(4, 132, 75);
// The background color for Salespath stages that are complete.
@color-background-path-complete: rgb(75, 202, 129);
// The background color for the step action arrow that are the current stage
@color-background-path-step-action-current: rgb(0, 95, 178);
// The background color for the overall Salespath coaching section.
@color-background-path-expanded: rgb(255, 255, 255);
// Used as a separator between dark colors like the stages of salespath.
@color-border-path-divider: rgb(255, 255, 255);
// Used as a border color for the active Path step.
@color-border-path-current: rgb(0, 95, 178);
// Used as a border color for the current path step on hover.
@color-border-path-current-hover: rgb(0, 57, 107);
// Line heights for salespath
@line-height-salespath: 1.5rem;
// Height of Path
@height-sales-path: 2rem;
// Width of action button to right
@path-button-width-fixed: 13rem;
// Border width of current stage for path item
@width-path-border-current: 0.125rem;
// Used as a text color for the active Path step.
@color-text-path-current: rgb(0, 95, 178);
// Used as a text hover color for the active Path step.
@color-text-path-current-hover: rgb(0, 57, 107);
// The default background color for Popover Walkthrough
@popover-walkthrough-color-background: rgb(6, 28, 63);
// The default background color for Popover Walkthrough Header
@popover-walkthrough-header-color-background: rgb(22, 50, 92);
// The default background color for alternative Popover Walkthrough
@popover-walkthrough-color-background-alt: rgb(0, 112, 210);
@popover-walkthrough-header-image: "";
@popover-walkthrough-alt-image: "";
// The background color for nubbins on the bottom of alternate walkthrough popovers
@popover-walkthrough-alt-nubbin-color-background: rgb(0, 112, 210);
// Text color for step counter in walkthrough variant of popovers
@popover-color-text: rgb(217, 219, 221);
// The default background color for Progress Indicator
@progress-color-background: rgb(255, 255, 255);
// The shaded background color for Progress Indicator
@progress-color-background-shade: rgb(250, 250, 249);
// The background color for the Progress Bar
@progress-bar-color-background: rgb(221, 219, 218);
// The background color of the fill for the Progress Bar
@progress-bar-color-background-fill: rgb(94, 180, 255);
// The success background color of the fill for the Progress Bar
@progress-bar-color-background-fill-success: rgb(75, 202, 129);
// Borders of each indicator item within the Progress Indicator
@progress-color-border: rgb(255, 255, 255);
// Shaded borders of each indicator item within the Progress Indicator
@progress-color-border-shade: rgb(250, 250, 249);
// Hovered border color of each indicator item within the Progress Indicator
@progress-color-border-hover: rgb(0, 112, 210);
// Active border color of each indicator item within the Progress Indicator
@progress-color-border-active: rgb(21, 137, 238);
// Height of the Progress Bar
@progress-bar-height: 0.125rem;
// Inner color for progress ring component
@color-background-progress-ring-content: rgb(255, 255, 255);
// Thickness of the Progress Ring's ring
@progress-ring-width: 0.1875rem;
// Dark notification component background color.
@notification-color-background-inverse: rgb(112, 110, 107);
@slider-handle-color-background: rgb(21, 137, 238);
@slider-handle-color-background-hover: rgb(0, 112, 210);
@slider-handle-color-background-focus: rgb(0, 112, 210);
@slider-handle-color-background-active: rgb(0, 112, 210);
@slider-track-color-background: rgb(236, 235, 234);
@slider-track-color-background-fill: rgb(21, 137, 238);
@slider-color-background-disabled: rgb(236, 235, 234);
@slider-handle-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px;
@slider-handle-size: 1rem;
@slider-track-height: 4px;
@slider-track-width: 100%;
// Split View background color.
@split-view-color-background: rgb(250, 250, 249);
// Split View background color on row hover.
@split-view-color-background-row-hover: rgb(255, 255, 255);
// Row dividers in Split View list
@split-view-color-border: rgb(221, 219, 218);
// Default width for split view container
@split-view-width: 25rem;
// Use for active tab.
@tabs-font-weight: 400;
// Vertical navigation shaded background color on row hover.
@vertical-navigation-color-background-shade-row-hover: rgb(243, 242, 242);
// Vertical navigation shaded background color on row active.
@vertical-navigation-color-background-shade-row-active: rgb(236, 235, 234);
// Text color for the Info section
@welcome-mat-text-color-info: rgb(0, 57, 107);
// Background Image Path for the Welcome Mat Info section
@welcome-mat-background-image-info: "/assets/images/welcome-mat/bg-info@2x.png";
// Background overflow color for the Welcome Mat Info section
@welcome-mat-background-color-info: rgb(202, 230, 241);
// Progress Bar background is white
@welcome-mat-color-background-progress-bar: rgb(255, 255, 255);
// Box Shadow declaration
@welcome-mat-color-action-shadow: rgba(0, 0, 0, 0.05);
// Completed icon color for the Welcome Mat Boxes
@welcome-mat-color-icon-complete: rgb(201, 199, 197);
// Font size for the info title
@welcome-mat-font-size-info-title: 2.625rem;
// Welcome Mat Width
@welcome-mat-width: 52.0625rem;
// Min height for Overlay
@welcome-mat-min-height: 25rem;
// Max height for Overlay
@welcome-mat-max-height: 37.5rem;
// Welcome Mat Progress Bar width
@welcome-mat-width-progress-bar: 12.5rem;
// Size of the green completed check mark
@welcome-mat-complete-icon-size: 1.25rem;
// Size of the check mark in the green icon
@welcome-mat-check-size: 0.625rem;
// Bottom spacing (safe area) for background image
@welcome-mat-spacing-info: 7.75rem;