1import { generateColorFamily } from "../lib/generate"
2import { curve } from "./curves"
3
4// These are the source colors for the color scales in the system.
5// These should never directly be used directly in components or themes as they generate thousands of lines of code.
6// Instead, use the outputs from the reference palette which exports a smaller subset of colors.
7
8// Token or user-facing colors should use short, clear names and a 100-900 scale to match the font weight scale.
9
10// Light Gray ======================================== //
11
12export const lightgray = generateColorFamily({
13 name: "lightgray",
14 color: {
15 hue: {
16 start: 210,
17 end: 210,
18 curve: curve.linear,
19 },
20 saturation: {
21 start: 10,
22 end: 15,
23 curve: curve.saturation,
24 },
25 lightness: {
26 start: 97,
27 end: 50,
28 curve: curve.linear,
29 },
30 },
31})
32
33// Light Dark ======================================== //
34
35export const darkgray = generateColorFamily({
36 name: "darkgray",
37 color: {
38 hue: {
39 start: 210,
40 end: 210,
41 curve: curve.linear,
42 },
43 saturation: {
44 start: 15,
45 end: 20,
46 curve: curve.saturation,
47 },
48 lightness: {
49 start: 55,
50 end: 8,
51 curve: curve.linear,
52 },
53 },
54})
55
56// Red ======================================== //
57
58export const red = generateColorFamily({
59 name: "red",
60 color: {
61 hue: {
62 start: 0,
63 end: 0,
64 curve: curve.linear,
65 },
66 saturation: {
67 start: 95,
68 end: 75,
69 curve: curve.saturation,
70 },
71 lightness: {
72 start: 97,
73 end: 25,
74 curve: curve.lightness,
75 },
76 },
77})
78
79// Sunset ======================================== //
80
81export const sunset = generateColorFamily({
82 name: "sunset",
83 color: {
84 hue: {
85 start: 15,
86 end: 15,
87 curve: curve.linear,
88 },
89 saturation: {
90 start: 100,
91 end: 90,
92 curve: curve.saturation,
93 },
94 lightness: {
95 start: 97,
96 end: 25,
97 curve: curve.lightness,
98 },
99 },
100})
101
102// Orange ======================================== //
103
104export const orange = generateColorFamily({
105 name: "orange",
106 color: {
107 hue: {
108 start: 25,
109 end: 25,
110 curve: curve.linear,
111 },
112 saturation: {
113 start: 100,
114 end: 95,
115 curve: curve.saturation,
116 },
117 lightness: {
118 start: 97,
119 end: 20,
120 curve: curve.lightness,
121 },
122 },
123})
124
125// Amber ======================================== //
126
127export const amber = generateColorFamily({
128 name: "amber",
129 color: {
130 hue: {
131 start: 38,
132 end: 38,
133 curve: curve.linear,
134 },
135 saturation: {
136 start: 100,
137 end: 100,
138 curve: curve.saturation,
139 },
140 lightness: {
141 start: 97,
142 end: 18,
143 curve: curve.lightness,
144 },
145 },
146})
147
148// Yellow ======================================== //
149
150export const yellow = generateColorFamily({
151 name: "yellow",
152 color: {
153 hue: {
154 start: 48,
155 end: 48,
156 curve: curve.linear,
157 },
158 saturation: {
159 start: 90,
160 end: 100,
161 curve: curve.saturation,
162 },
163 lightness: {
164 start: 97,
165 end: 15,
166 curve: curve.lightness,
167 },
168 },
169})
170
171// Lemon ======================================== //
172
173export const lemon = generateColorFamily({
174 name: "lemon",
175 color: {
176 hue: {
177 start: 55,
178 end: 55,
179 curve: curve.linear,
180 },
181 saturation: {
182 start: 85,
183 end: 95,
184 curve: curve.saturation,
185 },
186 lightness: {
187 start: 97,
188 end: 15,
189 curve: curve.lightness,
190 },
191 },
192})
193
194// Citron ======================================== //
195
196export const citron = generateColorFamily({
197 name: "citron",
198 color: {
199 hue: {
200 start: 70,
201 end: 70,
202 curve: curve.linear,
203 },
204 saturation: {
205 start: 85,
206 end: 90,
207 curve: curve.saturation,
208 },
209 lightness: {
210 start: 97,
211 end: 15,
212 curve: curve.lightness,
213 },
214 },
215})
216
217// Lime ======================================== //
218
219export const lime = generateColorFamily({
220 name: "lime",
221 color: {
222 hue: {
223 start: 85,
224 end: 85,
225 curve: curve.linear,
226 },
227 saturation: {
228 start: 85,
229 end: 80,
230 curve: curve.saturation,
231 },
232 lightness: {
233 start: 97,
234 end: 18,
235 curve: curve.lightness,
236 },
237 },
238})
239
240// Green ======================================== //
241
242export const green = generateColorFamily({
243 name: "green",
244 color: {
245 hue: {
246 start: 108,
247 end: 108,
248 curve: curve.linear,
249 },
250 saturation: {
251 start: 60,
252 end: 70,
253 curve: curve.saturation,
254 },
255 lightness: {
256 start: 97,
257 end: 18,
258 curve: curve.lightness,
259 },
260 },
261})
262
263// Mint ======================================== //
264
265export const mint = generateColorFamily({
266 name: "mint",
267 color: {
268 hue: {
269 start: 142,
270 end: 142,
271 curve: curve.linear,
272 },
273 saturation: {
274 start: 60,
275 end: 75,
276 curve: curve.saturation,
277 },
278 lightness: {
279 start: 97,
280 end: 20,
281 curve: curve.lightness,
282 },
283 },
284})
285
286// Cyan ======================================== //
287
288export const cyan = generateColorFamily({
289 name: "cyan",
290 color: {
291 hue: {
292 start: 179,
293 end: 179,
294 curve: curve.linear,
295 },
296 saturation: {
297 start: 70,
298 end: 80,
299 curve: curve.saturation,
300 },
301 lightness: {
302 start: 97,
303 end: 20,
304 curve: curve.lightness,
305 },
306 },
307})
308
309// Sky ======================================== //
310
311export const sky = generateColorFamily({
312 name: "sky",
313 color: {
314 hue: {
315 start: 195,
316 end: 205,
317 curve: curve.linear,
318 },
319 saturation: {
320 start: 85,
321 end: 90,
322 curve: curve.saturation,
323 },
324 lightness: {
325 start: 97,
326 end: 15,
327 curve: curve.lightness,
328 },
329 },
330})
331
332// Blue ======================================== //
333
334export const blue = generateColorFamily({
335 name: "blue",
336 color: {
337 hue: {
338 start: 218,
339 end: 218,
340 curve: curve.linear,
341 },
342 saturation: {
343 start: 85,
344 end: 70,
345 curve: curve.saturation,
346 },
347 lightness: {
348 start: 97,
349 end: 15,
350 curve: curve.lightness,
351 },
352 },
353})
354
355// Indigo ======================================== //
356
357export const indigo = generateColorFamily({
358 name: "indigo",
359 color: {
360 hue: {
361 start: 245,
362 end: 245,
363 curve: curve.linear,
364 },
365 saturation: {
366 start: 60,
367 end: 50,
368 curve: curve.saturation,
369 },
370 lightness: {
371 start: 97,
372 end: 22,
373 curve: curve.lightness,
374 },
375 },
376})
377
378// Purple ======================================== //
379
380export const purple = generateColorFamily({
381 name: "purple",
382 color: {
383 hue: {
384 start: 260,
385 end: 270,
386 curve: curve.linear,
387 },
388 saturation: {
389 start: 65,
390 end: 55,
391 curve: curve.saturation,
392 },
393 lightness: {
394 start: 97,
395 end: 20,
396 curve: curve.lightness,
397 },
398 },
399})
400
401// Pink ======================================== //
402
403export const pink = generateColorFamily({
404 name: "pink",
405 color: {
406 hue: {
407 start: 320,
408 end: 330,
409 curve: curve.linear,
410 },
411 saturation: {
412 start: 70,
413 end: 65,
414 curve: curve.saturation,
415 },
416 lightness: {
417 start: 97,
418 end: 32,
419 curve: curve.lightness,
420 },
421 },
422})
423
424// Rose ======================================== //
425
426export const rose = generateColorFamily({
427 name: "rose",
428 color: {
429 hue: {
430 start: 345,
431 end: 345,
432 curve: curve.linear,
433 },
434 saturation: {
435 start: 90,
436 end: 70,
437 curve: curve.saturation,
438 },
439 lightness: {
440 start: 97,
441 end: 32,
442 curve: curve.lightness,
443 },
444 },
445})