Skip to content

Commit fba94bb

Browse files
alitecsolucoesalijuniorbrhyoban
authoredMar 13, 2025··
feat!: support chart and sidebar colors (#25)
* feat: support new sidebar component colors * chart and sidebar --------- Co-authored-by: Junior Ali <[email protected]> Co-authored-by: Stephen Zhou <[email protected]>
·
v0.5.0
1 parent 918376d commit fba94bb

13 files changed

+506
-0
lines changed
 

‎src/index.ts

+20
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,26 @@ export function presetShadcn(
9191
DEFAULT: 'hsl(var(--card))',
9292
foreground: 'hsl(var(--card-foreground))',
9393
},
94+
chart1: 'hsl(var(--chart1))',
95+
chart2: 'hsl(var(--chart2))',
96+
chart3: 'hsl(var(--chart3))',
97+
chart4: 'hsl(var(--chart4))',
98+
chart5: 'hsl(var(--chart5))',
99+
sidebar: {
100+
DEFAULT: 'hsl(var(--sidebar-background))',
101+
background: 'hsl(var(--sidebar-background))',
102+
foreground: 'hsl(var(--sidebar-foreground))',
103+
primary: {
104+
DEFAULT: 'hsl(var(--sidebar-primary))',
105+
foreground: 'hsl(var(--sidebar-primary-foreground))',
106+
},
107+
accent: {
108+
DEFAULT: 'hsl(var(--sidebar-accent))',
109+
foreground: 'hsl(var(--sidebar-accent-foreground))',
110+
},
111+
border: 'hsl(var(--sidebar-border))',
112+
ring: 'hsl(var(--sidebar-ring))',
113+
},
94114
},
95115
borderRadius: {
96116
xl: 'calc(var(--radius) + 4px)',

‎src/themes.ts

+180
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,19 @@ export const themeCSSVarKeys = [
1919
'border',
2020
'input',
2121
'ring',
22+
'chart-1',
23+
'chart-2',
24+
'chart-3',
25+
'chart-4',
26+
'chart-5',
27+
'sidebar',
28+
'sidebar-foreground',
29+
'sidebar-primary',
30+
'sidebar-primary-foreground',
31+
'sidebar-accent',
32+
'sidebar-accent-foreground',
33+
'sidebar-border',
34+
'sidebar-ring',
2235
] as const
2336
export type ThemeCSSVarKey = (typeof themeCSSVarKeys)[number]
2437

@@ -30,6 +43,29 @@ export interface ThemeCSSVarsVariant {
3043
dark: ThemeCSSVars
3144
}
3245

46+
const sidebarColors = {
47+
light: {
48+
'sidebar': '0 0% 98%',
49+
'sidebar-foreground': '240 5.3% 26.1%',
50+
'sidebar-primary': '240 5.9% 10%',
51+
'sidebar-primary-foreground': '0 0% 98%',
52+
'sidebar-accent': '240 4.8% 95.9%',
53+
'sidebar-accent-foreground': '240 5.9% 10%',
54+
'sidebar-border': '220 13% 91%',
55+
'sidebar-ring': '217.2 91.2% 59.8%',
56+
},
57+
dark: {
58+
'sidebar': '240 5.9% 10%',
59+
'sidebar-foreground': '240 4.8% 95.9%',
60+
'sidebar-primary': '0 0% 98%',
61+
'sidebar-primary-foreground': '240 5.9% 10%',
62+
'sidebar-accent': '240 3.7% 15.9%',
63+
'sidebar-accent-foreground': '240 4.8% 95.9%',
64+
'sidebar-border': '240 3.7% 15.9%',
65+
'sidebar-ring': '217.2 91.2% 59.8%',
66+
},
67+
} as const
68+
3369
export const themes = [
3470
{
3571
name: 'zinc',
@@ -60,6 +96,12 @@ export const themes = [
6096
'input': '240 5.9% 90%',
6197
'ring': '240 5.9% 10%',
6298
'radius': '0.5rem',
99+
'chart-1': '12 76% 61%',
100+
'chart-2': '173 58% 39%',
101+
'chart-3': '197 37% 24%',
102+
'chart-4': '43 74% 66%',
103+
'chart-5': '27 87% 67%',
104+
...sidebarColors.light,
63105
},
64106
dark: {
65107
'background': '240 10% 3.9%',
@@ -81,6 +123,12 @@ export const themes = [
81123
'border': '240 3.7% 15.9%',
82124
'input': '240 3.7% 15.9%',
83125
'ring': '240 4.9% 83.9%',
126+
'chart-1': '220 70% 50%',
127+
'chart-2': '160 60% 45%',
128+
'chart-3': '30 80% 55%',
129+
'chart-4': '280 65% 60%',
130+
'chart-5': '340 75% 55%',
131+
...sidebarColors.dark,
84132
},
85133
},
86134
},
@@ -113,6 +161,12 @@ export const themes = [
113161
'input': '214.3 31.8% 91.4%',
114162
'ring': '222.2 84% 4.9%',
115163
'radius': '0.5rem',
164+
'chart-1': '12 76% 61%',
165+
'chart-2': '173 58% 39%',
166+
'chart-3': '197 37% 24%',
167+
'chart-4': '43 74% 66%',
168+
'chart-5': '27 87% 67%',
169+
...sidebarColors.light,
116170
},
117171
dark: {
118172
'background': '222.2 84% 4.9%',
@@ -134,6 +188,12 @@ export const themes = [
134188
'border': '217.2 32.6% 17.5%',
135189
'input': '217.2 32.6% 17.5%',
136190
'ring': '212.7 26.8% 83.9%',
191+
'chart-1': '220 70% 50%',
192+
'chart-2': '160 60% 45%',
193+
'chart-3': '30 80% 55%',
194+
'chart-4': '280 65% 60%',
195+
'chart-5': '340 75% 55%',
196+
...sidebarColors.dark,
137197
},
138198
},
139199
},
@@ -166,6 +226,12 @@ export const themes = [
166226
'input': '20 5.9% 90%',
167227
'ring': '20 14.3% 4.1%',
168228
'radius': '0.95rem',
229+
'chart-1': '12 76% 61%',
230+
'chart-2': '173 58% 39%',
231+
'chart-3': '197 37% 24%',
232+
'chart-4': '43 74% 66%',
233+
'chart-5': '27 87% 67%',
234+
...sidebarColors.light,
169235
},
170236
dark: {
171237
'background': '20 14.3% 4.1%',
@@ -187,6 +253,12 @@ export const themes = [
187253
'border': '12 6.5% 15.1%',
188254
'input': '12 6.5% 15.1%',
189255
'ring': '24 5.7% 82.9%',
256+
'chart-1': '220 70% 50%',
257+
'chart-2': '160 60% 45%',
258+
'chart-3': '30 80% 55%',
259+
'chart-4': '280 65% 60%',
260+
'chart-5': '340 75% 55%',
261+
...sidebarColors.dark,
190262
},
191263
},
192264
},
@@ -219,6 +291,12 @@ export const themes = [
219291
'input': '220 13% 91%',
220292
'ring': '224 71.4% 4.1%',
221293
'radius': '0.35rem',
294+
'chart-1': '12 76% 61%',
295+
'chart-2': '173 58% 39%',
296+
'chart-3': '197 37% 24%',
297+
'chart-4': '43 74% 66%',
298+
'chart-5': '27 87% 67%',
299+
...sidebarColors.light,
222300
},
223301
dark: {
224302
'background': '224 71.4% 4.1%',
@@ -240,6 +318,12 @@ export const themes = [
240318
'border': '215 27.9% 16.9%',
241319
'input': '215 27.9% 16.9%',
242320
'ring': '216 12.2% 83.9%',
321+
'chart-1': '220 70% 50%',
322+
'chart-2': '160 60% 45%',
323+
'chart-3': '30 80% 55%',
324+
'chart-4': '280 65% 60%',
325+
'chart-5': '340 75% 55%',
326+
...sidebarColors.dark,
243327
},
244328
},
245329
},
@@ -271,6 +355,12 @@ export const themes = [
271355
'border': '0 0% 89.8%',
272356
'input': '0 0% 89.8%',
273357
'ring': '0 0% 3.9%',
358+
'chart-1': '12 76% 61%',
359+
'chart-2': '173 58% 39%',
360+
'chart-3': '197 37% 24%',
361+
'chart-4': '43 74% 66%',
362+
'chart-5': '27 87% 67%',
363+
...sidebarColors.light,
274364
},
275365
dark: {
276366
'background': '0 0% 3.9%',
@@ -292,6 +382,12 @@ export const themes = [
292382
'border': '0 0% 14.9%',
293383
'input': '0 0% 14.9%',
294384
'ring': '0 0% 83.1%',
385+
'chart-1': '220 70% 50%',
386+
'chart-2': '160 60% 45%',
387+
'chart-3': '30 80% 55%',
388+
'chart-4': '280 65% 60%',
389+
'chart-5': '340 75% 55%',
390+
...sidebarColors.dark,
295391
},
296392
},
297393
},
@@ -324,6 +420,12 @@ export const themes = [
324420
'input': '0 0% 89.8%',
325421
'ring': '0 72.2% 50.6%',
326422
'radius': '0.4rem',
423+
'chart-1': '12 76% 61%',
424+
'chart-2': '173 58% 39%',
425+
'chart-3': '197 37% 24%',
426+
'chart-4': '43 74% 66%',
427+
'chart-5': '27 87% 67%',
428+
...sidebarColors.light,
327429
},
328430
dark: {
329431
'background': '0 0% 3.9%',
@@ -345,6 +447,12 @@ export const themes = [
345447
'border': '0 0% 14.9%',
346448
'input': '0 0% 14.9%',
347449
'ring': '0 72.2% 50.6%',
450+
'chart-1': '220 70% 50%',
451+
'chart-2': '160 60% 45%',
452+
'chart-3': '30 80% 55%',
453+
'chart-4': '280 65% 60%',
454+
'chart-5': '340 75% 55%',
455+
...sidebarColors.dark,
348456
},
349457
},
350458
},
@@ -377,6 +485,12 @@ export const themes = [
377485
'input': '240 5.9% 90%',
378486
'ring': '346.8 77.2% 49.8%',
379487
'radius': '0.5rem',
488+
'chart-1': '12 76% 61%',
489+
'chart-2': '173 58% 39%',
490+
'chart-3': '197 37% 24%',
491+
'chart-4': '43 74% 66%',
492+
'chart-5': '27 87% 67%',
493+
...sidebarColors.light,
380494
},
381495
dark: {
382496
'background': '20 14.3% 4.1%',
@@ -398,6 +512,12 @@ export const themes = [
398512
'border': '240 3.7% 15.9%',
399513
'input': '240 3.7% 15.9%',
400514
'ring': '346.8 77.2% 49.8%',
515+
'chart-1': '220 70% 50%',
516+
'chart-2': '160 60% 45%',
517+
'chart-3': '30 80% 55%',
518+
'chart-4': '280 65% 60%',
519+
'chart-5': '340 75% 55%',
520+
...sidebarColors.dark,
401521
},
402522
},
403523
},
@@ -430,6 +550,12 @@ export const themes = [
430550
'input': '20 5.9% 90%',
431551
'ring': '24.6 95% 53.1%',
432552
'radius': '0.95rem',
553+
'chart-1': '12 76% 61%',
554+
'chart-2': '173 58% 39%',
555+
'chart-3': '197 37% 24%',
556+
'chart-4': '43 74% 66%',
557+
'chart-5': '27 87% 67%',
558+
...sidebarColors.light,
433559
},
434560
dark: {
435561
'background': '20 14.3% 4.1%',
@@ -451,6 +577,12 @@ export const themes = [
451577
'border': '12 6.5% 15.1%',
452578
'input': '12 6.5% 15.1%',
453579
'ring': '20.5 90.2% 48.2%',
580+
'chart-1': '220 70% 50%',
581+
'chart-2': '160 60% 45%',
582+
'chart-3': '30 80% 55%',
583+
'chart-4': '280 65% 60%',
584+
'chart-5': '340 75% 55%',
585+
...sidebarColors.dark,
454586
},
455587
},
456588
},
@@ -482,6 +614,12 @@ export const themes = [
482614
'border': '240 5.9% 90%',
483615
'input': '240 5.9% 90%',
484616
'ring': '142.1 76.2% 36.3%',
617+
'chart-1': '12 76% 61%',
618+
'chart-2': '173 58% 39%',
619+
'chart-3': '197 37% 24%',
620+
'chart-4': '43 74% 66%',
621+
'chart-5': '27 87% 67%',
622+
...sidebarColors.light,
485623
},
486624
dark: {
487625
'background': '20 14.3% 4.1%',
@@ -503,6 +641,12 @@ export const themes = [
503641
'border': '240 3.7% 15.9%',
504642
'input': '240 3.7% 15.9%',
505643
'ring': '142.4 71.8% 29.2%',
644+
'chart-1': '220 70% 50%',
645+
'chart-2': '160 60% 45%',
646+
'chart-3': '30 80% 55%',
647+
'chart-4': '280 65% 60%',
648+
'chart-5': '340 75% 55%',
649+
...sidebarColors.dark,
506650
},
507651
},
508652
},
@@ -534,6 +678,12 @@ export const themes = [
534678
'border': '214.3 31.8% 91.4%',
535679
'input': '214.3 31.8% 91.4%',
536680
'ring': '221.2 83.2% 53.3%',
681+
'chart-1': '12 76% 61%',
682+
'chart-2': '173 58% 39%',
683+
'chart-3': '197 37% 24%',
684+
'chart-4': '43 74% 66%',
685+
'chart-5': '27 87% 67%',
686+
...sidebarColors.light,
537687
},
538688
dark: {
539689
'background': '222.2 84% 4.9%',
@@ -555,6 +705,12 @@ export const themes = [
555705
'border': '217.2 32.6% 17.5%',
556706
'input': '217.2 32.6% 17.5%',
557707
'ring': '224.3 76.3% 48%',
708+
'chart-1': '220 70% 50%',
709+
'chart-2': '160 60% 45%',
710+
'chart-3': '30 80% 55%',
711+
'chart-4': '280 65% 60%',
712+
'chart-5': '340 75% 55%',
713+
...sidebarColors.dark,
558714
},
559715
},
560716
},
@@ -587,6 +743,12 @@ export const themes = [
587743
'input': '20 5.9% 90%',
588744
'ring': '20 14.3% 4.1%',
589745
'radius': '0.95rem',
746+
'chart-1': '12 76% 61%',
747+
'chart-2': '173 58% 39%',
748+
'chart-3': '197 37% 24%',
749+
'chart-4': '43 74% 66%',
750+
'chart-5': '27 87% 67%',
751+
...sidebarColors.light,
590752
},
591753
dark: {
592754
'background': '20 14.3% 4.1%',
@@ -608,6 +770,12 @@ export const themes = [
608770
'border': '12 6.5% 15.1%',
609771
'input': '12 6.5% 15.1%',
610772
'ring': '35.5 91.7% 32.9%',
773+
'chart-1': '220 70% 50%',
774+
'chart-2': '160 60% 45%',
775+
'chart-3': '30 80% 55%',
776+
'chart-4': '280 65% 60%',
777+
'chart-5': '340 75% 55%',
778+
...sidebarColors.dark,
611779
},
612780
},
613781
},
@@ -639,6 +807,12 @@ export const themes = [
639807
'border': '220 13% 91%',
640808
'input': '220 13% 91%',
641809
'ring': '262.1 83.3% 57.8%',
810+
'chart-1': '12 76% 61%',
811+
'chart-2': '173 58% 39%',
812+
'chart-3': '197 37% 24%',
813+
'chart-4': '43 74% 66%',
814+
'chart-5': '27 87% 67%',
815+
...sidebarColors.light,
642816
},
643817
dark: {
644818
'background': '224 71.4% 4.1%',
@@ -660,6 +834,12 @@ export const themes = [
660834
'border': '215 27.9% 16.9%',
661835
'input': '215 27.9% 16.9%',
662836
'ring': '263.4 70% 50.4%',
837+
'chart-1': '220 70% 50%',
838+
'chart-2': '160 60% 45%',
839+
'chart-3': '30 80% 55%',
840+
'chart-4': '280 65% 60%',
841+
'chart-5': '340 75% 55%',
842+
...sidebarColors.dark,
663843
},
664844
},
665845
},

0 commit comments

Comments
 (0)
Please sign in to comment.