@hraness/design-kit 0.31.1

package/src/palettes.ts

@@ -0,0 +1,161 @@
+import type { ConcreteDesignTheme } from "./appearance.js";
+import { mixPaletteColor, paletteContrast, readablePaletteColor } from "./palette-color.js";
+
+export const designPalettes = ["catppuccin", "gruvbox", "rose-pine", "tokyo-night", "paper"] as const;
+export type DesignPalette = (typeof designPalettes)[number];
+
+export const designPaletteLabels: Readonly<Record<DesignPalette, string>> = {
+  catppuccin: "Catppuccin",
+  gruvbox: "Gruvbox",
+  "rose-pine": "Rosé Pine",
+  "tokyo-night": "Tokyo Night",
+  paper: "Paper",
+};
+
+export function isDesignPalette(value: unknown): value is DesignPalette {
+  return typeof value === "string" && designPalettes.some((palette) => palette === value);
+}
+
+interface PaletteSource {
+  readonly background: string;
+  readonly surface: string;
+  readonly raised: string;
+  readonly hover: string;
+  readonly text: string;
+  readonly muted: string;
+  readonly border: string;
+  readonly primary: string;
+  readonly danger: string;
+  readonly warning: string;
+  readonly success: string;
+  readonly info: string;
+  readonly violet: string;
+  readonly rose: string;
+}
+
+/** Official palette seeds; provenance and application adaptations are in PALETTES.md. */
+export const designPaletteSources: Readonly<Record<DesignPalette, Readonly<Record<ConcreteDesignTheme, PaletteSource>>>> = {
+  paper: {
+    light: {
+      background: "#f8f7f4", surface: "#fffefa", raised: "#fffefa", hover: "#ebe8e3",
+      text: "#1c1917", muted: "#6f6962", border: "#8b8278", primary: "#1f5eea",
+      danger: "#b23c34", warning: "#a65f00", success: "#26814d", info: "#1f5eea",
+      violet: "#7959a5", rose: "#a44b65",
+    },
+    dark: {
+      background: "#12100f", surface: "#1d1a18", raised: "#211d1a", hover: "#292522",
+      text: "#f5f2ed", muted: "#aaa29a", border: "#827a72", primary: "#8fb0ff",
+      danger: "#ef8c82", warning: "#efae55", success: "#5fc98b", info: "#8fb0ff",
+      violet: "#b7a0dc", rose: "#db91aa",
+    },
+  },
+  catppuccin: {
+    dark: {
+      background: "#1e1e2e", surface: "#181825", raised: "#313244", hover: "#45475a",
+      text: "#cdd6f4", muted: "#a6adc8", border: "#7f849c", primary: "#89b4fa",
+      danger: "#f38ba8", warning: "#f9e2af", success: "#a6e3a1", info: "#89dceb",
+      violet: "#cba6f7", rose: "#f5c2e7",
+    },
+    light: {
+      background: "#eff1f5", surface: "#e6e9ef", raised: "#dce0e8", hover: "#ccd0da",
+      text: "#4c4f69", muted: "#6c6f85", border: "#7c7f93", primary: "#1e66f5",
+      danger: "#d20f39", warning: "#df8e1d", success: "#40a02b", info: "#179299",
+      violet: "#8839ef", rose: "#ea76cb",
+    },
+  },
+  gruvbox: {
+    dark: {
+      background: "#282828", surface: "#1d2021", raised: "#3c3836", hover: "#504945",
+      text: "#ebdbb2", muted: "#bdae93", border: "#928374", primary: "#83a598",
+      danger: "#fb4934", warning: "#fabd2f", success: "#b8bb26", info: "#8ec07c",
+      violet: "#d3869b", rose: "#fe8019",
+    },
+    light: {
+      background: "#fbf1c7", surface: "#f9f5d7", raised: "#ebdbb2", hover: "#d5c4a1",
+      text: "#3c3836", muted: "#665c54", border: "#7c6f64", primary: "#076678",
+      danger: "#9d0006", warning: "#b57614", success: "#79740e", info: "#427b58",
+      violet: "#8f3f71", rose: "#af3a03",
+    },
+  },
+  "rose-pine": {
+    dark: {
+      background: "#191724", surface: "#1f1d2e", raised: "#26233a", hover: "#403d52",
+      text: "#e0def4", muted: "#908caa", border: "#908caa", primary: "#c4a7e7",
+      danger: "#eb6f92", warning: "#f6c177", success: "#9ccfd8", info: "#ebbcba",
+      violet: "#c4a7e7", rose: "#ebbcba",
+    },
+    light: {
+      background: "#faf4ed", surface: "#fffaf3", raised: "#f2e9e1", hover: "#dfdad9",
+      text: "#575279", muted: "#797593", border: "#797593", primary: "#907aa9",
+      danger: "#b4637a", warning: "#ea9d34", success: "#286983", info: "#56949f",
+      violet: "#907aa9", rose: "#d7827e",
+    },
+  },
+  "tokyo-night": {
+    dark: {
+      background: "#1a1b26", surface: "#16161e", raised: "#24283b", hover: "#292e42",
+      text: "#c0caf5", muted: "#a9b1d6", border: "#737aa2", primary: "#7aa2f7",
+      danger: "#f7768e", warning: "#e0af68", success: "#9ece6a", info: "#7dcfff",
+      violet: "#bb9af7", rose: "#ff9e64",
+    },
+    light: {
+      background: "#e1e2e7", surface: "#d0d5e3", raised: "#c4c8da", hover: "#b7c1e3",
+      text: "#3760bf", muted: "#6172b0", border: "#6172b0", primary: "#2e7de9",
+      danger: "#f52a65", warning: "#8c6c3e", success: "#587539", info: "#007197",
+      violet: "#9854f1", rose: "#b15c00",
+    },
+  },
+};
+
+function createPalette(source: PaletteSource, mode: ConcreteDesignTheme) {
+  const surfaces = [source.background, source.surface, source.raised, source.hover];
+  const endpoint = mode === "dark" ? "#ffffff" : "#000000";
+  const foreground = readablePaletteColor(source.text, endpoint, surfaces, 7);
+  const muted = readablePaletteColor(source.muted, endpoint, surfaces, 4.6);
+  const status = (seed: string) => {
+    const soft = mixPaletteColor(source.background, seed, 0.12);
+    const color = readablePaletteColor(seed, endpoint, [...surfaces, soft], 4.6);
+    const onColor = paletteContrast(color, source.background) >= 4.5 ? source.background : endpoint === "#ffffff" ? "#000000" : "#ffffff";
+    return { color, foreground: onColor, soft };
+  };
+  const primary = status(source.primary);
+  const danger = status(source.danger);
+  const warning = status(source.warning);
+  const success = status(source.success);
+  const info = status(source.info);
+  return Object.freeze({
+    background: source.background, foreground, muted, faint: muted,
+    grid: source.raised, line: source.hover,
+    controlBorder: readablePaletteColor(source.border, endpoint, surfaces, 3.1),
+    surface: source.surface, surfaceRaised: source.raised, surfaceHover: source.hover,
+    card: source.surface, cardForeground: foreground,
+    popover: source.raised, popoverForeground: foreground,
+    primary: primary.color, primaryForeground: primary.foreground, primarySoft: primary.soft,
+    secondary: source.raised, secondaryForeground: foreground,
+    accent: primary.soft, accentForeground: foreground,
+    focus: primary.color, scrim: mode === "dark" ? "#000000b8" : "#00000070",
+    disabled: source.raised, disabledForeground: muted,
+    inverse: foreground, inverseForeground: source.background,
+    danger: danger.color, dangerForeground: danger.foreground, dangerSoft: danger.soft,
+    warning: warning.color, warningForeground: warning.foreground, warningSoft: warning.soft,
+    success: success.color, successForeground: success.foreground, successSoft: success.soft,
+    info: info.color, infoForeground: info.foreground, infoSoft: info.soft,
+    chart1: readablePaletteColor(source.rose, endpoint, surfaces, 4.6),
+    chart2: success.color, chart3: info.color, chart4: warning.color,
+    chart5: readablePaletteColor(source.violet, endpoint, surfaces, 4.6),
+  });
+}
+
+export type SemanticPalette = ReturnType<typeof createPalette>;
+
+/** The same opaque values drive compiled StyleX themes, metadata, and contrast tests. */
+export const paletteColors: Readonly<Record<DesignPalette, Readonly<Record<ConcreteDesignTheme, SemanticPalette>>>> = Object.freeze({
+  paper: Object.freeze({
+    light: Object.freeze({ ...createPalette(designPaletteSources.paper.light, "light"), grid: "#dfdcd6", line: "#b9b3ab", secondary: "#ebe8e3" }),
+    dark: Object.freeze({ ...createPalette(designPaletteSources.paper.dark, "dark"), grid: "#302b27", line: "#514a44", secondary: "#292522" }),
+  }),
+  catppuccin: Object.freeze({ light: createPalette(designPaletteSources.catppuccin.light, "light"), dark: createPalette(designPaletteSources.catppuccin.dark, "dark") }),
+  gruvbox: Object.freeze({ light: createPalette(designPaletteSources.gruvbox.light, "light"), dark: createPalette(designPaletteSources.gruvbox.dark, "dark") }),
+  "rose-pine": Object.freeze({ light: createPalette(designPaletteSources["rose-pine"].light, "light"), dark: createPalette(designPaletteSources["rose-pine"].dark, "dark") }),
+  "tokyo-night": Object.freeze({ light: createPalette(designPaletteSources["tokyo-night"].light, "light"), dark: createPalette(designPaletteSources["tokyo-night"].dark, "dark") }),
+});

