Add dark design system with CSS custom properties and refined typography
Establish a cohesive dark UI foundation: - Define CSS custom properties for surfaces (4-level depth hierarchy), borders, foreground text (3-tier), accent colors, and canvas background - Add Inter (text) and JetBrains Mono (code) font loading via Google Fonts - Extend Tailwind with semantic color tokens, typography scale (caption/body/ subheading/heading), box shadows (card, glow), and animations (fade-in, slide-in, skeleton shimmer) - Add component-layer utilities: .btn system (primary/secondary/ghost/danger), .glass frosted overlays, .custom-checkbox, .skeleton loaders - Add .prose-message typographic styles for rendered markdown content - Add search minimap CSS (tick marks, viewport indicator) - Restyle scrollbars for thin dark appearance (WebKit + Firefox) - Replace hardcoded Tailwind color classes in CATEGORY_COLORS with semantic tokens (dot/border/text) mapped to the new design system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,131 @@
|
||||
export default {
|
||||
content: ["./src/client/**/*.{html,tsx,ts}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
// Semantic surface colors via CSS variables (dark-mode ready)
|
||||
surface: {
|
||||
DEFAULT: "var(--color-surface)",
|
||||
raised: "var(--color-surface-raised)",
|
||||
overlay: "var(--color-surface-overlay)",
|
||||
inset: "var(--color-surface-inset)",
|
||||
},
|
||||
border: {
|
||||
DEFAULT: "var(--color-border)",
|
||||
muted: "var(--color-border-muted)",
|
||||
},
|
||||
foreground: {
|
||||
DEFAULT: "var(--color-foreground)",
|
||||
secondary: "var(--color-foreground-secondary)",
|
||||
muted: "var(--color-foreground-muted)",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "var(--color-accent)",
|
||||
light: "var(--color-accent-light)",
|
||||
dark: "var(--color-accent-dark)",
|
||||
},
|
||||
|
||||
// Cohesive message category colors — unified saturation/luminance band
|
||||
category: {
|
||||
user: { DEFAULT: "#5b9cf5", light: "#111e35", border: "#1e3560" },
|
||||
assistant: { DEFAULT: "#4ebe68", light: "#0f2519", border: "#1b4a30" },
|
||||
thinking: { DEFAULT: "#b78ef5", light: "#1a1432", border: "#362868" },
|
||||
tool: { DEFAULT: "#d4a030", light: "#1a1810", border: "#4a3818" },
|
||||
result: { DEFAULT: "#8890f5", light: "#161830", border: "#2a2c5e" },
|
||||
system: { DEFAULT: "#8996a8", light: "#161a22", border: "#2a3140" },
|
||||
hook: { DEFAULT: "#586070", light: "#12161e", border: "#222830" },
|
||||
snapshot: { DEFAULT: "#f07ab5", light: "#221428", border: "#552040" },
|
||||
summary: { DEFAULT: "#38d4b8", light: "#102024", border: "#1a4a42" },
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
"Inter",
|
||||
"system-ui",
|
||||
"-apple-system",
|
||||
"BlinkMacSystemFont",
|
||||
"Segoe UI",
|
||||
"sans-serif",
|
||||
],
|
||||
mono: [
|
||||
"JetBrains Mono",
|
||||
"Fira Code",
|
||||
"SF Mono",
|
||||
"Cascadia Code",
|
||||
"ui-monospace",
|
||||
"SFMono-Regular",
|
||||
"monospace",
|
||||
],
|
||||
},
|
||||
fontSize: {
|
||||
// Typography scale: caption, body, subheading, heading
|
||||
caption: ["0.75rem", { lineHeight: "1rem", letterSpacing: "0.01em" }],
|
||||
body: ["0.875rem", { lineHeight: "1.5rem", letterSpacing: "0" }],
|
||||
subheading: ["0.9375rem", { lineHeight: "1.5rem", letterSpacing: "-0.01em" }],
|
||||
heading: ["1.125rem", { lineHeight: "1.75rem", letterSpacing: "-0.02em" }],
|
||||
"heading-lg": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.025em" }],
|
||||
},
|
||||
spacing: {
|
||||
// Refined spacing for layout rhythm
|
||||
0.5: "0.125rem",
|
||||
1.5: "0.375rem",
|
||||
2.5: "0.625rem",
|
||||
4.5: "1.125rem",
|
||||
18: "4.5rem",
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: "0.375rem",
|
||||
lg: "0.5rem",
|
||||
xl: "0.75rem",
|
||||
"2xl": "1rem",
|
||||
},
|
||||
boxShadow: {
|
||||
"xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||||
"sm": "0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.05)",
|
||||
"DEFAULT": "0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06)",
|
||||
"md": "0 4px 12px -2px rgb(0 0 0 / 0.1), 0 2px 6px -2px rgb(0 0 0 / 0.06)",
|
||||
"lg": "0 12px 28px -6px rgb(0 0 0 / 0.15), 0 4px 12px -4px rgb(0 0 0 / 0.08)",
|
||||
"card": "0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04)",
|
||||
"card-hover": "0 6px 16px -4px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.06)",
|
||||
"glow-accent": "0 0 16px rgba(91, 156, 245, 0.12)",
|
||||
"glow-success": "0 0 16px rgba(78, 190, 104, 0.12)",
|
||||
},
|
||||
transitionDuration: {
|
||||
DEFAULT: "150ms",
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
},
|
||||
animation: {
|
||||
"fade-in": "fadeIn 250ms ease-out",
|
||||
"slide-in": "slideIn 250ms ease-out",
|
||||
"slide-up": "slideUp 300ms cubic-bezier(0.16, 1, 0.3, 1)",
|
||||
"skeleton": "skeleton 1.5s ease-in-out infinite",
|
||||
"pulse-subtle": "pulseSubtle 2s ease-in-out infinite",
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
"0%": { opacity: "0", transform: "translateY(6px)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||
},
|
||||
slideIn: {
|
||||
"0%": { opacity: "0", transform: "translateX(-8px)" },
|
||||
"100%": { opacity: "1", transform: "translateX(0)" },
|
||||
},
|
||||
slideUp: {
|
||||
"0%": { opacity: "0", transform: "translateY(12px)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||
},
|
||||
skeleton: {
|
||||
"0%, 100%": { opacity: "1" },
|
||||
"50%": { opacity: "0.4" },
|
||||
},
|
||||
pulseSubtle: {
|
||||
"0%, 100%": { opacity: "1" },
|
||||
"50%": { opacity: "0.7" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user