@misoto22/design 0.3.1 → 0.6.0

package/dist/tokens.css

@@ -76,6 +76,59 @@
 
   --shadow-offset: var(--clay);
 
+  /* ─── Data ───────────────────────────────────────────────────────────────
+     The series ramp a chart paints with, and the one place the White Reset
+     has to answer a question a monochrome system would rather not be asked:
+     how do you tell six lines apart with no hue left to spend?
+
+     The answer is that hue was never the primary carrier here — TEXTURE is.
+     Every chart primitive ships a fill variant (hatched, dotted, lines,
+     stripped, duotone) and the series ramp below is the SECOND encoding, not
+     the first. That ordering is what makes the set legible to a colour-blind
+     reader, in greyscale print, and under forced-colours, none of which a
+     hue-first categorical palette survives.
+
+     The eight steps are interleaved rather than sequential — light, dark,
+     light, dark — so neighbouring series sit as far apart on the lightness
+     ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100)
+     against a 15 floor, and every step clears 3:1 on its own ground.
+
+     Two checks a chromatic palette would pass fail here BY DESIGN, and are
+     stated rather than hidden: the chroma floor (these are greys) and the
+     lightness band (--series-1 is ink, and ink is the darkest mark the system
+     has). Texture plus a legend is the relief, and both are mandatory —
+     `Chart.Legend` is not optional above one series.
+
+     A consumer who genuinely needs hue does not hand-pick hexes: it sets
+     `data-chart-palette="chroma"` (see themes.css), which re-points these
+     eight names onto a categorical palette validated against both grounds. */
+  --series-1: #101010;
+  --series-2: #565656;
+  --series-3: #202020;
+  --series-4: #6a6a6a;
+  --series-5: #313131;
+  --series-6: #7e7e7e;
+  --series-7: #434343;
+  --series-8: #939393;
+  /* The empty ground a part-of-whole mark is drawn against — the unfilled
+     remainder of a radial bar, the track behind a gauge. Not --rule: a track
+     is a field, and a field that reads as a hairline disappears at radius. */
+  --series-track: #eeece7;
+
+  /* How solid a translucent mark is, and the one pair of tokens in the file
+     that is NOT the same number on both grounds.
+
+     A wash is `ink at N% over the page`. On paper, ink at 14% lands around
+     #e3e3e3 — a legible, recessive band. Run the same 14% the other way and
+     paper-white over near-black lands around #2c2c2c, which on a #0d0d0d
+     ground is not a band, it is nothing. Perceived lightness is not linear and
+     the two directions do not meet in the middle, so a single number cannot
+     serve both: the dark side needs roughly twice the alpha to read as the
+     same weight of mark. Every area fill, texture and flow band in the chart
+     package reads these rather than carrying its own literal. */
+  --chart-fill: 0.14;
+  --chart-texture: 0.42;
+
   color-scheme: light;
 }
 
@@ -117,6 +170,19 @@
 
   --shadow-offset: var(--clay);
 
+  --series-1: #f4f4f2;
+  --series-2: #9b9b9b;
+  --series-3: #dddddd;
+  --series-4: #868686;
+  --series-5: #c7c7c7;
+  --series-6: #727272;
+  --series-7: #b0b0b0;
+  --series-8: #636363;
+  --series-track: #232323;
+
+  --chart-fill: 0.3;
+  --chart-texture: 0.72;
+
   color-scheme: dark;
 }
 
@@ -201,17 +267,62 @@
   --sec-tight: clamp(40px, calc(5 * var(--fluid)), 68px);
 }
 
