teernisse
40b3ccf33e
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>
133 lines
4.8 KiB
JavaScript
133 lines
4.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./src/client/**/*.{html,tsx,ts}"],
|
|
theme: {
|
|
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: [],
|
|
};
|