design26 0.1.0 → 0.1.2

package/COMPONENTS.md

@@ -18,16 +18,16 @@ A gently drifting 38px technical mesh, refined in the reference during this extr
 
 ## PageFrame
 
-The blue outer frame and opt-in theme boundary.
+The outer frame and opt-in theme boundary.
 
 - **Entry:** design26
-- **Props:** Native div props, children, className, ref
-- **Variants:** One faithful light theme
-- **Accessibility:** Use a main landmark inside the frame and a skip link before navigation.
-- **Recommended use:** One outer frame per application. Use d26-theme alone for embedded UI.
+- **Props:** primaryColor?: CSSProperties["color"]; native div props, children, className, style, ref
+- **Variants:** Reference blue by default; optional custom primary color with derived hover and soft states.
+- **Accessibility:** Use a main landmark inside the frame and a skip link before navigation. Choose a primary color with sufficient contrast against white button text and the paper surface.
+- **Recommended use:** One outer frame per application. primaryColor sets the frame, accents and related interaction colors through semantic tokens; nested theme boundaries remain independent. Native style overrides take precedence. Use d26-theme alone for embedded UI.
 
 ```tsx
-<PageFrame><Navigation brand="Project" /><Panel>Content</Panel></PageFrame>
+<PageFrame primaryColor="#306b72"><Navigation brand="Project" brandSize={24} /><Panel>Content</Panel></PageFrame>
 ```
 
 ## Panel
@@ -119,13 +119,13 @@ Compact playback and circular paging actions.
 White-on-blue wordmark, descriptor and links.
 
 - **Entry:** design26
-- **Props:** brand: ReactNode; description?: ReactNode; actions?: ReactNode; native header props
-- **Variants:** Descriptor hides at 760px
-- **Accessibility:** Brand links should identify the home destination. Actions are wrapped in a Main navigation landmark.
-- **Recommended use:** Keep labels short. The header is part of the blue frame.
+- **Props:** brand: ReactNode; brandSize?: CSSProperties["fontSize"] (number in px or CSS string); description?: ReactNode; actions?: ReactNode; native header props
+- **Variants:** Brand defaults to 39px / 32px at mobile; brandSize overrides both. Descriptor hides at 760px.
+- **Accessibility:** Brand links should identify the home destination. Actions are wrapped in a Main navigation landmark. Choose a readable brandSize at every viewport.
+- **Recommended use:** Keep labels short. Set brandSize on Navigation so the brand and its line box resize together; leave the brand child font size inherited. The header is part of the blue frame.
 
 ```tsx
-<Navigation brand={<a href="/">Project</a>} description="RESEARCH NOTES" actions={<a href="#work">Work</a>} />
+<Navigation brand={<a href="/">Project</a>} brandSize={24} description="RESEARCH NOTES" actions={<a href="#work">Work</a>} />
 ```
 
 ## StepNavigation

package/README.md

@@ -77,6 +77,19 @@ Override semantic tokens on the same wrapper. CSS properties inherit; defaults l
 
 Use `design26/tokens.css` alone when building a non-React composition. `design26/styles.css` already imports tokens. One faithful light theme is shipped; a dark theme is not invented. Exported `breakpoints` matches native CSS thresholds: mobile760px, tablet1100px, wide1500px. CSS variables cannot be used in native media-query conditions, so those literal thresholds are intentionally mirrored.
 
+For a different primary color, set `primaryColor` on the app's `PageFrame`:
+
+```tsx
+<PageFrame primaryColor="#306b72">
+  <Navigation brand={<a href="/">Conor Curley</a>} brandSize={24} />
+  <Panel><Button>Explore</Button></Panel>
+</PageFrame>
+```
+
+The prop accepts a CSS color, including `var(--my-primary)`. It sets `--color-brand`, `--color-background` and `--color-accent`, derives darker hover and pale accent states with CSS `color-mix()`, and coordinates frame copy, text selection and status halos. Buttons, links, heading emphasis and other components that use the accent token follow automatically. Existing paper surfaces, navy body text, amber focus and scientific series colors keep their roles. Choose a primary color that remains readable on paper and behind white button text.
+
+Omitting `primaryColor` preserves every original token value. The override is scoped to this frame; a nested theme wrapper starts its own defaults. Native `style` is merged last for explicit overrides. For embedded regions without PageFrame, override the same semantic tokens on `.d26-theme` or `[data-design26-theme="light"]`.
+
 ## Components
 
 Generic: TechnicalGrid, PageFrame, Navigation, Panel, Eyebrow, SectionHeading, Button, TextLink, IconButton, StepNavigation, Tabs, Slider, Select, Checkbox, Disclosure, Dialog, StatusNote.
