@charcoal-ui/theme 3.13.1 → 3.15.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.
Files changed (11) hide show
  1. package/dist/docs/ThemeColors.d.ts +2 -0
  2. package/dist/docs/ThemeColors.d.ts.map +1 -0
  3. package/package.json +4 -4
  4. package/src/css/_variables_dark.css +506 -0
  5. package/src/css/_variables_light.css +506 -0
  6. package/src/docs/Color.mdx +10 -0
  7. package/src/docs/README.mdx +57 -0
  8. package/src/docs/ThemeColors.tsx +65 -0
  9. package/src/json/base.json +327 -0
  10. package/src/json/pixiv-dark.json +190 -0
  11. package/src/json/pixiv-light.json +190 -0
package/dist/docs/ThemeColors.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const ThemeColors: () => JSX.Element;
2
+ //# sourceMappingURL=ThemeColors.d.ts.map
package/dist/docs/ThemeColors.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeColors.d.ts","sourceRoot":"","sources":["../../src/docs/ThemeColors.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,WAAW,mBAkCvB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charcoal-ui/theme",
3
- "version": "3.13.1",
3
+ "version": "3.15.0",
4
4
  "license": "Apache-2.0",
5
5
  "main": "./dist/index.cjs.js",
6
6
  "module": "./dist/index.esm.js",
@@ -29,8 +29,8 @@
29
29
  "typescript": "^4.9.5"
30
30
  },
31
31
  "dependencies": {
32
- "@charcoal-ui/foundation": "^3.13.1",
33
- "@charcoal-ui/utils": "^3.13.1",
32
+ "@charcoal-ui/foundation": "^3.15.0",
33
+ "@charcoal-ui/utils": "^3.15.0",
34
34
  "polished": "^4.1.4"
35
35
  },
36
36
  "files": [
@@ -46,5 +46,5 @@
46
46
  "url": "https://github.com/pixiv/charcoal.git",
47
47
  "directory": "packages/theme"
48
48
  },
49
- "gitHead": "f347c33a7189c7e2d7e8d4ee698f12f9b406fb16"
49
+ "gitHead": "86530afb8f352115d17821c8e873258fdb5a1a27"
50
50
  }
