diff --git a/bun.lock b/bun.lock
index 1089690f..13ddc412 100644
--- a/bun.lock
+++ b/bun.lock
@@ -391,7 +391,7 @@
},
"packages/design-studio": {
"name": "@wrnexus/design-studio",
- "version": "0.1.8",
+ "version": "0.1.9",
"bin": {
"wrnexus-design-studio": "src/cli.ts",
},
@@ -409,7 +409,7 @@
},
"packages/design-system": {
"name": "@wrnexus/design-system",
- "version": "0.1.2",
+ "version": "0.1.3",
},
"packages/dev-server": {
"name": "@wrnexus/dev-server",
diff --git a/packages/design-studio/package.json b/packages/design-studio/package.json
index fe324738..fa29f2c3 100644
--- a/packages/design-studio/package.json
+++ b/packages/design-studio/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/design-studio",
- "version": "0.1.8",
+ "version": "0.1.9",
"private": true,
"type": "module",
"main": "src/index.ts",
diff --git a/packages/design-studio/src/manual-editor.ts b/packages/design-studio/src/manual-editor.ts
index 7a3aadf0..380b5662 100644
--- a/packages/design-studio/src/manual-editor.ts
+++ b/packages/design-studio/src/manual-editor.ts
@@ -1,4 +1,10 @@
-import { MANUAL_COLORS, MANUAL_FONTS, manualDesign, type ManualEdit } from "./manual.ts";
+import {
+ MANUAL_COLORS,
+ MANUAL_FONTS,
+ MANUAL_TYPOGRAPHY,
+ manualDesign,
+ type ManualEdit,
+} from "./manual.ts";
import { checkDecisionLocks } from "./decisions.ts";
import type { StudioSession } from "./session.ts";
const escape = (value: unknown) =>
@@ -6,7 +12,7 @@ const escape = (value: unknown) =>
/[&<>"']/g,
(c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[c]!,
);
-export const manualHtml = `Create a theme yourself. Choose your settings, then select Update preview to save a recoverable draft. No AI or API key is needed.
Update preview Default theme Edit color mode Colors Edit light and dark palettes separately. Brand and status colors get matching hover and readable contrast colors automatically. Foundations below apply to both modes.
All other color tokens Fine-tune hover, contrast, focus, input, code and custom color tokens.
Shape and spacing
Use 0 for square corners, 8–16 for rounded corners, or 999 for pill-shaped controls. Switches stay pill-shaped.
Button styleSolid Outlined TiltNone Subtle Expressive
Typography
Use a system font below or enter your own font stack. Custom fonts must also be loaded in your application.
Surface ShadowFlat / no shadow Soft shadow Crisp shadow Use Create new or Duplicate in the workspace to name your theme. Export JSON keeps a portable copy. Review & apply exports the CSS or theme configuration for your app. Decision locks also protect manual edits.
Update preview Create a theme yourself. Choose your settings, then select Update preview to save a recoverable draft. No AI or API key is needed.
Update preview Default theme Edit color mode Colors Edit light and dark palettes separately. Brand and status colors get matching hover and readable contrast colors automatically. Foundations below apply to both modes.
All other color tokens Fine-tune hover, contrast, focus, input, code and custom color tokens.
Shape and spacing
Use 0 for square corners, 8–16 for rounded corners, or 999 for pill-shaped controls. Switches stay pill-shaped.
Button styleSolid Outlined TiltNone Subtle Expressive
Typography
Use a system font below or enter your own font stack. Custom fonts must also be loaded in your application.
Surface ShadowFlat / no shadow Soft shadow Crisp shadow Use Create new or Duplicate in the workspace to name your theme. Export JSON keeps a portable copy. Review & apply exports the CSS or theme configuration for your app. Decision locks also protect manual edits.
Update preview ${label}Current: ${escape(current)} ${Object.entries(
MANUAL_FONTS,
)
@@ -214,6 +228,13 @@ export function setupManual(
)} `;
})
.join("");
+ $("manual-type-scale").innerHTML = Object.entries(MANUAL_TYPOGRAPHY)
+ .map(([name, setting]) => {
+ const raw = String(resolved.tokens[name]?.value ?? setting.initial);
+ const numeric = parseFloat(raw) * (raw.endsWith("rem") ? 16 : 1);
+ return `${setting.label} `;
+ })
+ .join("");
const shadow = $("manual-shadow") as HTMLSelectElement;
const current = String(resolved.tokens["elevation.panel"]?.value ?? "none");
Array.from(shadow.options)
diff --git a/packages/design-studio/src/manual.ts b/packages/design-studio/src/manual.ts
index 2e20d908..89cefaeb 100644
--- a/packages/design-studio/src/manual.ts
+++ b/packages/design-studio/src/manual.ts
@@ -1,4 +1,9 @@
-import { validateDesignSystem, type DesignSystem, type DesignToken } from "@wrnexus/design-system";
+import {
+ COMPONENT_CONTRACTS,
+ validateDesignSystem,
+ type DesignSystem,
+ type DesignToken,
+} from "@wrnexus/design-system";
export const MANUAL_COLORS = {
primary: "Brand / primary",
@@ -16,10 +21,122 @@ export const MANUAL_COLORS = {
} as const;
export const MANUAL_FONTS = {
sans: '"Helvetica Neue", Arial, sans-serif',
+ system: "system-ui, sans-serif",
+ arial: "Arial, Helvetica, sans-serif",
+ verdana: "Verdana, Geneva, sans-serif",
+ tahoma: "Tahoma, sans-serif",
+ georgia: "Georgia, serif",
+ times: '"Times New Roman", Times, serif',
+ palatino: '"Palatino Linotype", Palatino, serif',
+ consolas: 'Consolas, "Courier New", monospace',
humanist: '"Trebuchet MS", Arial, sans-serif',
serif: 'Georgia, "Times New Roman", serif',
mono: '"Courier New", monospace',
};
+export const MANUAL_TYPOGRAPHY = {
+ "type.body-size": {
+ label: "Body size (px)",
+ type: "dimension",
+ min: 10,
+ max: 32,
+ initial: 16,
+ unit: "px",
+ },
+ "type.heading-size": {
+ label: "Heading size (px)",
+ type: "dimension",
+ min: 16,
+ max: 96,
+ initial: 28,
+ unit: "px",
+ },
+ "type.code-size": {
+ label: "Code size (px)",
+ type: "dimension",
+ min: 10,
+ max: 32,
+ initial: 14,
+ unit: "px",
+ },
+ "type.body-weight": {
+ label: "Body weight",
+ type: "fontWeight",
+ min: 100,
+ max: 900,
+ initial: 400,
+ unit: "",
+ },
+ "type.heading-weight": {
+ label: "Heading weight",
+ type: "fontWeight",
+ min: 100,
+ max: 900,
+ initial: 700,
+ unit: "",
+ },
+ "type.body-leading": {
+ label: "Body line height",
+ type: "number",
+ min: 1,
+ max: 2.5,
+ initial: 1.5,
+ unit: "",
+ },
+ "type.heading-leading": {
+ label: "Heading line height",
+ type: "number",
+ min: 1,
+ max: 2,
+ initial: 1.2,
+ unit: "",
+ },
+ "type.body-tracking": {
+ label: "Body letter spacing (px)",
+ type: "dimension",
+ min: -2,
+ max: 8,
+ initial: 0,
+ unit: "px",
+ },
+ "type.heading-tracking": {
+ label: "Heading letter spacing (px)",
+ type: "dimension",
+ min: -4,
+ max: 12,
+ initial: 0,
+ unit: "px",
+ },
+} as const;
+function typographyRecipes(system: DesignSystem, token: string) {
+ const suffix = token.replace(/^type\./, "");
+ const group = suffix.split("-")[0]!;
+ const property =
+ (
+ {
+ size: "fontSize",
+ weight: "fontWeight",
+ leading: "lineHeight",
+ tracking: "letterSpacing",
+ } as Record
+ )[suffix.split("-")[1]!] ?? "fontFamily";
+ for (const [name, contract] of Object.entries(COMPONENT_CONTRACTS)) {
+ for (const [part, descriptor] of Object.entries(contract.parts)) {
+ const properties: readonly string[] = descriptor.properties;
+ if (!properties.includes(property)) continue;
+ const code = /code|kbd/i.test(name) || /code/i.test(part);
+ const heading = /title|heading|headline/i.test(part);
+ if ((code ? "code" : heading ? "heading" : "body") !== group) continue;
+ // Keep icon geometry and managed/provider content independent of text settings.
+ if (
+ /icon|spinner|thumb|track|srOnly/i.test(part) ||
+ ("ownership" in descriptor && descriptor.ownership !== "framework")
+ )
+ continue;
+ const recipe = ((system.recipes ??= {})[name] ??= { contractVersion: 1 });
+ ((recipe.base ??= {})[part] ??= {})[property] = { ref: token };
+ }
+ }
+}
export type ManualEdit =
| { kind: "color"; mode: string; name: string; value: string }
| { kind: "token"; name: string; value: string }
@@ -157,6 +274,13 @@ export function manualDesign(source: DesignSystem, edit: ManualEdit): DesignSyst
"shape.dialog": ["dimension", "radius-lg"],
"type.body": ["fontFamily", "font-sans"],
"type.heading": ["fontFamily", undefined],
+ "type.code": ["fontFamily", "font-mono"],
+ ...Object.fromEntries(
+ Object.entries(MANUAL_TYPOGRAPHY).map(([name, setting]) => [
+ name,
+ [setting.type, undefined],
+ ]),
+ ),
"elevation.panel": ["shadow", "shadow-1"],
"space.control": ["dimension", undefined],
"space.panel": ["dimension", "space-panel"],
@@ -165,11 +289,24 @@ export function manualDesign(source: DesignSystem, edit: ManualEdit): DesignSyst
const [type, legacy] = allowed[edit.name]!;
if (
type === "dimension" &&
+ !Object.hasOwn(MANUAL_TYPOGRAPHY, edit.name) &&
(!/^\d+(?:\.\d+)?px$/.test(edit.value) ||
parseFloat(edit.value) > (edit.name.startsWith("shape.") ? 999 : 64))
)
throw Error("Enter corners between 0 and 999 pixels, or padding between 0 and 64 pixels.");
+ const typography = MANUAL_TYPOGRAPHY[edit.name as keyof typeof MANUAL_TYPOGRAPHY];
+ if (typography) {
+ const numeric = Number(typography.unit ? edit.value.replace(/px$/, "") : edit.value);
+ if (
+ !Number.isFinite(numeric) ||
+ numeric < typography.min ||
+ numeric > typography.max ||
+ (typography.unit && !/^-?\d+(?:\.\d+)?px$/.test(edit.value))
+ )
+ throw Error(`${typography.label} must be between ${typography.min} and ${typography.max}.`);
+ }
set(system.tokens, edit.name, edit.value, type, legacy);
+ if (edit.name.startsWith("type.")) typographyRecipes(system, edit.name);
// Existing mode overrides must not silently win over a shared foundation edit.
for (const layer of Object.values(system.modes ?? {}))
if (layer[edit.name]) set(layer, edit.name, edit.value, type, legacy);
diff --git a/packages/design-studio/src/preview.ts b/packages/design-studio/src/preview.ts
index bd869b27..97d69779 100644
--- a/packages/design-studio/src/preview.ts
+++ b/packages/design-studio/src/preview.ts
@@ -16,6 +16,7 @@ import { uiCss, uiComponentPath } from "@wrnexus/ui/registry";
import { resolveThemeConfig, renderThemeCss } from "@wrnexus/styles/theme";
import {
COMPONENT_CONTRACTS,
+ resolveDesignSystem,
type DesignSystem,
type ResolveOptions,
} from "@wrnexus/design-system";
@@ -68,6 +69,31 @@ async function component(name: string, props: Record = {}) {
return String((await modules.get(name)!).render(props));
}
+function typographyCss(system: DesignSystem, options: ResolveOptions) {
+ const tokens = resolveDesignSystem(system, options).tokens;
+ return (
+ [
+ ["body", "body"],
+ ["h1,h2,h3,h4,h5,h6", "heading"],
+ ["code,pre,kbd,samp", "code"],
+ ] as const
+ )
+ .map(([selector, role]) => {
+ const rules = [
+ ["font-family", `type.${role}`],
+ ["font-size", `type.${role}-size`],
+ ["font-weight", `type.${role}-weight`],
+ ["line-height", `type.${role}-leading`],
+ ["letter-spacing", `type.${role}-tracking`],
+ ]
+ .filter(([, name]) => tokens[name!])
+ .map(([property, name]) => `${property}:${tokens[name!]!.value};`)
+ .join("");
+ return `${selector}{${rules}}`;
+ })
+ .join("");
+}
+
export async function previewDocument(
system: DesignSystem,
options: ResolveOptions & { content?: string; page?: number; direction?: string } = {},
@@ -183,7 +209,7 @@ export async function previewDocument(
meta: { title: system.name + " preview" },
body,
htmlAttrs: ` dir="${options.direction === "rtl" ? "rtl" : "ltr"}" data-theme="${escape(mode)}"`,
- extraHead: ``,
+ extraHead: ``,
componentRecipeCss: theme.recipeCss,
extraBody: ``,
});
@@ -208,7 +234,7 @@ export async function previewAgentPage(
meta: { title: page.title },
body: `${escape(page.title)} ${body.join("")}= 1 && Number(value) <= 3;
if (property === "opacity") return Number(value) >= 0 && Number(value) <= 1;
if (
[