@junoput01/junoui 0.7.0 → 0.9.0

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.

package/docs/components/gizmo.md

@@ -0,0 +1,114 @@
+# Viewport orientation gizmo
+
+The orientation widget any 3D or map viewport ships: a compass ring with
+clickable snap targets, a secondary arc for a second angle (pitch, tilt,
+elevation) inside a clamped range, and a centre target that resets the view.
+
+CAD and BIM viewers, product configurators, virtual tours, model previews, floor
+plans, any map with a tilt.
+
+## A ring, not a cube
+
+An Autodesk-style ViewCube is the wrong shape for anything with a **privileged
+up-vector** — a map, a terrain, a site plan — because there is no meaningful
+front, right or bottom face to click. A ring degrades to that case and
+generalises to free orbit; a cube does not go the other way.
+
+## Web
+
+```html
+<div
+  class="juno-gizmo"
+  role="group"
+  aria-label="View orientation"
+  style="--juno-gizmo-heading:45deg; --juno-gizmo-pitch:35deg;"
+>
+  <p class="juno-gizmo__readout" aria-live="polite">
+    Facing north-east, 45 degrees. Tilted 35 degrees.
+  </p>
+  <div class="juno-gizmo__ring">
+    <span class="juno-gizmo__needle" aria-hidden="true"></span>
+    <button class="juno-gizmo__mark" style="--juno-gizmo-at:0deg" aria-label="Face north">N</button>
+    <!-- …seven more, every 45° -->
+    <button class="juno-gizmo__center" aria-label="Reset view to north, level">⌖</button>
+  </div>
+  <div class="juno-gizmo__arc"><span class="juno-gizmo__arc-hand" aria-hidden="true"></span></div>
+</div>
+```
+
+| Class / prop                      | Effect                                       |
+| --------------------------------- | -------------------------------------------- |
+| `.juno-gizmo`                     | Root. Holds the angles and the derived size. |
+| `.juno-gizmo__readout`            | The spoken state. `aria-live="polite"`.      |
+| `.juno-gizmo__ring`               | The compass ring.                            |
+| `.juno-gizmo__needle`             | Points at `--juno-gizmo-heading`.            |
+| `.juno-gizmo__mark`               | A snap target. A real `<button>`.            |
+| `.juno-gizmo__center`             | Reset target.                                |
+| `.juno-gizmo__arc` / `__arc-hand` | The second angle, clamped.                   |
+| `--juno-gizmo-heading` / `-pitch` | **The app writes these.**                    |
+| `--juno-gizmo-at`                 | One mark's own bearing.                      |
+| `--juno-gizmo-pitch-min` / `-max` | The clamp (default `0deg`–`85deg`).          |
+| `--juno-gizmo-size`               | Ring diameter. Derived — see below.          |
+
+**The app owns the camera.** junoui rotates the needle and the hand; it never
+stores or changes an angle.
+
+## The accessibility contract
+
+This is why the component is upstream rather than in each app.
+
+- **`role="group"`** with an accessible name on the root.
+- **Snap targets are real `<button>`s.** Not a canvas hit test, not a `div` with
+  a click handler. A button is focusable, activates on Enter _and_ Space, is
+  announced as a control, and works in a screen reader's forms mode.
+- **Every mark carries an accessible name**, because `"N"` is a letter, not a
+  name. `aria-label="Face north"`.
+- **One focus stop.** Tab reaches the gizmo once; arrow keys move between marks
+  and **wrap**, Enter activates. Eight tab stops for eight compass points is what
+  apps ship and what makes the widget unusable by keyboard.
+- **The bearing is announced in words.** A rotating needle announces nothing, and
+  `"37deg"` is a number the listener has to convert. The readout is a live region
+  saying _"Facing north-east, 37 degrees. Tilted 45 degrees."_
+- **`aria-current="true"`** on the mark the camera is nearest — not a class, since
+  the app must say it for the screen reader anyway.
+
+```js
+import { enhanceGizmo, orientationLabel, bearingLabel } from 'junoui/gizmo';
+
+enhanceGizmo(el); // one focus stop, wrapping arrows
+readout.textContent = orientationLabel(yaw, pitch);
+bearingLabel(37); // → "north-east"
+```
+
+Stateless, like `junoui/tree`: it moves focus and lets the marks' own click
+handlers fire. It never writes an angle.
+
+## The diameter is derived, not chosen
+
+`N` marks sit evenly around the rim, and each is inset from it by half a target,
+so their centres lie on a circle of radius `d/2 − tap/2`. The straight-line
+distance between two adjacent centres — the **chord**, not the arc — must be at
+least one tap target:
+
+```
+d ≥ tap · (1 / sin(π / N) + 1)
+```
+
+which is what `--juno-gizmo-size` computes: `158.98px` at `N = 8` and a 44px
+target.
+
+**This derivation was wrong twice, and both errors were invisible in the
+source.** Sizing off the _arc_ between centres (`N · tap / π`) gives 112.05px,
+whose chord is 42.9px — every neighbouring pair overlapping by 1.1px. Correcting
+to the chord but forgetting the inset gives 114.98px and measures 27.16px between
+centres. Both were caught by measuring a laid-out ring, which is why
+`test/visual/gizmo.spec.mjs` asserts the distance between every pair of marks
+rather than trusting the formula. The tap floor **moves** — 24px on a
+fine pointer, 44px on a coarse one — so a ring with a hard-coded diameter has
+eight overlapping targets on a phone. Setting `--juno-gizmo-size` larger is fine;
+`max()` stops it going below what the marks need.
+
+## Motion
+
+Snap transitions run on `--juno-motion-scale`, so `prefers-reduced-motion`
+collapses them through the base layer without a component-local media query.

