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

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(116, 116, 116)
// White badge background color.
$badge-color-background-lightest = rgb(255, 255, 255)
// Dark gray badge background color.
$badge-color-background-inverse = rgb(116, 116, 116)
$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-icon-boundary-touch = 2.75rem
$button-color-border-primary = rgb(243, 243, 243)
$button-color-border-brand-primary = rgb(1, 118, 211)
$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(243, 243, 243)
// Use BRAND_ACCESSIBLE to pick up theming capabilities
$button-color-background-brand-primary = rgb(1, 118, 211)
// 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(243, 243, 243)
// 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(243, 243, 243)
$button-color-background-secondary = rgba(255, 255, 255, 0.8)
// Brandable primary button - disabled state
$color-background-button-brand-disabled = rgb(243, 243, 243)
// Brandable primary button - hover state
$color-background-button-brand-hover = rgb(1, 68, 134)
// 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(243, 243, 243)
// Brandable primary button
$color-background-button-brand = rgb(1, 118, 211)
// 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(243, 243, 243)
// Brandable primary button - active state
$color-background-button-brand-active = rgb(3, 45, 96)
// 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(243, 243, 243)
// Line heights for regular buttons
$line-height-button = 1.875rem
// Line heights for small buttons
$line-height-button-small = 1.75rem
// Line height for touch screens
$button-line-height-touch = 2.65rem
$button-color-text-primary = rgb(255, 255, 255)
// Default Card component background color.
$card-color-background = rgb(255, 255, 255)
$card-color-border = rgb(201, 201, 201)
$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(243, 243, 243)
// Default focus background for carousel navigation indicators
$carousel-indicator-color-background-focus = rgb(1, 68, 134)
// Default background for active state on carousel navigation indicators
$carousel-indicator-color-background-active = rgb(1, 118, 211)
// Default width for carousel indicator width
$carousel-indicator-width = 1rem
// Inbound chat message background color.
$chat-message-color-background-inbound = rgb(243, 243, 243)
// Outbound chat message background color.
$chat-message-color-background-outbound = rgb(1, 68, 134)
// Outbound agent chat message background color.
$chat-message-color-background-outbound-agent = rgb(116, 116, 116)
// 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(243, 243, 243)
$color-picker-slider-thumb-border-color = rgb(68, 68, 68)
$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(243, 243, 243)
// 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(243, 243, 243)
// Focused state for table header cells
$table-color-background-header-focus = rgb(255, 255, 255)
// Resizable handle color for table header cells
$table-color-background-header-resizable-handle = rgb(174, 174, 174)
$table-border-radius = 0
$table-cell-spacing = 0.5rem
$table-color-text-header = rgb(68, 68, 68)
$datepicker-color-text-day-adjacent-month = rgb(116, 116, 116)
// 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(254, 92, 76)
// Utility bar notifications focus background color.
$utility-bar-color-background-notification-focus = rgb(201, 201, 201)
$drop-zone-slot-height = 0.25rem
// Default color for animated icon waffle for app switcher.
$color-background-icon-waffle = rgb(116, 116, 116)
// Default background color for a typing icon dot.
$typing-icon-dot-color-background-gray = rgb(201, 201, 201)
// Active background color for a typing icon dot when animcating.
$typing-icon-dot-color-background-gray-dark = rgb(201, 201, 201)
// Brand fill color
$global-action-fill-hover = rgb(1, 68, 134)
// Global action icon size
$global-action-icon-size = 1.5rem
// Typing icon size
$typing-icon-dot-size = .5rem
$einstein-header-background = "/einstein-headers/einstein-header-background.svg"
$einstein-header-figure = "/einstein-headers/einstein-figure.svg"
// Background color for Einstein header
$einstein-header-background-color = rgb(144, 208, 254)
// Text shadow color for Einstein header background to make text more readable
$einstein-header-text-shadow = #cfe9fe
$files-z-index-hover = 5
$form-label-font-size = 0.75rem
// Global Header background color
$global-header-color-background = rgb(255, 255, 255)
$brand-logo-image = "/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(13, 157, 218)
// 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(13, 157, 218)
// Alternate border color in context bar for default theme
$color-border-context-bar-theme-default-alt = rgb(243, 243, 243)
// Hovered border color in context bar for default theme
$color-border-context-bar-theme-default-hover = rgb(50, 29, 113)
// Active border color in context bar for default theme
$color-border-context-bar-theme-default-active = rgb(243, 243, 243)
// 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(68, 68, 68)
// 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(144, 208, 254)
// Secondary color for illustrations
$illustration-color-secondary = rgb(207, 233, 254)
$input-static-font-size = 0.8125rem
$input-static-font-weight = 400
$input-readonly-font-weight = 400
$input-static-color = rgb(24, 24, 24)
// Default Page Header background color
$page-header-color-background = rgb(243, 243, 243)
// Secondary Page Header background color
$page-header-color-background-alt = rgb(255, 255, 255)
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
$color-background-anchor = rgb(243, 243, 243)
// 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(201, 201, 201)
$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(201, 201, 201)
// The background color for the step action arrow that are the active stage
$color-background-path-step-action-active = rgb(0, 22, 57)
// The background color for Salespath stages that have not been completed.
$color-background-path-incomplete = rgb(243, 243, 243)
// The hover background color for Salespath stages that are the active stage.
$color-background-path-active-hover = rgb(3, 45, 96)
// The background color for the final stage of a Salespath when it has been lost.
$color-background-path-lost = rgb(234, 0, 30)
// The background color for Salespath stages that are the active stage.
$color-background-path-active = rgb(1, 68, 134)
// 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(46, 132, 74)
// 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(46, 132, 74)
// The background color for Salespath stages that are complete.
$color-background-path-complete = rgb(59, 167, 85)
// The background color for the step action arrow that are the current stage
$color-background-path-step-action-current = rgb(1, 68, 134)
// 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(1, 68, 134)
// Used as a border color for the current path step on hover.
$color-border-path-current-hover = rgb(3, 45, 96)
// 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(1, 68, 134)
// Used as a text hover color for the active Path step.
$color-text-path-current-hover = rgb(3, 45, 96)
// The default background color for Popover Walkthrough
$popover-walkthrough-color-background = rgb(0, 22, 57)
// The default background color for Popover Walkthrough Header
$popover-walkthrough-header-color-background = rgb(3, 45, 96)
// The default background color for alternative Popover Walkthrough
$popover-walkthrough-color-background-alt = rgb(1, 118, 211)
$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(1, 118, 211)
// Tooltip nubbin square size
$nubbin-size-default = 1rem
// Tooltip nubbin offset for branded popovers
$nubbin-triangle-offset = -0.1875rem
// The default border width for Branded Popover
$popover-brand-border-width = 0.25rem
// Text color for step counter in walkthrough variant of popovers
$popover-color-text = rgb(201, 201, 201)
// 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(243, 243, 243)
// The background color for the Progress Bar
$progress-bar-color-background = rgb(201, 201, 201)
// The background color of the fill for the Progress Bar
$progress-bar-color-background-fill = rgb(26, 185, 255)
// The success background color of the fill for the Progress Bar
$progress-bar-color-background-fill-success = rgb(46, 132, 74)
// 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(243, 243, 243)
// Hovered border color of each indicator item within the Progress Indicator
$progress-color-border-hover = rgb(1, 118, 211)
// Active border color of each indicator item within the Progress Indicator
$progress-color-border-active = rgb(27, 150, 255)
// 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
// Line height for touch screens
$radio-button-group-line-height-touch = 2.69rem
// Dark notification component background color.
$notification-color-background-inverse = rgb(116, 116, 116)
$slider-handle-color-background = rgb(27, 150, 255)
$slider-handle-color-background-hover = rgb(1, 118, 211)
$slider-handle-color-background-focus = rgb(1, 118, 211)
$slider-handle-color-background-active = rgb(1, 118, 211)
$slider-track-color-background = rgb(243, 243, 243)
$slider-track-color-background-fill = rgb(27, 150, 255)
$slider-color-background-disabled = rgb(243, 243, 243)
$slider-handle-shadow = rgba(0, 0, 0, 0.16) 0 2px 3px
$slider-handle-size = 1rem
$slider-track-height = 4px
$slider-track-width = 100%
// Spinner size for xx-small modifier
$spinner-size-xx-small = 0.5rem
// Spinner size for x-small modifier
$spinner-size-x-small = 1rem
// Spinner size for small modifier
$spinner-size-small = 1.25rem
// Spinner size for medium modifier
$spinner-size-medium = 2rem
// Spinner size for large modifier
$spinner-size-large = 2.75rem
// Split View background color.
$split-view-color-background = rgb(243, 243, 243)
// 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(201, 201, 201)
// 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, 243, 243)
// Vertical navigation shaded background color on row active.
$vertical-navigation-color-background-shade-row-active = rgb(243, 243, 243)
// Text color for the Info section
$welcome-mat-text-color-info = rgb(3, 45, 96)
// Background Image Path for the Welcome Mat Info section
$welcome-mat-background-image-info = "/welcome-mat/bg-info@2x.png"
// Background overflow color for the Welcome Mat Info section
$welcome-mat-background-color-info = rgb(207, 233, 254)
// 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, 201, 201)
// 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