jig-ui 0.1.0

package/tokens/brand.default.css

@@ -0,0 +1,152 @@
+/* brand.default.css — unbranded default.
+   TRANSPARENT foreground palette over SOLID elevation backgrounds.
+
+   Foregrounds are opacities of black (light) / white (dark). They mix with whatever
+   surface they sit on, so a tag keeps the same prominence on base, raised or overlay.
+   Solid foregrounds cannot do this: they look right on one background and wrong on
+   the next, and dark mode has three.
+
+   Copy to brand.<client>.css and override. Never edit this file per project. */
+
+:root {
+  color-scheme: light dark;
+
+  /* ================= BRAND =================
+     One brand colour. It marks interactive elements (I-56).
+     Intentionally near-black here: A-01, no invented colour.
+     Requirements when you set it:
+       - ≥ 4.5:1 against --color-bg-raised AND against --color-fill
+       - If the brand colour is red, amber or green, DO NOT use it for interactive
+         elements (E-64) — it will collide with the system colours below. */
+  --brand-h: 264;
+  --brand-s: 0%;
+  --brand-l: 15%;
+  --brand-base: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
+
+  /* ================= ELEVATION BACKGROUNDS (solid) =================
+     Light comes from above: higher elevation is lighter.
+     Keep the three levels visually consistent across light and dark. */
+  --color-bg-base:    oklch(0.980 0.004 95);   /* page. Off-white, not #fff (C-18). */
+  --color-bg-raised:  oklch(1     0     0);    /* cards, panels, sticky bars        */
+  --color-bg-overlay: oklch(1     0     0);    /* dialogs, popovers, dropdowns      */
+
+  /* ================= NEUTRAL FOREGROUNDS (transparent) =================
+     Light mode: opacities of black. Never pure black at 100% (C-18). */
+  --color-text-strong:   rgb(0 0 0 / 90%);   /* headings, body, labels   — ≥ 4.5:1 */
+  --color-text-weak:     rgb(0 0 0 / 60%);   /* supporting text          — ≥ 4.5:1 */
+  --color-stroke-strong: rgb(0 0 0 / 45%);   /* input/checkbox borders, icons — ≥ 3:1 */
+  --color-stroke-weak:   rgb(0 0 0 / 10%);   /* dividers. Decorative, no floor.    */
+  --color-fill:          rgb(0 0 0 / 4%);    /* tags, badges, secondary surfaces   */
+
+  --color-icon:      var(--color-stroke-strong);
+  --color-icon-weak: var(--color-stroke-weak);
+
+  /* ================= BRAND FOREGROUNDS (4 variations) ================= */
+  --color-text-brand:          hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 100%);
+  --color-stroke-brand-strong: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 80%);
+  --color-stroke-brand-weak:   hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 20%);
+  --color-fill-brand:          hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 5%);
+  --color-on-brand:            oklch(1 0 0);   /* text on a solid brand fill */
+
+  /* ================= SYSTEM COLOURS =================
+     Three, with familiar traffic-light meanings. Four variations each.
+     Never the only signal — pair with an icon and text (C-20). */
+  --error-base:   hsl(0   71% 44%);
+  --warning-base: hsl(42  82% 36%);
+  --success-base: hsl(162 95% 26%);
+  /* info is NOT in the book's set of three. Kept as an optional fourth. */
+  --info-base:    hsl(220 70% 42%);
+
+  --color-text-error:          hsl(0 71% 44% / 100%);
+  --color-stroke-error-strong: hsl(0 71% 44% / 80%);
+  --color-stroke-error-weak:   hsl(0 71% 44% / 20%);
+  --color-fill-error:          hsl(0 71% 44% / 5%);
+
+  --color-text-warning:          hsl(42 82% 36% / 100%);
+  --color-stroke-warning-strong: hsl(42 82% 36% / 80%);
+  --color-stroke-warning-weak:   hsl(42 82% 36% / 20%);
+  --color-fill-warning:          hsl(42 82% 36% / 5%);
+
+  --color-text-success:          hsl(162 95% 26% / 100%);
+  --color-stroke-success-strong: hsl(162 95% 26% / 80%);
+  --color-stroke-success-weak:   hsl(162 95% 26% / 20%);
+  --color-fill-success:          hsl(162 95% 26% / 5%);
+
+  --color-text-info:          hsl(220 70% 42% / 100%);
+  --color-stroke-info-strong: hsl(220 70% 42% / 80%);
+  --color-stroke-info-weak:   hsl(220 70% 42% / 20%);
+  --color-fill-info:          hsl(220 70% 42% / 5%);
+
+  /* ================= STATE LAYERS =================
+     Transparent overlays, so hover and press need no new colours and work on
+     every surface and in both modes. Layer these OVER the element. */
+  --color-state-hover: var(--color-fill);         /* 4%  light / 6%  dark */
+  --color-state-press: var(--color-stroke-weak);  /* 10% light / 12% dark */
+  --opacity-disabled: 0.38;
+
+  --color-focus: var(--color-text-strong);
+
+  /* ================= TYPE ================= */
+  --font-text:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-display: var(--font-text);
+  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", monospace;
+  --font-numeric-features: "tnum" 1, "lnum" 1;
+
+  /* ================= RADIUS — three, by element size ================= */
+  --radius-sm:   8px;    /* buttons, inputs, badges, checkboxes */
+  --radius-md:   16px;   /* cards, panels                       */
+  --radius-lg:   32px;   /* large surfaces, hero media          */
+  --radius-full: 9999px;
+
+  /* ================= ELEVATION — two shadows =================
+     Shadow colour is derived from the text colour, not pure black, so it sits in
+     the palette. Light from above: y-offset positive, blur grows with elevation. */
+  --shadow-none:    none;
+  --shadow-raised:  0 1px 2px rgb(0 0 0 / 6%), 0 2px 4px -2px rgb(0 0 0 / 8%);
+  --shadow-overlay: 0 4px 16px -4px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 8%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    /* Three solid levels. In dark, DEPTH COMES FROM BACKGROUND, NOT SHADOW —
+       shadows are nearly invisible on a dark surface. Never pure black. */
+    --color-bg-base:    hsl(var(--brand-h) 6% 10%);
+    --color-bg-raised:  hsl(var(--brand-h) 6% 15%);
+    --color-bg-overlay: hsl(var(--brand-h) 6% 20%);
+
+    /* Foregrounds become opacities of white. Higher than the light-mode values,
+       because dark interfaces lose detail faster. */
+    --color-text-strong:   rgb(255 255 255 / 100%);
+    --color-text-weak:     rgb(255 255 255 / 78%);
+    --color-stroke-strong: rgb(255 255 255 / 60%);
+    --color-stroke-weak:   rgb(255 255 255 / 12%);
+    --color-fill:          rgb(255 255 255 / 6%);
+
+    --brand-l: 88%;      /* lighten and desaturate the brand for dark surfaces */
+    --color-on-brand: hsl(var(--brand-h) 6% 10%);
+
+    /* System colours lighten and desaturate in dark mode. */
+    --color-text-error:          hsl(0 60% 72% / 100%);
+    --color-stroke-error-strong: hsl(0 60% 72% / 80%);
+    --color-stroke-error-weak:   hsl(0 60% 72% / 20%);
+    --color-fill-error:          hsl(0 60% 72% / 8%);
+
+    --color-text-warning:          hsl(42 70% 70% / 100%);
+    --color-stroke-warning-strong: hsl(42 70% 70% / 80%);
+    --color-stroke-warning-weak:   hsl(42 70% 70% / 20%);
+    --color-fill-warning:          hsl(42 70% 70% / 8%);
+
+    --color-text-success:          hsl(162 45% 66% / 100%);
+    --color-stroke-success-strong: hsl(162 45% 66% / 80%);
+    --color-stroke-success-weak:   hsl(162 45% 66% / 20%);
+    --color-fill-success:          hsl(162 45% 66% / 8%);
+
+    --color-text-info:          hsl(220 55% 74% / 100%);
+    --color-stroke-info-strong: hsl(220 55% 74% / 80%);
+    --color-stroke-info-weak:   hsl(220 55% 74% / 20%);
+    --color-fill-info:          hsl(220 55% 74% / 8%);
+
+    --shadow-raised:  none;
+    --shadow-overlay: 0 8px 24px -8px rgb(0 0 0 / 60%);
+  }
+}

