78 lines
3.3 KiB
Plaintext
78 lines
3.3 KiB
Plaintext
// Shadcn-style Color System
|
|
// Based on shadcn/ui official neutral theme with light/dark mode support
|
|
// Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/styles/globals.css
|
|
|
|
// Color palette structure
|
|
export struct ColorPalette {
|
|
background: color,
|
|
foreground: color,
|
|
card: color,
|
|
card-foreground: color,
|
|
popover: color,
|
|
popover-foreground: color,
|
|
primary: color,
|
|
primary-foreground: color,
|
|
secondary: color,
|
|
secondary-foreground: color,
|
|
muted: color,
|
|
muted-foreground: color,
|
|
accent: color,
|
|
accent-foreground: color,
|
|
destructive: color,
|
|
destructive-foreground: color,
|
|
border: color,
|
|
input: color,
|
|
ring: color,
|
|
}
|
|
|
|
// Light mode colors - shadcn official neutral theme
|
|
// oklch values converted to hex for Slint compatibility
|
|
export global LightColors {
|
|
out property <ColorPalette> palette: {
|
|
background: #ffffff, // oklch(1 0 0)
|
|
foreground: #252525, // oklch(0.145 0 0)
|
|
card: #ffffff, // oklch(1 0 0)
|
|
card-foreground: #252525, // oklch(0.145 0 0)
|
|
popover: #ffffff, // oklch(1 0 0)
|
|
popover-foreground: #252525, // oklch(0.145 0 0)
|
|
primary: #343434, // oklch(0.205 0 0)
|
|
primary-foreground: #fbfbfb, // oklch(0.985 0 0)
|
|
secondary: #f7f7f7, // oklch(0.97 0 0)
|
|
secondary-foreground: #343434, // oklch(0.205 0 0)
|
|
muted: #f7f7f7, // oklch(0.97 0 0)
|
|
muted-foreground: #8e8e8e, // oklch(0.556 0 0)
|
|
accent: #f7f7f7, // oklch(0.97 0 0)
|
|
accent-foreground: #343434, // oklch(0.205 0 0)
|
|
destructive: #ef4444, // oklch(0.577 0.245 27.325)
|
|
destructive-foreground: #f7f7f7, // oklch(0.97 0.01 17) - light red/pink, not white!
|
|
border: #ebebeb, // oklch(0.922 0 0)
|
|
input: #ebebeb, // oklch(0.922 0 0)
|
|
ring: #b4b4b4, // oklch(0.708 0 0)
|
|
};
|
|
}
|
|
|
|
// Dark mode colors - shadcn official neutral theme
|
|
export global DarkColors {
|
|
out property <ColorPalette> palette: {
|
|
background: #252525, // oklch(0.145 0 0)
|
|
foreground: #fbfbfb, // oklch(0.985 0 0)
|
|
card: #343434, // oklch(0.205 0 0)
|
|
card-foreground: #fbfbfb, // oklch(0.985 0 0)
|
|
popover: #444444, // oklch(0.269 0 0)
|
|
popover-foreground: #fbfbfb, // oklch(0.985 0 0)
|
|
primary: #ebebeb, // oklch(0.922 0 0)
|
|
primary-foreground: #343434, // oklch(0.205 0 0)
|
|
secondary: #444444, // oklch(0.269 0 0)
|
|
secondary-foreground: #fbfbfb, // oklch(0.985 0 0)
|
|
muted: #444444, // oklch(0.269 0 0)
|
|
muted-foreground: #b4b4b4, // oklch(0.708 0 0)
|
|
accent: #5e5e5e, // oklch(0.371 0 0)
|
|
accent-foreground: #fbfbfb, // oklch(0.985 0 0)
|
|
destructive: #dc2626, // oklch(0.704 0.191 22.216)
|
|
destructive-foreground: #ef4444, // oklch(0.58 0.22 27) - red color, not white!
|
|
border: #1a1a1a, // oklch(1 0 0 / 10%) - 10% white on dark
|
|
input: #262626, // oklch(1 0 0 / 15%) - 15% white on dark
|
|
ring: #8e8e8e, // oklch(0.556 0 0)
|
|
};
|
|
}
|