@carbon/colors 11.50.0 → 11.51.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +11 -16
- package/lib/colors.d.ts +545 -0
- package/lib/index.d.ts +8 -0
- package/lib/index.js +12 -18
- package/lib/rgb.d.ts +10 -0
- package/package.json +9 -5
- package/umd/index.js +290 -298
package/es/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
//#region src/colors.
|
|
1
|
+
//#region src/colors.ts
|
|
2
2
|
/**
|
|
3
|
-
* Copyright IBM Corp. 2018,
|
|
3
|
+
* Copyright IBM Corp. 2018, 2026
|
|
4
4
|
*
|
|
5
5
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -571,29 +571,24 @@ const hoverColors = {
|
|
|
571
571
|
warmGrayHover,
|
|
572
572
|
yellowHover
|
|
573
573
|
};
|
|
574
|
-
|
|
575
574
|
//#endregion
|
|
576
|
-
//#region src/rgb.
|
|
575
|
+
//#region src/rgb.ts
|
|
577
576
|
/**
|
|
578
|
-
* Copyright IBM Corp. 2018,
|
|
577
|
+
* Copyright IBM Corp. 2018, 2026
|
|
579
578
|
*
|
|
580
579
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
581
580
|
* LICENSE file in the root directory of this source tree.
|
|
582
581
|
*/
|
|
583
582
|
/**
|
|
584
|
-
*
|
|
585
|
-
* @param {string} hexcode
|
|
586
|
-
* @param {number} opacity
|
|
587
|
-
* @returns {string}
|
|
583
|
+
* Parses a hex code string into an RGBA color string with the given opacity.
|
|
588
584
|
*/
|
|
589
|
-
|
|
585
|
+
const rgba = (hexCode, opacity) => {
|
|
590
586
|
const values = [
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
587
|
+
hexCode.substring(1, 3),
|
|
588
|
+
hexCode.substring(3, 5),
|
|
589
|
+
hexCode.substring(5, 7)
|
|
594
590
|
].map((string) => parseInt(string, 16));
|
|
595
591
|
return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
|
|
596
|
-
}
|
|
597
|
-
|
|
592
|
+
};
|
|
598
593
|
//#endregion
|
|
599
|
-
export { black, black100, blackHover, blue, blue10, blue100, blue100Hover, blue10Hover, blue20, blue20Hover, blue30, blue30Hover, blue40, blue40Hover, blue50, blue50Hover, blue60, blue60Hover, blue70, blue70Hover, blue80, blue80Hover, blue90, blue90Hover, blueHover, colors, coolGray, coolGray10, coolGray100, coolGray100Hover, coolGray10Hover, coolGray20, coolGray20Hover, coolGray30, coolGray30Hover, coolGray40, coolGray40Hover, coolGray50, coolGray50Hover, coolGray60, coolGray60Hover, coolGray70, coolGray70Hover, coolGray80, coolGray80Hover, coolGray90, coolGray90Hover, coolGrayHover, cyan, cyan10, cyan100, cyan100Hover, cyan10Hover, cyan20, cyan20Hover, cyan30, cyan30Hover, cyan40, cyan40Hover, cyan50, cyan50Hover, cyan60, cyan60Hover, cyan70, cyan70Hover, cyan80, cyan80Hover, cyan90, cyan90Hover, cyanHover, gray, gray10, gray100, gray100Hover, gray10Hover, gray20, gray20Hover, gray30, gray30Hover, gray40, gray40Hover, gray50, gray50Hover, gray60, gray60Hover, gray70, gray70Hover, gray80, gray80Hover, gray90, gray90Hover, grayHover, green, green10, green100, green100Hover, green10Hover, green20, green20Hover, green30, green30Hover, green40, green40Hover, green50, green50Hover, green60, green60Hover, green70, green70Hover, green80, green80Hover, green90, green90Hover, greenHover, hoverColors, magenta, magenta10, magenta100, magenta100Hover, magenta10Hover, magenta20, magenta20Hover, magenta30, magenta30Hover, magenta40, magenta40Hover, magenta50, magenta50Hover, magenta60, magenta60Hover, magenta70, magenta70Hover, magenta80, magenta80Hover, magenta90, magenta90Hover, magentaHover, orange, orange10, orange100, orange100Hover, orange10Hover, orange20, orange20Hover, orange30, orange30Hover, orange40, orange40Hover, orange50, orange50Hover, orange60, orange60Hover, orange70, orange70Hover, orange80, orange80Hover, orange90, orange90Hover, orangeHover, purple, purple10, purple100, purple100Hover, purple10Hover, purple20, purple20Hover, purple30, purple30Hover, purple40, purple40Hover, purple50, purple50Hover, purple60, purple60Hover, purple70, purple70Hover, purple80, purple80Hover, purple90, purple90Hover, purpleHover, red, red10, red100, red100Hover, red10Hover, red20, red20Hover, red30, red30Hover, red40, red40Hover, red50, red50Hover, red60, red60Hover, red70, red70Hover, red80, red80Hover, red90, red90Hover, redHover, rgba, teal, teal10, teal100, teal100Hover, teal10Hover, teal20, teal20Hover, teal30, teal30Hover, teal40, teal40Hover, teal50, teal50Hover, teal60, teal60Hover, teal70, teal70Hover, teal80, teal80Hover, teal90, teal90Hover, tealHover, warmGray, warmGray10, warmGray100, warmGray100Hover, warmGray10Hover, warmGray20, warmGray20Hover, warmGray30, warmGray30Hover, warmGray40, warmGray40Hover, warmGray50, warmGray50Hover, warmGray60, warmGray60Hover, warmGray70, warmGray70Hover, warmGray80, warmGray80Hover, warmGray90, warmGray90Hover, warmGrayHover, white, white0, whiteHover, yellow, yellow10, yellow100, yellow100Hover, yellow10Hover, yellow20, yellow20Hover, yellow30, yellow30Hover, yellow40, yellow40Hover, yellow50, yellow50Hover, yellow60, yellow60Hover, yellow70, yellow70Hover, yellow80, yellow80Hover, yellow90, yellow90Hover, yellowHover };
|
|
594
|
+
export { black, black100, blackHover, blue, blue10, blue100, blue100Hover, blue10Hover, blue20, blue20Hover, blue30, blue30Hover, blue40, blue40Hover, blue50, blue50Hover, blue60, blue60Hover, blue70, blue70Hover, blue80, blue80Hover, blue90, blue90Hover, blueHover, colors, coolGray, coolGray10, coolGray100, coolGray100Hover, coolGray10Hover, coolGray20, coolGray20Hover, coolGray30, coolGray30Hover, coolGray40, coolGray40Hover, coolGray50, coolGray50Hover, coolGray60, coolGray60Hover, coolGray70, coolGray70Hover, coolGray80, coolGray80Hover, coolGray90, coolGray90Hover, coolGrayHover, cyan, cyan10, cyan100, cyan100Hover, cyan10Hover, cyan20, cyan20Hover, cyan30, cyan30Hover, cyan40, cyan40Hover, cyan50, cyan50Hover, cyan60, cyan60Hover, cyan70, cyan70Hover, cyan80, cyan80Hover, cyan90, cyan90Hover, cyanHover, gray, gray10, gray100, gray100Hover, gray10Hover, gray20, gray20Hover, gray30, gray30Hover, gray40, gray40Hover, gray50, gray50Hover, gray60, gray60Hover, gray70, gray70Hover, gray80, gray80Hover, gray90, gray90Hover, grayHover, green, green10, green100, green100Hover, green10Hover, green20, green20Hover, green30, green30Hover, green40, green40Hover, green50, green50Hover, green60, green60Hover, green70, green70Hover, green80, green80Hover, green90, green90Hover, greenHover, hoverColors, magenta, magenta10, magenta100, magenta100Hover, magenta10Hover, magenta20, magenta20Hover, magenta30, magenta30Hover, magenta40, magenta40Hover, magenta50, magenta50Hover, magenta60, magenta60Hover, magenta70, magenta70Hover, magenta80, magenta80Hover, magenta90, magenta90Hover, magentaHover, orange, orange10, orange100, orange100Hover, orange10Hover, orange20, orange20Hover, orange30, orange30Hover, orange40, orange40Hover, orange50, orange50Hover, orange60, orange60Hover, orange70, orange70Hover, orange80, orange80Hover, orange90, orange90Hover, orangeHover, purple, purple10, purple100, purple100Hover, purple10Hover, purple20, purple20Hover, purple30, purple30Hover, purple40, purple40Hover, purple50, purple50Hover, purple60, purple60Hover, purple70, purple70Hover, purple80, purple80Hover, purple90, purple90Hover, purpleHover, red, red10, red100, red100Hover, red10Hover, red20, red20Hover, red30, red30Hover, red40, red40Hover, red50, red50Hover, red60, red60Hover, red70, red70Hover, red80, red80Hover, red90, red90Hover, redHover, rgba, teal, teal10, teal100, teal100Hover, teal10Hover, teal20, teal20Hover, teal30, teal30Hover, teal40, teal40Hover, teal50, teal50Hover, teal60, teal60Hover, teal70, teal70Hover, teal80, teal80Hover, teal90, teal90Hover, tealHover, warmGray, warmGray10, warmGray100, warmGray100Hover, warmGray10Hover, warmGray20, warmGray20Hover, warmGray30, warmGray30Hover, warmGray40, warmGray40Hover, warmGray50, warmGray50Hover, warmGray60, warmGray60Hover, warmGray70, warmGray70Hover, warmGray80, warmGray80Hover, warmGray90, warmGray90Hover, warmGrayHover, white, white0, whiteHover, yellow, yellow10, yellow100, yellow100Hover, yellow10Hover, yellow20, yellow20Hover, yellow30, yellow30Hover, yellow40, yellow40Hover, yellow50, yellow50Hover, yellow60, yellow60Hover, yellow70, yellow70Hover, yellow80, yellow80Hover, yellow90, yellow90Hover, yellowHover };
|
package/lib/colors.d.ts
ADDED
|
@@ -0,0 +1,545 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export declare const black = "#000000";
|
|
8
|
+
export declare const black100 = "#000000";
|
|
9
|
+
export declare const blackHover = "#212121";
|
|
10
|
+
export declare const white = "#ffffff";
|
|
11
|
+
export declare const white0 = "#ffffff";
|
|
12
|
+
export declare const whiteHover = "#e8e8e8";
|
|
13
|
+
export declare const yellow10 = "#fcf4d6";
|
|
14
|
+
export declare const yellow20 = "#fddc69";
|
|
15
|
+
export declare const yellow30 = "#f1c21b";
|
|
16
|
+
export declare const yellow40 = "#d2a106";
|
|
17
|
+
export declare const yellow50 = "#b28600";
|
|
18
|
+
export declare const yellow60 = "#8e6a00";
|
|
19
|
+
export declare const yellow70 = "#684e00";
|
|
20
|
+
export declare const yellow80 = "#483700";
|
|
21
|
+
export declare const yellow90 = "#302400";
|
|
22
|
+
export declare const yellow100 = "#1c1500";
|
|
23
|
+
export declare const yellow: {
|
|
24
|
+
10: string;
|
|
25
|
+
20: string;
|
|
26
|
+
30: string;
|
|
27
|
+
40: string;
|
|
28
|
+
50: string;
|
|
29
|
+
60: string;
|
|
30
|
+
70: string;
|
|
31
|
+
80: string;
|
|
32
|
+
90: string;
|
|
33
|
+
100: string;
|
|
34
|
+
};
|
|
35
|
+
export declare const yellow10Hover = "#f8e6a0";
|
|
36
|
+
export declare const yellow20Hover = "#fccd27";
|
|
37
|
+
export declare const yellow30Hover = "#ddb00e";
|
|
38
|
+
export declare const yellow40Hover = "#bc9005";
|
|
39
|
+
export declare const yellow50Hover = "#9e7700";
|
|
40
|
+
export declare const yellow60Hover = "#755800";
|
|
41
|
+
export declare const yellow70Hover = "#806000";
|
|
42
|
+
export declare const yellow80Hover = "#5c4600";
|
|
43
|
+
export declare const yellow90Hover = "#3d2e00";
|
|
44
|
+
export declare const yellow100Hover = "#332600";
|
|
45
|
+
export declare const yellowHover: {
|
|
46
|
+
10: string;
|
|
47
|
+
20: string;
|
|
48
|
+
30: string;
|
|
49
|
+
40: string;
|
|
50
|
+
50: string;
|
|
51
|
+
60: string;
|
|
52
|
+
70: string;
|
|
53
|
+
80: string;
|
|
54
|
+
90: string;
|
|
55
|
+
100: string;
|
|
56
|
+
};
|
|
57
|
+
export declare const orange10 = "#fff2e8";
|
|
58
|
+
export declare const orange20 = "#ffd9be";
|
|
59
|
+
export declare const orange30 = "#ffb784";
|
|
60
|
+
export declare const orange40 = "#ff832b";
|
|
61
|
+
export declare const orange50 = "#eb6200";
|
|
62
|
+
export declare const orange60 = "#ba4e00";
|
|
63
|
+
export declare const orange70 = "#8a3800";
|
|
64
|
+
export declare const orange80 = "#5e2900";
|
|
65
|
+
export declare const orange90 = "#3e1a00";
|
|
66
|
+
export declare const orange100 = "#231000";
|
|
67
|
+
export declare const orange: {
|
|
68
|
+
10: string;
|
|
69
|
+
20: string;
|
|
70
|
+
30: string;
|
|
71
|
+
40: string;
|
|
72
|
+
50: string;
|
|
73
|
+
60: string;
|
|
74
|
+
70: string;
|
|
75
|
+
80: string;
|
|
76
|
+
90: string;
|
|
77
|
+
100: string;
|
|
78
|
+
};
|
|
79
|
+
export declare const orange10Hover = "#ffe2cc";
|
|
80
|
+
export declare const orange20Hover = "#ffc69e";
|
|
81
|
+
export declare const orange30Hover = "#ff9d57";
|
|
82
|
+
export declare const orange40Hover = "#fa6800";
|
|
83
|
+
export declare const orange50Hover = "#cc5500";
|
|
84
|
+
export declare const orange60Hover = "#9e4200";
|
|
85
|
+
export declare const orange70Hover = "#a84400";
|
|
86
|
+
export declare const orange80Hover = "#753300";
|
|
87
|
+
export declare const orange90Hover = "#522200";
|
|
88
|
+
export declare const orange100Hover = "#421e00";
|
|
89
|
+
export declare const orangeHover: {
|
|
90
|
+
10: string;
|
|
91
|
+
20: string;
|
|
92
|
+
30: string;
|
|
93
|
+
40: string;
|
|
94
|
+
50: string;
|
|
95
|
+
60: string;
|
|
96
|
+
70: string;
|
|
97
|
+
80: string;
|
|
98
|
+
90: string;
|
|
99
|
+
100: string;
|
|
100
|
+
};
|
|
101
|
+
export declare const red10 = "#fff1f1";
|
|
102
|
+
export declare const red20 = "#ffd7d9";
|
|
103
|
+
export declare const red30 = "#ffb3b8";
|
|
104
|
+
export declare const red40 = "#ff8389";
|
|
105
|
+
export declare const red50 = "#fa4d56";
|
|
106
|
+
export declare const red60 = "#da1e28";
|
|
107
|
+
export declare const red70 = "#a2191f";
|
|
108
|
+
export declare const red80 = "#750e13";
|
|
109
|
+
export declare const red90 = "#520408";
|
|
110
|
+
export declare const red100 = "#2d0709";
|
|
111
|
+
export declare const red: {
|
|
112
|
+
10: string;
|
|
113
|
+
20: string;
|
|
114
|
+
30: string;
|
|
115
|
+
40: string;
|
|
116
|
+
50: string;
|
|
117
|
+
60: string;
|
|
118
|
+
70: string;
|
|
119
|
+
80: string;
|
|
120
|
+
90: string;
|
|
121
|
+
100: string;
|
|
122
|
+
};
|
|
123
|
+
export declare const red100Hover = "#540d11";
|
|
124
|
+
export declare const red90Hover = "#66050a";
|
|
125
|
+
export declare const red80Hover = "#921118";
|
|
126
|
+
export declare const red70Hover = "#c21e25";
|
|
127
|
+
export declare const red60Hover = "#b81922";
|
|
128
|
+
export declare const red50Hover = "#ee0713";
|
|
129
|
+
export declare const red40Hover = "#ff6168";
|
|
130
|
+
export declare const red30Hover = "#ff99a0";
|
|
131
|
+
export declare const red20Hover = "#ffc2c5";
|
|
132
|
+
export declare const red10Hover = "#ffe0e0";
|
|
133
|
+
export declare const redHover: {
|
|
134
|
+
100: string;
|
|
135
|
+
90: string;
|
|
136
|
+
80: string;
|
|
137
|
+
70: string;
|
|
138
|
+
60: string;
|
|
139
|
+
50: string;
|
|
140
|
+
40: string;
|
|
141
|
+
30: string;
|
|
142
|
+
20: string;
|
|
143
|
+
10: string;
|
|
144
|
+
};
|
|
145
|
+
export declare const magenta10 = "#fff0f7";
|
|
146
|
+
export declare const magenta20 = "#ffd6e8";
|
|
147
|
+
export declare const magenta30 = "#ffafd2";
|
|
148
|
+
export declare const magenta40 = "#ff7eb6";
|
|
149
|
+
export declare const magenta50 = "#ee5396";
|
|
150
|
+
export declare const magenta60 = "#d02670";
|
|
151
|
+
export declare const magenta70 = "#9f1853";
|
|
152
|
+
export declare const magenta80 = "#740937";
|
|
153
|
+
export declare const magenta90 = "#510224";
|
|
154
|
+
export declare const magenta100 = "#2a0a18";
|
|
155
|
+
export declare const magenta: {
|
|
156
|
+
10: string;
|
|
157
|
+
20: string;
|
|
158
|
+
30: string;
|
|
159
|
+
40: string;
|
|
160
|
+
50: string;
|
|
161
|
+
60: string;
|
|
162
|
+
70: string;
|
|
163
|
+
80: string;
|
|
164
|
+
90: string;
|
|
165
|
+
100: string;
|
|
166
|
+
};
|
|
167
|
+
export declare const magenta100Hover = "#53142f";
|
|
168
|
+
export declare const magenta90Hover = "#68032e";
|
|
169
|
+
export declare const magenta80Hover = "#8e0b43";
|
|
170
|
+
export declare const magenta70Hover = "#bf1d63";
|
|
171
|
+
export declare const magenta60Hover = "#b0215f";
|
|
172
|
+
export declare const magenta50Hover = "#e3176f";
|
|
173
|
+
export declare const magenta40Hover = "#ff57a0";
|
|
174
|
+
export declare const magenta30Hover = "#ff94c3";
|
|
175
|
+
export declare const magenta20Hover = "#ffbdda";
|
|
176
|
+
export declare const magenta10Hover = "#ffe0ef";
|
|
177
|
+
export declare const magentaHover: {
|
|
178
|
+
100: string;
|
|
179
|
+
90: string;
|
|
180
|
+
80: string;
|
|
181
|
+
70: string;
|
|
182
|
+
60: string;
|
|
183
|
+
50: string;
|
|
184
|
+
40: string;
|
|
185
|
+
30: string;
|
|
186
|
+
20: string;
|
|
187
|
+
10: string;
|
|
188
|
+
};
|
|
189
|
+
export declare const purple10 = "#f6f2ff";
|
|
190
|
+
export declare const purple20 = "#e8daff";
|
|
191
|
+
export declare const purple30 = "#d4bbff";
|
|
192
|
+
export declare const purple40 = "#be95ff";
|
|
193
|
+
export declare const purple50 = "#a56eff";
|
|
194
|
+
export declare const purple60 = "#8a3ffc";
|
|
195
|
+
export declare const purple70 = "#6929c4";
|
|
196
|
+
export declare const purple80 = "#491d8b";
|
|
197
|
+
export declare const purple90 = "#31135e";
|
|
198
|
+
export declare const purple100 = "#1c0f30";
|
|
199
|
+
export declare const purple: {
|
|
200
|
+
10: string;
|
|
201
|
+
20: string;
|
|
202
|
+
30: string;
|
|
203
|
+
40: string;
|
|
204
|
+
50: string;
|
|
205
|
+
60: string;
|
|
206
|
+
70: string;
|
|
207
|
+
80: string;
|
|
208
|
+
90: string;
|
|
209
|
+
100: string;
|
|
210
|
+
};
|
|
211
|
+
export declare const purple100Hover = "#341c59";
|
|
212
|
+
export declare const purple90Hover = "#40197b";
|
|
213
|
+
export declare const purple80Hover = "#5b24ad";
|
|
214
|
+
export declare const purple70Hover = "#7c3dd6";
|
|
215
|
+
export declare const purple60Hover = "#7822fb";
|
|
216
|
+
export declare const purple50Hover = "#9352ff";
|
|
217
|
+
export declare const purple40Hover = "#ae7aff";
|
|
218
|
+
export declare const purple30Hover = "#c5a3ff";
|
|
219
|
+
export declare const purple20Hover = "#dcc7ff";
|
|
220
|
+
export declare const purple10Hover = "#ede5ff";
|
|
221
|
+
export declare const purpleHover: {
|
|
222
|
+
100: string;
|
|
223
|
+
90: string;
|
|
224
|
+
80: string;
|
|
225
|
+
70: string;
|
|
226
|
+
60: string;
|
|
227
|
+
50: string;
|
|
228
|
+
40: string;
|
|
229
|
+
30: string;
|
|
230
|
+
20: string;
|
|
231
|
+
10: string;
|
|
232
|
+
};
|
|
233
|
+
export declare const blue10 = "#edf5ff";
|
|
234
|
+
export declare const blue20 = "#d0e2ff";
|
|
235
|
+
export declare const blue30 = "#a6c8ff";
|
|
236
|
+
export declare const blue40 = "#78a9ff";
|
|
237
|
+
export declare const blue50 = "#4589ff";
|
|
238
|
+
export declare const blue60 = "#0f62fe";
|
|
239
|
+
export declare const blue70 = "#0043ce";
|
|
240
|
+
export declare const blue80 = "#002d9c";
|
|
241
|
+
export declare const blue90 = "#001d6c";
|
|
242
|
+
export declare const blue100 = "#001141";
|
|
243
|
+
export declare const blue: {
|
|
244
|
+
10: string;
|
|
245
|
+
20: string;
|
|
246
|
+
30: string;
|
|
247
|
+
40: string;
|
|
248
|
+
50: string;
|
|
249
|
+
60: string;
|
|
250
|
+
70: string;
|
|
251
|
+
80: string;
|
|
252
|
+
90: string;
|
|
253
|
+
100: string;
|
|
254
|
+
};
|
|
255
|
+
export declare const blue100Hover = "#001f75";
|
|
256
|
+
export declare const blue90Hover = "#00258a";
|
|
257
|
+
export declare const blue80Hover = "#0039c7";
|
|
258
|
+
export declare const blue70Hover = "#0053ff";
|
|
259
|
+
export declare const blue60Hover = "#0050e6";
|
|
260
|
+
export declare const blue50Hover = "#1f70ff";
|
|
261
|
+
export declare const blue40Hover = "#5c97ff";
|
|
262
|
+
export declare const blue30Hover = "#8ab6ff";
|
|
263
|
+
export declare const blue20Hover = "#b8d3ff";
|
|
264
|
+
export declare const blue10Hover = "#dbebff";
|
|
265
|
+
export declare const blueHover: {
|
|
266
|
+
100: string;
|
|
267
|
+
90: string;
|
|
268
|
+
80: string;
|
|
269
|
+
70: string;
|
|
270
|
+
60: string;
|
|
271
|
+
50: string;
|
|
272
|
+
40: string;
|
|
273
|
+
30: string;
|
|
274
|
+
20: string;
|
|
275
|
+
10: string;
|
|
276
|
+
};
|
|
277
|
+
export declare const cyan10 = "#e5f6ff";
|
|
278
|
+
export declare const cyan20 = "#bae6ff";
|
|
279
|
+
export declare const cyan30 = "#82cfff";
|
|
280
|
+
export declare const cyan40 = "#33b1ff";
|
|
281
|
+
export declare const cyan50 = "#1192e8";
|
|
282
|
+
export declare const cyan60 = "#0072c3";
|
|
283
|
+
export declare const cyan70 = "#00539a";
|
|
284
|
+
export declare const cyan80 = "#003a6d";
|
|
285
|
+
export declare const cyan90 = "#012749";
|
|
286
|
+
export declare const cyan100 = "#061727";
|
|
287
|
+
export declare const cyan: {
|
|
288
|
+
10: string;
|
|
289
|
+
20: string;
|
|
290
|
+
30: string;
|
|
291
|
+
40: string;
|
|
292
|
+
50: string;
|
|
293
|
+
60: string;
|
|
294
|
+
70: string;
|
|
295
|
+
80: string;
|
|
296
|
+
90: string;
|
|
297
|
+
100: string;
|
|
298
|
+
};
|
|
299
|
+
export declare const cyan10Hover = "#cceeff";
|
|
300
|
+
export declare const cyan20Hover = "#99daff";
|
|
301
|
+
export declare const cyan30Hover = "#57beff";
|
|
302
|
+
export declare const cyan40Hover = "#059fff";
|
|
303
|
+
export declare const cyan50Hover = "#0f7ec8";
|
|
304
|
+
export declare const cyan60Hover = "#005fa3";
|
|
305
|
+
export declare const cyan70Hover = "#0066bd";
|
|
306
|
+
export declare const cyan80Hover = "#00498a";
|
|
307
|
+
export declare const cyan90Hover = "#013360";
|
|
308
|
+
export declare const cyan100Hover = "#0b2947";
|
|
309
|
+
export declare const cyanHover: {
|
|
310
|
+
10: string;
|
|
311
|
+
20: string;
|
|
312
|
+
30: string;
|
|
313
|
+
40: string;
|
|
314
|
+
50: string;
|
|
315
|
+
60: string;
|
|
316
|
+
70: string;
|
|
317
|
+
80: string;
|
|
318
|
+
90: string;
|
|
319
|
+
100: string;
|
|
320
|
+
};
|
|
321
|
+
export declare const teal10 = "#d9fbfb";
|
|
322
|
+
export declare const teal20 = "#9ef0f0";
|
|
323
|
+
export declare const teal30 = "#3ddbd9";
|
|
324
|
+
export declare const teal40 = "#08bdba";
|
|
325
|
+
export declare const teal50 = "#009d9a";
|
|
326
|
+
export declare const teal60 = "#007d79";
|
|
327
|
+
export declare const teal70 = "#005d5d";
|
|
328
|
+
export declare const teal80 = "#004144";
|
|
329
|
+
export declare const teal90 = "#022b30";
|
|
330
|
+
export declare const teal100 = "#081a1c";
|
|
331
|
+
export declare const teal: {
|
|
332
|
+
10: string;
|
|
333
|
+
20: string;
|
|
334
|
+
30: string;
|
|
335
|
+
40: string;
|
|
336
|
+
50: string;
|
|
337
|
+
60: string;
|
|
338
|
+
70: string;
|
|
339
|
+
80: string;
|
|
340
|
+
90: string;
|
|
341
|
+
100: string;
|
|
342
|
+
};
|
|
343
|
+
export declare const teal10Hover = "#acf6f6";
|
|
344
|
+
export declare const teal20Hover = "#57e5e5";
|
|
345
|
+
export declare const teal30Hover = "#25cac8";
|
|
346
|
+
export declare const teal40Hover = "#07aba9";
|
|
347
|
+
export declare const teal50Hover = "#008a87";
|
|
348
|
+
export declare const teal60Hover = "#006b68";
|
|
349
|
+
export declare const teal70Hover = "#007070";
|
|
350
|
+
export declare const teal80Hover = "#005357";
|
|
351
|
+
export declare const teal90Hover = "#033940";
|
|
352
|
+
export declare const teal100Hover = "#0f3034";
|
|
353
|
+
export declare const tealHover: {
|
|
354
|
+
10: string;
|
|
355
|
+
20: string;
|
|
356
|
+
30: string;
|
|
357
|
+
40: string;
|
|
358
|
+
50: string;
|
|
359
|
+
60: string;
|
|
360
|
+
70: string;
|
|
361
|
+
80: string;
|
|
362
|
+
90: string;
|
|
363
|
+
100: string;
|
|
364
|
+
};
|
|
365
|
+
export declare const green10 = "#defbe6";
|
|
366
|
+
export declare const green20 = "#a7f0ba";
|
|
367
|
+
export declare const green30 = "#6fdc8c";
|
|
368
|
+
export declare const green40 = "#42be65";
|
|
369
|
+
export declare const green50 = "#24a148";
|
|
370
|
+
export declare const green60 = "#198038";
|
|
371
|
+
export declare const green70 = "#0e6027";
|
|
372
|
+
export declare const green80 = "#044317";
|
|
373
|
+
export declare const green90 = "#022d0d";
|
|
374
|
+
export declare const green100 = "#071908";
|
|
375
|
+
export declare const green: {
|
|
376
|
+
10: string;
|
|
377
|
+
20: string;
|
|
378
|
+
30: string;
|
|
379
|
+
40: string;
|
|
380
|
+
50: string;
|
|
381
|
+
60: string;
|
|
382
|
+
70: string;
|
|
383
|
+
80: string;
|
|
384
|
+
90: string;
|
|
385
|
+
100: string;
|
|
386
|
+
};
|
|
387
|
+
export declare const green10Hover = "#b6f6c8";
|
|
388
|
+
export declare const green20Hover = "#74e792";
|
|
389
|
+
export declare const green30Hover = "#36ce5e";
|
|
390
|
+
export declare const green40Hover = "#3bab5a";
|
|
391
|
+
export declare const green50Hover = "#208e3f";
|
|
392
|
+
export declare const green60Hover = "#166f31";
|
|
393
|
+
export declare const green70Hover = "#11742f";
|
|
394
|
+
export declare const green80Hover = "#05521c";
|
|
395
|
+
export declare const green90Hover = "#033b11";
|
|
396
|
+
export declare const green100Hover = "#0d300f";
|
|
397
|
+
export declare const greenHover: {
|
|
398
|
+
10: string;
|
|
399
|
+
20: string;
|
|
400
|
+
30: string;
|
|
401
|
+
40: string;
|
|
402
|
+
50: string;
|
|
403
|
+
60: string;
|
|
404
|
+
70: string;
|
|
405
|
+
80: string;
|
|
406
|
+
90: string;
|
|
407
|
+
100: string;
|
|
408
|
+
};
|
|
409
|
+
export declare const coolGray10 = "#f2f4f8";
|
|
410
|
+
export declare const coolGray20 = "#dde1e6";
|
|
411
|
+
export declare const coolGray30 = "#c1c7cd";
|
|
412
|
+
export declare const coolGray40 = "#a2a9b0";
|
|
413
|
+
export declare const coolGray50 = "#878d96";
|
|
414
|
+
export declare const coolGray60 = "#697077";
|
|
415
|
+
export declare const coolGray70 = "#4d5358";
|
|
416
|
+
export declare const coolGray80 = "#343a3f";
|
|
417
|
+
export declare const coolGray90 = "#21272a";
|
|
418
|
+
export declare const coolGray100 = "#121619";
|
|
419
|
+
export declare const coolGray: {
|
|
420
|
+
10: string;
|
|
421
|
+
20: string;
|
|
422
|
+
30: string;
|
|
423
|
+
40: string;
|
|
424
|
+
50: string;
|
|
425
|
+
60: string;
|
|
426
|
+
70: string;
|
|
427
|
+
80: string;
|
|
428
|
+
90: string;
|
|
429
|
+
100: string;
|
|
430
|
+
};
|
|
431
|
+
export declare const coolGray10Hover = "#e4e9f1";
|
|
432
|
+
export declare const coolGray20Hover = "#cdd3da";
|
|
433
|
+
export declare const coolGray30Hover = "#adb5bd";
|
|
434
|
+
export declare const coolGray40Hover = "#9199a1";
|
|
435
|
+
export declare const coolGray50Hover = "#757b85";
|
|
436
|
+
export declare const coolGray60Hover = "#585e64";
|
|
437
|
+
export declare const coolGray70Hover = "#5d646a";
|
|
438
|
+
export declare const coolGray80Hover = "#434a51";
|
|
439
|
+
export declare const coolGray90Hover = "#2b3236";
|
|
440
|
+
export declare const coolGray100Hover = "#222a2f";
|
|
441
|
+
export declare const coolGrayHover: {
|
|
442
|
+
10: string;
|
|
443
|
+
20: string;
|
|
444
|
+
30: string;
|
|
445
|
+
40: string;
|
|
446
|
+
50: string;
|
|
447
|
+
60: string;
|
|
448
|
+
70: string;
|
|
449
|
+
80: string;
|
|
450
|
+
90: string;
|
|
451
|
+
100: string;
|
|
452
|
+
};
|
|
453
|
+
export declare const gray10 = "#f4f4f4";
|
|
454
|
+
export declare const gray20 = "#e0e0e0";
|
|
455
|
+
export declare const gray30 = "#c6c6c6";
|
|
456
|
+
export declare const gray40 = "#a8a8a8";
|
|
457
|
+
export declare const gray50 = "#8d8d8d";
|
|
458
|
+
export declare const gray60 = "#6f6f6f";
|
|
459
|
+
export declare const gray70 = "#525252";
|
|
460
|
+
export declare const gray80 = "#393939";
|
|
461
|
+
export declare const gray90 = "#262626";
|
|
462
|
+
export declare const gray100 = "#161616";
|
|
463
|
+
export declare const gray: {
|
|
464
|
+
10: string;
|
|
465
|
+
20: string;
|
|
466
|
+
30: string;
|
|
467
|
+
40: string;
|
|
468
|
+
50: string;
|
|
469
|
+
60: string;
|
|
470
|
+
70: string;
|
|
471
|
+
80: string;
|
|
472
|
+
90: string;
|
|
473
|
+
100: string;
|
|
474
|
+
};
|
|
475
|
+
export declare const gray10Hover = "#e8e8e8";
|
|
476
|
+
export declare const gray20Hover = "#d1d1d1";
|
|
477
|
+
export declare const gray30Hover = "#b5b5b5";
|
|
478
|
+
export declare const gray40Hover = "#999999";
|
|
479
|
+
export declare const gray50Hover = "#7a7a7a";
|
|
480
|
+
export declare const gray60Hover = "#5e5e5e";
|
|
481
|
+
export declare const gray70Hover = "#636363";
|
|
482
|
+
export declare const gray80Hover = "#474747";
|
|
483
|
+
export declare const gray90Hover = "#333333";
|
|
484
|
+
export declare const gray100Hover = "#292929";
|
|
485
|
+
export declare const grayHover: {
|
|
486
|
+
10: string;
|
|
487
|
+
20: string;
|
|
488
|
+
30: string;
|
|
489
|
+
40: string;
|
|
490
|
+
50: string;
|
|
491
|
+
60: string;
|
|
492
|
+
70: string;
|
|
493
|
+
80: string;
|
|
494
|
+
90: string;
|
|
495
|
+
100: string;
|
|
496
|
+
};
|
|
497
|
+
export declare const warmGray10 = "#f7f3f2";
|
|
498
|
+
export declare const warmGray20 = "#e5e0df";
|
|
499
|
+
export declare const warmGray30 = "#cac5c4";
|
|
500
|
+
export declare const warmGray40 = "#ada8a8";
|
|
501
|
+
export declare const warmGray50 = "#8f8b8b";
|
|
502
|
+
export declare const warmGray60 = "#726e6e";
|
|
503
|
+
export declare const warmGray70 = "#565151";
|
|
504
|
+
export declare const warmGray80 = "#3c3838";
|
|
505
|
+
export declare const warmGray90 = "#272525";
|
|
506
|
+
export declare const warmGray100 = "#171414";
|
|
507
|
+
export declare const warmGray: {
|
|
508
|
+
10: string;
|
|
509
|
+
20: string;
|
|
510
|
+
30: string;
|
|
511
|
+
40: string;
|
|
512
|
+
50: string;
|
|
513
|
+
60: string;
|
|
514
|
+
70: string;
|
|
515
|
+
80: string;
|
|
516
|
+
90: string;
|
|
517
|
+
100: string;
|
|
518
|
+
};
|
|
519
|
+
export declare const warmGray10Hover = "#f0e8e6";
|
|
520
|
+
export declare const warmGray20Hover = "#d8d0cf";
|
|
521
|
+
export declare const warmGray30Hover = "#b9b3b1";
|
|
522
|
+
export declare const warmGray40Hover = "#9c9696";
|
|
523
|
+
export declare const warmGray50Hover = "#7f7b7b";
|
|
524
|
+
export declare const warmGray60Hover = "#605d5d";
|
|
525
|
+
export declare const warmGray70Hover = "#696363";
|
|
526
|
+
export declare const warmGray80Hover = "#4c4848";
|
|
527
|
+
export declare const warmGray90Hover = "#343232";
|
|
528
|
+
export declare const warmGray100Hover = "#2c2626";
|
|
529
|
+
export declare const warmGrayHover: {
|
|
530
|
+
10: string;
|
|
531
|
+
20: string;
|
|
532
|
+
30: string;
|
|
533
|
+
40: string;
|
|
534
|
+
50: string;
|
|
535
|
+
60: string;
|
|
536
|
+
70: string;
|
|
537
|
+
80: string;
|
|
538
|
+
90: string;
|
|
539
|
+
100: string;
|
|
540
|
+
};
|
|
541
|
+
export type ColorScale = Record<number, string>;
|
|
542
|
+
export type ColorGroup = Record<string, ColorScale>;
|
|
543
|
+
export type HoverColorGroup = Record<string, string | ColorScale>;
|
|
544
|
+
export declare const colors: ColorGroup;
|
|
545
|
+
export declare const hoverColors: HoverColorGroup;
|
package/lib/index.d.ts
ADDED
package/lib/index.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
2
|
-
|
|
3
|
-
//#region src/colors.js
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
//#region src/colors.ts
|
|
4
3
|
/**
|
|
5
|
-
* Copyright IBM Corp. 2018,
|
|
4
|
+
* Copyright IBM Corp. 2018, 2026
|
|
6
5
|
*
|
|
7
6
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
8
7
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -573,30 +572,25 @@ const hoverColors = {
|
|
|
573
572
|
warmGrayHover,
|
|
574
573
|
yellowHover
|
|
575
574
|
};
|
|
576
|
-
|
|
577
575
|
//#endregion
|
|
578
|
-
//#region src/rgb.
|
|
576
|
+
//#region src/rgb.ts
|
|
579
577
|
/**
|
|
580
|
-
* Copyright IBM Corp. 2018,
|
|
578
|
+
* Copyright IBM Corp. 2018, 2026
|
|
581
579
|
*
|
|
582
580
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
583
581
|
* LICENSE file in the root directory of this source tree.
|
|
584
582
|
*/
|
|
585
583
|
/**
|
|
586
|
-
*
|
|
587
|
-
* @param {string} hexcode
|
|
588
|
-
* @param {number} opacity
|
|
589
|
-
* @returns {string}
|
|
584
|
+
* Parses a hex code string into an RGBA color string with the given opacity.
|
|
590
585
|
*/
|
|
591
|
-
|
|
586
|
+
const rgba = (hexCode, opacity) => {
|
|
592
587
|
const values = [
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
588
|
+
hexCode.substring(1, 3),
|
|
589
|
+
hexCode.substring(3, 5),
|
|
590
|
+
hexCode.substring(5, 7)
|
|
596
591
|
].map((string) => parseInt(string, 16));
|
|
597
592
|
return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
|
|
598
|
-
}
|
|
599
|
-
|
|
593
|
+
};
|
|
600
594
|
//#endregion
|
|
601
595
|
exports.black = black;
|
|
602
596
|
exports.black100 = black100;
|
|
@@ -870,4 +864,4 @@ exports.yellow80 = yellow80;
|
|
|
870
864
|
exports.yellow80Hover = yellow80Hover;
|
|
871
865
|
exports.yellow90 = yellow90;
|
|
872
866
|
exports.yellow90Hover = yellow90Hover;
|
|
873
|
-
exports.yellowHover = yellowHover;
|
|
867
|
+
exports.yellowHover = yellowHover;
|
package/lib/rgb.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Parses a hex code string into an RGBA color string with the given opacity.
|
|
9
|
+
*/
|
|
10
|
+
export declare const rgba: (hexCode: string, opacity: number) => string;
|