feat(theme): migrate CSS variables and Tailwind config, refactor settings UI color picker

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
DrSmoothl
2026-02-19 17:44:49 +08:00
parent 8fb137a318
commit b5088fa455
3 changed files with 348 additions and 218 deletions

View File

@@ -5,40 +5,61 @@ export default {
theme: {
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
border: 'hsl(var(--color-border))',
input: 'hsl(var(--color-input))',
ring: 'hsl(var(--color-ring))',
background: 'hsl(var(--color-background))',
foreground: 'hsl(var(--color-foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
DEFAULT: 'hsl(var(--color-primary))',
foreground: 'hsl(var(--color-primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
DEFAULT: 'hsl(var(--color-secondary))',
foreground: 'hsl(var(--color-secondary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
DEFAULT: 'hsl(var(--color-muted))',
foreground: 'hsl(var(--color-muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
DEFAULT: 'hsl(var(--color-accent))',
foreground: 'hsl(var(--color-accent-foreground))',
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
DEFAULT: 'hsl(var(--color-card))',
foreground: 'hsl(var(--color-card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
DEFAULT: 'hsl(var(--color-popover))',
foreground: 'hsl(var(--color-popover-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--color-destructive))',
foreground: 'hsl(var(--color-destructive-foreground))',
},
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
lg: 'var(--visual-radius-lg)',
md: 'var(--visual-radius-md)',
sm: 'var(--visual-radius-sm)',
xl: 'var(--visual-radius-xl)',
full: 'var(--visual-radius-full)',
},
fontFamily: {
sans: 'var(--typography-font-family-base)',
mono: 'var(--typography-font-family-code)',
},
boxShadow: {
sm: 'var(--visual-shadow-sm)',
md: 'var(--visual-shadow-md)',
lg: 'var(--visual-shadow-lg)',
xl: 'var(--visual-shadow-xl)',
},
transitionDuration: {
fast: 'var(--animation-anim-duration-fast)',
normal: 'var(--animation-anim-duration-normal)',
slow: 'var(--animation-anim-duration-slow)',
},
keyframes: {
'slide-in-from-right': {