Fix <small> font-size not applied (picocss/pico#561).

Author: Amaury

CLAUDE.md

@@ -60,6 +60,7 @@ These µCSS rules exist to fix PicoCSS default behaviors:
 - `[data-tooltip] { display: inline-block }` — Fix tooltip mispositioned on inline elements in Chromium (picocss/pico#678) — remove when fixed upstream
 - `[data-tooltip]::before/::after` use `--mu-inverted-background`/`--mu-inverted-color` instead of themed contrast — PicoCSS contrast is theme-dependent in µCSS, not always readable as tooltip background
 - `[data-tooltip]::before { white-space: pre-line; width: max-content; max-width: 20rem }` — Fix tooltip overflow on long text, support explicit line breaks, comfortable width (picocss/pico#665, picocss/pico#715) — remove when fixed upstream
+- `small { font-size: var(--mu-font-size) }` — Fix `<small>` font-size not applied (picocss/pico#561) — remove when fixed upstream
 - `code, kbd, samp { padding: 0.125rem 0.375rem }` — Fix inline code vertical padding too thick (picocss/pico#651) — remove when fixed upstream
 - PicoCSS sets `:where(table) { width: 100% }` — all tables are fullwidth by default, no `.table-fullwidth` class needed
 - PicoCSS `.outline` button style (3 colors) coexists with µCSS `.btn-outline` (11 colors) — different selectors, no conflict

DECISIONS.md

@@ -10,6 +10,7 @@ Fixes integrated into µCSS. The "Temporary" column indicates workarounds that s
 |----------|---------|--------------|-----------|
 | #540, #700 | Helper text (`<small>`) not styled after input groups | mu.utilities.css | Yes |
 | #634, #664 | Safari 18.2+ truncates dropdown text in nav | mu.component.nav.css | Yes |
+| #561 | `<small>` font-size not applied (variable set but unused) | mu.utilities.css | Yes |
 | #651 | Inline code/kbd/samp vertical padding too thick | mu.utilities.css, mu.component.var.css | Yes |
 | #663 | Striped table: hidden rows break odd/even alternation | mu.component.table.css | Yes |
 | #665, #715 | Tooltip overflow on long text, multiline support | mu.utilities.css | Yes |

README.md

@@ -207,6 +207,7 @@ Each theme maps 11 semantic roles to PicoCSS color families:
 - [Bleksak](https://github.com/Bleksak) — picocss/pico#715
 - [ManiShah7](https://github.com/ManiShah7) — picocss/pico#694 (fix for picocss/pico#678)
 - [irfanfadilah](https://github.com/irfanfadilah) — picocss/pico#651
+- [gustav-langer](https://github.com/gustav-langer) — picocss/pico#561
 
 ## License
 

css/mu.utilities.css

@@ -48,6 +48,12 @@ li ol {
 	max-width: 20rem;
 }
 
+/* PicoCSS bugfix: <small> font-size not applied (picocss/pico#561) — remove when fixed upstream */
+/* PicoCSS sets --pico-font-size: 0.875em on small but never applies it; browser uses "smaller" instead */
+small {
+	font-size: var(--mu-font-size);
+}
+
 /* PicoCSS bugfix: inline code vertical padding too thick (picocss/pico#651) — remove when fixed upstream */
 code, kbd, samp {
 	padding: 0.125rem 0.375rem;