trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

2
site/content/docs/components/buttons.md
View file

@ -14,7 +14,7 @@ ai-provider: "Anthropic"
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center">
<div data-demo>
<button>Primary</button>
<button data-variant="secondary">Secondary</button>
<button data-variant="danger">Danger</button>

2
site/content/docs/components/callouts.md
View file

@ -14,7 +14,7 @@ Add `data-callout="<type>"` to any block element to style it as a callout. Four
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:1rem">
<div data-demo>
<div data-callout="note"><strong>Note</strong> — General information worth highlighting.</div>
<div data-callout="tip"><strong>Tip</strong> — A helpful suggestion or best practice.</div>
<div data-callout="warning"><strong>Warning</strong> — Something to watch out for.</div>

2
site/content/docs/components/dialog.md
View file

@ -14,7 +14,7 @@ ASW styles the native `<dialog>` element — no JavaScript modal libraries requi
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<div data-demo>
<button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
<dialog id="demo-dialog">
<article>

4
site/content/docs/components/forms.md
View file

@ -14,8 +14,8 @@ All standard form elements are styled out of the box. Labels, inputs, selects, a
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<form style="display:flex;flex-direction:column;gap:1rem;max-width:28rem" onsubmit="return false">
<div data-demo>
<form onsubmit="return false">
<label>
Name
<input type="text" placeholder="Jane Smith">

2
site/content/docs/content/blockquotes.md
View file

@ -14,7 +14,7 @@ ai-provider: "Anthropic"
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<div data-demo>
<blockquote>
<p>Simplicity is the ultimate sophistication.</p>
<footer>— Leonardo da Vinci</footer>

4
site/content/docs/content/figures.md
View file

@ -14,9 +14,9 @@ ai-provider: "Anthropic"
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<div data-demo>
<figure>
<div style="background:var(--surface-2,#f0f0f0);height:120px;display:flex;align-items:center;justify-content:center;border-radius:4px">
<div data-text="dim">
<span data-text="dim">[ image placeholder ]</span>
</div>
<figcaption>Figure 1 — ASW renders figcaption below the content with muted styling.</figcaption>

2
site/content/docs/content/tables.md
View file

@ -14,7 +14,7 @@ ai-provider: "Anthropic"
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
<div data-demo>
<table>
<thead>
<tr><th>Element</th><th>Role</th><th>Class needed?</th></tr>

4
site/content/docs/getting-started/getting-started.md
View file

@ -14,8 +14,8 @@ Drop `asw.css` into your project, add one `<link>` tag, and write semantic HTML.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<nav style="margin-bottom:1rem">
<div data-demo>
<nav>
<a href="#">Home</a> ·
<a href="#">Docs</a> ·
<a href="#">About</a>

2
site/content/docs/reference/utilities.md
View file

@ -14,7 +14,7 @@ ASW provides a small set of utility attributes for inline adjustments. Rather th
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
<div data-demo>
<p><span data-text="mono">data-text="mono"</span> — monospace font</p>
<p><span data-text="dim">data-text="dim"</span> — reduced opacity / muted</p>
<p><span data-text="accent">data-text="accent"</span> — accent colour</p>

2
site/content/docs/reference/vocabulary.md
View file

@ -14,7 +14,7 @@ Every `data-*` attribute that ASW recognises is listed here. This is the authori
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
<div data-demo>
<table>
<thead>
<tr><th>Attribute</th><th>Values</th><th>Effect</th></tr>

2
site/content/docs/typography/code.md
View file

@ -14,7 +14,7 @@ Inline `<code>` uses a monospace font with a subtle background tint. Block-level
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<div data-demo>
<p>Use <code>data-callout="tip"</code> to style a callout block, or <code>data-layout="docs"</code> for a sidebar layout.</p>
<pre><code>/* Minimal ASW page */
&lt;!doctype html&gt;

2
site/content/docs/typography/headings.md
View file

@ -14,7 +14,7 @@ Headings `h1` through `h6` are sized using a fluid scale derived from the token
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<div data-demo>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

2
site/content/docs/typography/prose.md
View file

@ -14,7 +14,7 @@ ASW sets comfortable line-height, paragraph spacing, and list markers on prose e
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<div data-demo>
<p>This is a body paragraph. ASW uses a fluid font size and generous line-height so long-form text remains comfortable to read on any screen width.</p>
<ul>
<li>First item in an unordered list</li>

2
site/content/docs/vault/status.md
View file

@ -14,7 +14,7 @@ ai-provider: "Anthropic"
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
<div data-demo>
<p><span data-status="active">active</span> — currently running or in use</p>
<p><span data-status="sleeping">sleeping</span> — paused or idle</p>
<p><span data-status="blocked">blocked</span> — waiting on a dependency</p>

4
site/content/docs/vault/tasks.md
View file

@ -14,8 +14,8 @@ Add `data-task="<state>"` to a `<li>` element to render it as a task item with a
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<ul style="list-style:none;padding-left:0">
<div data-demo>
<ul>
<li data-task="done">Write the ASW reset layer</li>
<li data-task="done">Publish initial token system</li>
<li data-task="wip">Document all data-* attributes</li>

2
site/content/docs/vault/wikilinks.md
View file

@ -14,7 +14,7 @@ ai-provider: "Anthropic"
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<div data-demo>
<p>
See the <a href="#" data-wikilink>Getting Started</a> page, or cross-reference
<a href="#" data-wikilink>Core Concepts</a> and <a href="#" data-wikilink>Token System</a>.

12
src/layers/07-data-attrs.css
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 */