@junoput01/junoui 0.7.0 → 0.8.0

package/dist/flutter/juno_tokens.dart

@@ -95,6 +95,14 @@ class JunoTokens {
   static const Color standardLightDataDim = Color(0xFFA19E99);
   static const Color standardLightBorderStrong = Color(0xFFAEAAA4);
 
+  static const Color inkCanvasInk = Color(0xFFFFFFFF);
+  static const Color inkCanvasHalo = Color(0xFF000000);
+  static const Color inkVividNominal = Color(0xFF00DC27);
+  static const Color inkVividActive = Color(0xFF00D6F8);
+  static const Color inkVividTarget = Color(0xFFF82DF9);
+  static const Color inkVividCaution = Color(0xFFFFB300);
+  static const Color inkVividWarning = Color(0xFFFF002E);
+
   static const double borderWidth1 = 1;
   static const double borderWidth2 = 2;
   static const double borderWidth3 = 3;
@@ -103,6 +111,8 @@ class JunoTokens {
   static const double bpLg = 1024;
   static const double bpXl = 1280;
   static const double bp2xl = 1536;
+  static const double inkCanvasHaloWidth = 2;
+  static const double inkCanvasHaloWidthLg = 3;
   static const double radius2 = 2;
   static const double radius3 = 3;
   static const double radius4 = 4;

package/dist/ios/JunoTokens.swift

@@ -101,6 +101,14 @@ public enum JunoTokens {
     public static let standardLightDataDim = JunoColor.hex(0xA19E99)
     public static let standardLightBorderStrong = JunoColor.hex(0xAEAAA4)
 
+    public static let inkCanvasInk = JunoColor.hex(0xFFFFFF)
+    public static let inkCanvasHalo = JunoColor.hex(0x000000)
+    public static let inkVividNominal = JunoColor.hex(0x00DC27)
+    public static let inkVividActive = JunoColor.hex(0x00D6F8)
+    public static let inkVividTarget = JunoColor.hex(0xF82DF9)
+    public static let inkVividCaution = JunoColor.hex(0xFFB300)
+    public static let inkVividWarning = JunoColor.hex(0xFF002E)
+
     public static let borderWidth1: CGFloat = 1
     public static let borderWidth2: CGFloat = 2
     public static let borderWidth3: CGFloat = 3
@@ -109,6 +117,8 @@ public enum JunoTokens {
     public static let bpLg: CGFloat = 1024
     public static let bpXl: CGFloat = 1280
     public static let bp2xl: CGFloat = 1536
+    public static let inkCanvasHaloWidth: CGFloat = 2
+    public static let inkCanvasHaloWidthLg: CGFloat = 3
     public static let radius2: CGFloat = 2
     public static let radius3: CGFloat = 3
     public static let radius4: CGFloat = 4

package/dist/js/tokens.js

@@ -130,6 +130,22 @@ export const CORE = {
     "2": "0 4px 14px rgb(0 0 0 / 0.35)",
     "3": "0 12px 32px rgb(0 0 0 / 0.50)"
   },
+  "ink": {
+    "canvas": {
+      "ink": "#FFFFFF",
+      "halo": "#000000",
+      "halo-width": "2px",
+      "halo-width-lg": "3px",
+      "scrim": 0.28
+    },
+    "vivid": {
+      "nominal": "oklch(76% 0.28 148)",
+      "active": "oklch(76% 0.24 205)",
+      "target": "oklch(70% 0.30 328)",
+      "caution": "oklch(82% 0.20 82)",
+      "warning": "oklch(68% 0.28 25)"
+    }
+  },
   "motion": {
     "duration": {
       "instant": "80ms",

package/dist/json/tokens.json

@@ -532,6 +532,57 @@
       "$description": "e3 — modal, drawer (overlay layer)."
     }
   },
+  "ink": {
+    "canvas": {
+      "ink": {
+        "$value": "#FFFFFF",
+        "$type": "color",
+        "$description": "The mark itself: glyphs, measurement lines, selection outlines. Near-white rather than a role hue because it must survive a saturated backdrop, and paired with `halo` it is the high-luminance half of the pair."
+      },
+      "halo": {
+        "$value": "#000000",
+        "$type": "color",
+        "$description": "The outline drawn behind and around `ink` (text-shadow, paint-order stroke, or a widened stroke pass). Pure black, and that is FORCED rather than chosen: with a white ink the worst backing is a mid grey where both halves are at their weakest, and the sweep floor there is 4.61:1 at #000000 against a 4.5:1 requirement. A tasteful near-black with a blue cast (#0A0C10) drops it to 4.43:1 and fails. The pair has ~0.1 of headroom, which is why both halves sit at the extremes of the luminance range and neither can be nudged for looks."
+      },
+      "halo-width": {
+        "$value": "2px",
+        "$type": "dimension",
+        "$description": "Outline width at body sizes. Two device pixels is the smallest that survives resampling on a moving map; below that the halo thins to nothing at the glyph's corners."
+      },
+      "halo-width-lg": {
+        "$value": "3px",
+        "$type": "dimension",
+        "$description": "Outline width for display sizes (font.size.20 and up), where a 2px halo reads as a hairline against the stroke weight."
+      },
+      "scrim": {
+        "$value": 0.28,
+        "$type": "number",
+        "$description": "Backdrop opacity for chrome floating OVER live content — a translucent bar on a map or a video. Deliberately distinct from opacity.scrim (0.62), which is tuned to suppress a full-screen modal's background and is far too heavy here: it would grey out the very content the chrome is annotating."
+      }
+    },
+    "vivid": {
+      "nominal": {
+        "$value": "oklch(76% 0.28 148)",
+        "$type": "color"
+      },
+      "active": {
+        "$value": "oklch(76% 0.24 205)",
+        "$type": "color"
+      },
+      "target": {
+        "$value": "oklch(70% 0.30 328)",
+        "$type": "color"
+      },
+      "caution": {
+        "$value": "oklch(82% 0.20 82)",
+        "$type": "color"
+      },
+      "warning": {
+        "$value": "oklch(68% 0.28 25)",
+        "$type": "color"
+      }
+    }
+  },
   "motion": {
     "duration": {
       "instant": {

package/dist/rust/juno_tokens.rs

@@ -0,0 +1,383 @@
+// junoui design tokens — Rust. Generated; do not edit.
+//
+// Regenerate with `npm run build` in the junoui repo. Every value here comes
+// from the same DTCG source as the CSS, Swift, Dart and Android outputs, so a
+// token change reaches all of them at once. Do not transcribe these values
+// into your own crate: that copy is what goes stale.
+#![allow(dead_code)]
+
+/// A non-premultiplied sRGB color with 8 bits per channel.
+///
+/// Deliberately plain, and deliberately not a dependency on any UI crate:
+/// junoui does not know whether you are on egui, iced, Slint, Bevy or wgpu
+/// directly. Convert at your boundary — `to_f32_array()` is what most GPU
+/// paths want, and it is sRGB-encoded, NOT linear. If your pipeline expects
+/// linear (wgpu with a non-sRGB surface format), convert there; junoui cannot
+/// know which surface you created.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub struct Rgba {
+    pub r: u8,
+    pub g: u8,
+    pub b: u8,
+    pub a: u8,
+}
+
+impl Rgba {
+    /// From a 0xRRGGBB literal, fully opaque.
+    pub const fn hex(v: u32) -> Self {
+        Self {
+            r: ((v >> 16) & 0xFF) as u8,
+            g: ((v >> 8) & 0xFF) as u8,
+            b: (v & 0xFF) as u8,
+            a: 0xFF,
+        }
+    }
+
+    /// sRGB-encoded components in 0.0..=1.0, in RGBA order.
+    pub const fn to_f32_array(self) -> [f32; 4] {
+        [
+            self.r as f32 / 255.0,
+            self.g as f32 / 255.0,
+            self.b as f32 / 255.0,
+            self.a as f32 / 255.0,
+        ]
+    }
+
+    /// The same color at a different alpha — for the opacity tokens below.
+    pub const fn with_alpha(self, a: u8) -> Self {
+        Self { a, ..self }
+    }
+}
+
+/// One theme's semantic roles. Fields are generated from junoui's role list,
+/// so every palette/mode constant below carries all of them.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub struct Palette {
+    pub nominal: Rgba,
+    pub active: Rgba,
+    pub target: Rgba,
+    pub caution: Rgba,
+    pub warning: Rgba,
+    pub data: Rgba,
+    pub data_dim: Rgba,
+    pub label: Rgba,
+    pub muted: Rgba,
+    pub border: Rgba,
+    pub border_strong: Rgba,
+    pub s0: Rgba,
+    pub s1: Rgba,
+    pub s2: Rgba,
+    pub s3: Rgba,
+}
+
+// ── themes ──────────────────────────────────────────────────────────────
+pub const COLORBLIND_DARK: Palette = Palette {
+    nominal: Rgba::hex(0x78A9FF),
+    active: Rgba::hex(0xBE95FF),
+    target: Rgba::hex(0xFF7EB6),
+    caution: Rgba::hex(0xF1C21B),
+    warning: Rgba::hex(0xFF832B),
+    data: Rgba::hex(0xEAE7E2),
+    data_dim: Rgba::hex(0x45423C),
+    label: Rgba::hex(0x8C8981),
+    muted: Rgba::hex(0x625F59),
+    border: Rgba::hex(0x312D27),
+    border_strong: Rgba::hex(0x4B4740),
+    s0: Rgba::hex(0x060402),
+    s1: Rgba::hex(0x0D0B06),
+    s2: Rgba::hex(0x16130E),
+    s3: Rgba::hex(0x221F19),
+};
+
+pub const COLORBLIND_LIGHT: Palette = Palette {
+    nominal: Rgba::hex(0x0043CE),
+    active: Rgba::hex(0x6929C4),
+    target: Rgba::hex(0x9F1853),
+    caution: Rgba::hex(0x7D4F00),
+    warning: Rgba::hex(0xBA4300),
+    data: Rgba::hex(0x0B0906),
+    data_dim: Rgba::hex(0xA19E99),
+    label: Rgba::hex(0x504D47),
+    muted: Rgba::hex(0x8B8984),
+    border: Rgba::hex(0xC7C4BD),
+    border_strong: Rgba::hex(0xAEAAA4),
+    s0: Rgba::hex(0xF8F5EF),
+    s1: Rgba::hex(0xEBE7E0),
+    s2: Rgba::hex(0xDEDAD3),
+    s3: Rgba::hex(0xD1CDC7),
+};
+
+pub const SOFT_DARK: Palette = Palette {
+    nominal: Rgba::hex(0x38A065),
+    active: Rgba::hex(0x00A8BE),
+    target: Rgba::hex(0x9C5CAF),
+    caution: Rgba::hex(0xD09945),
+    warning: Rgba::hex(0xD15D4D),
+    data: Rgba::hex(0xE0DED8),
+    data_dim: Rgba::hex(0x47453F),
+    label: Rgba::hex(0x8C8982),
+    muted: Rgba::hex(0x615F59),
+    border: Rgba::hex(0x32302B),
+    border_strong: Rgba::hex(0x4D4A44),
+    s0: Rgba::hex(0x070602),
+    s1: Rgba::hex(0x0F0D08),
+    s2: Rgba::hex(0x181610),
+    s3: Rgba::hex(0x24211B),
+};
+
+pub const SOFT_LIGHT: Palette = Palette {
+    nominal: Rgba::hex(0x00582C),
+    active: Rgba::hex(0x006174),
+    target: Rgba::hex(0x673477),
+    caution: Rgba::hex(0x8A5700),
+    warning: Rgba::hex(0x86281D),
+    data: Rgba::hex(0x0A0906),
+    data_dim: Rgba::hex(0x9D9B96),
+    label: Rgba::hex(0x55524C),
+    muted: Rgba::hex(0x8A8782),
+    border: Rgba::hex(0xCDCAC3),
+    border_strong: Rgba::hex(0xB4B1AA),
+    s0: Rgba::hex(0xF4F2EA),
+    s1: Rgba::hex(0xE7E4DD),
+    s2: Rgba::hex(0xDAD7D0),
+    s3: Rgba::hex(0xCDCAC3),
+};
+
+pub const STANDARD_DARK: Palette = Palette {
+    nominal: Rgba::hex(0x00CB4C),
+    active: Rgba::hex(0x00CDDF),
+    target: Rgba::hex(0xD63DE6),
+    caution: Rgba::hex(0xF4A000),
+    warning: Rgba::hex(0xF13A32),
+    data: Rgba::hex(0xEAE7E2),
+    data_dim: Rgba::hex(0x45423C),
+    label: Rgba::hex(0x8C8981),
+    muted: Rgba::hex(0x625F59),
+    border: Rgba::hex(0x312D27),
+    border_strong: Rgba::hex(0x4B4740),
+    s0: Rgba::hex(0x060402),
+    s1: Rgba::hex(0x0D0B06),
+    s2: Rgba::hex(0x16130E),
+    s3: Rgba::hex(0x221F19),
+};
+
+pub const STANDARD_LIGHT: Palette = Palette {
+    nominal: Rgba::hex(0x006400),
+    active: Rgba::hex(0x006B98),
+    target: Rgba::hex(0x8B0097),
+    caution: Rgba::hex(0x9B4C00),
+    warning: Rgba::hex(0xA10000),
+    data: Rgba::hex(0x0B0906),
+    data_dim: Rgba::hex(0xA19E99),
+    label: Rgba::hex(0x504D47),
+    muted: Rgba::hex(0x8B8984),
+    border: Rgba::hex(0xC7C4BD),
+    border_strong: Rgba::hex(0xAEAAA4),
+    s0: Rgba::hex(0xF8F5EF),
+    s1: Rgba::hex(0xEBE7E0),
+    s2: Rgba::hex(0xDEDAD3),
+    s3: Rgba::hex(0xD1CDC7),
+};
+
+// ── colors, flat ────────────────────────────────────────────────────────
+pub const COLORBLIND_DARK_NOMINAL: Rgba = Rgba::hex(0x78A9FF);
+pub const COLORBLIND_DARK_ACTIVE: Rgba = Rgba::hex(0xBE95FF);
+pub const COLORBLIND_DARK_TARGET: Rgba = Rgba::hex(0xFF7EB6);
+pub const COLORBLIND_DARK_CAUTION: Rgba = Rgba::hex(0xF1C21B);
+pub const COLORBLIND_DARK_WARNING: Rgba = Rgba::hex(0xFF832B);
+pub const COLORBLIND_DARK_DATA: Rgba = Rgba::hex(0xEAE7E2);
+pub const COLORBLIND_DARK_LABEL: Rgba = Rgba::hex(0x8C8981);
+pub const COLORBLIND_DARK_MUTED: Rgba = Rgba::hex(0x625F59);
+pub const COLORBLIND_DARK_BORDER: Rgba = Rgba::hex(0x312D27);
+pub const COLORBLIND_DARK_S0: Rgba = Rgba::hex(0x060402);
+pub const COLORBLIND_DARK_S1: Rgba = Rgba::hex(0x0D0B06);
+pub const COLORBLIND_DARK_S2: Rgba = Rgba::hex(0x16130E);
+pub const COLORBLIND_DARK_S3: Rgba = Rgba::hex(0x221F19);
+pub const COLORBLIND_DARK_DATA_DIM: Rgba = Rgba::hex(0x45423C);
+pub const COLORBLIND_DARK_BORDER_STRONG: Rgba = Rgba::hex(0x4B4740);
+pub const COLORBLIND_LIGHT_NOMINAL: Rgba = Rgba::hex(0x0043CE);
+pub const COLORBLIND_LIGHT_ACTIVE: Rgba = Rgba::hex(0x6929C4);
+pub const COLORBLIND_LIGHT_TARGET: Rgba = Rgba::hex(0x9F1853);
+pub const COLORBLIND_LIGHT_CAUTION: Rgba = Rgba::hex(0x7D4F00);
+pub const COLORBLIND_LIGHT_WARNING: Rgba = Rgba::hex(0xBA4300);
+pub const COLORBLIND_LIGHT_DATA: Rgba = Rgba::hex(0x0B0906);
+pub const COLORBLIND_LIGHT_LABEL: Rgba = Rgba::hex(0x504D47);
+pub const COLORBLIND_LIGHT_MUTED: Rgba = Rgba::hex(0x8B8984);
+pub const COLORBLIND_LIGHT_BORDER: Rgba = Rgba::hex(0xC7C4BD);
+pub const COLORBLIND_LIGHT_S0: Rgba = Rgba::hex(0xF8F5EF);
+pub const COLORBLIND_LIGHT_S1: Rgba = Rgba::hex(0xEBE7E0);
+pub const COLORBLIND_LIGHT_S2: Rgba = Rgba::hex(0xDEDAD3);
+pub const COLORBLIND_LIGHT_S3: Rgba = Rgba::hex(0xD1CDC7);
+pub const COLORBLIND_LIGHT_DATA_DIM: Rgba = Rgba::hex(0xA19E99);
+pub const COLORBLIND_LIGHT_BORDER_STRONG: Rgba = Rgba::hex(0xAEAAA4);
+pub const SOFT_DARK_NOMINAL: Rgba = Rgba::hex(0x38A065);
+pub const SOFT_DARK_ACTIVE: Rgba = Rgba::hex(0x00A8BE);
+pub const SOFT_DARK_TARGET: Rgba = Rgba::hex(0x9C5CAF);
+pub const SOFT_DARK_CAUTION: Rgba = Rgba::hex(0xD09945);
+pub const SOFT_DARK_WARNING: Rgba = Rgba::hex(0xD15D4D);
+pub const SOFT_DARK_DATA: Rgba = Rgba::hex(0xE0DED8);
+pub const SOFT_DARK_LABEL: Rgba = Rgba::hex(0x8C8982);
+pub const SOFT_DARK_MUTED: Rgba = Rgba::hex(0x615F59);
+pub const SOFT_DARK_BORDER: Rgba = Rgba::hex(0x32302B);
+pub const SOFT_DARK_S0: Rgba = Rgba::hex(0x070602);
+pub const SOFT_DARK_S1: Rgba = Rgba::hex(0x0F0D08);
+pub const SOFT_DARK_S2: Rgba = Rgba::hex(0x181610);
+pub const SOFT_DARK_S3: Rgba = Rgba::hex(0x24211B);
+pub const SOFT_DARK_DATA_DIM: Rgba = Rgba::hex(0x47453F);
+pub const SOFT_DARK_BORDER_STRONG: Rgba = Rgba::hex(0x4D4A44);
+pub const SOFT_LIGHT_NOMINAL: Rgba = Rgba::hex(0x00582C);
+pub const SOFT_LIGHT_ACTIVE: Rgba = Rgba::hex(0x006174);
+pub const SOFT_LIGHT_TARGET: Rgba = Rgba::hex(0x673477);
+pub const SOFT_LIGHT_CAUTION: Rgba = Rgba::hex(0x8A5700);
+pub const SOFT_LIGHT_WARNING: Rgba = Rgba::hex(0x86281D);
+pub const SOFT_LIGHT_DATA: Rgba = Rgba::hex(0x0A0906);
+pub const SOFT_LIGHT_LABEL: Rgba = Rgba::hex(0x55524C);
+pub const SOFT_LIGHT_MUTED: Rgba = Rgba::hex(0x8A8782);
+pub const SOFT_LIGHT_BORDER: Rgba = Rgba::hex(0xCDCAC3);
+pub const SOFT_LIGHT_S0: Rgba = Rgba::hex(0xF4F2EA);
+pub const SOFT_LIGHT_S1: Rgba = Rgba::hex(0xE7E4DD);
+pub const SOFT_LIGHT_S2: Rgba = Rgba::hex(0xDAD7D0);
+pub const SOFT_LIGHT_S3: Rgba = Rgba::hex(0xCDCAC3);
+pub const SOFT_LIGHT_DATA_DIM: Rgba = Rgba::hex(0x9D9B96);
+pub const SOFT_LIGHT_BORDER_STRONG: Rgba = Rgba::hex(0xB4B1AA);
+pub const STANDARD_DARK_NOMINAL: Rgba = Rgba::hex(0x00CB4C);
+pub const STANDARD_DARK_ACTIVE: Rgba = Rgba::hex(0x00CDDF);
+pub const STANDARD_DARK_TARGET: Rgba = Rgba::hex(0xD63DE6);
+pub const STANDARD_DARK_CAUTION: Rgba = Rgba::hex(0xF4A000);
+pub const STANDARD_DARK_WARNING: Rgba = Rgba::hex(0xF13A32);
+pub const STANDARD_DARK_DATA: Rgba = Rgba::hex(0xEAE7E2);
+pub const STANDARD_DARK_LABEL: Rgba = Rgba::hex(0x8C8981);
+pub const STANDARD_DARK_MUTED: Rgba = Rgba::hex(0x625F59);
+pub const STANDARD_DARK_BORDER: Rgba = Rgba::hex(0x312D27);
+pub const STANDARD_DARK_S0: Rgba = Rgba::hex(0x060402);
+pub const STANDARD_DARK_S1: Rgba = Rgba::hex(0x0D0B06);
+pub const STANDARD_DARK_S2: Rgba = Rgba::hex(0x16130E);
+pub const STANDARD_DARK_S3: Rgba = Rgba::hex(0x221F19);
+pub const STANDARD_DARK_DATA_DIM: Rgba = Rgba::hex(0x45423C);
+pub const STANDARD_DARK_BORDER_STRONG: Rgba = Rgba::hex(0x4B4740);
+pub const STANDARD_LIGHT_NOMINAL: Rgba = Rgba::hex(0x006400);
+pub const STANDARD_LIGHT_ACTIVE: Rgba = Rgba::hex(0x006B98);
+pub const STANDARD_LIGHT_TARGET: Rgba = Rgba::hex(0x8B0097);
+pub const STANDARD_LIGHT_CAUTION: Rgba = Rgba::hex(0x9B4C00);
+pub const STANDARD_LIGHT_WARNING: Rgba = Rgba::hex(0xA10000);
+pub const STANDARD_LIGHT_DATA: Rgba = Rgba::hex(0x0B0906);
+pub const STANDARD_LIGHT_LABEL: Rgba = Rgba::hex(0x504D47);
+pub const STANDARD_LIGHT_MUTED: Rgba = Rgba::hex(0x8B8984);
+pub const STANDARD_LIGHT_BORDER: Rgba = Rgba::hex(0xC7C4BD);
+pub const STANDARD_LIGHT_S0: Rgba = Rgba::hex(0xF8F5EF);
+pub const STANDARD_LIGHT_S1: Rgba = Rgba::hex(0xEBE7E0);
+pub const STANDARD_LIGHT_S2: Rgba = Rgba::hex(0xDEDAD3);
+pub const STANDARD_LIGHT_S3: Rgba = Rgba::hex(0xD1CDC7);
+pub const STANDARD_LIGHT_DATA_DIM: Rgba = Rgba::hex(0xA19E99);
+pub const STANDARD_LIGHT_BORDER_STRONG: Rgba = Rgba::hex(0xAEAAA4);
+
+// ── canvas ink — unthemed, for marks over arbitrary imagery ─────────────
+pub const INK_CANVAS_INK: Rgba = Rgba::hex(0xFFFFFF);
+pub const INK_CANVAS_HALO: Rgba = Rgba::hex(0x000000);
+pub const INK_VIVID_NOMINAL: Rgba = Rgba::hex(0x00DC27);
+pub const INK_VIVID_ACTIVE: Rgba = Rgba::hex(0x00D6F8);
+pub const INK_VIVID_TARGET: Rgba = Rgba::hex(0xF82DF9);
+pub const INK_VIVID_CAUTION: Rgba = Rgba::hex(0xFFB300);
+pub const INK_VIVID_WARNING: Rgba = Rgba::hex(0xFF002E);
+
+// ── lengths (px) ────────────────────────────────────────────────────────
+pub const BORDER_WIDTH_1: f32 = 1.0;
+pub const BORDER_WIDTH_2: f32 = 2.0;
+pub const BORDER_WIDTH_3: f32 = 3.0;
+pub const BP_SM: f32 = 640.0;
+pub const BP_MD: f32 = 768.0;
+pub const BP_LG: f32 = 1024.0;
+pub const BP_XL: f32 = 1280.0;
+pub const BP_2XL: f32 = 1536.0;
+pub const INK_CANVAS_HALO_WIDTH: f32 = 2.0;
+pub const INK_CANVAS_HALO_WIDTH_LG: f32 = 3.0;
+pub const RADIUS_2: f32 = 2.0;
+pub const RADIUS_3: f32 = 3.0;
+pub const RADIUS_4: f32 = 4.0;
+pub const RADIUS_5: f32 = 5.0;
+pub const RADIUS_8: f32 = 8.0;
+pub const SIZE_TAP_MIN: f32 = 24.0;
+pub const SIZE_TAP_COMFORTABLE: f32 = 44.0;
+pub const SIZE_DOT_SM: f32 = 8.0;
+pub const SIZE_DOT_MD: f32 = 10.0;
+pub const SPACE_2: f32 = 2.0;
+pub const SPACE_4: f32 = 4.0;
+pub const SPACE_8: f32 = 8.0;
+pub const SPACE_10: f32 = 10.0;
+pub const SPACE_12: f32 = 12.0;
+pub const SPACE_16: f32 = 16.0;
+pub const SPACE_20: f32 = 20.0;
+pub const SPACE_24: f32 = 24.0;
+pub const SPACE_28: f32 = 28.0;
+pub const SPACE_32: f32 = 32.0;
+pub const SPACE_40: f32 = 40.0;
+pub const SPACE_56: f32 = 56.0;
+pub const SPACE_72: f32 = 72.0;
+pub const SPACE_96: f32 = 96.0;
+pub const FONT_SIZE_10: f32 = 10.0;
+pub const FONT_SIZE_11: f32 = 11.0;
+pub const FONT_SIZE_12: f32 = 12.0;
+pub const FONT_SIZE_13: f32 = 13.0;
+pub const FONT_SIZE_14: f32 = 14.0;
+pub const FONT_SIZE_16: f32 = 16.0;
+pub const FONT_SIZE_18: f32 = 18.0;
+pub const FONT_SIZE_20: f32 = 20.0;
+pub const FONT_SIZE_28: f32 = 28.0;
+pub const FONT_SIZE_32: f32 = 32.0;
+pub const FONT_SIZE_36: f32 = 36.0;
+pub const FONT_SIZE_38: f32 = 38.0;
+pub const FONT_SIZE_48: f32 = 48.0;
+pub const FONT_SIZE_52: f32 = 52.0;
+
+// ── durations (ms) ──────────────────────────────────────────────────────
+pub const MOTION_DURATION_INSTANT_MS: f32 = 80.0;
+pub const MOTION_DURATION_QUICK_MS: f32 = 140.0;
+pub const MOTION_DURATION_BASE_MS: f32 = 200.0;
+pub const MOTION_DURATION_DELIBERATE_MS: f32 = 300.0;
+
+// ── whole numbers (z-index, font weight) ────────────────────────────────
+pub const FONT_WEIGHT_LIGHT: i32 = 300;
+pub const FONT_WEIGHT_REGULAR: i32 = 400;
+pub const FONT_WEIGHT_MEDIUM: i32 = 500;
+pub const FONT_WEIGHT_SEMIBOLD: i32 = 600;
+pub const FONT_WEIGHT_BOLD: i32 = 700;
+pub const FONT_LINEHEIGHT_NONE: i32 = 1;
+pub const Z_SURFACE: i32 = 0;
+pub const Z_RAISED: i32 = 100;
+pub const Z_ANCHORED: i32 = 2000;
+pub const Z_OVERLAY: i32 = 4000;
+pub const Z_ALERT: i32 = 5000;
+
+// ── ratios (opacity, line height) ───────────────────────────────────────
+pub const INK_CANVAS_SCRIM: f32 = 0.28;
+pub const OPACITY_DISABLED: f32 = 0.45;
+pub const OPACITY_MUTED: f32 = 0.65;
+pub const OPACITY_SCRIM: f32 = 0.62;
+pub const FONT_LINEHEIGHT_TIGHT: f32 = 1.1;
+pub const FONT_LINEHEIGHT_SNUG: f32 = 1.2;
+pub const FONT_LINEHEIGHT_NORMAL: f32 = 1.4;
+pub const FONT_LINEHEIGHT_RELAXED: f32 = 1.5;
+pub const FONT_LINEHEIGHT_LOOSE: f32 = 1.7;
+
+// ── CSS-authored values, verbatim ───────────────────────────────────────
+//
+// Shadows and font stacks are authored as CSS and are shipped unparsed. A
+// Rust renderer cannot consume `0 4px 14px rgb(0 0 0 / 0.35)` directly — it is
+// here so the values exist in one place and a webview or a parser can reach
+// them, not as ready-made native input.
+pub const SHADOW_1: &str = "0 1px 2px rgb(0 0 0 / 0.30)";
+pub const SHADOW_2: &str = "0 4px 14px rgb(0 0 0 / 0.35)";
+pub const SHADOW_3: &str = "0 12px 32px rgb(0 0 0 / 0.50)";
+pub const MOTION_EASE_DECEL: &str = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+pub const MOTION_EASE_ACCEL: &str = "cubic-bezier(0.4, 0, 1, 1)";
+pub const MOTION_EASE_STANDARD: &str = "cubic-bezier(0.2, 0.7, 0.3, 1)";
+pub const MOTION_EASE_SPRING: &str = "cubic-bezier(0.2, 0.9, 0.3, 1.2)";
+pub const FONT_FAMILY_SANS: &str = "'B612', sans-serif";
+pub const FONT_FAMILY_MONO: &str = "'B612 Mono', monospace";
+pub const FONT_TRACKING_TIGHT: &str = "0.02em";
+pub const FONT_TRACKING_NORMAL: &str = "0.06em";
+pub const FONT_TRACKING_LABEL: &str = "0.08em";
+pub const FONT_TRACKING_WIDE: &str = "0.12em";
+pub const FONT_TRACKING_CAPS: &str = "0.15em";
+pub const FONT_TRACKING_WIDER: &str = "0.2em";
+pub const FONT_TRACKING_WIDEST: &str = "0.3em";

package/dist/scss/_juno-tokens.scss

@@ -101,6 +101,16 @@ $juno-bp-2xl: 1536px !default;
 $juno-shadow-1: 0 1px 2px rgb(0 0 0 / 0.30) !default;
 $juno-shadow-2: 0 4px 14px rgb(0 0 0 / 0.35) !default;
 $juno-shadow-3: 0 12px 32px rgb(0 0 0 / 0.50) !default;
+$juno-ink-canvas-ink: #FFFFFF !default;
+$juno-ink-canvas-halo: #000000 !default;
+$juno-ink-canvas-halo-width: 2px !default;
+$juno-ink-canvas-halo-width-lg: 3px !default;
+$juno-ink-canvas-scrim: 0.28 !default;
+$juno-ink-vivid-nominal: oklch(76% 0.28 148) !default;
+$juno-ink-vivid-active: oklch(76% 0.24 205) !default;
+$juno-ink-vivid-target: oklch(70% 0.30 328) !default;
+$juno-ink-vivid-caution: oklch(82% 0.20 82) !default;
+$juno-ink-vivid-warning: oklch(68% 0.28 25) !default;
 $juno-motion-duration-instant: 80ms !default;
 $juno-motion-duration-quick: 140ms !default;
 $juno-motion-duration-base: 200ms !default;

package/docs/components/canvas-ink.md

@@ -0,0 +1,71 @@
+# Canvas ink
+
+Marks drawn over **arbitrary imagery** — a photo, a map, a video frame, a camera
+feed. Anywhere the background is content rather than one of junoui's surfaces.
+
+## Why this is not just a colour
+
+junoui's contrast story assumes a controlled surface, `s0` through `s3`: every
+role colour's ratio is computed against a known background. Over imagery there
+is no known background. In one orthophoto a black shadow and a snowfield are
+adjacent pixels, so **no single ink colour is legible and no contrast ratio can
+be asserted about one**.
+
+The answer is a pair that spans the luminance range. Over a light backing the
+halo carries the contrast; over a dark one the ink does. Neither half works
+alone, which is why one class applies both.
+
+```html
+<figcaption class="juno-canvas-ink">Sector 7 · 1.2 km</figcaption>
+<figcaption class="juno-canvas-ink juno-canvas-ink--warning">Signal lost</figcaption>
+
+<svg>
+  <path class="juno-canvas-ink__halo" d="…" />
+  <path class="juno-canvas-ink__stroke" d="…" />
+</svg>
+
+<div class="juno-canvas-scrim">…chrome floating over live content…</div>
+```
+
+| Class / token                         | Effect                                           |
+| ------------------------------------- | ------------------------------------------------ |
+| `.juno-canvas-ink`                    | Text: the ink colour plus a four-offset halo.    |
+| `.juno-canvas-ink--lg`                | The wider halo, for `font.size.20` and up.       |
+| `.juno-canvas-ink--<role>`            | A status hue at raised chroma, keeping the halo. |
+| `.juno-canvas-ink__halo` / `__stroke` | Vector marks: two passes of the same path.       |
+| `.juno-canvas-scrim`                  | Backdrop for chrome floating over live content.  |
+| `ink.canvas.ink` / `ink.canvas.halo`  | The pair.                                        |
+| `ink.canvas.halo-width` / `-lg`       | Outline widths.                                  |
+| `ink.vivid.*`                         | Role hues at raised chroma.                      |
+| `ink.canvas.scrim`                    | `0.28`, distinct from `opacity.scrim`.           |
+
+## Three things that are decided, not preferences
+
+**The halo is pure black because the arithmetic says so.** The worst backing is
+a mid grey, where both halves are weakest at once — not the extremes, which are
+the easy cases. The sweep floor there is **4.61:1** against a 4.5:1 requirement.
+A tasteful near-black with a blue cast (`#0A0C10`) measures 4.43:1 and fails on
+three of 256 grey backings. The pair has roughly 0.1 of headroom, so neither
+half can be nudged for looks. `test/canvas-ink.test.mjs` sweeps every grey.
+
+**It is not themed.** A satellite image does not get lighter because the user
+chose light mode. Theming the pair would make it track the app's surface, which
+is precisely the background it is _not_ over. A test fails if `ink.canvas.ink`
+or `ink.canvas.halo` ever appears under a mode or palette selector.
+
+**The scrim is not `opacity.scrim`.** `0.62` is tuned to suppress a modal's
+background. Here the background is the thing the chrome is annotating — greying
+it out defeats the purpose. `0.28` is the value for content you still want read.
+
+## Four offsets, not one blur
+
+A blurred shadow fades at the glyph's corners, which is exactly where a thin
+stroke needs the most help. Four hard offsets cost the same and hold the corners.
+In SVG, `paint-order: stroke fill` gives a real stroke and is better; the class
+sets both.
+
+## Native
+
+Every target carries these tokens — `INK_CANVAS_INK` / `INK_CANVAS_HALO` in
+Rust, `inkCanvasInk` in Swift and Dart. The halo mechanism is yours to apply:
+stroke the path twice, or draw text with an outline pass first.