@acta-dev/web 1.0.0

package/src/styles/themes/dark.css

@@ -0,0 +1,61 @@
+/* Direction A · Press — dark theme (night-mode treatment, accent unchanged) */
+[data-theme="dark"] {
+  --color-bg: #15130f;
+  --color-panel: #221e17;
+  --color-panel-muted: #1b1813;
+  --color-text: #ede6d2;
+  --color-text-muted: #8a8273;
+  --color-border: #2c2820;
+  --color-border-soft: #23201a;
+  --color-accent: #4cae7d;
+  --color-accent-ink: #15130f;
+  --color-danger: #ff8a80;
+  --color-warning: #e0b15d;
+
+  --kind-adr-color: var(--color-text);
+  --kind-spec-color: var(--color-text-muted);
+
+  --status-active-fg: #67c089;
+  --status-accepted-fg: #8ab7ff;
+  --status-draft-fg: #e0b15d;
+  --status-implemented-fg: #7ac0e0;
+  --status-proposed-fg: #baa8ff;
+  --status-paused-fg: #e0b15d;
+  --status-rejected-fg: #ff8a80;
+  --status-deprecated-fg: #8a8273;
+  --status-superseded-fg: #8a8273;
+  --status-obsolete-fg: #8a8273;
+
+  --status-active-bg: color-mix(in srgb, var(--status-active-fg) 18%, var(--color-panel));
+  --status-active-border: color-mix(in srgb, var(--status-active-fg) 45%, var(--color-panel));
+  --status-accepted-bg: color-mix(in srgb, var(--status-accepted-fg) 18%, var(--color-panel));
+  --status-accepted-border: color-mix(in srgb, var(--status-accepted-fg) 45%, var(--color-panel));
+  --status-draft-bg: color-mix(in srgb, var(--status-draft-fg) 18%, var(--color-panel));
+  --status-draft-border: color-mix(in srgb, var(--status-draft-fg) 45%, var(--color-panel));
+  --status-implemented-bg: color-mix(in srgb, var(--status-implemented-fg) 18%, var(--color-panel));
+  --status-implemented-border: color-mix(
+    in srgb,
+    var(--status-implemented-fg) 45%,
+    var(--color-panel)
+  );
+  --status-proposed-bg: color-mix(in srgb, var(--status-proposed-fg) 18%, var(--color-panel));
+  --status-proposed-border: color-mix(in srgb, var(--status-proposed-fg) 45%, var(--color-panel));
+  --status-paused-bg: color-mix(in srgb, var(--status-paused-fg) 18%, var(--color-panel));
+  --status-paused-border: color-mix(in srgb, var(--status-paused-fg) 45%, var(--color-panel));
+  --status-rejected-bg: color-mix(in srgb, var(--status-rejected-fg) 18%, var(--color-panel));
+  --status-rejected-border: color-mix(in srgb, var(--status-rejected-fg) 45%, var(--color-panel));
+  --status-deprecated-bg: color-mix(in srgb, var(--status-deprecated-fg) 18%, var(--color-panel));
+  --status-deprecated-border: color-mix(
+    in srgb,
+    var(--status-deprecated-fg) 45%,
+    var(--color-panel)
+  );
+  --status-superseded-bg: color-mix(in srgb, var(--status-superseded-fg) 18%, var(--color-panel));
+  --status-superseded-border: color-mix(
+    in srgb,
+    var(--status-superseded-fg) 45%,
+    var(--color-panel)
+  );
+  --status-obsolete-bg: color-mix(in srgb, var(--status-obsolete-fg) 18%, var(--color-panel));
+  --status-obsolete-border: color-mix(in srgb, var(--status-obsolete-fg) 45%, var(--color-panel));
+}

package/src/styles/themes/light.css