package/tokens/mode.editorial.css

@@ -0,0 +1,72 @@
+/* mode.editorial.css — marketing, blog, docs, landing.
+   Optimises for FIRST use. Legibility over density.
+   Spacing uses the shared 8pt option set; modes SELECT options, they do not invent values.
+   Load with exactly one brand file. */
+
+:root {
+  --mode: "editorial";
+
+  /* ---- Shared spacing options (8pt base). Identical in every mode. ---- */
+  /* 2xs is a deliberate half-step off the 8pt grid. It exists ONLY for gaps
+     inside a single component — label→input, icon→label — where 8px reads as
+     a separation rather than a pairing. Never for layout. */
+  --spacing-2xs: 4px;
+  --spacing-xs:  8px;
+  --spacing-s:   16px;
+  --spacing-m:   24px;
+  --spacing-l:   32px;
+  --spacing-xl:  48px;
+  --spacing-xxl: 80px;
+
+
+  /* ---- This mode's selections ---- */
+  /* ---- Type scale — 1.250 Major Third. ----
+     Large scale: bigger steps, suited to less complex, content-led interfaces.
+     Line heights UNITLESS (they must scale with user text size, WCAG 1.4.12).
+     FLOOR: 1.5 for anything used as body or long-form text. */
+  --text-caption: 14px;  --leading-caption: 1.5;
+  --text-body:    16px;  --leading-body:    1.5;    /* UI text: labels, controls */
+  --text-prose:   18px;  --leading-prose:   1.6;    /* LONG-FORM text. Never below 18. */
+  --text-lead:    20px;  --leading-lead:    1.5;
+  --text-h3:      24px;  --leading-h3:      1.333;
+  --text-h2:      32px;  --leading-h2:      1.25;
+  --text-h1:      48px;  --leading-h1:      1.1;
+
+  /* Two weights only. More adds noise and is hard to apply consistently. */
+  --font-weight-regular: 400;
+  --font-weight-bold:    600;
+
+  /* Letter spacing tightens as size grows; text typefaces are spaced for small sizes. */
+  --tracking-body: 0;  --tracking-h2: -0.015em;  --tracking-h1: -0.025em;
+  --tracking-caps: 0.06em;
+
+  --measure-prose: 68ch;   /* 40–80 characters */
+
+  --spacing-section:        var(--spacing-xxl);   /* 80 */
+  --spacing-section-sm:     var(--spacing-xl);    /* 48 */
+  --spacing-card:           var(--spacing-m);     /* 24 — card padding is M (D-69) */
+  --spacing-stack:          var(--spacing-m);     /* 24 */
+  --spacing-group:          var(--spacing-xs);    /*  8 */
+  --spacing-label:          var(--spacing-2xs);  /*  4 — label to its input */
+  --spacing-inline:         var(--spacing-xs);    /*  8 */
+  --spacing-heading-before: var(--spacing-xl);    /* 48 */
+  --spacing-heading-after:  var(--spacing-s);     /* 16 */
+
+  --grid-columns: 12;      --grid-columns-sm: 4;
+  --grid-gutter:  var(--spacing-l);   --grid-gutter-sm: var(--spacing-s);   /* 32 → 16 */
+  --grid-margin:  var(--spacing-xxl); --grid-margin-sm: var(--spacing-s);   /* 80 → 16 */
+
+  --size-control: 48px;  --size-control-sm: 40px;
+  --size-touch-target: 48px;  --size-icon: 20px;
+
+  --radius-control: var(--radius-sm);  --radius-surface: var(--radius-md);
+  --shadow-surface: var(--shadow-none);
+
+  --duration-fast: 150ms;  --duration-base: 250ms;  --duration-slow: 300ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
+}

