@shabboo/kit 0.0.0-stage → 0.1.1

package/src/styles/styles.css

@@ -0,0 +1,246 @@
+@import "./tokens.css";
+@import "./print.css";
+
+@layer reset, base, prose, utilities;
+
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  * {
+    margin: 0;
+  }
+  html {
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+  }
+  img,
+  svg,
+  video,
+  picture {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+  p,
+  h1,
+  h2,
+  h3,
+  h4 {
+    overflow-wrap: break-word;
+  }
+}
+
+@layer base {
+  html {
+    background: var(--surface);
+    color: var(--text);
+    font-family: var(--font-serif);
+    font-size: 100%;
+    scroll-behavior: smooth;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+  :lang(fa),
+  :lang(ar) {
+    font-family: var(--font-arabic);
+    /* Vazirmatn has no italic; never fake-slant Arabic script */
+    font-synthesis-style: none;
+  }
+  body {
+    min-block-size: 100svh;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--step-0);
+    line-height: var(--leading);
+    font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
+  }
+  /* film grain over everything, never in the way */
+  body::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: var(--z-grain);
+    opacity: var(--grain-opacity);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+  main {
+    flex: 1;
+  }
+  ::selection {
+    background: var(--fill-selection);
+  }
+  a {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-color: var(--stroke-strong);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+    transition:
+      color var(--dur) var(--ease),
+      text-decoration-color var(--dur) var(--ease);
+  }
+  a:hover {
+    color: var(--text-accent);
+    text-decoration-color: var(--text-accent);
+  }
+  :focus-visible {
+    outline: 2px dashed var(--focus-ring);
+    outline-offset: 3px;
+  }
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-weight: 400;
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+    text-wrap: balance;
+  }
+  h1 {
+    font-size: var(--step-4);
+  }
+  h2 {
+    font-size: var(--step-2);
+  }
+  h3 {
+    font-size: var(--step-1);
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+    font-size: 0.85em;
+  }
+  hr {
+    border: 0;
+    border-block-start: 1px dashed var(--stroke);
+    margin-block: var(--space-7);
+  }
+}
+
+@layer prose {
+  .prose {
+    max-inline-size: var(--measure);
+    text-wrap: pretty;
+  }
+  .prose > * + * {
+    margin-block-start: var(--space-5);
+  }
+  .prose :is(h2, h3, h4) {
+    margin-block-start: var(--space-7);
+  }
+  .prose :is(h2, h3, h4) + * {
+    margin-block-start: var(--space-3);
+  }
+  .prose :is(ul, ol) {
+    padding-inline-start: var(--space-5);
+  }
+  .prose li + li {
+    margin-block-start: var(--space-2);
+  }
+  .prose li::marker {
+    color: var(--text-accent);
+    font-family: var(--font-mono);
+  }
+  .prose blockquote {
+    border-inline-start: 2px solid var(--stroke-strong);
+    padding-inline-start: var(--space-5);
+    font-style: italic;
+    color: var(--text-muted);
+  }
+  .prose :not(pre) > code {
+    background: var(--surface-sunken);
+    padding: 0.1em 0.35em;
+    border-radius: var(--radius);
+  }
+  .prose pre {
+    padding: var(--space-4) var(--space-5);
+    overflow-x: auto;
+    border: 1px solid var(--stroke);
+    border-radius: var(--radius);
+    line-height: 1.5;
+    direction: ltr;
+  }
+  .prose img {
+    border-radius: var(--radius);
+  }
+  .prose table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: var(--step--1);
+  }
+  .prose :is(th, td) {
+    border-block-end: 1px solid var(--stroke);
+    padding: var(--space-2) var(--space-3);
+    text-align: start;
+  }
+}
+
+@layer utilities {
+  .wrap {
+    inline-size: min(100% - 2 * var(--gutter), var(--wide));
+    margin-inline: auto;
+  }
+  .wrap-narrow {
+    inline-size: min(100% - 2 * var(--gutter), var(--measure));
+    margin-inline: auto;
+  }
+  /* the punk/terminal label used for metadata everywhere */
+  .label {
+    font-family: var(--font-mono);
+    font-size: var(--step--2);
+    letter-spacing: var(--tracking-mono);
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  /* letter-spacing breaks Arabic-script joining; use the Arabic face instead of mono */
+  :is(:lang(fa), :lang(ar)) .label {
+    font-family: var(--font-arabic);
+    font-size: var(--step--1);
+    letter-spacing: 0;
+  }
+  .accent {
+    color: var(--text-accent);
+  }
+  .signal {
+    color: var(--text-signal);
+  }
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .skip-link {
+    position: absolute;
+    inset-block-start: var(--space-2);
+    inset-inline-start: var(--space-2);
+    z-index: var(--z-skip);
+    padding: var(--space-2) var(--space-4);
+    background: var(--text);
+    color: var(--surface);
+    font-family: var(--font-mono);
+    font-size: var(--step--1);
+    transform: translateY(-200%);
+  }
+  .skip-link:focus {
+    transform: none;
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,303 @@
+/*
+ * Shab Boo design tokens: the only place colors, fonts, sizes and motion live.
+ * Night is the default and the only theme the four sites use. Day (data-theme="light") redefines the
+ * semantic layer for the UI kit and its showcase. Dark green is the accent; violet is reserved for the matthiola.
+ * No braces inside comments here: apps/ui/src/lib/tokens.ts splits this file into blocks on them.
+ */
+:root {
+  /* night palette (green-tinted blacks) */
+  --ink: #090c0a;
+  --ink-2: #0f1411;
+  --ink-3: #161d18;
+  --line: #24302a;
+  --paper: #e6e4da;
+  --paper-dim: #9a9d93;
+
+  /* accent: dark green. --accent for fills/borders, --accent-text where it carries text */
+  --accent: #1f5a3d;
+  --accent-strong: #2c7a53;
+  --accent-text: #6cbf8e;
+  --accent-glow: #2c7a5333;
+
+  /* supporting colors */
+  --bloom: #b996e6; /* matthiola violet, art only */
+  --signal: #ff6b3d; /* sodium streetlight, tiny doses */
+  --selection: #2c7a5366;
+
+  /* night extras: one more ink step, faint text, washes for hover and press, the modal scrim */
+  --ink-4: #1d2620;
+  --line-dim: #1a221d;
+  --line-control: #6a7369; /* a control's edge: 3:1 on the page, a panel and a field */
+  --paper-faint: #848880;
+  --paper-off: #666b63; /* disabled text: ~3:1, readable but plainly off */
+  --wash-1: #e6e4da0d;
+  --wash-2: #e6e4da1a;
+  --scrim: #090c0acc;
+
+  /* status: error, warning, info. success is the accent. never --signal or --bloom for these */
+  --red: #f08a7e;
+  --red-wash: #f08a7e1f;
+  --amber: #e2bd5c;
+  --amber-wash: #e2bd5c1f;
+  --blue: #86b4ec;
+  --blue-wash: #86b4ec1f;
+
+  /* pixel figures: landing art only. never UI, never text */
+  --fig-turquoise: #4fbfcf;
+  --fig-turquoise-pale: #86d8e2;
+  --fig-chestnut: #9a5a2c;
+  --fig-azure: #3f7fe6;
+  --fig-ultramarine: #5b4fd0;
+  --fig-indigo: #2c3f8a;
+  --fig-navy: #1b2240;
+  --fig-bill: #4a5563;
+  --fig-straw: #d8d68f;
+  --fig-straw-shade: #a3a35a;
+  --fig-straw-deep: #7a7a3c;
+  --fig-skin: #e0a985;
+  --fig-skin-shade: #b9805f;
+  --fig-skin-deep: #8a5a42;
+  --fig-umber: #5c4030;
+  --fig-mint: #b8e6d2;
+  --fig-mint-shade: #8fc4ae;
+  --fig-denim: #4a6fae;
+  --fig-denim-shade: #304f86;
+  --fig-denim-light: #7aa0dc;
+  --fig-brass: #d6a642;
+  --fig-sock-red: #8e2f4a;
+
+  /* type */
+  --font-serif: "Newsreader Variable", "Iowan Old Style", Georgia, serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
+  --font-arabic: "Vazirmatn Variable", "Noto Naskh Arabic", Tahoma, sans-serif;
+
+  --step--2: 0.72rem;
+  --step--1: 0.85rem;
+  --step-0: 1.125rem;
+  --step-1: 1.35rem;
+  --step-2: 1.7rem;
+  --step-3: 2.2rem;
+  --step-4: 3rem;
+  --step-5: clamp(2.8rem, 6vw + 1rem, 5.2rem);
+
+  --leading: 1.65;
+  --tracking-mono: 0.06em;
+
+  /* space */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 5rem;
+  --gutter: clamp(1rem, 4vw, 2.5rem);
+  --measure: 68ch;
+  --wide: 72rem;
+
+  /*
+   * breakpoints: var() can't sit in a media query, so these are constants to copy, not tokens.
+   * sm 40rem (phone to tablet) · md 52rem (sidebar collapses) · lg 64rem · xl 80rem.
+   * Inside components prefer container queries, so a part reflows by its own width.
+   */
+
+  /* shape */
+  --radius-sm: 2px;
+  --radius: var(--radius-sm);
+  --radius-pill: 999px; /* fully round ends: the Badge pill */
+  --border: 1px solid var(--line);
+
+  /* icons: em-based so they follow the text they sit in; a touch target is never smaller than 44px */
+  --icon-sm: 1em;
+  --icon-md: 1.25em;
+  --icon-lg: 1.75em;
+  --target-min: 2.75rem;
+
+  /* stacking: name the layer, never a number */
+  --z-base: 0;
+  --z-raised: 1;
+  --z-sticky: 10;
+  --z-overlay: 50;
+  --z-toast: 60;
+  --z-grain: 100;
+  --z-skip: 200;
+
+  /* motion: smooth. fast for small state changes, moderate for most, slow for large moves */
+  --dur-fast: 110ms;
+  --dur-moderate: 220ms;
+  --dur-slow: 400ms;
+  --dur: var(--dur-moderate);
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-enter: cubic-bezier(0, 0, 0.3, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  /* pixel motion: no tweening, just frames. UI kit hovers, presses, blinks and scans use these */
+  --ease-step: steps(3, end);
+  --ease-dither: steps(4, end); /* a dither in or out: four hard frames */
+  --dur-step: 180ms;
+  --blink: 1.1s;
+  --grain-opacity: 0.07;
+}
+
+/*
+ * semantic layer: what a color is *for*. UI components (src/ui/) use only these,
+ * so a theme swaps this block and nothing else. Apps may still use the palette above.
+ * It also answers to data-theme="dark", so a night panel can sit inside a day page.
+ */
+:root,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  /*
+   * layers: the page, a panel on it, a well cut into it, and the step above a panel.
+   * A well is one step off the page toward the text: lighter at night, darker by day.
+   */
+  --surface: var(--ink);
+  --surface-raised: var(--ink-2);
+  --surface-sunken: var(--ink-3);
+  --field: var(--ink-3);
+  --field-raised: var(--ink-4);
+
+  --text: var(--paper);
+  --text-muted: var(--paper-dim);
+  --text-helper: var(--text-muted); /* alias of muted, kept so helper text can diverge later */
+  --text-placeholder: var(--paper-faint);
+  --text-disabled: var(--paper-off);
+  --text-accent: var(--accent-text);
+  --text-signal: var(--signal);
+  --text-on-fill: var(--paper);
+
+  --fill-accent: var(--accent);
+  --fill-accent-strong: var(--accent-strong);
+  --fill-glow: var(--accent-glow);
+  --fill-disabled: var(--ink-3);
+  --fill-selection: var(--selection);
+
+  /* states: laid over whatever layer the control sits on. hover a half step, press a full one */
+  --state-hover: var(--wash-1);
+  --state-active: var(--wash-2);
+  --state-selected: var(--accent-glow);
+
+  --stroke-subtle: var(--line-dim);
+  --stroke: var(--line);
+  --stroke-strong: var(--accent-strong);
+  --stroke-control: var(--line-control);
+  --focus-ring: var(--signal);
+  --overlay: var(--scrim);
+
+  /* status: always with an icon or a word, never color alone */
+  --status-error: var(--red);
+  --status-error-fill: var(--red-wash);
+  --status-warning: var(--amber);
+  --status-warning-fill: var(--amber-wash);
+  --status-info: var(--blue);
+  --status-info-fill: var(--blue-wash);
+  --status-success: var(--accent-text);
+  --status-success-fill: var(--accent-glow);
+
+  /* charts: categorical, in this order. Reserved for Chart (planned); the colors page grades them now */
+  --chart-1: var(--accent-text);
+  --chart-2: var(--blue);
+  --chart-3: var(--amber);
+  --chart-4: var(--red);
+  --chart-5: var(--paper-dim);
+
+  /* controls (buttons, inputs): block size and inline padding per size */
+  --control-h-sm: 1.75rem;
+  --control-h-md: 2.25rem;
+  --control-h-lg: 2.75rem;
+  --control-pad-sm: var(--space-2);
+  --control-pad-md: var(--space-3);
+  --control-pad-lg: var(--space-4);
+}
+
+/*
+ * Day palette: warm paper, ink text, the same green. Declared at the root so print.css can share its inks,
+ * but only the day block below and print.css may use it: never an app, never the UI kit.
+ * The light selector is redundant for CSS; it marks the block as day for the ui app's token reader.
+ */
+:root,
+[data-theme="light"] {
+  --day-paper: #f4f1e6;
+  --day-paper-raised: #fbf9f2;
+  --day-paper-sunken: #e8e4d6;
+  --day-paper-deep: #ddd8c8;
+  --day-line: #cfcabb;
+  --day-line-dim: #ddd9cb;
+  --day-line-control: #7f7a6b;
+  --day-ink: #141a16;
+  --day-ink-dim: #565c54;
+  --day-ink-faint: #5f635a;
+  --day-ink-off: #827f74;
+  --day-accent-text: #1f6b45;
+  --day-accent-glow: #2c7a5326;
+  --day-signal: #c23f0c;
+  --day-wash-1: #141a160d;
+  --day-wash-2: #141a161a;
+  --day-scrim: #f4f1e6cc;
+  --day-selection: #2c7a5340;
+  --day-red: #b3261e;
+  --day-red-wash: #b3261e1a;
+  --day-amber: #855a00;
+  --day-amber-wash: #855a001f;
+  --day-blue: #1f5fae;
+  --day-blue-wash: #1f5fae1a;
+}
+
+/*
+ * Day: the semantic layer redefined on the day palette. Only the UI kit and ui.shab.boo use it;
+ * the four sites still style with the night palette directly.
+ */
+:root[data-theme="light"],
+[data-theme="light"] {
+  color-scheme: light;
+
+  --grain-opacity: 0.045;
+
+  --surface: var(--day-paper);
+  --surface-raised: var(--day-paper-raised);
+  --surface-sunken: var(--day-paper-sunken);
+  --field: var(--day-paper-raised);
+  --field-raised: var(--day-paper);
+
+  --text: var(--day-ink);
+  --text-muted: var(--day-ink-dim);
+  --text-helper: var(--text-muted);
+  --text-placeholder: var(--day-ink-faint);
+  --text-disabled: var(--day-ink-off);
+  --text-accent: var(--day-accent-text);
+  --text-signal: var(--day-signal);
+  --text-on-fill: var(--day-paper);
+
+  --fill-accent: var(--accent);
+  --fill-accent-strong: var(--accent-strong);
+  --fill-glow: var(--day-accent-glow);
+  --fill-disabled: var(--day-paper-deep);
+  --fill-selection: var(--day-selection);
+
+  --state-hover: var(--day-wash-1);
+  --state-active: var(--day-wash-2);
+  --state-selected: var(--day-accent-glow);
+
+  --stroke-subtle: var(--day-line-dim);
+  --stroke: var(--day-line);
+  --stroke-strong: var(--accent-strong);
+  --stroke-control: var(--day-line-control);
+  --focus-ring: var(--day-signal);
+  --overlay: var(--day-scrim);
+
+  --status-error: var(--day-red);
+  --status-error-fill: var(--day-red-wash);
+  --status-warning: var(--day-amber);
+  --status-warning-fill: var(--day-amber-wash);
+  --status-info: var(--day-blue);
+  --status-info-fill: var(--day-blue-wash);
+  --status-success: var(--day-accent-text);
+  --status-success-fill: var(--day-accent-glow);
+
+  --chart-1: var(--day-accent-text);
+  --chart-2: var(--day-blue);
+  --chart-3: var(--day-amber);
+  --chart-4: var(--day-red);
+  --chart-5: var(--day-ink-dim);
+}

package/src/ui/Badge.astro

@@ -0,0 +1,95 @@
+---
+/**
+ * A status marker. variant "text": colored text that sits inside a label line · "pill": a bordered pill.
+ * tone: accent (live things) · muted (past or dormant) · signal (needs a look; tiny doses)
+ *   · error · warning · success · info: status tones, which always lead with an icon so color is never alone.
+ */
+import type { HTMLAttributes } from "astro/types";
+import Icon from "./Icon.astro";
+import type { IconName } from "./icons";
+
+type Status = "error" | "warning" | "success" | "info";
+
+interface Props extends HTMLAttributes<"span"> {
+  tone?: "accent" | "muted" | "signal" | Status;
+  variant?: "text" | "pill";
+  size?: "sm" | "md";
+  /** a blinking dot in front: on air, recording, happening now */
+  live?: boolean;
+}
+
+const STATUS_ICON: Record<Status, IconName> = { error: "close", warning: "warning", success: "check", info: "info" };
+
+const { tone = "accent", variant = "pill", size = "sm", live = false, class: className, ...rest } = Astro.props;
+const icon = STATUS_ICON[tone as Status];
+---
+
+<span class:list={["badge", className, { live }]} data-tone={tone} data-variant={variant} data-size={size} {...rest}
+  >{icon && <Icon name={icon} size="sm" class="badge-icon" />}<slot /></span
+>
+
+<style>
+  .badge {
+    --badge-color: var(--text-accent);
+    color: var(--badge-color);
+  }
+  .badge[data-tone="muted"] {
+    --badge-color: var(--text-muted);
+  }
+  .badge[data-tone="signal"] {
+    --badge-color: var(--text-signal);
+  }
+  .badge[data-tone="error"] {
+    --badge-color: var(--status-error);
+    --badge-fill: var(--status-error-fill);
+  }
+  .badge[data-tone="warning"] {
+    --badge-color: var(--status-warning);
+    --badge-fill: var(--status-warning-fill);
+  }
+  .badge[data-tone="success"] {
+    --badge-color: var(--status-success);
+    --badge-fill: var(--status-success-fill);
+  }
+  .badge[data-tone="info"] {
+    --badge-color: var(--status-info);
+    --badge-fill: var(--status-info-fill);
+  }
+  .badge-icon {
+    margin-inline-end: 0.35em;
+  }
+  .badge[data-variant="pill"] {
+    display: inline-block;
+    padding: 0.15em 0.65em;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-pill);
+    background: var(--badge-fill, none);
+    font-family: var(--font-mono);
+    font-size: var(--step--2);
+    letter-spacing: var(--tracking-mono);
+    text-transform: uppercase;
+    line-height: 1.4;
+  }
+  .badge[data-variant="pill"][data-size="md"] {
+    font-size: var(--step--1);
+  }
+  .live::before {
+    content: "●" / "";
+    margin-inline-end: 0.4em;
+  }
+  /* four blinks, under five seconds, then it holds: nothing blinks on with no way to stop it (WCAG 2.2.2) */
+  @media (prefers-reduced-motion: no-preference) {
+    .live::before {
+      animation: badge-blink var(--blink) steps(1, end) 4;
+    }
+  }
+  @keyframes badge-blink {
+    50% {
+      opacity: 0;
+    }
+  }
+  .badge[data-variant="pill"]:is(:lang(fa), :lang(ar)) {
+    font-family: var(--font-arabic);
+    letter-spacing: 0;
+  }
+</style>

package/src/ui/Breadcrumbs.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * The trail back up, as a label line: links separated by slashes.
+ * `trailing` keeps a final slash, for when the page's own h1 follows as the last crumb.
+ */
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"nav"> {
+  items: { label: string; href: string }[];
+  /** accessible name of the nav landmark */
+  label?: string;
+  trailing?: boolean;
+}
+
+const { items, label = "Breadcrumb", trailing = true, class: className, ...rest } = Astro.props;
+---
+
+<nav aria-label={label} class:list={["label crumbs", className]} {...rest}>
+  {
+    items.map((item, i) => (
+      <>
+        <a href={item.href}>{item.label}</a>
+        {(i < items.length - 1 || trailing) && <span aria-hidden="true"> /</span>}
+        {i < items.length - 1 && " "}
+      </>
+    ))
+  }
+</nav>