UNPKG

@salesforce-ux/design-system

Version:

Salesforce Lightning Design System

lightningdesignsystem.com

salesforce-ux/design-system

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