UNPKG

@salesforce-ux/design-system

Version:

Salesforce Lightning Design System

github.com/salesforce-ux/design-system

salesforce-ux/design-system

158 lines • 8.02 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
// Brandable primary button $color-background-button-brand = rgb(0, 112, 210) // Brandable primary button - active state $color-background-button-brand-active = rgb(0, 57, 107) // Brandable primary button - hover state $color-background-button-brand-hover = rgb(0, 95, 178) // Brandable primary button - disabled state $color-background-button-brand-disabled = rgb(224, 229, 238) // Default secondary button $color-background-button-default = rgb(255, 255, 255) // Default secondary button - hover state $color-background-button-default-hover = rgb(244, 246, 249) // Default secondary button - focus state $color-background-button-default-focus = rgb(244, 246, 249) // Default secondary button - active state $color-background-button-default-active = rgb(238, 241, 246) // Default secondary button - disabled state $color-background-button-default-disabled = rgb(255, 255, 255) // Background color for icon-only button $color-background-button-icon = rgba(0, 0, 0, 0) // Background color for icon-only button - hover state $color-background-button-icon-hover = rgb(244, 246, 249) // Background color for icon-only button - focus state $color-background-button-icon-focus = rgb(244, 246, 249) // Background color for icon-only button - active state $color-background-button-icon-active = rgb(238, 241, 246) // Background color for icon-only button - disabled state $color-background-button-icon-disabled = rgb(255, 255, 255) // Button backgrounds on inverse/dark backgrounds $color-background-button-inverse = rgba(0, 0, 0, 0) // Active button backgrounds on inverse backgrounds on mobile $color-background-button-inverse-active = rgba(0, 0, 0, 0.24) // Disabled button backgrounds on inverse/dark backgrounds $color-background-button-inverse-disabled = rgba(0, 0, 0, 0) // Line heights for regular buttons $line-height-button = 1.875rem // Line heights for small buttons $line-height-button-small = 1.75rem // Default Card component background color. $card-color-background = rgb(255, 255, 255) $card-spacing-small = 0.75rem $card-spacing-medium = 1rem $card-spacing-large = 1.5rem // 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 $table-spacing-x-small = 0.5rem // Docked panel header’s background color. $color-background-docked-panel-header = rgb(247, 249, 251) // 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(168, 183, 199) // Default color for animated icon waffle for app switcher. $color-background-icon-waffle = rgb(84, 105, 141) // Global identity icon size. $square-icon-global-identity-icon = 1.25rem // Default context bar background color. $color-background-context-bar = rgb(255, 255, 255) // Brand color in context bar for default theme $color-background-context-bar-brand-accent = rgb(0, 161, 223) // Hovered context bar item background color. $color-background-context-bar-item-hover = rgb(247, 249, 251) // Active context bar item background color. $color-background-context-bar-item-active = rgb(247, 249, 251) // 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) // Active context bar item background color. $color-background-context-bar-inverse-item-active = rgba(255, 255, 255, 0.4) // 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%) // 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(228, 233, 243) // 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(228, 233, 243) // Context bar height. $height-context-bar = 2.5rem // Context bar text color $color-text-context-bar = rgb(84, 105, 141) // 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) // Use COLOR_BACKGROUND_PAGE_HEADER instead. $color-background-anchor = rgb(244, 246, 249) // Page Header background color $color-background-page-header = rgb(247, 249, 251) // The background color for Salespath stages that are complete. $color-background-path-complete = rgb(75, 202, 129) // 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 the current stage. $color-background-path-current = rgb(0, 112, 210) // The hover background color for Salespath stages that are the current stage. $color-background-path-current-hover = rgb(0, 95, 178) // The background color for Salespath stages that have not been completed. $color-background-path-incomplete = rgb(224, 229, 238) // The hover background color for Salespath stages that have not been completed. $color-background-path-incomplete-hover = rgb(216, 221, 230) // 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 guidance coaching section. $color-background-guidance = rgb(250, 250, 251) // Used as a separator between dark colors like the stages of salespath. $color-border-path-divider = rgb(255, 255, 255) // Line heights for salespath $line-height-salespath = 1.5rem // Height of Salespath $height-sales-path = 2rem // 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(244, 246, 249) // The background color for the Progress Bar $progress-bar-color-background = rgb(216, 221, 230) // The background color of the fill for the Progess Bar $progress-bar-color-background-fill = rgb(94, 180, 255) // 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(244, 246, 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 // Split View background color. $split-view-color-background = rgb(228, 233, 243) // Split View background color on row hover. $split-view-color-background-row-hover = rgb(238, 241, 246) // Row dividers in Split View list $split-view-color-border = rgb(206, 213, 225) // Vertical navigation shaded background color on row hover. $vertical-navigation-color-background-shade-row-hover = rgb(238, 241, 246) // Vertical navigation shaded background color on row active. $vertical-navigation-color-background-shade-row-active = rgb(232, 236, 243)