Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
133 lines
5.4 KiB
CSS
133 lines
5.4 KiB
CSS
/* tokens.css — Tailwind v4 CSS-first @theme
|
|
Reverse-engineered design system. DARK SCHEME ONLY (app sets color-scheme:dark,
|
|
.dark on <html>, no light/[data-theme] variant exists).
|
|
Brand assets (logo, avatars, wallpapers) intentionally excluded — replace with ours. */
|
|
|
|
@theme {
|
|
/* ---- Fonts (vendor woff2 locally; see assets-manifest) ---- */
|
|
--font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, monospace;
|
|
--font-inter: "Inter", "Inter Fallback", sans-serif;
|
|
/* reserved/secondary brand fonts present in token layer */
|
|
--font-display: "Familjen Grotesk", sans-serif;
|
|
--font-body: "Satoshi", system-ui, sans-serif;
|
|
--font-logo: "Ranade", sans-serif;
|
|
|
|
/* ---- Color: function-grouped ---- */
|
|
--color-background: #0a0a0a;
|
|
--color-foreground: #fafafa;
|
|
--color-card: #0a0a0a;
|
|
--color-popover: #0a0a0a;
|
|
--color-surface-warm: #141414; /* raised tier 1 / warm surface */
|
|
--color-surface-warm-muted: #1f1f1f; /* raised tier 2 */
|
|
--color-subtle: #141414;
|
|
--color-hover-bg: #171717; /* generic hover fill */
|
|
--color-divider-subtle: #1a1a1a;
|
|
--color-border: #262626;
|
|
--color-input: #262626;
|
|
--color-muted: #262626;
|
|
--color-secondary: #262626;
|
|
--color-accent-bg: #262626; /* token named --accent in source */
|
|
--color-muted-foreground: #a3a3a3;
|
|
--color-subtle-foreground: #737373;
|
|
|
|
/* brand accent (coral) + variants */
|
|
--color-coral: #f96565;
|
|
--color-coral-light: #fa7575;
|
|
--color-coral-dark: #e85555;
|
|
--color-primary: #fafafa; /* primary button bg (light-on-dark) */
|
|
--color-primary-foreground: #171717;
|
|
--color-ring: #fafafa;
|
|
--color-focus-ring: #f5f5f5;
|
|
|
|
/* semantic */
|
|
--color-destructive: #7f1d1d;
|
|
--color-destructive-foreground: #fafafa;
|
|
--color-chart-1: #2662d9;
|
|
--color-chart-2: #2eb88a;
|
|
--color-chart-3: #e88c30;
|
|
--color-chart-4: #af57db;
|
|
--color-chart-5: #e23670;
|
|
|
|
/* gradient stops (coral tile) */
|
|
--color-gradient-coral-top: #fa7575;
|
|
--color-gradient-coral-bottom: #e85555;
|
|
|
|
/* ---- Type scale (size / line-height) ---- */
|
|
--text-xxs: 10px; --text-xxs--line-height: 14px;
|
|
--text-xs: .75rem; --text-xs--line-height: 1rem;
|
|
--text-sm: .875rem; --text-sm--line-height: 1.25rem;
|
|
--text-base: 1rem; --text-base--line-height: 1.5rem;
|
|
--text-lg: 1.125rem;--text-lg--line-height: 1.75rem;
|
|
--text-xl: 1.25rem; --text-xl--line-height: 1.75rem;
|
|
--text-2xl: 1.5rem; --text-2xl--line-height: 2rem;
|
|
--text-3xl: 1.875rem;--text-3xl--line-height: 2.25rem;
|
|
--text-4xl: 2.25rem;--text-4xl--line-height: 2.5rem;
|
|
--text-5xl: 3rem; --text-5xl--line-height: 1;
|
|
--text-6xl: 3.75rem;--text-6xl--line-height: 1;
|
|
--text-xxl: 28px; --text-xxl--line-height: 36px;
|
|
--text-xxxl: 36px; --text-xxxl--line-height: 44px;
|
|
|
|
--font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500;
|
|
--font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800;
|
|
|
|
--tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em;
|
|
--tracking-wider: .05em; --tracking-widest: .1em;
|
|
--leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625;
|
|
|
|
/* ---- Spacing scale (base unit .25rem) ---- */
|
|
--spacing: .25rem;
|
|
|
|
/* ---- Radius scale ---- */
|
|
--radius: .5rem;
|
|
--radius-sm: calc(.5rem - 4px);
|
|
--radius-md: calc(.5rem - 2px);
|
|
--radius-lg: .5rem;
|
|
--radius-xl: calc(.5rem + 4px);
|
|
--radius-2xl: 1rem;
|
|
--radius-3xl: 1.5rem;
|
|
--radius-button: 9999px; /* pill buttons + nav items */
|
|
--radius-toggle: 8px;
|
|
|
|
/* ---- Elevation / shadows ---- */
|
|
--shadow-xs: 0 1px 2px 0 #0000000d;
|
|
--shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
|
|
--shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
|
|
--shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
|
|
--shadow-bubble: 0 1px 2px #0006;
|
|
--shadow-button: 0 1px 2px #0000004d, 0 2px 4px -1px #0000004d;
|
|
--shadow-card: 0 1px 2px #0006, 0 4px 12px -2px #00000080;
|
|
--shadow-popover: 0 16px 40px -12px #0009;
|
|
--shadow-dialog: 0 32px 80px -24px #000000b3;
|
|
--shadow-edge: -3px 0 14px -4px #0006; /* panel left edge */
|
|
--shadow-dock-tile: 0 0 0 1px #ffffff14, inset 0 1px 0 #ffffff2e;
|
|
--shadow-cta: inset 0 1px 0 #ffffff40, 0 3px 10px -3px #f965658c; /* coral CTA */
|
|
--nav-logo-shadow: inset 0 0 0 1px #ffffff26;
|
|
|
|
/* ---- Motion ---- */
|
|
--ease-app: cubic-bezier(.32,.72,0,1); /* DOMINANT curve */
|
|
--ease-out: cubic-bezier(.16,1,.3,1); /* secondary */
|
|
--ease-quick: cubic-bezier(.16,1,.3,1);
|
|
--ease-in-out: cubic-bezier(.4,0,.2,1);
|
|
--ease-bounce: cubic-bezier(.5,1.5,.6,1);
|
|
--duration-fast: .15s;
|
|
--duration-normal: .25s;
|
|
--duration-slow: .4s;
|
|
--default-transition-duration: .25s;
|
|
--default-transition-timing-function: cubic-bezier(.32,.72,0,1);
|
|
|
|
/* ---- Structural dimensions ---- */
|
|
--app-sidebar-width: 176px; /* left rail */
|
|
--sessions-col-width: 208px; /* sessions column */
|
|
--device-panel-width: 448px; /* Computer slide-out */
|
|
--header-height-sm: 56px; /* h-14 */
|
|
--header-height-lg: 80px; /* lg:h-20 */
|
|
--focus-ring-width: 2px;
|
|
--focus-ring-offset: 2px;
|
|
}
|
|
|
|
/* Breakpoints observed: mobile <600px and <=767px (screen). Desktop rail/3-col
|
|
layout above lg. prefers-reduced-motion: reduce supported. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
|
|
} |