Tooling · Catalogs: token viewer, contrast audit; fg_subtle meets AA

DesignTokenViewer shows every token of the theme in the mode shown,
named as code reads it: colors with their hex, syntax, chart and
terminal colors, the type scale, radii, control and icon sizes,
elevations and spacing. A11yChecker audits each text color over the
surfaces it sits on at 4.5:1 and the focus ring and chart hues at
3:1, failures first. The audit found fg_subtle under 4.5:1 on hover
and overlay; it is #6f6d6a light and #8c8a87 dark now, and a test
holds all four Ely palettes to the audit. IconBrowser points to
forms::IconPicker and the ScreenshotTest Harness to the gallery's
capture, each with a section on the tooling page.

src/theme/palette.rs

@@ -55,6 +55,14 @@ macro_rules! mixable {
             pub const NAMES: &'static [&'static str] = &[$(stringify!($color)),*];
 
             /// The color named `token`, a field's name; any other name fails.
+            pub fn token(&self, token: &str) -> Hsla {
+                match token {
+                    $(stringify!($color) => self.$color,)*
+                    other => panic!("no {} color {other}", stringify!($name).to_lowercase()),
+                }
+            }
+
+            /// The color named `token`, to change; any other name fails.
             pub fn token_mut(&mut self, token: &str) -> &mut Hsla {
                 match token {
                     $(stringify!($color) => &mut self.$color,)*
@@ -177,7 +185,7 @@ impl Palette {
             border_strong: c(0xcccac8),
             fg: c(0x181613),
             fg_muted: c(0x605d5a),
-            fg_subtle: c(0x82807d),
+            fg_subtle: c(0x6f6d6a),
             fg_disabled: c(0xacaaa8),
             accent: c(0x181613),
             accent_hover: c(0x302d2b),
@@ -248,7 +256,7 @@ impl Palette {
             border_strong: c(0x413f3d),
             fg: c(0xf3f1f0),
             fg_muted: c(0xafadab),
-            fg_subtle: c(0x858380),
+            fg_subtle: c(0x8c8a87),
             fg_disabled: c(0x5c5a58),
             accent: c(0xf3f1f0),
             accent_hover: c(0xd9d7d5),
@@ -327,6 +335,19 @@ mod tests {
         assert_eq!(light.mix(&dark, 0.0), light);
     }
 
+    #[test]
+    fn a_color_goes_by_its_name() {
+        let palette = Palette::dark(false);
+        assert_eq!(palette.token("fg_subtle"), palette.fg_subtle);
+        assert_eq!(palette.syntax.token("keyword"), palette.syntax.keyword);
+    }
+
+    #[test]
+    #[should_panic(expected = "no palette color ink_blot")]
+    fn a_name_no_color_has_fails() {
+        Palette::light(false).token("ink_blot");
+    }
+
     #[test]
     fn high_contrast_strengthens_borders() {
         let (base, hc) = (Palette::light(false), Palette::light(true));

src/theme/tooling.rs

@@ -9,6 +9,10 @@ pub struct ToolingSizes {
     pub graph: (Rems, Rems),
     /// How tall an event log grows before it scrolls.
     pub log: Rems,
+    /// A token viewer's tile, and its samples' least width.
+    pub tile: Rems,
+    /// A token viewer's swatch.
+    pub swatch: Rems,
 }
 
 impl Theme {
@@ -16,6 +20,8 @@ impl Theme {
         ToolingSizes {
             graph: (px_to_rems(160.0), px_to_rems(40.0)),
             log: px_to_rems(200.0),
+            tile: px_to_rems(200.0),
+            swatch: px_to_rems(28.0),
         }
     }
 }