@filipgutica/ui 1.3.0 → 1.4.0

package/README.md

@@ -87,6 +87,48 @@ Themes supply colors; the library keeps typography, spacing, and component
 structure consistent. Open VSX search and imports are available through
 `@filipgutica/ui/open-vsx`, which must run on a Node server.
 
+The default theme is unchanged. To opt in to Graphite Indigo, import it after
+`theme.css`:
+
+```css
+@import "@filipgutica/ui/theme.css";
+@import "@filipgutica/ui/themes/graphite-indigo.css";
+```
+
+## Project sites
+
+The `site` entry gives the project sites one header, one appearance choice, and
+shared page styles. Import `@filipgutica/ui/site.css` and the Graphite Indigo
+theme above, which supplies the type and spacing roles `site.css` reads. Keep
+document-wide link styles in `@layer base` so the header owns its navigation
+appearance.
+
+```vue
+<script setup lang="ts">
+import { UiSiteHeader } from '@filipgutica/ui/site'
+</script>
+
+<template>
+  <UiSiteHeader
+    project="wtree"
+    :links="[{ label: 'User guide', href: '#guide' }]"
+  />
+</template>
+```
+
+`project` is `wtree`, `annoterm`, `devps`, `workbench`, or `ui`. The project
+menu is a native disclosure that works without JavaScript; Escape closes it and
+returns focus to its button. Without a default slot the header renders a
+System, Light, and Dark picker. A page with its own appearance control passes it
+in the default slot and uses `useSiteAppearance({ applyToRoot: false })` when it
+owns the root element.
+
+`useSiteAppearance()` returns `choice`, the resolved `appearance`, and
+`chooseAppearance(value)`. The choice is stored under `tool-site-theme`, follows
+the operating system and other tabs, and is safe during server rendering and
+when storage is blocked. To avoid a flash of the wrong appearance, inline
+`siteThemeBootScript` in the document head.
+
 ## Development
 
 ```sh
@@ -94,3 +136,8 @@ pnpm install
 pnpm docs:dev
 pnpm verify
 ```
+
+Graphite Indigo values live in `themes/graphite-indigo.json`. After editing it,
+run `pnpm themes:build` to regenerate the opt-in theme and the standalone
+`themes/graphite-indigo.tokens.css`; `pnpm themes:check` fails when either is
+stale.

package/dist/site/UiSiteHeader.vue.d.ts

