cleanup: replace 37 hardcoded values with token references

Across 6 layer files: 1px→var(--border-width), 1rem→var(--space-4), 2rem→var(--space-6), etc. Intentionally left: 3px accent borders, graduated chart spacing, em-based sub/sup ratios.
restructure: main.css is the manifest, 01-asw.css is the framework
2026-04-10 19:27:46 +02:00 · 2026-04-10 19:27:39 +02:00
9 changed files with 54 additions and 59 deletions
--- a/assets/css/layers/01-tokens.css
+++ b/assets/css/layers/01-tokens.css
@ -1,8 +1,8 @@
 /**
- * 01-tokens.css
+ * 01-asw.css
 * ASW semantic layer — builds on Open Props
 *
- * Open Props (imported below) provides the base scales:
+ * Open Props (imported in main.css) provides the base scales:
 *   --gray-0…15, --green-0…12, --blue-0…12, --red-0…12, --yellow-0…12
 *   --size-1…15, --font-size-0…8, --font-weight-1…9
 *   --font-lineheight-0…5, --radius-1…6, --shadow-1…6
--- a/assets/css/layers/02-semantic.css
+++ b/assets/css/layers/02-semantic.css
@ -184,8 +184,8 @@ blockquote {
  margin: var(--type-space) 0;
  padding: var(--space-4);
  border-right: none;
-  border-left: 0.25rem solid var(--border);
-  border-inline-start: 0.25rem solid var(--border);
+  border-left: var(--space-1) solid var(--border);
+  border-inline-start: var(--space-1) solid var(--border);
  border-inline-end: none;
 }

@ -200,7 +200,7 @@ hr {
  height: 0;
  margin: var(--type-space) 0;
  border: 0;
-  border-top: 1px solid var(--border);
+  border-top: var(--border-width) solid var(--border);
  color: inherit;
 }

--- a/assets/css/layers/03-components.css
+++ b/assets/css/layers/03-components.css
@ -263,10 +263,10 @@ body > nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  margin-bottom: 2rem;
-  border-bottom: 1px solid var(--border);
+  padding-top: var(--space-5);
+  padding-bottom: var(--space-5);
+  margin-bottom: var(--space-6);
+  border-bottom: var(--border-width) solid var(--border);
 }

 body > nav strong {
@ -322,7 +322,7 @@ body > nav a[aria-current="page"] {
  body > nav {
    flex-direction: column;
    align-items: flex-start;
-    gap: 0.5rem;
+    gap: var(--space-2);
  }
  
  body > nav ul:last-child {
@ -452,11 +452,11 @@ article {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
-  margin: 0.75rem 0;
+  margin: var(--space-3) 0;
 }

 article > header {
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 var(--space-2) 0;
  padding: 0 0 0.4rem 0;
  border-bottom: 1px solid var(--border-subtle);
  border-top: none;
@ -495,12 +495,12 @@ article header h3 {
 /* Wide container: spacious layout */
@container article (min-width: 600px) {
  article {
-    padding: 1.5rem 2rem;
+    padding: var(--space-5) var(--space-6);
  }
  
  article > header {
-    margin-bottom: 0.75rem;
-    padding-bottom: 0.5rem;
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
  }
 }

@ -512,7 +512,7 @@ dt {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
-  margin-top: 0.75rem;
+  margin-top: var(--space-3);
 }

 dd {
@ -530,15 +530,15 @@ article dt:first-of-type {
 /* ── Sections ──────────────────────────────────────────────────────────*/

 section + section {
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--border-subtle);
+  padding-top: var(--space-5);
+  border-top: var(--border-width) solid var(--border-subtle);
 }

 hgroup p {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-3);
-  margin-top: 0.25rem;
+  margin-top: var(--space-1);
 }

 /* Section intro: hgroup as centered subtitle block */
