tas/Codewalkers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
04c212da9247996f4a0a93122f6a9da8fdf4ff24
Codewalkers/apps/web/tailwind.config.ts
Lukas May 04c212da92 feat: Implement v2 design system with indigo brand, dark mode, and status tokens 
Complete frontend design overhaul replacing achromatic shadcn/ui defaults with
an indigo-branded (#6366F1), status-aware, dark-mode-enabled token system.

Phase 1 — Theme Foundation:
- Replace all CSS tokens in index.css with v2 light/dark mode values
- Add 24 status tokens (6 statuses × 4 variants), 22 terminal tokens,
  7 diff tokens, 5 shadow tokens, 9 transition/animation tokens,
  10 z-index tokens, 10-step extended indigo scale
- Install Geist Sans/Mono variable fonts (public/fonts/)
- Extend tailwind.config.ts with all new token utilities
- Add dark mode flash-prevention script in index.html
- Add status-pulse and shimmer keyframe animations
- Add global focus-visible styles and reduced-motion media query

Phase 2 — ThemeProvider + Toggle:
- ThemeProvider context with system preference listener
- 3-state ThemeToggle (Sun/Monitor/Moon)
- Radix tooltip primitive for tooltips
- localStorage persistence with 'cw-theme' key

Phase 3 — Shared Components + Token Migration:
- StatusDot: mapEntityStatus() maps raw statuses to 6 semantic variants
- StatusBadge: uses status token bg/fg/border classes
- Badge: 6 new status variants + xs size
- EmptyState, ErrorState, SaveIndicator shared patterns
- CommandPalette: Cmd+K search with fuzzy matching, keyboard nav
- Skeleton with shimmer animation + SkeletonCard composite layouts
- KeyboardShortcutHint, NavBadge, enhanced Sonner config
- Migrate ALL hardcoded Tailwind colors to token classes across
  AgentOutputViewer, review/*, ProgressBar, AccountCard,
  InitiativeHeader, DependencyIndicator, PipelineTaskCard,
  PreviewPanel, ChangeSetBanner, MessageCard, PhaseDetailPanel

Phase 4 — App Layout Overhaul:
- Single 48px row header with CW logo, nav with NavBadge counts,
  Cmd+K search button, ThemeToggle, HealthDot
- Remove max-w-7xl from header/main; pages control own widths
- ConnectionBanner for offline/reconnecting states
- BrowserTitleUpdater with running/questions counts
- useGlobalKeyboard (1-4 nav, Cmd+K), useConnectionStatus hooks
- Per-page width wrappers (initiatives max-w-6xl, settings max-w-4xl)

Phase 5 — Page-Level Token Migration:
- ReviewSidebar: all hardcoded green/orange/red → status/diff tokens
- CommentThread: resolved state → status-success tokens
- Settings health: green → status-success-dot
2026-03-03 11:43:09 +01:00

182 lines
6.6 KiB
TypeScript
Raw Blame History

import type { Config } from "tailwindcss";
import tailwindcssAnimate from "tailwindcss-animate";
import typography from "@tailwindcss/typography";
import defaultTheme from "tailwindcss/defaultTheme";
export default {
darkMode: "class",
content: ["./src/**/*.{ts,tsx}"],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
fontFamily: {
sans: ["Geist Sans", ...defaultTheme.fontFamily.sans],
mono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
indigo: {
50: "hsl(var(--indigo-50))",
100: "hsl(var(--indigo-100))",
200: "hsl(var(--indigo-200))",
300: "hsl(var(--indigo-300))",
400: "hsl(var(--indigo-400))",
500: "hsl(var(--indigo-500))",
600: "hsl(var(--indigo-600))",
700: "hsl(var(--indigo-700))",
800: "hsl(var(--indigo-800))",
900: "hsl(var(--indigo-900))",
},
status: {
"active-bg": "hsl(var(--status-active-bg))",
"active-fg": "hsl(var(--status-active-fg))",
"active-border": "hsl(var(--status-active-border))",
"active-dot": "hsl(var(--status-active-dot))",
"success-bg": "hsl(var(--status-success-bg))",
"success-fg": "hsl(var(--status-success-fg))",
"success-border": "hsl(var(--status-success-border))",
"success-dot": "hsl(var(--status-success-dot))",
"warning-bg": "hsl(var(--status-warning-bg))",
"warning-fg": "hsl(var(--status-warning-fg))",
"warning-border": "hsl(var(--status-warning-border))",
"warning-dot": "hsl(var(--status-warning-dot))",
"error-bg": "hsl(var(--status-error-bg))",
"error-fg": "hsl(var(--status-error-fg))",
"error-border": "hsl(var(--status-error-border))",
"error-dot": "hsl(var(--status-error-dot))",
"neutral-bg": "hsl(var(--status-neutral-bg))",
"neutral-fg": "hsl(var(--status-neutral-fg))",
"neutral-border": "hsl(var(--status-neutral-border))",
"neutral-dot": "hsl(var(--status-neutral-dot))",
"urgent-bg": "hsl(var(--status-urgent-bg))",
"urgent-fg": "hsl(var(--status-urgent-fg))",
"urgent-border": "hsl(var(--status-urgent-border))",
"urgent-dot": "hsl(var(--status-urgent-dot))",
},
terminal: {
DEFAULT: "hsl(var(--terminal-bg))",
fg: "hsl(var(--terminal-fg))",
muted: "hsl(var(--terminal-muted))",
border: "hsl(var(--terminal-border))",
system: "hsl(var(--terminal-system))",
tool: "hsl(var(--terminal-tool))",
result: "hsl(var(--terminal-result))",
error: "hsl(var(--terminal-error))",
cursor: "hsl(var(--terminal-cursor))",
link: "hsl(var(--terminal-link))",
warning: "hsl(var(--terminal-warning))",
"line-number": "hsl(var(--terminal-line-number))",
},
diff: {
"add-bg": "hsl(var(--diff-add-bg))",
"add-fg": "hsl(var(--diff-add-fg))",
"add-border": "hsl(var(--diff-add-border))",
"remove-bg": "hsl(var(--diff-remove-bg))",
"remove-fg": "hsl(var(--diff-remove-fg))",
"remove-border":"hsl(var(--diff-remove-border))",
"hunk-bg": "hsl(var(--diff-hunk-bg))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
boxShadow: {
xs: "var(--shadow-xs)",
sm: "var(--shadow-sm)",
md: "var(--shadow-md)",
lg: "var(--shadow-lg)",
xl: "var(--shadow-xl)",
},
transitionDuration: {
instant: "var(--duration-instant)",
fast: "var(--duration-fast)",
normal: "var(--duration-normal)",
slow: "var(--duration-slow)",
},
transitionTimingFunction: {
default: "var(--ease-default)",
in: "var(--ease-in)",
out: "var(--ease-out)",
spring: "var(--ease-spring)",
},
zIndex: {
base: "var(--z-base)",
raised: "var(--z-raised)",
sticky: "var(--z-sticky)",
sidebar: "var(--z-sidebar)",
dropdown: "var(--z-dropdown)",
overlay: "var(--z-overlay)",
modal: "var(--z-modal)",
toast: "var(--z-toast)",
command: "var(--z-command)",
tooltip: "var(--z-tooltip)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
"status-pulse": {
"0%, 100%": { opacity: "1" },
"50%": { opacity: "0.4" },
},
shimmer: {
"0%": { backgroundPosition: "-200% 0" },
"100%": { backgroundPosition: "200% 0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"status-pulse": "status-pulse 2s ease-in-out infinite",
shimmer: "shimmer 1.5s infinite",
},
},
},
plugins: [tailwindcssAnimate, typography],
} satisfies Config;
Reference in New Issue View Git Blame Copy Permalink