oier/collective-lists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): apply Monolith Editorial design system to all Fase 1 screens

Browse Source 
- 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>
This commit is contained in:
Oier Bravo
2026-04-12 22:09:25 +02:00
parent b297d253d9
commit ce1bcfb7a6
17 changed files with 240 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/web/src/app.css
View File

@@ -5,26 +5,31 @@
/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Design tokens — light mode */
/* Design tokens — light mode
* Surface hierarchy (stacked sheets of paper):
* background → surface-container-low → surface → surface-raised (cards pop up)
*/
:root {
--background: 248 250 252; /* slate-50 */
--surface: 255 255 255; /* white */
--surface-raised: 241 245 249; /* slate-100 */
--border: 226 232 240; /* slate-200 */
--text-primary: 15 23 42; /* slate-900 */
--text-secondary: 100 116 139; /* slate-500 */
--text-muted: 148 163 184; /* slate-400 */
--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: 15 23 42; /* slate-950 */
--surface: 30 41 59; /* slate-800 → closer to slate-900 card */
--surface-raised: 51 65 85; /* slate-700 */
--border: 51 65 85; /* slate-700 */
--text-primary: 248 250 252; /* slate-50 */
--text-secondary: 148 163 184; /* slate-400 */
--text-muted: 100 116 139; /* slate-500 */
--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 */
}
* {
@@ -38,8 +43,8 @@ body {
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: hsl(var(--background));
color: hsl(var(--text-primary));
background-color: rgb(var(--background));
color: rgb(var(--text-primary));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}