@ -562,9 +562,9 @@ article[data-role="card"] header h3 {
 body > footer,
 footer:last-child {
  margin-top: 3rem;
-  padding-top: 1.5rem;
-  padding-bottom: 2rem;
-  border-top: 1px solid var(--border);
+  padding-top: var(--space-5);
+  padding-bottom: var(--space-6);
+  border-top: var(--border-width) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
--- a/assets/css/layers/04-data-attrs.css
+++ b/assets/css/layers/04-data-attrs.css
@ -16,17 +16,17 @@
  align-items: center;
  justify-content: space-between;
  background: var(--surface-1);
-  border: 1px solid var(--border);
+  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
-  padding: 0.75rem 1rem;
+  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
-  margin: 1.5rem 0;
+  margin: var(--space-5) 0;
 }

 [data-role="command-box"] .prefix {
  color: var(--text-3);
-  margin-right: 0.5rem;
+  margin-right: var(--space-2);
  user-select: none;
 }

@ -39,7 +39,7 @@
  font-family: var(--font-mono);
  font-size: 0.9em;
  text-decoration: none;
-  border-bottom: 1px dotted var(--border);
+  border-bottom: var(--border-width) dotted var(--border);
  transition: border-color var(--ease);
 }

@ -186,7 +186,7 @@
   ══════════════════════════════════════════════════════════════════════════ */

 [data-role="timeline"] {
-  border-left: 1px solid var(--border);
+  border-left: var(--border-width) solid var(--border);
  padding-left: 1.5em;
  margin: 1.5em 0;
 }
@ -207,7 +207,7 @@
 [data-role="status-card"] {
  padding: 1.25em;
  background: var(--surface-card);
-  border: 1px solid var(--border);
+  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  margin: 1em 0;
 }
@ -234,7 +234,7 @@
 [data-tooltip] {
  position: relative;
  cursor: help;
-  border-bottom: 1px dotted var(--text-dim);
+  border-bottom: var(--border-width) dotted var(--text-dim);
 }

 [data-tooltip]::after {
@ -246,7 +246,7 @@
  padding: 0.4rem 0.75rem;
  background: var(--surface-1);
  color: var(--text);
-  border: 1px solid var(--border);
+  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
@ -326,9 +326,9 @@
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
-  margin-bottom: 2rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid var(--border);
+  margin-bottom: var(--space-6);
+  padding-bottom: var(--space-3);
+  border-bottom: var(--border-width) solid var(--border);
 }

 [data-subnav] a {
@ -361,7 +361,7 @@
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface-1);
-  border: 1px solid var(--border);
+  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-5) 0;
@ -469,7 +469,7 @@
 [data-redacted="reveal"]:focus {
  background: var(--surface-card);
  color: var(--text);
-  outline: 1px solid var(--border);
+  outline: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  user-select: text;
 }
--- a/assets/css/layers/05-utilities.css
+++ b/assets/css/layers/05-utilities.css
@ -52,7 +52,7 @@
 [data-layout="grid-2"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: var(--space-4);
 }

