@hraness/design-kit 0.31.1

package/src/icons.ts

@@ -0,0 +1,51 @@
+import { hranessIconAssets, type HranessIconAsset } from "./icons.generated.js";
+
+/**
+ * Shared vetted Hraness icon library. Every admitted icon is generated as a
+ * member of a measured family by slopcamera `image icon --set`, then pinned
+ * in `src/icons/manifest.json` by byte hash and per-context/family metric
+ * bounds (scripts/generate-icons.ts, enforced by icons.test.ts). Products
+ * consume either the raw file (`@hraness/design-kit/icons/<file>`) or this
+ * module's typed artwork (`body` + `viewBox`, or `hranessIconMarkup`).
+ */
+
+export type HranessIconContext = "card" | "hero" | "inline";
+export type HranessIconId = keyof typeof hranessIconAssets;
+export type HranessIconPurpose = "illustration" | "mark";
+export type HranessIconSet = HranessIconAsset["set"];
+
+export interface HranessIcon extends HranessIconAsset {
+  readonly id: HranessIconId;
+}
+
+export const hranessIcons: readonly HranessIcon[] = (
+  Object.keys(hranessIconAssets) as HranessIconId[]
+)
+  .sort()
+  .map(id => ({ ...(hranessIconAssets[id] as HranessIconAsset), id }));
+
+export function hranessIcon(id: HranessIconId): HranessIcon {
+  const asset: HranessIconAsset = hranessIconAssets[id];
+  return { ...asset, id };
+}
+
+/** All admitted icons in one generated family, sorted by id. */
+export function hranessIconsForSet(set: string): readonly HranessIcon[] {
+  return hranessIcons.filter(icon => icon.set === set);
+}
+
+/** Complete standalone `<svg>` markup for inline rendering. */
+export function hranessIconMarkup(id: HranessIconId): string {
+  const icon = hranessIcon(id);
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${icon.viewBox}" role="img">${icon.body}</svg>`;
+}
+
+/** `data:image/svg+xml` URI for `<img>` sources or CSS `url()` values. */
+export function hranessIconDataUri(id: HranessIconId): string {
+  return `data:image/svg+xml,${encodeURIComponent(hranessIconMarkup(id))}`;
+}
+
+/** Package-relative asset path inside the `./icons/*` export. */
+export function hranessIconPath(id: HranessIconId): string {
+  return `icons/${hranessIcon(id).file}`;
+}

package/src/index.ts

