Oier Bravo Urtasun
ce1bcfb7a6
- Remove all 1px border separators (sidebar border-r, page header border-b, section border-t, member list divide-y, invite card border). Separation is now achieved via background color shifts and whitespace per the "No-Line" rule. - Fix sidebar: bg-surface-raised vs bg-background creates tonal separation. - Correct dark background to #020617 (slate-950) per spec. - Add surface-container-low, text-primary/secondary/muted, destructive tokens. - Fix CSS variable color space: all tokens are RGB triplets; switch Tailwind config and app.css from hsl() to rgb() to prevent yellow/warm color bleed. - Replace emoji nav icons with Lucide icons at 16px / 1.5 stroke-width. - Apply Masthead typography (uppercase Label-MD + Title-LG) to all page headers and section labels across lists, tasks, notes, search, settings, manage. - Destructive action (sign out) uses bg-destructive per spec. - Add `just serve` command: builds and runs the prod Node server at :3000 against the dev Docker stack for production build testing. - Add nav_collective i18n key (en + es). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
51 lines
1.8 KiB
CSS
51 lines
1.8 KiB
CSS
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
|
|
/* Inter font */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
/* Design tokens — light mode
|
|
* Surface hierarchy (stacked sheets of paper):
|
|
* background → surface-container-low → surface → surface-raised (cards pop up)
|
|
*/
|
|
:root {
|
|
--background: 247 249 251; /* #f7f9fb — spec exact value */
|
|
--surface-container-low: 241 245 249; /* slate-100 — subtle grouping bg */
|
|
--surface: 255 255 255; /* white — base card surface */
|
|
--surface-raised: 248 250 252; /* slate-50 — popped card (sidebar) */
|
|
--text-primary: 15 23 42; /* slate-900 — titles only */
|
|
--text-secondary: 100 116 139; /* slate-500 — meta / labels */
|
|
--text-muted: 148 163 184; /* slate-400 */
|
|
--destructive: 185 28 28; /* red-700 ≈ #ba1a1a spec */
|
|
}
|
|
|
|
/* Design tokens — dark mode */
|
|
.dark {
|
|
--background: 2 6 23; /* #020617 slate-950 — spec exact value */
|
|
--surface-container-low: 15 23 42; /* slate-900 — subtle grouping */
|
|
--surface: 30 41 59; /* slate-800 — base card surface */
|
|
--surface-raised: 51 65 85; /* slate-700 — popped card (sidebar) */
|
|
--text-primary: 248 250 252; /* slate-50 */
|
|
--text-secondary: 148 163 184; /* slate-400 */
|
|
--text-muted: 100 116 139; /* slate-500 */
|
|
--destructive: 239 68 68; /* red-500 — more visible on dark bg */
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
background-color: rgb(var(--background));
|
|
color: rgb(var(--text-primary));
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|