@evinvest/uikit 0.17.1 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/uikit",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {

package/styles/tokens.css

@@ -15,6 +15,8 @@
  *   ROLES      {role} and on-{role} for the ones that get filled:
  *              brand · primary · secondary · positive ·
  *              accent-trace · accent-debug · accent-info · accent-warn · accent-error
+ *              primary-ink — the primary role as ink on a surface, where the
+ *              fill and the readable value are different colours
  *   SCALARS    radius · control-* · display-scale · page-* · shadows · fonts
  *   CHARTS     chart-1 … chart-5
  *   MARK       brand-mark · brand-aspect       — supplied, never defined here
@@ -33,7 +35,9 @@
  * value, so the steps below are deliberate and measured; keep them apart if you
  * retune. background #070d18 → secondary #0d1526 (1.07:1) → card #16233c (1.24:1
  * vs background) → popover #1d2c49 (1.13:1 vs card) → muted #26375c. Elevation
- * rides the same ladder via --shadow-card / -elevated / -overlay.
+ * rides the same ladder via --shadow-card / -elevated / -overlay. Card is also
+ * pinned from above by a second floor: --primary has to clear 3:1 against it
+ * (3.39:1 today), so lifting card one step breaks the tokens test.
  */
 
 /*
@@ -390,6 +394,7 @@
   --color-brand: var(--brand);
   --color-primary: var(--primary);
   --color-on-primary: var(--on-primary);
+  --color-primary-ink: var(--primary-ink);
   --color-secondary: var(--secondary);
   --color-on-secondary: var(--on-secondary);
   --color-positive: var(--positive);
@@ -432,15 +437,28 @@
   /* ── lines ───────────────────────────────────────────────────── */
   --border: color-mix(in srgb, var(--ink) 14%, transparent);
   --input: color-mix(in srgb, var(--ink) 20%, transparent);
-  --ring: #2a9d8f;
+  --ring: var(--primary-ink);
 
   /* ── roles ───────────────────────────────────────────────────── */
   --brand: #001e4e;
   /* teal, not the brand navy: navy filled a Button/Switch at ~1.1:1 against
    * these surfaces, i.e. an invisible control, and consumers hardcoded teal to
-   * get around it. The brand navy still lives in --brand. */
-  --primary: #2a9d8f;
-  --on-primary: #070d18;
+   * get around it. The brand navy still lives in --brand.
+   *
+   * A fill and an ink are different jobs, so the primary role carries two
+   * values (docs/spec/accents.md). --primary-ink is the teal that reads on the
+   * surfaces: 5.85:1 on background, 4.72:1 on card. --primary is the same hue
+   * and chroma one step down in lightness — OKLCH L 0.550 C 0.094 H 183°
+   * against the ink's L 0.630 C 0.101 H 183° — so the CTA carries white:
+   * --on-primary reads on it at 4.63:1, and the fill clears the 3:1 non-text
+   * floor against background (4.20:1), secondary (3.94:1), card (3.39:1) and
+   * popover (3.01:1), so a checked Switch on a Card still reads as one. Muted
+   * is the one surface under the floor (2.54:1); the controls that fill there
+   * carry an on-primary mark, see the spec. Darkening the single value instead
+   * would have dropped every teal label below AA. */
+  --primary: #128377;
+  --on-primary: #ffffff;
+  --primary-ink: #2a9d8f;
   --secondary: #0d1526;
   --on-secondary: var(--ink);
   /* valence, not significance: a success reads as good while staying quiet */