@@ -87,6 +100,20 @@ See [COMPONENTS.md](COMPONENTS.md) for every component contract and [AGENTS.md](
 
 Every component exports a matching `*Props` type. Native HTML attributes, including React19 refs, are accepted. Tabs also exports TabItem. The repository's live catalogue documents every prop contract, state, usage example and accessibility note. Source declarations are the authoritative complete native-plus-custom API.
 
+### Navigation brand size
+
+Set `brandSize` on `Navigation` to resize `.d26-brand` and its line box together. Numbers are pixels; CSS strings support units and responsive expressions such as `clamp()`. Leave the brand link's font size inherited so it follows the prop.
+
+```tsx
+<Navigation
+  brand={<a href="/">Conor Curley</a>}
+  brandSize={24}
+  actions={<a href="#work">Work</a>}
+/>
+```
+
+You can also use `brandSize="1.5rem"` or `brandSize="clamp(22px, 2vw, 30px)"`. When omitted, the existing 39px desktop / 32px mobile sizes apply. A supplied value overrides both defaults and affects only this Navigation instance. Keep the name readable at narrow widths and preserve meaningful link text. Header height and action text sizes are independent of `brandSize`.
+
 ## Interaction contracts
 
 - Button defaults to type=button; use TextLink for navigation. IconButton requires aria-label.

package/dist/ui/primitives.d.ts

@@ -1,7 +1,9 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from "react";
 export declare const cx: (...values: Array<string | undefined | false>) => string;
-export type PageFrameProps = HTMLAttributes<HTMLDivElement>;
-export declare function PageFrame({ className, ...props }: PageFrameProps): import("react").JSX.Element;
+export type PageFrameProps = HTMLAttributes<HTMLDivElement> & {
+    primaryColor?: CSSProperties["color"];
+};
+export declare function PageFrame({ primaryColor, style, className, ...props }: PageFrameProps): import("react").JSX.Element;
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
     variant?: "sheet" | "control" | "toolbar";
     padding?: "none" | "content";
@@ -32,10 +34,11 @@ export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "ari
 export declare function IconButton({ variant, type, className, children, ...props }: IconButtonProps): import("react").JSX.Element;
 export type NavigationProps = HTMLAttributes<HTMLElement> & {
     brand: ReactNode;
+    brandSize?: CSSProperties["fontSize"];
     description?: ReactNode;
     actions?: ReactNode;
 };
-export declare function Navigation({ brand, description, actions, className, ...props }: NavigationProps): import("react").JSX.Element;
+export declare function Navigation({ brand, brandSize, description, actions, className, ...props }: NavigationProps): import("react").JSX.Element;
 export type StepNavigationProps = Omit<HTMLAttributes<HTMLElement>, "onChange"> & {
     items: {
         id: string;

package/dist/ui/primitives.js

@@ -1,13 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const cx = (...values) => values.filter(Boolean).join(" ");
-export function PageFrame({ className, ...props }) { return _jsx("div", { ...props, className: cx("d26-theme d26-frame", className) }); }
+export function PageFrame({ primaryColor, style, className, ...props }) {
+    const themeStyle = primaryColor === undefined ? style : {
+        "--color-brand": primaryColor,
+        "--color-background": "var(--color-brand)",
+        "--color-accent": "var(--color-brand)",
+        "--color-accent-hover": "color-mix(in srgb, var(--color-accent) 84%, black)",
+        "--color-accent-soft": "color-mix(in srgb, var(--color-accent) 8%, white)",
+        "--color-text-on-frame": "color-mix(in srgb, var(--color-brand) 12%, white)",
+        "--color-text-footer": "color-mix(in srgb, var(--color-brand) 22%, white)",
+        "--color-selection": "color-mix(in srgb, var(--color-accent) 26%, white)",
+        "--color-status-halo": "color-mix(in srgb, var(--color-accent) 10%, white)",
+        ...style,
+    };
+    return _jsx("div", { ...props, style: themeStyle, className: cx("d26-theme d26-frame", className) });
+}
 export function Panel({ variant = "sheet", padding = "content", className, ...props }) { return _jsx("div", { ...props, className: cx("d26-panel", `d26-panel--${variant}`, padding === "content" && "d26-panel--padded", className) }); }
 export function Eyebrow({ dot = false, compact = false, className, children, ...props }) { return _jsxs("div", { ...props, className: cx("d26-eyebrow", compact && "d26-eyebrow--compact", className), children: [dot && _jsx("span", { className: "d26-status-dot", "aria-hidden": "true" }), children] }); }
 export function SectionHeading({ as: Tag = "h2", size = "chapter", className, ...props }) { return _jsx(Tag, { ...props, className: cx("d26-heading", `d26-heading--${size}`, className) }); }
 export function Button({ variant = "primary", type = "button", busy, endIcon, className, children, disabled, ...props }) { return _jsxs("button", { ...props, type: type, disabled: disabled || busy, "aria-busy": busy || undefined, className: cx("d26-button", `d26-button--${variant}`, className), children: [children, endIcon && _jsx("span", { className: "d26-button-icon", "aria-hidden": "true", children: endIcon })] }); }
 export function TextLink({ className, ...props }) { return _jsx("a", { ...props, className: cx("d26-text-link", className) }); }
 export function IconButton({ variant = "circle", type = "button", className, children, ...props }) { return _jsx("button", { ...props, type: type, className: cx("d26-icon-button", `d26-icon-button--${variant}`, className), children: _jsx("span", { "aria-hidden": "true", children: children }) }); }
-export function Navigation({ brand, description, actions, className, ...props }) { return _jsxs("header", { ...props, className: cx("d26-navigation", className), children: [_jsx("div", { className: "d26-brand", children: brand }), description && _jsx("div", { className: "d26-navigation-description", children: description }), actions && _jsx("nav", { "aria-label": "Main", className: "d26-navigation-actions", children: actions })] }); }
+export function Navigation({ brand, brandSize, description, actions, className, ...props }) { return _jsxs("header", { ...props, className: cx("d26-navigation", className), children: [_jsx("div", { className: "d26-brand", style: brandSize === undefined ? undefined : { fontSize: brandSize }, children: brand }), description && _jsx("div", { className: "d26-navigation-description", children: description }), actions && _jsx("nav", { "aria-label": "Main", className: "d26-navigation-actions", children: actions })] }); }
 export function StepNavigation({ items, value, onValueChange, className, ...props }) { return _jsx("nav", { ...props, className: cx("d26-steps", className), children: items.map((item, i) => _jsxs("button", { type: "button", disabled: item.disabled, "aria-current": value === item.id ? "step" : undefined, onClick: () => onValueChange(item.id), children: [_jsx("span", { className: "d26-step-number", children: String(i + 1).padStart(2, "0") }), _jsx("span", { children: item.label }), _jsx("span", { className: "d26-step-dot", "aria-hidden": "true" })] }, item.id)) }); }
 export function Disclosure({ title, className, children, ...props }) { return _jsxs("details", { ...props, className: cx("d26-disclosure", className), children: [_jsxs("summary", { children: [title, _jsx("span", { "aria-hidden": "true", children: "\u2304" })] }), _jsx("div", { children: children })] }); }
 export function StatusNote({ tone = "info", className, ...props }) { return _jsx("p", { ...props, className: cx("d26-note", `d26-note--${tone}`, className) }); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design26",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A personal visual language for research, engineering and the web, extracted from the UVID demonstration.",
   "license": "UNLICENSED",
   "type": "module",
@@ -25,6 +25,10 @@
     "./styles.css": "./dist/styles.css",
     "./tokens.css": "./dist/tokens.css"
   },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node build.mjs",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit"
+  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -33,9 +37,5 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "typescript": "^5"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json && node build.mjs",
-    "typecheck": "tsc -p tsconfig.build.json --noEmit"
   }
-}
+}