@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/src/showcase.tsx

@@ -0,0 +1,120 @@
+import type { ReactNode } from "react";
+import { componentRoot, cx } from "./internal.js";
+
+/** Framed product screenshot or illustration for heroes and feature sections. */
+export function MockWindow({
+  id,
+  className,
+  label,
+  address,
+  variant = "browser",
+  children,
+}: {
+  id?: string;
+  className?: string;
+  /** Accessible description of what the mock shows. */
+  label: string;
+  /** Optional URL or file name shown in the title bar. */
+  address?: string;
+  /** browser: title bar with dots. app: title bar without dots. plain: no chrome. phone: a portrait handset frame. */
+  variant?: "browser" | "app" | "plain" | "phone";
+  children: ReactNode;
+}) {
+  return (
+    <figure
+      id={id}
+      className={cx("m-mock-window", className)}
+      data-variant={variant === "browser" ? undefined : variant}
+      aria-label={label}
+      {...componentRoot("MockWindow")}
+    >
+      {variant !== "plain" && variant !== "phone" && (
+        <div className="m-mock-bar" aria-hidden="true">
+          <span className="m-mock-dots">
+            <i />
+            <i />
+            <i />
+          </span>
+          {address && <span className="m-mock-address">{address}</span>}
+        </div>
+      )}
+      <div className="m-mock-body">{children}</div>
+    </figure>
+  );
+}
+
+export interface ChatMessage {
+  from: "user" | "assistant";
+  content: ReactNode;
+}
+
+/** Static, illustrative chat conversation for marketing a conversational product. */
+export function ChatPreview({
+  id,
+  className,
+  title,
+  status,
+  messages,
+  typing = false,
+  suggestions = [],
+  placeholder = "Type a message…",
+  assistantName = "Assistant",
+}: {
+  id?: string;
+  className?: string;
+  title: string;
+  status?: string;
+  messages: ChatMessage[];
+  typing?: boolean;
+  suggestions?: string[];
+  placeholder?: string;
+  assistantName?: string;
+}) {
+  return (
+    <figure
+      id={id}
+      className={cx("m-chat-preview", className)}
+      aria-label={`${title} conversation`}
+      {...componentRoot("ChatPreview")}
+    >
+      <header>
+        <span className="m-chat-avatar" aria-hidden="true" />
+        <span>
+          <strong>{title}</strong>
+          {status && <small>{status}</small>}
+        </span>
+      </header>
+      <ol className="m-chat-log">
+        {messages.map((message, i) => (
+          <li key={i} data-from={message.from}>
+            <span className="m-sr-only">
+              {message.from === "user" ? "Visitor" : assistantName}:
+            </span>
+            <div className="m-chat-bubble">{message.content}</div>
+          </li>
+        ))}
+        {typing && (
+          <li data-from="assistant">
+            <span className="m-chat-typing">
+              <span className="m-sr-only">{assistantName} is typing</span>
+              <i aria-hidden="true" />
+              <i aria-hidden="true" />
+              <i aria-hidden="true" />
+            </span>
+          </li>
+        )}
+      </ol>
+      {suggestions.length > 0 && (
+        <ul className="m-chat-suggestions" aria-label="Suggested replies">
+          {suggestions.map((s) => (
+            <li key={s}>{s}</li>
+          ))}
+        </ul>
+      )}
+      <div className="m-chat-composer" aria-hidden="true">
+        <span>{placeholder}</span>
+        <span className="m-chat-send" />
+      </div>
+    </figure>
+  );
+}

package/src/tokens.css