@@ -0,0 +1,275 @@
+export * from "./palettes.js";
+export * from "./palette-appearance.js";
+export * from "./palette-themes.js";
+export * from "./syntax-highlighting.js";
+export * from "./appearance.js";
+export * from "./article.js";
+export * from "./article-html.js";
+export * from "./status-page.js";
+export * from "./status-page-html.js";
+export * from "./provider-marks.js";
+export * from "./platforms.js";
+export * from "./relative-time.js";
+
+export const colors = {
+  light: {
+    background: "#fbf6f2",
+    foreground: "#201b19",
+    muted: "#6b625d",
+    faint: "#6b625d",
+    grid: "#eaded8",
+    line: "#bbaaa2",
+    controlBorder: "#8f8f8f",
+    surface: "#ffffff",
+    surfaceRaised: "#f3ece8",
+    surfaceHover: "#eaded8",
+    card: "#ffffff",
+    cardForeground: "#201b19",
+    popover: "#ffffff",
+    popoverForeground: "#201b19",
+    primary: "#201b19",
+    primaryForeground: "#fbf6f2",
+    secondary: "#f3ece8",
+    secondaryForeground: "#201b19",
+    accent: "#eaded8",
+    accentForeground: "#201b19",
+    info: "#0d61ac",
+    infoSoft: "#d8eaff",
+    focus: "#0d61ac",
+    scrim: "rgba(2, 2, 2, 0.44)",
+    disabled: "#e8ded9",
+    disabledForeground: "#717171",
+    inverse: "#201b19",
+    inverseForeground: "#fbf6f2",
+    success: "#2d6a42",
+    successSoft: "rgba(45, 106, 66, 0.12)",
+    warning: "#785f28",
+    warningSoft: "rgba(120, 95, 40, 0.12)",
+    danger: "#9f3631",
+    dangerSoft: "rgba(159, 54, 49, 0.12)",
+  },
+  dark: {
+    background: "#000000",
+    foreground: "#f2f2ed",
+    muted: "#8f938c",
+    faint: "#8f938c",
+    grid: "#1c1e1b",
+    line: "#5f645d",
+    controlBorder: "#666666",
+    surface: "#0d0e0c",
+    surfaceRaised: "#161814",
+    surfaceHover: "#1c1e1b",
+    card: "#0d0e0c",
+    cardForeground: "#f2f2ed",
+    popover: "#161814",
+    popoverForeground: "#f2f2ed",
+    primary: "#f2f2ed",
+    primaryForeground: "#0d0e0c",
+    secondary: "#252820",
+    secondaryForeground: "#f2f2ed",
+    accent: "#1c1e1b",
+    accentForeground: "#f2f2ed",
+    info: "#6aa9ed",
+    infoSoft: "#152d46",
+    focus: "#6aa9ed",
+    scrim: "rgba(0, 0, 0, 0.72)",
+    disabled: "#262626",
+    disabledForeground: "#777777",
+    inverse: "#f2f2ed",
+    inverseForeground: "#0d0e0c",
+    success: "#76b38e",
+    successSoft: "rgba(118, 179, 142, 0.12)",
+    warning: "#c9ad74",
+    warningSoft: "rgba(201, 173, 116, 0.12)",
+    danger: "#e18982",
+    dangerSoft: "rgba(225, 137, 130, 0.12)",
+  },
+} as const;
+
+export const auroraColors = {
+  light: {
+    violet: "oklch(0.82 0.048 312)",
+    rose: "oklch(0.85 0.044 12)",
+    gold: "oklch(0.92 0.036 96)",
+    mint: "oklch(0.9 0.036 172)",
+    cyan: "oklch(0.84 0.042 236)",
+  },
+  dark: {
+    violet: "oklch(0.58 0.045 312)",
+    rose: "oklch(0.61 0.04 12)",
+    gold: "oklch(0.69 0.035 96)",
+    mint: "oklch(0.63 0.035 172)",
+    cyan: "oklch(0.6 0.04 236)",
+  },
+} as const;
+
+export const chromeColors = {
+  light: {
+    deep: "rgb(52 52 64)",
+    shadow: "rgb(58 58 72)",
+    mid: "rgb(92 92 106)",
+    high: "rgb(88 88 100)",
+    glint: "rgb(100 100 112)",
+  },
+  dark: {
+    deep: "rgb(100 102 122)",
+    shadow: "rgb(112 114 136)",
+    mid: "rgb(166 168 190)",
+    high: "rgb(158 160 182)",
+    glint: "rgb(178 180 200)",
+  },
+} as const;
+
+/** Ordered metallic bands used by browser text effects. */
+export const chromeGradientStops = {
+  light: [
+    [0, "rgb(52 52 64)"],
+    [10, "rgb(88 88 100)"],
+    [20, "rgb(58 58 72)"],
+    [32, "rgb(100 100 112)"],
+    [42, "rgb(64 64 78)"],
+    [52, "rgb(92 92 106)"],
+    [62, "rgb(54 54 68)"],
+    [72, "rgb(86 86 100)"],
+    [82, "rgb(56 56 70)"],
+    [91, "rgb(80 80 94)"],
+    [100, "rgb(60 60 74)"],
+  ],
+  dark: [
+    [0, "rgb(100 102 122)"],
+    [10, "rgb(158 160 182)"],
+    [20, "rgb(112 114 136)"],
+    [32, "rgb(178 180 200)"],
+    [42, "rgb(122 124 148)"],
+    [52, "rgb(166 168 190)"],
+    [62, "rgb(106 108 132)"],
+    [72, "rgb(160 162 186)"],
+    [82, "rgb(110 112 136)"],
+    [91, "rgb(152 154 178)"],
+    [100, "rgb(118 120 142)"],
+  ],
+} as const;
+
+export const spacing = [0, 4, 8, 12, 16, 20, 24, 32, 48, 64] as const;
+export const radius = { sharp: 0, sm: 4, md: 8, lg: 12, round: 999 } as const;
+
+/** Controls use a bounded curve; full pills and circles opt into radius.round. */
+export const controlRadius = 16;
+
+export const layout = {
+  chromeInset: 8,
+  edgeInset: 24,
+} as const;
+
+/** Opt-in document themes that sit above light/dark color appearance. */
+export const siteThemes = {
+  plain: {
+    bodyClassName: "plain-site",
+    footerClassName: "plain-footer",
+    pageClassName: "plain-page",
+  },
+} as const;
+
+export const interaction = {
+  compactTarget: 40,
+  minimumTarget: 48,
+  controlHeight: 52,
+  primaryControlHeight: 56,
+  transportControlHeight: 64,
+} as const;
+
+export const motion = {
+  duration: {
+    instant: 0,
+    fast: 120,
+    standard: 180,
+    slow: 280,
+  },
+  distance: {
+    railEnter: 14,
+    railExit: 10,
+  },
+  easing: {
+    standard: "cubic-bezier(0.2, 0, 0, 1)",
+    emphasized: "cubic-bezier(0.16, 1, 0.3, 1)",
+  },
+} as const;
+
+export const elevation = {
+  none: "none",
+  low: "0 1px 2px oklch(0 0 0 / 0.08)",
+  raised: "0 8px 24px -12px oklch(0 0 0 / 0.22)",
+  overlay: "0 18px 48px -18px oklch(0 0 0 / 0.32)",
+} as const;
+
+/** Product-neutral stacking order for persistent chrome and portalled overlays. */
+export const stacking = {
+  chrome: 50,
+  modal: 2_000,
+  tooltip: 3_000,
+  skipLink: 4_000,
+} as const;
+
+export const breakpoints = {
+  compact: 480,
+  medium: 768,
+  wide: 1_200,
+  canvas: 1_440,
+} as const;
+
+/** Shared HugeIcons rendering defaults across web and native surfaces. */
+export const iconography = {
+  size: 20,
+  strokeWidth: 1.5,
+} as const;
+
+export const typeScale = {
+  caption: 12,
+  label: 14,
+  body: 16,
+  control: 16,
+  controlGlyph: 20,
+  heading: 24,
+  title: 32,
+  display: 56,
+} as const;
+
+export const fontWeights = {
+  regular: 450,
+  medium: 550,
+  bold: 700,
+} as const;
+
+export const fontFamilies = {
+  heading: "Nebula Sans",
+  mono: "ui-monospace",
+  text: "Nebula Sans",
+} as const;
+
+export const fontFallbacks = {
+  mono: ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"],
+  text: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+} as const;
+
+const webTextStack = '"Nebula Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+const webMonoStack = 'ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace';
+
+export const typography = {
+  fontText: webTextStack,
+  fontHeading: webTextStack,
+  fontMono: webMonoStack,
+  /** Optional open-source display face shipped by the `fonts.css` entry point. */
+  fontGeistMono: '"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace',
+  /** @deprecated Prefer the semantic `fontText` token. */
+  fontSans: webTextStack,
+} as const;
+
+export type ColorMode = keyof typeof colors;
+/** Semantic role shape for consumers that may override product-owned colors. */
+export type ThemeColors = {
+  readonly [Role in keyof (typeof colors)["light"]]: string;
+};
+
+export function themeFor(mode: ColorMode): ThemeColors {
+  return colors[mode];
+}