package/tokens/mode.operator.css

@@ -0,0 +1,74 @@
+/* mode.operator.css — internal tools, admin, back-office, monitoring.
+   Optimises for the THOUSANDTH use. Density is the feature.
+   Accessibility floors are UNCHANGED: touch target, contrast and the 1.5 line-height floor do not shrink.
+   Spacing uses the shared 8pt option set; modes SELECT options, they do not invent values.
+   Load with exactly one brand file. */
+
+:root {
+  --mode: "operator";
+
+  /* ---- Shared spacing options (8pt base). Identical in every mode. ---- */
+  /* 2xs is a deliberate half-step off the 8pt grid. It exists ONLY for gaps
+     inside a single component — label→input, icon→label — where 8px reads as
+     a separation rather than a pairing. Never for layout. */
+  --spacing-2xs: 4px;
+  --spacing-xs:  8px;
+  --spacing-s:   16px;
+  --spacing-m:   24px;
+  --spacing-l:   32px;
+  --spacing-xl:  48px;
+  --spacing-xxl: 80px;
+
+
+  /* ---- This mode's selections ---- */
+  /* ---- Type scale — 1.125 Major Second. ----
+     Small scale: little difference between steps, suited to dense tools and
+     dashboards where more levels of detail are needed in less space.
+     Line heights UNITLESS. FLOOR: 1.5 holds even here. */
+  --text-caption: 12px;  --leading-caption: 1.5;
+  --text-body:    14px;  --leading-body:    1.5;
+  --text-prose:   16px;  --leading-prose:   1.6;    /* LONG-FORM text only */
+  --text-lead:    16px;  --leading-lead:    1.5;
+  --text-h3:      16px;  --leading-h3:      1.5;
+  --text-h2:      18px;  --leading-h2:      1.4;
+  --text-h1:      22px;  --leading-h1:      1.333;
+
+  --font-weight-regular: 400;
+  --font-weight-bold:    600;
+
+  --tracking-body: 0;  --tracking-h2: 0;  --tracking-h1: 0;
+  --tracking-caps: 0.07em;
+
+  --measure-prose: 72ch;   /* prose only. Data columns are not prose. */
+
+  --spacing-section:        var(--spacing-m);     /* 24 */
+  --spacing-section-sm:     var(--spacing-m);     /* 24 */
+  --spacing-card:           var(--spacing-s);     /* 16 */
+  --spacing-stack:          var(--spacing-s);     /* 16 */
+  --spacing-group:          var(--spacing-xs);    /*  8 */
+  --spacing-label:          var(--spacing-2xs);  /*  4 — label to its input */
+  --spacing-inline:         var(--spacing-xs);    /*  8 */
+  --spacing-heading-before: var(--spacing-m);     /* 24 */
+  --spacing-heading-after:  var(--spacing-xs);    /*  8 */
+
+  --grid-columns: 12;      --grid-columns-sm: 4;
+  --grid-gutter:  var(--spacing-s);   --grid-gutter-sm: var(--spacing-s);   /* 16 */
+  --grid-margin:  var(--spacing-m);   --grid-margin-sm: var(--spacing-s);   /* 24 → 16 */
+
+  --size-control: 32px;  --size-control-sm: 28px;
+  --size-row: 36px;  --size-row-compact: 32px;
+  --size-touch-target: 48px;  --size-icon: 16px;
+
+  --radius-control: var(--radius-sm);  --radius-surface: var(--radius-sm);
+  --shadow-surface: var(--shadow-none);
+
+  --duration-fast: 75ms;  --duration-base: 100ms;  --duration-slow: 120ms;
+  --ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --font-numeric: var(--font-numeric-features);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
+}

