Skip to content

Commit c29e28a

Browse files
adamwathanadamwathan
committed
Simplify blueprint badge stuff
1 parent ec3c1b4 commit c29e28a

File tree

5 files changed

+1018
-114
lines changed

5 files changed

+1018
-114
lines changed

‎src/blog/tailwind-plus/card.jpg

300 KB
Loading

‎src/blog/tailwind-plus/color-palette.tsx

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
export function ColorPalette() {
2+
const colors = {
3+
red: {
4+
"50": "oklch(0.971 0.013 17.38)",
5+
"100": "oklch(0.936 0.032 17.717)",
6+
"200": "oklch(0.885 0.062 18.334)",
7+
"300": "oklch(0.808 0.114 19.571)",
8+
"400": "oklch(0.704 0.191 22.216)",
9+
"500": "oklch(0.637 0.237 25.331)",
10+
"600": "oklch(0.577 0.245 27.325)",
11+
"700": "oklch(0.505 0.213 27.518)",
12+
"800": "oklch(0.444 0.177 26.899)",
13+
"900": "oklch(0.396 0.141 25.723)",
14+
"950": "oklch(0.258 0.092 26.042)",
15+
},
16+
orange: {
17+
"50": "oklch(0.98 0.016 73.684)",
18+
"100": "oklch(0.954 0.038 75.164)",
19+
"200": "oklch(0.901 0.076 70.697)",
20+
"300": "oklch(0.837 0.128 66.29)",
21+
"400": "oklch(0.75 0.183 55.934)",
22+
"500": "oklch(0.705 0.213 47.604)",
23+
"600": "oklch(0.646 0.222 41.116)",
24+
"700": "oklch(0.553 0.195 38.402)",
25+
"800": "oklch(0.47 0.157 37.304)",
26+
"900": "oklch(0.408 0.123 38.172)",
27+
"950": "oklch(0.266 0.079 36.259)",
28+
},
29+
amber: {
30+
"50": "oklch(0.987 0.022 95.277)",
31+
"100": "oklch(0.962 0.059 95.617)",
32+
"200": "oklch(0.924 0.12 95.746)",
33+
"300": "oklch(0.879 0.169 91.605)",
34+
"400": "oklch(0.828 0.189 84.429)",
35+
"500": "oklch(0.769 0.188 70.08)",
36+
"600": "oklch(0.666 0.179 58.318)",
37+
"700": "oklch(0.555 0.163 48.998)",
38+
"800": "oklch(0.473 0.137 46.201)",
39+
"900": "oklch(0.414 0.112 45.904)",
40+
"950": "oklch(0.279 0.077 45.635)",
41+
},
42+
yellow: {
43+
"50": "oklch(0.987 0.026 102.212)",
44+
"100": "oklch(0.973 0.071 103.193)",
45+
"200": "oklch(0.945 0.129 101.54)",
46+
"300": "oklch(0.905 0.182 98.111)",
47+
"400": "oklch(0.852 0.199 91.936)",
48+
"500": "oklch(0.795 0.184 86.047)",
49+
"600": "oklch(0.681 0.162 75.834)",
50+
"700": "oklch(0.554 0.135 66.442)",
51+
"800": "oklch(0.476 0.114 61.907)",
52+
"900": "oklch(0.421 0.095 57.708)",
53+
"950": "oklch(0.286 0.066 53.813)",
54+
},
55+
lime: {
56+
"50": "oklch(0.986 0.031 120.757)",
57+
"100": "oklch(0.967 0.067 122.328)",
58+
"200": "oklch(0.938 0.127 124.321)",
59+
"300": "oklch(0.897 0.196 126.665)",
60+
"400": "oklch(0.841 0.238 128.85)",
61+
"500": "oklch(0.768 0.233 130.85)",
62+
"600": "oklch(0.648 0.2 131.684)",
63+
"700": "oklch(0.532 0.157 131.589)",
64+
"800": "oklch(0.453 0.124 130.933)",
65+
"900": "oklch(0.405 0.101 131.063)",
66+
"950": "oklch(0.274 0.072 132.109)",
67+
},
68+
green: {
69+
"50": "oklch(0.982 0.018 155.826)",
70+
"100": "oklch(0.962 0.044 156.743)",
71+
"200": "oklch(0.925 0.084 155.995)",
72+
"300": "oklch(0.871 0.15 154.449)",
73+
"400": "oklch(0.792 0.209 151.711)",
74+
"500": "oklch(0.723 0.219 149.579)",
75+
"600": "oklch(0.627 0.194 149.214)",
76+
"700": "oklch(0.527 0.154 150.069)",
77+
"800": "oklch(0.448 0.119 151.328)",
78+
"900": "oklch(0.393 0.095 152.535)",
79+
"950": "oklch(0.266 0.065 152.934)",
80+
},
81+
emerald: {
82+
"50": "oklch(0.979 0.021 166.113)",
83+
"100": "oklch(0.95 0.052 163.051)",
84+
"200": "oklch(0.905 0.093 164.15)",
85+
"300": "oklch(0.845 0.143 164.978)",
86+
"400": "oklch(0.765 0.177 163.223)",
87+
"500": "oklch(0.696 0.17 162.48)",
88+
"600": "oklch(0.596 0.145 163.225)",
89+
"700": "oklch(0.508 0.118 165.612)",
90+
"800": "oklch(0.432 0.095 166.913)",
91+
"900": "oklch(0.378 0.077 168.94)",
92+
"950": "oklch(0.262 0.051 172.552)",
93+
},
94+
teal: {
95+
"50": "oklch(0.984 0.014 180.72)",
96+
"100": "oklch(0.953 0.051 180.801)",
97+
"200": "oklch(0.91 0.096 180.426)",
98+
"300": "oklch(0.855 0.138 181.071)",
99+
"400": "oklch(0.777 0.152 181.912)",
100+
"500": "oklch(0.704 0.14 182.503)",
101+
"600": "oklch(0.6 0.118 184.704)",
102+
"700": "oklch(0.511 0.096 186.391)",
103+
"800": "oklch(0.437 0.078 188.216)",
104+
"900": "oklch(0.386 0.063 188.416)",
105+
"950": "oklch(0.277 0.046 192.524)",
106+
},
107+
cyan: {
108+
"50": "oklch(0.984 0.019 200.873)",
109+
"100": "oklch(0.956 0.045 203.388)",
110+
"200": "oklch(0.917 0.08 205.041)",
111+
"300": "oklch(0.865 0.127 207.078)",
112+
"400": "oklch(0.789 0.154 211.53)",
113+
"500": "oklch(0.715 0.143 215.221)",
114+
"600": "oklch(0.609 0.126 221.723)",
115+
"700": "oklch(0.52 0.105 223.128)",
116+
"800": "oklch(0.45 0.085 224.283)",
117+
"900": "oklch(0.398 0.07 227.392)",
118+
"950": "oklch(0.302 0.056 229.695)",
119+
},
120+
sky: {
121+
"50": "oklch(0.977 0.013 236.62)",
122+
"100": "oklch(0.951 0.026 236.824)",
123+
"200": "oklch(0.901 0.058 230.902)",
124+
"300": "oklch(0.828 0.111 230.318)",
125+
"400": "oklch(0.746 0.16 232.661)",
126+
"500": "oklch(0.685 0.169 237.323)",
127+
"600": "oklch(0.588 0.158 241.966)",
128+
"700": "oklch(0.5 0.134 242.749)",
129+
"800": "oklch(0.443 0.11 240.79)",
130+
"900": "oklch(0.391 0.09 240.876)",
131+
"950": "oklch(0.293 0.066 243.157)",
132+
},
133+
blue: {
134+
"50": "oklch(0.97 0.014 254.604)",
135+
"100": "oklch(0.932 0.032 255.585)",
136+
"200": "oklch(0.882 0.059 254.128)",
137+
"300": "oklch(0.809 0.105 251.813)",
138+
"400": "oklch(0.707 0.165 254.624)",
139+
"500": "oklch(0.623 0.214 259.815)",
140+
"600": "oklch(0.546 0.245 262.881)",
141+
"700": "oklch(0.488 0.243 264.376)",
142+
"800": "oklch(0.424 0.199 265.638)",
143+
"900": "oklch(0.379 0.146 265.522)",
144+
"950": "oklch(0.282 0.091 267.935)",
145+
},
146+
indigo: {
147+
"50": "oklch(0.962 0.018 272.314)",
148+
"100": "oklch(0.93 0.034 272.788)",
149+
"200": "oklch(0.87 0.065 274.039)",
150+
"300": "oklch(0.785 0.115 274.713)",
151+
"400": "oklch(0.673 0.182 276.935)",
152+
"500": "oklch(0.585 0.233 277.117)",
153+
"600": "oklch(0.511 0.262 276.966)",
154+
"700": "oklch(0.457 0.24 277.023)",
155+
"800": "oklch(0.398 0.195 277.366)",
156+
"900": "oklch(0.359 0.144 278.697)",
157+
"950": "oklch(0.257 0.09 281.288)",
158+
},
159+
violet: {
160+
"50": "oklch(0.969 0.016 293.756)",
161+
"100": "oklch(0.943 0.029 294.588)",
162+
"200": "oklch(0.894 0.057 293.283)",
163+
"300": "oklch(0.811 0.111 293.571)",
164+
"400": "oklch(0.702 0.183 293.541)",
165+
"500": "oklch(0.606 0.25 292.717)",
166+
"600": "oklch(0.541 0.281 293.009)",
167+
"700": "oklch(0.491 0.27 292.581)",
168+
"800": "oklch(0.432 0.232 292.759)",
169+
"900": "oklch(0.38 0.189 293.745)",
170+
"950": "oklch(0.283 0.141 291.089)",
171+
},
172+
purple: {
173+
"50": "oklch(0.977 0.014 308.299)",
174+
"100": "oklch(0.946 0.033 307.174)",
175+
"200": "oklch(0.902 0.063 306.703)",
176+
"300": "oklch(0.827 0.119 306.383)",
177+
"400": "oklch(0.714 0.203 305.504)",
178+
"500": "oklch(0.627 0.265 303.9)",
179+
"600": "oklch(0.558 0.288 302.321)",
180+
"700": "oklch(0.496 0.265 301.924)",
181+
"800": "oklch(0.438 0.218 303.724)",
182+
"900": "oklch(0.381 0.176 304.987)",
183+
"950": "oklch(0.291 0.149 302.717)",
184+
},
185+
fuchsia: {
186+
"50": "oklch(0.977 0.017 320.058)",
187+
"100": "oklch(0.952 0.037 318.852)",
188+
"200": "oklch(0.903 0.076 319.62)",
189+
"300": "oklch(0.833 0.145 321.434)",
190+
"400": "oklch(0.74 0.238 322.16)",
191+
"500": "oklch(0.667 0.295 322.15)",
192+
"600": "oklch(0.591 0.293 322.896)",
193+
"700": "oklch(0.518 0.253 323.949)",
194+
"800": "oklch(0.452 0.211 324.591)",
195+
"900": "oklch(0.401 0.17 325.612)",
196+
"950": "oklch(0.293 0.136 325.661)",
197+
},
198+
pink: {
199+
"50": "oklch(0.971 0.014 343.198)",
200+
"100": "oklch(0.948 0.028 342.258)",
201+
"200": "oklch(0.899 0.061 343.231)",
202+
"300": "oklch(0.823 0.12 346.018)",
203+
"400": "oklch(0.718 0.202 349.761)",
204+
"500": "oklch(0.656 0.241 354.308)",
205+
"600": "oklch(0.592 0.249 0.584)",
206+
"700": "oklch(0.525 0.223 3.958)",
207+
"800": "oklch(0.459 0.187 3.815)",
208+
"900": "oklch(0.408 0.153 2.432)",
209+
"950": "oklch(0.284 0.109 3.907)",
210+
},
211+
rose: {
212+
"50": "oklch(0.969 0.015 12.422)",
213+
"100": "oklch(0.941 0.03 12.58)",
214+
"200": "oklch(0.892 0.058 10.001)",
215+
"300": "oklch(0.81 0.117 11.638)",
216+
"400": "oklch(0.712 0.194 13.428)",
217+
"500": "oklch(0.645 0.246 16.439)",
218+
"600": "oklch(0.586 0.253 17.585)",
219+
"700": "oklch(0.514 0.222 16.935)",
220+
"800": "oklch(0.455 0.188 13.697)",
221+
"900": "oklch(0.41 0.159 10.272)",
222+
"950": "oklch(0.271 0.105 12.094)",
223+
},
224+
};
225+
226+
return (
227+
<div className="not-prose grid grid-cols-[repeat(17,minmax(0,1fr))] gap-1 md:gap-2">
228+
{Object.entries(colors).map(([color, values]) => (
229+
<div className="grid grid-cols-1 gap-2" key={color}>
230+
{Object.values(values).map((value, i) => (
231+
<div className="aspect-square rounded" key={i} style={{ backgroundColor: value }} />
232+
))}
233+
</div>
234+
))}
235+
</div>
236+
);
237+
}

0 commit comments

Comments
 (0)