@humanforest/slidev-theme 0.1.0

package/components/LineChart.vue

@@ -0,0 +1,133 @@
+<script setup>
+/*
+  A line chart sized for a room — one to five series over a shared category axis.
+
+  Built on @unovis/vue directly, which is the deck's whole chart stack: the marks are real Unovis
+  components, the ceremony is ChartFrame.vue, and the data shaping is chartData.ts. Colours come
+  from --deck-series-1…5, which alias the published categorical palette in the product's order, so
+  a deck line and a product line of the same data are the same chart.
+
+  A line CLAIMS the space between its points, so it is the right mark only when the x axis is a
+  real sequence — weeks, months, versions. For unordered categories the claim is false and the
+  chart wants bars.
+
+  Missing readings stay missing: chartData.ts never coerces a null to zero, and Unovis renders the
+  gap. A run of rows with no readings at all draws the empty state rather than a line along the
+  floor.
+*/
+import { computed } from 'vue';
+import { VisXYContainer, VisAxis, VisLine, VisCrosshair, VisTooltip } from '@unovis/vue';
+import { deckTooltip, seriesTip } from './chartTip';
+import { motionDuration } from './motionDuration';
+import ChartFrame from './ChartFrame.vue';
+import { chartState, formatValue, labelAt, stateMessage, tickIndices, CROSSHAIR_CIRCLE_R, CROSSHAIR_HIDE_WHEN_FAR } from './chartData';
+
+const props = defineProps({
+  /** Rows: `[{ label, <seriesKey>: number, … }]`. `label` names the point on the x axis. */
+  data: { type: Array, required: true },
+  /** Series to plot, in legend order: `[{ key, name }]`. Omit and every numeric field on the first row becomes a series. */
+  series: { type: Array, default: null },
+  /** Plot height in px. 0 FILLS, and is the default: the chart takes whatever box it is given,
+   *  which is what a chart under a heading wants. Unovis resolves `config.height || containerHeight`,
+   *  so a falsy height makes the container measure itself. Pass a number where the box has no
+   *  definite height of its own — a tiled grid cell, a figure beside copy. */
+  height: { type: Number, default: 0 },
+  /** Draw the series legend. */
+  legend: { type: Boolean, default: true },
+  /** Where the legend sits: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`
+   *  or `bottom-right`. The EDGE is reading order — above is read before the marks, below is a
+   *  caption read after them; the ALIGNMENT is for the column the chart sits in, centred under a
+   *  full-width plot and pulled to an edge where a centred key would float in a gutter. */
+  legendPosition: {
+    type: String,
+    default: 'bottom-center',
+    validator: (p) => ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(p),
+  },
+  /** Title under the x axis. Omit when the labels already say what they are. */
+  xLabel: { type: String, default: null },
+  /** Title beside the y axis. Omit when the unit is in the slide's heading. */
+  yLabel: { type: String, default: null },
+  /** Formats the y tick labels. Defaults to British grouping, compact past four digits. */
+  format: { type: Function, default: formatValue },
+  /** Ceiling on x tick labels. Deck labels are 36px, so more than a handful collide. */
+  maxTicks: { type: Number, default: 6 },
+  /** Draw the two axes. Off is a SHAPE reading — the marks alone, no scale — for a chart that is
+   *  being shown rather than read: a specimen, a register test, a sparkline beside a figure.
+   *
+   *  ★ IT REMOVES THEM, IT DOES NOT HIDE THEM. Unovis reserves the axis band whether or not the
+   *  axis paints, so hiding one in CSS leaves the plot inset by a tick row and a label column that
+   *  are no longer there — measured at a 150px plot, the marks drew 22px of a 63px box. Not
+   *  rendering the component is what gives the room back.
+   *
+   *  ⚠ A chart carrying VALUES needs its scale. Turning this off says the reading is the shape. */
+  axes: { type: Boolean, default: true },
+  /** The sentence drawn when there is nothing to plot. */
+  empty: { type: String, default: 'No data' },
+});
+
+const state = computed(() => chartState(props.data, props.series));
+const message = computed(() => (state.value.kind === 'ready' ? null : stateMessage(state.value, props.empty)));
+const seriesList = computed(() => (state.value.kind === 'ready' ? state.value.series : []));
+
+const x = (_d, i) => i;
+const y = computed(() => seriesList.value.map((s) => (d) => d[s.key]));
+const colors = computed(() => seriesList.value.map((s) => s.color));
+
+const xTicks = computed(() => tickIndices(props.data?.length ?? 0, props.maxTicks));
+const xFormat = (v) => labelAt(props.data ?? [], v);
+
+/*
+  ★ THE CROSSHAIR CARRIES THE TOOLTIP, not the line. A line chart is read at an x position — every
+  series has a value there — so the hover target is the COLUMN, not the stroke. Hovering a 6px line
+  to a pixel is not something anyone does from a lectern, and a per-mark trigger would report one
+  series where the reader is comparing all of them.
+
+  The title falls out of the row itself: `forestTooltip` defaults it to the datum's first property,
+  and the deck's rows lead with `label`.
+*/
+/* Read at mount so `prefers-reduced-motion` is honoured; see motionDuration.ts. */
+const crosshairMs = motionDuration('instant');
+
+const tip = computed(() => seriesTip(seriesList.value, props.format));
+</script>
+
+<template>
+  <ChartFrame
+    :series="seriesList"
+    :height="height"
+    :legend="legend"
+    :legend-position="legendPosition"
+    :message="message"
+  >
+    <VisXYContainer :data="data" :height="height" :duration="0" :margin="{ top: 16, right: 24, bottom: 0, left: 0 }">
+      <!-- 6px, not the library's 2: a 2px stroke is a hairline on a projector, and the line is the
+           whole message. -->
+      <VisLine :x="x" :y="y" :color="colors" :line-width="6" />
+      <VisAxis
+        v-if="axes"
+        type="x"
+        :grid-line="false"
+        :tick-line="false"
+        :tick-values="xTicks"
+        :tick-format="xFormat"
+        :tick-padding="16"
+        :label="xLabel"
+        :label-margin="24"
+        tick-text-hide-overlapping
+      />
+      <VisAxis
+        v-if="axes"
+        type="y"
+        :tick-format="format"
+        :num-ticks="4"
+        :tick-line="false"
+        :domain-line="false"
+        :tick-padding="16"
+        :label="yLabel"
+        :label-margin="24"
+      />
+      <VisCrosshair :duration="crosshairMs" :hideWhenFarFromPointer="CROSSHAIR_HIDE_WHEN_FAR" :circleRadius="CROSSHAIR_CIRCLE_R" :x="x" :y="y" :template="tip" :color="colors" />
+      <VisTooltip v-bind="deckTooltip()" />
+    </VisXYContainer>
+  </ChartFrame>
+</template>

