@apliteni/apliteni-ui 0.12.0 → 0.23.2

package/src/tokens/tokens.css

@@ -41,6 +41,14 @@
   --space-12: 48px;
   --space-16: 64px;
 
+  /* -- Measure ------------------------------------------------------------
+   * --container is the page, gutter to gutter; --measure is the reading column
+   * INSIDE a track, beside a sidebar. Different axes, never interchangeable.
+   * Below --measure are --panel-* and --prose-*, at the end of this file (#208).
+   * why: docs/specification.md#widths */
+  --container: 1120px;
+  --measure: 860px;
+
   /* -- Typography --------------------------------------------------------- */
   --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
@@ -79,6 +87,12 @@
    * without brand.generated.css. Delays are the kit's own (not a brand
    * concern). The reusable effect layer lives in styles/motion.css. */
   --ease: var(--easing-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+  --ease-out: var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+  --ease-in: var(--easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
+  --ease-sharp: var(--easing-sharp, cubic-bezier(0.4, 0, 0.6, 1));
+  --ease-spring: var(--easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+
+  --dur-instant: var(--duration-instant, 0.08s); /* 80ms — press, tick */
   --dur-fast: var(--duration-fast, 0.15s);   /* 150ms — hover, press */
   --dur-med: var(--duration-normal, 0.25s);  /* 250ms — panels, dropdowns */
   --dur-slow: var(--duration-slow, 0.4s);    /* 400ms — enters, reveals */
@@ -109,7 +123,7 @@
      the shape light Nebula and light Ocean already ship and which dark Nebula
      held until #157 lifted the accent onto the old --purple-mid. Left alone,
      the two tokens would resolve to one colour and the ramp would carry a
-     duplicate step. #bd8cff is the value docs/adr/0006 reasons about and
+     duplicate step. #bd8cff is the value docs/specification.md#colour-and-contrast reasons about and
      rejects as the accent; it becomes the ramp's top step instead. Light
      Nebula's ramp does not move. See issue #157. */
   --purple-light: #b479ff;
@@ -142,31 +156,38 @@
   --dim: #c6c2d6;
   --muted: #948fa8;
 
+  /* The paint of a control that is off. NOT an opacity: `opacity` is a group
+     property, so it fades a label and the box under it toward the ground
+     TOGETHER and the pair a reader is left with is whatever that composite
+     lands on — a disabled primary button measured 1.48:1 that way, white on a
+     faded accent. These three composite predictably instead: the ink is read on
+     the surface beside it, and both are opaque. They are aliases, not new
+     colours — the ramp gains nothing to keep in sync. A disabled control drops
+     its accent, which is most of what makes it read as inert; the ink going
+     quiet is the rest. Held by stories/guidelines/accessibility-floor.test.js.
+     why: docs/specification.md#colour-and-contrast */
+  --disabled-ink: var(--muted);
+  --disabled-surface: var(--surface-2);
+  --disabled-border: var(--border);
+
   /* Lifted from #9b5dff, which cleared the flat surfaces and failed on its own
      wash over a card. This value was already in the ramp as --purple-mid, so no
      new colour entered it; the ramp then moved up a step above so --accent is
      --purple-light, which is how every other Nebula and Ocean cell is written.
-     --glow-purple and --ring follow it down the file. Held by
+     --glow-purple follows it down the file; --ring is written as var(--accent)
+     and so follows it by reference. Held by
      stories/accent-contrast.test.js. See issue #157.
-     why: docs/adr/0006-the-accent-is-measured-against-its-own-wash.md */
+     why: docs/specification.md#colour-and-contrast */
   --accent: #b479ff;
   --accent-strong: #7c3aed; /* button bg — white text clears WCAG AA at 5.70:1 */
   --accent-contrast: #ffffff;
   --ink: #e9e7f0;
 
   /* Ink that reads on a SIGNAL colour once that colour becomes a fill — the
-     glyph in a success circle, the glyph on a toast's status circle.
-     In dark every signal is a bright hue, so one near-black ink clears all
-     five: 15.87 on --green, 7.35 on --pink, 13.40 on --amber, 11.75 on --cyan
-     and 6.29 on --muted. Danger keeps a token of its own only because LIGHT
-     still needs it: there the signals are deepened to read as ink on white,
-     which parks them mid-luminance, and --pink is the one that comes out ahead
-     against white (5.78) rather than against near-black (3.39).
-     Dark danger was white until now, which was correct while --pink was
-     #e35b8f. Issue #131 lightened it to #e97ca5 to clear AA as INK on its own
-     glow, and that carried the fill up past the point where white could read on
-     it — 2.66 on the toast's status circle, under the 3:1 of WCAG 1.4.11. The
-     ten status x theme icon pairs are gated in stories/signal-contrast.test.js. */
+     glyph in a success circle, the glyph on a toast's status circle. One
+     near-black ink clears all five in dark; danger keeps a token of its own
+     because LIGHT still needs one.
+     why: docs/specification.md#colour-and-contrast */
   --signal-contrast: #0c0c0c;
   --danger-contrast: var(--signal-contrast);
 
@@ -214,12 +235,13 @@
   /* Resting elevation for a card. Dark cards are borderless — the surface does
      the grouping on its own — so they cast nothing. */
   --shadow-card: none;
-  /* The accent's own rgb at a fixed alpha, so it moves whenever --accent moves —
-     otherwise a token points at a colour the accent no longer is. At this alpha
-     the band sits under the 3:1 WCAG 1.4.11 asks of a focus indicator, before
-     this change and after it; nothing here closes that. See issue #157 and the
-     ADR's closing section. */
-  --ring: 0 0 0 3px rgba(180, 121, 255, 0.35);
+  /* THE ONLY --ring in the kit — light and every data-accent sub-theme declare
+     an --accent and inherit this line. Opaque because a translucent ring is a
+     glow: the eight rgba() literals this replaced all missed the 3:1 of WCAG
+     1.4.11, at 1.35:1 worst. Held at 4.22:1 worst by
+     stories/guidelines/accessibility-floor.test.js. See issue #218.
+     why: docs/specification.md#the-focus-ring */
+  --ring: 0 0 0 3px var(--accent);
 
   /* The ink a cast shadow is made of, and the specular white that reads as
      gloss on a raised surface. Effects mix these instead of writing rgba(). */
@@ -273,6 +295,13 @@
   --dim: #3a404b;
   --muted: #5c6270;
 
+  /* Same three aliases as dark, same reasoning. Light moves the disabled
+     surface AWAY from white for the same reason dark moves it away from the
+     card: a control that is off should sink, not rise. */
+  --disabled-ink: var(--muted);
+  --disabled-surface: var(--surface-2);
+  --disabled-border: var(--border);
+
   --accent: #6a2dcc;
   --accent-strong: #6a2dcc; /* already dark enough for white text */
   --accent-contrast: #ffffff;
@@ -335,7 +364,7 @@
   /* A white card on a white page needs its own, flatter-than-sm elevation:
      a hairline contact shadow plus a wide soft one (see card.css). */
   --shadow-card: 0 1px 2px rgba(20, 25, 45, 0.04), 0 4px 14px rgba(20, 25, 45, 0.05);
-  --ring: 0 0 0 3px rgba(106, 45, 204, 0.25);
+  /* No --ring here. :root's is var(--accent), and light re-points --accent. */
 
   --shadow-ink: #1e1e32;
   --sheen: #ffffff;
@@ -345,3 +374,47 @@
   --grad-from: var(--purple-light);
   --grad-to: var(--cyan);
 }
+
+/* ============================================================================
+ * WIDTHS BELOW THE PAGE — the box, and the line
+ *
+ * --container is the page and --measure the reading column inside it (both
+ * above). Underneath them the kit has two scales and one rule for choosing
+ * between them: THE UNIT SAYS WHICH SCALE YOU ARE ON.
+ *
+ *   a box that holds a COMPONENT   ->  --panel-*   (px)
+ *   a box that holds a LINE        ->  --prose-*   (ch)
+ *
+ * Both are theme-invariant, which is why they sit outside the palette blocks.
+ * why: docs/specification.md#boxes-below-the-page
+ * ========================================================================== */
+:root {
+  /* -- Panel widths -------------------------------------------------------
+   * Not a new scale: the drawer has shipped sm/md/lg at exactly these three
+   * values since it was written, and confirm, the auth card and the toast each
+   * wrote one of them out again on their own. --panel-md answers the question
+   * #208 asked — the two 420s were three (--confirm-w, --drawer-w md and
+   * .ui-auth__card), and they are one measure now. */
+  --panel-sm: 320px;
+  --panel-md: 420px;
+  --panel-lg: 560px;
+
+  /* -- Prose measures -----------------------------------------------------
+   * ch resolves against the font-size of the element it is DECLARED on, so a
+   * step goes on the paragraph itself — never on a wrapper holding two type
+   * sizes, where the same token would mean two different widths.
+   *
+   * The four steps are the reading band (44–72ch), named for what is being
+   * read rather than sized s/m/l, so the choice is made by the writer:
+   *   caption  one or two sentences under a glyph, centred
+   *   lede     the line under a title
+   *   body     a left-aligned column of copy
+   *   dense    reference prose set below 13px, where the band runs wider
+   * --prose-display is NOT a measure. It is where a display headline rags, and
+   * it is far under the band on purpose. */
+  --prose-display: 14ch;
+  --prose-caption: 44ch;
+  --prose-lede: 54ch;
+  --prose-body: 62ch;
+  --prose-dense: 72ch;
+}