UNPKG

@salesforce-ux/design-system

Version:

Salesforce Lightning Design System

lightningdesignsystem.com

salesforce-ux/design-system

132 lines • 10.2 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
/* Neutral Base 100 - if used as a background, please use Neutral Base 60-10 to meet accessibility guidelines. */ export const colorNeutralBase100 = "rgb(255, 255, 255)"; /* Neutral Base 95 - if used as a background, please use Neutral Base 50-10 to meet accessibility guidelines. */ export const colorNeutralBase95 = "rgb(243, 243, 243)"; /* Neutral Base 90 - if used as a background, please use Neutral Base 40-10 to meet accessibility guidelines. */ export const colorNeutralBase90 = "rgb(229, 229, 229)"; /* Neutral Base 80 - if used as a background, please use Neutral Base 30-10 to meet accessibility guidelines. */ export const colorNeutralBase80 = "rgb(201, 201, 201)"; /* Neutral Base 70 - if used as a background, please use Neutral Base 20-10 to meet accessibility guidelines. */ export const colorNeutralBase70 = "rgb(174, 174, 174)"; /* Neutral Base 65 - if used as a background, please use Neutral Base 15-10 to meet accessibility guidelines. */ export const colorNeutralBase65 = "rgb(160, 160, 160)"; /* Neutral Base 60 - if used as a background, please use Neutral Base 100 to meet accessibility guidelines. */ export const colorNeutralBase60 = "rgb(147, 147, 147)"; /* Neutral Base 50 - if used as a background, please use Neutral Base 100-95 to meet accessibility guidelines. */ export const colorNeutralBase50 = "rgb(116, 116, 116)"; /* Neutral Base 40 - if used as a background, please use Neutral Base 100-90 to meet accessibility guidelines. */ export const colorNeutralBase40 = "rgb(92, 92, 92)"; /* Neutral Base 30 - if used as a background, please use Neutral Base 100-80 to meet accessibility guidelines. */ export const colorNeutralBase30 = "rgb(68, 68, 68)"; /* Neutral Base 20 - if used as a background, please use Neutral Base 100-70 to meet accessibility guidelines. */ export const colorNeutralBase20 = "rgb(46, 46, 46)"; /* Neutral Base 15 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines. */ export const colorNeutralBase15 = "rgb(36, 36, 36)"; /* Neutral Base 10 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines. */ export const colorNeutralBase10 = "rgb(24, 24, 24)"; /* Brand Base 100 - if used as a background, please use Brand Base 60-10 to meet accessibility guidelines. */ export const colorBrandBase100 = "rgb(255, 255, 255)"; /* Brand Base 95 - if used as a background, please use Brand Base 50-10 to meet accessibility guidelines. */ export const colorBrandBase95 = "rgb(238, 244, 255)"; /* Brand Base 90 - if used as a background, please use Brand Base 40-10 to meet accessibility guidelines. */ export const colorBrandBase90 = "rgb(216, 230, 254)"; /* Brand Base 80 - if used as a background, please use Brand Base 30-10 to meet accessibility guidelines. */ export const colorBrandBase80 = "rgb(170, 203, 255)"; /* Brand Base 70 - if used as a background, please use Brand Base 20-10 to meet accessibility guidelines. */ export const colorBrandBase70 = "rgb(120, 176, 253)"; /* Brand Base 65 - if used as a background, please use Brand Base 15-10 to meet accessibility guidelines. */ export const colorBrandBase65 = "rgb(87, 163, 253)"; /* Brand Base 60 - if used as a background, please use Brand Base 100 to meet accessibility guidelines. */ export const colorBrandBase60 = "rgb(27, 150, 255)"; /* Brand Base 50 - if used as a background, please use Brand Base 100-95 to meet accessibility guidelines. */ export const colorBrandBase50 = "rgb(1, 118, 211)"; /* Brand Base 40 - if used as a background, please use Brand Base 100-90 to meet accessibility guidelines. */ export const colorBrandBase40 = "rgb(11, 92, 171)"; /* Brand Base 30 - if used as a background, please use Brand Base 100-80 to meet accessibility guidelines. */ export const colorBrandBase30 = "rgb(1, 68, 134)"; /* Brand Base 20 - if used as a background, please use Brand Base 100-70 to meet accessibility guidelines. */ export const colorBrandBase20 = "rgb(3, 45, 96)"; /* Brand Base 15 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines. */ export const colorBrandBase15 = "rgb(3, 35, 77)"; /* Brand Base 10 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines. */ export const colorBrandBase10 = "rgb(0, 22, 57)"; /* Error Base 100 - if used as a background, please use Error Base 60-10 to meet accessibility guidelines. */ export const colorErrorBase100 = "rgb(255, 255, 255)"; /* Error Base 90 - if used as a background, please use Error Base 50-10 to meet accessibility guidelines. */ export const colorErrorBase90 = "rgb(254, 222, 216)"; /* Error Base 80 - if used as a background, please use Error Base 40-10 to meet accessibility guidelines. */ export const colorErrorBase80 = "rgb(254, 184, 171)"; /* Error Base 70 - if used as a background, please use Error Base 30-10 to meet accessibility guidelines. */ export const colorErrorBase70 = "rgb(254, 143, 125)"; /* Error Base 60 - if used as a background, please use Error Base 20-10 to meet accessibility guidelines. */ export const colorErrorBase60 = "rgb(254, 92, 76)"; /* Error Base 50 - if used as a background, please use Error Base 100-90 to meet accessibility guidelines. */ export const colorErrorBase50 = "rgb(234, 0, 30)"; /* Error Base 40 - if used as a background, please use Error Base 100-80 to meet accessibility guidelines. */ export const colorErrorBase40 = "rgb(186, 5, 23)"; /* Error Base 30 - if used as a background, please use Error Base 100-70 to meet accessibility guidelines. */ export const colorErrorBase30 = "rgb(142, 3, 15)"; /* Error Base 20 - if used as a background, please use Error Base 100-60 to meet accessibility guidelines. */ export const colorErrorBase20 = "rgb(100, 1, 3)"; /* Error Base 10 - if used as a background, please use Error Base 100-50 to meet accessibility guidelines. */ export const colorErrorBase10 = "rgb(48, 12, 1)"; /* Warning Base 100 - if used as a background, please use Warning Base 60-10 to meet accessibility guidelines. */ export const colorWarningBase100 = "rgb(255, 255, 255)"; /* Warning Base 90 - if used as a background, please use Warning Base 50-10 to meet accessibility guidelines. */ export const colorWarningBase90 = "rgb(254, 223, 208)"; /* Warning Base 80 - if used as a background, please use Warning Base 40-10 to meet accessibility guidelines. */ export const colorWarningBase80 = "rgb(255, 186, 144)"; /* Warning Base 70 - if used as a background, please use Warning Base 30-10 to meet accessibility guidelines. */ export const colorWarningBase70 = "rgb(254, 147, 57)"; /* Warning Base 60 - if used as a background, please use Warning Base 20-10 to meet accessibility guidelines. */ export const colorWarningBase60 = "rgb(221, 122, 1)"; /* Warning Base 50 - if used as a background, please use Warning Base 100-90 to meet accessibility guidelines. */ export const colorWarningBase50 = "rgb(169, 100, 4)"; /* Warning Base 40 - if used as a background, please use Warning Base 100-80 to meet accessibility guidelines. */ export const colorWarningBase40 = "rgb(130, 81, 1)"; /* Warning Base 30 - if used as a background, please use Warning Base 100-70 to meet accessibility guidelines. */ export const colorWarningBase30 = "rgb(95, 62, 2)"; /* Warning Base 20 - if used as a background, please use Warning Base 100-60 to meet accessibility guidelines. */ export const colorWarningBase20 = "rgb(62, 43, 2)"; /* Warning Base 10 - if used as a background, please use Warning Base 100-50 to meet accessibility guidelines. */ export const colorWarningBase10 = "rgb(32, 22, 0)"; /* Success Base 100 - if used as a background, please use Success Base 60-10 to meet accessibility guidelines. */ export const colorSuccessBase100 = "rgb(255, 255, 255)"; /* Success Base 90 - if used as a background, please use Success Base 50-10 to meet accessibility guidelines. */ export const colorSuccessBase90 = "rgb(205, 239, 196)"; /* Success Base 80 - if used as a background, please use Success Base 40-10 to meet accessibility guidelines. */ export const colorSuccessBase80 = "rgb(145, 219, 139)"; /* Success Base 70 - if used as a background, please use Success Base 30-10 to meet accessibility guidelines. */ export const colorSuccessBase70 = "rgb(69, 198, 90)"; /* Success Base 60 - if used as a background, please use Success Base 20-10 to meet accessibility guidelines. */ export const colorSuccessBase60 = "rgb(59, 167, 85)"; /* Success Base 50 - if used as a background, please use Success Base 100-90 to meet accessibility guidelines. */ export const colorSuccessBase50 = "rgb(46, 132, 74)"; /* Success Base 40 - if used as a background, please use Success Base 100-80 to meet accessibility guidelines. */ export const colorSuccessBase40 = "rgb(57, 101, 71)"; /* Success Base 30 - if used as a background, please use Success Base 100-70 to meet accessibility guidelines. */ export const colorSuccessBase30 = "rgb(25, 78, 49)"; /* Success Base 20 - if used as a background, please use Success Base 100-60 to meet accessibility guidelines. */ export const colorSuccessBase20 = "rgb(28, 51, 38)"; /* Success Base 10 - if used as a background, please use Success Base 100-50 to meet accessibility guidelines. */ export const colorSuccessBase10 = "rgb(7, 27, 18)"; /* Nuetral border color for UI elements. */ export const colorBorderBase1 = "rgb(201, 201, 201)"; /* Neutral border color for UI elements. */ export const colorBorderBase2 = "rgb(174, 174, 174)"; /* Neutral border color for UI elements. */ export const colorBorderBase3 = "rgb(147, 147, 147)"; /* Neutral border color for UI elements. */ export const colorBorderBase4 = "rgb(116, 116, 116)"; /* Brand border color for UI elements. */ export const colorBorderBrand1 = "rgb(120, 176, 253)"; /* Alternate brand border color for UI elements. */ export const colorBorderBrand2 = "rgb(27, 150, 255)"; /* Default color for hyperlinks. */ export const linkColor = "rgb(11, 92, 171)"; /* Default color on hover for hyperlinks. */ export const linkColorHover = "rgb(1, 68, 134)"; /* Default color on focus for hyperlinks. */ export const linkColorFocus = "rgb(1, 68, 134)"; /* Default color on active for hyperlinks. */ export const linkColorActive = "rgb(3, 45, 96)";