@tasker-systems/temper-design 0.0.0-stage → 0.6.3

package/contract/markdown.css

@@ -0,0 +1,279 @@
+/* The markdown recipe: how a rendered document reads, on every surface.
+
+   `rendering-agrees` — the package's `markdown` and `sanitize` modules decide what a document
+   becomes; this recipe decides how it looks. A surface wraps the sanitized HTML in one element,
+
+     <div class="md-body">{@html sanitized}</div>
+
+   and adds nothing that paints: a surface that restyles a heading or a table here is the drift
+   this recipe exists to prevent. Layout around the wrapper (width, margins) is the surface's.
+
+   The wrapper is the renderer's, outside the sanitized string; the sanitizer strips the classes a
+   document's author writes, so no document can reach these rules except through it. Fenced code
+   takes its token colours from `base.css`'s `.hljs` rules. Roles only — no literal colour
+   appears here. Import it into the same cascade layer as `base.css`: unlayered, it would
+   outrank a component's own utilities. */
+
+.md-body {
+  font: 1rem/1.7 var(--tp-font-reading);
+  color: var(--tp-text-muted);
+  overflow-wrap: anywhere;
+}
+
+/* ── Headings ─────────────────────────────────────────────────────── */
+
+.md-body h1,
+.md-body h2,
+.md-body h3,
+.md-body h4,
+.md-body h5,
+.md-body h6 {
+  font-family: var(--tp-font-reading);
+  color: var(--tp-text);
+  line-height: 1.3;
+}
+
+.md-body h1 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin: 2rem 0 0.7rem;
+}
+
+.md-body h2 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  margin: 1.8rem 0 0.6rem;
+  padding-bottom: 0.3rem;
+  border-bottom: 1px solid var(--tp-rule);
+}
+
+.md-body h3 {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin: 1.5rem 0 0.4rem;
+}
+
+.md-body h4,
+.md-body h5,
+.md-body h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin: 1.2rem 0 0.3rem;
+}
+
+.md-body :is(h1, h2, h3, h4, h5, h6):first-child {
+  margin-top: 0;
+}
+
+/* ── Body text ────────────────────────────────────────────────────── */
+
+.md-body p {
+  margin: 0 0 0.9rem;
+}
+
+.md-body > :last-child {
+  margin-bottom: 0;
+}
+
+.md-body strong {
+  color: var(--tp-text);
+  font-weight: 600;
+}
+
+/* ── Links ────────────────────────────────────────────────────────── */
+
+.md-body a {
+  color: var(--tp-accent);
+  text-decoration: none;
+  border-bottom: 1px solid var(--tp-accent-line-soft);
+  transition: border-color var(--tp-motion-quick) var(--tp-motion-easing);
+}
+
+.md-body a:hover {
+  border-bottom-color: var(--tp-accent);
+}
+
+/* ── Lists ────────────────────────────────────────────────────────── */
+
+.md-body ul,
+.md-body ol {
+  margin: 0 0 0.9rem;
+  padding-left: 1.5rem;
+}
+
+.md-body li {
+  margin-bottom: 0.25rem;
+}
+
+.md-body li::marker {
+  color: var(--tp-accent);
+}
+
+.md-body ul > li {
+  list-style-type: disc;
+}
+
+.md-body ol > li {
+  list-style-type: decimal;
+}
+
+.md-body li > ul,
+.md-body li > ol {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+
+/* ── Inline code ──────────────────────────────────────────────────── */
+
+.md-body code {
+  font-family: var(--tp-font-doing);
+  font-size: 0.82em;
+  color: var(--tp-text);
+  background: var(--tp-surface-raised);
+  padding: 0.12em 0.35em;
+  border-radius: var(--tp-radius-chip);
+}
+
+/* ── Code blocks ──────────────────────────────────────────────────── */
+
+.md-body pre {
+  background: var(--tp-surface-raised);
+  border: 1px solid var(--tp-rule);
+  border-radius: var(--tp-radius-chip);
+  padding: 0.8rem 1rem;
+  margin: 0 0 0.9rem;
+  overflow-x: auto;
+}
+
+.md-body pre code {
+  background: none;
+  padding: 0;
+  color: var(--tp-text-muted);
+  font-size: 0.8rem;
+  line-height: 1.6;
+  overflow-wrap: normal;
+}
+
+/* ── Blockquotes ──────────────────────────────────────────────────── */
+
+.md-body blockquote {
+  border-left: 2px solid var(--tp-accent-line-soft);
+  margin: 0 0 0.9rem;
+  padding: 0.3rem 0 0.3rem 1.1rem;
+  color: var(--tp-text-subtle);
+  font-style: italic;
+}
+
+.md-body blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Horizontal rules ─────────────────────────────────────────────── */
+
+.md-body hr {
+  border: none;
+  border-top: 1px solid var(--tp-rule);
+  margin: 1.6rem 0;
+}
+
+/* ── Tables ───────────────────────────────────────────────────────── */
+
+.md-body table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  margin: 0 0 0.9rem;
+  font: 0.85rem/1.5 var(--tp-font-ui);
+}
+
+.md-body th {
+  text-align: left;
+  padding: 0.45rem 0.7rem;
+  border-bottom: 1px solid var(--tp-rule-strong);
+  font: 0.62rem var(--tp-font-doing);
+  letter-spacing: var(--tp-tracking-strip);
+  text-transform: uppercase;
+  color: var(--tp-text-subtle);
+}
+
+.md-body td {
+  padding: 0.4rem 0.7rem;
+  border-bottom: 1px solid var(--tp-rule);
+}
+
+.md-body tr:last-child td {
+  border-bottom: none;
+}
+
+/* ── Refusals ─────────────────────────────────────────────────────── */
+
+/* Both arrive inside the sanitized string — `REFUSAL_HTML` from the parse gate (`markdown`),
+   `md-withheld` from the sanitizer's image arm (`sanitize`). A verdict, not an alarm: the muted
+   register for a refusal; for a withheld fetch, the gave-up region's colours, marker and dotted
+   edge (`region.css`), because it is a wait the renderer chose not to make. */
+.md-body .md-refusal {
+  color: var(--tp-text-subtle);
+  font-style: italic;
+}
+
+.md-body .md-withheld {
+  display: inline-block;
+  padding: 0.1rem 0.5rem;
+  border: 1px dotted var(--tp-region-gave-up);
+  border-radius: var(--tp-radius-chip);
+  background: var(--tp-region-gave-up-wash);
+  color: var(--tp-region-gave-up);
+  font: 0.75rem var(--tp-font-doing);
+}
+
+.md-body .md-withheld::before {
+  content: '⊘ ';
+}
+
+/* ── Body links temper did not vouch for ──────────────────────────── */
+
+/* Set by the sanitize pass (`sanitize`), never by an author: `md-ref-*` is not admitted from
+   authored HTML. A resolved link is a plain link and takes no class. The two marks keep apart what
+   the region vocabulary keeps apart, on more than colour — each carries its own marker glyph and
+   its own edge:
+     absent     temper answered, and there is nothing you can see — `empty`'s register; not a link
+     unchecked  nothing was verified — `failed`'s register; still a link, since following it grants
+                nothing and the destination does its own read
+   Neither changes the text box: colour, an inline glyph and the link's existing bottom edge only —
+   no padding, border box or line height — so a mark never moves the prose it sits in. */
+.md-body .md-ref-absent {
+  color: var(--tp-region-empty);
+}
+
+.md-body a.md-ref-unchecked {
+  color: var(--tp-region-failed);
+  border-bottom-style: dashed;
+  border-bottom-color: var(--tp-region-failed);
+}
+
+.md-body .md-ref-marker {
+  font-family: var(--tp-font-doing);
+}
+
+/* The state's words for a screen reader, which reads neither the hover title nor the hidden
+   marker. Visually hidden, never `display: none` (that would hide it from assistive tech too). */
+.md-body .md-ref-said {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Images ───────────────────────────────────────────────────────── */
+
+.md-body img {
+  max-width: 100%;
+  border-radius: var(--tp-radius-chip);
+  margin: 0.4rem 0 0.9rem;
+}

package/contract/region.css

@@ -0,0 +1,98 @@
+/* The region recipe: how arriving, empty, gave-up and failed look, on every surface.
+
+   `region-states-read-alike` — the four states are distinct signals, carried on more than
+   colour. The words, marker and ARIA role come from the package's `region` module; this recipe
+   carries the other two channels, colour and border, each four-way distinct:
+
+     arriving  dashed edge, a pulsing marker   unfinished
+     empty     solid quiet edge, italic        a settled fact about the reader's material
+     gave-up   dotted edge                     a wait broken off, a decision the system owns
+     failed    solid edge, heavier words       will not resolve
+
+   A component composes it as
+
+     <p class="region-state" data-region="<state>" role="<role>">
+       <span class="region-marker" aria-hidden="true"><marker></span>
+       <span><words><span class="region-qualifier"><qualifier></span></span>
+     </p>
+
+   and adds nothing of its own: a call site that restyles a state is the drift this recipe
+   exists to prevent. Roles only — no literal colour appears here. */
+
+.region-state {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0;
+  padding: 7px 9px;
+  border-left: 2px solid;
+  border-radius: 0 5px 5px 0;
+  font-family: var(--tp-font-ui);
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+.region-marker {
+  flex: none;
+  font: 11px/1.4 var(--tp-font-doing);
+}
+
+.region-qualifier,
+.region-detail {
+  font-weight: 400;
+  opacity: 0.85;
+}
+
+.region-detail {
+  margin-left: 0.35em;
+}
+
+.region-state[data-region="arriving"] {
+  border-left-style: dashed;
+  border-left-color: var(--tp-region-arriving);
+  background: var(--tp-region-arriving-wash);
+  color: var(--tp-region-arriving);
+}
+
+.region-state[data-region="arriving"] .region-marker {
+  animation: region-pulse 1.1s ease-in-out infinite;
+}
+
+.region-state[data-region="empty"] {
+  border-left-color: var(--tp-rule-strong);
+  background: var(--tp-region-empty-wash);
+  color: var(--tp-region-empty);
+  font-style: italic;
+}
+
+.region-state[data-region="gave-up"] {
+  border-left-style: dotted;
+  border-left-color: var(--tp-region-gave-up);
+  background: var(--tp-region-gave-up-wash);
+  color: var(--tp-region-gave-up);
+}
+
+.region-state[data-region="failed"] {
+  border-left-color: var(--tp-region-failed);
+  background: var(--tp-region-failed-wash);
+  color: var(--tp-region-failed);
+  font-weight: 600;
+}
+
+@keyframes region-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* The pulse is the one channel that is motion; a reader who has turned motion off keeps the
+   others. */
+@media (prefers-reduced-motion: reduce) {
+  .region-state[data-region="arriving"] .region-marker {
+    animation: none;
+  }
+}

package/contract/shadcn-bridge.css

@@ -0,0 +1,86 @@
+/* shadcn-svelte's variable names, answered from contract roles.
+
+   shadcn-svelte components (and json-render's shadcn-svelte catalog, which is built on
+   them) read `--background`, `--primary`, `--muted-foreground` and the rest. Pointing
+   those names at `--tp-*` roles means any active theme restyles them with no per-theme
+   work: a theme supplies roles once, and this file is the only place the two
+   vocabularies meet.
+
+   The bridge makes shadcn components legible in any theme. It does not make them speak
+   in temper's voice — a shadcn default Button is still a filled button, where temper's
+   primary action is a mono text action. Voice lives in temper's own components.
+
+   Import after tailwindcss and contract/tailwind.css. */
+
+:root {
+  --background: var(--tp-ground);
+  --foreground: var(--tp-text);
+  --card: var(--tp-surface);
+  --card-foreground: var(--tp-text);
+  --popover: var(--tp-surface-raised);
+  --popover-foreground: var(--tp-text);
+  --primary: var(--tp-accent);
+  --primary-foreground: var(--tp-on-accent);
+  --secondary: var(--tp-surface-raised);
+  --secondary-foreground: var(--tp-text);
+  --muted: var(--tp-surface);
+  --muted-foreground: var(--tp-text-subtle);
+  /* shadcn's `accent` is a hover fill, not an accent colour. */
+  --accent: var(--tp-accent-hover);
+  --accent-foreground: var(--tp-text);
+  --destructive: var(--tp-danger);
+  --border: var(--tp-rule-strong);
+  --input: var(--tp-rule-strong);
+  --ring: var(--tp-focus);
+  --radius: var(--tp-radius-chip);
+  --chart-1: var(--tp-cat-1);
+  --chart-2: var(--tp-cat-2);
+  --chart-3: var(--tp-cat-3);
+  --chart-4: var(--tp-cat-4);
+  --chart-5: var(--tp-cat-5);
+  --sidebar: var(--tp-surface);
+  --sidebar-foreground: var(--tp-text-muted);
+  --sidebar-primary: var(--tp-accent);
+  --sidebar-primary-foreground: var(--tp-on-accent);
+  --sidebar-accent: var(--tp-accent-hover);
+  --sidebar-accent-foreground: var(--tp-text);
+  --sidebar-border: var(--tp-rule);
+  --sidebar-ring: var(--tp-focus);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 1px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 1px);
+}

package/contract/tailwind-roles.css

@@ -0,0 +1,67 @@
+/* Generated from contract/theme.schema.json by themes/scripts/themes.sh build. Do not edit.
+   The roles as utilities WITHOUT the default-palette reset: for a consumer still moving
+   off Tailwind's palette. Import after tailwindcss and before any theme.css. */
+
+@theme inline {
+  --color-tp-ground: var(--tp-ground);
+  --color-tp-surface: var(--tp-surface);
+  --color-tp-surface-raised: var(--tp-surface-raised);
+  --color-tp-overlay: var(--tp-overlay);
+  --color-tp-text: var(--tp-text);
+  --color-tp-text-muted: var(--tp-text-muted);
+  --color-tp-text-subtle: var(--tp-text-subtle);
+  --color-tp-text-faint: var(--tp-text-faint);
+  --color-tp-rule: var(--tp-rule);
+  --color-tp-rule-strong: var(--tp-rule-strong);
+  --color-tp-accent: var(--tp-accent);
+  --color-tp-accent-muted: var(--tp-accent-muted);
+  --color-tp-accent-line: var(--tp-accent-line);
+  --color-tp-accent-line-soft: var(--tp-accent-line-soft);
+  --color-tp-accent-wash: var(--tp-accent-wash);
+  --color-tp-accent-hover: var(--tp-accent-hover);
+  --color-tp-on-accent: var(--tp-on-accent);
+  --color-tp-focus: var(--tp-focus);
+  --color-tp-notice: var(--tp-notice);
+  --color-tp-notice-wash: var(--tp-notice-wash);
+  --color-tp-success: var(--tp-success);
+  --color-tp-success-wash: var(--tp-success-wash);
+  --color-tp-danger: var(--tp-danger);
+  --color-tp-danger-wash: var(--tp-danger-wash);
+  --color-tp-pending: var(--tp-pending);
+  --color-tp-pending-wash: var(--tp-pending-wash);
+  --color-tp-region-arriving: var(--tp-region-arriving);
+  --color-tp-region-arriving-wash: var(--tp-region-arriving-wash);
+  --color-tp-region-empty: var(--tp-region-empty);
+  --color-tp-region-empty-wash: var(--tp-region-empty-wash);
+  --color-tp-region-gave-up: var(--tp-region-gave-up);
+  --color-tp-region-gave-up-wash: var(--tp-region-gave-up-wash);
+  --color-tp-region-failed: var(--tp-region-failed);
+  --color-tp-region-failed-wash: var(--tp-region-failed-wash);
+  --color-tp-author-human: var(--tp-author-human);
+  --color-tp-author-agent: var(--tp-author-agent);
+  --color-tp-cat-1: var(--tp-cat-1);
+  --color-tp-cat-2: var(--tp-cat-2);
+  --color-tp-cat-3: var(--tp-cat-3);
+  --color-tp-cat-4: var(--tp-cat-4);
+  --color-tp-cat-5: var(--tp-cat-5);
+  --color-tp-cat-6: var(--tp-cat-6);
+  --color-tp-cat-7: var(--tp-cat-7);
+  --color-tp-cat-8: var(--tp-cat-8);
+  --color-tp-cat-neutral: var(--tp-cat-neutral);
+  --color-tp-code-key: var(--tp-code-key);
+  --color-tp-code-string: var(--tp-code-string);
+  --color-tp-code-number: var(--tp-code-number);
+  --color-tp-code-comment: var(--tp-code-comment);
+  --font-tp-reading: var(--tp-font-reading);
+  --font-tp-doing: var(--tp-font-doing);
+  --font-tp-ui: var(--tp-font-ui);
+  --radius-tp-chip: var(--tp-radius-chip);
+  --radius-tp-panel: var(--tp-radius-panel);
+  --tracking-tp-label: var(--tp-tracking-label);
+  --tracking-tp-strip: var(--tp-tracking-strip);
+  --tracking-tp-eyebrow: var(--tp-tracking-eyebrow);
+  --tracking-tp-ui: var(--tp-tracking-ui);
+  --tracking-tp-mark: var(--tp-tracking-mark);
+  --default-transition-duration: var(--tp-motion-quick);
+  --default-transition-timing-function: var(--tp-motion-easing);
+}

package/contract/tailwind.css

@@ -0,0 +1,70 @@
+/* Generated from contract/theme.schema.json by themes/scripts/themes.sh build. Do not edit.
+   Import after tailwindcss and before any theme.css. */
+
+@theme {
+  --color-*: initial;
+}
+
+@theme inline {
+  --color-tp-ground: var(--tp-ground);
+  --color-tp-surface: var(--tp-surface);
+  --color-tp-surface-raised: var(--tp-surface-raised);
+  --color-tp-overlay: var(--tp-overlay);
+  --color-tp-text: var(--tp-text);
+  --color-tp-text-muted: var(--tp-text-muted);
+  --color-tp-text-subtle: var(--tp-text-subtle);
+  --color-tp-text-faint: var(--tp-text-faint);
+  --color-tp-rule: var(--tp-rule);
+  --color-tp-rule-strong: var(--tp-rule-strong);
+  --color-tp-accent: var(--tp-accent);
+  --color-tp-accent-muted: var(--tp-accent-muted);
+  --color-tp-accent-line: var(--tp-accent-line);
+  --color-tp-accent-line-soft: var(--tp-accent-line-soft);
+  --color-tp-accent-wash: var(--tp-accent-wash);
+  --color-tp-accent-hover: var(--tp-accent-hover);
+  --color-tp-on-accent: var(--tp-on-accent);
+  --color-tp-focus: var(--tp-focus);
+  --color-tp-notice: var(--tp-notice);
+  --color-tp-notice-wash: var(--tp-notice-wash);
+  --color-tp-success: var(--tp-success);
+  --color-tp-success-wash: var(--tp-success-wash);
+  --color-tp-danger: var(--tp-danger);
+  --color-tp-danger-wash: var(--tp-danger-wash);
+  --color-tp-pending: var(--tp-pending);
+  --color-tp-pending-wash: var(--tp-pending-wash);
+  --color-tp-region-arriving: var(--tp-region-arriving);
+  --color-tp-region-arriving-wash: var(--tp-region-arriving-wash);
+  --color-tp-region-empty: var(--tp-region-empty);
+  --color-tp-region-empty-wash: var(--tp-region-empty-wash);
+  --color-tp-region-gave-up: var(--tp-region-gave-up);
+  --color-tp-region-gave-up-wash: var(--tp-region-gave-up-wash);
+  --color-tp-region-failed: var(--tp-region-failed);
+  --color-tp-region-failed-wash: var(--tp-region-failed-wash);
+  --color-tp-author-human: var(--tp-author-human);
+  --color-tp-author-agent: var(--tp-author-agent);
+  --color-tp-cat-1: var(--tp-cat-1);
+  --color-tp-cat-2: var(--tp-cat-2);
+  --color-tp-cat-3: var(--tp-cat-3);
+  --color-tp-cat-4: var(--tp-cat-4);
+  --color-tp-cat-5: var(--tp-cat-5);
+  --color-tp-cat-6: var(--tp-cat-6);
+  --color-tp-cat-7: var(--tp-cat-7);
+  --color-tp-cat-8: var(--tp-cat-8);
+  --color-tp-cat-neutral: var(--tp-cat-neutral);
+  --color-tp-code-key: var(--tp-code-key);
+  --color-tp-code-string: var(--tp-code-string);
+  --color-tp-code-number: var(--tp-code-number);
+  --color-tp-code-comment: var(--tp-code-comment);
+  --font-tp-reading: var(--tp-font-reading);
+  --font-tp-doing: var(--tp-font-doing);
+  --font-tp-ui: var(--tp-font-ui);
+  --radius-tp-chip: var(--tp-radius-chip);
+  --radius-tp-panel: var(--tp-radius-panel);
+  --tracking-tp-label: var(--tp-tracking-label);
+  --tracking-tp-strip: var(--tp-tracking-strip);
+  --tracking-tp-eyebrow: var(--tp-tracking-eyebrow);
+  --tracking-tp-ui: var(--tp-tracking-ui);
+  --tracking-tp-mark: var(--tp-tracking-mark);
+  --default-transition-duration: var(--tp-motion-quick);
+  --default-transition-timing-function: var(--tp-motion-easing);
+}