package/components/Logo.vue

@@ -0,0 +1,203 @@
+<script setup>
+/*
+  The Forest identity, in the four forms the brand ships — and the reason this is a component
+  rather than an <img> in a layout is that two of them cannot be drawn the same way.
+
+    mark            the rounded tile with the white tree, drawn as INLINE paths rather than the
+                    generated mark.svg. Its four parts do not share one rule: the square is
+                    forest-700 and the tree white, both brand constants; the RING is currentColor,
+                    so it reverses with the register; the inner keeps forest-950. That is
+                    packages/ui/src/logo/FLogo.vue's own split, part for part.
+    wordmark        "forest" as outlines, shipped as a single dark fill. Painted straight it
+                    dies on any dark ground — so it is drawn as a MASK and filled with
+                    currentColor, which lets it reverse. The colour that fills it is the BRAND's
+                    ink, pinned in the stylesheet below (forest-950, white on .deck-dark), not
+                    whatever the surrounding slide is set in.
+    lockup          mark + wordmark, composed HERE rather than taken from lockup-horizontal.svg.
+                    That file is one flat SVG: masking it would flatten the mark's fixed green
+                    along with the ink. Composing keeps the two halves on their own rules — the
+                    mark's green is a brand constant, the ink follows the REGISTER.
+    lockup-vertical the same composition, stacked.
+
+  ★★ THE MARK USED TO BE AN <img src="mark.svg">, AND THAT MADE IT A ONE-REGISTER LOGO. Every fill in
+  that file is baked, so the ring stayed Darkest Forest on a dark slide where the product reverses it
+  to white — the wordmark beside it turned and the mark did not. The docs' own logo page states the
+  rule the deck was quietly breaking: "the mark stays green; the ink — wordmark AND OUTLINE — is
+  forest-950 on light and reverses to white on dark". Inline paths are what let the outline take
+  currentColor, which is the only reason this is markup rather than a file.
+
+  Geometry comes from the engine's own lockup constants, so a composed lockup is metrically identical
+  to the generated lockup-horizontal.svg / lockup-vertical.svg rather than approximating them.
+*/
+import { computed } from 'vue'
+import wordmarkUrl from '@humanforest/tokens/logos/wordmark.svg'
+// The lockup GEOMETRY, from the engine rather than measured off the artwork. `@humanforest/tokens/logo`
+// is a public export with zero imports — a pure geometry leaf, so taking it costs nothing and this
+// component can no longer drift from the SVGs scripts/logo.ts generates from the same constants.
+import { MARK, MARK_SIZE, WORDMARK_W, WORDMARK_H, LOCKUP_H, LOCKUP_V } from '@humanforest/tokens/logo'
+
+const props = defineProps({
+  /** Which identity form to draw: the self-contained mark, the currentColor-masked wordmark, or a composed mark+wordmark lockup (horizontal or vertical). */
+  variant: {
+    type: String,
+    default: 'mark',
+    validator: (v) => ['mark', 'wordmark', 'lockup', 'lockup-vertical'].includes(v),
+  },
+  /* Height of the MARK in px, which is what sets the scale of every form. Named `size` rather
+     than `width` because the wordmark and the lockup have different widths at the same size. */
+  size: { type: Number, default: 160 },
+})
+
+/* Both gaps are the distance from the mark's edge to where the wordmark starts, taken from the
+   canonical lockups. They are NOT the same number — horizontal 104.03, vertical 61.32 — which is
+   why this was worth deriving: a single hand-copied gap made the vertical lockup 1.7x too airy.
+   The vertical lockup also CENTRES the mark over the wordmark (LOCKUP_V.mark[0] = 203.387 in an
+   842-wide box, i.e. dead centre), where the horizontal one is baseline-ish and left-aligned. */
+const GAP_H = LOCKUP_H.word[0] - MARK_SIZE
+const GAP_V = LOCKUP_V.word[1] - MARK_SIZE
+
+const unit = computed(() => props.size / MARK_SIZE)
+const wordmarkWidth = computed(() => WORDMARK_W * unit.value)
+const wordmarkHeight = computed(() => WORDMARK_H * unit.value)
+const gap = computed(() => (props.variant === 'lockup-vertical' ? GAP_V : GAP_H) * unit.value)
+
+/* The wordmark as a mask. background-color: currentColor is what the mask reveals, so the ink
+   is inherited rather than baked. */
+const inkStyle = computed(() => ({
+  width: `${wordmarkWidth.value}px`,
+  height: `${wordmarkHeight.value}px`,
+  maskImage: `url(${wordmarkUrl})`,
+  WebkitMaskImage: `url(${wordmarkUrl})`,
+  maskSize: 'contain',
+  WebkitMaskSize: 'contain',
+  maskRepeat: 'no-repeat',
+  WebkitMaskRepeat: 'no-repeat',
+  maskPosition: 'center',
+  WebkitMaskPosition: 'center',
+}))
+</script>
+
+<template>
+  <svg
+    v-if="variant === 'mark'"
+    :width="size"
+    :height="size"
+    :viewBox="`0 0 ${MARK_SIZE} ${MARK_SIZE}`"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="forest-logo-mark"
+    role="img"
+    aria-label="Forest"
+  >
+    <path :d="MARK.square" fill="var(--forest-700)" />
+    <path :d="MARK.ring" fill="currentColor" />
+    <path :d="MARK.tree" fill="white" />
+    <path :d="MARK.inner" fill="var(--forest-950)" />
+  </svg>
+
+  <span v-else-if="variant === 'wordmark'" class="forest-logo-ink" :style="inkStyle" role="img" aria-label="Forest" />
+
+  <span
+    v-else
+    class="forest-logo-lockup"
+    :class="variant === 'lockup-vertical' ? 'is-vertical' : 'is-horizontal'"
+    :style="{ gap: `${gap}px` }"
+    role="img"
+    aria-label="Forest"
+  >
+    <svg
+      :width="size"
+      :height="size"
+      :viewBox="`0 0 ${MARK_SIZE} ${MARK_SIZE}`"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="forest-logo-mark"
+      aria-hidden="true"
+    >
+      <path :d="MARK.square" fill="var(--forest-700)" />
+      <path :d="MARK.ring" fill="currentColor" />
+      <path :d="MARK.tree" fill="white" />
+      <path :d="MARK.inner" fill="var(--forest-950)" />
+    </svg>
+    <span class="forest-logo-ink" :style="inkStyle" />
+  </span>
+</template>
+
+<style scoped>
+/*
+  ★★ `flex: none` ON BOTH HALVES — WITHOUT IT THE LOCKUP SILENTLY DEFORMS THE LOGOTYPE.
+
+  `.forest-logo-lockup` is an inline-flex, and a flex item shrinks by default. The mark is an <img>
+  with an intrinsic aspect ratio so it resists; the wordmark is a MASKED SPAN with no intrinsic size
+  at all, so it absorbs the entire shortfall on its own. MEASURED in a 400px cell at `size: 180`,
+  where the lockup's natural width is 571.6px: the mark stayed exactly 180px and the wordmark was
+  compressed from 348.6px to 176.9px — 49% narrower — while its HEIGHT stayed at 83.2px. Not scaled:
+  squashed. The letterforms were horizontally distorted, and "forest" beside the same mark rendered
+  visibly smaller than the vertical lockup's identical wordmark.
+
+  Nothing could catch it. Nothing overflowed, no contrast changed, and the component's own promise —
+  "metrically identical to the generated lockup-horizontal.svg rather than approximating them" — was
+  false in a way only the eye could see. Reported by Jose looking at a specimen slide: "why the
+  lockup have a smaller wordmark?"
+
+  With `flex: none` a lockup that does not fit OVERFLOWS instead, which is loud, catchable by
+  scripts/deckAudit.ts, and the correct direction to fail in: an identity that does not fit its box
+  is a layout to change, never a logotype to stretch. Same call as `font-synthesis-style: none` in
+  base.css, and the same fix BadgeStrip.vue already documents at length for its own pills.
+*/
+/*
+  ── THE INK IS THE BRAND'S, NOT THE PAGE'S ─────────────────────────────────────────────────────
+
+  ★★ `currentColor` ON THE RING AND THE WORDMARK IS THE REVERSING MECHANISM, NOT THE COLOUR. Left
+  to inherit, both took whatever ink the slide happened to be set in — and on this deck's light
+  register that is `--deck-fg`, which is `--neutral-900`. A neutral near-black, which on cream reads
+  exactly like the artwork and is not the artwork.
+
+  The design system's own answer is unambiguous. scripts/logo.ts bakes the downloadable files
+  straight off the forest ramp:
+
+      const INK = 950, GREEN = 700; // wordmark + ring + inner = Darkest Forest; square = Dark Forest
+
+  So the ink is --forest-950 (#002A24) and the square --forest-700 (#046C4C) — and this file already
+  pinned the square and the tree's inner detail to exactly those, leaving only the two currentColor
+  paths to drift. They no longer do.
+
+  ★ THE REVERSE STAYS, because that is what currentColor was for: on `.deck-dark` the ink goes to
+  --neutral-0, which is the rule apps/docs' logo foundations page states and the one the specimen's
+  own Logo slides assert in prose ("forest-950 on the left and reverses to white on the right").
+  Pinning the light half is what makes that sentence true; it was measurably false before.
+
+  ⚠ THE CHROME IS NOT A DESCENDANT OF THE SLIDE, and it still gets this right. slide-top.vue puts
+  its own `.deck-dark` on `.deck-chrome-mark` per END rather than inheriting one — the fix it
+  documents at length for the pill — so the mark inside it resolves on the register it is drawn in.
+*/
+.forest-logo-mark,
+.forest-logo-ink,
+.forest-logo-lockup {
+  color: var(--forest-950);
+}
+.deck-dark .forest-logo-mark,
+.deck-dark .forest-logo-ink,
+.deck-dark .forest-logo-lockup {
+  color: var(--neutral-0);
+}
+.forest-logo-mark {
+  display: block;
+  height: auto;
+  flex: none;
+}
+.forest-logo-ink {
+  display: block;
+  background-color: currentColor;
+  flex: none;
+}
+.forest-logo-lockup {
+  display: inline-flex;
+  align-items: center;
+}
+/* Centred, matching LOCKUP_V — the vertical lockup stacks the mark over the wordmark's midline. */
+.forest-logo-lockup.is-vertical {
+  flex-direction: column;
+  align-items: center;
+}
+</style>