mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update ring color when primary color changes

Browse Source
This commit is contained in:
codytseng
2025-10-19 15:10:55 +08:00
parent cb46e7f3d5
commit 666e417a13
2 changed files with 73 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/constants.ts
View File

@@ -165,12 +165,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '259 43% 56%', primary: '259 43% 56%',
'primary-hover': '259 43% 65%', 'primary-hover': '259 43% 65%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '259 43% 56%'
}, },
dark: { dark: {
primary: '259 43% 56%', primary: '259 43% 56%',
'primary-hover': '259 43% 65%', 'primary-hover': '259 43% 65%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '259 43% 56%'
} }
}, },
RED: { RED: {
@@ -178,12 +180,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '0 65% 55%', primary: '0 65% 55%',
'primary-hover': '0 65% 65%', 'primary-hover': '0 65% 65%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '0 65% 55%'
}, },
dark: { dark: {
primary: '0 65% 55%', primary: '0 65% 55%',
'primary-hover': '0 65% 65%', 'primary-hover': '0 65% 65%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '0 65% 55%'
} }
}, },
ORANGE: { ORANGE: {
@@ -191,12 +195,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '30 100% 50%', primary: '30 100% 50%',
'primary-hover': '30 100% 60%', 'primary-hover': '30 100% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '30 100% 50%'
}, },
dark: { dark: {
primary: '30 100% 50%', primary: '30 100% 50%',
'primary-hover': '30 100% 60%', 'primary-hover': '30 100% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '30 100% 50%'
} }
}, },
AMBER: { AMBER: {
@@ -204,12 +210,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '42 100% 50%', primary: '42 100% 50%',
'primary-hover': '42 100% 60%', 'primary-hover': '42 100% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '42 100% 50%'
}, },
dark: { dark: {
primary: '42 100% 50%', primary: '42 100% 50%',
'primary-hover': '42 100% 60%', 'primary-hover': '42 100% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '42 100% 50%'
} }
}, },
YELLOW: { YELLOW: {
@@ -217,12 +225,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '54 100% 50%', primary: '54 100% 50%',
'primary-hover': '54 100% 60%', 'primary-hover': '54 100% 60%',
'primary-foreground': '0 0% 10%' 'primary-foreground': '0 0% 10%',
ring: '54 100% 50%'
}, },
dark: { dark: {
primary: '54 100% 50%', primary: '54 100% 50%',
'primary-hover': '54 100% 60%', 'primary-hover': '54 100% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '54 100% 50%'
} }
}, },
LIME: { LIME: {
@@ -230,12 +240,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '90 60% 50%', primary: '90 60% 50%',
'primary-hover': '90 60% 60%', 'primary-hover': '90 60% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '90 60% 50%'
}, },
dark: { dark: {
primary: '90 60% 50%', primary: '90 60% 50%',
'primary-hover': '90 60% 60%', 'primary-hover': '90 60% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '90 60% 50%'
} }
}, },
GREEN: { GREEN: {
@@ -243,12 +255,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '140 60% 40%', primary: '140 60% 40%',
'primary-hover': '140 60% 50%', 'primary-hover': '140 60% 50%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '140 60% 40%'
}, },
dark: { dark: {
primary: '140 60% 40%', primary: '140 60% 40%',
'primary-hover': '140 60% 50%', 'primary-hover': '140 60% 50%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '140 60% 40%'
} }
}, },
EMERALD: { EMERALD: {
@@ -256,12 +270,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '160 70% 40%', primary: '160 70% 40%',
'primary-hover': '160 70% 50%', 'primary-hover': '160 70% 50%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '160 70% 40%'
}, },
dark: { dark: {
primary: '160 70% 40%', primary: '160 70% 40%',
'primary-hover': '160 70% 50%', 'primary-hover': '160 70% 50%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '160 70% 40%'
} }
}, },
TEAL: { TEAL: {
@@ -269,12 +285,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '180 70% 40%', primary: '180 70% 40%',
'primary-hover': '180 70% 50%', 'primary-hover': '180 70% 50%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '180 70% 40%'
}, },
dark: { dark: {
primary: '180 70% 40%', primary: '180 70% 40%',
'primary-hover': '180 70% 50%', 'primary-hover': '180 70% 50%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '180 70% 40%'
} }
}, },
CYAN: { CYAN: {
@@ -282,12 +300,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '200 70% 40%', primary: '200 70% 40%',
'primary-hover': '200 70% 50%', 'primary-hover': '200 70% 50%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '200 70% 40%'
}, },
dark: { dark: {
primary: '200 70% 40%', primary: '200 70% 40%',
'primary-hover': '200 70% 50%', 'primary-hover': '200 70% 50%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '200 70% 40%'
} }
}, },
SKY: { SKY: {
@@ -295,12 +315,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '210 70% 50%', primary: '210 70% 50%',
'primary-hover': '210 70% 60%', 'primary-hover': '210 70% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '210 70% 50%'
}, },
dark: { dark: {
primary: '210 70% 50%', primary: '210 70% 50%',
'primary-hover': '210 70% 60%', 'primary-hover': '210 70% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '210 70% 50%'
} }
}, },
BLUE: { BLUE: {
@@ -308,12 +330,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '220 80% 50%', primary: '220 80% 50%',
'primary-hover': '220 80% 60%', 'primary-hover': '220 80% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '220 80% 50%'
}, },
dark: { dark: {
primary: '220 80% 50%', primary: '220 80% 50%',
'primary-hover': '220 80% 60%', 'primary-hover': '220 80% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '220 80% 50%'
} }
}, },
INDIGO: { INDIGO: {
@@ -321,12 +345,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '230 80% 50%', primary: '230 80% 50%',
'primary-hover': '230 80% 60%', 'primary-hover': '230 80% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '230 80% 50%'
}, },
dark: { dark: {
primary: '230 80% 50%', primary: '230 80% 50%',
'primary-hover': '230 80% 60%', 'primary-hover': '230 80% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '230 80% 50%'
} }
}, },
VIOLET: { VIOLET: {
@@ -334,12 +360,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '250 80% 50%', primary: '250 80% 50%',
'primary-hover': '250 80% 60%', 'primary-hover': '250 80% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '250 80% 50%'
}, },
dark: { dark: {
primary: '250 80% 50%', primary: '250 80% 50%',
'primary-hover': '250 80% 60%', 'primary-hover': '250 80% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '250 80% 50%'
} }
}, },
PURPLE: { PURPLE: {
@@ -347,12 +375,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '280 80% 50%', primary: '280 80% 50%',
'primary-hover': '280 80% 60%', 'primary-hover': '280 80% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '280 80% 50%'
}, },
dark: { dark: {
primary: '280 80% 50%', primary: '280 80% 50%',
'primary-hover': '280 80% 60%', 'primary-hover': '280 80% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '280 80% 50%'
} }
}, },
FUCHSIA: { FUCHSIA: {
@@ -360,12 +390,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '310 80% 50%', primary: '310 80% 50%',
'primary-hover': '310 80% 60%', 'primary-hover': '310 80% 60%',
'primary-foreground': '0 0% 98%' 'primary-foreground': '0 0% 98%',
ring: '310 80% 50%'
}, },
dark: { dark: {
primary: '310 80% 50%', primary: '310 80% 50%',
'primary-hover': '310 80% 60%', 'primary-hover': '310 80% 60%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '310 80% 50%'
} }
}, },
PINK: { PINK: {
@@ -373,12 +405,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '330 80% 60%', primary: '330 80% 60%',
'primary-hover': '330 80% 70%', 'primary-hover': '330 80% 70%',
'primary-foreground': '0 0% 10%' 'primary-foreground': '0 0% 10%',
ring: '330 80% 60%'
}, },
dark: { dark: {
primary: '330 80% 60%', primary: '330 80% 60%',
'primary-hover': '330 80% 70%', 'primary-hover': '330 80% 70%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '330 80% 60%'
} }
}, },
ROSE: { ROSE: {
@@ -386,12 +420,14 @@ export const PRIMARY_COLORS = {
light: { light: {
primary: '350 80% 60%', primary: '350 80% 60%',
'primary-hover': '350 80% 70%', 'primary-hover': '350 80% 70%',
'primary-foreground': '0 0% 10%' 'primary-foreground': '0 0% 10%',
ring: '350 80% 60%'
}, },
dark: { dark: {
primary: '350 80% 60%', primary: '350 80% 60%',
'primary-hover': '350 80% 70%', 'primary-hover': '350 80% 70%',
'primary-foreground': '240 5.9% 10%' 'primary-foreground': '240 5.9% 10%',
ring: '350 80% 60%'
} }
} }
} as const } as const

1
src/providers/ThemeProvider.tsx
View File

@@ -21,6 +21,7 @@ const updateCSSVariables = (color: TPrimaryColor, currentTheme: TTheme) => {
root.style.setProperty('--primary', config.primary) root.style.setProperty('--primary', config.primary)
root.style.setProperty('--primary-hover', config['primary-hover']) root.style.setProperty('--primary-hover', config['primary-hover'])
root.style.setProperty('--primary-foreground', config['primary-foreground']) root.style.setProperty('--primary-foreground', config['primary-foreground'])
root.style.setProperty('--ring', config.ring)
} }
export function ThemeProvider({ children }: { children: React.ReactNode }) { export function ThemeProvider({ children }: { children: React.ReactNode }) {