@howells/hairline 0.0.0-stage → 0.2.0

package/lib/theme.css

@@ -0,0 +1,443 @@
+@source "./charts";
+
+/*
+ * Hairline's chart styles: the colour names, text roles, rules, motion and
+ * textures every chart draws with. Import it after Tailwind in the host's CSS:
+ *
+ *   @import "tailwindcss";
+ *   @import "@howells/hairline/tokens.css";
+ *   @import "@howells/hairline/theme.css";
+ *
+ * The palette itself is CSS variables (tokens.css): override --hl-paper, --hl-ink,
+ * --hl-muted, --hl-rule, --hl-l0 … --hl-l6, --hl-hero and --hl-alert to match the host.
+ */
+/*
+ * Palette variables (tokens.css) exposed as Tailwind colours, so markup reads
+ * `bg-paper text-muted fill-ink stroke-rule`. `inline` keeps them as live
+ * var() references, so palette switches and dark cards recolour utilities too.
+ */
+@theme inline {
+  --color-paper: var(--hl-paper);
+  --color-panel: var(--hl-panel);
+  --color-ink: var(--hl-ink);
+  --color-text: var(--hl-text);
+  --color-muted: var(--hl-muted);
+  --color-faint: var(--hl-faint);
+  --color-grid: var(--hl-grid);
+  --color-rule: var(--hl-rule);
+  --color-l0: var(--hl-l0);
+  --color-l1: var(--hl-l1);
+  --color-l2: var(--hl-l2);
+  --color-l3: var(--hl-l3);
+  --color-l4: var(--hl-l4);
+  --color-l5: var(--hl-l5);
+  --color-l6: var(--hl-l6);
+  --color-hero: var(--hl-hero);
+  --color-hero-soft: var(--hl-hero-soft);
+  --color-alert: var(--hl-alert);
+  --color-alert-soft: var(--hl-alert-soft);
+  --color-alert-faded: var(--hl-alert-faded);
+  --color-alert-rule: var(--hl-alert-rule);
+  --color-cat-1: var(--hl-cat-1);
+  --color-cat-2: var(--hl-cat-2);
+  --color-cat-3: var(--hl-cat-3);
+  --color-cat-4: var(--hl-cat-4);
+  --color-heat-1: var(--hl-heat-1);
+  --color-heat-2: var(--hl-heat-2);
+  --color-heat-3: var(--hl-heat-3);
+  --color-heat-4: var(--hl-heat-4);
+  --color-heat-5: var(--hl-heat-5);
+
+  /* Board colours: only defined inside .surface-board. */
+  --color-s1: var(--hl-s1);
+  --color-s1-active: var(--hl-s1-active);
+  --color-s1-future: var(--hl-s1-future);
+  --color-s2: var(--hl-s2);
+  --color-s2-active: var(--hl-s2-active);
+  --color-s2-future: var(--hl-s2-future);
+  --color-s3: var(--hl-s3);
+  --color-s3-active: var(--hl-s3-active);
+  --color-s3-future: var(--hl-s3-future);
+  --color-line1: var(--hl-line1);
+  --color-line1-future: var(--hl-line1-future);
+  --color-line2: var(--hl-line2);
+  --color-line2-future: var(--hl-line2-future);
+  --color-area1: var(--hl-area1);
+  --color-area2: var(--hl-area2);
+  --color-area3: var(--hl-area3);
+  --color-band-past: var(--hl-band-past);
+  --color-band-future: var(--hl-band-future);
+  --color-red: var(--hl-red);
+  --color-red-past: var(--hl-red-past);
+  --color-red-future: var(--hl-red-future);
+  --color-red-soft: var(--hl-red-soft);
+  --color-red-rule: var(--hl-red-rule);
+  --color-board-bar: var(--hl-board-bar);
+  --color-board-label-2: var(--hl-board-label-2);
+  --color-board-swatch-3: var(--hl-board-swatch-3);
+  --color-board-link: var(--hl-board-link);
+  --color-board-link-hot: var(--hl-board-link-hot);
+  --color-board-hot: var(--hl-board-hot);
+
+  /*
+   * The type case: three sizes, five roles. Every chart word is 11px (the
+   * t-axis, t-label and t-value roles, told apart by weight); a chart may
+   * lead with one 30px figure (t-figure); the page around the charts (chart
+   * names, the header, sources) is 13.5px. howells/no-raw-type-utilities
+   * (oxlint.config.ts) rejects any other size, weight, leading or tracking.
+   */
+  --text-tick: 11px;
+  --text-figure: 30px;
+  --text-small: 13.5px;
+
+  --radius-tip: 10px;
+
+  --shadow-ring: inset 0 0 0 1px var(--hl-rule);
+  --shadow-hollow: inset 0 0 0 1.5px currentColor;
+  --shadow-swatch: 0 0 0 1px var(--hl-paper);
+
+  /* `stroke-medium`: board lines, between the 1px rule and 2px glance marks. */
+  --stroke-width-medium: 1.5;
+
+  /* The motion curves, from tokens.css, for `ease-enter` and kin. */
+  --ease-enter: var(--hl-ease-enter);
+  --ease-travel: var(--hl-ease-travel);
+  --ease-tone: var(--hl-ease-tone);
+}
+
+/*
+ * SVG text roles. Charts pick a role, never a font. Everything is Inter unless the host sets --hl-font, in
+ * sentence case, with tabular figures wherever numbers line up. Axis, label
+ * and value share one size and differ by weight and tone only; figure is the
+ * single big number a chart may lead with.
+ */
+/* Ticks, scale labels, keys, units and notes. */
+@utility t-axis {
+  fill: var(--hl-muted);
+  font-family: var(--hl-font, var(--font-sans));
+  font-size: --theme(--text-tick);
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Category, series and place names. */
+@utility t-label {
+  fill: var(--hl-text);
+  font-family: var(--hl-font, var(--font-sans));
+  font-size: --theme(--text-tick);
+  font-weight: 500;
+}
+
+/* Data values. */
+@utility t-value {
+  fill: var(--hl-ink);
+  font-family: var(--hl-font, var(--font-sans));
+  font-size: --theme(--text-tick);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The one big figure a chart may lead with. */
+@utility t-figure {
+  fill: var(--hl-ink);
+  font-family: var(--hl-font, var(--font-sans));
+  font-size: --theme(--text-figure);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Text over marks: a paper-coloured stroke behind the glyphs. */
+@utility t-halo {
+  paint-order: stroke;
+  stroke: var(--hl-paper);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+/* Hover on anything whose colour (text, fill or stroke) and opacity both change. */
+@utility transition-tone {
+  transition-property: color, fill, stroke, opacity;
+  transition-timing-function: var(--tw-ease, var(--hl-ease-tone));
+  transition-duration: var(--tw-duration, var(--hl-duration-hover));
+}
+
+/* Hover swell on SVG circles; no stock utility transitions `r`. */
+@utility transition-radius {
+  transition-property: r;
+  transition-timing-function: var(--tw-ease, var(--hl-ease-tone));
+  transition-duration: var(--tw-duration, var(--hl-duration-hover));
+}
+
+/* Duration tokens as utilities, for transitions that aren't hover. */
+@utility duration-change {
+  --tw-duration: var(--hl-duration-change);
+  transition-duration: var(--hl-duration-change);
+}
+
+@utility duration-enter {
+  --tw-duration: var(--hl-duration-enter);
+  transition-duration: var(--hl-duration-enter);
+}
+
+/* Baselines and axes: full ink, sharply distinct from the faint grid. */
+@utility hairline {
+  stroke: var(--hl-ink);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+
+/* Quiet structural rules: leaders, connectors, tracks, per-row lines. */
+@utility rule {
+  stroke: var(--hl-rule);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+
+/*
+ * The paper's grain, under everything on a surface: a very faint noise in the
+ * ink's colour. It sits behind the marks, never over them, so ink stays crisp.
+ */
+@utility grain {
+  background-image: var(--hl-grain);
+}
+
+/* The grid: solid 1px hairlines in --hl-grid, snapped. Never dotted. */
+@utility grid-line {
+  stroke: var(--hl-grid);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+
+/* Pixel-snapped straight rules, or anti-aliased curves (e.g. a dotted ring). */
+@utility shape-crisp {
+  shape-rendering: crispEdges;
+}
+
+@utility shape-smooth {
+  shape-rendering: auto;
+}
+
+/* The one dash: a target or SLA rule. Everything provisional is dotted (texture.tsx). */
+@utility dash-rule {
+  stroke-dasharray: 4 3;
+}
+
+/* Round joins and caps for data lines. */
+@utility cap-round {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/*
+ * Entry motion. A Plot is .is-hidden until it scrolls into view, then
+ * .is-shown. Marks that appear in place arrive on --hl-ease-enter; lines and
+ * wipes that cross the chart travel on --hl-ease-travel. Durations and steps are
+ * the tokens in tokens.css. Order marks with stagger(i, tier) from charts/util.
+ *
+ * Bars and areas grow from scale 0 on purpose: that edge is their baseline,
+ * so the mark rises from the axis rather than appearing from a point.
+ *
+ * Under reduced motion nothing travels or fades: the marks are simply there
+ * in the first paint (see the note after the utilities). Hiding is for screens only: in
+ * print media an unrevealed plot is drawn in full, so an all-charts print page
+ * never exports blank. A plot with animation off (or under reduced motion once
+ * the page knows) carries neither class, and is simply drawn.
+ */
+@keyframes grow-y {
+  from {
+    transform: scaleY(0);
+  }
+}
+@keyframes grow-x {
+  from {
+    transform: scaleX(0);
+  }
+}
+@keyframes pop {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+/*
+ * The dash exists only while the line draws on: fill-mode is backwards, so
+ * once it ends the line is whole again (round caps and all) with no dash.
+ */
+@keyframes draw {
+  from {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+@utility grow-y {
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+  @media screen and (prefers-reduced-motion: no-preference) {
+    :where(.is-hidden) & {
+      transform: scaleY(0);
+    }
+    :where(.is-shown) & {
+      animation: grow-y var(--hl-duration-grow) var(--hl-ease-enter) both;
+      animation-delay: calc(
+        var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-mark))
+      );
+    }
+  }
+}
+
+@utility from-top {
+  &.grow-y {
+    transform-origin: 50% 0%;
+  }
+}
+
+@utility grow-x {
+  transform-box: fill-box;
+  transform-origin: 0% 50%;
+  @media screen and (prefers-reduced-motion: no-preference) {
+    :where(.is-hidden) & {
+      transform: scaleX(0);
+    }
+    :where(.is-shown) & {
+      animation: grow-x var(--hl-duration-grow) var(--hl-ease-enter) both;
+      animation-delay: calc(
+        var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-mark))
+      );
+    }
+  }
+}
+
+@utility from-right {
+  &.grow-x {
+    transform-origin: 100% 50%;
+  }
+}
+
+@utility pop {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  @media screen and (prefers-reduced-motion: no-preference) {
+    :where(.is-hidden) & {
+      opacity: 0;
+    }
+    :where(.is-shown) & {
+      animation: pop var(--hl-duration-enter) var(--hl-ease-enter) both;
+      animation-delay: calc(
+        var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-fine))
+      );
+    }
+  }
+}
+
+/* The left-to-right wipe that reveals board charts: one long arrival. */
+@utility sweep {
+  transform-box: fill-box;
+  transform-origin: 0% 50%;
+  @media screen and (prefers-reduced-motion: no-preference) {
+    :where(.is-hidden) & {
+      transform: scaleX(0);
+    }
+    :where(.is-shown) & {
+      animation: grow-x var(--hl-duration-long) var(--hl-ease-travel) both;
+    }
+  }
+}
+
+@utility fade {
+  @media screen and (prefers-reduced-motion: no-preference) {
+    :where(.is-hidden) & {
+      opacity: 0;
+    }
+    :where(.is-shown) & {
+      animation: fade-in var(--hl-duration-enter) var(--hl-ease-enter) both;
+      animation-delay: calc(
+        var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-mark)) +
+          var(--hl-fade-lag)
+      );
+    }
+  }
+}
+
+@utility draw {
+  @media screen and (prefers-reduced-motion: no-preference) {
+    :where(.is-hidden) & {
+      stroke-dasharray: 1;
+      stroke-dashoffset: 1;
+    }
+    :where(.is-shown) & {
+      animation: draw var(--hl-duration-long) var(--hl-ease-travel) backwards;
+      animation-delay: calc(
+        var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-series))
+      );
+    }
+  }
+}
+
+/* A still plot (animation off) plays no entry: it is simply drawn. */
+.is-still {
+  animation: none;
+}
+
+/*
+ * Under reduced motion the plot is drawn in the first paint: every hiding rule
+ * above sits under no-preference, so .is-hidden has no effect here and nothing
+ * fades or travels. `data-hl-ready` may still read "false" in the server HTML;
+ * it turns "true" once hydration has read the preference.
+ */
+
+/*
+ * A chart's note (Frame, and the gallery cell): a popover hung below its (i) and
+ * running left, since the (i) ends a cell's caption row, or above it where
+ * it only fits above. A note that fits neither way scrolls inside the room
+ * below. Without anchor positioning it keeps the browser's own place, centred
+ * in the viewport. It settles 4px into place as it fades in; under reduced
+ * motion it is simply there.
+ */
+@position-try --hl-note-scroll {
+  position-area: bottom span-left;
+  max-height: calc(100% - 1.5rem);
+}
+
+@utility note-pop {
+  width: min(20rem, calc(100vw - 2rem));
+  @supports (position-area: bottom) {
+    inset: auto;
+    margin: 0.625rem 0 0;
+    position-area: bottom span-left;
+    position-try-fallbacks: flip-block, --hl-note-scroll;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      opacity var(--hl-duration-hover) var(--hl-ease-enter),
+      translate var(--hl-duration-hover) var(--hl-ease-enter),
+      display var(--hl-duration-hover) allow-discrete,
+      overlay var(--hl-duration-hover) allow-discrete;
+    &:not(:popover-open) {
+      opacity: 0;
+      translate: 0 -4px;
+    }
+    @starting-style {
+      &:popover-open {
+        opacity: 0;
+        translate: 0 -4px;
+      }
+    }
+  }
+}
+
+/* Slide scale, one-device-pixel policy: the viewBox scales the composition but
+   every stroke stays one device pixel wide. */
+svg[data-hl-strokes="device"] * {
+  vector-effect: non-scaling-stroke;
+}

package/lib/theme.js

@@ -0,0 +1 @@
+export { deriveTheme } from "./theme/derive.js";