package/src/css/_variables_dark.css ADDED
@@ -0,0 +1,506 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 26 Jul 2024 05:09:39 GMT
4
+ */
5
+
6
+ :root[data-theme='dark'] {
7
+ --charcoal-radius-oval: 999999;
8
+ --charcoal-text-font-family-sans: Sarasa UI J;
9
+ --charcoal-text-line-height-100: 72;
10
+ --charcoal-text-line-height-90: 64;
11
+ --charcoal-text-line-height-80: 56;
12
+ --charcoal-text-line-height-70: 52;
13
+ --charcoal-text-line-height-60: 44;
14
+ --charcoal-text-line-height-50: 40;
15
+ --charcoal-text-line-height-40: 36;
16
+ --charcoal-text-line-height-30: 32;
17
+ --charcoal-text-line-height-20: 28;
18
+ --charcoal-text-line-height-10: 24;
19
+ --charcoal-text-line-height-5: 20;
20
+ --charcoal-text-line-height-1: 18;
21
+ --charcoal-text-font-weight-70: 700;
22
+ --charcoal-text-font-weight-40: 400;
23
+ --charcoal-text-line-height-0: 16;
24
+ --charcoal-text-font-size-120: 60;
25
+ --charcoal-text-font-size-110: 50;
26
+ --charcoal-text-font-size-100: 45;
27
+ --charcoal-text-font-size-90: 40;
28
+ --charcoal-text-font-size-80: 36;
29
+ --charcoal-text-font-size-70: 32;
30
+ --charcoal-text-font-size-60: 28;
31
+ --charcoal-text-font-size-50: 25;
32
+ --charcoal-text-font-size-40: 22;
33
+ --charcoal-text-font-size-30: 20;
34
+ --charcoal-text-font-size-20: 18;
35
+ --charcoal-text-font-size-10: 16;
36
+ --charcoal-text-font-size-5: 14;
37
+ --charcoal-text-font-size-1: 12;
38
+ --charcoal-text-font-size-0: 11;
39
+ --charcoal-space-target-l: 48;
40
+ --charcoal-space-target-m: 40;
41
+ --charcoal-space-target-s: 32;
42
+ --charcoal-space-target-xs: 24;
43
+ --charcoal-space-999: 999999;
44
+ --charcoal-space-100: 440;
45
+ --charcoal-space-90: 272;
46
+ --charcoal-space-80: 168;
47
+ --charcoal-space-70: 104;
48
+ --charcoal-space-66: 96;
49
+ --charcoal-space-63: 80;
50
+ --charcoal-space-60: 64;
51
+ --charcoal-space-55: 48;
52
+ --charcoal-space-50: 40;
53
+ --charcoal-space-46: 32;
54
+ --charcoal-space-43: 28;
55
+ --charcoal-space-40: 24;
56
+ --charcoal-space-35: 20;
57
+ --charcoal-space-30: 16;
58
+ --charcoal-space-25: 12;
59
+ --charcoal-space-20: 8;
60
+ --charcoal-space-15: 6;
61
+ --charcoal-space-10: 4;
62
+ --charcoal-space-1: 2;
63
+ --charcoal-space-0: 0;
64
+ --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
65
+ --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
66
+ --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
67
+ --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
68
+ --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
69
+ --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
70
+ --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
71
+ --charcoal-color-container-subtle: rgba(228, 228, 228, 0.02);
72
+ --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1);
73
+ --charcoal-color-dark-magenta-80: rgba(247, 184, 213, 1);
74
+ --charcoal-color-dark-magenta-70: rgba(243, 163, 200, 1);
75
+ --charcoal-color-dark-magenta-60: rgba(240, 146, 191, 1);
76
+ --charcoal-color-dark-magenta-50: rgba(220, 114, 168, 1);
77
+ --charcoal-color-dark-magenta-40: rgba(202, 91, 149, 1);
78
+ --charcoal-color-dark-magenta-30: rgba(185, 64, 130, 1);
79
+ --charcoal-color-dark-magenta-20: rgba(124, 58, 91, 1);
80
+ --charcoal-color-dark-magenta-10: rgba(69, 44, 56, 1);
81
+ --charcoal-color-dark-magenta-5: rgba(48, 36, 42, 1);
82
+ --charcoal-color-dark-magenta-0: rgba(31, 31, 31, 1);
83
+ --charcoal-color-dark-magenta--5: rgba(21, 21, 21, 1);
84
+ --charcoal-color-dark-magenta--10: rgba(6, 6, 6, 1);
85
+ --charcoal-color-dark-purple-90: rgba(233, 223, 255, 1);
86
+ --charcoal-color-dark-purple-80: rgba(210, 192, 245, 1);
87
+ --charcoal-color-dark-purple-70: rgba(201, 176, 249, 1);
88
+ --charcoal-color-dark-purple-60: rgba(191, 160, 246, 1);
89
+ --charcoal-color-dark-purple-50: rgba(169, 133, 229, 1);
90
+ --charcoal-color-dark-purple-40: rgba(149, 110, 210, 1);
91
+ --charcoal-color-dark-purple-30: rgba(131, 88, 194, 1);
92
+ --charcoal-color-dark-purple-20: rgba(93, 68, 132, 1);
93
+ --charcoal-color-dark-purple-10: rgba(56, 48, 71, 1);
94
+ --charcoal-color-dark-purple-5: rgba(42, 38, 49, 1);
95
+ --charcoal-color-dark-purple-0: rgba(31, 31, 31, 1);
96
+ --charcoal-color-dark-purple--5: rgba(21, 21, 21, 1);
97
+ --charcoal-color-dark-purple--10: rgba(6, 6, 6, 1);
98
+ --charcoal-color-dark-indigo-90: rgba(222, 227, 255, 1);
99
+ --charcoal-color-dark-indigo-80: rgba(192, 199, 248, 1);
100
+ --charcoal-color-dark-indigo-70: rgba(175, 184, 254, 1);
101
+ --charcoal-color-dark-indigo-60: rgba(160, 170, 249, 1);
102
+ --charcoal-color-dark-indigo-50: rgba(135, 143, 231, 1);
103
+ --charcoal-color-dark-indigo-40: rgba(115, 123, 219, 1);
104
+ --charcoal-color-dark-indigo-30: rgba(96, 100, 199, 1);
105
+ --charcoal-color-dark-indigo-20: rgba(72, 76, 134, 1);
106
+ --charcoal-color-dark-indigo-10: rgba(48, 51, 74, 1);
107
+ --charcoal-color-dark-indigo-5: rgba(39, 40, 46, 1);
108
+ --charcoal-color-dark-indigo-0: rgba(31, 31, 31, 1);
109
+ --charcoal-color-dark-indigo--5: rgba(21, 21, 21, 1);
110
+ --charcoal-color-dark-indigo--10: rgba(6, 6, 6, 1);
111
+ --charcoal-color-dark-blue-90: rgba(207, 230, 253, 1);
112
+ --charcoal-color-dark-blue-80: rgba(166, 205, 245, 1);
113
+ --charcoal-color-dark-blue-70: rgba(139, 193, 248, 1);
114
+ --charcoal-color-dark-blue-60: rgba(114, 181, 245, 1);
115
+ --charcoal-color-dark-blue-50: rgba(83, 156, 224, 1);
116
+ --charcoal-color-dark-blue-40: rgba(55, 136, 208, 1);
117
+ --charcoal-color-dark-blue-30: rgba(8, 114, 190, 1);
118
+ --charcoal-color-dark-blue-20: rgba(39, 84, 126, 1);
119
+ --charcoal-color-dark-blue-10: rgba(36, 55, 73, 1);
120
+ --charcoal-color-dark-blue-5: rgba(33, 41, 50, 1);
121
+ --charcoal-color-dark-blue-0: rgba(31, 31, 31, 1);
122
+ --charcoal-color-dark-blue--5: rgba(21, 21, 21, 1);
123
+ --charcoal-color-dark-blue--10: rgba(6, 6, 6, 1);
124
+ --charcoal-color-dark-turquoise-90: rgba(180, 239, 234, 1);
125
+ --charcoal-color-dark-turquoise-80: rgba(144, 213, 207, 1);
126
+ --charcoal-color-dark-turquoise-70: rgba(118, 205, 199, 1);
127
+ --charcoal-color-dark-turquoise-60: rgba(84, 193, 186, 1);
128
+ --charcoal-color-dark-turquoise-50: rgba(32, 170, 164, 1);
129
+ --charcoal-color-dark-turquoise-40: rgba(0, 147, 142, 1);
130
+ --charcoal-color-dark-turquoise-30: rgba(0, 123, 118, 1);
131
+ --charcoal-color-dark-turquoise-20: rgba(0, 91, 88, 1);
132
+ --charcoal-color-dark-turquoise-10: rgba(26, 60, 58, 1);
133
+ --charcoal-color-dark-turquoise-5: rgba(35, 42, 41, 1);
134
+ --charcoal-color-dark-turquoise-0: rgba(31, 31, 31, 1);
135
+ --charcoal-color-dark-turquoise--5: rgba(21, 21, 21, 1);
136
+ --charcoal-color-dark-turquoise--10: rgba(6, 6, 6, 1);
137
+ --charcoal-color-dark-green-90: rgba(191, 241, 186, 1);
138
+ --charcoal-color-dark-green-80: rgba(161, 215, 155, 1);
139
+ --charcoal-color-dark-green-70: rgba(141, 204, 135, 1);
140
+ --charcoal-color-dark-green-60: rgba(120, 194, 113, 1);
141
+ --charcoal-color-dark-green-50: rgba(86, 169, 79, 1);
142
+ --charcoal-color-dark-green-40: rgba(58, 150, 52, 1);
143
+ --charcoal-color-dark-green-30: rgba(13, 129, 5, 1);
144
+ --charcoal-color-dark-green-20: rgba(39, 92, 35, 1);
145
+ --charcoal-color-dark-green-10: rgba(41, 59, 40, 1);
146
+ --charcoal-color-dark-green-5: rgba(37, 43, 37, 1);
147
+ --charcoal-color-dark-green-0: rgba(31, 31, 31, 1);
148
+ --charcoal-color-dark-green--5: rgba(21, 21, 21, 1);
149
+ --charcoal-color-dark-green--10: rgba(6, 6, 6, 1);
150
+ --charcoal-color-dark-yellow-90: rgba(252, 227, 145, 1);
151
+ --charcoal-color-dark-yellow-80: rgba(231, 199, 80, 1);
152
+ --charcoal-color-dark-yellow-70: rgba(222, 185, 7, 1);
153
+ --charcoal-color-dark-yellow-60: rgba(222, 167, 29, 1);
154
+ --charcoal-color-dark-yellow-50: rgba(199, 140, 10, 1);
155
+ --charcoal-color-dark-yellow-40: rgba(174, 121, 14, 1);
156
+ --charcoal-color-dark-yellow-30: rgba(153, 99, 8, 1);
157
+ --charcoal-color-dark-yellow-20: rgba(109, 75, 31, 1);
158
+ --charcoal-color-dark-yellow-10: rgba(66, 51, 30, 1);
159
+ --charcoal-color-dark-yellow-5: rgba(44, 40, 35, 1);
160
+ --charcoal-color-dark-yellow-0: rgba(31, 31, 31, 1);
161
+ --charcoal-color-dark-yellow--5: rgba(21, 21, 21, 1);
162
+ --charcoal-color-dark-yellow--10: rgba(6, 6, 6, 1);
163
+ --charcoal-color-dark-orange-90: rgba(252, 221, 207, 1);
164
+ --charcoal-color-dark-orange-80: rgba(245, 188, 163, 1);
165
+ --charcoal-color-dark-orange-70: rgba(248, 170, 135, 1);
166
+ --charcoal-color-dark-orange-60: rgba(246, 151, 107, 1);
167
+ --charcoal-color-dark-orange-50: rgba(229, 121, 68, 1);
168
+ --charcoal-color-dark-orange-40: rgba(212, 97, 41, 1);
169
+ --charcoal-color-dark-orange-30: rgba(188, 74, 14, 1);
170
+ --charcoal-color-dark-orange-20: rgba(134, 58, 22, 1);
171
+ --charcoal-color-dark-orange-10: rgba(72, 48, 38, 1);
172
+ --charcoal-color-dark-orange-5: rgba(48, 39, 34, 1);
173
+ --charcoal-color-dark-orange-0: rgba(31, 31, 31, 1);
174
+ --charcoal-color-dark-orange--5: rgba(21, 21, 21, 1);
175
+ --charcoal-color-dark-orange--10: rgba(6, 6, 6, 1);
176
+ --charcoal-color-dark-red-90: rgba(254, 219, 214, 1);
177
+ --charcoal-color-dark-red-80: rgba(249, 186, 177, 1);
178
+ --charcoal-color-dark-red-70: rgba(254, 167, 155, 1);
179
+ --charcoal-color-dark-red-60: rgba(252, 147, 134, 1);
180
+ --charcoal-color-dark-red-50: rgba(233, 114, 102, 1);
181
+ --charcoal-color-dark-red-40: rgba(217, 88, 76, 1);
182
+ --charcoal-color-dark-red-30: rgba(197, 60, 51, 1);
183
+ --charcoal-color-dark-red-20: rgba(136, 54, 46, 1);
184
+ --charcoal-color-dark-red-10: rgba(73, 47, 43, 1);
185
+ --charcoal-color-dark-red-5: rgba(47, 39, 38, 1);
186
+ --charcoal-color-dark-red-0: rgba(31, 31, 31, 1);
187
+ --charcoal-color-dark-red--5: rgba(21, 21, 21, 1);
188
+ --charcoal-color-dark-red--10: rgba(6, 6, 6, 1);
189
+ --charcoal-color-dark-neutral-90: rgba(228, 228, 228, 1);
190
+ --charcoal-color-dark-neutral-80: rgba(202, 202, 202, 1);
191
+ --charcoal-color-dark-neutral-70: rgba(188, 188, 188, 1);
192
+ --charcoal-color-dark-neutral-60: rgba(175, 175, 175, 1);
193
+ --charcoal-color-dark-neutral-50: rgba(151, 151, 151, 1);
194
+ --charcoal-color-dark-neutral-40: rgba(130, 130, 130, 1);
195
+ --charcoal-color-dark-neutral-30: rgba(112, 112, 112, 1);
196
+ --charcoal-color-dark-neutral-20: rgba(81, 81, 81, 1);
197
+ --charcoal-color-dark-neutral-10: rgba(51, 51, 51, 1);
198
+ --charcoal-color-dark-neutral-5: rgba(41, 41, 41, 1);
199
+ --charcoal-color-dark-neutral-0: rgba(31, 31, 31, 1);
200
+ --charcoal-color-dark-neutral--5: rgba(21, 21, 21, 1);
201
+ --charcoal-color-dark-neutral-a-80: rgba(228, 228, 228, 0.87);
202
+ --charcoal-color-dark-neutral-a-70: rgba(228, 228, 228, 0.795);
203
+ --charcoal-color-dark-neutral-a-60: rgba(228, 228, 228, 0.73);
204
+ --charcoal-color-dark-neutral-a-50: rgba(228, 228, 228, 0.61);
205
+ --charcoal-color-dark-neutral-a-40: rgba(228, 228, 228, 0.505);
206
+ --charcoal-color-dark-neutral-a-30: rgba(228, 228, 228, 0.41);
207
+ --charcoal-color-dark-neutral-a-20: rgba(228, 228, 228, 0.255);
208
+ --charcoal-color-dark-neutral-a-10: rgba(228, 228, 228, 0.1);
209
+ --charcoal-color-dark-neutral-a-5: rgba(228, 228, 228, 0.05);
210
+ --charcoal-color-dark-neutral-a-0: rgba(228, 228, 228, 0);
211
+ --charcoal-color-dark-neutral-a--5: rgba(6, 6, 6, 0.41);
212
+ --charcoal-color-dark-neutral-a--10: rgba(6, 6, 6, 1);
213
+ --charcoal-color-dark-neutral--10: rgba(6, 6, 6, 1);
214
+ --charcoal-color-light-magenta-90: rgba(59, 5, 37, 1);
215
+ --charcoal-color-light-magenta-80: rgba(98, 27, 67, 1);
216
+ --charcoal-color-light-magenta-70: rgba(141, 33, 96, 1);
217
+ --charcoal-color-light-magenta-60: rgba(196, 53, 135, 1);
218
+ --charcoal-color-light-magenta-50: rgba(235, 95, 170, 1);
219
+ --charcoal-color-light-magenta-40: rgba(250, 131, 192, 1);
220
+ --charcoal-color-light-magenta-30: rgba(245, 173, 206, 1);
221
+ --charcoal-color-light-magenta-20: rgba(255, 204, 226, 1);
222
+ --charcoal-color-light-magenta-10: rgba(251, 226, 237, 1);
223
+ --charcoal-color-light-magenta-5: rgba(252, 239, 244, 1);
224
+ --charcoal-color-light-purple-90: rgba(40, 16, 70, 1);
225
+ --charcoal-color-light-purple-80: rgba(70, 32, 115, 1);
226
+ --charcoal-color-light-purple-70: rgba(103, 39, 171, 1);
227
+ --charcoal-color-light-purple-60: rgba(143, 77, 225, 1);
228
+ --charcoal-color-light-purple-50: rgba(173, 120, 252, 1);
229
+ --charcoal-color-light-purple-40: rgba(190, 153, 253, 1);
230
+ --charcoal-color-light-purple-30: rgba(207, 183, 253, 1);
231
+ --charcoal-color-light-purple-20: rgba(224, 210, 253, 1);
232
+ --charcoal-color-light-purple-10: rgba(236, 229, 251, 1);
233
+ --charcoal-color-light-purple-5: rgba(244, 241, 252, 1);
234
+ --charcoal-color-light-indigo-90: rgba(24, 24, 70, 1);
235
+ --charcoal-color-light-indigo-80: rgba(45, 47, 109, 1);
236
+ --charcoal-color-light-indigo-70: rgba(68, 70, 155, 1);
237
+ --charcoal-color-light-indigo-60: rgba(95, 97, 222, 1);
238
+ --charcoal-color-light-indigo-50: rgba(129, 136, 253, 1);
239
+ --charcoal-color-light-indigo-40: rgba(156, 165, 252, 1);
240
+ --charcoal-color-light-indigo-30: rgba(181, 189, 253, 1);
241
+ --charcoal-color-light-indigo-20: rgba(210, 216, 252, 1);
242
+ --charcoal-color-light-indigo-10: rgba(226, 231, 253, 1);
243
+ --charcoal-color-light-indigo-5: rgba(241, 242, 253, 1);
244
+ --charcoal-color-light-blue-90: rgba(3, 35, 63, 1);
245
+ --charcoal-color-light-blue-80: rgba(19, 58, 93, 1);
246
+ --charcoal-color-light-blue-70: rgba(24, 81, 130, 1);
247
+ --charcoal-color-light-blue-60: rgba(31, 117, 188, 1);
248
+ --charcoal-color-light-blue-50: rgba(0, 150, 250, 1);
249
+ --charcoal-color-light-blue-40: rgba(85, 178, 253, 1);
250
+ --charcoal-color-light-blue-30: rgba(137, 200, 253, 1);
251
+ --charcoal-color-light-blue-20: rgba(188, 222, 252, 1);
252
+ --charcoal-color-light-blue-10: rgba(216, 235, 251, 1);
253
+ --charcoal-color-light-blue-5: rgba(236, 244, 253, 1);
254
+ --charcoal-color-light-blue-0: rgba(255, 255, 255, 1);
255
+ --charcoal-color-light-turquoise-90: rgba(1, 37, 37, 1);
256
+ --charcoal-color-light-turquoise-80: rgba(1, 61, 62, 1);
257
+ --charcoal-color-light-turquoise-70: rgba(3, 87, 89, 1);
258
+ --charcoal-color-light-turquoise-60: rgba(11, 126, 128, 1);
259
+ --charcoal-color-light-turquoise-50: rgba(27, 161, 163, 1);
260
+ --charcoal-color-light-turquoise-40: rgba(63, 184, 186, 1);
261
+ --charcoal-color-light-turquoise-30: rgba(109, 204, 205, 1);
262
+ --charcoal-color-light-turquoise-20: rgba(152, 228, 229, 1);
263
+ --charcoal-color-light-turquoise-10: rgba(196, 240, 241, 1);
264
+ --charcoal-color-light-turquoise-5: rgba(225, 249, 249, 1);
265
+ --charcoal-color-light-turquoise-0: rgba(255, 255, 255, 1);
266
+ --charcoal-color-light-green-90: rgba(1, 40, 0, 1);
267
+ --charcoal-color-light-green-80: rgba(7, 64, 4, 1);
268
+ --charcoal-color-light-green-70: rgba(4, 93, 0, 1);
269
+ --charcoal-color-light-green-60: rgba(17, 131, 8, 1);
270
+ --charcoal-color-light-green-50: rgba(37, 170, 28, 1);
271
+ --charcoal-color-light-green-40: rgba(80, 192, 72, 1);
272
+ --charcoal-color-light-green-30: rgba(121, 214, 112, 1);
273
+ --charcoal-color-light-green-20: rgba(164, 234, 157, 1);
274
+ --charcoal-color-light-green-10: rgba(204, 243, 200, 1);
275
+ --charcoal-color-light-green-5: rgba(234, 248, 232, 1);
276
+ --charcoal-color-light-green-0: rgba(255, 255, 255, 1);
277
+ --charcoal-color-light-yellow-90: rgba(44, 28, 0, 1);
278
+ --charcoal-color-light-yellow-80: rgba(74, 51, 7, 1);
279
+ --charcoal-color-light-yellow-70: rgba(110, 72, 5, 1);
280
+ --charcoal-color-light-yellow-60: rgba(161, 99, 9, 1);
281
+ --charcoal-color-light-yellow-50: rgba(205, 131, 2, 1);
282
+ --charcoal-color-light-yellow-40: rgba(231, 157, 20, 1);
283
+ --charcoal-color-light-yellow-30: rgba(245, 183, 17, 1);
284
+ --charcoal-color-light-yellow-20: rgba(254, 214, 61, 1);
285
+ --charcoal-color-light-yellow-10: rgba(246, 232, 176, 1);
286
+ --charcoal-color-light-yellow-5: rgba(250, 243, 221, 1);
287
+ --charcoal-color-light-yellow-0: rgba(255, 255, 255, 1);
288
+ --charcoal-color-light-orange-90: rgba(55, 18, 2, 1);
289
+ --charcoal-color-light-orange-80: rgba(91, 38, 13, 1);
290
+ --charcoal-color-light-orange-70: rgba(132, 54, 7, 1);
291
+ --charcoal-color-light-orange-60: rgba(190, 79, 4, 1);
292
+ --charcoal-color-light-orange-50: rgba(242, 105, 21, 1);
293
+ --charcoal-color-light-orange-40: rgba(253, 143, 53, 1);
294
+ --charcoal-color-light-orange-30: rgba(254, 176, 121, 1);
295
+ --charcoal-color-light-orange-20: rgba(253, 209, 177, 1);
296
+ --charcoal-color-light-orange-10: rgba(252, 229, 211, 1);
297
+ --charcoal-color-light-orange-5: rgba(253, 241, 229, 1);
298
+ --charcoal-color-light-red-90: rgba(66, 0, 1, 1);
299
+ --charcoal-color-light-red-80: rgba(103, 22, 17, 1);
300
+ --charcoal-color-light-red-70: rgba(147, 33, 28, 1);
301
+ --charcoal-color-light-red-60: rgba(206, 54, 46, 1);
302
+ --charcoal-color-light-red-50: rgba(253, 91, 78, 1);
303
+ --charcoal-color-light-red-40: rgba(252, 138, 124, 1);
304
+ --charcoal-color-light-red-30: rgba(253, 174, 163, 1);
305
+ --charcoal-color-light-red-20: rgba(253, 206, 199, 1);
306
+ --charcoal-color-light-red-10: rgba(250, 228, 225, 1);
307
+ --charcoal-color-light-red-5: rgba(253, 240, 237, 1);
308
+ --charcoal-color-light-red-0: rgba(255, 255, 255, 1);
309
+ --charcoal-color-light-neutral-90: rgba(31, 31, 31, 1);
310
+ --charcoal-color-light-neutral-80: rgba(56, 56, 56, 1);
311
+ --charcoal-color-light-neutral-70: rgba(81, 81, 81, 1);
312
+ --charcoal-color-light-neutral-60: rgba(113, 113, 113, 1);
313
+ --charcoal-color-light-neutral-50: rgba(148, 148, 148, 1);
314
+ --charcoal-color-light-neutral-40: rgba(172, 172, 172, 1);
315
+ --charcoal-color-light-neutral-30: rgba(194, 194, 194, 1);
316
+ --charcoal-color-light-neutral-20: rgba(217, 217, 217, 1);
317
+ --charcoal-color-light-neutral-10: rgba(232, 232, 232, 1);
318
+ --charcoal-color-light-neutral-5: rgba(243, 243, 243, 1);
319
+ --charcoal-color-light-neutral-a-80: rgba(31, 31, 31, 0.885);
320
+ --charcoal-color-light-neutral-a-70: rgba(31, 31, 31, 0.775);
321
+ --charcoal-color-light-neutral-a-60: rgba(31, 31, 31, 0.635);
322
+ --charcoal-color-light-neutral-a-50: rgba(31, 31, 31, 0.475);
323
+ --charcoal-color-light-neutral-a-40: rgba(31, 31, 31, 0.37);
324
+ --charcoal-color-light-neutral-a-30: rgba(31, 31, 31, 0.27);
325
+ --charcoal-color-light-neutral-a-20: rgba(31, 31, 31, 0.17);
326
+ --charcoal-color-light-neutral-a-10: rgba(31, 31, 31, 0.102);
327
+ --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
328
+ --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0);
329
+ --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
330
+ --charcoal-space-layout-100: var(--charcoal-space-100);
331
+ --charcoal-space-layout-90: var(--charcoal-space-90);
332
+ --charcoal-space-layout-80: var(--charcoal-space-80);
333
+ --charcoal-space-layout-70: var(--charcoal-space-70);
334
+ --charcoal-space-layout-60: var(--charcoal-space-60);
335
+ --charcoal-space-layout-50: var(--charcoal-space-50);
336
+ --charcoal-space-layout-40: var(--charcoal-space-40);
337
+ --charcoal-space-layout-30: var(--charcoal-space-30);
338
+ --charcoal-space-layout-20: var(--charcoal-space-20);
339
+ --charcoal-space-layout-10: var(--charcoal-space-10);
340
+ --charcoal-space-layout-0: var(--charcoal-space-0);
341
+ --charcoal-space-component-66: var(--charcoal-space-66);
342
+ --charcoal-space-component-63: var(--charcoal-space-63);
343
+ --charcoal-space-component-60: var(--charcoal-space-60);
344
+ --charcoal-space-component-55: var(--charcoal-space-55);
345
+ --charcoal-space-component-50: var(--charcoal-space-50);
346
+ --charcoal-space-component-46: var(--charcoal-space-46);
347
+ --charcoal-space-component-43: var(--charcoal-space-43);
348
+ --charcoal-space-component-40: var(--charcoal-space-40);
349
+ --charcoal-space-component-35: var(--charcoal-space-35);
350
+ --charcoal-space-component-30: var(--charcoal-space-30);
351
+ --charcoal-space-component-25: var(--charcoal-space-25);
352
+ --charcoal-space-component-20: var(--charcoal-space-20);
353
+ --charcoal-space-component-15: var(--charcoal-space-15);
354
+ --charcoal-space-component-10: var(--charcoal-space-10);
355
+ --charcoal-space-component-1: var(--charcoal-space-1);
356
+ --charcoal-space-component-0: var(--charcoal-space-0);
357
+ --charcoal-color-border-negative: var(--charcoal-color-dark-red-20);
358
+ --charcoal-color-border-focus-2: var(--charcoal-color-dark-blue-20);
359
+ --charcoal-color-border-disable: var(--charcoal-color-dark-neutral-a-5);
360
+ --charcoal-color-border-focus-1: var(--charcoal-color-dark-blue-60);
361
+ --charcoal-color-border-secondary: var(--charcoal-color-dark-neutral-a-10);
362
+ --charcoal-color-border-default: var(--charcoal-color-dark-neutral-30);
363
+ --charcoal-color-icon-on-neutral-press: var(--charcoal-color-dark-neutral-90);
364
+ --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-dark-neutral-90);
365
+ --charcoal-color-icon-on-neutral-default: var(--charcoal-color-dark-neutral-90);
366
+ --charcoal-color-text-brand-premium-default: var(--charcoal-brand-color-premium);
367
+ --charcoal-color-text-on-hud-press: var(--charcoal-color-light-neutral-90);
368
+ --charcoal-color-text-on-hud-hover: var(--charcoal-color-light-neutral-90);
369
+ --charcoal-color-text-on-hud-default: var(--charcoal-color-light-neutral-90);
370
+ --charcoal-color-text-on-discovery-press: var(--charcoal-color-dark-neutral-90);
371
+ --charcoal-color-text-on-discovery-hover: var(--charcoal-color-dark-neutral-90);
372
+ --charcoal-color-text-on-discovery-default: var(--charcoal-color-dark-neutral-90);
373
+ --charcoal-color-text-on-notice-press: var(--charcoal-color-dark-neutral-5);
374
+ --charcoal-color-text-on-notice-hover: var(--charcoal-color-dark-neutral-5);
375
+ --charcoal-color-text-on-notice-default: var(--charcoal-color-dark-neutral-5);
376
+ --charcoal-color-text-on-positive-press: var(--charcoal-color-dark-neutral-90);
377
+ --charcoal-color-text-on-positive-hover: var(--charcoal-color-dark-neutral-90);
378
+ --charcoal-color-text-on-positive-default: var(--charcoal-color-dark-neutral-90);
379
+ --charcoal-color-text-on-negative-press: var(--charcoal-color-dark-neutral-90);
380
+ --charcoal-color-text-on-negative-hover: var(--charcoal-color-dark-neutral-90);
381
+ --charcoal-color-text-on-negative-default: var(--charcoal-color-dark-neutral-90);
382
+ --charcoal-color-text-on-primary-press: var(--charcoal-color-dark-neutral-90);
383
+ --charcoal-color-text-on-primary-hover: var(--charcoal-color-dark-neutral-90);
384
+ --charcoal-color-text-on-on-img-press: var(--charcoal-color-dark-neutral-90);
385
+ --charcoal-color-text-on-on-img-hover: var(--charcoal-color-dark-neutral-90);
386
+ --charcoal-color-text-on-on-img-default: var(--charcoal-color-dark-neutral-90);
387
+ --charcoal-color-text-on-primary-default: var(--charcoal-color-dark-neutral-90);
388
+ --charcoal-color-text-positive-press: var(--charcoal-color-dark-green-90);
389
+ --charcoal-color-text-positive-hover: var(--charcoal-color-dark-green-80);
390
+ --charcoal-color-text-positive-default: var(--charcoal-color-dark-green-60);
391
+ --charcoal-color-text-notice-press: var(--charcoal-color-dark-yellow-90);
392
+ --charcoal-color-text-notice-hover: var(--charcoal-color-dark-yellow-80);
393
+ --charcoal-color-text-notice-default: var(--charcoal-color-dark-yellow-60);
394
+ --charcoal-color-text-negative-press: var(--charcoal-color-dark-red-90);
395
+ --charcoal-color-text-negative-hover: var(--charcoal-color-dark-red-80);
396
+ --charcoal-color-text-negative-default: var(--charcoal-color-dark-red-60);
397
+ --charcoal-color-text-visited-press: var(--charcoal-color-dark-purple-90);
398
+ --charcoal-color-text-visited-hover: var(--charcoal-color-dark-purple-80);
399
+ --charcoal-color-text-visited-default: var(--charcoal-color-dark-purple-60);
400
+ --charcoal-color-text-info-press: var(--charcoal-color-dark-blue-90);
401
+ --charcoal-color-text-info-hover: var(--charcoal-color-dark-blue-80);
402
+ --charcoal-color-text-info-default: var(--charcoal-color-dark-blue-60);
403
+ --charcoal-color-text-placeholder-press: var(--charcoal-color-dark-neutral-50);
404
+ --charcoal-color-text-placeholder-hover: var(--charcoal-color-dark-neutral-40);
405
+ --charcoal-color-text-placeholder-default: var(--charcoal-color-dark-neutral-30);
406
+ --charcoal-color-text-tertiary-press: var(--charcoal-color-dark-neutral-70);
407
+ --charcoal-color-text-tertiary-hover: var(--charcoal-color-dark-neutral-60);
408
+ --charcoal-color-text-tertiary-default: var(--charcoal-color-dark-neutral-40);
409
+ --charcoal-color-text-secondary-press: var(--charcoal-color-dark-neutral-80);
410
+ --charcoal-color-text-secondary-hover: var(--charcoal-color-dark-neutral-70);
411
+ --charcoal-color-text-secondary-default: var(--charcoal-color-dark-neutral-60);
412
+ --charcoal-color-text-disable: var(--charcoal-color-dark-neutral-40);
413
+ --charcoal-color-text-press: var(--charcoal-color-dark-neutral-70);
414
+ --charcoal-color-text-hover: var(--charcoal-color-dark-neutral-80);
415
+ --charcoal-color-text-default: var(--charcoal-color-dark-neutral-90);
416
+ --charcoal-color-container-skeleton: var(--charcoal-color-dark-neutral-a-5);
417
+ --charcoal-color-container-hud-press: var(--charcoal-color-light-neutral-20);
418
+ --charcoal-color-container-hud-hover: var(--charcoal-color-light-neutral-20);
419
+ --charcoal-color-container-hud-default: var(--charcoal-color-light-neutral-10);
420
+ --charcoal-color-container-neutral-press: var(--charcoal-color-dark-neutral-50);
421
+ --charcoal-color-container-neutral-hover: var(--charcoal-color-dark-neutral-40);
422
+ --charcoal-color-container-discovery-press: var(--charcoal-color-dark-red-50);
423
+ --charcoal-color-container-discovery-hover: var(--charcoal-color-dark-red-40);
424
+ --charcoal-color-container-discovery-default: var(--charcoal-color-dark-red-30);
425
+ --charcoal-color-container-neutral-default: var(--charcoal-color-dark-neutral-30);
426
+ --charcoal-color-container-notice-press: var(--charcoal-color-dark-yellow-90);
427
+ --charcoal-color-container-notice-hover: var(--charcoal-color-dark-yellow-80);
428
+ --charcoal-color-container-notice-default: var(--charcoal-color-dark-yellow-70);
429
+ --charcoal-color-container-positive-press: var(--charcoal-color-dark-green-50);
430
+ --charcoal-color-container-positive-hover: var(--charcoal-color-dark-green-40);
431
+ --charcoal-color-container-positive-default: var(--charcoal-color-dark-green-30);
432
+ --charcoal-color-container-negative-press: var(--charcoal-color-dark-red-50);
433
+ --charcoal-color-container-negative-hover: var(--charcoal-color-dark-red-40);
434
+ --charcoal-color-container-negative-default: var(--charcoal-color-dark-red-30);
435
+ --charcoal-color-container-on-img-press: var(--charcoal-color-light-neutral-a-60);
436
+ --charcoal-color-container-on-img-hover: var(--charcoal-color-light-neutral-a-50);
437
+ --charcoal-color-container-on-img-default: var(--charcoal-color-light-neutral-a-40);
438
+ --charcoal-color-container-secondary-press-a: var(--charcoal-color-dark-neutral-a-20);
439
+ --charcoal-color-container-secondary-hover-a: var(--charcoal-color-dark-neutral-a-10);
440
+ --charcoal-color-container-secondary-default-a: var(--charcoal-color-dark-neutral-a-5);
441
+ --charcoal-color-container-secondary-press: var(--charcoal-color-dark-neutral-20);
442
+ --charcoal-color-container-secondary-hover: var(--charcoal-color-dark-neutral-10);
443
+ --charcoal-color-container-primary-press: var(--charcoal-color-dark-blue-50);
444
+ --charcoal-color-container-primary-hover: var(--charcoal-color-dark-blue-40);
445
+ --charcoal-color-container-primary-default: var(--charcoal-color-dark-blue-30);
446
+ --charcoal-color-container-tertiary-press-a: var(--charcoal-color-dark-neutral-a-30);
447
+ --charcoal-color-container-tertiary-hover-a: var(--charcoal-color-dark-neutral-a-20);
448
+ --charcoal-color-container-tertiary-default-a: var(--charcoal-color-dark-neutral-a-10);
449
+ --charcoal-color-container-tertiary-press: var(--charcoal-color-dark-neutral-30);
450
+ --charcoal-color-container-tertiary-hover: var(--charcoal-color-dark-neutral-20);
451
+ --charcoal-color-container-tertiary-default: var(--charcoal-color-dark-neutral-10);
452
+ --charcoal-color-container-secondary-default: var(--charcoal-color-dark-neutral-5);
453
+ --charcoal-color-container-disable: var(--charcoal-color-dark-neutral-10);
454
+ --charcoal-color-container-press-a: var(--charcoal-color-dark-neutral-a-10);
455
+ --charcoal-color-container-hover-a: var(--charcoal-color-dark-neutral-a-5);
456
+ --charcoal-color-container-default-a: var(--charcoal-color-dark-neutral-a-0);
457
+ --charcoal-color-container-press: var(--charcoal-color-dark-neutral-10);
458
+ --charcoal-color-container-hover: var(--charcoal-color-dark-neutral-5);
459
+ --charcoal-color-container-default: var(--charcoal-color-dark-neutral-0);
460
+ --charcoal-color-background-tertiary: var(--charcoal-color-dark-neutral--10);
461
+ --charcoal-color-background-secondary: var(--charcoal-color-dark-neutral--5);
462
+ --charcoal-color-background-default: var(--charcoal-color-dark-neutral-0);
463
+ --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
464
+ --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
465
+ --charcoal-radius-xxl: var(--charcoal-space-component-40);
466
+ --charcoal-radius-xl: var(--charcoal-space-component-30);
467
+ --charcoal-radius-l: var(--charcoal-space-component-25);
468
+ --charcoal-radius-m: var(--charcoal-space-component-20);
469
+ --charcoal-radius-s: var(--charcoal-space-component-10);
470
+ --charcoal-radius-xs: var(--charcoal-space-component-1);
471
+ --charcoal-radius-none: var(--charcoal-space-component-0);
472
+ --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);
473
+ --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover);
474
+ --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-press);
475
+ --charcoal-color-icon-on-notice-hover: var(--charcoal-color-text-on-notice-hover);
476
+ --charcoal-color-icon-on-notice-default: var(--charcoal-color-text-on-notice-default);
477
+ --charcoal-color-icon-on-positive-default: var(--charcoal-color-text-on-positive-default);
478
+ --charcoal-color-icon-on-negative-press: var(--charcoal-color-text-on-negative-press);
479
+ --charcoal-color-icon-on-negative-hover: var(--charcoal-color-text-on-negative-hover);
480
+ --charcoal-color-icon-on-negative-default: var(--charcoal-color-text-on-negative-default);
481
+ --charcoal-color-icon-on-on-img-press: var(--charcoal-color-text-on-on-img-press);
482
+ --charcoal-color-icon-on-on-img-hover: var(--charcoal-color-text-on-on-img-hover);
483
+ --charcoal-color-icon-on-on-img-default: var(--charcoal-color-text-on-on-img-default);
484
+ --charcoal-color-icon-on-primary-press: var(--charcoal-color-text-on-primary-press);
485
+ --charcoal-color-icon-on-primary-hover: var(--charcoal-color-text-on-primary-hover);
486
+ --charcoal-color-icon-on-primary-default: var(--charcoal-color-text-on-primary-default);
487
+ --charcoal-color-icon-disable: var(--charcoal-color-text-disable);
488
+ --charcoal-color-icon-press: var(--charcoal-color-text-press);
489
+ --charcoal-color-icon-hover: var(--charcoal-color-text-hover);
490
+ --charcoal-color-icon-default: var(--charcoal-color-text-default);
491
+ --charcoal-color-icon-secondary-press: var(--charcoal-color-text-secondary-press);
492
+ --charcoal-color-icon-secondary-hover: var(--charcoal-color-text-secondary-hover);
493
+ --charcoal-color-icon-tertiary-press: var(--charcoal-color-text-tertiary-press);
494
+ --charcoal-color-icon-tertiary-hover: var(--charcoal-color-text-tertiary-hover);
495
+ --charcoal-color-icon-notice-press: var(--charcoal-color-text-notice-press);
496
+ --charcoal-color-icon-notice-hover: var(--charcoal-color-text-notice-hover);
497
+ --charcoal-color-icon-notice-default: var(--charcoal-color-text-notice-default);
498
+ --charcoal-color-icon-positive-press: var(--charcoal-color-text-positive-press);
499
+ --charcoal-color-icon-positive-hover: var(--charcoal-color-text-positive-hover);
500
+ --charcoal-color-icon-positive-default: var(--charcoal-color-text-positive-default);
501
+ --charcoal-color-icon-negative-press: var(--charcoal-color-text-negative-press);
502
+ --charcoal-color-icon-negative-hover: var(--charcoal-color-text-negative-hover);
503
+ --charcoal-color-icon-negative-default: var(--charcoal-color-text-negative-default);
504
+ --charcoal-color-icon-tertiary-default: var(--charcoal-color-text-tertiary-default);
505
+ --charcoal-color-icon-secondary-default: var(--charcoal-color-text-secondary-default);
506
+ }