UNPKG

@salesforce-ux/design-system

Version:

Salesforce Lightning Design System

github.com/salesforce-ux/design-system

salesforce-ux/design-system

140 lines • 7.44 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
{ "COLOR_BACKGROUND_TEMP_MODAL_TINT": "rgba(8, 7, 7, 0.6)", "BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT": "rgba(253, 253, 253, 0)", "COLOR_BACKGROUND_ALT_2": "rgb(243, 242, 242)", "COLOR_BACKGROUND_UTILITY_BAR_HOVER": "rgb(236, 235, 234)", "COLOR_BACKGROUND_ANCHOR": "rgb(243, 242, 242)", "COLOR_BACKGROUND_PRIMARY": "rgb(243, 242, 242)", "COLOR_BACKGROUND_OFFLINE": "rgb(62, 62, 60)", "BRAND_BAND_COLOR_BACKGROUND_SECONDARY": "rgb(253, 253, 253)", "BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT": "rgba(253, 253, 253, 0)", "COLOR_CONTRAST_SECONDARY": "rgb(243, 242, 242)", "COLOR_BACKGROUND_BROWSER": "rgb(112, 110, 107)", "COLOR_BACKGROUND_TEMP_MODAL": "rgb(150, 148, 146)", "COLOR_BACKGROUND_PAYLOAD": "rgb(250, 250, 249)", "PAGE_COLOR_BACKGROUND_PRIMARY": "rgb(253, 253, 253)", "COLOR_BACKGROUND_SHADE_DARK": "rgb(221, 219, 218)", "COLOR_BACKGROUND_ACTIONBAR_ICON_UTILITY": "rgb(112, 110, 107)", "BRAND_BAND_COLOR_BACKGROUND_PRIMARY": "rgb(253, 253, 253)", "COLOR_BACKGROUND_SECONDARY": "rgb(255, 255, 255)", "COLOR_STROKE_BRAND": "rgb(0, 112, 210)", "COLOR_STROKE_BRAND_HOVER": "rgb(0, 112, 210)", "COLOR_STROKE_BRAND_ACTIVE": "rgb(22, 50, 92)", "COLOR_STROKE_DISABLED": "rgb(236, 235, 234)", "COLOR_STROKE_HEADER_BUTTON": "rgb(176, 173, 171)", "SHADOW_HARD_PRIMARY": "rgba(0, 0, 0, 0.10) 0 2px 0", "SHADOW_SOFT_PRIMARY": "rgba(0, 0, 0, 0.10) 0 2px 2px", "SHADOW_SOFT_PRIMARY_HOVER": "rgba(0, 0, 0, 0.20) 0 3px 6px", "SHADOW_SOFT_PRIMARY_ACTIVE": "rgba(0, 0, 0, 0.20) 0 1px 1px", "CARD_SPACING_MARGIN": "0.75rem", "CARD_FOOTER_PADDING": "0.75rem 1rem", "COLOR_TEXT_TOAST": "rgb(236, 235, 234)", "COLOR_TEXT_MODAL_BUTTON": "rgb(62, 62, 60)", "COLOR_TEXT_STAGE_LEFT": "rgb(236, 235, 234)", "COLOR_BACKGROUND_ROW_ACTIVE": "rgb(236, 235, 234)", "COLOR_BACKGROUND_LIGHT": "rgb(255, 255, 255)", "COLOR_BACKGROUND_ROW_HOVER": "rgb(243, 242, 242)", "COLOR_BACKGROUND_INFO": "rgb(112, 110, 107)", "COLOR_BACKGROUND_STENCIL": "rgb(243, 242, 242)", "COLOR_BACKGROUND": "rgb(243, 242, 242)", "COLOR_BACKGROUND_DARK": "rgb(236, 235, 234)", "COLOR_BACKGROUND_STENCIL_ALT": "rgb(236, 235, 234)", "COLOR_BACKGROUND_ROW_SELECTED": "rgb(236, 235, 234)", "COLOR_BORDER": "rgb(221, 219, 218)", "COLOR_BORDER_SEPARATOR": "rgb(243, 242, 242)", "COLOR_BORDER_SEPARATOR_ALT": "rgb(221, 219, 218)", "COLOR_BORDER_SEPARATOR_ALT_2": "rgb(201, 199, 197)", "COLOR_BORDER_INFO": "rgb(112, 110, 107)", "COLOR_BORDER_OFFLINE": "rgb(62, 62, 60)", "COLOR_BORDER_SELECTION_ACTIVE": "rgb(243, 242, 242)", "COLOR_TEXT_ACTION_LABEL": "rgb(62, 62, 60)", "COLOR_TEXT_ACTION_LABEL_ACTIVE": "rgb(8, 7, 7)", "COLOR_TEXT_DEFAULT": "rgb(8, 7, 7)", "COLOR_TEXT_PRIMARY": "rgb(8, 7, 7)", "COLOR_TEXT_WEAK": "rgb(62, 62, 60)", "COLOR_TEXT_PLACEHOLDER_INVERSE": "rgb(236, 235, 234)", "COLOR_TEXT_LINK": "rgb(0, 109, 204)", "COLOR_TEXT_ICON_DEFAULT": "rgb(112, 110, 107)", "COLOR_TEXT_INVERSE": "rgb(255, 255, 255)", "COLOR_TEXT_PLACEHOLDER": "rgb(62, 62, 60)", "COLOR_TEXT_INVERSE_WEAK": "rgb(176, 173, 171)", "COLOR_TEXT_LABEL": "rgb(62, 62, 60)", "COLOR_BACKGROUND_NOTIFICATION_NEW": "rgb(243, 242, 242)", "COLOR_CONTRAST_PRIMARY": "rgb(243, 242, 242)", "POPOVER_WALKTHROUGH_HEADER_IMAGE": "/assets/images/popovers/popover-header.png", "COLOR_BACKGROUND_INPUT_DISABLED": "rgb(236, 235, 234)", "COLOR_BACKGROUND_TOGGLE_HOVER": "rgb(150, 148, 146)", "POPOVER_WALKTHROUGH_COLOR_BACKGROUND": "rgb(3, 46, 97)", "POPOVER_WALKTHROUGH_ALT_IMAGE": "/assets/images/popovers/popover-action.png", "PROGRESS_COLOR_BORDER_SHADE": "rgb(243, 242, 242)", "COLOR_BACKGROUND_TOGGLE": "rgb(176, 173, 171)", "POPOVER_WALKTHROUGH_ALT_NUBBIN_COLOR_BACKGROUND": "rgb(33, 92, 160)", "PROGRESS_COLOR_BACKGROUND_SHADE": "rgb(243, 242, 242)", "PAGE_HEADER_COLOR_BACKGROUND": "rgb(243, 242, 242)", "COLOR_BACKGROUND_INPUT_CHECKBOX_DISABLED": "rgb(221, 219, 218)", "COLOR_BACKGROUND_SPINNER_DOT": "rgb(176, 173, 171)", "TABLE_COLOR_BACKGROUND_HEADER_HOVER": "rgb(255, 255, 255)", "COLOR_BACKGROUND_BACKDROP_TINT": "rgb(250, 250, 249)", "POPOVER_WALKTHROUGH_COLOR_BACKGROUND_ALT": "rgb(22, 74, 133)", "TABLE_COLOR_BACKGROUND_HEADER": "rgb(250, 250, 249)", "COLOR_BACKGROUND_SCROLLBAR": "rgb(236, 235, 234)", "COLOR_BACKGROUND_TOGGLE_DISABLED": "rgb(176, 173, 171)", "COLOR_BACKGROUND_TOAST": "rgb(112, 110, 107)", "COLOR_BACKGROUND_POST": "rgb(243, 242, 242)", "COLOR_BACKGROUND_IMAGE_OVERLAY": "rgba(0, 0, 0, 0.6)", "COLOR_BACKGROUND_SHADE": "rgb(236, 235, 234)", "COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND": "rgb(243, 242, 242)", "COLOR_BACKGROUND_SCROLLBAR_TRACK": "rgb(201, 199, 197)", "POPOVER_WALKTHROUGH_HEADER_COLOR_BACKGROUND": "rgb(22, 74, 133)", "COLOR_BORDER_INPUT_DISABLED": "rgb(201, 199, 197)", "COLOR_BORDER_REMINDER": "rgb(236, 235, 234)", "PAGE_HEADER_COLOR_BORDER": "rgb(221, 219, 218)", "COLOR_BORDER_PRIMARY": "rgb(221, 219, 218)", "COLOR_BORDER_BUTTON_DEFAULT": "rgb(221, 219, 218)", "COLOR_BORDER_INPUT": "rgb(221, 219, 218)", "COLOR_BORDER_BUTTON_FOCUS_INVERSE": "rgb(236, 235, 234)", "CARD_COLOR_BORDER": "rgb(221, 219, 218)", "BUTTON_COLOR_BORDER_PRIMARY": "rgb(221, 219, 218)", "COLOR_BORDER_LINK_FOCUS_INVERSE": "rgb(236, 235, 234)", "PAGE_HEADER_JOINED_COLOR_BORDER": "rgb(221, 219, 218)", "CARD_FOOTER_COLOR_BORDER": "rgb(221, 219, 218)", "PAGE_HEADER_BORDER_RADIUS": "0.25rem", "TABLE_BORDER_RADIUS": "0 0 0.25rem 0.25rem", "SHADOW_BUTTON_FOCUS_INVERSE": "0 0 3px #ecebea", "SHADOW_LINK_FOCUS_INVERSE": "0 0 3px #ecebea", "PAGE_HEADER_SHADOW": "0 2px 2px 0 rgba(0, 0, 0, 0.10)", "CARD_SHADOW": "0 2px 2px 0 rgba(0, 0, 0, 0.10)", "FORM_LABEL_FONT_SIZE": "0.75rem", "INPUT_STATIC_FONT_SIZE": "0.875rem", "INPUT_STATIC_FONT_WEIGHT": "400", "TABS_FONT_WEIGHT": "700", "CARD_FONT_WEIGHT": "700", "PAGE_HEADER_TITLE_FONT_WEIGHT": "700", "BRAND_BAND_DEFAULT_IMAGE": "/assets/images/themes/oneSalesforce/banner-brand-default.png", "BANNER_USER_DEFAULT_IMAGE": "/assets/images/themes/oneSalesforce/banner-user-default.png", "BANNER_GROUP_DEFAULT_IMAGE": "/assets/images/themes/oneSalesforce/banner-group-public-default.png", "COMPONENT_SPACING_MARGIN": "0.75rem", "COMPONENT_SPACING_PADDING": "1rem", "TEMPLATE_GUTTERS": "0.75rem", "TEMPLATE_PROFILE_GUTTERS": "8rem 0.75rem 0.75rem", "TABLE_CELL_SPACING": "0.25rem 0.5rem", "CARD_FOOTER_TEXT_ALIGN": "center", "COLOR_TEXT_ICON_INVERSE": "rgb(255, 255, 255)", "COLOR_TEXT_INPUT_ICON": "rgb(176, 173, 171)", "COLOR_TEXT_ICON_INVERSE_ACTIVE": "rgb(255, 255, 255)", "COLOR_TEXT_TAB_LABEL_DISABLED": "rgb(236, 235, 234)", "COLOR_TEXT_INPUT_DISABLED": "rgb(62, 62, 60)", "COLOR_TEXT_TERTIARY": "rgb(150, 148, 146)", "COLOR_TEXT_ICON_DEFAULT_DISABLED": "rgb(221, 219, 218)", "COLOR_TEXT_INVERSE_ACTIVE": "rgb(94, 180, 255)", "COLOR_TEXT_ICON_DEFAULT_HINT_BORDERLESS": "rgb(236, 235, 234)", "COLOR_TEXT_BUTTON_DEFAULT_DISABLED": "rgb(221, 219, 218)", "COLOR_TEXT_TOGGLE_DISABLED": "rgb(221, 219, 218)", "COLOR_TEXT_ICON_DEFAULT_HINT": "rgb(176, 173, 171)", "COLOR_TEXT_INVERSE_HOVER": "rgb(176, 173, 171)", "COLOR_TEXT_BUTTON_INVERSE": "rgb(236, 235, 234)", "COLOR_TEXT_BUTTON_DEFAULT_HINT": "rgb(176, 173, 171)", "COLOR_TEXT_ICON_UTILITY": "rgb(176, 173, 171)", "COLOR_TEXT_ICON_INVERSE_HOVER": "rgb(255, 255, 255)", "COLOR_TEXT_SECONDARY": "rgb(62, 62, 60)" }