-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtailwind.config.ts
199 lines (185 loc) · 9.65 KB
/
tailwind.config.ts
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';
import tailwindcssPlugin from 'tailwindcss/plugin';
// RADIX COLORS
const COLORS = {
// neutral
gray: [
['0 0% 99%', '0 0% 98%', '0 0% 94%', '0 0% 91%', '0 0% 88%', '0 0% 85%', '0 0% 81%', '0 0% 73%', '0 0% 55%', '0 0% 51%', '0 0% 39%', '0 0% 13%'],
['0 0% 7%', '0 0% 10%', '0 0% 13%', '0 0% 16%', '0 0% 19%', '0 0% 23%', '0 0% 28%', '0 0% 38%', '0 0% 43%', '0 0% 48%', '0 0% 71%', '0 0% 93%'],
],
slate: [
['240 20% 99%', '240 20% 98%', '240 11% 95%', '240 10% 92%', '230 11% 89%', '240 10% 86%', '233 10% 82%', '231 10% 75%', '231 6% 57%', '226 5% 53%', '220 6% 40%', '210 13% 13%'],
['240 6% 7%', '220 6% 10%', '225 6% 14%', '210 7% 16%', '214 7% 19%', '213 8% 23%', '213 8% 28%', '212 8% 38%', '219 6% 44%', '222 5% 49%', '216 7% 71%', '220 9% 94%'],
],
mauve: [
['300 20% 99%', '270 20% 98%', '285 14% 95%', '276 12% 92%', '274 12% 89%', '262 11% 86%', '258 11% 82%', '249 10% 75%', '249 6% 57%', '250 5% 53%', '252 5% 41%', '257 10% 14%'],
['270 6% 7%', '270 4% 10%', '260 4% 14%', '270 5% 17%', '264 5% 20%', '270 5% 24%', '257 5% 29%', '258 5% 39%', '251 5% 45%', '251 4% 50%', '258 7% 72%', '240 6% 94%'],
],
sage: [
['150 33% 99%', '150 14% 97%', '160 10% 94%', '160 6% 91%', '140 5% 88%', '160 4% 85%', '150 4% 80%', '150 3% 73%', '157 3% 54%', '157 3% 50%', '160 3% 38%', '154 12% 12%'],
['150 6% 7%', '150 4% 9%', '150 3% 13%', '160 4% 16%', '160 3% 19%', '150 4% 22%', '156 4% 28%', '154 4% 37%', '157 6% 41%', '160 5% 47%', '157 5% 69%', '150 6% 93%'],
],
olive: [
['120 20% 99%', '120 17% 98%', '120 7% 94%', '120 4% 91%', '120 5% 88%', '120 4% 85%', '120 3% 81%', '105 3% 73%', '103 3% 54%', '103 3% 50%', '110 3% 38%', '108 8% 12%'],
['90 6% 7%', '90 4% 9%', '90 3% 13%', '100 4% 16%', '100 3% 19%', '90 4% 22%', '96 4% 27%', '111 4% 37%', '108 5% 42%', '107 4% 47%', '105 5% 69%', '120 6% 93%'],
],
sand: [
['60 20% 99%', '60 8% 97%', '30 7% 94%', '40 6% 91%', '45 6% 88%', '45 5% 85%', '48 5% 80%', '51 5% 72%', '60 3% 54%', '60 2% 50%', '60 3% 38%', '48 8% 12%'],
['60 3% 6%', '60 2% 10%', '60 1% 13%', '60 2% 16%', '60 3% 19%', '45 4% 22%', '48 4% 28%', '43 4% 37%', '47 4% 42%', '53 3% 47%', '45 5% 69%', '60 6% 93%'],
],
// primary
iris: [
['240 100% 100%', '240 100% 99%', '236 88% 97%', '238 100% 95%', '237 100% 93%', '238 100% 90%', '238 82% 85%', '238 74% 77%', '240 60% 60%', '240 55% 56%', '242 50% 55%', '238 43% 27%'],
['240 22% 10%', '244 25% 12%', '237 38% 20%', '236 45% 27%', '237 41% 32%', '239 36% 37%', '240 34% 44%', '241 36% 52%', '240 60% 60%', '242 64% 64%', '246 100% 83%', '242 94% 94%'],
],
brown: [
['30 50% 99%', '30 50% 98%', '28 45% 94%', '29 43% 90%', '29 45% 86%', '29 45% 81%', '29 47% 74%', '28 45% 65%', '28 34% 51%', '26 32% 48%', '24 30% 39%', '19 15% 21%'],
['40 9% 6%', '20 12% 10%', '22 16% 14%', '26 19% 16%', '25 22% 20%', '26 24% 24%', '26 26% 30%', '28 28% 38%', '28 34% 51%', '27 36% 56%', '28 50% 72%', '35 61% 87%'],
],
orange: [
['20 60% 99%', '33 100% 96%', '37 100% 92%', '34 100% 85%', '33 100% 80%', '30 100% 75%', '27 87% 71%', '25 80% 63%', '23 93% 53%', '24 100% 47%', '23 100% 40%', '16 50% 23%'],
['27 24% 7%', '28 33% 9%', '29 65% 12%', '28 100% 14%', '28 100% 17%', '27 79% 22%', '25 63% 30%', '23 60% 40%', '23 93% 53%', '26 100% 56%', '26 100% 67%', '30 100% 88%'],
],
ruby: [
['340 100% 99%', '353 100% 98%', '351 91% 96%', '351 100% 93%', '350 100% 90%', '351 80% 86%', '349 68% 81%', '348 61% 74%', '348 75% 59%', '347 70% 55%', '345 70% 47%', '344 63% 24%'],
['345 19% 8%', '347 18% 10%', '344 49% 15%', '342 61% 19%', '342 57% 24%', '344 50% 29%', '346 45% 37%', '348 45% 48%', '348 75% 59%', '350 79% 64%', '355 100% 79%', '340 96% 91%'],
],
pink: [
['320 100% 99%', '326 78% 98%', '326 91% 95%', '323 79% 92%', '323 69% 89%', '323 60% 84%', '323 55% 79%', '322 52% 72%', '322 65% 55%', '322 61% 52%', '322 65% 46%', '320 70% 23%'],
['315 19% 8%', '316 29% 10%', '315 41% 15%', '315 58% 19%', '318 52% 23%', '319 44% 29%', '321 40% 37%', '322 40% 47%', '322 65% 55%', '323 68% 59%', '327 100% 78%', '326 92% 91%'],
],
purple: [
['300 50% 99%', '274 78% 98%', '275 89% 96%', '277 81% 94%', '275 75% 91%', '275 69% 86%', '273 62% 81%', '272 60% 74%', '272 51% 54%', '272 45% 50%', '272 45% 49%', '270 50% 25%'],
['282 23% 9%', '279 25% 11%', '279 36% 17%', '277 39% 22%', '276 38% 26%', '275 35% 31%', '274 33% 38%', '273 33% 50%', '272 51% 54%', '272 55% 59%', '272 100% 81%', '275 77% 92%'],
],
blue: [
['210 100% 99%', '207 100% 98%', '205 92% 95%', '203 100% 92%', '206 100% 88%', '207 93% 83%', '207 85% 76%', '206 82% 65%', '206 100% 50%', '207 96% 48%', '208 88% 43%', '216 71% 23%'],
['215 42% 9%', '218 39% 11%', '212 69% 16%', '209 100% 19%', '207 100% 23%', '209 79% 30%', '211 66% 37%', '211 65% 45%', '206 100% 50%', '210 100% 62%', '210 100% 72%', '205 100% 88%'],
],
teal: [
['165 67% 99%', '165 50% 97%', '167 63% 93%', '166 62% 88%', '168 54% 82%', '168 48% 75%', '170 43% 66%', '172 42% 53%', '173 80% 36%', '173 85% 33%', '172 100% 26%', '174 65% 15%'],
['173 24% 7%', '175 24% 9%', '174 55% 11%', '176 93% 12%', '175 80% 16%', '174 63% 21%', '174 58% 26%', '173 59% 31%', '173 80% 36%', '172 85% 38%', '170 90% 45%', '163 69% 81%'],
],
grass: [
['120 60% 99%', '120 43% 97%', '120 42% 94%', '123 45% 90%', '122 40% 85%', '124 39% 78%', '126 37% 69%', '131 38% 56%', '131 41% 46%', '131 43% 43%', '132 50% 33%', '131 30% 18%'],
['146 20% 7%', '130 13% 9%', '132 22% 14%', '134 33% 17%', '134 32% 21%', '133 32% 26%', '132 31% 31%', '131 32% 36%', '131 41% 46%', '131 39% 51%', '131 50% 63%', '120 61% 85%'],
],
// error
red: [
['0 100% 99%', '0 100% 98%', '357 90% 96%', '358 100% 93%', '359 100% 90%', '359 94% 87%', '359 77% 81%', '359 70% 74%', '358 75% 59%', '358 69% 55%', '358 65% 49%', '351 63% 24%'],
['0 19% 8%', '355 25% 10%', '350 53% 15%', '348 68% 19%', '350 63% 23%', '352 53% 29%', '355 47% 37%', '358 45% 49%', '358 75% 59%', '360 79% 65%', '2 100% 79%', '350 100% 91%'],
],
// success
green: [
['140 60% 99%', '137 47% 97%', '139 47% 93%', '140 49% 89%', '142 44% 84%', '144 41% 77%', '146 40% 68%', '151 40% 54%', '151 55% 42%', '152 56% 39%', '154 60% 32%', '155 40% 16%'],
['154 20% 7%', '153 20% 9%', '152 41% 13%', '154 55% 15%', '154 52% 19%', '153 46% 23%', '152 44% 28%', '151 45% 34%', '151 55% 42%', '151 55% 45%', '151 65% 54%', '144 70% 82%'],
],
} as const satisfies Record<string, TF.ReadonlyTuple<TF.ReadonlyTuple<string, 12>, 2>>;
type KeyofCOLORS = keyof typeof COLORS;
const SHADES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
const ALIAS = {
n: 'gray',
p: 'iris',
e: 'red',
s: 'green',
} satisfies Record<string, KeyofCOLORS>;
type KeyofALIAS = keyof typeof ALIAS;
export const colors = Object.keys(ALIAS).reduce(
(record, alias) => {
record[`c${alias}`] = SHADES.reduce(
(record, shade) => {
record[shade] = `hsl(var(--c-${alias}-${shade}))`;
return record;
},
{} as Record<string, string>
);
return record;
},
{
transparent: 'transparent',
current: 'currentColor',
inherit: 'inherit',
black: {
DEFAULT: '#000',
1: 'rgba(0, 0, 0, 0.05)',
2: 'rgba(0, 0, 0, 0.1)',
3: 'rgba(0, 0, 0, 0.15)',
4: 'rgba(0, 0, 0, 0.2)',
5: 'rgba(0, 0, 0, 0.3)',
6: 'rgba(0, 0, 0, 0.4)',
7: 'rgba(0, 0, 0, 0.5)',
8: 'rgba(0, 0, 0, 0.6)',
9: 'rgba(0, 0, 0, 0.7)',
10: 'rgba(0, 0, 0, 0.8)',
11: 'rgba(0, 0, 0, 0.9)',
12: 'rgba(0, 0, 0, 0.95),}',
},
white: {
DEFAULT: '#fff',
1: 'rgba(255, 255, 255, 0.05)',
2: 'rgba(255, 255, 255, 0.1)',
3: 'rgba(255, 255, 255, 0.15)',
4: 'rgba(255, 255, 255, 0.2)',
5: 'rgba(255, 255, 255, 0.3)',
6: 'rgba(255, 255, 255, 0.4)',
7: 'rgba(255, 255, 255, 0.5)',
8: 'rgba(255, 255, 255, 0.6)',
9: 'rgba(255, 255, 255, 0.7)',
10: 'rgba(255, 255, 255, 0.8)',
11: 'rgba(255, 255, 255, 0.9)',
12: 'rgba(255, 255, 255, 0.95)',
},
} as Record<string, string | Record<string, string>>
);
export const plugin = () =>
tailwindcssPlugin(({ addBase }) => {
const light: Record<`--${string}`, string> = {};
const dark: Record<`--${string}`, string> = {};
for (const name in COLORS) {
const [LIGHT, DARK] = COLORS[name as KeyofCOLORS];
SHADES.forEach((shade, index) => {
light[`--c-${name}-${shade}`] = LIGHT[index];
dark[`--c-${name}-${shade}`] = DARK[index];
});
}
const alias = (target: KeyofALIAS, color: KeyofCOLORS) => {
const result: Record<`--${string}`, string> = {};
for (const SHADE of SHADES) result[`--c-${target}-${SHADE}`] = `var(--c-${color}-${SHADE})`;
return result;
};
addBase({
[`:root, [data-kb-theme="light"]`]: light,
[`[data-kb-theme="dark"]`]: dark,
[':root']: {
...alias('e', 'red'),
...alias('s', 'green'),
},
[`:root, [data-cn="gray"]`]: alias('n', 'gray'),
[`[data-cn="slate"]`]: alias('n', 'slate'),
[`[data-cn="mauve"]`]: alias('n', 'mauve'),
[`[data-cn="sage"]`]: alias('n', 'sage'),
[`[data-cn="olive"]`]: alias('n', 'olive'),
[`[data-cn="sand"]`]: alias('n', 'sand'),
[`:root, [data-cp="iris"]`]: alias('p', 'iris'),
[`[data-cp="brown"]`]: alias('p', 'brown'),
[`[data-cp="orange"]`]: alias('p', 'orange'),
[`[data-cp="ruby"]`]: alias('p', 'ruby'),
[`[data-cp="pink"]`]: alias('p', 'pink'),
[`[data-cp="purple"]`]: alias('p', 'purple'),
[`[data-cp="blue"]`]: alias('p', 'blue'),
[`[data-cp="teal"]`]: alias('p', 'teal'),
[`[data-cp="grass"]`]: alias('p', 'grass'),
});
});
export default {
darkMode: ['selector', '[data-kb-theme="dark"]'],
theme: {
colors,
fontFamily: {
sans: ['Inter Variable', ...defaultTheme.fontFamily.sans],
mono: ['Source Code Pro Variable', ...defaultTheme.fontFamily.mono],
},
},
plugins: [plugin()],
} satisfies Config;