@@ -0,0 +1,24 @@
+import type { SiteProjectId } from './projects.js';
+export interface UiSiteLink {
+    label: string;
+    href: string;
+}
+export interface UiSiteHeaderProps {
+    /** The site this header belongs to. It is marked as current in the project menu. */
+    project: SiteProjectId;
+    /** Page links shown beside the appearance control, such as a user guide or releases. */
+    links?: readonly UiSiteLink[];
+}
+type __VLS_Slots = {
+    /** Replaces the System, Light, and Dark picker with a page-specific appearance control. */
+    default?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiSiteHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSiteHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/site/appearance.d.ts

@@ -0,0 +1,35 @@
+import type { ComputedRef } from 'vue';
+export type SiteAppearanceChoice = 'system' | 'light' | 'dark';
+export type SiteAppearance = 'light' | 'dark';
+/** The choice is shared by every site in the family, so it must not change. */
+export declare const SITE_APPEARANCE_KEY = "tool-site-theme";
+/**
+ * Inline this in the document head, before the stylesheet paints, to avoid a flash
+ * of the wrong appearance. It applies the stored choice exactly as
+ * `applySiteAppearance` does and never throws.
+ */
+export declare const siteThemeBootScript = "(function () {\n  var root = document.documentElement, choice;\n  try { choice = localStorage.getItem('tool-site-theme'); } catch (error) {}\n  var dark = choice === 'dark';\n  if (choice !== 'light' && choice !== 'dark') {\n    try { dark = matchMedia('(prefers-color-scheme: dark)').matches; } catch (error) {}\n  }\n  root.classList.toggle('dark', dark);\n  if (choice === 'light' || choice === 'dark') root.dataset.theme = choice;\n})();";
+/** System removes the explicit override. Light and dark set it. */
+export declare const applySiteAppearance: ({ root, choice, appearance }: {
+    root: HTMLElement;
+    choice: SiteAppearanceChoice;
+    appearance: SiteAppearance;
+}) => void;
+/**
+ * The shared System, Light, or Dark choice with the appearance it resolves to.
+ * Every call shares the stored choice, and other tabs and the operating system
+ * update it. Nothing reads storage or the browser until the component mounts, so
+ * server rendering and hydration see `system`. Storage failures leave the choice
+ * working for the current visit.
+ *
+ * By default the composable applies the appearance to `<html>`. Pass
+ * `applyToRoot: false` when the page owns the root, for example while an imported
+ * theme is active, and call `applySiteAppearance` yourself.
+ */
+export declare const useSiteAppearance: ({ applyToRoot }?: {
+    applyToRoot?: boolean;
+}) => {
+    choice: ComputedRef<SiteAppearanceChoice>;
+    appearance: ComputedRef<SiteAppearance>;
+    chooseAppearance: (value: SiteAppearanceChoice) => void;
+};

package/dist/site/index.d.ts

@@ -0,0 +1,6 @@
+export { default as UiSiteHeader } from './UiSiteHeader.vue';
+export type { UiSiteHeaderProps, UiSiteLink } from './UiSiteHeader.vue';
+export { SITE_PROJECTS } from './projects.js';
+export type { SiteProject, SiteProjectId } from './projects.js';
+export { applySiteAppearance, SITE_APPEARANCE_KEY, siteThemeBootScript, useSiteAppearance, } from './appearance.js';
+export type { SiteAppearance, SiteAppearanceChoice } from './appearance.js';

package/dist/site/projects.d.ts

@@ -0,0 +1,36 @@
+declare const projects: readonly [{
+    readonly id: "annoterm";
+    readonly label: "annoterm";
+    readonly href: "https://filipgutica.github.io/annoterm/";
+    readonly repository: "https://github.com/filipgutica/annoterm";
+}, {
+    readonly id: "wtree";
+    readonly label: "wtree";
+    readonly href: "https://filipgutica.github.io/wtree/";
+    readonly repository: "https://github.com/filipgutica/wtree";
+}, {
+    readonly id: "devps";
+    readonly label: "devps";
+    readonly href: "https://filipgutica.github.io/devps/";
+    readonly repository: "https://github.com/filipgutica/devps";
+}, {
+    readonly id: "workbench";
+    readonly label: "Workbench";
+    readonly href: "https://filipgutica.github.io/t3code/";
+    readonly repository: "https://github.com/filipgutica/t3code";
+}, {
+    readonly id: "ui";
+    readonly label: "UI";
+    readonly href: "https://filipgutica.github.io/ui/";
+    readonly repository: "https://github.com/filipgutica/ui";
+}];
+export type SiteProjectId = (typeof projects)[number]['id'];
+export interface SiteProject {
+    readonly id: SiteProjectId;
+    readonly label: string;
+    readonly href: string;
+    readonly repository: string;
+}
+/** Every site in the family, in the order the project menu lists them. */
+export declare const SITE_PROJECTS: readonly SiteProject[];
+export {};

package/dist/site.js

@@ -0,0 +1,177 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, unref as p, useSlots as m, watch as h } from "vue";
+import { tryOnMounted as g, usePreferredDark as _, useStorage as v } from "@vueuse/core";
+//#region src/site/appearance.ts
+var y = "tool-site-theme", b = (e) => e === "system" || e === "light" || e === "dark", x = `(function () {
+  var root = document.documentElement, choice;
+  try { choice = localStorage.getItem('${y}'); } catch (error) {}
+  var dark = choice === 'dark';
+  if (choice !== 'light' && choice !== 'dark') {
+    try { dark = matchMedia('(prefers-color-scheme: dark)').matches; } catch (error) {}
+  }
+  root.classList.toggle('dark', dark);
+  if (choice === 'light' || choice === 'dark') root.dataset.theme = choice;
+})();`, S = ({ root: e, choice: t, appearance: n }) => {
+	e.classList.toggle("dark", n === "dark"), t === "system" ? delete e.dataset.theme : e.dataset.theme = t;
+}, C = ({ applyToRoot: e = !0 } = {}) => {
+	let n = v(y, "system", void 0, {
+		initOnMounted: !0,
+		writeDefaults: !1,
+		onError: () => {},
+		serializer: {
+			read: (e) => b(e) ? e : "system",
+			write: (e) => e
+		}
+	}), r = _(), i = t(() => n.value), a = t(() => n.value === "system" ? r.value ? "dark" : "light" : n.value);
+	return e && g(() => {
+		h([i, a], () => S({
+			root: document.documentElement,
+			choice: i.value,
+			appearance: a.value
+		}), { immediate: !0 });
+	}), {
+		choice: i,
+		appearance: a,
+		chooseAppearance: (e) => {
+			b(e) && (n.value = e);
+		}
+	};
+}, w = [
+	{
+		id: "annoterm",
+		label: "annoterm",
+		href: "https://filipgutica.github.io/annoterm/",
+		repository: "https://github.com/filipgutica/annoterm"
+	},
+	{
+		id: "wtree",
+		label: "wtree",
+		href: "https://filipgutica.github.io/wtree/",
+		repository: "https://github.com/filipgutica/wtree"
+	},
+	{
+		id: "devps",
+		label: "devps",
+		href: "https://filipgutica.github.io/devps/",
+		repository: "https://github.com/filipgutica/devps"
+	},
+	{
+		id: "workbench",
+		label: "Workbench",
+		href: "https://filipgutica.github.io/t3code/",
+		repository: "https://github.com/filipgutica/t3code"
+	},
+	{
+		id: "ui",
+		label: "UI",
+		href: "https://filipgutica.github.io/ui/",
+		repository: "https://github.com/filipgutica/ui"
+	}
+], T = { class: "fg-site-header" }, E = { class: "fg-site-header__inner" }, D = ["aria-label"], O = {
+	class: "fg-site-projects__menu fg-site-nav",
+	"aria-label": "Projects"
+}, k = ["href", "aria-current"], A = { class: "fg-site-header__end" }, j = {
+	key: 0,
+	class: "fg-site-header__links",
+	"aria-label": "Site links"
+}, M = ["href"], N = {
+	key: 0,
+	class: "fg-site-appearance",
+	role: "group",
+	"aria-label": "Color theme"
+}, P = [
+	"aria-label",
+	"title",
+	"aria-pressed",
+	"onClick"
+], F = {
+	viewBox: "0 0 24 24",
+	width: "18",
+	height: "18",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	"aria-hidden": "true"
+}, I = {
+	key: 2,
+	d: "M20.5 13.5A9 9 0 0 1 10.5 3a9 9 0 1 0 10 10.5Z"
+}, L = /* @__PURE__ */ a({
+	__name: "UiSiteHeader",
+	props: {
+		project: {},
+		links: { default: () => [] }
+	},
+	setup(a) {
+		let h = [
+			{
+				value: "system",
+				label: "System"
+			},
+			{
+				value: "light",
+				label: "Light"
+			},
+			{
+				value: "dark",
+				label: "Dark"
+			}
+		], g = t(() => w.find(({ id: e }) => e === a.project)?.label ?? a.project), _ = m().default ? void 0 : C(), v = l(!1), y = l(), b = l(), x = () => {
+			y.value && (y.value.open = !1);
+		}, S = (e) => {
+			e.key !== "Escape" || !y.value?.open || (x(), b.value?.focus());
+		}, L = (e) => {
+			e.relatedTarget instanceof Node && !y.value?.contains(e.relatedTarget) && x();
+		}, R = (e) => {
+			e.target instanceof Node && !y.value?.contains(e.target) && x();
+		};
+		return s(() => {
+			v.value = !0, document.addEventListener("pointerdown", R);
+		}), o(() => document.removeEventListener("pointerdown", R)), (t, o) => (c(), r("header", T, [i("div", E, [i("details", {
+			ref_key: "menu",
+			ref: y,
+			class: "fg-site-projects",
+			onKeydown: S,
+			onFocusout: L
+		}, [i("summary", {
+			ref_key: "trigger",
+			ref: b,
+			class: "fg-site-projects__trigger",
+			"aria-label": `Project: ${g.value}`
+		}, [i("span", null, f(g.value), 1), o[0] ||= i("svg", {
+			class: "fg-site-projects__chevron",
+			viewBox: "0 0 16 16",
+			width: "16",
+			height: "16",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": "1.5",
+			"aria-hidden": "true"
+		}, [i("path", { d: "m4 6 4 4 4-4" })], -1)], 8, D), i("nav", O, [(c(!0), r(e, null, u(p(w), (e) => (c(), r("a", {
+			key: e.id,
+			href: e.href,
+			"aria-current": e.id === a.project ? "page" : void 0
+		}, f(e.label), 9, k))), 128))])], 544), i("div", A, [a.links.length > 0 ? (c(), r("nav", j, [(c(!0), r(e, null, u(a.links, (e) => (c(), r("a", {
+			key: e.href,
+			href: e.href
+		}, f(e.label), 9, M))), 128))])) : n("", !0), d(t.$slots, "default", {}, () => [v.value && p(_) ? (c(), r("div", N, [(c(), r(e, null, u(h, (t) => i("button", {
+			key: t.value,
+			type: "button",
+			class: "fg-site-appearance__choice",
+			"aria-label": `${t.label} theme`,
+			title: `${t.label} theme`,
+			"aria-pressed": p(_).choice.value === t.value,
+			onClick: (e) => p(_).chooseAppearance(t.value)
+		}, [(c(), r("svg", F, [t.value === "system" ? (c(), r(e, { key: 0 }, [o[1] ||= i("rect", {
+			x: "3",
+			y: "4",
+			width: "18",
+			height: "13",
+			rx: "2"
+		}, null, -1), o[2] ||= i("path", { d: "M8 21h8m-4-4v4" }, null, -1)], 64)) : t.value === "light" ? (c(), r(e, { key: 1 }, [o[3] ||= i("circle", {
+			cx: "12",
+			cy: "12",
+			r: "4"
+		}, null, -1), o[4] ||= i("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (c(), r("path", I))]))], 8, P)), 64))])) : n("", !0)])])])]));
+	}
+});
+//#endregion
+export { y as SITE_APPEARANCE_KEY, w as SITE_PROJECTS, L as UiSiteHeader, S as applySiteAppearance, x as siteThemeBootScript, C as useSiteAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [
@@ -11,6 +11,8 @@
     "src/theme.css",
     "src/components.css",
     "src/components/*.css",
+    "src/site.css",
+    "src/themes/*.css",
     "README.md",
     "LICENSE"
   ],
@@ -23,12 +25,18 @@
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme.js"
     },
+    "./site": {
+      "types": "./dist/site/index.d.ts",
+      "import": "./dist/site.js"
+    },
     "./open-vsx": {
       "types": "./dist/open-vsx/index.d.ts",
       "import": "./dist/open-vsx.js"
     },
     "./theme.css": "./src/theme.css",
-    "./components.css": "./src/components.css"
+    "./components.css": "./src/components.css",
+    "./site.css": "./src/site.css",
+    "./themes/graphite-indigo.css": "./src/themes/graphite-indigo.css"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
@@ -44,8 +52,10 @@
     "release:dry-run": "semantic-release --dry-run --no-ci",
     "test": "vitest run",
     "test:e2e": "playwright test",
+    "themes:build": "node scripts/graphite-indigo.mjs",
+    "themes:check": "node scripts/graphite-indigo.mjs --check",
     "typecheck": "vue-tsc -p tsconfig.json --noEmit",
-    "verify": "pnpm lint && pnpm typecheck && pnpm docs:typecheck && pnpm test && pnpm test:e2e && pnpm build && pnpm docs:build && pnpm pack --dry-run && publint"
+    "verify": "pnpm lint && pnpm themes:check && pnpm typecheck && pnpm docs:typecheck && pnpm test && pnpm test:e2e && pnpm build && pnpm docs:build && pnpm pack --dry-run && publint"
   },
   "engines": {
     "node": ">=22.12"

package/src/components.css

@@ -225,14 +225,14 @@
   }
 
   .fg-button[data-variant="danger"] {
-    color: var(--color-error);
+    color: var(--color-status-text, var(--color-error));
     background: var(--color-error-surface);
     box-shadow: none;
   }
 
   .fg-button[data-variant="danger"]:hover:not(:disabled) {
     border-color: var(--color-error);
-    color: var(--color-error);
+    color: var(--color-status-text, var(--color-error));
     background: var(--color-error-surface);
     box-shadow: none;
   }
@@ -522,11 +522,11 @@
     line-height: 1.25;
   }
 
-  .fg-badge[data-tone="info"] { color: var(--color-info); background: var(--color-info-surface); }
-  .fg-badge[data-tone="success"] { color: var(--color-success); background: var(--color-success-surface); }
-  .fg-badge[data-tone="warning"] { color: var(--color-warning); background: var(--color-warning-surface); }
+  .fg-badge[data-tone="info"] { color: var(--color-status-text, var(--color-info)); background: var(--color-info-surface); }
+  .fg-badge[data-tone="success"] { color: var(--color-status-text, var(--color-success)); background: var(--color-success-surface); }
+  .fg-badge[data-tone="warning"] { color: var(--color-status-text, var(--color-warning)); background: var(--color-warning-surface); }
   .fg-badge[data-tone="danger"],
-  .fg-badge[data-tone="error"] { color: var(--color-error); background: var(--color-error-surface); }
+  .fg-badge[data-tone="error"] { color: var(--color-status-text, var(--color-error)); background: var(--color-error-surface); }
 
   .fg-alert {
     display: flex;
@@ -545,7 +545,7 @@
   .fg-alert[data-tone="danger"],
   .fg-alert[data-tone="error"] {
     border-color: var(--color-error);
-    color: var(--color-error);
+    color: var(--color-status-text, var(--color-error));
     background: var(--color-error-surface);
   }
 

package/src/site.css

@@ -0,0 +1,169 @@
+/* Shared chrome and page helpers for the project sites. Use with
+ * @filipgutica/ui/themes/graphite-indigo.css, which supplies the type, space, and
+ * page-measure roles this file reads. Nothing here targets site-specific markup. */
+@layer components {
+  /* A centered frame. The header uses the same edges as the page below it.
+   * Set --site-frame on the header or a frame to change its width. */
+  .fg-site-frame,
+  .fg-site-header__inner {
+    width: min(100%, var(--site-frame, var(--page-max)));
+    margin-inline: auto;
+    padding-inline: var(--site-gutter, var(--space-4));
+  }
+  .fg-site-frame--wide { --site-frame: var(--page-wide); }
+
+  .fg-site-header {
+    position: relative;
+    z-index: 30;
+    border-bottom: 1px solid var(--color-border-subtle);
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--text-md);
+    line-height: var(--leading);
+  }
+  .fg-site-header__inner {
+    display: flex;
+    min-height: var(--space-16);
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-4);
+    padding-block: var(--space-2);
+  }
+  .fg-site-header__end {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-8);
+    margin-inline-start: auto;
+  }
+  .fg-site-header__links { display: flex; align-items: center; gap: var(--space-6); }
+  .fg-site-header__links a {
+    display: inline-flex;
+    min-height: var(--control-lg);
+    align-items: center;
+    color: var(--color-muted);
+    font-size: var(--text-sm);
+    text-decoration: none;
+  }
+  .fg-site-header__links a:hover { color: var(--color-text); }
+
+  .fg-site-projects { position: relative; }
+  .fg-site-projects__trigger {
+    display: inline-flex;
+    min-height: var(--control-lg);
+    align-items: center;
+    gap: var(--space-1);
+    padding-inline: var(--space-3);
+    border-radius: var(--radius-control);
+    color: var(--color-text);
+    font-weight: var(--weight-semibold);
+    list-style: none;
+    cursor: pointer;
+    user-select: none;
+  }
+  .fg-site-projects__trigger::-webkit-details-marker { display: none; }
+  .fg-site-projects__trigger:hover,
+  .fg-site-projects[open] > .fg-site-projects__trigger { background: var(--color-row-hover); }
+  .fg-site-projects__chevron { transition: transform var(--duration-fast) ease; }
+  .fg-site-projects[open] .fg-site-projects__chevron { transform: rotate(180deg); }
+  .fg-site-projects__menu {
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 0;
+    min-width: 14rem;
+    margin-top: var(--space-1);
+    padding: var(--space-1);
+    border-radius: var(--radius-panel);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-dialog);
+  }
+
+  /* Route rows. Hover is neutral, and the current page keeps its selected fill on
+   * hover. Only aria-current="page" is styled: an in-page section marker
+   * (aria-current="location") must look different from the current page. */
+  .fg-site-nav a {
+    display: flex;
+    min-height: var(--row);
+    align-items: center;
+    padding-inline: var(--space-3);
+    border-radius: var(--radius-control);
+    color: var(--color-muted);
+    font-size: var(--text-md);
+    text-decoration: none;
+    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
+  }
+  .fg-site-nav a:hover { background: var(--color-row-hover); color: var(--color-text); }
+  .fg-site-nav a[aria-current="page"] {
+    background: var(--color-row-selected);
+    box-shadow: inset 2px 0 0 var(--color-accent);
+    color: var(--color-text);
+    font-weight: var(--weight-medium);
+  }
+
+  .fg-site-appearance {
+    display: inline-flex;
+    flex: none;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-control);
+  }
+  .fg-site-appearance__choice {
+    display: inline-flex;
+    width: var(--control-lg);
+    min-height: var(--control-lg);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    color: var(--color-muted);
+    background: transparent;
+    font: inherit;
+    cursor: pointer;
+  }
+  .fg-site-appearance__choice + .fg-site-appearance__choice { border-left: 1px solid var(--color-border-subtle); }
+  .fg-site-appearance__choice:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
+  .fg-site-appearance__choice:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
+  .fg-site-appearance__choice:hover { color: var(--color-text); background: var(--color-row-hover); }
+  .fg-site-appearance__choice[aria-pressed="true"] { color: var(--color-text); background: var(--color-row-selected); }
+
+  .fg-site-header a:focus-visible,
+  .fg-site-projects__trigger:focus-visible,
+  .fg-site-appearance__choice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+  .fg-site-appearance__choice:focus-visible { outline-offset: -2px; }
+  .fg-site-nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+
+  /* Type roles for article content. Prose reads at --text-reading. Components set
+   * their own size, and controls and dense content such as tables belong at --text-md.
+   * Zero-specificity heading selectors keep component and page styles in charge. */
+  .fg-site-prose { font-size: var(--text-reading); line-height: var(--leading); }
+  .fg-site-prose :where(h1, h2, h3, h4) {
+    margin: 0;
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--tracking-tight);
+    text-wrap: balance;
+  }
+  .fg-site-prose :where(h1) { font-size: var(--text-3xl); }
+  .fg-site-prose :where(h2) { font-size: var(--text-xl); }
+  .fg-site-prose :where(h3, h4) { font-size: var(--text-lg); }
+  .fg-site-prose :where(p, ul, ol) { max-width: var(--measure); margin: 0; }
+  .fg-site-prose :where(p, ul, ol) + :where(p, ul, ol) { margin-top: var(--space-4); }
+  .fg-site-prose :where(p a, li a, dd a) { text-decoration: underline; text-underline-offset: 0.18em; }
+  .fg-site-meta { color: var(--color-muted); font-size: var(--text-sm); }
+
+  @media (min-width: 681px) {
+    .fg-site-frame,
+    .fg-site-header__inner { padding-inline: var(--site-gutter, var(--space-6)); }
+  }
+  @media (max-width: 680px) {
+    .fg-site-prose :where(h1) { font-size: var(--text-2xl); }
+    .fg-site-header__end { gap: var(--space-2) var(--space-4); }
+    .fg-site-header__links { gap: var(--space-4); }
+    .fg-site-projects__menu a { min-height: var(--control-lg); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fg-site-projects__chevron,
+    .fg-site-nav a { transition: none; }
+  }
+}

package/src/themes/graphite-indigo.css

@@ -0,0 +1,111 @@
+/* Generated from themes/graphite-indigo.json by scripts/graphite-indigo.mjs. Do not edit.
+ * Opt-in Graphite Indigo roles for @filipgutica/ui. Import after theme.css.
+ * Dark mode uses the same .dark class as theme.css. Keep exactly one :root.dark block:
+ * sites copy it into a <noscript> prefers-color-scheme rule. */
+
+:root {
+  color-scheme: light;
+  --color-bg: #f4f5f8;
+  --color-surface: #e7e8ec;
+  --color-surface-raised: #ffffff;
+  --color-surface-muted: #e4e6eb;
+  --color-text: #222326;
+  --color-muted: #5d626c;
+  --color-link: #075fc7;
+  --color-accent: #6359a7;
+  --color-focus: #075fc7;
+  --color-border: #777d88;
+  --color-border-subtle: #d8dbe2;
+  --color-button-bg: var(--color-accent);
+  --color-button-text: #ffffff;
+  --color-button-hover: #554b94;
+  --color-input-bg: var(--color-surface-raised);
+  --color-input-text: var(--color-text);
+  --color-input-border: var(--color-border);
+  --color-input-placeholder: var(--color-muted);
+  --color-row-hover: #dfe1e7;
+  --color-row-selected: #ffffff;
+  --color-row-selected-text: var(--color-text);
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #626772;
+  --color-syntax-keyword: #715b42;
+  --color-syntax-string: #346347;
+  --color-syntax-number: #86532e;
+  --color-syntax-function: var(--color-syntax-keyword);
+  --color-syntax-type: var(--color-syntax-number);
+  --color-syntax-variable: var(--color-code-text);
+  --color-syntax-operator: var(--color-muted);
+  --color-syntax-punctuation: var(--color-muted);
+  --color-syntax-tag: var(--color-syntax-keyword);
+  --color-syntax-attribute: var(--color-syntax-number);
+  --color-error: #c7372d;
+  --color-warning: #86532e;
+  --color-success: #1f8a5b;
+  --color-info: #175cd3;
+  --color-progress: var(--color-accent);
+  --color-error-surface: color-mix(in srgb, var(--color-error) 10%, var(--color-bg));
+  --color-warning-surface: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
+  --color-success-surface: color-mix(in srgb, var(--color-success) 11%, var(--color-bg));
+  --color-info-surface: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
+  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
+  --color-status-text: var(--color-text);
+  --text-3xl: 32px;
+  --text-reading: 16px;
+  --text-display: 56px;
+  --text-display-sm: 38px;
+  --tracking-tight: -0.01em;
+  --space-20: 80px;
+  --space-24: 96px;
+  --row: 36px;
+  --page-wide: 1120px;
+}
+
+:root.dark {
+  color-scheme: dark;
+  --color-bg: #151619;
+  --color-surface: #191a1d;
+  --color-surface-raised: #212226;
+  --color-surface-muted: #303238;
+  --color-text: #f4f5f8;
+  --color-muted: #b0b5bf;
+  --color-link: #58a6ff;
+  --color-accent: #a99ce2;
+  --color-focus: #58a6ff;
+  --color-border: #818894;
+  --color-border-subtle: #3b3e45;
+  --color-button-bg: var(--color-accent);
+  --color-button-text: #151619;
+  --color-button-hover: #b7ace9;
+  --color-input-bg: var(--color-surface-raised);
+  --color-input-text: var(--color-text);
+  --color-input-border: var(--color-border);
+  --color-input-placeholder: var(--color-muted);
+  --color-row-hover: #25272d;
+  --color-row-selected: #38334f;
+  --color-row-selected-text: var(--color-text);
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #a0a6b1;
+  --color-syntax-keyword: #d8c2a5;
+  --color-syntax-string: #a8bd9c;
+  --color-syntax-number: #d5b98c;
+  --color-syntax-function: var(--color-syntax-keyword);
+  --color-syntax-type: var(--color-syntax-number);
+  --color-syntax-variable: var(--color-code-text);
+  --color-syntax-operator: var(--color-muted);
+  --color-syntax-punctuation: var(--color-muted);
+  --color-syntax-tag: var(--color-syntax-keyword);
+  --color-syntax-attribute: var(--color-syntax-number);
+  --color-error: #f0776c;
+  --color-warning: #e2a54b;
+  --color-success: #4cc38a;
+  --color-info: #84adff;
+  --color-progress: var(--color-accent);
+  --color-error-surface: color-mix(in srgb, var(--color-error) 10%, var(--color-bg));
+  --color-warning-surface: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
+  --color-success-surface: color-mix(in srgb, var(--color-success) 11%, var(--color-bg));
+  --color-info-surface: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
+  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border);
+  --color-status-text: var(--color-text);
+}