mirror of
https://github.com/Sea-Haven-Industries/proposal-system.git
synced 2026-10-07 16:18:57 +00:00
8ce2a5cd8f
Port shoc-frontend-new dev's design system with its CSS-variable single-token-source mechanism: - src/styles/theme.css: SHOC token file ported verbatim (Montserrat/ DM Sans/JetBrains Mono, primary #1c75bc, navy #262262, full radius/ shadow/sidebar/header token layers); fonts self-hosted via @fontsource - src/lib/theme/{css-vars,mui-theme}.ts: getCssVar -> createTheme adapter mirroring SHOC's mui-theme.ts (palette, typography, shadows tuple, component overrides; MUI v9 slot renames expressed as class selectors); theme.ts is now a re-export - Shell: SHOC composition (sidebar column + sticky gradient topbar + scrolling main); sidebar 244px/76px collapse with brand header row, grouped nav, SHOC active treatment (white card + 3px accent bar); topbar 100-degree gradient, surface hamburger, gradient avatar pill - Brand: SeahavenMark + BrandLockup ported (Tailwind re-expressed as sx; wordmark subtitle localized to PROPOSAL SYSTEM) - Login: SHOC auth-card treatment (centered 384px card on #f9fafb) - Old "Sea Haven Ops" Inter/#2563EB theme and Nunito remnants removed; remaining hardcoded hexes replaced with tokens; lucide-react for shell/nav icons per SHOC convention Verify: tsc clean, 26/26 vitest, vite build OK; Playwright screenshots pixel-sampled against the extracted SHOC spec (all hard values exact, no blocking deviations).
52 lines
1.3 KiB
CSS
52 lines
1.3 KiB
CSS
/* Base element typography — mirrors shoc-frontend-new dev src/styles/typography.css. */
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
color: var(--foreground);
|
|
background-color: var(--color-bg-page);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-heading);
|
|
color: var(--foreground);
|
|
margin: 0;
|
|
}
|
|
|
|
h1 { font-size: var(--text-2xl); font-weight: 800; }
|
|
h2 { font-size: var(--text-xl); font-weight: 700; }
|
|
h3 { font-size: var(--text-lg); font-weight: 600; }
|
|
h4 { font-size: var(--text-md); font-weight: 600; }
|
|
h5 { font-size: var(--text-base); font-weight: 600; }
|
|
h6 { font-size: var(--text-base-sm); font-weight: 600; }
|
|
|
|
.text-caption {
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-sm);
|
|
line-height: var(--leading-normal);
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.text-label {
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--color-sidebar-label);
|
|
}
|
|
|
|
.text-nav-group {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted-foreground);
|
|
}
|