-:root {
-  /* ─── Radius ─────────────────────────────────────────────────────────────
-     Four steps, and there is no fifth. The old law was "0 everywhere"; the
-     White Reset replaces that with a scale small enough to stay quiet on a
-     white page. A 50% circle is geometry rather than a corner and is not a
-     step here. */
-  --radius-sm: 6px; /* images, thumbnails, media frames */
-  --radius: 8px; /* inputs, buttons, small plates */
-  --radius-lg: 14px; /* feature panels, dark plates */
-  --radius-pill: 999px; /* tabs, chips, counters, circular controls */
+/* ─── Radius ───────────────────────────────────────────────────────────────
+   One ladder, and a single factor that moves the whole of it.
+
+   The four steps used to be four independent numbers, and a radius theme
+   re-typed all four. That is how the ladder went out of proportion with
+   itself: nothing held the steps in a fixed ratio, so a corner nested inside
+   another corner matched it at the one setting somebody checked and at no
+   other. Here the steps are derived, the factor is the only thing a theme
+   sets, and the proportions are the same at every setting by construction.
+
+   THE NESTING LAW. Two rounded edges separated by a gap of `p` are concentric
+   only when the inner radius is the outer minus `p`. Anything else pinches at
+   the corner — the gap narrows as it turns, which is the mismatch you see
+   before you can name it. Both directions are named below (`--radius-row`
+   subtracts, `--radius-frame` adds) so a surface never has to guess.
+
+   THE PILL IS ON THE LADDER, which is a change. It used to be exempt, on the
+   grounds that a pill is a shape rather than a corner. It is — but a square
+   theme that left every button a capsule was not a square theme, and that
+   exemption is what bought it. A true CIRCLE is still geometry and still
+   `rounded-full`: an avatar, a status dot, a spinner, a radio (which is round
+   so it cannot be mistaken for a checkbox).
+
+   Declared for `:root` AND for `[data-radius]`, rather than composed once and
+   inherited. A custom property substitutes `var()` where it is DECLARED, so a
+   ladder written only on `:root` bakes in the root's factor and a themed
+   subtree deeper in the page never reaches it — the same trap `--fluid` above
+   documents, and the reason five themes can share the themes page at all. */
+:root,
+[data-radius] {
+  --radius-factor: 1;
+  /* Clamps the factor at 1 for the ADDING direction only. A frame's air is a
+     fixed number of pixels, so `--radius-lg + 16px` would leave a rounded
+     frame around a square panel the moment the theme went square; gated, it
+     collapses to nothing along with everything else. */
+  --radius-gate: min(1, var(--radius-factor));
+
+  /* The numbers are the ones the rest of the industry settled on, and that is
+     the argument for them: 8px for a control, 12px for a panel, and 4/6 for the
+     small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and
+     ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree
+     within a pixel of this. The previous 2/4/6/10 was a step tighter than any
+     of them, which is what made a card read as a rectangle with the corners
+     shaved rather than as a rounded panel. */
+  --radius-xs: calc(4px * var(--radius-factor)); /* a mark inside a tight box */
+  --radius-sm: calc(6px * var(--radius-factor)); /* chips, keys, list rows */
+  --radius: calc(8px * var(--radius-factor)); /* inputs, code, small plates */
+  --radius-lg: calc(12px * var(--radius-factor)); /* cards, dialogs, menu panels */
+  --radius-pill: calc(999px * var(--radius-factor)); /* capsules and counters */
+
+  /* The nesting law, applied to the two insets this system actually uses. */
+  --radius-row: max(0px, calc(var(--radius-lg) - 0.375rem)); /* a row in a 6px-padded panel */
+  --radius-frame: calc(var(--radius-lg) + 1rem * var(--radius-gate)); /* a frame 16px outside a panel */
+}
 
+:root {
   /* ─── Density ────────────────────────────────────────────────────────────
      The second theming axis, and the only other one. Light/dark swaps colour;
      density swaps the size of anything a finger or a pointer has to hit.
@@ -254,6 +365,26 @@
      declaration is dropped and every column loses its gutter in silence. */
   --table-pad-x: 0px;
 
+  /* ─── Floating surfaces ──────────────────────────────────────────────────
+     What a panel that FLOATS fills with, and what it does to whatever is
+     behind it. A dialog, a menu, a popover, a palette — the surfaces that sit
+     OVER the page rather than in it, and therefore the only ones with anything
+     behind them to treat.
+
+     Both default to the plain surface and cost nothing. `--panel-filter: none`
+     matters more than it looks: a `backdrop-filter` of any value, `blur(0px)`
+     included, promotes its element to its own compositing layer and makes it a
+     containing block for fixed descendants. Paid on every menu in the system,
+     for a theme most readers will never turn on. `none` is not a blur of zero;
+     it is no filter at all.
+
+     A card is deliberately NOT on this list. It sits on the page ground, so
+     there is nothing behind it to see through, and a card that blurs its own
+     background is drawing an effect rather than an object. */
+  --panel-bg: var(--paper);
+  --panel-border: var(--rule-2);
+  --panel-filter: none;
+
   /* ─── Motion ─── */
   --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
   --fast: 0.13s;
@@ -321,3 +452,55 @@
 [data-table-density='compact'] {
   --table-pad-y: 0.5rem;
 }
+
+/* ==========================================================================
+   FORCED COLOURS
+   --------------------------------------------------------------------------
+   What a chart does when the reader has taken the palette away.
+
+   Windows High Contrast (and any forced-colours mode) remaps CSS colours to a
+   small set of system keywords. It does that for HTML automatically — a
+   tooltip's border and ground are handled without us — but it does NOT reach
+   inside SVG: Chrome and Edge ship `forced-color-adjust: none` on SVG by
+   default, and a gradient paint server is not something a browser can remap
+   even where it tries. So a chart that says nothing here keeps painting its
+   greys onto a black ground, and the reader's setting is quietly ignored.
+
+   The eight-step ramp collapses to one colour, because forced-colours has one
+   colour to give. That would be fatal to a system where hue carried identity,
+   and is survivable here for the reason the ramp is second in the first place:
+   TEXTURE is the primary encoding, and a hatch is still a hatch when every
+   series is CanvasText. This block is where that design decision gets cashed.
+
+   Scoped to the chart tokens on purpose. Restyling every component's rules and
+   surfaces from here would be a system-wide change wearing a chart fix.
+   ========================================================================== */
+
+@media (forced-colors: active) {
+  :root,
+  [data-mode='light'],
+  [data-mode='dark'] {
+    --series-1: CanvasText;
+    --series-2: CanvasText;
+    --series-3: CanvasText;
+    --series-4: CanvasText;
+    --series-5: CanvasText;
+    --series-6: CanvasText;
+    --series-7: CanvasText;
+    --series-8: CanvasText;
+    --series-track: Canvas;
+
+    --chart-surface: Canvas;
+    --chart-grid: GrayText;
+    --chart-cursor: CanvasText;
+    --chart-axis: CanvasText;
+    --chart-track: Canvas;
+    --chart-pattern: GrayText;
+
+    /* Textures go to full strength — they are now the only thing separating
+       one series from another. The wash stays under half so two overlapping
+       areas still read as two. */
+    --chart-fill: 0.45;
+    --chart-texture: 1;
+  }
+}

package/dist/tokens.d.ts

@@ -27,6 +27,14 @@ export type TokenName =
   | 'border-subtle'
   | 'brand-plate'
   | 'card-background'
+  | 'chart-axis'
+  | 'chart-cursor'
+  | 'chart-fill'
+  | 'chart-grid'
+  | 'chart-pattern'
+  | 'chart-surface'
+  | 'chart-texture'
+  | 'chart-track'
   | 'cjk-sans'
   | 'cjk-serif'
   | 'clay'
@@ -98,15 +106,23 @@ export type TokenName =
   | 'overlay'
   | 'pad'
   | 'page-pad'
+  | 'panel-bg'
+  | 'panel-border'
+  | 'panel-filter'
   | 'paper'
   | 'paper-2'
   | 'photo-caption-surface'
   | 'photo-scrim'
   | 'photo-shadow'
   | 'radius'
+  | 'radius-factor'
+  | 'radius-frame'
+  | 'radius-gate'
   | 'radius-lg'
   | 'radius-pill'
+  | 'radius-row'
   | 'radius-sm'
+  | 'radius-xs'
   | 'red'
   | 'red-ink'
   | 'red-soft'
@@ -122,6 +138,15 @@ export type TokenName =
   | 'sec'
   | 'sec-tight'
   | 'secondary-text'
+  | 'series-1'
+  | 'series-2'
+  | 'series-3'
+  | 'series-4'
+  | 'series-5'
+  | 'series-6'
+  | 'series-7'
+  | 'series-8'
+  | 'series-track'
   | 'serif'
   | 'shadow'
   | 'shadow-color'

package/dist/tokens.js

@@ -168,6 +168,75 @@ export const TOKENS = {
     "light": "var(--clay)",
     "dark": "var(--clay)"
   },
+  "series-1": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#101010",
+    "comment": "─── Data ─────────────────────────────────────────────────────────────── The series ramp a chart paints with, and the one place the White Reset has to answer a question a monochrome system would rather not be asked: how do you tell six lines apart with no hue left to spend? The answer is that hue was never the primary carrier here — TEXTURE is. Every chart primitive ships a fill variant (hatched, dotted, lines, stripped, duotone) and the series ramp below is the SECOND encoding, not the first. That ordering is what makes the set legible to a colour-blind reader, in greyscale print, and under forced-colours, none of which a hue-first categorical palette survives. The eight steps are interleaved rather than sequential — light, dark, light, dark — so neighbouring series sit as far apart on the lightness ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100) against a 15 floor, and every step clears 3:1 on its own ground. Two checks a chromatic palette would pass fail here BY DESIGN, and are stated rather than hidden: the chroma floor (these are greys) and the lightness band (--series-1 is ink, and ink is the darkest mark the system has). Texture plus a legend is the relief, and both are mandatory — `Chart.Legend` is not optional above one series. A consumer who genuinely needs hue does not hand-pick hexes: it sets `data-chart-palette=\"chroma\"` (see themes.css), which re-points these eight names onto a categorical palette validated against both grounds.",
+    "dark": "CanvasText"
+  },
+  "series-2": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#565656",
+    "dark": "CanvasText"
+  },
+  "series-3": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#202020",
+    "dark": "CanvasText"
+  },
+  "series-4": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#6a6a6a",
+    "dark": "CanvasText"
+  },
+  "series-5": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#313131",
+    "dark": "CanvasText"
+  },
+  "series-6": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#7e7e7e",
+    "dark": "CanvasText"
+  },
+  "series-7": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#434343",
+    "dark": "CanvasText"
+  },
+  "series-8": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#939393",
+    "dark": "CanvasText"
+  },
+  "series-track": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#eeece7",
+    "comment": "The empty ground a part-of-whole mark is drawn against — the unfilled remainder of a radial bar, the track behind a gauge. Not --rule: a track is a field, and a field that reads as a hairline disappears at radius.",
+    "dark": "Canvas"
+  },
+  "chart-fill": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "0.14",
+    "comment": "How solid a translucent mark is, and the one pair of tokens in the file that is NOT the same number on both grounds. A wash is `ink at N% over the page`. On paper, ink at 14% lands around #e3e3e3 — a legible, recessive band. Run the same 14% the other way and paper-white over near-black lands around #2c2c2c, which on a #0d0d0d ground is not a band, it is nothing. Perceived lightness is not linear and the two directions do not meet in the middle, so a single number cannot serve both: the dark side needs roughly twice the alpha to read as the same weight of mark. Every area fill, texture and flow band in the chart package reads these rather than carrying its own literal.",
+    "dark": "0.45"
+  },
+  "chart-texture": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "0.42",
+    "dark": "1"
+  },
   "sans": {
     "layer": "tokens",
     "category": "type",
@@ -270,29 +339,58 @@ export const TOKENS = {
     "category": "space",
     "light": "clamp(40px, calc(5 * var(--fluid)), 68px)"
   },
+  "radius-factor": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "1"
+  },
+  "radius-gate": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "min(1, var(--radius-factor))",
+    "comment": "Clamps the factor at 1 for the ADDING direction only. A frame's air is a fixed number of pixels, so `--radius-lg + 16px` would leave a rounded frame around a square panel the moment the theme went square; gated, it collapses to nothing along with everything else."
+  },
+  "radius-xs": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(4px * var(--radius-factor))",
+    "comment": "The numbers are the ones the rest of the industry settled on, and that is the argument for them: 8px for a control, 12px for a panel, and 4/6 for the small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree within a pixel of this. The previous 2/4/6/10 was a step tighter than any of them, which is what made a card read as a rectangle with the corners shaved rather than as a rounded panel."
+  },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
-    "light": "6px",
-    "comment": "─── Radius ───────────────────────────────────────────────────────────── Four steps, and there is no fifth. The old law was \"0 everywhere\"; the White Reset replaces that with a scale small enough to stay quiet on a white page. A 50% circle is geometry rather than a corner and is not a step here."
+    "light": "calc(6px * var(--radius-factor))",
+    "comment": "a mark inside a tight box"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
-    "light": "8px",
-    "comment": "images, thumbnails, media frames"
+    "light": "calc(8px * var(--radius-factor))",
+    "comment": "chips, keys, list rows"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
-    "light": "14px",
-    "comment": "inputs, buttons, small plates"
+    "light": "calc(12px * var(--radius-factor))",
+    "comment": "inputs, code, small plates"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
-    "light": "999px",
-    "comment": "feature panels, dark plates"
+    "light": "calc(999px * var(--radius-factor))",
+    "comment": "cards, dialogs, menu panels"
+  },
+  "radius-row": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "max(0px, calc(var(--radius-lg) - 0.375rem))",
+    "comment": "The nesting law, applied to the two insets this system actually uses."
+  },
+  "radius-frame": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
+    "comment": "a row in a 6px-padded panel"
   },
   "control-h-sm": {
     "layer": "tokens",
@@ -368,6 +466,22 @@ export const TOKENS = {
     "light": "0px",
     "comment": "`0px`, not `0`. The cell rule adds to this inside a calc, and a unitless zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole declaration is dropped and every column loses its gutter in silence."
   },
+  "panel-bg": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--paper)",
+    "comment": "─── Floating surfaces ────────────────────────────────────────────────── What a panel that FLOATS fills with, and what it does to whatever is behind it. A dialog, a menu, a popover, a palette — the surfaces that sit OVER the page rather than in it, and therefore the only ones with anything behind them to treat. Both default to the plain surface and cost nothing. `--panel-filter: none` matters more than it looks: a `backdrop-filter` of any value, `blur(0px)` included, promotes its element to its own compositing layer and makes it a containing block for fixed descendants. Paid on every menu in the system, for a theme most readers will never turn on. `none` is not a blur of zero; it is no filter at all. A card is deliberately NOT on this list. It sits on the page ground, so there is nothing behind it to see through, and a card that blurs its own background is drawing an effect rather than an object."
+  },
+  "panel-border": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--rule-2)"
+  },
+  "panel-filter": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "none"
+  },
   "ease": {
     "layer": "tokens",
     "category": "motion",
@@ -650,6 +764,38 @@ export const TOKENS = {
     "light": "#101010",
     "comment": "The photo scrim is always dark by design, so it takes the ink literal rather than the semantic token (which inverts)."
   },
+  "chart-surface": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--paper)",
+    "comment": "─── Data ───────────────────────────────────────────────────────────── What a chart is allowed to read. The series ramp itself stays a primitive — a chart names a SERIES by index, and an index has no role to alias — but everything around the marks does have one, and naming it here is what keeps a chart from reaching for --rule or --ink directly. --chart-cursor is deliberately heavier than --chart-grid: the crosshair has to be findable against the grid it crosses, and at hairline weight on a dashed grid it was not."
+  },
+  "chart-grid": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule)"
+  },
+  "chart-cursor": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule-2)"
+  },
+  "chart-axis": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--ink-3-aa)"
+  },
+  "chart-track": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--series-track)"
+  },
+  "chart-pattern": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule)",
+    "comment": "The decorative plate behind the plot — a dot field, a hatch, a grid of plus marks. One step quieter than the grid, because it sits BEHIND data and must never compete with it for the same read."
+  },
   "shadow-color": {
     "layer": "semantic",
     "category": "depth",