package/src/lantern-material.css

@@ -0,0 +1,213 @@
+/* Lantern is an opt-in material, independent of palette and typography.
+ * All paint is deterministic CSS. No texture is placed over meaningful content.
+ * Opacity-only mixes use sRGB to preserve the source hue. Perceptual blends
+ * between two colored paints continue to use OKLCH. */
+@layer base {
+  [data-hraness-material="lantern"] {
+    --hraness-material-module: 6rem;
+    --hraness-material-warm: var(--primary, var(--ui-primary, CanvasText));
+    --hraness-material-cool: var(--info, var(--ui-info, CanvasText));
+    --hraness-material-plane: var(--surface, var(--ui-background, Canvas));
+    --hraness-material-ink: var(--foreground, var(--ui-foreground, CanvasText));
+    --hraness-material-muted: var(--muted, var(--ui-muted-foreground, CanvasText));
+    --hraness-material-seam: color-mix(in oklch, var(--hraness-material-ink) 5%, var(--hraness-material-plane));
+    --hraness-material-outline: transparent;
+    --hraness-material-edge: rgb(255 255 255 / 0.14);
+    --hraness-material-shade: rgb(0 0 0 / 0.14);
+    --hraness-material-warm-plane: color-mix(in oklch, var(--hraness-material-warm) 12%, var(--hraness-material-plane));
+    --hraness-material-rest: inset 0 1px 0 var(--hraness-material-edge), 0 2px 5px rgb(0 0 0 / 0.05), 0 10px 28px -14px rgb(0 0 0 / 0.14);
+    --hraness-material-raised: inset 0 1px 0 var(--hraness-material-edge), 0 1px 3px rgb(0 0 0 / 0.08);
+    --hraness-material-inset: inset 2px 3px 7px rgb(0 0 0 / 0.08), inset -1px -1px 2px rgb(255 255 255 / 0.1);
+    --hraness-material-lift: inset 0 1px 0 var(--hraness-material-edge), -3px -3px 10px rgb(255 255 255 / 0.04), 2px 4px 8px rgb(0 0 0 / 0.07), 8px 18px 40px rgb(0 0 0 / 0.09);
+    --hraness-material-focus: var(--focus, var(--ui-ring, Highlight));
+    --hraness-material-duration: 160ms;
+  }
+}
+
+@layer components.hraness-design-kit.legacy {
+  /* Patterns are retired. The attribute values stay valid for compatibility,
+     and every one paints the uninterrupted palette background. */
+  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"], [data-hraness-pattern="none"]) {
+    --hraness-pattern-image: none;
+    --hraness-pattern-decoration: none;
+    --hraness-marketing-field-images: none;
+    --hraness-material-wall-images: none;
+  }
+
+  /* A quiet, opaque reading plane. The seam belongs to the surface perimeter. */
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane) {
+    background-color: var(--hraness-material-plane);
+    box-shadow: var(--hraness-material-rest);
+    border: 1px solid var(--hraness-material-outline);
+    border-radius: var(--radius-lg, 0.75rem);
+    color: var(--hraness-material-ink);
+    min-inline-size: 0;
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane[data-depth="raised"]) {
+    box-shadow: var(--hraness-material-lift);
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane[data-depth="inset"]) {
+    background-color: color-mix(in oklch, var(--background, Canvas) 70%, var(--hraness-material-plane));
+    box-shadow: var(--hraness-material-inset);
+  }
+
+  /* A translucent enclosure, only where content actually passes behind it.
+   * Resolve these tokens on the chrome itself for nested palette islands. */
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
+    --hraness-material-chrome-paint: var(--surface, var(--ui-background, Canvas));
+    --hraness-design-top-bar-edge: var(--hraness-material-outline);
+    --hraness-material-chrome-blur: none;
+    background-color: var(--hraness-material-chrome-paint);
+    border-block-end: 1px solid var(--hraness-material-outline);
+    box-shadow: inset 0 1px 0 var(--hraness-material-edge), 0 4px 12px rgb(0 0 0 / 0.04);
+  }
+  /* Bind the compiled TopBar's public paint seam at its own surface boundary. */
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome.hraness-design-top-bar[data-surface="glass"]) {
+    --hraness-design-top-bar-background: var(--hraness-material-chrome-paint);
+    --hraness-design-top-bar-backdrop: var(--hraness-material-chrome-blur);
+  }
+  @supports (-webkit-backdrop-filter: blur(1px)) {
+    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
+      --hraness-material-chrome-paint: color-mix(in srgb, var(--surface, var(--ui-background, Canvas)) 90%, transparent);
+      --hraness-material-chrome-blur: blur(20px) saturate(1.1);
+      -webkit-backdrop-filter: var(--hraness-material-chrome-blur);
+    }
+  }
+  @supports (backdrop-filter: blur(1px)) {
+    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
+      --hraness-material-chrome-paint: color-mix(in srgb, var(--surface, var(--ui-background, Canvas)) 90%, transparent);
+      --hraness-material-chrome-blur: blur(20px) saturate(1.1);
+      backdrop-filter: var(--hraness-material-chrome-blur);
+    }
+  }
+
+  /* The wall is a flat palette plane. Its retired shaded faces, grain,
+   * patterns, and light washes no longer paint, whatever tokens say. */
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall) {
+    background-color: var(--background, var(--ui-background, Canvas));
+    background-image: none;
+    color: var(--hraness-material-ink);
+  }
+
+  /* A terminal remains a readable document. Source lines scroll intact;
+   * only its enclosure catches light. Syntax spans inherit semantic colors. */
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-terminal) {
+    min-inline-size: 0;
+    overflow: hidden;
+    border: 1px solid var(--hraness-material-outline);
+    border-radius: .875rem;
+    background: var(--hraness-material-plane);
+    color: var(--hraness-material-ink);
+    box-shadow: var(--hraness-material-lift);
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-terminal__bar) {
+    padding: .8rem 1.25rem;
+    background: linear-gradient(to bottom, color-mix(in oklch, white 5%, var(--hraness-material-plane)), var(--hraness-material-plane));
+    box-shadow: inset 0 1px 0 var(--hraness-material-edge), 0 1px 3px rgb(0 0 0 / 0.08);
+    color: var(--hraness-material-muted);
+    font: .8125rem/1.5 var(--font-mono, ui-monospace, monospace);
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-code) {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    margin: 0;
+    padding: 1.25rem;
+    overflow: auto;
+    background: var(--hraness-material-plane);
+    color: var(--hraness-material-ink);
+    font: .875rem/1.75 var(--font-mono, ui-monospace, monospace);
+    white-space: pre;
+    overflow-wrap: normal;
+    word-break: normal;
+    tab-size: 2;
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-code) code {
+    background: none;
+    padding: 0;
+    font: inherit;
+    white-space: inherit;
+    overflow-wrap: inherit;
+    word-break: inherit;
+  }
+
+  /* Plain HTML control adapters. Compiled UI primitives use the public
+   * lanternControlStyles recipes through their documented controlXstyle seam.
+   * Edge paint uses background images, leaving focus shadows and outlines alone. */
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control) {
+    background-image: linear-gradient(to bottom, var(--hraness-material-edge), transparent 2px);
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-input) {
+    background-image: linear-gradient(to bottom, var(--hraness-material-shade), transparent 4px);
+    caret-color: var(--hraness-material-focus);
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-choice[aria-pressed="true"], .hraness-material-choice[aria-selected="true"], .hraness-material-choice[data-selected]) {
+    background-color: var(--hraness-material-warm-plane);
+    color: var(--hraness-material-ink);
+    background-image: linear-gradient(to top, var(--hraness-material-warm), var(--hraness-material-warm) 2px, transparent 2px);
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control:disabled, .hraness-material-control[aria-disabled="true"], .hraness-material-control[data-disabled], .hraness-material-input:disabled) {
+    background-image: none;
+  }
+
+  /* A collection is a readable sequence, never a requirement to fill a grid.
+   * Products own grouping, columns and the meaning of each row. Rows stay
+   * unruled: the pane perimeter owns the only seam. */
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-rows) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-disclosure > summary) {
+    cursor: pointer;
+    min-block-size: 2.75rem;
+    padding-block: 0.75rem;
+  }
+  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-disclosure > summary:focus-visible) {
+    outline: 2px solid var(--hraness-material-focus);
+    outline-offset: 3px;
+  }
+  [data-hraness-material="lantern"] ::selection {
+    background-color: var(--hraness-material-warm-plane);
+    color: var(--hraness-material-ink);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-hraness-material="lantern"] { --hraness-material-duration: 0ms; }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
+      --hraness-material-chrome-paint: var(--surface, var(--ui-background, Canvas));
+      --hraness-material-chrome-blur: none;
+    }
+  }
+  @media (forced-colors: active) {
+    [data-hraness-material="lantern"] {
+      --hraness-material-plane: Canvas;
+      --hraness-material-ink: CanvasText;
+      --hraness-material-muted: CanvasText;
+      --hraness-material-seam: CanvasText;
+      --hraness-material-outline: CanvasText;
+      --hraness-material-rest: none;
+      --hraness-material-focus: Highlight;
+      --hraness-material-warm-plane: Canvas;
+      --hraness-material-warm: Highlight;
+      --hraness-material-edge: transparent;
+      --hraness-material-raised: none;
+      --hraness-material-inset: none;
+      --hraness-material-lift: none;
+    }
+    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall, .hraness-material-chrome, .hraness-material-pane, .hraness-material-terminal, .hraness-material-terminal__bar, .hraness-material-code) {
+      --hraness-material-chrome-paint: Canvas;
+      --hraness-material-chrome-blur: none;
+      background-color: Canvas;
+      background-image: none;
+      box-shadow: none;
+    }
+    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control, .hraness-material-input, .hraness-material-choice) { background-image: none; }
+    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-choice[aria-pressed="true"], .hraness-material-choice[aria-selected="true"], .hraness-material-choice[data-selected]) {
+      background-color: Highlight;
+      color: HighlightText;
+      background-image: none;
+    }
+  }
+}