package/tokens/mode.product.css

@@ -0,0 +1,69 @@
+/* mode.product.css — authenticated app UI, dashboards, settings.
+   Serves BOTH first and repeat use. Predictability over novelty.
+   Spacing uses the shared 8pt option set; modes SELECT options, they do not invent values.
+   Load with exactly one brand file. */
+
+:root {
+  --mode: "product";
+
+  /* ---- Shared spacing options (8pt base). Identical in every mode. ---- */
+  /* 2xs is a deliberate half-step off the 8pt grid. It exists ONLY for gaps
+     inside a single component — label→input, icon→label — where 8px reads as
+     a separation rather than a pairing. Never for layout. */
+  --spacing-2xs: 4px;
+  --spacing-xs:  8px;
+  --spacing-s:   16px;
+  --spacing-m:   24px;
+  --spacing-l:   32px;
+  --spacing-xl:  48px;
+  --spacing-xxl: 80px;
+
+
+  /* ---- This mode's selections ---- */
+  /* ---- Type scale — 1.200 Minor Third. ----
+     Mid scale: the general-purpose default.
+     Line heights UNITLESS. FLOOR: 1.5 for body and long-form text. */
+  --text-caption: 14px;  --leading-caption: 1.5;
+  --text-body:    16px;  --leading-body:    1.5;
+  --text-prose:   18px;  --leading-prose:   1.6;    /* LONG-FORM text only */
+  --text-lead:    20px;  --leading-lead:    1.5;
+  --text-h3:      20px;  --leading-h3:      1.4;
+  --text-h2:      24px;  --leading-h2:      1.333;
+  --text-h1:      32px;  --leading-h1:      1.25;
+
+  --font-weight-regular: 400;
+  --font-weight-bold:    600;
+
+  --tracking-body: 0;  --tracking-h2: -0.01em;  --tracking-h1: -0.015em;
+  --tracking-caps: 0.06em;
+
+  --measure-prose: 60ch;
+
+  --spacing-section:        var(--spacing-xl);    /* 48 */
+  --spacing-section-sm:     var(--spacing-l);     /* 32 */
+  --spacing-card:           var(--spacing-m);     /* 24 */
+  --spacing-stack:          var(--spacing-s);     /* 16 */
+  --spacing-group:          var(--spacing-xs);    /*  8 */
+  --spacing-label:          var(--spacing-2xs);  /*  4 — label to its input */
+  --spacing-inline:         var(--spacing-xs);    /*  8 */
+  --spacing-heading-before: var(--spacing-l);     /* 32 */
+  --spacing-heading-after:  var(--spacing-xs);    /*  8 */
+
+  --grid-columns: 12;      --grid-columns-sm: 4;
+  --grid-gutter:  var(--spacing-m);   --grid-gutter-sm: var(--spacing-s);   /* 24 → 16 */
+  --grid-margin:  var(--spacing-l);   --grid-margin-sm: var(--spacing-s);   /* 32 → 16 */
+
+  --size-control: 40px;  --size-control-sm: 32px;  --size-row: 48px;
+  --size-touch-target: 48px;  --size-icon: 18px;
+
+  --radius-control: var(--radius-sm);  --radius-surface: var(--radius-md);
+  --shadow-surface: var(--shadow-none);
+
+  --duration-fast: 100ms;  --duration-base: 150ms;  --duration-slow: 200ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
+}