jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lay the Almanacka design foundation: tokens, type, shell

Browse Source 
New token system in global.css (near-white surfaces, one ink-blue
accent, no sub-12px type), self-hosted Schibsted Grotesk, rewritten
primitives (buttons, fields, modal shell, segmented, disclosure,
skeleton), a borderless 56px header with an SV | EN language toggle,
an Icon component replacing glyphs, page skeletons that keep the
layout during loading, and leave-type colours moved out of TS into
CSS variables. Feature blocks keep their structure for later phases.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Jacob Hagstedt
2026-09-19 18:25:04 +02:00
parent 95444d3bf4
commit d14f86478a
44 changed files with 1358 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/components.css
+15 -12
View File
@@ -34,7 +34,6 @@
padding: var(--sp-5);
background-color: var(--c-surface);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
/* The "all parents" combined total — a footer row spanning every column
@@ -210,9 +209,9 @@
.dashboard-hero__message {
margin: 0;
font-size: var(--fs-2xl);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: -0.02em;
color: var(--c-text);
}
@@ -259,11 +258,9 @@
}
.age4-bars__title {
font-size: var(--fs-base);
font-weight: 600;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-text-muted);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 0;
}
@@ -314,11 +311,9 @@
}
.year-timeline__title {
font-size: var(--fs-base);
font-weight: 600;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-text-muted);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: var(--sp-1);
}
@@ -351,6 +346,14 @@
height: 10px;
border-radius: var(--radius-full);
flex-shrink: 0;
box-shadow: inset 0 0 0 1px var(--c-border);
}
/* Lägsta is a white fill told apart by its outline, not a hue (see the
* --c-leave-* tokens) — the outline is what makes it visible at all. */
.year-timeline__legend-swatch--type-lagsta,
.year-timeline__band--type-lagsta {
box-shadow: inset 0 0 0 1px var(--c-leave-lagsta-outline);
}
.year-timeline__row {