package/docs/components/swatch.md

@@ -0,0 +1,95 @@
+# Colour swatch & palette
+
+Showing a user-chosen colour, and letting someone pick one. Diagrams, calendars,
+tag and label systems, chart series colours, annotation tools, theming UIs,
+kanban boards.
+
+## The hard part is not the square
+
+A swatch shows an **arbitrary** colour, so every piece of chrome on it — its
+border, its focus ring, its checked indicator — has to stay visible against a
+colour junoui has never seen. A single hairline fails at one end of the range: a
+dark border vanishes on near-black, a light one vanishes on near-white, and the
+swatch that loses its border is the one that has merged with the panel behind it.
+
+So the border is a **pair** of hairlines, one dark (inset) and one light
+(outset). Whatever the swatch, one of them contrasts; the other is the one you
+do not notice. `test/swatch.test.mjs` sweeps the swatch colour and asserts one
+ring always clears 3:1, rather than asserting a border value.
+
+**Focus rings sit outside the swatch, with an offset**, so their contrast is
+against the panel — a known surface — rather than against a hue junoui cannot
+predict. A ring drawn _on_ the swatch has the same unsolvable problem, and a
+thicker ring does not fix a hue collision.
+
+## Web
+
+```html
+<span
+  class="juno-swatch"
+  style="--juno-swatch-color:#C41E3A"
+  role="img"
+  aria-label="Crimson"
+></span>
+
+<button
+  class="juno-swatch juno-swatch--button"
+  style="--juno-swatch-color:#1F6FEB"
+  aria-label="Annotation colour: Azure"
+  popovertarget="palette"
+></button>
+
+<div class="juno-popover" popover id="palette">
+  <div class="juno-palette" role="listbox" aria-label="Annotation colour">
+    <button
+      class="juno-palette__option"
+      role="option"
+      aria-selected="true"
+      style="--juno-swatch-color:#1F6FEB"
+      aria-label="Azure"
+    >
+      <svg class="juno-icon juno-palette__check" aria-hidden="true">
+        <use href="…#juno-i-check" />
+      </svg>
+    </button>
+  </div>
+</div>
+```
+
+| Class / prop                  | Effect                                                  |
+| ----------------------------- | ------------------------------------------------------- |
+| `.juno-swatch`                | The square. Two-tone ring, sized off the control scale. |
+| `.juno-swatch--circle`        | Round rather than square.                               |
+| `.juno-swatch--sm`            | `space.16` — inline with body text.                     |
+| `.juno-swatch--lg`            | `size.tap.comfortable` — a primary trigger.             |
+| `.juno-swatch--button`        | Swatch used as a trigger.                               |
+| `.juno-swatch--none`          | "No colour" — a slash, not a grey.                      |
+| `.juno-palette__option--none` | The same, as a choice in the grid.                      |
+| `.juno-palette`               | The grid inside a `.juno-popover`.                      |
+| `.juno-palette__option`       | One choice. Selected shows a glyph **and** a ring.      |
+| `--juno-swatch-color`         | **The app writes this.**                                |
+| `--juno-swatch-size`          | Defaults to `size.tap.min`.                             |
+| `--juno-palette-columns`      | Grid width (default `6`).                               |
+
+The app owns the colour list and which one is chosen.
+
+## Colour is never the only signal
+
+junoui's standing rule, and a bare swatch is exactly what violates it.
+
+- **Every swatch carries an accessible name.** `aria-label="Crimson"`, not a bare
+  square. A decorative swatch beside its own visible label can be `aria-hidden`,
+  but a swatch that _is_ the information needs the name.
+- **The checked state is a glyph**, not a hue. "The chosen one looks slightly
+  different" is invisible to anyone who cannot separate the two hues — and to
+  anyone reading a screenshot. The selected option also grows a ring in the
+  active role, so there are two non-colour cues.
+- **The check itself sits on an arbitrary colour**, so it gets a light glyph with
+  a dark halo — the canvas-ink pair at glyph scale.
+- **"No colour" is a slash, not a grey.** A consumer without this paints unset as
+  a mid grey and the user cannot tell _grey_ from _none_, which is a different
+  thing to know.
+
+`role="listbox"` + `role="option"` + `aria-selected` is the contract for a
+single-choice palette. The popover, its trigger and the open/close behaviour are
+`.juno-popover`'s — this is the grid that goes inside it.