@panphora/clayjs 1.8.1 → 1.9.0

package/src/ui/bevel-dialog.js

@@ -1,9 +1,10 @@
 // The frame every ClayJS dialog draws: a backdrop, a Bevel panel, an optional corner
 // close. It holds no behaviour. The modal and the crop adapter own focus, Escape,
 // backdrop clicks and settling, so each keeps the rules it already had.
-import { set } from "../lib/hostile-css.js";
-import { bevelBox, bevelSurface, bevelText, pageScheme, protectIcon } from "./bevel-controls.js";
+import { style, set } from "../lib/hostile-css.js";
+import { bevelBox, bevelSurface, bevelText, pageScheme, protectIcon, restyleBox } from "./bevel-controls.js";
 import { TOKENS, FONT_SANS, RULES, GLYPHS } from "./bevel.js";
+import { themed, tokenRulesFor, partRules, markParts } from "./theme-parts.js";
 
 // A frame's own way to settle itself. The modal is a singleton and clears every frame
 // when it opens; a frame it does not own (the crop dialog) registers here, so it is
@@ -35,45 +36,88 @@ const LINE = `1px solid ${TOKENS["line-2"]}`;
 
 // The close: a column at the header's right edge in the button face, or a 62px square
 // at the panel's corner when there is no header.
-function dialogClose(label, inHeader) {
+function dialogClose(label, inHeader, theme = null, names = [], iconNames = []) {
   const hover = RULES.dialogCloseHover[0].slice("background:".length);
-  const b = bevelBox("button", [
+  const base = [
     "position:absolute", "top:-1px", "right:-1px", "z-index:2",
     "display:grid", "place-items:center", inHeader ? "height:calc(100% + 1px)" : "height:62px",
     "margin:0", "padding:0", "border:0", ...RULES.dialogClose, ...(inHeader ? [] : [`border-bottom:${LINE}`]),
     "cursor:pointer", "outline:none",
-  ]);
+  ];
+  const b = bevelBox("button", base);
   b.type = "button";
   b.setAttribute("aria-label", label);
   b.title = label;
   b.innerHTML = GLYPHS.dialogClose;
-  protectIcon(b.firstElementChild, 16);
-  b.addEventListener("pointerenter", () => set(b, "background", hover));
-  b.addEventListener("pointerleave", () => set(b, "background", TOKENS.face));
-  b.addEventListener("focus", () => { set(b, "outline", `2px solid ${TOKENS.brass}`); set(b, "outline-offset", "-4px"); });
-  b.addEventListener("blur", () => set(b, "outline", "none"));
+  if (!themed(theme)) {
+    protectIcon(b.firstElementChild, 16);
+    b.addEventListener("pointerenter", () => set(b, "background", hover));
+    b.addEventListener("pointerleave", () => set(b, "background", TOKENS.face));
+    b.addEventListener("focus", () => { set(b, "outline", `2px solid ${TOKENS.brass}`); set(b, "outline-offset", "-4px"); });
+    b.addEventListener("blur", () => set(b, "outline", "none"));
+    return b;
+  }
+  const allNames = ["close", ...names];
+  const icon = ["icon", ...iconNames];
+  markParts(b, theme, allNames);
+  markParts(b.firstElementChild, theme, icon);
+  const flags = { hover: false, focus: false, pressed: false };
+  const paint = () => {
+    const act = { hover: flags.hover, active: flags.pressed, focus: flags.focus };
+    const svg = b.firstElementChild;
+    svg.style.cssText = "";
+    protectIcon(svg, 16);
+    style(svg, partRules(theme, icon, act));
+    restyleBox(b, [
+      ...base,
+      ...(flags.hover ? [`background:${hover}`] : []),
+      ...(flags.focus ? [`outline:2px solid ${TOKENS.brass}`, "outline-offset:-4px"] : []),
+      ...tokenRulesFor(theme, "close", act),
+      ...partRules(theme, allNames, act),
+    ]);
+  };
+  b.addEventListener("pointerenter", () => { flags.hover = true; paint(); });
+  b.addEventListener("pointerleave", () => { flags.hover = false; flags.pressed = false; paint(); });
+  b.addEventListener("pointerdown", (e) => {
+    if (e.button !== undefined && e.button !== 0) return;
+    flags.pressed = true;
+    paint();
+  });
+  b.addEventListener("pointerup", () => { flags.pressed = false; paint(); });
+  b.addEventListener("focus", () => { flags.focus = true; paint(); });
+  b.addEventListener("blur", () => { flags.focus = false; flags.pressed = false; paint(); });
+  paint();
   return b;
 }
 
-export function bevelDialog({ zIndex = "100", width = "600px", closable = false, titled = false } = {}) {
-  const root = bevelBox("div", ["display:block"]);
+// `theme` is a captured resolveTheme() result, or null for the exact Bevel look.
+// `surface` names the dialog for part overrides: "modal" uses dialog.* parts only;
+// "people" and "crop" add people.* or crop.* after them, so those win.
+export function bevelDialog({ zIndex = "100", width = "600px", closable = false, titled = false, theme = null, surface = "modal" } = {}) {
+  const on = themed(theme);
+  const t = on ? theme.tokens : {};
+  const S = t.spacing;
+  const names = (part) => (surface === "modal" ? [`dialog.${part}`] : [`dialog.${part}`, `${surface}.${part}`]);
+
+  const root = bevelBox("div", ["display:block"], { theme, parts: names("root") });
   root.setAttribute("data-clay-modal", "");
+  if (on) root.setAttribute("data-clay-ui", surface);
   root.setAttribute("aria-hidden", "true");
-  set(root, "color-scheme", pageScheme());
+  set(root, "color-scheme", on ? theme.scheme : pageScheme());
 
   const overlay = bevelBox("div", [
     "position:fixed", "inset:0", `z-index:${zIndex}`, "overflow:auto",
     "display:flex", "align-items:flex-start", "justify-content:center",
     "padding:min(96px, 10vh) 16px 16px",
     `background:color-mix(in srgb, ${TOKENS.ground} 72%, transparent)`,
-  ]);
+  ], { theme, parts: names("overlay"), role: "overlay" });
   overlay.tabIndex = -1;
 
   const panel = bevelSurface("form", [
     "position:relative", "display:flex", "flex-direction:column", "margin:0",
     `width:min(${width}, 100%)`, "max-height:calc(100dvh - min(96px, 10vh) - 16px)",
     ...RULES.dialogPanel,
-  ]);
+  ], { theme, parts: names("panel") });
   panel.setAttribute("role", "dialog");
   panel.setAttribute("aria-modal", "true");
 