package/src/paper-theme.css

@@ -0,0 +1,244 @@
+/* @hraness/design-kit paper-theme.css, portable contract 1.
+ * Generated by scripts/generate-paper-theme.ts from src/palettes.ts.
+ * Opt in with data-hraness-theme="paper". Import after existing theme rules.
+ * No imports, asset requests, resets, layout recipes, or runtime dependencies.
+ * Appearance uses inherited color-scheme; set data-theme on the boundary for
+ * an explicit island. A root without a mode follows the operating system.
+ * A non-paper data-palette on the boundary retains its selected colors.
+ * Requires CSS light-dark() (Chrome 123+, Firefox 120+, Safari 17.5+).
+ */
+
+[data-hraness-theme="paper"] {
+  --font-text: "Nebula Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-heading: var(--font-text);
+  --font-sans: var(--font-text);
+  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+  --ui-font-sans: var(--font-text);
+  --ui-font-heading: var(--font-heading);
+  --ui-font-mono: var(--font-mono);
+  --text-body: 1rem;
+  --text-caption: .75rem;
+  --text-label: .875rem;
+  --font-weight-regular: 400;
+  --font-weight-medium: 550;
+  --font-weight-bold: 700;
+  --radius-sm: .375rem;
+  --radius-md: .625rem;
+  --radius-lg: .875rem;
+  --ui-radius: .875rem;
+  --control-radius: .625rem;
+  --hraness-paper-heading-size: clamp(1.75rem, 3vw, 2.375rem);
+  --hraness-paper-section-heading-size: var(--hraness-type-h2-size, clamp(1.75rem, 1.45rem + .9vw, 2.125rem));
+  --hraness-paper-summary-size: 1rem;
+  --hraness-paper-heading-leading: 1.15;
+  --hraness-paper-heading-tracking: -.035em;
+  --hraness-marketing-measure: 80rem;
+  --hraness-marketing-copy-measure: 40rem;
+  --hraness-marketing-prose-measure: 68ch;
+  --hraness-marketing-gutter: clamp(1.25rem, 4vw, 3rem);
+  --hraness-marketing-radius: .625rem;
+  --hraness-marketing-frame-radius: .875rem;
+  --hraness-marketing-heading-weight: 550;
+  --hraness-marketing-heading-tracking: -.025em;
+  --hraness-marketing-section-space: clamp(3rem, 7vw, 6rem);
+  --hraness-marketing-action-height: 2.75rem;
+  font-family: var(--font-text);
+}
+
+/* Existing marketing roles declare defaults directly, so inherit this
+ * opt-in rhythm at each role boundary without replacing component recipes. */
+[data-hraness-theme="paper"] :where(.hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta, .hraness-marketing-proof-frame) {
+  --hraness-marketing-measure: inherit;
+  --hraness-marketing-copy-measure: inherit;
+  --hraness-marketing-prose-measure: inherit;
+  --hraness-marketing-gutter: inherit;
+  --hraness-marketing-radius: inherit;
+  --hraness-marketing-frame-radius: inherit;
+  --hraness-marketing-heading-weight: inherit;
+  --hraness-marketing-heading-tracking: inherit;
+  --hraness-marketing-section-space: inherit;
+  --hraness-marketing-action-height: inherit;
+}
+
+:root[data-hraness-theme="paper"]:where(:not([data-theme]):not(.dark), [data-theme="system"]) { color-scheme: light dark; }
+[data-hraness-theme="paper"]:where([data-theme="dark"], .dark:not([data-theme="light"])) { color-scheme: dark; }
+[data-hraness-theme="paper"][data-theme="light"] { color-scheme: light; }
+
+/* Opted-in shared headers retain their layout and receive the shared paint
+ * contract, including snapshots used with older component releases. */
+@layer components.hraness-design-kit.legacy {
+/* Keep the browser aliases in separate feature queries: CSS optimizers can
+ * collapse adjacent aliases to the prefixed property and lose Chromium blur. */
+:where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
+  --hraness-marketing-header-background: var(--hraness-marketing-background);
+  --hraness-marketing-header-backdrop: none;
+  background: var(--hraness-marketing-header-background);
+}
+
+@supports (-webkit-backdrop-filter: blur(1px)) {
+  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
+    --hraness-marketing-header-background: color-mix(in srgb, var(--hraness-marketing-background) 82%, transparent);
+    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
+    -webkit-backdrop-filter: var(--hraness-marketing-header-backdrop);
+  }
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
+    --hraness-marketing-header-background: color-mix(in srgb, var(--hraness-marketing-background) 82%, transparent);
+    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
+    backdrop-filter: var(--hraness-marketing-header-backdrop);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
+    --hraness-marketing-header-background: var(--hraness-marketing-background);
+    --hraness-marketing-header-backdrop: none;
+  }
+}
+}
+
+:root[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]),
+[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]) {
+  --background: light-dark(#f8f7f4, #12100f);
+  --foreground: light-dark(#1c1917, #f5f2ed);
+  --muted: light-dark(#6c665f, #aaa29a);
+  --faint: light-dark(#6c665f, #aaa29a);
+  --grid: light-dark(#dfdcd6, #302b27);
+  --line: light-dark(#b9b3ab, #514a44);
+  --control-border: light-dark(#8a8177, #827a72);
+  --surface: light-dark(#fffefa, #1d1a18);
+  --surface-raised: light-dark(#fffefa, #211d1a);
+  --surface-hover: light-dark(#ebe8e3, #292522);
+  --card: light-dark(#fffefa, #1d1a18);
+  --card-foreground: light-dark(#1c1917, #f5f2ed);
+  --popover: light-dark(#fffefa, #211d1a);
+  --popover-foreground: light-dark(#1c1917, #f5f2ed);
+  --primary: light-dark(#1e5ae1, #8fb0ff);
+  --primary-foreground: light-dark(#f8f7f4, #12100f);
+  --primary-soft: light-dark(#dee5f3, #21232c);
+  --secondary: light-dark(#ebe8e3, #292522);
+  --secondary-foreground: light-dark(#1c1917, #f5f2ed);
+  --accent: light-dark(#dee5f3, #21232c);
+  --accent-foreground: light-dark(#1c1917, #f5f2ed);
+  --focus: light-dark(#1e5ae1, #8fb0ff);
+  --scrim: light-dark(#00000070, #000000b8);
+  --disabled: light-dark(#fffefa, #211d1a);
+  --disabled-foreground: light-dark(#6c665f, #aaa29a);
+  --inverse: light-dark(#1c1917, #f5f2ed);
+  --inverse-foreground: light-dark(#f8f7f4, #12100f);
+  --danger: light-dark(#b23c34, #ef8c82);
+  --danger-foreground: light-dark(#f8f7f4, #12100f);
+  --danger-soft: light-dark(#f0e1dd, #2d1f1d);
+  --warning: light-dark(#975600, #efae55);
+  --warning-foreground: light-dark(#f8f7f4, #12100f);
+  --warning-soft: light-dark(#eee5d7, #2d2317);
+  --success: light-dark(#227445, #5fc98b);
+  --success-foreground: light-dark(#f8f7f4, #12100f);
+  --success-soft: light-dark(#dfe9e0, #1b261e);
+  --info: light-dark(#1e5ae1, #8fb0ff);
+  --info-foreground: light-dark(#f8f7f4, #12100f);
+  --info-soft: light-dark(#dee5f3, #21232c);
+  --chart1: light-dark(#a24a64, #db91aa);
+  --chart2: light-dark(#227445, #5fc98b);
+  --chart3: light-dark(#1e5ae1, #8fb0ff);
+  --chart4: light-dark(#975600, #efae55);
+  --chart5: light-dark(#7858a3, #b7a0dc);
+  --ui-background: var(--background);
+  --ui-foreground: var(--foreground);
+  --ui-card: var(--card);
+  --ui-card-foreground: var(--card-foreground);
+  --ui-popover: var(--popover);
+  --ui-popover-foreground: var(--popover-foreground);
+  --ui-primary: var(--primary);
+  --ui-primary-foreground: var(--primary-foreground);
+  --ui-secondary: var(--secondary);
+  --ui-secondary-foreground: var(--secondary-foreground);
+  --ui-muted: var(--secondary);
+  --ui-muted-foreground: var(--muted);
+  --ui-accent: var(--accent);
+  --ui-accent-foreground: var(--accent-foreground);
+  --ui-destructive: var(--danger);
+  --ui-destructive-foreground: var(--danger-foreground);
+  --ui-destructive-soft: var(--danger-soft);
+  --ui-border: var(--line);
+  --ui-input: var(--control-border);
+  --ui-ring: var(--focus);
+  --ui-success: var(--success);
+  --ui-success-foreground: var(--success-foreground);
+  --ui-success-soft: var(--success-soft);
+  --ui-warning: var(--warning);
+  --ui-warning-foreground: var(--warning-foreground);
+  --ui-warning-soft: var(--warning-soft);
+  --ui-info: var(--info);
+  --ui-info-foreground: var(--info-foreground);
+  --ui-info-soft: var(--info-soft);
+  --ui-chart-1: var(--chart1);
+  --ui-chart-2: var(--chart2);
+  --ui-chart-3: var(--chart3);
+  --ui-chart-4: var(--chart4);
+  --ui-chart-5: var(--chart5);
+  --hraness-site-accent: var(--primary);
+  --hraness-site-accent-ink: var(--primary-foreground);
+  --plain-background: var(--background);
+  --plain-foreground: var(--foreground);
+  --plain-muted: var(--muted);
+  --plain-line: var(--grid);
+  --plain-surface: var(--secondary);
+  --plain-link: var(--primary);
+  --plain-syntax-keyword: var(--warning);
+  --plain-syntax-string: var(--success);
+  --plain-syntax-number: var(--danger);
+  --plain-syntax-name: var(--info);
+}
+
+/* Standalone snapshots need their own derived light and shade. A lower-priority
+ * layer supplies identical portable depth without overriding installed UI roles. */
+@layer base {
+:root[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]),
+[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]) {
+  --ui-surface-light: color-mix(in oklch, var(--card) 94%, white);
+  --ui-surface-shade: color-mix(in oklch, var(--background) 55%, black);
+  --elevation-low: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 72%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--ui-surface-shade) 20%, transparent), 0 4px 10px -6px color-mix(in srgb, var(--ui-surface-shade) 22%, transparent);
+  --elevation-raised: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 72%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--ui-surface-shade) 18%, transparent), 0 14px 28px -16px color-mix(in srgb, var(--ui-surface-shade) 30%, transparent);
+  --elevation-overlay: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 80%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--ui-surface-shade) 24%, transparent), 0 24px 64px -20px color-mix(in srgb, var(--ui-surface-shade) 38%, transparent);
+  --elevation-inset: inset 0 2px 4px -2px color-mix(in srgb, var(--ui-surface-shade) 24%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ui-surface-light) 44%, transparent);
+}
+}
+
+@media (forced-colors: active) {
+  :root[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]),
+[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]) {
+    --background: Canvas;
+    --foreground: CanvasText;
+    --muted: CanvasText;
+    --faint: CanvasText;
+    --surface: Canvas;
+    --surface-raised: Canvas;
+    --surface-hover: Canvas;
+    --card: Canvas;
+    --card-foreground: CanvasText;
+    --popover: Canvas;
+    --popover-foreground: CanvasText;
+    --secondary: Canvas;
+    --secondary-foreground: CanvasText;
+    --grid: CanvasText;
+    --line: CanvasText;
+    --control-border: ButtonText;
+    --primary: Highlight;
+    --primary-foreground: HighlightText;
+    --plain-link: LinkText;
+    --accent: Highlight;
+    --accent-foreground: HighlightText;
+    --focus: Highlight;
+    --inverse: CanvasText;
+    --inverse-foreground: Canvas;
+    --disabled: Canvas;
+    --disabled-foreground: GrayText;
+    --elevation-low: none;
+    --elevation-raised: none;
+    --elevation-overlay: none;
+    --elevation-inset: none;
+  }
+}