@@ -0,0 +1,449 @@
+/* Mortar tokens, in three layers.
+   1. Brand contract: a brand declares --m-brand-l-* (light), --m-brand-d-*
+      (dark) and --m-brand-font / --m-brand-font-heading, and nothing else.
+      Every value is optional; omitted surfaces keep the defaults below.
+   2. Appearance: resolves the contract into the live --m-* tokens and into the
+      --m-inv-* tokens (the opposite appearance, used by inverse bands), so
+      dark mode and inverse sections never need brand-specific CSS. Hover and
+      active mix towards ink, which keeps on-primary contrast at least as high
+      as on the primary itself; selected tints the paper. --m-accent-fill is
+      an image (the brand's accent gradient, or flat accent) for opt-in
+      accent buttons and bands, painted over background-color: --m-accent.
+   3. Scales: type, space, radius, sizing, density and stacking.
+   Status colours deliberately differ from brand colours. A light container
+   inside a dark document resolves light. */
+
+/* 1. Brand contract */
+
+/* Every brand starts from an empty contract, so a brand never inherits values
+   from an outer one. Zero specificity: any brand rule wins, in any order. */
+:where([data-mortar-brand]) {
+  --m-brand-l-primary: initial;
+  --m-brand-l-primary-hover: initial;
+  --m-brand-l-primary-active: initial;
+  --m-brand-l-on-primary: initial;
+  --m-brand-l-accent: initial;
+  --m-brand-l-on-accent: initial;
+  --m-brand-l-focus: initial;
+  --m-brand-l-link: initial;
+  --m-brand-l-selected: initial;
+  --m-brand-l-paper: initial;
+  --m-brand-l-surface: initial;
+  --m-brand-l-sunken: initial;
+  --m-brand-l-accent-gradient: initial;
+  --m-brand-d-primary: initial;
+  --m-brand-d-primary-hover: initial;
+  --m-brand-d-primary-active: initial;
+  --m-brand-d-on-primary: initial;
+  --m-brand-d-accent: initial;
+  --m-brand-d-on-accent: initial;
+  --m-brand-d-focus: initial;
+  --m-brand-d-link: initial;
+  --m-brand-d-selected: initial;
+  --m-brand-d-paper: initial;
+  --m-brand-d-surface: initial;
+  --m-brand-d-sunken: initial;
+  --m-brand-d-accent-gradient: initial;
+  --m-brand-font: initial;
+  --m-brand-font-heading: initial;
+}
+/* Neutral: the appearance fallbacks supply its colours; it keeps its tuned
+   interaction states. */
+:root:not([data-mortar-brand]),
+[data-mortar-brand="neutral"] {
+  --m-brand-l-primary-hover: #29292c;
+  --m-brand-l-primary-active: #3a3a3c;
+  --m-brand-l-selected: #f2f2f4;
+  --m-brand-d-primary-hover: #e5e5ea;
+  --m-brand-d-primary-active: #c7c7cc;
+  --m-brand-d-selected: #1c1c1e;
+}
+[data-mortar-brand="green"] {
+  --m-brand-l-primary: #047857;
+  --m-brand-l-primary-hover: #065f46;
+  --m-brand-l-primary-active: #064e3b;
+  --m-brand-l-on-primary: #ffffff;
+  --m-brand-l-selected: #e6f5ed;
+  --m-brand-d-primary: #6ee7b7;
+  --m-brand-d-primary-hover: #a7f3d0;
+  --m-brand-d-primary-active: #34d399;
+  --m-brand-d-on-primary: #022c22;
+  --m-brand-d-focus: #6ee7b7;
+  --m-brand-d-link: #6ee7b7;
+  --m-brand-d-selected: #062d23;
+}
+
+/* 2. Appearance. A branded element without its own appearance resolves in
+   light, or in dark inside a dark-appearance ancestor. */
+:root,
+[data-mortar-appearance="light"],
+[data-mortar-brand]:not([data-mortar-appearance]) {
+  --m-paper: var(--m-brand-l-paper, #ffffff);
+  --m-surface: var(--m-brand-l-surface, #ffffff);
+  --m-sunken: var(--m-brand-l-sunken, #f5f5f7);
+  --m-line: #e5e5ea;
+  --m-line-strong: #8b8b90;
+  --m-ink: #000000;
+  --m-secondary: #3a3a3c;
+  --m-muted: #6e6e73;
+  --m-success: #1f7a36;
+  --m-warning: #945700;
+  --m-danger: #c70014;
+  --m-info: #0060c7;
+  --m-on-feedback: #ffffff;
+  --m-code-bg: #000000;
+  --m-code-line: rgb(255 255 255 / 0.12);
+  --m-code-ink: #f5f5f7;
+  --m-code-dim: #8b8b90;
+  --m-float: 0 12px 32px -12px rgb(0 0 0 / 0.14);
+  --m-scrim: rgb(0 0 0 / 0.5);
+  --m-swatch-ring: rgb(0 0 0 / 0.12);
+  --m-primary: var(--m-brand-l-primary, #000000);
+  --m-primary-hover: var(
+    --m-brand-l-primary-hover,
+    color-mix(in oklab, var(--m-primary) 85%, var(--m-ink))
+  );
+  --m-primary-active: var(
+    --m-brand-l-primary-active,
+    color-mix(in oklab, var(--m-primary) 72%, var(--m-ink))
+  );
+  --m-on-primary: var(--m-brand-l-on-primary, #ffffff);
+  --m-accent: var(--m-brand-l-accent, var(--m-primary));
+  --m-on-accent: var(--m-brand-l-on-accent, var(--m-on-primary));
+  --m-accent-fill: var(
+    --m-brand-l-accent-gradient,
+    linear-gradient(var(--m-accent), var(--m-accent))
+  );
+  --m-focus: var(--m-brand-l-focus, var(--m-primary));
+  --m-link: var(--m-brand-l-link, var(--m-primary));
+  --m-selected: var(
+    --m-brand-l-selected,
+    color-mix(in oklab, var(--m-primary) 8%, var(--m-paper))
+  );
+  --m-inv-color-scheme: dark;
+  --m-inv-paper: var(--m-brand-d-paper, #000000);
+  --m-inv-surface: var(--m-brand-d-surface, #1c1c1e);
+  --m-inv-sunken: var(--m-brand-d-sunken, #1c1c1e);
+  --m-inv-line: #3a3a3c;
+  --m-inv-line-strong: #727278;
+  --m-inv-ink: #f5f5f7;
+  --m-inv-secondary: #c7c7cc;
+  --m-inv-muted: #a1a1a6;
+  --m-inv-success: #30d158;
+  --m-inv-warning: #ffd60a;
+  --m-inv-danger: #ff6961;
+  --m-inv-info: #5aa9ff;
+  --m-inv-on-feedback: #000000;
+  --m-inv-primary: var(--m-brand-d-primary, #ffffff);
+  --m-inv-primary-hover: var(
+    --m-brand-d-primary-hover,
+    color-mix(in oklab, var(--m-inv-primary) 85%, var(--m-inv-ink))
+  );
+  --m-inv-primary-active: var(
+    --m-brand-d-primary-active,
+    color-mix(in oklab, var(--m-inv-primary) 72%, var(--m-inv-ink))
+  );
+  --m-inv-on-primary: var(--m-brand-d-on-primary, #000000);
+  --m-inv-accent: var(--m-brand-d-accent, var(--m-inv-primary));
+  --m-inv-on-accent: var(--m-brand-d-on-accent, var(--m-inv-on-primary));
+  --m-inv-accent-fill: var(
+    --m-brand-d-accent-gradient,
+    linear-gradient(var(--m-inv-accent), var(--m-inv-accent))
+  );
+  --m-inv-focus: var(--m-brand-d-focus, var(--m-inv-primary));
+  --m-inv-link: var(--m-brand-d-link, var(--m-inv-ink));
+  --m-inv-selected: var(
+    --m-brand-d-selected,
+    color-mix(in oklab, var(--m-inv-primary) 10%, var(--m-inv-paper))
+  );
+}
+[data-mortar] {
+  color-scheme: light;
+}
+[data-mortar-appearance="dark"],
+[data-mortar-appearance="dark"]
+  [data-mortar-brand]:not([data-mortar-appearance]) {
+  color-scheme: dark;
+  --m-paper: var(--m-brand-d-paper, #000000);
+  --m-surface: var(--m-brand-d-surface, #0e0e10);
+  --m-sunken: var(--m-brand-d-sunken, #1c1c1e);
+  --m-line: #29292c;
+  --m-line-strong: #727278;
+  --m-ink: #f5f5f7;
+  --m-secondary: #c7c7cc;
+  --m-muted: #98989d;
+  --m-success: #30d158;
+  --m-warning: #ffd60a;
+  --m-danger: #ff6961;
+  --m-info: #5aa9ff;
+  --m-on-feedback: #000000;
+  --m-code-bg: #0e0e10;
+  --m-code-line: rgb(255 255 255 / 0.1);
+  --m-float: none;
+  --m-swatch-ring: rgb(255 255 255 / 0.24);
+  --m-primary: var(--m-brand-d-primary, #ffffff);
+  --m-primary-hover: var(
+    --m-brand-d-primary-hover,
+    color-mix(in oklab, var(--m-primary) 85%, var(--m-ink))
+  );
+  --m-primary-active: var(
+    --m-brand-d-primary-active,
+    color-mix(in oklab, var(--m-primary) 72%, var(--m-ink))
+  );
+  --m-on-primary: var(--m-brand-d-on-primary, #000000);
+  --m-accent: var(--m-brand-d-accent, var(--m-primary));
+  --m-on-accent: var(--m-brand-d-on-accent, var(--m-on-primary));
+  --m-accent-fill: var(
+    --m-brand-d-accent-gradient,
+    linear-gradient(var(--m-accent), var(--m-accent))
+  );
+  --m-focus: var(--m-brand-d-focus, var(--m-primary));
+  --m-link: var(--m-brand-d-link, var(--m-ink));
+  --m-selected: var(
+    --m-brand-d-selected,
+    color-mix(in oklab, var(--m-primary) 10%, var(--m-paper))
+  );
+  --m-inv-color-scheme: light;
+  --m-inv-paper: var(--m-brand-l-paper, #f5f5f7);
+  --m-inv-surface: var(--m-brand-l-surface, #ffffff);
+  --m-inv-sunken: var(--m-brand-l-sunken, #ffffff);
+  --m-inv-line: #d1d1d6;
+  --m-inv-line-strong: #8b8b90;
+  --m-inv-ink: #000000;
+  --m-inv-secondary: #3a3a3c;
+  --m-inv-muted: #636366;
+  --m-inv-success: #1f7a36;
+  --m-inv-warning: #945700;
+  --m-inv-danger: #c70014;
+  --m-inv-info: #0060c7;
+  --m-inv-on-feedback: #ffffff;
+  --m-inv-primary: var(--m-brand-l-primary, #000000);
+  --m-inv-primary-hover: var(
+    --m-brand-l-primary-hover,
+    color-mix(in oklab, var(--m-inv-primary) 85%, var(--m-inv-ink))
+  );
+  --m-inv-primary-active: var(
+    --m-brand-l-primary-active,
+    color-mix(in oklab, var(--m-inv-primary) 72%, var(--m-inv-ink))
+  );
+  --m-inv-on-primary: var(--m-brand-l-on-primary, #ffffff);
+  --m-inv-accent: var(--m-brand-l-accent, var(--m-inv-primary));
+  --m-inv-on-accent: var(--m-brand-l-on-accent, var(--m-inv-on-primary));
+  --m-inv-accent-fill: var(
+    --m-brand-l-accent-gradient,
+    linear-gradient(var(--m-inv-accent), var(--m-inv-accent))
+  );
+  --m-inv-focus: var(--m-brand-l-focus, var(--m-inv-primary));
+  --m-inv-link: var(--m-brand-l-link, var(--m-inv-primary));
+  --m-inv-selected: var(
+    --m-brand-l-selected,
+    color-mix(in oklab, var(--m-inv-primary) 8%, var(--m-inv-paper))
+  );
+}
+/* Before a ThemeProvider writes data-mortar-appearance (server rendering, or
+   no JavaScript), follow the operating system so dark users see no light
+   flash. Set data-mortar-appearance="light" on the root to opt out. Keep this
+   block identical to the dark one above (tests/theming.test.mjs checks). */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mortar-appearance]),
+  :root:not([data-mortar-appearance])
+    [data-mortar-brand]:not([data-mortar-appearance]) {
+    color-scheme: dark;
+    --m-paper: var(--m-brand-d-paper, #000000);
+    --m-surface: var(--m-brand-d-surface, #0e0e10);
+    --m-sunken: var(--m-brand-d-sunken, #1c1c1e);
+    --m-line: #29292c;
+    --m-line-strong: #727278;
+    --m-ink: #f5f5f7;
+    --m-secondary: #c7c7cc;
+    --m-muted: #98989d;
+    --m-success: #30d158;
+    --m-warning: #ffd60a;
+    --m-danger: #ff6961;
+    --m-info: #5aa9ff;
+    --m-on-feedback: #000000;
+    --m-code-bg: #0e0e10;
+    --m-code-line: rgb(255 255 255 / 0.1);
+    --m-float: none;
+    --m-swatch-ring: rgb(255 255 255 / 0.24);
+    --m-primary: var(--m-brand-d-primary, #ffffff);
+    --m-primary-hover: var(
+      --m-brand-d-primary-hover,
+      color-mix(in oklab, var(--m-primary) 85%, var(--m-ink))
+    );
+    --m-primary-active: var(
+      --m-brand-d-primary-active,
+      color-mix(in oklab, var(--m-primary) 72%, var(--m-ink))
+    );
+    --m-on-primary: var(--m-brand-d-on-primary, #000000);
+    --m-accent: var(--m-brand-d-accent, var(--m-primary));
+    --m-on-accent: var(--m-brand-d-on-accent, var(--m-on-primary));
+    --m-accent-fill: var(
+      --m-brand-d-accent-gradient,
+      linear-gradient(var(--m-accent), var(--m-accent))
+    );
+    --m-focus: var(--m-brand-d-focus, var(--m-primary));
+    --m-link: var(--m-brand-d-link, var(--m-ink));
+    --m-selected: var(
+      --m-brand-d-selected,
+      color-mix(in oklab, var(--m-primary) 10%, var(--m-paper))
+    );
+    --m-inv-color-scheme: light;
+    --m-inv-paper: var(--m-brand-l-paper, #f5f5f7);
+    --m-inv-surface: var(--m-brand-l-surface, #ffffff);
+    --m-inv-sunken: var(--m-brand-l-sunken, #ffffff);
+    --m-inv-line: #d1d1d6;
+    --m-inv-line-strong: #8b8b90;
+    --m-inv-ink: #000000;
+    --m-inv-secondary: #3a3a3c;
+    --m-inv-muted: #636366;
+    --m-inv-success: #1f7a36;
+    --m-inv-warning: #945700;
+    --m-inv-danger: #c70014;
+    --m-inv-info: #0060c7;
+    --m-inv-on-feedback: #ffffff;
+    --m-inv-primary: var(--m-brand-l-primary, #000000);
+    --m-inv-primary-hover: var(
+      --m-brand-l-primary-hover,
+      color-mix(in oklab, var(--m-inv-primary) 85%, var(--m-inv-ink))
+    );
+    --m-inv-primary-active: var(
+      --m-brand-l-primary-active,
+      color-mix(in oklab, var(--m-inv-primary) 72%, var(--m-inv-ink))
+    );
+    --m-inv-on-primary: var(--m-brand-l-on-primary, #ffffff);
+    --m-inv-accent: var(--m-brand-l-accent, var(--m-inv-primary));
+    --m-inv-on-accent: var(--m-brand-l-on-accent, var(--m-inv-on-primary));
+    --m-inv-accent-fill: var(
+      --m-brand-l-accent-gradient,
+      linear-gradient(var(--m-inv-accent), var(--m-inv-accent))
+    );
+    --m-inv-focus: var(--m-brand-l-focus, var(--m-inv-primary));
+    --m-inv-link: var(--m-brand-l-link, var(--m-inv-primary));
+    --m-inv-selected: var(
+      --m-brand-l-selected,
+      color-mix(in oklab, var(--m-inv-primary) 8%, var(--m-inv-paper))
+    );
+  }
+  :root:not([data-mortar-appearance]) [data-mortar] {
+    color-scheme: dark;
+  }
+}
+
+/* 3. Scales. Appearance-independent; override on :root or any container to
+   retheme shape and rhythm. Density adjusts the sizing scale below. */
+:root {
+  --m-font:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
+    sans-serif;
+  /* Headings and component titles. Unset by default, so they keep the font
+     they inherit (the body's --m-font); a brand's fonts.heading
+     (--m-brand-font-heading) wins over it. */
+  --m-font-heading: initial;
+  --m-mono: "SF Mono", ui-monospace, Menlo, monospace;
+  --m-weight-regular: 400;
+  --m-weight-medium: 500;
+  --m-weight-semibold: 600;
+  --m-weight-bold: 700;
+  --m-tracking-display: -0.04em;
+  --m-tracking-heading: -0.02em;
+  --m-tracking-body: normal;
+  --m-tracking-caps: 0.04em;
+  --m-leading-display: 1.1;
+  --m-leading-heading: 1.3;
+  --m-leading-body: 1.6;
+  --m-space-1: 4px;
+  --m-space-2: 8px;
+  --m-space-3: 12px;
+  --m-space-4: 16px;
+  --m-space-6: 24px;
+  --m-space-8: 32px;
+  --m-space-10: 40px;
+  --m-space-12: 48px;
+  --m-radius-xs: 2px;
+  --m-radius-sm: 4px;
+  --m-radius: 8px;
+  --m-radius-lg: 12px;
+  --m-radius-xl: 16px;
+  --m-radius-full: 999px;
+  --m-control: 36px;
+  --m-pad: 14px;
+  --m-font-size: 14px;
+  --m-row-pad: 14px;
+  --m-icon: 16px;
+  --m-focus-offset: 3px;
+  /* Minimum hit size: 0 for fine pointers, 44px for coarse pointers (below). */
+  --m-touch-target: 0px;
+  /* Stacking scale: sticky chrome < dialogs < popovers < toasts < skip link. */
+  --m-z-sticky: 30;
+  --m-z-overlay: 100;
+  --m-z-popover: 110;
+  --m-z-toast: 130;
+  --m-z-skip: 140;
+}
+[data-mortar-density="comfortable"] {
+  --m-control: 36px;
+  --m-pad: 14px;
+  --m-font-size: 14px;
+  --m-row-pad: 14px;
+}
+[data-mortar-density="compact"] {
+  --m-control: 30px;
+  --m-pad: 10px;
+  --m-font-size: 13px;
+  --m-row-pad: 10px;
+}
+[data-mortar-density="spacious"] {
+  --m-control: 44px;
+  --m-pad: 18px;
+  --m-font-size: 15px;
+  --m-row-pad: 18px;
+}
+@media (pointer: coarse) {
+  [data-mortar] {
+    --m-control: 44px;
+    --m-touch-target: 44px;
+  }
+}
+/* Inverse tone: any Mortar section root with data-tone="inverse" (sections, CTA,
+   banner, hero, featured pricing plan, bento item) flips appearance locally. */
+[data-tone="inverse"] {
+  color-scheme: var(--m-inv-color-scheme);
+  --m-line-strong: var(--m-inv-line-strong);
+  --m-primary-active: var(--m-inv-primary-active);
+  --m-selected: var(--m-inv-selected);
+  --m-success: var(--m-inv-success);
+  --m-warning: var(--m-inv-warning);
+  --m-info: var(--m-inv-info);
+  --m-danger: var(--m-inv-danger);
+  --m-on-feedback: var(--m-inv-on-feedback);
+  --m-paper: var(--m-inv-paper);
+  --m-surface: var(--m-inv-surface);
+  --m-sunken: var(--m-inv-sunken);
+  --m-line: var(--m-inv-line);
+  --m-ink: var(--m-inv-ink);
+  --m-secondary: var(--m-inv-secondary);
+  --m-muted: var(--m-inv-muted);
+  --m-primary: var(--m-inv-primary);
+  --m-primary-hover: var(--m-inv-primary-hover);
+  --m-on-primary: var(--m-inv-on-primary);
+  --m-accent: var(--m-inv-accent);
+  --m-on-accent: var(--m-inv-on-accent);
+  --m-accent-fill: var(--m-inv-accent-fill);
+  --m-focus: var(--m-inv-focus);
+  --m-link: var(--m-inv-link);
+  --m-band: var(--m-inv-paper);
+}
+
+/* Accent wash for the accent hover and active states: the on-accent colour
+   with its lightness flipped to 0 or 1, so the fill moves away from its text.
+   Declared wherever --m-on-accent changes (appearance, brand, inverse band).
+   Browsers without relative colours leave it unset and keep the plain fill. */
+@supports (color: oklch(from white round(1 - l, 1) 0 0)) {
+  :root,
+  [data-mortar-appearance],
+  [data-mortar-brand],
+  [data-tone="inverse"] {
+    --m-accent-wash: oklch(from var(--m-on-accent) round(1 - l, 1) 0 0);
+  }
+}