@@ -83,8 +127,10 @@ export function bevelDialog({ zIndex = "100", width = "600px", closable = false,
     header = bevelBox("div", [
       "position:relative", "display:block", "flex:none",
       `padding:20px ${closable ? "68px" : "22px"} 16px 22px`, ...RULES.dialogHeader,
-    ]);
-    heading = bevelText("div", ["display:block", ...RULES.dialogHeading, "overflow-wrap:anywhere"]);
+      ...(t.border ? [`border-bottom-color:${t.border}`] : []),
+      ...(S ? [`padding:${S} ${closable ? `calc(${S} + 46px)` : S} calc(${S} * .7) ${S}`] : []),
+    ], { theme, parts: names("header") });
+    heading = bevelText("div", ["display:block", ...RULES.dialogHeading, "overflow-wrap:anywhere"], undefined, { theme, parts: names("title"), role: "heading" });
     heading.setAttribute("role", "heading");
     heading.setAttribute("aria-level", "2");
     header.append(heading);
@@ -95,16 +141,19 @@ export function bevelDialog({ zIndex = "100", width = "600px", closable = false,
     "display:block", "flex:1 1 auto", "min-height:0", "overflow-y:auto", "overflow-x:hidden",
     `padding:20px ${closable && !titled ? "84px" : "22px"} 20px 22px`,
     "overflow-wrap:anywhere", `font:14.5px/1.55 ${FONT_SANS}`,
-  ]);
+    ...(S ? [`padding:${S} ${closable && !titled ? `calc(${S} + 62px)` : S} ${S} ${S}`] : []),
+  ], undefined, { theme, parts: names("body") });
   const footer = bevelBox("div", [
     "display:flex", "flex:none", "flex-wrap:wrap", "justify-content:flex-end", "align-items:center", ...RULES.dialogFooter,
-  ]);
+    ...(t.border ? [`border-top-color:${t.border}`] : []),
+    ...(S ? [`padding:calc(${S} * .65) ${S}`, `gap:calc(${S} / 2)`] : []),
+  ], { theme, parts: [...names("footer"), ...names("actions")] });
   panel.append(body, footer);
 
