feat: add [data-demo] attribute, purge all inline CSS from docs

New data-demo attribute for demo blocks in documentation.
Replaced 16 files worth of inline style="" wrappers with <div data-demo>.
Only remaining style= is charts --size data injection (legitimate).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ludo 2026-04-11 18:53:59 +02:00
parent 414ede2957
commit fe8ddd6153
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
17 changed files with 32 additions and 20 deletions

View file

@ -678,4 +678,16 @@ a[data-role="secondary"]:hover {
gap: var(--space-5);
}
/* ── Demo block ────────────────────────────────────────────────────── */
/* Inline demonstration area within docs pages.
Usage: <div data-demo>live HTML example</div> */
[data-demo] {
border: var(--border-width) solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
background: var(--surface-1);
margin-block: var(--space-4);
}
} /* end @layer data-attrs */