67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
export const themeTokens = {
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: "var(--color-primary)",
|
|
foreground: "var(--color-on-primary)"
|
|
},
|
|
background: "var(--color-background)",
|
|
foreground: "var(--color-foreground)",
|
|
muted: "var(--color-muted)",
|
|
accent: "var(--color-accent)",
|
|
border: "var(--color-border)",
|
|
panel: "var(--color-panel)"
|
|
},
|
|
fontFamily: {
|
|
sans: ["'Manrope'", "Inter", "system-ui", "sans-serif"]
|
|
},
|
|
radius: {
|
|
xs: "var(--radius-xs)",
|
|
sm: "var(--radius-sm)",
|
|
md: "var(--radius-md)",
|
|
lg: "var(--radius-lg)",
|
|
xl: "var(--radius-xl)"
|
|
},
|
|
shadow: {
|
|
sm: "0 10px 20px rgba(5, 7, 11, 0.14)",
|
|
md: "0 18px 28px rgba(5, 7, 11, 0.24)",
|
|
lg: "0 26px 60px rgba(5, 7, 11, 0.35)"
|
|
}
|
|
} as const;
|
|
|
|
export type ThemeMode = "light" | "dark";
|
|
|
|
export const themeVariables: Record<ThemeMode, CSSProperties> = {
|
|
light: {
|
|
"--color-background": "#f4f5f8",
|
|
"--color-foreground": "#111827",
|
|
"--color-muted": "rgba(17,24,39,0.62)",
|
|
"--color-primary": "#2563eb",
|
|
"--color-on-primary": "#ffffff",
|
|
"--color-accent": "#f97316",
|
|
"--color-border": "rgba(17,24,39,0.12)",
|
|
"--color-panel": "rgba(255,255,255,0.85)",
|
|
"--radius-xs": "6px",
|
|
"--radius-sm": "10px",
|
|
"--radius-md": "14px",
|
|
"--radius-lg": "18px",
|
|
"--radius-xl": "26px"
|
|
},
|
|
dark: {
|
|
"--color-background": "#05070b",
|
|
"--color-foreground": "#e7ecf5",
|
|
"--color-muted": "#a1a8b6",
|
|
"--color-primary": "#f97316",
|
|
"--color-on-primary": "#05070b",
|
|
"--color-accent": "#facc15",
|
|
"--color-border": "#1f2733",
|
|
"--color-panel": "#131821",
|
|
"--radius-xs": "6px",
|
|
"--radius-sm": "10px",
|
|
"--radius-md": "14px",
|
|
"--radius-lg": "18px",
|
|
"--radius-xl": "26px"
|
|
}
|
|
};
|