-  const close = closable ? dialogClose("Close", titled) : null;
+  const close = closable ? dialogClose("Close", titled, theme, names("close"), names("closeIcon")) : null;
   if (close) (header || panel).append(close);
 
   overlay.append(panel);
   root.append(overlay);
-  return { root, overlay, panel, header, heading, body, footer, close };
+  return { root, overlay, panel, header, heading, body, footer, close, theme };
 }

package/src/ui/dialogs.js

@@ -1,18 +1,20 @@
-import themodal from "./modal.js";
+import themodal, { SURFACE_THEME } from "./modal.js";
 import onDomReady from "../lib/dom-ready.js";
 import toast from "./toast.js";
 import copyToClipboard from "../utils/copy-to-clipboard.js";
 import { bevelBox, bevelButton, bevelInput, bevelText } from "./bevel-controls.js";
 import { TOKENS, FONT_SANS, FONT_MONO } from "./bevel.js";
+import { resolveTheme } from "./theme.js";
 
 // Caller markup (promptText, extraContent, tell's paragraphs) goes in as it is: those
 // are markup by design, and callers pass elements through them. Only the frame around
 // it is ClayJS's to style. The prompt is the dialog's title, as in the dashboard.
 function createModal(promptText, yesCallback, extraContent = "", includeInput = false, defaultValue = "", yesLabel = "OK") {
-  const content = bevelBox("div", ["display:flex", "flex-direction:column", "gap:14px", `font:14.5px/1.55 ${FONT_SANS}`, `color:${TOKENS["ink-2"]}`]);
+  const theme = resolveTheme();
+  const content = bevelBox("div", ["display:flex", "flex-direction:column", "gap:14px", `font:14.5px/1.55 ${FONT_SANS}`, `color:${TOKENS["ink-2"]}`], { theme, parts: ["dialog.content"], role: "text" });
   let input = null;
   if (includeInput) {
-    input = bevelInput("input", { rules: ["display:block", "width:100%", "margin:0"] });
+    input = bevelInput("input", { rules: ["display:block", "width:100%", "margin:0"], theme, parts: ["dialog.input"] });
     input.setAttribute("value", String(defaultValue));
     input.required = true;
     content.append(input);
@@ -22,6 +24,7 @@ function createModal(promptText, yesCallback, extraContent = "", includeInput =
   themodal.title = promptText;
   themodal.html = includeInput || extraContent ? content : "";
   themodal.width = "440px";
+  themodal[SURFACE_THEME] = theme;
   themodal.closeHtml = "x";
   themodal.no = "Cancel";
   themodal.yes = yesLabel;
@@ -95,9 +98,10 @@ export function consent(promptText, yesCallback, extraContent = "") {
  * @returns {Promise} Resolves when user confirms, rejects on close
  */
 export function tell(promptText, ...content) {
-  const box = bevelBox("div", ["display:flex", "flex-direction:column", "gap:12px"]);
+  const theme = resolveTheme();
+  const box = bevelBox("div", ["display:flex", "flex-direction:column", "gap:12px"], { theme, parts: ["dialog.content"] });
   for (const c of content) {
-    const paragraph = bevelText("div", [`font:14.5px/1.55 ${FONT_SANS}`, `color:${TOKENS["ink-2"]}`, "overflow-wrap:anywhere"]);
+    const paragraph = bevelText("div", [`font:14.5px/1.55 ${FONT_SANS}`, `color:${TOKENS["ink-2"]}`, "overflow-wrap:anywhere"], undefined, { theme });
     paragraph.innerHTML = c;
     box.append(paragraph);
   }
@@ -105,6 +109,7 @@ export function tell(promptText, ...content) {
   themodal.title = promptText;
   themodal.html = content.length ? box : "";
   themodal.width = "470px";
+  themodal[SURFACE_THEME] = theme;
   themodal.closeHtml = "x";
   themodal.yes = "OK";
 
@@ -136,17 +141,19 @@ export function tell(promptText, ...content) {
  *   Callers style their own container.
  */
 export function snippet(title, content, extraContent = '') {
-  const box = bevelBox("div", ["display:block"]);
+  const theme = resolveTheme();
+  const box = bevelBox("div", ["display:block"], { theme, parts: ["dialog.content"] });
   const well = bevelBox("div", [
     "display:block", "max-width:100%", "overflow-x:auto", "margin:0 0 14px", "padding:14px 16px",
     `background:${TOKENS.sunk}`, `border:1px solid ${TOKENS["line-2"]}`,
-  ]);
-  const pre = bevelText("pre", ["display:block", "margin:0", "white-space:nowrap", `font:13px/1.6 ${FONT_MONO}`]);
+  ], { theme, parts: ["dialog.well"], role: "well" });
+  const pre = bevelText("pre", ["display:block", "margin:0", "white-space:nowrap", `font:13px/1.6 ${FONT_MONO}`], undefined, { theme, parts: ["dialog.code"], role: "code" });
   pre.innerHTML = content;
   well.append(pre);
   const copy = bevelButton("Copy", {
     small: true,
     extra: ["margin:0 0 14px"],
+    theme, parts: ["dialog.button", "dialog.copyButton"], labelParts: ["dialog.buttonLabel"],
     onClick: () => {
       copyToClipboard(content);
       toast('Copied to clipboard!', 'success');
@@ -158,6 +165,7 @@ export function snippet(title, content, extraContent = '') {
   themodal.title = title;
   themodal.html = box;
   themodal.width = "540px";
+  themodal[SURFACE_THEME] = theme;
   themodal.closeHtml = "x";
   themodal.yes = '';
 

package/src/ui/index.js

@@ -2,9 +2,12 @@ import toast, { toastPersistent, dismissPersistent } from "./toast.js";
 import themodal from "./modal.js";
 import { ask, consent, tell, snippet } from "./dialogs.js";
 import { saveFeedback } from "../core/save-feedback.js";
+import { initTheme } from "./theme.js";
 
 // Attach the public surface explicitly (§2.3). We do NOT rely on toast.js /
 // dialogs.js evaluation side effects — their window auto-exports are stripped.
+initTheme();
+
 const clay = (window.clay = window.clay || {});
 clay.toast = toast;
 clay.toastPersistent = toastPersistent;

package/src/ui/modal.js

@@ -1,6 +1,11 @@
 import { bevelButton, setShown } from "./bevel-controls.js";
 import { set } from "../lib/hostile-css.js";
 import { bevelDialog, dismissOf } from "./bevel-dialog.js";
+import { resolveTheme } from "./theme.js";
+
+// The theme one open() draws with. Internal: only dialogs.js sets it, so no page can
+// leave a value behind that makes the next open() throw.
+export const SURFACE_THEME = Symbol("clay.surfaceTheme");
 
 /*
 
@@ -299,6 +304,7 @@ const themodal = (() => {
   let closeHtml = "";
   let title = "";
   let width = "";
+  let theme;
 
   let enableClickOutsideCloses = true;
   let disableScroll = true;
@@ -347,15 +353,17 @@ const themodal = (() => {
       // Expose this modal's dismiss so a later open()/close can settle it.
       this._dismiss = dismiss;
 
-      const shell = bevelDialog({ zIndex, closable: !!closeHtml, titled: !!title, ...(width ? { width } : {}) });
+      const surfaceTheme = theme === undefined ? resolveTheme() : theme;
+      const shell = bevelDialog({ zIndex, closable: !!closeHtml, titled: !!title, ...(width ? { width } : {}), theme: surfaceTheme });
       const modalRootElem = shell.root;
       const modalOverlayElem = shell.overlay;
       const modalContainerElem = shell.panel;
       const modalContentElem = shell.body;
       const modalButtonsElem = shell.footer;
       const modalCloseElem = shell.close;
-      const modalNoElem = bevelButton('');
-      const modalYesElem = bevelButton('', { variant: 'primary' });
+      const buttonParts = { theme: surfaceTheme, parts: ['dialog.button'], labelParts: ['dialog.buttonLabel'] };
+      const modalNoElem = bevelButton('', buttonParts);
+      const modalYesElem = bevelButton('', { variant: 'primary', ...buttonParts });
       modalYesElem.type = 'submit';
       modalButtonsElem.append(modalNoElem, modalYesElem);
 
@@ -468,6 +476,7 @@ const themodal = (() => {
           closeHtml = "";
           title = "";
           width = "";
+          theme = undefined;
 
           // reset to defaults
           enableClickOutsideCloses = true;
@@ -528,6 +537,12 @@ const themodal = (() => {
     set width(newVal) {
       width = newVal;
     },
+    get [SURFACE_THEME]() {
+      return theme;
+    },
+    set [SURFACE_THEME](newVal) {
+      theme = newVal;
+    },
     get yes() {
       return yes;
     },

package/src/ui/theme-parts.js

@@ -0,0 +1,122 @@
+// Theme declarations for the controls ClayJS draws. tokenRules() maps a theme's tokens
+// onto one semantic role in one state; partRules() applies a page's explicit part
+// overrides, general to specific. Both return "prop:value" strings for hostile-css,
+// and both return nothing for no theme or the exact Bevel theme.
+
+export const themed = (theme) => !!theme && !theme.bevel;
+
+const mix = (a, b, pct) => `color-mix(in srgb, ${a}, ${b} ${pct}%)`;
+const decl = (prop, value) => (value ? [`${prop}:${value}`] : []);
+
+// States in the order they apply. Disabled suppresses hover and pressed.
+export function stateList({ hover = false, active = false, focus = false, disabled = false } = {}) {
+  const list = ["base"];
+  if (!disabled && hover) list.push("hover");
+  if (!disabled && active) list.push("active");
+  if (focus) list.push("focus");
+  if (disabled) list.push("disabled");
+  return list;
+}
+
+// Hover and press on neutral controls: a page's own background colour when it gave one
+// that differs from the surface, else the surface tinted toward the text (or the
+// control's own colour when the theme has no text).
+function neutral(t, pct) {
+  if (t.background && t.background !== t.surface) return pct > 8 ? mix(t.background, t.text || "currentColor", 6) : t.background;
+  if (t.surface) return mix(t.surface, t.text || "currentColor", pct);
+  return t.background;
+}
+
+function button(t, variant, state) {
+  const r = [];
+  const fill = { primary: ["accent", "accentText"], danger: ["danger", "dangerText"] }[variant];
+  if (state === "base") r.push(...decl("font-family", t.font), ...decl("border-radius", t.radius));
+  if (state === "base" && t.buttonHeight) r.push("height:auto", "block-size:auto", `min-height:${t.buttonHeight}`);
+  if (fill) {
+    const bg = t[fill[0]];
+    const fg = t[fill[1]];
+    if (state === "base") r.push(...decl("background", bg), ...decl("border-color", bg), ...decl("color", fg));
+    if (state === "hover" && bg && fg) r.push(`background:${mix(bg, fg, 12)}`);
+    if (state === "active" && bg) r.push(`border-color:${bg}`, ...(fg ? [`background:${mix(bg, fg, 20)}`] : []));
+    if (state === "disabled" && bg) r.push("opacity:.55");
+  } else if (variant === "quiet") {
+    if (state === "base") r.push(...decl("color", t.text));
+    if (state === "hover") r.push(...decl("background", neutral(t, 7)));
+    if (state === "active") r.push(...decl("background", neutral(t, 12)));
+    if (state === "disabled") r.push(...decl("color", t.mutedText));
+  } else {
+    if (state === "base") r.push(...decl("background", t.surface), ...decl("color", t.text), ...decl("border-color", t.border));
+    if (state === "hover") r.push(...decl("background", neutral(t, 7)));
+    if (state === "active") r.push(...decl("background", neutral(t, 12)), ...decl("border-color", t.border));
+    if (state === "disabled") r.push(...decl("color", t.mutedText));
+  }
+  if (state === "focus" && t.accent) r.push(`outline:2px solid ${t.accent}`);
+  return r;
+}
+
+const ROLES = {
+  input: (t, s) =>
+    s === "base" ? [...decl("font-family", t.font), ...decl("color", t.text), ...decl("background", t.surface), ...decl("border-color", t.border), ...decl("border-radius", t.radius)]
+    : s === "hover" ? decl("border-color", t.mutedText)
+    : s === "focus" && t.accent ? [`outline:2px solid ${t.accent}`, `border-color:${t.accent}`]
+    : [],
+  surface: (t, s) =>
+    s === "base" ? [...decl("background", t.surface), ...decl("color", t.text), ...decl("border-color", t.border), ...decl("box-shadow", t.shadow), ...decl("border-radius", t.radius), ...decl("font-family", t.font)] : [],
+  text: (t, s) => (s === "base" ? [...decl("color", t.text), ...decl("font-family", t.font)] : []),
+  mutedText: (t, s) => (s === "base" ? [...decl("color", t.mutedText), ...decl("font-family", t.font)] : []),
+  heading: (t, s) => (s === "base" ? [...decl("font-family", t.headingFont || t.font), ...decl("color", t.text)] : []),
+  code: (t, s) => (s === "base" ? decl("color", t.text) : []),
+  well: (t, s) =>
+    s === "base" ? [...decl("background", t.background), ...(t.border ? [`border:1px solid ${t.border}`] : []), ...decl("border-radius", t.radius)] : [],
+  overlay: (t, s) => (s === "base" ? decl("background", t.overlay) : []),
+  close: (t, s) =>
+    s === "base" ? [...decl("background", t.surface), ...decl("color", t.mutedText), ...decl("border-color", t.border)]
+    : s === "hover" ? decl("background", neutral(t, 7))
+    : s === "focus" && t.accent ? [`outline:2px solid ${t.accent}`] : [],
+};
+
+/** Token declarations for `role` ("button.primary", "input", "surface", ...) in `state`. */
+export function tokenRules(theme, role, state = "base") {
+  if (!themed(theme)) return [];
+  if (role.startsWith("button.")) return button(theme.tokens, role.slice(7), state);
+  return ROLES[role] ? ROLES[role](theme.tokens, state) : [];
+}
+
+/** Token declarations for every applicable state, in order. */
+export function tokenRulesFor(theme, role, active) {
+  return stateList(active).flatMap((s) => tokenRules(theme, role, s));
+}
+
+/** A page's explicit part declarations: each name general to specific, base then states. */
+export function partRules(theme, names, active) {
+  if (!themed(theme) || !names?.length) return [];
+  const states = stateList(active);
+  const r = [];
+  for (const name of names) {
+    const part = theme.parts[name];
+    if (!part) continue;
+    for (const s of states) for (const [prop, value] of Object.entries(part[s] || {})) r.push(`${prop}:${value}`);
+  }
+  return r;
+}
+
+/** Mark a themed element with its part names, so the contract can be inspected. */
+export function markParts(el, theme, names) {
+  if (themed(theme) && names?.length) el.setAttribute("data-clay-part", names.join(" "));
+}
+
+// A floor goes on after the theme: first the plain floor, then the larger of the floor
+// and what the theme asked for. When the theme's value cannot go inside max() (a keyword
+// such as auto), the browser drops that second declaration and the plain floor stands.
+export function floorRules(rules, prop, px) {
+  if (!px) return [];
+  const last = [...rules].reverse().find((r) => r.startsWith(`${prop}:`));
+  const value = last ? last.slice(prop.length + 1).trim() : "";
+  const out = [`${prop}:${px}px`];
+  if (value && value !== `${px}px`) out.push(`${prop}:max(${px}px, ${value})`);
+  return out;
+}
+
+export function heightFloor(rules, narrow) {
+  return narrow ? floorRules(rules, "min-height", 44) : [];
+}