@media (--md-n-below) {
@ -65,7 +65,7 @@
 [data-layout="card-grid"] {
  display: flex;
  flex-wrap: wrap;
-  gap: 1.5rem;
+  gap: var(--space-5);
 }

 [data-layout="card-grid"] > * {
@ -89,9 +89,9 @@
 [data-layout="stats"] > * {
  flex: 1 1 0;
  min-width: 5rem;
-  padding: 0.75rem 0;
+  padding: var(--space-3) 0;
  text-align: center;
-  border-right: 1px solid var(--border-subtle);
+  border-right: var(--border-width) solid var(--border-subtle);
 }

 [data-layout="stats"] > *:last-child {
@ -120,7 +120,7 @@
  [data-layout="stats"] > * {
    flex-basis: 33%;
    border-right: none;
-    border-bottom: 1px solid var(--border-subtle);
+    border-bottom: var(--border-width) solid var(--border-subtle);
  }
 }

@ -212,7 +212,7 @@ dl[data-layout="inline"] dd {
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
-  border: 2px solid var(--text-3);
+  border: var(--outline-width) solid var(--text-3);
  border-top-color: transparent;
  border-radius: 50%;
 }
--- a/assets/css/layers/06-charts.css
+++ b/assets/css/layers/06-charts.css
@ -44,12 +44,12 @@

  /* Layout */
  --chart-height:   200px;   /* column chart area height */
-  --chart-bar-size: 2rem;    /* column bar width / bar chart bar height */
+  --chart-bar-size: var(--space-6);    /* column bar width / bar chart bar height */
  --chart-gap:      6px;     /* spacing between data points */

  /* Axis / labels */
  --chart-axis:          var(--border);
-  --chart-axis-width:    2px;
+  --chart-axis-width:    var(--outline-width);
  --chart-label:         var(--text-3);
  --chart-label-size:    var(--text-xs);

@ -406,7 +406,7 @@
    color-mix(in oklch, var(--chart-color-1), transparent 80%) 0%,
    transparent 60%
  );
-  border-block-start: 2px solid var(--chart-color-1);
+  border-block-start: var(--outline-width) solid var(--chart-color-1);
  position: relative;
 }

@ -422,7 +422,7 @@
  block-size: 8px;
  border-radius: 50%;
  background: var(--chart-color-1);
-  border: 2px solid var(--surface);
+  border: var(--outline-width) solid var(--surface);
  z-index: 1;
 }

--- a/assets/css/layers/08-layout.css
+++ b/assets/css/layers/08-layout.css
@ -34,7 +34,7 @@ body {
 [data-layout="hero"] {
  text-align: center;
  padding: var(--space-8) var(--space-5);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-width) solid var(--border);
 }

 /* ── Install snippet ────────────────────────────────────────────────── */
@ -42,7 +42,7 @@ body {
 [data-layout="install"] {
  display: inline-block;
  background: var(--surface-1);
-  border: 1px solid var(--border);
+  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
@ -456,7 +456,7 @@ main[data-layout="prose"],
  height: 0.65rem;
  border-radius: 50%;
  background: var(--accent);
-  border: 2px solid var(--surface);
+  border: var(--outline-width) solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
 }

@ -500,7 +500,7 @@ main[data-layout="prose"],
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
-  font-size: 1rem;
+  font-size: var(--text-base);
  line-height: var(--leading);
 }

@ -515,7 +515,7 @@ main[data-layout="prose"],
 [data-layout="report"] > header {
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
-  border-bottom: 2px solid var(--border);
+  border-bottom: var(--outline-width) solid var(--border);
  margin-bottom: var(--space-6);
 }

@ -530,7 +530,7 @@ main[data-layout="prose"],
 }

 [data-layout="report"] > footer {
-  border-top: 1px solid var(--border);
+  border-top: var(--border-width) solid var(--border);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -11,7 +11,7 @@

 /* 2. Framework layers */
@import "./layers/00-reset.css";
-@import "./layers/01-tokens.css";
+@import "./layers/01-asw.css";
@import "./layers/02-semantic.css";
@import "./layers/03-components.css";
@import "./layers/04-data-attrs.css";
@ -21,8 +21,3 @@
@import "./layers/08-layout.css";
@import "./layers/08a-paper.css";
@import "./layers/09-landing.css";
-
-/* 3. ASW theme overrides — edit here to retheme */
-:root {
-  /* Override Open Props primitives or ASW semantics here */
-}
--- a/deploy.sh
+++ b/deploy.sh
@ -4,6 +4,6 @@ set -euo pipefail
 cd ~/projects/asw
 git pull origin main --ff-only
 npm ci --prefer-offline 2>/dev/null
-npx postcss assets/css/asw.css -o assets/css/asw-built.css
+npx postcss assets/css/main.css -o assets/css/asw-built.css
 hugo
 echo "[$(date -u +%Y-%m-%dT%H:%M:%SZ)] Deploy complete" >> /tmp/asw-deploy.log