@@ -0,0 +1,63 @@
+/* Direction A · Press — light theme (neutral warmth, emerald accent) */
+[data-theme="light"] {
+  --color-bg: #f1efe6;
+  --color-panel: #fcfaf1;
+  --color-panel-muted: #f8f5ec;
+  --color-text: #1a1612;
+  --color-text-muted: #6e665b;
+  --color-border: #d8d2be;
+  --color-border-soft: #e6dfcb;
+  --color-accent: #1f8a5b;
+  --color-accent-ink: #ffffff;
+  --color-danger: #b42318;
+  --color-warning: #8a5a00;
+
+  --kind-adr-color: var(--color-text);
+  --kind-spec-color: var(--color-text-muted);
+
+  /* Press status tones — colored ink + dot, no fill on the list */
+  --status-active-fg: #2f6a3e;
+  --status-accepted-fg: #355e8a;
+  --status-draft-fg: #8a5a00;
+  --status-implemented-fg: #3a6b86;
+  --status-proposed-fg: #6b5baa;
+  --status-paused-fg: #8a5a00;
+  --status-rejected-fg: #b42318;
+  --status-deprecated-fg: #6e665b;
+  --status-superseded-fg: #6e665b;
+  --status-obsolete-fg: #6e665b;
+
+  /* Soft fills + borders kept for the graph view (uses the same tones) */
+  --status-active-bg: color-mix(in srgb, var(--status-active-fg) 12%, var(--color-panel));
+  --status-active-border: color-mix(in srgb, var(--status-active-fg) 36%, var(--color-panel));
+  --status-accepted-bg: color-mix(in srgb, var(--status-accepted-fg) 12%, var(--color-panel));
+  --status-accepted-border: color-mix(in srgb, var(--status-accepted-fg) 36%, var(--color-panel));
+  --status-draft-bg: color-mix(in srgb, var(--status-draft-fg) 12%, var(--color-panel));
+  --status-draft-border: color-mix(in srgb, var(--status-draft-fg) 36%, var(--color-panel));
+  --status-implemented-bg: color-mix(in srgb, var(--status-implemented-fg) 12%, var(--color-panel));
+  --status-implemented-border: color-mix(
+    in srgb,
+    var(--status-implemented-fg) 36%,
+    var(--color-panel)
+  );
+  --status-proposed-bg: color-mix(in srgb, var(--status-proposed-fg) 12%, var(--color-panel));
+  --status-proposed-border: color-mix(in srgb, var(--status-proposed-fg) 36%, var(--color-panel));
+  --status-paused-bg: color-mix(in srgb, var(--status-paused-fg) 12%, var(--color-panel));
+  --status-paused-border: color-mix(in srgb, var(--status-paused-fg) 36%, var(--color-panel));
+  --status-rejected-bg: color-mix(in srgb, var(--status-rejected-fg) 12%, var(--color-panel));
+  --status-rejected-border: color-mix(in srgb, var(--status-rejected-fg) 36%, var(--color-panel));
+  --status-deprecated-bg: color-mix(in srgb, var(--status-deprecated-fg) 12%, var(--color-panel));
+  --status-deprecated-border: color-mix(
+    in srgb,
+    var(--status-deprecated-fg) 36%,
+    var(--color-panel)
+  );
+  --status-superseded-bg: color-mix(in srgb, var(--status-superseded-fg) 12%, var(--color-panel));
+  --status-superseded-border: color-mix(
+    in srgb,
+    var(--status-superseded-fg) 36%,
+    var(--color-panel)
+  );
+  --status-obsolete-bg: color-mix(in srgb, var(--status-obsolete-fg) 12%, var(--color-panel));
+  --status-obsolete-border: color-mix(in srgb, var(--status-obsolete-fg) 36%, var(--color-panel));
+}

package/src/styles/tokens/primitives.css

@@ -0,0 +1,32 @@
+:root {
+  --space-1: 4px;
+  --space-1-5: 6px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-3-5: 14px;
+  --space-4: 16px;
+  --space-4-5: 18px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-9: 36px;
+  --space-10: 40px;
+  --space-11: 48px;
+  --space-12: 56px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-pill: 999px;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.1);
+
+  /* motion — strong custom curves; built-in easings lack punch */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --duration-press: 140ms;
+  --duration-hover: 160ms;
+  --duration-popover: 180ms;
+}

package/src/styles/tokens/semantic.css

@@ -0,0 +1,34 @@
+/* Semantic token contract. Actual values set per-theme in themes/light.css and themes/dark.css. */
+:root {
+  /* surfaces */
+  --color-bg: initial;
+  --color-panel: initial;
+  --color-panel-muted: initial;
+
+  /* text */
+  --color-text: initial;
+  --color-text-muted: initial;
+
+  /* lines */
+  --color-border: initial;
+  --color-border-soft: initial;
+
+  /* feedback */
+  --color-accent: initial;
+  --color-accent-ink: initial;
+  --color-danger: initial;
+  --color-warning: initial;
+
+  /* legacy aliases (kept for any consumers not yet migrated) */
+  --bg: var(--color-bg);
+  --panel: var(--color-panel);
+  --panel-muted: var(--color-panel-muted);
+  --text: var(--color-text);
+  --muted: var(--color-text-muted);
+  --border: var(--color-border);
+  --border-soft: var(--color-border-soft);
+  --accent: var(--color-accent);
+  --danger: var(--color-danger);
+  --warning: var(--color-warning);
+  --radius: var(--radius-lg);
+}

package/src/styles/tokens/typography.css

@@ -0,0 +1,28 @@
+:root {
+  /* Press direction: editorial serif body + grotesque sans for UI chrome */
+  --font-serif: "Newsreader", "Source Serif 4", Georgia, serif;
+  --font-sans:
+    "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 13px;
+  --text-md: 14px;
+  --text-lg: 16px;
+  --text-xl: 20px;
+  --text-2xl: 30px;
+  --text-3xl: 56px;
+  --text-display: 68px;
+
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.55;
+  --leading-relaxed: 1.7;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@lib/*": ["src/lib/*"]
+    }
+  },
+  "include": [".astro/types.d.ts", "src/**/*", "astro.config.mjs"],
+  "exclude": ["dist"]
+}