Rename the design system to Gloss
The system had been sharing a name with the umbrella it belongs to. "Arbitrary Definitions" is a proper name for a family of side projects; it says nothing about the design system in particular, and using it for both left the two conflated in the prose. Gloss is now the system, Arbitrary Definitions stays the umbrella above it. Mechanical: - 822 --ad-* custom property references -> --gl-* - 420 ad-* class names (62 distinct) -> gl-*, plus the ad-theme localStorage key - repo, marketplace, and plugin slugs -> gloss; the install line is now `/plugin marketplace add kejadlen/gloss` then `/plugin install gloss@gloss` - BASEURL and the site URLs follow the repo rename Prose, where the two names were doing each other's work: - README title and "The idea", index.md's hero, and the SKILL.md description now name Gloss and keep the umbrella as context - rationale.md's "Where the name comes from" became "Where this comes from" — it argues the umbrella's thesis, not the system's name, and now says so - the "no logo or brand mark" note points at "Gloss" as the wordmark Also drops a stale claim from lib/build.rb's DESCRIPTION, which still said the system was "synthesized from three real running projects" after 7f31275 and cfa8afd removed that origin story everywhere else, and which rationale.md already contradicts. Renaming the class prefix incidentally clears an ad-blocker hazard: cosmetic filter lists match ad-*-prefixed class names, so .ad-hero and .ad-callout were liable to be hidden for readers running content blockers. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015KBQpFBXXTBB1pwixe6fFZ
diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json
index a2c71a8..039062f 100644
--- a/.claude-plugin/marketplace.json
+++ b/.claude-plugin/marketplace.json
@@ -1,13 +1,13 @@
{
- "name": "arbitrary-definitions",
+ "name": "gloss",
"owner": {
"name": "kejadlen"
},
"plugins": [
{
- "name": "arbitrary-definitions",
+ "name": "gloss",
"source": "./",
- "description": "Design tokens, component contracts, and voice guidance for the Arbitrary Definitions personal design system.",
+ "description": "Design tokens, component contracts, and voice guidance for Gloss, the design system for Arbitrary Definitions projects.",
"version": "1.0.0"
}
]
diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json
index 2487d7f..5b097f8 100644
--- a/.claude-plugin/plugin.json
+++ b/.claude-plugin/plugin.json
@@ -1,8 +1,8 @@
{
- "name": "arbitrary-definitions",
- "displayName": "Arbitrary Definitions",
- "description": "Design tokens, component contracts, and voice guidance for the Arbitrary Definitions personal design system — bare-element markup, one swappable accent, IBM Plex Mono labels, no CSS class API to memorize.",
+ "name": "gloss",
+ "displayName": "Gloss",
+ "description": "Design tokens, component contracts, and voice guidance for Gloss, the design system for Arbitrary Definitions projects — bare-element markup, one swappable accent, IBM Plex Mono labels, no CSS class API to memorize.",
"version": "1.0.0",
- "homepage": "https://kejadlen.github.io/arbitrary-definitions-design-system/",
- "repository": "https://github.com/kejadlen/arbitrary-definitions-design-system"
+ "homepage": "https://kejadlen.github.io/gloss/",
+ "repository": "https://github.com/kejadlen/gloss"
}
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index bfc8ad8..ebac9a2 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -49,7 +49,7 @@ jobs:
run: |
test -s _site/index.html
test -s _site/assets/css/tokens.css
- grep -q -- '--ad-color-accent:' _site/assets/css/tokens.css
+ grep -q -- '--gl-color-accent:' _site/assets/css/tokens.css
# Every page in the nav should have been rendered.
for page in rationale install foundations/color foundations/typography \
foundations/space foundations/elevation foundations/motion \
diff --git a/README.md b/README.md
index b290fa7..1961912 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,23 @@
-# Arbitrary Definitions
+# Gloss
-A personal design system for self-hosted, single-user tools. Sixteen
-components and five foundations, documented by a small Ruby/ERB site (no
-Jekyll) with hand-maintained CSS and hand-written content.
+The design system for Arbitrary Definitions, a personal umbrella of
+self-hosted, single-user tools. Sixteen components and five foundations,
+documented by a small Ruby/ERB site (no Jekyll) with hand-maintained CSS and
+hand-written content.
-**Site:** https://kejadlen.github.io/arbitrary-definitions-design-system/
+**Site:** https://kejadlen.github.io/gloss/
## The idea
Arbitrary Definitions is an umbrella for side projects: self-hosted tools
-built for one household or one person, never a SaaS product. Almost every
-value in it is arbitrary — the accent is teal because someone liked it, the
-type scale ratio is 1.20 at the small end because that looked right, not
-because it is correct. What makes it a *system* is not that the choices are
-correct but that they are written down once, given names, actually used, and
-therefore changeable.
-
-See [Rationale](https://kejadlen.github.io/arbitrary-definitions-design-system/rationale/)
+built for one household or one person, never a SaaS product. Gloss is what
+those projects share underneath. Almost every value in it is arbitrary — the
+accent is teal because someone liked it, the type scale ratio is 1.20 at the
+small end because that looked right, not because it is correct. What makes
+it a *system* is not that the choices are correct but that they are written
+down once, given names, actually used, and therefore changeable.
+
+See [Rationale](https://kejadlen.github.io/gloss/rationale/)
for the four rules this system's build actually enforces.
This is a small, personal project, so it is built as plainly as it can be:
@@ -37,7 +38,7 @@ This is a small, personal project, so it is built as plainly as it can be:
underneath it in a `<details>`, the exact same markup as literal text.
There is no generator keeping the two in sync — there is only one copy.
-No component stylesheet contains a color literal or a duration — every one is a `var(--ad-*)`, with one flagged exception (Select's chevron — see `_sass/components/field.css`).
+No component stylesheet contains a color literal or a duration — every one is a `var(--gl-*)`, with one flagged exception (Select's chevron — see `_sass/components/field.css`).
## Requirements
@@ -91,7 +92,7 @@ Three files, in this order, and almost no JavaScript:
```
Retheming means overriding a handful of custom properties after `tokens.css`
-loads — no recompile, no fork. See [Using the CSS](https://kejadlen.github.io/arbitrary-definitions-design-system/install/).
+loads — no recompile, no fork. See [Using the CSS](https://kejadlen.github.io/gloss/install/).
## Claude Code plugin
@@ -102,10 +103,10 @@ format). Install it from anywhere:
```console
$ claude
-> /plugin marketplace add kejadlen/arbitrary-definitions-design-system
-> /plugin install arbitrary-definitions@arbitrary-definitions
+> /plugin marketplace add kejadlen/gloss
+> /plugin install gloss@gloss
```
-Then invoke `/arbitrary-definitions:design-system` for the exact component
+Then invoke `/gloss:design-system` for the exact component
contracts, tokens, and voice guidance to build new interfaces that look like
they came from the same hand as this one.
diff --git a/SKILL.md b/SKILL.md
index 5e428bc..0e44d1f 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -1,6 +1,6 @@
---
name: design-system
-description: Use this skill to build interfaces, pages, or prototypes in the Arbitrary Definitions style — a personal design system for self-hosted, single-user tools. Warm low-chroma neutrals, one swappable accent, IBM Plex Mono labels, and sixteen components built as plain HTML with no CSS class API to memorize. Use whenever a project should look like it came from the same hand as the others in this umbrella.
+description: Use this skill to build interfaces, pages, or prototypes in the Gloss style — the design system for Arbitrary Definitions, a personal umbrella of self-hosted, single-user tools. Warm low-chroma neutrals, one swappable accent, IBM Plex Mono labels, and sixteen components built as plain HTML with no CSS class API to memorize. Use whenever a project should look like it came from the same hand as the others in this umbrella.
user-invocable: true
---
@@ -69,9 +69,9 @@ just state the fact ("Nothing tracked yet."). See README's "The idea" and
## Retheming
-One accent per project, held constant — swap `--ad-color-accent` after
+One accent per project, held constant — swap `--gl-color-accent` after
`tokens.css` loads; `-ink` and `-soft` re-derive automatically via
-`color-mix()`. `--ad-color-success` and `--ad-color-danger` are fixed and
+`color-mix()`. `--gl-color-success` and `--gl-color-danger` are fixed and
never swapped. Re-check contrast after retheming — the system's own
guarantees (see the [Color foundation](foundations/color.md)) are about its
own values, not yours.
diff --git a/_components/button.md b/_components/button.md
index 0cd2840..3aa74da 100644
--- a/_components/button.md
+++ b/_components/button.md
@@ -67,7 +67,7 @@ disabled primary still reads as the primary.
</details>
</figure>
-<div class="ad-callout">
+<div class="gl-callout">
<p class="type-label">disabled vs. aria-disabled</p>
<p>
A <code>disabled</code> button is removed from the tab order, so a reader
@@ -80,7 +80,7 @@ disabled primary still reads as the primary.
## With an icon
-Pass an icon as the first child. The gap is `--ad-space-2xs`, set by the
+Pass an icon as the first child. The gap is `--gl-space-2xs`, set by the
button itself.
<figure class="example">
@@ -144,12 +144,12 @@ class Button needs, and only anchors reach for it.
<figure class="example">
<figcaption>Anchor as button</figcaption>
<div>
-<a class="btn" data-variant="primary" href="/arbitrary-definitions-design-system/components/icon-button/">Next: IconButton</a>
-<a class="btn" data-variant="ghost" href="/arbitrary-definitions-design-system/foundations/color/">Back to color</a>
+<a class="btn" data-variant="primary" href="/gloss/components/icon-button/">Next: IconButton</a>
+<a class="btn" data-variant="ghost" href="/gloss/foundations/color/">Back to color</a>
</div>
<details><summary>Markup</summary>
-<pre><code><a class="btn" data-variant="primary" href="/arbitrary-definitions-design-system/components/icon-button/">Next: IconButton</a>
-<a class="btn" data-variant="ghost" href="/arbitrary-definitions-design-system/foundations/color/">Back to color</a></code></pre>
+<pre><code><a class="btn" data-variant="primary" href="/gloss/components/icon-button/">Next: IconButton</a>
+<a class="btn" data-variant="ghost" href="/gloss/foundations/color/">Back to color</a></code></pre>
</details>
</figure>
diff --git a/_components/card-row.md b/_components/card-row.md
index 425d142..a4a461c 100644
--- a/_components/card-row.md
+++ b/_components/card-row.md
@@ -70,7 +70,7 @@ patterns for it in context).
<div style="font-weight: 550;">Dishwasher manual</div>
<div class="type-label" style="margin-top: 2px;">PDF · 2.1MB</div>
</div>
- <span class="type-mono" style="color: var(--ad-color-text-tertiary);">2h</span>
+ <span class="type-mono" style="color: var(--gl-color-text-tertiary);">2h</span>
</li>
</ul>
</div>
@@ -84,7 +84,7 @@ patterns for it in context).
<div style="font-weight: 550;">Dishwasher manual</div>
<div class="type-label" style="margin-top: 2px;">PDF · 2.1MB</div>
</div>
- <span class="type-mono" style="color: var(--ad-color-text-tertiary);">2h</span>
+ <span class="type-mono" style="color: var(--gl-color-text-tertiary);">2h</span>
</li>
</ul></code></pre>
</details>
diff --git a/_components/card.md b/_components/card.md
index e568eb6..2bc20bf 100644
--- a/_components/card.md
+++ b/_components/card.md
@@ -14,12 +14,12 @@ screen — never a whole grid of cards at once.
<figure class="example">
<figcaption>Flat and elevated</figcaption>
<div data-surface="sunken">
-<div class="card" style="width: 14rem; padding: var(--ad-space-s);">Flat — the default.</div>
-<div class="card" data-elevated style="width: 14rem; padding: var(--ad-space-s);">Elevated — one per view.</div>
+<div class="card" style="width: 14rem; padding: var(--gl-space-s);">Flat — the default.</div>
+<div class="card" data-elevated style="width: 14rem; padding: var(--gl-space-s);">Elevated — one per view.</div>
</div>
<details><summary>Markup</summary>
-<pre><code><div class="card" style="width: 14rem; padding: var(--ad-space-s);">Flat — the default.</div>
-<div class="card" data-elevated style="width: 14rem; padding: var(--ad-space-s);">Elevated — one per view.</div></code></pre>
+<pre><code><div class="card" style="width: 14rem; padding: var(--gl-space-s);">Flat — the default.</div>
+<div class="card" data-elevated style="width: 14rem; padding: var(--gl-space-s);">Elevated — one per view.</div></code></pre>
</details>
</figure>
@@ -91,7 +91,7 @@ li` descendant selector, no second class needed.
<thead><tr><th scope="col">Element / attribute</th><th scope="col">Values</th><th scope="col">Notes</th></tr></thead>
<tbody>
<tr><td><code>.card</code></td><td></td><td>Required base, on a <code><div></code>/<code><article></code> for a standalone tile or a <code><ul></code> for a list of rows.</td></tr>
- <tr><td><code>data-elevated</code></td><td>boolean</td><td>Applies <code>--ad-shadow-float</code>. One per view.</td></tr>
+ <tr><td><code>data-elevated</code></td><td>boolean</td><td>Applies <code>--gl-shadow-float</code>. One per view.</td></tr>
<tr><td><code>> li</code></td><td></td><td>A CardRow, when Card is a <code><ul></code>. See <a href="<%= relative_url('/components/card-row/') %>">CardRow</a>.</td></tr>
</tbody>
</table>
diff --git a/_components/checkbox.md b/_components/checkbox.md
index 8b2dd9d..8cde001 100644
--- a/_components/checkbox.md
+++ b/_components/checkbox.md
@@ -8,7 +8,7 @@ summary: Native checkbox, tinted with the accent color. No hand-drawn box.
`input[type="checkbox"]` is the component — styled bare with `accent-color`
rather than a custom box, so the browser draws its own check. This is a real
reduction, not just a rename: it deletes the hand-drawn SVG-checkmark markup
-that a `.ad-choice__box` span used to need. The wrapping `<label>` is told
+that a `.gl-choice__box` span used to need. The wrapping `<label>` is told
apart from Field's label structurally — it `:has()` a checkbox as a direct
child — so it needs no class either.
diff --git a/_components/select.md b/_components/select.md
index 84ef5a7..6a932f7 100644
--- a/_components/select.md
+++ b/_components/select.md
@@ -39,12 +39,12 @@ summary: Native select, styled to match Input exactly.
</details>
</figure>
-<div class="ad-callout">
+<div class="gl-callout">
<p>
The chevron is the one place in this component set that cannot reach a
- <code>var(--ad-*)</code> token — a data-URI <code>background-image</code>
+ <code>var(--gl-*)</code> token — a data-URI <code>background-image</code>
cannot reference a custom property, so its stroke is a literal hex, kept
- close to <code>--ad-color-text-secondary</code> and commented in the source.
+ close to <code>--gl-color-text-secondary</code> and commented in the source.
</p>
</div>
diff --git a/_foundations/color.md b/_foundations/color.md
index f35d6e1..532fb78 100644
--- a/_foundations/color.md
+++ b/_foundations/color.md
@@ -13,12 +13,12 @@ The **ramps** below are raw material: ten steps of neutral (light), the same
ten inverted for dark mode, and five accent hues. No component references
them directly.
-The **aliases** underneath are the working vocabulary — `--ad-color-text-primary`,
-`--ad-color-surface-card`, `--ad-color-accent`. Every component stylesheet
+The **aliases** underneath are the working vocabulary — `--gl-color-text-primary`,
+`--gl-color-surface-card`, `--gl-color-accent`. Every component stylesheet
reads from these. Retheming, or switching to dark, means repointing aliases
at different values — which is exactly what the dark block does.
-<div class="ad-callout">
+<div class="gl-callout">
<p>
The neutral ramps were authored in <code>oklch()</code>. Every value
below is that same color converted to flat sRGB hex — not re-picked,
@@ -33,150 +33,150 @@ at different values — which is exactly what the dark block does.
Low-chroma warm-gray, never stark white or black. Ten steps, not twelve or
sixteen — the palette defines exactly these.
-<p class="ad-muted">Low-chroma warm-gray. Not stark white or black. Ten steps, not twelve: exactly 0/50/100/150/200/300/500/600/800/900 — steps 400 and 700 do not exist.</p>
-<ul class="ad-swatch-grid">
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #faf9f7; color: #171512;">n-0</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#faf9f7</span>
- <span class="ad-swatch__ratio">1.05 on white</span>
+<p class="gl-muted">Low-chroma warm-gray. Not stark white or black. Ten steps, not twelve: exactly 0/50/100/150/200/300/500/600/800/900 — steps 400 and 700 do not exist.</p>
+<ul class="gl-swatch-grid">
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #faf9f7; color: #171512;">n-0</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#faf9f7</span>
+ <span class="gl-swatch__ratio">1.05 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #fdfdfb; color: #171512;">n-50</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#fdfdfb</span>
- <span class="ad-swatch__ratio">1.02 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #fdfdfb; color: #171512;">n-50</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#fdfdfb</span>
+ <span class="gl-swatch__ratio">1.02 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #f1f0ed; color: #171512;">n-100</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#f1f0ed</span>
- <span class="ad-swatch__ratio">1.14 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #f1f0ed; color: #171512;">n-100</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#f1f0ed</span>
+ <span class="gl-swatch__ratio">1.14 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #e8e6e2; color: #171512;">n-150</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#e8e6e2</span>
- <span class="ad-swatch__ratio">1.25 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #e8e6e2; color: #171512;">n-150</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#e8e6e2</span>
+ <span class="gl-swatch__ratio">1.25 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #dcdad7; color: #171512;">n-200</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#dcdad7</span>
- <span class="ad-swatch__ratio">1.40 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #dcdad7; color: #171512;">n-200</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#dcdad7</span>
+ <span class="gl-swatch__ratio">1.40 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #c0bdb9; color: #171512;">n-300</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#c0bdb9</span>
- <span class="ad-swatch__ratio">1.87 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #c0bdb9; color: #171512;">n-300</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#c0bdb9</span>
+ <span class="gl-swatch__ratio">1.87 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #888681; color: #171512;">n-500</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#888681</span>
- <span class="ad-swatch__ratio">3.64 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #888681; color: #171512;">n-500</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#888681</span>
+ <span class="gl-swatch__ratio">3.64 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #5f5d59; color: #ffffff;">n-600</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#5f5d59</span>
- <span class="ad-swatch__ratio">6.57 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #5f5d59; color: #ffffff;">n-600</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#5f5d59</span>
+ <span class="gl-swatch__ratio">6.57 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #2a2926; color: #ffffff;">n-800</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#2a2926</span>
- <span class="ad-swatch__ratio">14.55 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #2a2926; color: #ffffff;">n-800</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#2a2926</span>
+ <span class="gl-swatch__ratio">14.55 on white</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #100f0d; color: #ffffff;">n-900</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#100f0d</span>
- <span class="ad-swatch__ratio">19.16 on white</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #100f0d; color: #ffffff;">n-900</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#100f0d</span>
+ <span class="gl-swatch__ratio">19.16 on white</span>
</div>
</li>
</ul>
-<p class="ad-muted">The same low-chroma warm-gray scale, inverted for dark mode. Same ten step numbers as `neutral`; `0` is the darkest step here (the dark-theme page background) rather than the lightest.</p>
-<ul class="ad-swatch-grid">
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #0e0d0b; color: #ffffff;">nd-0</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#0e0d0b</span>
- <span class="ad-swatch__ratio">1.08 on black</span>
+<p class="gl-muted">The same low-chroma warm-gray scale, inverted for dark mode. Same ten step numbers as `neutral`; `0` is the darkest step here (the dark-theme page background) rather than the lightest.</p>
+<ul class="gl-swatch-grid">
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #0e0d0b; color: #ffffff;">nd-0</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#0e0d0b</span>
+ <span class="gl-swatch__ratio">1.08 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #151412; color: #ffffff;">nd-50</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#151412</span>
- <span class="ad-swatch__ratio">1.14 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #151412; color: #ffffff;">nd-50</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#151412</span>
+ <span class="gl-swatch__ratio">1.14 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #1e1d1a; color: #ffffff;">nd-100</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#1e1d1a</span>
- <span class="ad-swatch__ratio">1.25 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #1e1d1a; color: #ffffff;">nd-100</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#1e1d1a</span>
+ <span class="gl-swatch__ratio">1.25 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #252421; color: #ffffff;">nd-150</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#252421</span>
- <span class="ad-swatch__ratio">1.35 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #252421; color: #ffffff;">nd-150</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#252421</span>
+ <span class="gl-swatch__ratio">1.35 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #2c2b29; color: #ffffff;">nd-200</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#2c2b29</span>
- <span class="ad-swatch__ratio">1.48 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #2c2b29; color: #ffffff;">nd-200</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#2c2b29</span>
+ <span class="gl-swatch__ratio">1.48 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #44423f; color: #ffffff;">nd-300</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#44423f</span>
- <span class="ad-swatch__ratio">2.10 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #44423f; color: #ffffff;">nd-300</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#44423f</span>
+ <span class="gl-swatch__ratio">2.10 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #7c7a76; color: #ffffff;">nd-500</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#7c7a76</span>
- <span class="ad-swatch__ratio">4.90 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #7c7a76; color: #ffffff;">nd-500</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#7c7a76</span>
+ <span class="gl-swatch__ratio">4.90 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #a09e9a; color: #171512;">nd-600</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#a09e9a</span>
- <span class="ad-swatch__ratio">7.85 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #a09e9a; color: #171512;">nd-600</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#a09e9a</span>
+ <span class="gl-swatch__ratio">7.85 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #d9d7d4; color: #171512;">nd-800</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#d9d7d4</span>
- <span class="ad-swatch__ratio">14.62 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #d9d7d4; color: #171512;">nd-800</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#d9d7d4</span>
+ <span class="gl-swatch__ratio">14.62 on black</span>
</div>
</li>
- <li class="ad-swatch">
- <div class="ad-swatch__chip" style="background: #e9e8e6; color: #171512;">nd-900</div>
- <div class="ad-swatch__meta">
- <span class="ad-swatch__hex">#e9e8e6</span>
- <span class="ad-swatch__ratio">17.15 on black</span>
+ <li class="gl-swatch">
+ <div class="gl-swatch__chip" style="background: #e9e8e6; color: #171512;">nd-900</div>
+ <div class="gl-swatch__meta">
+ <span class="gl-swatch__hex">#e9e8e6</span>
+ <span class="gl-swatch__ratio">17.15 on black</span>
</div>
</li>
</ul>
@@ -186,42 +186,42 @@ sixteen — the palette defines exactly these.
One swappable accent per project — never two in the same view. Signal Teal is
the default; the other four are the sanctioned menu a project can switch to.
-<ul class="ad-accent-grid">
+<ul class="gl-accent-grid">
<li>
- <div class="ad-accent-demo" style="background: #3a6a63;">teal (default)</div>
- <div class="ad-specimen__meta"><code>#3a6a63</code><span>6.14:1 on white</span></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Default. Neutral, technical.</p>
+ <div class="gl-accent-demo" style="background: #3a6a63;">teal (default)</div>
+ <div class="gl-specimen__meta"><code>#3a6a63</code><span>6.14:1 on white</span></div>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">Default. Neutral, technical.</p>
</li>
<li>
- <div class="ad-accent-demo" style="background: #9a5a3c;">clay</div>
- <div class="ad-specimen__meta"><code>#9a5a3c</code><span>5.38:1 on white</span></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Warm, archival.</p>
+ <div class="gl-accent-demo" style="background: #9a5a3c;">clay</div>
+ <div class="gl-specimen__meta"><code>#9a5a3c</code><span>5.38:1 on white</span></div>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">Warm, archival.</p>
</li>
<li>
- <div class="ad-accent-demo" style="background: #2b4a78;">ink-blue</div>
- <div class="ad-specimen__meta"><code>#2b4a78</code><span>8.92:1 on white</span></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Sober, utilitarian.</p>
+ <div class="gl-accent-demo" style="background: #2b4a78;">ink-blue</div>
+ <div class="gl-specimen__meta"><code>#2b4a78</code><span>8.92:1 on white</span></div>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">Sober, utilitarian.</p>
</li>
<li>
- <div class="ad-accent-demo" style="background: #93701f;">ochre</div>
- <div class="ad-specimen__meta"><code>#93701f</code><span>4.59:1 on white</span></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Dry, papery.</p>
+ <div class="gl-accent-demo" style="background: #93701f;">ochre</div>
+ <div class="gl-specimen__meta"><code>#93701f</code><span>4.59:1 on white</span></div>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">Dry, papery.</p>
</li>
<li>
- <div class="ad-accent-demo" style="background: #6a3a5c;">plum</div>
- <div class="ad-specimen__meta"><code>#6a3a5c</code><span>8.85:1 on white</span></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Quiet, personal.</p>
+ <div class="gl-accent-demo" style="background: #6a3a5c;">plum</div>
+ <div class="gl-specimen__meta"><code>#6a3a5c</code><span>8.85:1 on white</span></div>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">Quiet, personal.</p>
</li>
</ul>
-<div class="ad-callout">
+<div class="gl-callout">
<p>
All five clear AA (4.5:1) for white text at their own value, but Ochre is
the tightest of the five at roughly 4.6:1 — closer to the floor than the
others (Ink Blue and Plum both clear 8.5:1). That is a real property of a
dry, papery ochre and is not being rounded away; a project choosing Ochre
as its accent should re-check any place it sets small white text directly
- on the accent fill, rather than through <code>--ad-color-accent-fg</code>
+ on the accent fill, rather than through <code>--gl-color-accent-fg</code>
on a full-size Button.
</p>
</div>
@@ -233,7 +233,7 @@ the right half is the dark one.
### Surfaces
-<p class="ad-muted">Backgrounds, from the page itself up to a card sitting on it.</p>
+<p class="gl-muted">Backgrounds, from the page itself up to a card sitting on it.</p>
<table>
<thead>
@@ -247,12 +247,12 @@ the right half is the dark one.
<tbody>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #faf9f7"></span>
<span style="background: #0e0d0b"></span>
</span>
- <code>--ad-color-surface-page</code>
+ <code>--gl-color-surface-page</code>
</div>
</td>
<td><code>neutral.0</code></td>
@@ -261,12 +261,12 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #fdfdfb"></span>
<span style="background: #151412"></span>
</span>
- <code>--ad-color-surface-card</code>
+ <code>--gl-color-surface-card</code>
</div>
</td>
<td><code>neutral.50</code></td>
@@ -275,12 +275,12 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #f1f0ed"></span>
<span style="background: #1e1d1a"></span>
</span>
- <code>--ad-color-surface-fill</code>
+ <code>--gl-color-surface-fill</code>
</div>
</td>
<td><code>neutral.100</code></td>
@@ -289,12 +289,12 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #e8e6e2"></span>
<span style="background: #252421"></span>
</span>
- <code>--ad-color-surface-fill-2</code>
+ <code>--gl-color-surface-fill-2</code>
</div>
</td>
<td><code>neutral.150</code></td>
@@ -306,7 +306,7 @@ the right half is the dark one.
### Borders
-<p class="ad-muted">Two weights. Hairlines do most of the elevation work in this system, so there was never a reason for a third.</p>
+<p class="gl-muted">Two weights. Hairlines do most of the elevation work in this system, so there was never a reason for a third.</p>
<table>
<thead>
@@ -320,12 +320,12 @@ the right half is the dark one.
<tbody>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #dcdad7"></span>
<span style="background: #2c2b29"></span>
</span>
- <code>--ad-color-border-hairline</code>
+ <code>--gl-color-border-hairline</code>
</div>
</td>
<td><code>neutral.200</code></td>
@@ -334,12 +334,12 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #c0bdb9"></span>
<span style="background: #44423f"></span>
</span>
- <code>--ad-color-border-default</code>
+ <code>--gl-color-border-default</code>
</div>
</td>
<td><code>neutral.300</code></td>
@@ -351,7 +351,7 @@ the right half is the dark one.
### Text
-<p class="ad-muted">Three levels of emphasis, deliberately not four. Past three, a reader stops perceiving a hierarchy and starts perceiving noise.</p>
+<p class="gl-muted">Three levels of emphasis, deliberately not four. Past three, a reader stops perceiving a hierarchy and starts perceiving noise.</p>
<table>
<thead>
@@ -365,12 +365,12 @@ the right half is the dark one.
<tbody>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #100f0d"></span>
<span style="background: #e9e8e6"></span>
</span>
- <code>--ad-color-text-primary</code>
+ <code>--gl-color-text-primary</code>
</div>
</td>
<td><code>neutral.900</code></td>
@@ -379,12 +379,12 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #5f5d59"></span>
<span style="background: #a09e9a"></span>
</span>
- <code>--ad-color-text-secondary</code>
+ <code>--gl-color-text-secondary</code>
</div>
</td>
<td><code>neutral.600</code></td>
@@ -393,12 +393,12 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #888681"></span>
<span style="background: #7c7a76"></span>
</span>
- <code>--ad-color-text-tertiary</code>
+ <code>--gl-color-text-tertiary</code>
</div>
</td>
<td><code>neutral.500</code></td>
@@ -410,7 +410,7 @@ the right half is the dark one.
### Accent
-<p class="ad-muted">One swappable accent per project, held constant across a whole view. `-ink` and `-soft` re-derive from `--ad-color-accent` via `color-mix()`, so retheming the accent retones both automatically.</p>
+<p class="gl-muted">One swappable accent per project, held constant across a whole view. `-ink` and `-soft` re-derive from `--gl-color-accent` via `color-mix()`, so retheming the accent retones both automatically.</p>
<table>
<thead>
@@ -424,12 +424,12 @@ the right half is the dark one.
<tbody>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #3a6a63"></span>
<span style="background: #3a6a63"></span>
</span>
- <code>--ad-color-accent</code>
+ <code>--gl-color-accent</code>
</div>
</td>
<td><code>accent.teal</code></td>
@@ -438,12 +438,12 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #ffffff"></span>
<span style="background: #ffffff"></span>
</span>
- <code>--ad-color-accent-fg</code>
+ <code>--gl-color-accent-fg</code>
</div>
</td>
<td><code>#ffffff</code></td>
@@ -452,24 +452,24 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: repeating-linear-gradient(45deg, var(--ad-color-surface-fill) 0 4px, var(--ad-color-surface-card) 4px 8px);"></span>
- <code>--ad-color-accent-ink</code>
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: repeating-linear-gradient(45deg, var(--gl-color-surface-fill) 0 4px, var(--gl-color-surface-card) 4px 8px);"></span>
+ <code>--gl-color-accent-ink</code>
</div>
</td>
- <td><code>color-mix(in oklch, var(--ad-color-accent) 78%, black)</code></td>
- <td><code>color-mix(in oklch, var(--ad-color-accent) 78%, black)</code></td>
+ <td><code>color-mix(in oklch, var(--gl-color-accent) 78%, black)</code></td>
+ <td><code>color-mix(in oklch, var(--gl-color-accent) 78%, black)</code></td>
<td>Text sitting on an `-soft` accent tint — an IconButton's active state, an accent avatar's initials.</td>
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: repeating-linear-gradient(45deg, var(--ad-color-surface-fill) 0 4px, var(--ad-color-surface-card) 4px 8px);"></span>
- <code>--ad-color-accent-soft</code>
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: repeating-linear-gradient(45deg, var(--gl-color-surface-fill) 0 4px, var(--gl-color-surface-card) 4px 8px);"></span>
+ <code>--gl-color-accent-soft</code>
</div>
</td>
- <td><code>color-mix(in oklch, var(--ad-color-accent) 12%, white)</code></td>
- <td><code>color-mix(in oklch, var(--ad-color-accent) 12%, white)</code></td>
+ <td><code>color-mix(in oklch, var(--gl-color-accent) 12%, white)</code></td>
+ <td><code>color-mix(in oklch, var(--gl-color-accent) 12%, white)</code></td>
<td>The tint behind an accent Badge, a toggled IconButton, an accent avatar chip.</td>
</tr>
</tbody>
@@ -477,7 +477,7 @@ the right half is the dark one.
### Status
-<p class="ad-muted">Exactly two states, both fixed — they read the same in every project and are never swapped the way the accent is.</p>
+<p class="gl-muted">Exactly two states, both fixed — they read the same in every project and are never swapped the way the accent is.</p>
<table>
<thead>
@@ -491,12 +491,12 @@ the right half is the dark one.
<tbody>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #3f7a4a"></span>
<span style="background: #3f7a4a"></span>
</span>
- <code>--ad-color-success</code>
+ <code>--gl-color-success</code>
</div>
</td>
<td><code>#3f7a4a</code></td>
@@ -505,23 +505,23 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: repeating-linear-gradient(45deg, var(--ad-color-surface-fill) 0 4px, var(--ad-color-surface-card) 4px 8px);"></span>
- <code>--ad-color-success-bg</code>
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: repeating-linear-gradient(45deg, var(--gl-color-surface-fill) 0 4px, var(--gl-color-surface-card) 4px 8px);"></span>
+ <code>--gl-color-success-bg</code>
</div>
</td>
- <td><code>color-mix(in oklch, var(--ad-color-success) 12%, white)</code></td>
- <td><code>color-mix(in oklch, var(--ad-color-success) 12%, white)</code></td>
+ <td><code>color-mix(in oklch, var(--gl-color-success) 12%, white)</code></td>
+ <td><code>color-mix(in oklch, var(--gl-color-success) 12%, white)</code></td>
<td>Tint behind a success Badge. Mixed against literal white, so it stays constant across themes.</td>
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip ad-alias-chip--pair" aria-hidden="true">
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip gl-alias-chip--pair" aria-hidden="true">
<span style="background: #ad3a2c"></span>
<span style="background: #ad3a2c"></span>
</span>
- <code>--ad-color-danger</code>
+ <code>--gl-color-danger</code>
</div>
</td>
<td><code>#ad3a2c</code></td>
@@ -530,13 +530,13 @@ the right half is the dark one.
</tr>
<tr>
<td>
- <div class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: repeating-linear-gradient(45deg, var(--ad-color-surface-fill) 0 4px, var(--ad-color-surface-card) 4px 8px);"></span>
- <code>--ad-color-danger-bg</code>
+ <div class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: repeating-linear-gradient(45deg, var(--gl-color-surface-fill) 0 4px, var(--gl-color-surface-card) 4px 8px);"></span>
+ <code>--gl-color-danger-bg</code>
</div>
</td>
- <td><code>color-mix(in oklch, var(--ad-color-danger) 10%, white)</code></td>
- <td><code>color-mix(in oklch, var(--ad-color-danger) 10%, white)</code></td>
+ <td><code>color-mix(in oklch, var(--gl-color-danger) 10%, white)</code></td>
+ <td><code>color-mix(in oklch, var(--gl-color-danger) 10%, white)</code></td>
<td>Tint behind a danger Badge. Mixed against literal white, so it stays constant across themes.</td>
</tr>
</tbody>
@@ -552,7 +552,7 @@ and checked by hand rather than by a build-time test.
### Text — 4.5:1 minimum
-<p class="ad-muted">WCAG 2.1 SC 1.4.3 (normal-size text)</p>
+<p class="gl-muted">WCAG 2.1 SC 1.4.3 (normal-size text)</p>
<table>
<thead>
@@ -566,9 +566,9 @@ and checked by hand rather than by a build-time test.
<tbody>
<tr>
<td>
- <span class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: #faf9f7; color: #100f0d; display: grid; place-items: center; font-size: 10px;">Aa</span>
- <code>color-text-primary<br><span class="ad-subtle">on color-surface-page</span></code>
+ <span class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: #faf9f7; color: #100f0d; display: grid; place-items: center; font-size: 10px;">Aa</span>
+ <code>color-text-primary<br><span class="gl-subtle">on color-surface-page</span></code>
</span>
</td>
<td>Body copy</td>
@@ -577,9 +577,9 @@ and checked by hand rather than by a build-time test.
</tr>
<tr>
<td>
- <span class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: #faf9f7; color: #5f5d59; display: grid; place-items: center; font-size: 10px;">Aa</span>
- <code>color-text-secondary<br><span class="ad-subtle">on color-surface-page</span></code>
+ <span class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: #faf9f7; color: #5f5d59; display: grid; place-items: center; font-size: 10px;">Aa</span>
+ <code>color-text-secondary<br><span class="gl-subtle">on color-surface-page</span></code>
</span>
</td>
<td>Supporting copy</td>
@@ -588,9 +588,9 @@ and checked by hand rather than by a build-time test.
</tr>
<tr>
<td>
- <span class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: #3a6a63; color: #ffffff; display: grid; place-items: center; font-size: 10px;">Aa</span>
- <code>color-accent-fg<br><span class="ad-subtle">on color-accent</span></code>
+ <span class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: #3a6a63; color: #ffffff; display: grid; place-items: center; font-size: 10px;">Aa</span>
+ <code>color-accent-fg<br><span class="gl-subtle">on color-accent</span></code>
</span>
</td>
<td>The label on a primary or dark-variant Button.</td>
@@ -599,9 +599,9 @@ and checked by hand rather than by a build-time test.
</tr>
<tr>
<td>
- <span class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: #ffffff; color: #3f7a4a; display: grid; place-items: center; font-size: 10px;">Aa</span>
- <code>color-success<br><span class="ad-subtle">on color-accent-fg</span></code>
+ <span class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: #ffffff; color: #3f7a4a; display: grid; place-items: center; font-size: 10px;">Aa</span>
+ <code>color-success<br><span class="gl-subtle">on color-accent-fg</span></code>
</span>
</td>
<td>Success text on a light backdrop — proxied by color-accent-fg</td>
@@ -610,9 +610,9 @@ and checked by hand rather than by a build-time test.
</tr>
<tr>
<td>
- <span class="ad-alias-row">
- <span class="ad-alias-chip" aria-hidden="true" style="background: #ffffff; color: #ad3a2c; display: grid; place-items: center; font-size: 10px;">Aa</span>
- <code>color-danger<br><span class="ad-subtle">on color-accent-fg</span></code>
+ <span class="gl-alias-row">
+ <span class="gl-alias-chip" aria-hidden="true" style="background: #ffffff; color: #ad3a2c; display: grid; place-items: center; font-size: 10px;">Aa</span>
+ <code>color-danger<br><span class="gl-subtle">on color-accent-fg</span></code>
</span>
</td>
<td>Overdue/destructive text on a light backdrop</td>
@@ -622,17 +622,17 @@ and checked by hand rather than by a build-time test.
</tbody>
</table>
-<div class="ad-callout">
+<div class="gl-callout">
<p>
Two things this contract deliberately does not assert.
- <strong>Text tertiary</strong> — <code>--ad-color-text-tertiary</code>
+ <strong>Text tertiary</strong> — <code>--gl-color-text-tertiary</code>
(neutral.500) is roughly 3.46:1 against the page in light mode, under the
4.5:1 floor. That step is documented as muted-faint text — placeholders
and de-emphasized metadata, never body copy — so this is a real,
intentional property of the palette, not a bug to patch by darkening the
step.
- <strong>Borders</strong> — <code>--ad-color-border-hairline</code> and
- <code>--ad-color-border-default</code> sit well under the 3:1 that WCAG
+ <strong>Borders</strong> — <code>--gl-color-border-hairline</code> and
+ <code>--gl-color-border-default</code> sit well under the 3:1 that WCAG
1.4.11 asks of a meaningful boundary. Hairline (1px) borders and dividers
do most of the elevation work here — borders are deliberately quiet, and
this system never claims a 3:1 bar for them, so this contract does not
@@ -644,7 +644,7 @@ and checked by hand rather than by a build-time test.
- **Never write a hex outside `assets/css/tokens.css`.** If a component
needs a color that does not exist yet, add the alias.
-- **One accent per project, never two in a view.** Swapping `--ad-color-accent`
+- **One accent per project, never two in a view.** Swapping `--gl-color-accent`
re-derives `-ink` and `-soft` automatically via `color-mix()`.
-- **`--ad-color-success` and `--ad-color-danger` are fixed.** They read the
+- **`--gl-color-success` and `--gl-color-danger` are fixed.** They read the
same in every project and are never swapped the way the accent is.
diff --git a/_foundations/elevation.md b/_foundations/elevation.md
index 960744c..41d5c92 100644
--- a/_foundations/elevation.md
+++ b/_foundations/elevation.md
@@ -13,16 +13,16 @@ is the default everywhere. Shadow is the exception, not the baseline.
## The two levels
-<ul class="ad-elevation-grid">
+<ul class="gl-elevation-grid">
<li>
- <div class="ad-elevation-demo" style="box-shadow: 0 1px 2px rgba(20, 18, 14, 0.05);"></div>
- <div class="ad-specimen__meta"><code>shadow-sm</code></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Barely-there separation — a Switch thumb, a focused Input.</p>
+ <div class="gl-elevation-demo" style="box-shadow: 0 1px 2px rgba(20, 18, 14, 0.05);"></div>
+ <div class="gl-specimen__meta"><code>shadow-sm</code></div>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">Barely-there separation — a Switch thumb, a focused Input.</p>
</li>
<li>
- <div class="ad-elevation-demo" style="box-shadow: 0 2px 6px rgba(20, 18, 14, 0.06), 0 10px 24px -12px rgba(20, 18, 14, 0.18);"></div>
- <div class="ad-specimen__meta"><code>shadow-float</code></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">The one floating layer in a view. Apply it to at most one element on screen at a time.</p>
+ <div class="gl-elevation-demo" style="box-shadow: 0 2px 6px rgba(20, 18, 14, 0.06), 0 10px 24px -12px rgba(20, 18, 14, 0.18);"></div>
+ <div class="gl-specimen__meta"><code>shadow-float</code></div>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">The one floating layer in a view. Apply it to at most one element on screen at a time.</p>
</li>
</ul>
@@ -31,13 +31,13 @@ is the default everywhere. Shadow is the exception, not the baseline.
<div data-layout="grid" data-surface="sunken">
<article class="card">
<div class="card-body">
- <h3 style="font-size: var(--ad-step--1);">Flat</h3>
+ <h3 style="font-size: var(--gl-step--1);">Flat</h3>
<p>The default. A hairline border, no shadow.</p>
</div>
</article>
<article class="card" data-elevated>
<div class="card-body">
- <h3 style="font-size: var(--ad-step--1);">Elevated</h3>
+ <h3 style="font-size: var(--gl-step--1);">Elevated</h3>
<p>shadow-float. Reserved for one element per view — a Dialog, a Toast.</p>
</div>
</article>
@@ -61,13 +61,13 @@ is the default everywhere. Shadow is the exception, not the baseline.
## Elevation in the dark theme
Shadows barely register on a near-black surface. The dark theme leans on
-surface lightness instead — `--ad-color-surface-card` is one neutral step
-lighter than `--ad-color-surface-page`, same as in light mode. The shadow
+surface lightness instead — `--gl-color-surface-card` is one neutral step
+lighter than `--gl-color-surface-page`, same as in light mode. The shadow
tokens still apply; they simply stop being the primary signal.
## Rules
-- **At most one `--ad-shadow-float` on screen.** If two things both claim to
+- **At most one `--gl-shadow-float` on screen.** If two things both claim to
be the topmost layer, neither is.
- **Border or shadow, not both, for a given surface's edge.** A card that
both borders and floats looks like a sticker.
diff --git a/_foundations/motion.md b/_foundations/motion.md
index 5d294c9..85bf9ef 100644
--- a/_foundations/motion.md
+++ b/_foundations/motion.md
@@ -15,12 +15,12 @@ easing, no page-transition choreography.
<thead><tr><th scope="col">Token</th><th scope="col">Value</th><th scope="col">Use for</th></tr></thead>
<tbody>
<tr>
- <td><code>--ad-dur-fast</code></td>
+ <td><code>--gl-dur-fast</code></td>
<td><code>0.12s</code></td>
<td>Hover and focus color/border transitions — the default.</td>
</tr>
<tr>
- <td><code>--ad-dur-base</code></td>
+ <td><code>--gl-dur-base</code></td>
<td><code>0.16s</code></td>
<td>Switch track and thumb — the one moving part in the system.</td>
</tr>
@@ -31,13 +31,13 @@ easing, no page-transition choreography.
There is exactly one curve in the system. Hover the tile below to run it.
-<ul class="ad-motion-grid">
+<ul class="gl-motion-grid">
<li>
- <div class="ad-motion-demo" tabindex="0">
- <span class="ad-motion-demo__dot"></span>
+ <div class="gl-motion-demo" tabindex="0">
+ <span class="gl-motion-demo__dot"></span>
</div>
- <div class="ad-specimen__meta"><code>--ad-ease</code></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">The only easing curve in the system. Fast out, settles gently, applied to every transition.</p>
+ <div class="gl-specimen__meta"><code>--gl-ease</code></div>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">The only easing curve in the system. Fast out, settles gently, applied to every transition.</p>
</li>
</ul>
@@ -51,8 +51,8 @@ have to opt in, and cannot opt out.
```css
@media (prefers-reduced-motion: reduce) {
:root {
- --ad-dur-fast: 0ms;
- --ad-dur-base: 0ms;
+ --gl-dur-fast: 0ms;
+ --gl-dur-base: 0ms;
}
}
```
diff --git a/_foundations/space.md b/_foundations/space.md
index 71d51f9..a51bcad 100644
--- a/_foundations/space.md
+++ b/_foundations/space.md
@@ -7,51 +7,51 @@ summary: >-
## The scale
-<div class="ad-ruler">
- <div class="ad-ruler__row">
+<div class="gl-ruler">
+ <div class="gl-ruler__row">
<code>space-3xs</code>
- <span class="ad-ruler__num">5px</span>
- <span class="ad-ruler__bar" style="width: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">5px</span>
+ <span class="gl-ruler__bar" style="width: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem); min-width: 1px;"></span>
</div>
- <div class="ad-ruler__row">
+ <div class="gl-ruler__row">
<code>space-2xs</code>
- <span class="ad-ruler__num">9 → 10px</span>
- <span class="ad-ruler__bar" style="width: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">9 → 10px</span>
+ <span class="gl-ruler__bar" style="width: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem); min-width: 1px;"></span>
</div>
- <div class="ad-ruler__row">
+ <div class="gl-ruler__row">
<code>space-xs</code>
- <span class="ad-ruler__num">14 → 15px</span>
- <span class="ad-ruler__bar" style="width: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">14 → 15px</span>
+ <span class="gl-ruler__bar" style="width: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem); min-width: 1px;"></span>
</div>
- <div class="ad-ruler__row">
+ <div class="gl-ruler__row">
<code>space-s</code>
- <span class="ad-ruler__num">18 → 20px</span>
- <span class="ad-ruler__bar" style="width: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">18 → 20px</span>
+ <span class="gl-ruler__bar" style="width: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem); min-width: 1px;"></span>
</div>
- <div class="ad-ruler__row">
+ <div class="gl-ruler__row">
<code>space-m</code>
- <span class="ad-ruler__num">27 → 30px</span>
- <span class="ad-ruler__bar" style="width: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">27 → 30px</span>
+ <span class="gl-ruler__bar" style="width: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem); min-width: 1px;"></span>
</div>
- <div class="ad-ruler__row">
+ <div class="gl-ruler__row">
<code>space-l</code>
- <span class="ad-ruler__num">36 → 40px</span>
- <span class="ad-ruler__bar" style="width: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">36 → 40px</span>
+ <span class="gl-ruler__bar" style="width: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem); min-width: 1px;"></span>
</div>
- <div class="ad-ruler__row">
+ <div class="gl-ruler__row">
<code>space-xl</code>
- <span class="ad-ruler__num">54 → 60px</span>
- <span class="ad-ruler__bar" style="width: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">54 → 60px</span>
+ <span class="gl-ruler__bar" style="width: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem); min-width: 1px;"></span>
</div>
- <div class="ad-ruler__row">
+ <div class="gl-ruler__row">
<code>space-2xl</code>
- <span class="ad-ruler__num">72 → 80px</span>
- <span class="ad-ruler__bar" style="width: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">72 → 80px</span>
+ <span class="gl-ruler__bar" style="width: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem); min-width: 1px;"></span>
</div>
- <div class="ad-ruler__row">
+ <div class="gl-ruler__row">
<code>space-3xl</code>
- <span class="ad-ruler__num">108 → 120px</span>
- <span class="ad-ruler__bar" style="width: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem); min-width: 1px;"></span>
+ <span class="gl-ruler__num">108 → 120px</span>
+ <span class="gl-ruler__bar" style="width: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem); min-width: 1px;"></span>
</div>
</div>
@@ -59,40 +59,40 @@ summary: >-
| Distance between | Reach for |
| --- | --- |
-| An icon and its own label | `--ad-space-3xs` / `--ad-space-2xs` |
-| A field's label and its control | `--ad-space-2xs` |
-| Two controls in a row, CardRow padding | `--ad-space-xs` |
-| Two fields in a form, a Dialog's title/footer padding | `--ad-space-s` |
-| Card body padding, a Dialog's body padding | `--ad-space-m` |
-| Two sections of a page | `--ad-space-l` |
-| Major section spacing | `--ad-space-xl` / `--ad-space-2xl` |
-| Hero and empty-state breathing room | `--ad-space-3xl` |
+| An icon and its own label | `--gl-space-3xs` / `--gl-space-2xs` |
+| A field's label and its control | `--gl-space-2xs` |
+| Two controls in a row, CardRow padding | `--gl-space-xs` |
+| Two fields in a form, a Dialog's title/footer padding | `--gl-space-s` |
+| Card body padding, a Dialog's body padding | `--gl-space-m` |
+| Two sections of a page | `--gl-space-l` |
+| Major section spacing | `--gl-space-xl` / `--gl-space-2xl` |
+| Hero and empty-state breathing room | `--gl-space-3xl` |
<figure class="example">
<figcaption>The same card at three densities</figcaption>
<div data-layout="grid">
<article class="card">
- <div class="card-body" style="gap: var(--ad-space-3xs); padding: var(--ad-space-xs);">
- <h3 style="font-size: var(--ad-step--1);">Compact</h3>
+ <div class="card-body" style="gap: var(--gl-space-3xs); padding: var(--gl-space-xs);">
+ <h3 style="font-size: var(--gl-step--1);">Compact</h3>
<p>space-xs padding, space-3xs gap. For dense lists.</p>
</div>
</article>
<article class="card">
<div class="card-body">
- <h3 style="font-size: var(--ad-step--1);">Default</h3>
+ <h3 style="font-size: var(--gl-step--1);">Default</h3>
<p>space-m padding, space-2xs gap. What Card ships with.</p>
</div>
</article>
<article class="card">
- <div class="card-body" style="gap: var(--ad-space-s); padding: var(--ad-space-l);">
- <h3 style="font-size: var(--ad-step--1);">Roomy</h3>
+ <div class="card-body" style="gap: var(--gl-space-s); padding: var(--gl-space-l);">
+ <h3 style="font-size: var(--gl-step--1);">Roomy</h3>
<p>space-l padding, space-s gap. For a card that is the whole screen.</p>
</div>
</article>
</div>
<details><summary>Markup</summary>
<pre><code><article class="card">
- <div class="card-body" style="gap: var(--ad-space-3xs); padding: var(--ad-space-xs);">
+ <div class="card-body" style="gap: var(--gl-space-3xs); padding: var(--gl-space-xs);">
<h3>Compact</h3>
<p>space-xs padding, space-3xs gap. For dense lists.</p>
</div>
@@ -104,7 +104,7 @@ summary: >-
</div>
</article>
<article class="card">
- <div class="card-body" style="gap: var(--ad-space-s); padding: var(--ad-space-l);">
+ <div class="card-body" style="gap: var(--gl-space-s); padding: var(--gl-space-l);">
<h3>Roomy</h3>
<p>space-l padding, space-s gap. For a card that is the whole screen.</p>
</div>
@@ -117,38 +117,38 @@ summary: >-
4/6/10px — small and quiet, kept modest so it reads as a neutral default
rather than a decorative flourish. Nothing pill-shaped except true pills.
-<ul class="ad-radius-grid">
+<ul class="gl-radius-grid">
<li>
- <div class="ad-radius-demo" style="border-radius: 4px;"></div>
- <div class="ad-specimen__meta">
+ <div class="gl-radius-demo" style="border-radius: 4px;"></div>
+ <div class="gl-specimen__meta">
<code>radius-sm</code>
<span>4px</span>
</div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Buttons, inputs, badges, tags.</p>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">Buttons, inputs, badges, tags.</p>
</li>
<li>
- <div class="ad-radius-demo" style="border-radius: 6px;"></div>
- <div class="ad-specimen__meta">
+ <div class="gl-radius-demo" style="border-radius: 6px;"></div>
+ <div class="gl-specimen__meta">
<code>radius-md</code>
<span>6px</span>
</div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">IconButton, the segmented-tabs track, avatar chips.</p>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">IconButton, the segmented-tabs track, avatar chips.</p>
</li>
<li>
- <div class="ad-radius-demo" style="border-radius: 10px;"></div>
- <div class="ad-specimen__meta">
+ <div class="gl-radius-demo" style="border-radius: 10px;"></div>
+ <div class="gl-specimen__meta">
<code>radius-lg</code>
<span>10px</span>
</div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Cards, dialogs, toasts, photo slots — the system's "surface" radius.</p>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">Cards, dialogs, toasts, photo slots — the system's "surface" radius.</p>
</li>
<li>
- <div class="ad-radius-demo" style="border-radius: 999px;"></div>
- <div class="ad-specimen__meta">
+ <div class="gl-radius-demo" style="border-radius: 999px;"></div>
+ <div class="gl-specimen__meta">
<code>radius-full</code>
<span>999px</span>
</div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">True pills only — Badge, Tag, Switch, round avatars.</p>
+ <p class="gl-muted" style="font-size: var(--gl-step--2); margin: var(--gl-space-3xs) 0 0;">True pills only — Badge, Tag, Switch, round avatars.</p>
</li>
</ul>
diff --git a/_foundations/typography.md b/_foundations/typography.md
index 2ad8254..b7484a9 100644
--- a/_foundations/typography.md
+++ b/_foundations/typography.md
@@ -8,31 +8,31 @@ summary: >-
## Families
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-font-sans</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-font-sans</code>
<span>Interface text — every component, every screen. Web-safe; nothing is loaded for it.</span>
</div>
- <div class="ad-specimen__sample" style="font-family: var(--ad-font-sans); font-size: 1.5rem;">
- Arbitrary Definitions — 0123456789
+ <div class="gl-specimen__sample" style="font-family: var(--gl-font-sans); font-size: 1.5rem;">
+ Gloss — 0123456789
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-font-mono</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-font-mono</code>
<span>Every label, meta value, technical/catalog value, and code sample. The system's one loaded webfont.</span>
</div>
- <div class="ad-specimen__sample" style="font-family: var(--ad-font-mono); font-size: 1.5rem;">
- Arbitrary Definitions — 0123456789
+ <div class="gl-specimen__sample" style="font-family: var(--gl-font-mono); font-size: 1.5rem;">
+ Gloss — 0123456789
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-font-serif</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-font-serif</code>
<span>Opt-in reading variant for a project that wants an editorial, archival feel. Not loaded by default; web-safe only.</span>
</div>
- <div class="ad-specimen__sample" style="font-family: var(--ad-font-serif); font-size: 1.5rem;">
- Arbitrary Definitions — 0123456789
+ <div class="gl-specimen__sample" style="font-family: var(--gl-font-serif); font-size: 1.5rem;">
+ Gloss — 0123456789
</div>
</div>
@@ -48,86 +48,86 @@ project that wants an editorial or archival feel. Neither is fetched.
## Fluid scale
Eight steps, `clamp()`-based (Utopia, 320→1240px viewport). The body sits at
-`--ad-step-0` — 18px on a phone, 20px on a wide screen — with no fixed
+`--gl-step-0` — 18px on a phone, 20px on a wide screen — with no fixed
breakpoint in between.
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-step--2</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-step--2</code>
<span>12.5 → 12.8px</span>
<span>type-label — eyebrows, catalog labels, meta.</span>
</div>
- <div class="ad-specimen__sample" style="font-size: var(--ad-step--2);">
+ <div class="gl-specimen__sample" style="font-size: var(--gl-step--2);">
The quick brown fox jumps over the lazy dog
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-step--1</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-step--1</code>
<span>15 → 16px</span>
<span>type-body-sm and type-mono — secondary copy, technical values.</span>
</div>
- <div class="ad-specimen__sample" style="font-size: var(--ad-step--1);">
+ <div class="gl-specimen__sample" style="font-size: var(--gl-step--1);">
The quick brown fox jumps over the lazy dog
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-step-0</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-step-0</code>
<span>18 → 20px</span>
<span>type-body — the base size, and the body element's own size.</span>
</div>
- <div class="ad-specimen__sample" style="font-size: var(--ad-step-0);">
+ <div class="gl-specimen__sample" style="font-size: var(--gl-step-0);">
The quick brown fox jumps over the lazy dog
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-step-1</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-step-1</code>
<span>22 → 25px</span>
<span>type-h3 — card and subsection headings.</span>
</div>
- <div class="ad-specimen__sample" style="font-size: var(--ad-step-1);">
+ <div class="gl-specimen__sample" style="font-size: var(--gl-step-1);">
The quick brown fox jumps over the lazy dog
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-step-2</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-step-2</code>
<span>26 → 31px</span>
<span>type-h2 — section headings.</span>
</div>
- <div class="ad-specimen__sample" style="font-size: var(--ad-step-2);">
+ <div class="gl-specimen__sample" style="font-size: var(--gl-step-2);">
The quick brown fox jumps over the lazy dog
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-step-3</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-step-3</code>
<span>31 → 39px</span>
<span>type-h1 — screen titles.</span>
</div>
- <div class="ad-specimen__sample" style="font-size: var(--ad-step-3);">
+ <div class="gl-specimen__sample" style="font-size: var(--gl-step-3);">
The quick brown fox jumps over the lazy dog
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-step-4</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-step-4</code>
<span>37 → 49px</span>
<span>type-display — one hero title per screen, at most.</span>
</div>
- <div class="ad-specimen__sample" style="font-size: var(--ad-step-4);">
+ <div class="gl-specimen__sample" style="font-size: var(--gl-step-4);">
The quick brown fox jumps over the lazy dog
</div>
</div>
-<div class="ad-specimen">
- <div class="ad-specimen__meta">
- <code>--ad-step-5</code>
+<div class="gl-specimen">
+ <div class="gl-specimen__meta">
+ <code>--gl-step-5</code>
<span>45 → 61px</span>
<span>Reserved headroom. No compound style claims it yet.</span>
</div>
- <div class="ad-specimen__sample" style="font-size: var(--ad-step-5);">
+ <div class="gl-specimen__sample" style="font-size: var(--gl-step-5);">
The quick brown fox jumps over the lazy dog
</div>
</div>
@@ -144,7 +144,7 @@ letter-spacing in a single declaration.
<tr>
<td><code>.type-display</code></td>
<td>600</td>
- <td><code>--ad-step-4</code></td>
+ <td><code>--gl-step-4</code></td>
<td>1.08</td>
<td>-0.015em</td>
<td>Page-level hero title, once per screen.</td>
@@ -152,7 +152,7 @@ letter-spacing in a single declaration.
<tr>
<td><code>.type-h1</code></td>
<td>600</td>
- <td><code>--ad-step-3</code></td>
+ <td><code>--gl-step-3</code></td>
<td>1.12</td>
<td>-0.012em</td>
<td>Screen title.</td>
@@ -160,7 +160,7 @@ letter-spacing in a single declaration.
<tr>
<td><code>.type-h2</code></td>
<td>600</td>
- <td><code>--ad-step-2</code></td>
+ <td><code>--gl-step-2</code></td>
<td>1.16</td>
<td>-0.01em</td>
<td>Section heading.</td>
@@ -168,7 +168,7 @@ letter-spacing in a single declaration.
<tr>
<td><code>.type-h3</code></td>
<td>600</td>
- <td><code>--ad-step-1</code></td>
+ <td><code>--gl-step-1</code></td>
<td>1.25</td>
<td>normal</td>
<td>Card / subsection heading.</td>
@@ -176,7 +176,7 @@ letter-spacing in a single declaration.
<tr>
<td><code>.type-body</code></td>
<td>400</td>
- <td><code>--ad-step-0</code></td>
+ <td><code>--gl-step-0</code></td>
<td>1.55</td>
<td>normal</td>
<td>Body copy.</td>
@@ -184,7 +184,7 @@ letter-spacing in a single declaration.
<tr>
<td><code>.type-body-sm</code></td>
<td>400</td>
- <td><code>--ad-step--1</code></td>
+ <td><code>--gl-step--1</code></td>
<td>1.5</td>
<td>normal</td>
<td>Secondary copy, hints.</td>
@@ -192,7 +192,7 @@ letter-spacing in a single declaration.
<tr>
<td><code>.type-label</code></td>
<td>500</td>
- <td><code>--ad-step--2</code></td>
+ <td><code>--gl-step--2</code></td>
<td>1</td>
<td>0.08em</td>
<td>Eyebrows, catalog labels, meta — SAVED, RECOMMENDED, OVERDUE.</td>
@@ -200,7 +200,7 @@ letter-spacing in a single declaration.
<tr>
<td><code>.type-mono</code></td>
<td>400</td>
- <td><code>--ad-step--1</code></td>
+ <td><code>--gl-step--1</code></td>
<td>1.5</td>
<td>normal</td>
<td>Technical values, IDs, dates, code.</td>
diff --git a/_layouts/page.erb b/_layouts/page.erb
index 8b33329..48a91fc 100644
--- a/_layouts/page.erb
+++ b/_layouts/page.erb
@@ -37,7 +37,7 @@
<script>
(function () {
try {
- var stored = localStorage.getItem("ad-theme");
+ var stored = localStorage.getItem("gl-theme");
if (stored === "dark" || stored === "light") {
document.documentElement.setAttribute("data-theme", stored);
}
@@ -48,20 +48,20 @@
</script>
</head>
<body>
- <a class="ad-doc-skip" href="#main">Skip to content</a>
+ <a class="gl-doc-skip" href="#main">Skip to content</a>
- <header class="ad-doc-header">
- <div class="ad-doc-header__inner">
- <a class="ad-doc-wordmark" href="<%= relative_url('/') %>">
- <svg class="ad-doc-wordmark__mark" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+ <header class="gl-doc-header">
+ <div class="gl-doc-header__inner">
+ <a class="gl-doc-wordmark" href="<%= relative_url('/') %>">
+ <svg class="gl-doc-wordmark__mark" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<rect x="1.5" y="1.5" width="21" height="21" rx="5" stroke="currentColor" stroke-width="2"/>
<path d="M7 16.5 12 7l5 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.2 13.4h5.6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
- <span>Arbitrary Definitions</span>
- <span class="ad-doc-wordmark__version">v<%= VERSION %></span>
+ <span>Gloss</span>
+ <span class="gl-doc-wordmark__version">v<%= VERSION %></span>
</a>
- <div class="ad-doc-header__actions">
+ <div class="gl-doc-header__actions">
<button data-variant="ghost" data-size="sm" data-theme-toggle
aria-label="Switch color theme" title="Switch color theme">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-theme-icon="light">
@@ -72,27 +72,27 @@
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-theme-icon="dark" hidden>
<path d="M20 14.2A8.4 8.4 0 0 1 9.8 4a8.4 8.4 0 1 0 10.2 10.2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
</svg>
- <span class="ad-visually-hidden" data-theme-label>Theme</span>
+ <span class="gl-visually-hidden" data-theme-label>Theme</span>
</button>
<a class="btn" data-size="sm" href="https://github.com/<%= REPOSITORY %>">Source</a>
</div>
</div>
</header>
- <div class="ad-doc-layout">
- <aside class="ad-doc-sidebar" data-sidebar data-collapsed="true">
- <button class="ad-doc-nav-toggle" data-size="sm"
- data-nav-toggle aria-expanded="false" aria-controls="ad-doc-nav">
+ <div class="gl-doc-layout">
+ <aside class="gl-doc-sidebar" data-sidebar data-collapsed="true">
+ <button class="gl-doc-nav-toggle" data-size="sm"
+ data-nav-toggle aria-expanded="false" aria-controls="gl-doc-nav">
<span>Browse the system</span>
<span aria-hidden="true">☰</span>
</button>
- <nav class="ad-doc-nav" id="ad-doc-nav" aria-label="Design system">
+ <nav class="gl-doc-nav" id="gl-doc-nav" aria-label="Design system">
<% NAV.each do |group| -%>
- <div class="ad-doc-nav__group">
- <h2 class="ad-doc-nav__heading"><%= group["title"] %></h2>
+ <div class="gl-doc-nav__group">
+ <h2 class="gl-doc-nav__heading"><%= group["title"] %></h2>
<% group["links"].each do |link| -%>
- <a class="ad-doc-nav__link" href="<%= relative_url(link["url"]) %>"
+ <a class="gl-doc-nav__link" href="<%= relative_url(link["url"]) %>"
<% if url == link["url"] %>aria-current="page"<% end %>><%= link["text"] %></a>
<% end -%>
</div>
@@ -100,13 +100,13 @@
</nav>
</aside>
- <main class="ad-doc-main" id="main">
+ <main class="gl-doc-main" id="main">
<%= body %>
</main>
</div>
- <footer class="ad-doc-footer">
- <div class="ad-doc-footer__inner">
+ <footer class="gl-doc-footer">
+ <div class="gl-doc-footer__inner">
<p><%= TITLE %> v<%= VERSION %> — built with Ruby <%= RUBY_VERSION %>.</p>
<p><a href="https://github.com/<%= REPOSITORY %>">View the source</a></p>
</div>
diff --git a/_patterns/archive.md b/_patterns/archive.md
index 27b71dd..b74b11c 100644
--- a/_patterns/archive.md
+++ b/_patterns/archive.md
@@ -67,7 +67,7 @@ Three screens, abbreviated to what each one adds.
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5V8Z" /><path d="M3 8l9 5 9-5M12 13v8" /></svg>
<span class="type-label">Photo preview</span>
</div>
- <label class="field" style="margin-top: var(--ad-space-m);">
+ <label class="field" style="margin-top: var(--gl-space-m);">
Name
<input placeholder="Dishwasher manual" />
</label>
@@ -92,11 +92,11 @@ Three screens, abbreviated to what each one adds.
<ul class="card">
<li>
<span class="avatar" data-square><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5V8Z" /><path d="M3 8l9 5 9-5M12 13v8" /></svg></span>
- <div class="pattern-row" style="font-size: var(--ad-step--1);">PDF · 2.1MB</div>
+ <div class="pattern-row" style="font-size: var(--gl-step--1);">PDF · 2.1MB</div>
</li>
</ul>
- <div class="type-label" style="margin: var(--ad-space-m) 0 var(--ad-space-2xs);">Notes</div>
- <p style="font-size: var(--ad-step--1); color: var(--ad-color-text-secondary); line-height:1.55; margin:0;">No notes yet.</p>
+ <div class="type-label" style="margin: var(--gl-space-m) 0 var(--gl-space-2xs);">Notes</div>
+ <p style="font-size: var(--gl-step--1); color: var(--gl-color-text-secondary); line-height:1.55; margin:0;">No notes yet.</p>
</div>
</div>
</div>
diff --git a/_patterns/loop.md b/_patterns/loop.md
index 8bb5b24..6fc2075 100644
--- a/_patterns/loop.md
+++ b/_patterns/loop.md
@@ -30,7 +30,7 @@ actual project built on this system would write.
<div class="pattern-dashboard__main">
<section class="pattern-section">
<div class="pattern-section__heading">
- <span class="type-label" style="color: var(--ad-color-danger);">Overdue</span>
+ <span class="type-label" style="color: var(--gl-color-danger);">Overdue</span>
<span class="badge" data-tone="danger">2</span>
</div>
<ul class="card pattern-list">
@@ -178,11 +178,11 @@ actual project built on this system would write.
- **Dense rows next to a mono meta column.** A recurring-task list is
fundamentally tabular even though it never touches an actual `<table>`.
-- **Overdue in `--ad-color-danger`, everywhere at once.** Row text, the
+- **Overdue in `--gl-color-danger`, everywhere at once.** Row text, the
complete-button border, and the trailing meta all pick it up from the same
`overdue` state — color never drifts row to row.
- **One primary action.** `New` is the only accent-filled control on screen;
everything else is neutral or bordered.
- **Accent used exactly once, decoratively.** The "km" avatar and the
- highlighted day both use `--ad-color-accent-soft` / `-ink` — never the raw
+ highlighted day both use `--gl-color-accent-soft` / `-ink` — never the raw
accent fill outside of `New`.
diff --git a/_sass/base/reset.css b/_sass/base/reset.css
index e336233..d7084ae 100644
--- a/_sass/base/reset.css
+++ b/_sass/base/reset.css
@@ -4,7 +4,7 @@
The rem values used for this documentation site's own chrome (measure,
content width, sidebar width, header height) belong to this site, not to
the design system it documents — the source design system defines no
- container-width tokens at all, so there is nothing under `--ad-*` to reach
+ container-width tokens at all, so there is nothing under `--gl-*` to reach
for here. See the header comment in site/shell.css. */
*,
@@ -14,7 +14,7 @@
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
- scroll-padding-top: calc(3.5rem + var(--ad-space-s));
+ scroll-padding-top: calc(3.5rem + var(--gl-space-s));
}
@media (prefers-reduced-motion: reduce) {
@@ -30,10 +30,10 @@ html {
body {
margin: 0;
- background: var(--ad-color-surface-page);
- color: var(--ad-color-text-primary);
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step-0);
+ background: var(--gl-color-surface-page);
+ color: var(--gl-color-text-primary);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step-0);
line-height: 1.55;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
@@ -41,8 +41,8 @@ body {
}
::selection {
- background: var(--ad-color-accent-soft);
- color: var(--ad-color-accent-ink);
+ background: var(--gl-color-accent-soft);
+ color: var(--gl-color-accent-ink);
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
@@ -57,22 +57,22 @@ button, input, select, textarea {
hr {
height: 1px;
- margin: var(--ad-space-l) 0;
+ margin: var(--gl-space-l) 0;
border: 0;
- background: var(--ad-color-border-hairline);
+ background: var(--gl-color-border-hairline);
}
/* One focus ring, defined once. No component is allowed its own. */
:focus-visible {
- outline: 2px solid var(--ad-color-accent);
+ outline: 2px solid var(--gl-color-accent);
outline-offset: 2px;
- border-radius: var(--ad-radius-sm);
+ border-radius: var(--gl-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }
-.ad-visually-hidden {
+.gl-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
diff --git a/_sass/base/typography.css b/_sass/base/typography.css
index e64eac8..530730f 100644
--- a/_sass/base/typography.css
+++ b/_sass/base/typography.css
@@ -1,89 +1,89 @@
/* Every rule here reads a type token for family and size. Weight, line-height,
and letter-spacing are hardcoded to the exact numbers the source ships —
- there is no `--ad-weight-*` / `--ad-leading-*` / `--ad-tracking-*` scale in
+ there is no `--gl-weight-*` / `--gl-leading-*` / `--gl-tracking-*` scale in
the real system, only eight fixed compound styles (see the Typography
foundation page, which this file implements verbatim). */
-.type-display { font: 600 var(--ad-step-4)/1.08 var(--ad-font-sans); letter-spacing: -0.015em; }
-.type-h1, h1 { font: 600 var(--ad-step-3)/1.12 var(--ad-font-sans); letter-spacing: -0.012em; }
-.type-h2, h2 { font: 600 var(--ad-step-2)/1.16 var(--ad-font-sans); letter-spacing: -0.01em; }
-.type-h3, h3 { font: 600 var(--ad-step-1)/1.25 var(--ad-font-sans); }
-.type-body { font: 400 var(--ad-step-0)/1.55 var(--ad-font-sans); }
-.type-body-sm { font: 400 var(--ad-step--1)/1.5 var(--ad-font-sans); }
+.type-display { font: 600 var(--gl-step-4)/1.08 var(--gl-font-sans); letter-spacing: -0.015em; }
+.type-h1, h1 { font: 600 var(--gl-step-3)/1.12 var(--gl-font-sans); letter-spacing: -0.012em; }
+.type-h2, h2 { font: 600 var(--gl-step-2)/1.16 var(--gl-font-sans); letter-spacing: -0.01em; }
+.type-h3, h3 { font: 600 var(--gl-step-1)/1.25 var(--gl-font-sans); }
+.type-body { font: 400 var(--gl-step-0)/1.55 var(--gl-font-sans); }
+.type-body-sm { font: 400 var(--gl-step--1)/1.5 var(--gl-font-sans); }
.type-label {
- font: 500 var(--ad-step--2)/1 var(--ad-font-mono);
+ font: 500 var(--gl-step--2)/1 var(--gl-font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
- color: var(--ad-color-text-secondary);
+ color: var(--gl-color-text-secondary);
}
-.type-mono { font: 400 var(--ad-step--1)/1.5 var(--ad-font-mono); }
+.type-mono { font: 400 var(--gl-step--1)/1.5 var(--gl-font-mono); }
/* Prose defaults for the documentation body copy. These read the same
tokens the compound classes above do; they are not a second scale. */
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
-h4 { font: 600 var(--ad-step-0)/1.3 var(--ad-font-sans); }
+h4 { font: 600 var(--gl-step-0)/1.3 var(--gl-font-sans); }
-p, ul, ol { margin: 0 0 var(--ad-space-s); }
-li + li { margin-top: var(--ad-space-3xs); }
+p, ul, ol { margin: 0 0 var(--gl-space-s); }
+li + li { margin-top: var(--gl-space-3xs); }
a {
- color: var(--ad-color-accent);
+ color: var(--gl-color-accent);
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
- transition: color var(--ad-dur-fast) var(--ad-ease),
- text-decoration-color var(--ad-dur-fast) var(--ad-ease);
+ transition: color var(--gl-dur-fast) var(--gl-ease),
+ text-decoration-color var(--gl-dur-fast) var(--gl-ease);
}
a:hover {
- color: var(--ad-color-accent-ink);
+ color: var(--gl-color-accent-ink);
text-decoration-color: currentColor;
}
strong, b { font-weight: 600; }
-small { font-size: var(--ad-step--1); }
+small { font-size: var(--gl-step--1); }
-.ad-lead {
- font-size: var(--ad-step-1);
+.gl-lead {
+ font-size: var(--gl-step-1);
line-height: 1.5;
- color: var(--ad-color-text-secondary);
+ color: var(--gl-color-text-secondary);
max-width: 68ch;
text-wrap: pretty;
}
-.ad-muted { color: var(--ad-color-text-secondary); }
-.ad-subtle { color: var(--ad-color-text-tertiary); }
+.gl-muted { color: var(--gl-color-text-secondary); }
+.gl-subtle { color: var(--gl-color-text-tertiary); }
code, kbd, samp, pre {
- font-family: var(--ad-font-mono);
+ font-family: var(--gl-font-mono);
font-feature-settings: "liga" 0;
}
:not(pre) > code {
padding: 0.15em 0.4em;
font-size: 0.875em;
- background: var(--ad-color-surface-fill);
- border: 1px solid var(--ad-color-border-hairline);
- border-radius: var(--ad-radius-sm);
+ background: var(--gl-color-surface-fill);
+ border: 1px solid var(--gl-color-border-hairline);
+ border-radius: var(--gl-radius-sm);
white-space: nowrap;
}
kbd {
display: inline-block;
padding: 0.1em 0.45em;
- font-size: var(--ad-step--2);
+ font-size: var(--gl-step--2);
line-height: 1.6;
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-default);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-default);
border-bottom-width: 2px;
- border-radius: var(--ad-radius-sm);
- color: var(--ad-color-text-secondary);
+ border-radius: var(--gl-radius-sm);
+ color: var(--gl-color-text-secondary);
}
blockquote {
- margin-block: var(--ad-space-s);
- padding-left: var(--ad-space-s);
- border-left: 2px solid var(--ad-color-accent);
- color: var(--ad-color-text-secondary);
+ margin-block: var(--gl-space-s);
+ padding-left: var(--gl-space-s);
+ border-left: 2px solid var(--gl-color-accent);
+ color: var(--gl-color-text-secondary);
}
diff --git a/_sass/components/badge.css b/_sass/components/badge.css
index d7e0d30..a3772cd 100644
--- a/_sass/components/badge.css
+++ b/_sass/components/badge.css
@@ -7,34 +7,34 @@
shape needs. Tone is an attribute, not a modifier class. */
.badge {
- --_bg: var(--ad-color-surface-fill);
- --_fg: var(--ad-color-text-secondary);
- --_border: var(--ad-color-border-hairline);
+ --_bg: var(--gl-color-surface-fill);
+ --_fg: var(--gl-color-text-secondary);
+ --_border: var(--gl-color-border-hairline);
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1875rem 0.5rem;
border: 1px solid var(--_border);
- border-radius: var(--ad-radius-sm);
+ border-radius: var(--gl-radius-sm);
background: var(--_bg);
color: var(--_fg);
- font-family: var(--ad-font-mono);
- font-size: var(--ad-step--2);
+ font-family: var(--gl-font-mono);
+ font-size: var(--gl-step--2);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
white-space: nowrap;
}
-.badge[data-tone="accent"] { --_bg: var(--ad-color-accent-soft); --_fg: var(--ad-color-accent-ink); --_border: transparent; }
-.badge[data-tone="success"] { --_bg: var(--ad-color-success-bg); --_fg: var(--ad-color-success); --_border: transparent; }
-.badge[data-tone="danger"] { --_bg: var(--ad-color-danger-bg); --_fg: var(--ad-color-danger); --_border: transparent; }
+.badge[data-tone="accent"] { --_bg: var(--gl-color-accent-soft); --_fg: var(--gl-color-accent-ink); --_border: transparent; }
+.badge[data-tone="success"] { --_bg: var(--gl-color-success-bg); --_fg: var(--gl-color-success); --_border: transparent; }
+.badge[data-tone="danger"] { --_bg: var(--gl-color-danger-bg); --_fg: var(--gl-color-danger); --_border: transparent; }
.badge-set {
display: flex;
flex-wrap: wrap;
- gap: var(--ad-space-2xs);
+ gap: var(--gl-space-2xs);
}
/* Tag
@@ -49,30 +49,30 @@
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
- border-radius: var(--ad-radius-sm);
- background: var(--ad-color-surface-fill);
- border: 1px solid var(--ad-color-border-default);
- color: var(--ad-color-text-secondary);
- font-family: var(--ad-font-mono);
- font-size: var(--ad-step--2);
+ border-radius: var(--gl-radius-sm);
+ background: var(--gl-color-surface-fill);
+ border: 1px solid var(--gl-color-border-default);
+ color: var(--gl-color-text-secondary);
+ font-family: var(--gl-font-mono);
+ font-size: var(--gl-step--2);
line-height: 1;
}
.tag[data-dashed] {
background: transparent;
border-style: dashed;
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
cursor: pointer;
}
.tag button {
all: unset;
cursor: pointer;
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
line-height: 1;
font-size: 0.75rem;
}
-.tag button:hover { color: var(--ad-color-text-primary); }
+.tag button:hover { color: var(--gl-color-text-primary); }
.tag-set {
display: flex;
diff --git a/_sass/components/button.css b/_sass/components/button.css
index 4922d22..2a3cd87 100644
--- a/_sass/components/button.css
+++ b/_sass/components/button.css
@@ -13,22 +13,22 @@
button:not(.icon-button),
a.btn {
- --_bg: var(--ad-color-surface-card);
- --_fg: var(--ad-color-text-primary);
- --_border: var(--ad-color-border-default);
- --_pad: var(--ad-space-xs) var(--ad-space-s);
- --_font: var(--ad-step--1);
+ --_bg: var(--gl-color-surface-card);
+ --_fg: var(--gl-color-text-primary);
+ --_border: var(--gl-color-border-default);
+ --_pad: var(--gl-space-xs) var(--gl-space-s);
+ --_font: var(--gl-step--1);
display: inline-flex;
align-items: center;
justify-content: center;
- gap: var(--ad-space-2xs);
+ gap: var(--gl-space-2xs);
padding: var(--_pad);
border: 1px solid var(--_border);
- border-radius: var(--ad-radius-md);
+ border-radius: var(--gl-radius-md);
background: var(--_bg);
color: var(--_fg);
- font-family: var(--ad-font-sans);
+ font-family: var(--gl-font-sans);
font-size: var(--_font);
font-weight: 550;
letter-spacing: -0.01em;
@@ -37,8 +37,8 @@ a.btn {
text-decoration: none;
white-space: nowrap;
cursor: pointer;
- transition: filter var(--ad-dur-fast) var(--ad-ease),
- border-color var(--ad-dur-fast) var(--ad-ease);
+ transition: filter var(--gl-dur-fast) var(--gl-ease),
+ border-color var(--gl-dur-fast) var(--gl-ease);
}
:is(button:not(.icon-button), a.btn):hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(0.96); }
@@ -51,37 +51,37 @@ button:not(.icon-button):disabled,
}
:is(button:not(.icon-button), a.btn)[data-variant="primary"] {
- --_bg: var(--ad-color-accent);
- --_fg: var(--ad-color-accent-fg);
- --_border: var(--ad-color-accent);
+ --_bg: var(--gl-color-accent);
+ --_fg: var(--gl-color-accent-fg);
+ --_border: var(--gl-color-accent);
}
/* Reserved for the single most-committing action in a view — a final Save,
never a whole row of them. */
:is(button:not(.icon-button), a.btn)[data-variant="dark"] {
- --_bg: var(--ad-color-text-primary);
- --_fg: var(--ad-color-surface-page);
- --_border: var(--ad-color-text-primary);
+ --_bg: var(--gl-color-text-primary);
+ --_fg: var(--gl-color-surface-page);
+ --_border: var(--gl-color-text-primary);
}
:is(button:not(.icon-button), a.btn)[data-variant="ghost"] {
--_bg: transparent;
- --_fg: var(--ad-color-text-primary);
+ --_fg: var(--gl-color-text-primary);
--_border: transparent;
}
/* The source hardcodes this label white rather than deriving it — danger
- is not "on a filled accent surface", so --ad-color-accent-fg is reused
+ is not "on a filled accent surface", so --gl-color-accent-fg is reused
here only because its resolved value is the same literal white, not
because the two roles are the same thing. */
:is(button:not(.icon-button), a.btn)[data-variant="danger"] {
- --_bg: var(--ad-color-danger);
- --_fg: var(--ad-color-accent-fg);
- --_border: var(--ad-color-danger);
+ --_bg: var(--gl-color-danger);
+ --_fg: var(--gl-color-accent-fg);
+ --_border: var(--gl-color-danger);
}
:is(button:not(.icon-button), a.btn)[data-size="sm"] { --_pad: 0.375rem 0.75rem; --_font: 0.8125rem; }
-:is(button:not(.icon-button), a.btn)[data-size="lg"] { --_pad: 0.75rem 1.375rem; --_font: var(--ad-step-0); }
+:is(button:not(.icon-button), a.btn)[data-size="lg"] { --_pad: 0.75rem 1.375rem; --_font: var(--gl-step-0); }
:is(button:not(.icon-button), a.btn)[data-block] { width: 100%; }
@@ -92,8 +92,8 @@ button:not(.icon-button):disabled,
isolation: isolate;
}
[role="group"] > button { border-radius: 0; }
-[role="group"] > button:first-child { border-start-start-radius: var(--ad-radius-md); border-end-start-radius: var(--ad-radius-md); }
-[role="group"] > button:last-child { border-start-end-radius: var(--ad-radius-md); border-end-end-radius: var(--ad-radius-md); }
+[role="group"] > button:first-child { border-start-start-radius: var(--gl-radius-md); border-end-start-radius: var(--gl-radius-md); }
+[role="group"] > button:last-child { border-start-end-radius: var(--gl-radius-md); border-end-end-radius: var(--gl-radius-md); }
[role="group"] > button + button { margin-inline-start: -1px; }
[role="group"] > button:hover,
[role="group"] > button:focus-visible { z-index: 1; }
@@ -106,7 +106,7 @@ button:not(.icon-button):disabled,
--_size: 2.125rem;
--_bg: transparent;
--_border: transparent;
- --_fg: var(--ad-color-text-secondary);
+ --_fg: var(--gl-color-text-secondary);
display: inline-flex;
align-items: center;
@@ -116,18 +116,18 @@ button:not(.icon-button):disabled,
padding: 0;
flex: none;
border: 1px solid var(--_border);
- border-radius: var(--ad-radius-md);
+ border-radius: var(--gl-radius-md);
background: var(--_bg);
color: var(--_fg);
cursor: pointer;
- transition: background-color var(--ad-dur-fast) var(--ad-ease),
- color var(--ad-dur-fast) var(--ad-ease);
+ transition: background-color var(--gl-dur-fast) var(--gl-ease),
+ color var(--gl-dur-fast) var(--gl-ease);
}
-.icon-button:hover:not(:disabled) { background: var(--ad-color-surface-fill-2); }
+.icon-button:hover:not(:disabled) { background: var(--gl-color-surface-fill-2); }
.icon-button:disabled { opacity: 0.5; cursor: default; }
.icon-button[data-size="sm"] { --_size: 1.75rem; }
.icon-button[data-size="lg"] { --_size: 2.5rem; }
-.icon-button[data-variant="outline"] { --_bg: var(--ad-color-surface-card); --_border: var(--ad-color-border-default); --_fg: var(--ad-color-text-primary); }
-.icon-button[data-variant="accent"] { --_bg: var(--ad-color-accent-soft); --_fg: var(--ad-color-accent-ink); }
+.icon-button[data-variant="outline"] { --_bg: var(--gl-color-surface-card); --_border: var(--gl-color-border-default); --_fg: var(--gl-color-text-primary); }
+.icon-button[data-variant="accent"] { --_bg: var(--gl-color-accent-soft); --_fg: var(--gl-color-accent-ink); }
diff --git a/_sass/components/card.css b/_sass/components/card.css
index c5c7ff9..e0281b3 100644
--- a/_sass/components/card.css
+++ b/_sass/components/card.css
@@ -17,24 +17,24 @@
margin: 0;
padding: 0;
list-style: none;
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-hairline);
- border-radius: var(--ad-radius-lg);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-hairline);
+ border-radius: var(--gl-radius-lg);
box-shadow: none;
overflow: hidden;
}
-.card[data-elevated] { box-shadow: var(--ad-shadow-float); }
+.card[data-elevated] { box-shadow: var(--gl-shadow-float); }
.card > li {
display: flex;
align-items: center;
- gap: var(--ad-space-xs);
- padding: var(--ad-space-xs) var(--ad-space-s);
- border-top: 1px solid var(--ad-color-border-hairline);
- color: var(--ad-color-text-primary);
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step--1);
+ gap: var(--gl-space-xs);
+ padding: var(--gl-space-xs) var(--gl-space-s);
+ border-top: 1px solid var(--gl-color-border-hairline);
+ color: var(--gl-color-text-primary);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step--1);
}
.card > li:first-child { border-top: none; }
@@ -54,17 +54,17 @@
all: unset;
display: flex;
align-items: center;
- gap: var(--ad-space-xs);
+ gap: var(--gl-space-xs);
width: 100%;
- padding: var(--ad-space-xs) var(--ad-space-s);
+ padding: var(--gl-space-xs) var(--gl-space-s);
box-sizing: border-box;
color: inherit;
font: inherit;
cursor: pointer;
- transition: background-color var(--ad-dur-fast) var(--ad-ease);
+ transition: background-color var(--gl-dur-fast) var(--gl-ease);
}
.card > li > button:only-child:hover,
-.card > li > a:only-child:hover { background: var(--ad-color-surface-fill); }
+.card > li > a:only-child:hover { background: var(--gl-color-surface-fill); }
/* Documentation-only extras: a body/footer pair and a responsive grid, used
by the prose pages (rationale.md, index.md) to show a Card as a plain
@@ -74,30 +74,30 @@
.card-body {
display: flex;
flex-direction: column;
- gap: var(--ad-space-2xs);
- padding: var(--ad-space-m);
+ gap: var(--gl-space-2xs);
+ padding: var(--gl-space-m);
}
-.card-body h3 { margin: 0; font: 600 var(--ad-step-0)/1.3 var(--ad-font-sans); }
-.card-body p { margin: 0; color: var(--ad-color-text-secondary); font-size: var(--ad-step--1); }
+.card-body h3 { margin: 0; font: 600 var(--gl-step-0)/1.3 var(--gl-font-sans); }
+.card-body p { margin: 0; color: var(--gl-color-text-secondary); font-size: var(--gl-step--1); }
.card-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
- gap: var(--ad-space-xs);
+ gap: var(--gl-space-xs);
margin-top: auto;
- padding: var(--ad-space-xs) var(--ad-space-m);
- border-top: 1px solid var(--ad-color-border-hairline);
- background: var(--ad-color-surface-fill);
+ padding: var(--gl-space-xs) var(--gl-space-m);
+ border-top: 1px solid var(--gl-color-border-hairline);
+ background: var(--gl-color-surface-fill);
}
-.card[data-link] { transition: border-color var(--ad-dur-fast) var(--ad-ease), box-shadow var(--ad-dur-fast) var(--ad-ease); }
-.card[data-link]:hover { border-color: var(--ad-color-border-default); box-shadow: var(--ad-shadow-sm); }
-.card[data-link]:focus-within { outline: 2px solid var(--ad-color-accent); outline-offset: 2px; }
+.card[data-link] { transition: border-color var(--gl-dur-fast) var(--gl-ease), box-shadow var(--gl-dur-fast) var(--gl-ease); }
+.card[data-link]:hover { border-color: var(--gl-color-border-default); box-shadow: var(--gl-shadow-sm); }
+.card[data-link]:focus-within { outline: 2px solid var(--gl-color-accent); outline-offset: 2px; }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
- gap: var(--ad-space-s);
+ gap: var(--gl-space-s);
}
/* Avatar — lives here because it almost never appears outside a card or a
@@ -112,14 +112,14 @@
width: var(--_size);
height: var(--_size);
flex: none;
- border-radius: var(--ad-radius-full);
- background: var(--ad-color-accent-soft);
- color: var(--ad-color-accent-ink);
- font-family: var(--ad-font-mono);
- font-size: var(--ad-step--2);
+ border-radius: var(--gl-radius-full);
+ background: var(--gl-color-accent-soft);
+ color: var(--gl-color-accent-ink);
+ font-family: var(--gl-font-mono);
+ font-size: var(--gl-step--2);
font-weight: 600;
overflow: hidden;
}
-.avatar[data-square] { border-radius: var(--ad-radius-md); background: var(--ad-color-surface-fill); color: var(--ad-color-text-secondary); border: 1px solid var(--ad-color-border-hairline); }
+.avatar[data-square] { border-radius: var(--gl-radius-md); background: var(--gl-color-surface-fill); color: var(--gl-color-text-secondary); border: 1px solid var(--gl-color-border-hairline); }
.avatar[data-size="sm"] { --_size: 1.5rem; }
.avatar[data-size="lg"] { --_size: 2.25rem; }
diff --git a/_sass/components/feedback.css b/_sass/components/feedback.css
index 3510e4b..1f49a2c 100644
--- a/_sass/components/feedback.css
+++ b/_sass/components/feedback.css
@@ -19,11 +19,11 @@ span:has(> [role="tooltip"]) {
transform: translateX(-50%);
margin-bottom: 0.375rem;
padding: 0.25rem 0.5rem;
- border-radius: var(--ad-radius-sm);
- background: var(--ad-color-text-primary);
- color: var(--ad-color-surface-page);
- font-family: var(--ad-font-mono);
- /* 11px is the source's own literal choice — smaller than --ad-step--2, the
+ border-radius: var(--gl-radius-sm);
+ background: var(--gl-color-text-primary);
+ color: var(--gl-color-surface-page);
+ font-family: var(--gl-font-mono);
+ /* 11px is the source's own literal choice — smaller than --gl-step--2, the
smallest step on the scale, because a tooltip is meant to read as a
glance-only aside rather than body text. */
font-size: 11px;
@@ -33,7 +33,7 @@ span:has(> [role="tooltip"]) {
opacity: 0;
visibility: hidden;
pointer-events: none;
- transition: opacity var(--ad-dur-fast) var(--ad-ease);
+ transition: opacity var(--gl-dur-fast) var(--gl-ease);
}
span:has(> [role="tooltip"]):hover > [role="tooltip"],
span:has(> [role="tooltip"]):focus-within > [role="tooltip"] {
@@ -52,21 +52,21 @@ span:has(> [role="tooltip"]):focus-within > [role="tooltip"] {
[role="status"] {
display: flex;
align-items: center;
- gap: var(--ad-space-xs);
+ gap: var(--gl-space-xs);
min-width: 20rem;
- padding: var(--ad-space-xs) var(--ad-space-s);
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-md);
- box-shadow: var(--ad-shadow-float);
- color: var(--ad-color-text-primary);
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step--2);
+ padding: var(--gl-space-xs) var(--gl-space-s);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-md);
+ box-shadow: var(--gl-shadow-float);
+ color: var(--gl-color-text-primary);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step--2);
}
[role="status"][data-fixed] {
position: fixed;
- inset-block-end: var(--ad-space-s);
- inset-inline-end: var(--ad-space-s);
+ inset-block-end: var(--gl-space-s);
+ inset-inline-end: var(--gl-space-s);
z-index: 60;
}
[role="status"] > span { flex: 1; }
@@ -74,15 +74,15 @@ span:has(> [role="tooltip"]):focus-within > [role="tooltip"] {
all: unset;
cursor: pointer;
font-weight: 600;
- color: var(--ad-color-danger);
+ color: var(--gl-color-danger);
}
[role="status"] button[aria-label="Dismiss"] {
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
font-size: 1rem;
font-weight: 400;
line-height: 1;
}
-[role="status"] button[aria-label="Dismiss"]:hover { color: var(--ad-color-text-primary); }
+[role="status"] button[aria-label="Dismiss"]:hover { color: var(--gl-color-text-primary); }
/* Dialog — the native <dialog> element: a centered modal, flat surface, no
colored header, hairline dividers between title/body/footer. A <header>
@@ -105,43 +105,43 @@ span:has(> [role="tooltip"]):focus-within > [role="tooltip"] {
.dialog-demo {
position: relative;
min-height: 20rem;
- background: var(--ad-color-surface-fill);
- border-radius: var(--ad-radius-lg);
+ background: var(--gl-color-surface-fill);
+ border-radius: var(--gl-radius-lg);
}
dialog {
width: 26rem;
- max-width: calc(100% - (2 * var(--ad-space-s)));
+ max-width: calc(100% - (2 * var(--gl-space-s)));
height: fit-content;
padding: 0;
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-hairline);
- border-radius: var(--ad-radius-lg);
- box-shadow: var(--ad-shadow-float);
- color: var(--ad-color-text-primary);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-hairline);
+ border-radius: var(--gl-radius-lg);
+ box-shadow: var(--gl-shadow-float);
+ color: var(--gl-color-text-primary);
overflow: hidden;
}
dialog::backdrop {
background: rgba(20, 18, 14, 0.35);
}
dialog > header {
- padding: var(--ad-space-s) var(--ad-space-m);
- border-bottom: 1px solid var(--ad-color-border-hairline);
- font-family: var(--ad-font-sans);
+ padding: var(--gl-space-s) var(--gl-space-m);
+ border-bottom: 1px solid var(--gl-color-border-hairline);
+ font-family: var(--gl-font-sans);
font-weight: 600;
- font-size: var(--ad-step-0);
- color: var(--ad-color-text-primary);
+ font-size: var(--gl-step-0);
+ color: var(--gl-color-text-primary);
}
dialog > footer {
display: flex;
justify-content: flex-end;
- gap: var(--ad-space-2xs);
- padding: var(--ad-space-s) var(--ad-space-m);
- border-top: 1px solid var(--ad-color-border-hairline);
+ gap: var(--gl-space-2xs);
+ padding: var(--gl-space-s) var(--gl-space-m);
+ border-top: 1px solid var(--gl-color-border-hairline);
}
dialog > *:not(header):not(footer) {
- padding: var(--ad-space-m);
+ padding: var(--gl-space-m);
margin: 0;
- color: var(--ad-color-text-primary);
- font-size: var(--ad-step--1);
+ color: var(--gl-color-text-primary);
+ font-size: var(--gl-step--1);
}
diff --git a/_sass/components/field.css b/_sass/components/field.css
index e3aa192..d4f9ccc 100644
--- a/_sass/components/field.css
+++ b/_sass/components/field.css
@@ -12,28 +12,28 @@
.field {
display: flex;
flex-direction: column;
- gap: var(--ad-space-2xs);
+ gap: var(--gl-space-2xs);
min-width: 0;
- font-family: var(--ad-font-mono);
- font-size: var(--ad-step--2);
+ font-family: var(--gl-font-mono);
+ font-size: var(--gl-step--2);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
- color: var(--ad-color-text-secondary);
+ color: var(--gl-color-text-secondary);
}
/* Hint and error read the native fine-print element. `role="alert"` is a
real live-region role for validation text, so it doubles as the selector
that turns a hint red. */
.field > small {
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step--2);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step--2);
text-transform: none;
letter-spacing: normal;
font-weight: 400;
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
}
-.field > small[role="alert"] { color: var(--ad-color-danger); }
+.field > small[role="alert"] { color: var(--gl-color-danger); }
/* Input / Select — bordered, matched to each other exactly. Both tags ARE
the component, so they are styled bare; nothing else on this site uses a
@@ -41,26 +41,26 @@
input:not([type="checkbox"]):not([type="radio"]),
select {
width: 100%;
- padding: var(--ad-space-xs) var(--ad-space-s);
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-sm);
- color: var(--ad-color-text-primary);
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step--1);
+ padding: var(--gl-space-xs) var(--gl-space-s);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-sm);
+ color: var(--gl-color-text-primary);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step--1);
text-transform: none;
letter-spacing: normal;
font-weight: 400;
outline: none;
- transition: border-color var(--ad-dur-fast) var(--ad-ease),
- box-shadow var(--ad-dur-fast) var(--ad-ease);
+ transition: border-color var(--gl-dur-fast) var(--gl-ease),
+ box-shadow var(--gl-dur-fast) var(--gl-ease);
}
-input::placeholder { color: var(--ad-color-text-tertiary); }
+input::placeholder { color: var(--gl-color-text-tertiary); }
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus {
- border-color: var(--ad-color-accent);
- box-shadow: 0 0 0 2px var(--ad-color-accent-soft);
+ border-color: var(--gl-color-accent);
+ box-shadow: 0 0 0 2px var(--gl-color-accent-soft);
}
input:not([type="checkbox"]):not([type="radio"]):disabled,
@@ -71,21 +71,21 @@ select:disabled {
/* The chevron is the one flagged color exception in this component set:
CSS cannot point a data-URI background-image at a custom property, so its
- stroke is a literal hex rather than a var(--ad-*) reference. It is picked
- to match --ad-color-text-secondary and commented here so it is not
+ stroke is a literal hex rather than a var(--gl-*) reference. It is picked
+ to match --gl-color-text-secondary and commented here so it is not
mistaken for a stray color. */
select {
appearance: none;
- padding-inline-end: var(--ad-space-l);
+ padding-inline-end: var(--gl-space-l);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235f5d59' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
- background-position: right var(--ad-space-xs) center;
+ background-position: right var(--gl-space-xs) center;
}
input[aria-invalid="true"],
select[aria-invalid="true"] {
- border-color: var(--ad-color-danger);
- background-color: var(--ad-color-danger-bg);
+ border-color: var(--gl-color-danger);
+ background-color: var(--gl-color-danger-bg);
}
/* Checkbox / Radio — the real native controls, tinted with accent-color
@@ -101,12 +101,12 @@ input[type="radio"] {
width: 1.125rem;
height: 1.125rem;
margin: 0;
- accent-color: var(--ad-color-accent);
+ accent-color: var(--gl-color-accent);
cursor: pointer;
}
input[type="checkbox"]:not([role="switch"]):focus-visible,
input[type="radio"]:focus-visible {
- outline: 2px solid var(--ad-color-accent);
+ outline: 2px solid var(--gl-color-accent);
outline-offset: 2px;
}
@@ -114,14 +114,14 @@ label:has(> input[type="checkbox"]:not([role="switch"])),
label:has(> input[type="radio"]) {
display: inline-flex;
align-items: center;
- gap: var(--ad-space-2xs);
+ gap: var(--gl-space-2xs);
cursor: pointer;
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step--1);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step--1);
font-weight: 400;
text-transform: none;
letter-spacing: normal;
- color: var(--ad-color-text-primary);
+ color: var(--gl-color-text-primary);
}
label:has(> input:disabled) { cursor: default; opacity: 0.5; }
@@ -135,11 +135,11 @@ label:has(> input:disabled) { cursor: default; opacity: 0.5; }
.switch {
display: inline-flex;
align-items: center;
- gap: var(--ad-space-2xs);
+ gap: var(--gl-space-2xs);
cursor: pointer;
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step--1);
- color: var(--ad-color-text-primary);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step--1);
+ color: var(--gl-color-text-primary);
}
.switch input[role="switch"] { position: absolute; opacity: 0; width: 2.25rem; height: 1.25rem; margin: 0; }
@@ -148,9 +148,9 @@ label:has(> input:disabled) { cursor: default; opacity: 0.5; }
flex: none;
width: 2.25rem;
height: 1.25rem;
- border-radius: var(--ad-radius-full);
- background: var(--ad-color-border-default);
- transition: background-color var(--ad-dur-base) var(--ad-ease);
+ border-radius: var(--gl-radius-full);
+ background: var(--gl-color-border-default);
+ transition: background-color var(--gl-dur-base) var(--gl-ease);
}
.switch span::after {
content: "";
@@ -159,14 +159,14 @@ label:has(> input:disabled) { cursor: default; opacity: 0.5; }
inset-inline-start: 2px;
width: 1rem;
height: 1rem;
- border-radius: var(--ad-radius-full);
- background: var(--ad-color-accent-fg);
- box-shadow: var(--ad-shadow-sm);
- transition: translate var(--ad-dur-base) var(--ad-ease);
+ border-radius: var(--gl-radius-full);
+ background: var(--gl-color-accent-fg);
+ box-shadow: var(--gl-shadow-sm);
+ transition: translate var(--gl-dur-base) var(--gl-ease);
}
-.switch input[role="switch"]:checked + span { background: var(--ad-color-accent); }
+.switch input[role="switch"]:checked + span { background: var(--gl-color-accent); }
.switch input[role="switch"]:checked + span::after { translate: 1rem 0; }
-.switch input[role="switch"]:focus-visible + span { outline: 2px solid var(--ad-color-accent); outline-offset: 2px; }
+.switch input[role="switch"]:focus-visible + span { outline: 2px solid var(--gl-color-accent); outline-offset: 2px; }
.switch:has(input:disabled) { cursor: default; opacity: 0.5; }
/* Rows of fields — used by the settings-form pattern. `<form>`/`<fieldset>`
@@ -176,31 +176,31 @@ label:has(> input:disabled) { cursor: default; opacity: 0.5; }
form {
display: flex;
flex-direction: column;
- gap: var(--ad-space-s);
+ gap: var(--gl-space-s);
max-width: 28rem;
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
- gap: var(--ad-space-xs);
+ gap: var(--gl-space-xs);
}
/* Vertically stacked fields — the other half of form layout alongside
.form-row's side-by-side pair. */
-.field-stack { display: flex; flex-direction: column; gap: var(--ad-space-s); }
+.field-stack { display: flex; flex-direction: column; gap: var(--gl-space-s); }
fieldset {
display: flex;
flex-direction: column;
- gap: var(--ad-space-2xs);
+ gap: var(--gl-space-2xs);
margin: 0;
padding: 0;
border: 0;
}
fieldset > legend {
- padding: 0 0 var(--ad-space-2xs);
- font-family: var(--ad-font-mono);
- font-size: var(--ad-step--2);
+ padding: 0 0 var(--gl-space-2xs);
+ font-family: var(--gl-font-mono);
+ font-size: var(--gl-step--2);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
- color: var(--ad-color-text-secondary);
+ color: var(--gl-color-text-secondary);
}
diff --git a/_sass/components/tabs.css b/_sass/components/tabs.css
index 8c415ef..8636c30 100644
--- a/_sass/components/tabs.css
+++ b/_sass/components/tabs.css
@@ -20,8 +20,8 @@
[role="tablist"] {
display: flex;
- gap: var(--ad-space-m);
- border-bottom: 1px solid var(--ad-color-border-hairline);
+ gap: var(--gl-space-m);
+ border-bottom: 1px solid var(--gl-color-border-hairline);
}
[role="tablist"] [role="tab"] {
padding: 0.5rem 0;
@@ -29,17 +29,17 @@
background: none;
border: 0;
border-bottom: 2px solid transparent;
- color: var(--ad-color-text-secondary);
- font-family: var(--ad-font-mono);
- font-size: var(--ad-step--1);
+ color: var(--gl-color-text-secondary);
+ font-family: var(--gl-font-mono);
+ font-size: var(--gl-step--1);
letter-spacing: 0.02em;
cursor: pointer;
- transition: color var(--ad-dur-fast) var(--ad-ease), border-color var(--ad-dur-fast) var(--ad-ease);
+ transition: color var(--gl-dur-fast) var(--gl-ease), border-color var(--gl-dur-fast) var(--gl-ease);
}
-[role="tablist"] [role="tab"]:hover { color: var(--ad-color-text-primary); }
+[role="tablist"] [role="tab"]:hover { color: var(--gl-color-text-primary); }
[role="tablist"] [role="tab"][aria-selected="true"] {
- color: var(--ad-color-text-primary);
- border-bottom-color: var(--ad-color-accent);
+ color: var(--gl-color-text-primary);
+ border-bottom-color: var(--gl-color-accent);
}
[role="tablist"][data-variant="segmented"] {
@@ -47,26 +47,26 @@
gap: 0.125rem;
padding: 0.1875rem;
border-bottom: 0;
- background: var(--ad-color-surface-fill);
- border-radius: var(--ad-radius-md);
+ background: var(--gl-color-surface-fill);
+ border-radius: var(--gl-radius-md);
}
[role="tablist"][data-variant="segmented"] [role="tab"] {
all: unset;
cursor: pointer;
padding: 0.375rem 0.875rem;
- border-radius: var(--ad-radius-sm);
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step--1);
+ border-radius: var(--gl-radius-sm);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step--1);
font-weight: 550;
- color: var(--ad-color-text-secondary);
- transition: background-color var(--ad-dur-fast) var(--ad-ease), color var(--ad-dur-fast) var(--ad-ease);
+ color: var(--gl-color-text-secondary);
+ transition: background-color var(--gl-dur-fast) var(--gl-ease), color var(--gl-dur-fast) var(--gl-ease);
}
[role="tablist"][data-variant="segmented"] [role="tab"][aria-selected="true"] {
- color: var(--ad-color-text-primary);
- background: var(--ad-color-surface-card);
- box-shadow: var(--ad-shadow-sm);
+ color: var(--gl-color-text-primary);
+ background: var(--gl-color-surface-card);
+ box-shadow: var(--gl-shadow-sm);
}
-[role="tabpanel"] { padding-top: var(--ad-space-s); }
+[role="tabpanel"] { padding-top: var(--gl-space-s); }
[role="tabpanel"][hidden] { display: none; }
[role="tabpanel"]:focus-visible { outline-offset: 4px; }
diff --git a/_sass/site/example.css b/_sass/site/example.css
index 1d40754..47fedc2 100644
--- a/_sass/site/example.css
+++ b/_sass/site/example.css
@@ -6,31 +6,31 @@
handful of demos that need a non-default arrangement. */
.example {
- margin: var(--ad-space-s) 0 var(--ad-space-l);
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-lg);
- background: var(--ad-color-surface-card);
+ margin: var(--gl-space-s) 0 var(--gl-space-l);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-lg);
+ background: var(--gl-color-surface-card);
overflow: hidden;
}
.example figcaption {
- padding: var(--ad-space-2xs) var(--ad-space-xs);
- border-bottom: 1px solid var(--ad-color-border-hairline);
- background: var(--ad-color-surface-fill);
- font-family: var(--ad-font-mono);
+ padding: var(--gl-space-2xs) var(--gl-space-xs);
+ border-bottom: 1px solid var(--gl-color-border-hairline);
+ background: var(--gl-color-surface-fill);
+ font-family: var(--gl-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
- color: var(--ad-color-text-secondary);
+ color: var(--gl-color-text-secondary);
}
.example > div {
display: flex;
flex-wrap: wrap;
align-items: center;
- gap: var(--ad-space-xs);
- padding: var(--ad-space-s);
+ gap: var(--gl-space-xs);
+ padding: var(--gl-space-s);
}
/* nowrap is load-bearing: a column-direction flex container with wrap enabled
sizes its single line against the container rather than the content, which
@@ -41,24 +41,24 @@
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
align-items: start;
}
-.example > div[data-surface="sunken"] { background: var(--ad-color-surface-fill); }
+.example > div[data-surface="sunken"] { background: var(--gl-color-surface-fill); }
.example > div > * { min-width: 0; }
.example details {
- border-top: 1px solid var(--ad-color-border-hairline);
- background: var(--ad-color-surface-fill);
+ border-top: 1px solid var(--gl-color-border-hairline);
+ background: var(--gl-color-surface-fill);
}
.example summary {
- padding: var(--ad-space-2xs) var(--ad-space-xs);
- font-size: var(--ad-step--2);
+ padding: var(--gl-space-2xs) var(--gl-space-xs);
+ font-size: var(--gl-step--2);
font-weight: 500;
- color: var(--ad-color-text-secondary);
+ color: var(--gl-color-text-secondary);
cursor: pointer;
list-style: none;
user-select: none;
display: flex;
align-items: center;
- gap: var(--ad-space-2xs);
+ gap: var(--gl-space-2xs);
}
.example summary::-webkit-details-marker { display: none; }
.example summary::before {
@@ -68,17 +68,17 @@
border-inline-end: 1.5px solid currentColor;
border-block-end: 1.5px solid currentColor;
rotate: -45deg;
- transition: rotate var(--ad-dur-fast) var(--ad-ease);
+ transition: rotate var(--gl-dur-fast) var(--gl-ease);
}
.example details[open] > summary::before { rotate: 45deg; }
-.example summary:hover { color: var(--ad-color-text-primary); }
+.example summary:hover { color: var(--gl-color-text-primary); }
.example pre {
margin: 0;
- padding: var(--ad-space-xs);
- border-top: 1px solid var(--ad-color-border-hairline);
+ padding: var(--gl-space-xs);
+ border-top: 1px solid var(--gl-color-border-hairline);
overflow-x: auto;
- font-size: var(--ad-step--2);
+ font-size: var(--gl-step--2);
line-height: 1.5;
tab-size: 2;
}
@@ -87,14 +87,14 @@
/* Standalone fenced code blocks in the prose (unhighlighted — there is no
syntax highlighter in this build any more, just Kramdown's plain
<pre><code class="language-*">). */
-.ad-doc-main > pre {
- margin-block: var(--ad-space-xs);
- padding: var(--ad-space-xs);
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-md);
- background: var(--ad-color-surface-fill);
+.gl-doc-main > pre {
+ margin-block: var(--gl-space-xs);
+ padding: var(--gl-space-xs);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-md);
+ background: var(--gl-color-surface-fill);
overflow-x: auto;
- font-size: var(--ad-step--2);
+ font-size: var(--gl-step--2);
line-height: 1.5;
}
-.ad-doc-main > pre code { background: none; border: 0; padding: 0; white-space: pre; }
+.gl-doc-main > pre code { background: none; border: 0; padding: 0; white-space: pre; }
diff --git a/_sass/site/patterns.css b/_sass/site/patterns.css
index 99c5567..4087c18 100644
--- a/_sass/site/patterns.css
+++ b/_sass/site/patterns.css
@@ -1,7 +1,7 @@
/* Dedicated CSS for the two reference patterns (Loop, Archive) — this is
what an actual project built on this system would write: real classes for
the page-specific shapes (an app shell, a phone frame, a status-strip
- day), composed from the same var(--ad-*) tokens every component reads,
+ day), composed from the same var(--gl-*) tokens every component reads,
rather than hand-styling every element inline. Nothing here is a system
component — see _sass/components/ for those — this is what sits between
them on a real screen. */
@@ -9,54 +9,54 @@
/* -- Loop (dashboard) ----------------------------------------------------- */
.pattern-dashboard {
- border: 1px solid var(--ad-color-border-hairline);
- border-radius: var(--ad-radius-lg);
+ border: 1px solid var(--gl-color-border-hairline);
+ border-radius: var(--gl-radius-lg);
overflow: hidden;
- background: var(--ad-color-surface-page);
+ background: var(--gl-color-surface-page);
}
.pattern-dashboard__header {
display: flex;
align-items: center;
- gap: var(--ad-space-s);
- padding: var(--ad-space-s) var(--ad-space-l);
- border-bottom: 1px solid var(--ad-color-border-hairline);
+ gap: var(--gl-space-s);
+ padding: var(--gl-space-s) var(--gl-space-l);
+ border-bottom: 1px solid var(--gl-color-border-hairline);
}
.pattern-dashboard__title {
- font-family: var(--ad-font-mono);
+ font-family: var(--gl-font-mono);
font-weight: 600;
letter-spacing: 0.02em;
- font-size: var(--ad-step-0);
+ font-size: var(--gl-step-0);
}
.pattern-dashboard__body { display: flex; }
.pattern-dashboard__main {
flex: 1;
min-width: 0;
max-width: 34rem;
- padding: var(--ad-space-l);
+ padding: var(--gl-space-l);
}
.pattern-dashboard__aside {
width: 15rem;
flex-shrink: 0;
- background: var(--ad-color-surface-fill);
- border-left: 1px solid var(--ad-color-border-hairline);
- padding: var(--ad-space-l);
+ background: var(--gl-color-surface-fill);
+ border-left: 1px solid var(--gl-color-border-hairline);
+ padding: var(--gl-space-l);
}
.pattern-spacer { flex: 1; }
-.pattern-section { margin-bottom: var(--ad-space-l); }
+.pattern-section { margin-bottom: var(--gl-space-l); }
.pattern-section:last-child { margin-bottom: 0; }
.pattern-section__heading {
display: flex;
align-items: baseline;
- gap: var(--ad-space-2xs);
- margin-bottom: var(--ad-space-s);
+ gap: var(--gl-space-2xs);
+ margin-bottom: var(--gl-space-s);
}
/* A section list without Card's own border/background — the divider
between rows still comes from `.card > li`; only the outer frame is
suppressed, since the dashboard's own border already contains it. */
.pattern-list { border: none; border-radius: 0; background: none; }
-.pattern-list li:first-child { border-top: 1px solid var(--ad-color-border-hairline); }
+.pattern-list li:first-child { border-top: 1px solid var(--gl-color-border-hairline); }
.pattern-complete {
all: unset;
@@ -65,25 +65,25 @@
border-radius: 4px;
flex-shrink: 0;
cursor: pointer;
- border: 1.5px solid var(--ad-color-text-secondary);
+ border: 1.5px solid var(--gl-color-text-secondary);
}
-.pattern-complete[data-tone="danger"] { border-color: var(--ad-color-danger); }
+.pattern-complete[data-tone="danger"] { border-color: var(--gl-color-danger); }
.pattern-row { flex: 1; min-width: 0; }
.pattern-row__title { font-weight: 500; }
-.pattern-row__title[data-tone="danger"] { color: var(--ad-color-danger); }
-.pattern-row__meta { color: var(--ad-color-text-tertiary); font-size: var(--ad-step--2); }
-.pattern-row__trailing { font-size: var(--ad-step--2); white-space: nowrap; }
-.pattern-row__trailing[data-tone="danger"] { color: var(--ad-color-danger); }
-.pattern-row__trailing[data-tone="secondary"] { color: var(--ad-color-text-secondary); }
+.pattern-row__title[data-tone="danger"] { color: var(--gl-color-danger); }
+.pattern-row__meta { color: var(--gl-color-text-tertiary); font-size: var(--gl-step--2); }
+.pattern-row__trailing { font-size: var(--gl-step--2); white-space: nowrap; }
+.pattern-row__trailing[data-tone="danger"] { color: var(--gl-color-danger); }
+.pattern-row__trailing[data-tone="secondary"] { color: var(--gl-color-text-secondary); }
.pattern-week {
display: flex;
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-hairline);
- border-radius: var(--ad-radius-md);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-hairline);
+ border-radius: var(--gl-radius-md);
overflow: hidden;
- margin-bottom: var(--ad-space-l);
+ margin-bottom: var(--gl-space-l);
}
.pattern-week__day {
flex: 1;
@@ -92,36 +92,36 @@
align-items: center;
gap: 4px;
padding: 8px 0;
- border-right: 1px solid var(--ad-color-border-hairline);
+ border-right: 1px solid var(--gl-color-border-hairline);
}
.pattern-week__day:last-child { border-right: none; }
-.pattern-week__day[data-active] { background: var(--ad-color-accent-soft); }
+.pattern-week__day[data-active] { background: var(--gl-color-accent-soft); }
.pattern-week__label {
font-size: 9px;
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
text-transform: uppercase;
}
-.pattern-week__value { font-size: 13px; font-weight: 600; color: var(--ad-color-text-primary); }
-.pattern-week__day[data-active] .pattern-week__value { color: var(--ad-color-accent-ink); }
+.pattern-week__value { font-size: 13px; font-weight: 600; color: var(--gl-color-text-primary); }
+.pattern-week__day[data-active] .pattern-week__value { color: var(--gl-color-accent-ink); }
-.pattern-aside__label { margin-bottom: var(--ad-space-s); }
-.pattern-aside__label--tight { margin-bottom: var(--ad-space-2xs); }
+.pattern-aside__label { margin-bottom: var(--gl-space-s); }
+.pattern-aside__label--tight { margin-bottom: var(--gl-space-2xs); }
.pattern-series-item {
- padding: var(--ad-space-2xs) 0;
- font-size: var(--ad-step--1);
- color: var(--ad-color-text-secondary);
+ padding: var(--gl-space-2xs) 0;
+ font-size: var(--gl-step--1);
+ color: var(--gl-color-text-secondary);
}
-.pattern-series-item:not(:first-child) { border-top: 1px solid var(--ad-color-border-hairline); }
+.pattern-series-item:not(:first-child) { border-top: 1px solid var(--gl-color-border-hairline); }
/* -- Archive (mobile) ------------------------------------------------------ */
.pattern-phone {
width: 300px;
height: 560px;
- background: var(--ad-color-surface-page);
- border-radius: var(--ad-radius-lg);
- box-shadow: var(--ad-shadow-float);
+ background: var(--gl-color-surface-page);
+ border-radius: var(--gl-radius-lg);
+ box-shadow: var(--gl-shadow-float);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -131,16 +131,16 @@
display: flex;
align-items: center;
gap: 8px;
- padding: 16px var(--ad-space-m) var(--ad-space-2xs);
+ padding: 16px var(--gl-space-m) var(--gl-space-2xs);
}
/* The home screen's app-level wordmark — one step larger than a page's own
contextual title next to a back button. */
-.pattern-phone__brand { font-weight: 600; font-size: var(--ad-step-1); letter-spacing: -0.01em; }
-.pattern-phone__title { font-weight: 600; font-size: var(--ad-step-0); }
+.pattern-phone__brand { font-weight: 600; font-size: var(--gl-step-1); letter-spacing: -0.01em; }
+.pattern-phone__title { font-weight: 600; font-size: var(--gl-step-0); }
.pattern-phone__body {
flex: 1;
overflow: hidden;
- padding: 0 var(--ad-space-m) var(--ad-space-l);
+ padding: 0 var(--gl-space-m) var(--gl-space-l);
}
/* The home screen's list runs under a floating capture dock instead of
ending in its own bottom padding. */
@@ -150,9 +150,9 @@
display: flex;
align-items: baseline;
gap: 8px;
- margin: var(--ad-space-s) 0 var(--ad-space-xs);
+ margin: var(--gl-space-s) 0 var(--gl-space-xs);
}
-.pattern-list-heading__title { font-weight: 700; font-size: var(--ad-step-0); }
+.pattern-list-heading__title { font-weight: 700; font-size: var(--gl-step-0); }
.pattern-list-heading .type-label { margin-left: auto; }
.pattern-dock {
@@ -163,31 +163,31 @@
display: flex;
justify-content: center;
padding: 14px 20px 22px;
- background: linear-gradient(to top, var(--ad-color-surface-page) 65%, transparent);
+ background: linear-gradient(to top, var(--gl-color-surface-page) 65%, transparent);
}
/* The one patterned background this system permits, and only here: an
empty photo slot. */
.pattern-photo-slot {
height: 180px;
- border-radius: var(--ad-radius-lg);
- border: 1px solid var(--ad-color-border-default);
- background: repeating-linear-gradient(45deg, transparent 0 8px, var(--ad-color-surface-fill-2) 8px 9px),
- var(--ad-color-surface-fill);
+ border-radius: var(--gl-radius-lg);
+ border: 1px solid var(--gl-color-border-default);
+ background: repeating-linear-gradient(45deg, transparent 0 8px, var(--gl-color-surface-fill-2) 8px 9px),
+ var(--gl-color-surface-fill);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
- margin-top: var(--ad-space-s);
+ margin-top: var(--gl-space-s);
}
-.pattern-detail-title { font-weight: 700; font-size: var(--ad-step-2); letter-spacing: -0.01em; margin: var(--ad-space-xs) 0 var(--ad-space-2xs); }
-.pattern-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--ad-space-m); }
+.pattern-detail-title { font-weight: 700; font-size: var(--gl-step-2); letter-spacing: -0.01em; margin: var(--gl-space-xs) 0 var(--gl-space-2xs); }
+.pattern-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--gl-space-m); }
-.pattern-file-title { font-weight: 550; font-size: var(--ad-step--1); }
+.pattern-file-title { font-weight: 550; font-size: var(--gl-step--1); }
.pattern-file-title--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pattern-file-meta { margin-top: 2px; }
-.pattern-phone__footer { padding: var(--ad-space-m); display: flex; gap: var(--ad-space-2xs); }
+.pattern-phone__footer { padding: var(--gl-space-m); display: flex; gap: var(--gl-space-2xs); }
.pattern-phone__footer button { flex: 1; }
diff --git a/_sass/site/shell.css b/_sass/site/shell.css
index 133c12b..d9fa6bb 100644
--- a/_sass/site/shell.css
+++ b/_sass/site/shell.css
@@ -1,190 +1,190 @@
-/* Documentation site chrome. Everything below the `.ad-doc-` prefix belongs
+/* Documentation site chrome. Everything below the `.gl-doc-` prefix belongs
to this site rather than to the design system it documents — including the
width/height constants used directly below. The source design system
defines no container-width tokens at all, so there is nothing under
- `--ad-*` for a doc shell to reach for; the Space foundation page's own
+ `--gl-*` for a doc shell to reach for; the Space foundation page's own
notes say to omit that group entirely rather than invent one. */
-.ad-doc-skip {
+.gl-doc-skip {
position: absolute;
- inset-inline-start: var(--ad-space-xs);
+ inset-inline-start: var(--gl-space-xs);
inset-block-start: -4rem;
z-index: 40;
- padding: var(--ad-space-2xs) var(--ad-space-xs);
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-sm);
- box-shadow: var(--ad-shadow-float);
- transition: inset-block-start var(--ad-dur-fast) var(--ad-ease);
-}
-.ad-doc-skip:focus { inset-block-start: var(--ad-space-2xs); }
+ padding: var(--gl-space-2xs) var(--gl-space-xs);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-sm);
+ box-shadow: var(--gl-shadow-float);
+ transition: inset-block-start var(--gl-dur-fast) var(--gl-ease);
+}
+.gl-doc-skip:focus { inset-block-start: var(--gl-space-2xs); }
-.ad-doc-header {
+.gl-doc-header {
position: sticky;
inset-block-start: 0;
z-index: 30;
height: 3.5rem;
- background: color-mix(in srgb, var(--ad-color-surface-page) 92%, transparent);
- border-bottom: 1px solid var(--ad-color-border-hairline);
+ background: color-mix(in srgb, var(--gl-color-surface-page) 92%, transparent);
+ border-bottom: 1px solid var(--gl-color-border-hairline);
}
-.ad-doc-header__inner {
+.gl-doc-header__inner {
display: flex;
align-items: center;
- gap: var(--ad-space-xs);
+ gap: var(--gl-space-xs);
height: 100%;
max-width: 72rem;
margin-inline: auto;
- padding-inline: var(--ad-space-xs);
+ padding-inline: var(--gl-space-xs);
}
-.ad-doc-wordmark {
+.gl-doc-wordmark {
display: flex;
align-items: baseline;
- gap: var(--ad-space-2xs);
- color: var(--ad-color-text-primary);
+ gap: var(--gl-space-2xs);
+ color: var(--gl-color-text-primary);
text-decoration: none;
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step-0);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step-0);
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
}
-.ad-doc-wordmark:hover { color: var(--ad-color-text-primary); }
-.ad-doc-wordmark__mark {
+.gl-doc-wordmark:hover { color: var(--gl-color-text-primary); }
+.gl-doc-wordmark__mark {
width: 1.375rem;
height: 1.375rem;
flex: none;
align-self: center;
- color: var(--ad-color-accent);
+ color: var(--gl-color-accent);
}
-.ad-doc-wordmark__version {
- font-family: var(--ad-font-mono);
+.gl-doc-wordmark__version {
+ font-family: var(--gl-font-mono);
font-size: 11px;
font-weight: 400;
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
}
-.ad-doc-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--ad-space-2xs); }
+.gl-doc-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--gl-space-2xs); }
-.ad-doc-layout {
+.gl-doc-layout {
display: grid;
grid-template-columns: 16rem minmax(0, 1fr);
- gap: var(--ad-space-l);
+ gap: var(--gl-space-l);
max-width: 72rem;
margin-inline: auto;
- padding: var(--ad-space-m) var(--ad-space-xs) var(--ad-space-2xl);
+ padding: var(--gl-space-m) var(--gl-space-xs) var(--gl-space-2xl);
}
-.ad-doc-sidebar {
+.gl-doc-sidebar {
position: sticky;
- inset-block-start: calc(3.5rem + var(--ad-space-m));
+ inset-block-start: calc(3.5rem + var(--gl-space-m));
align-self: start;
- max-height: calc(100vh - 3.5rem - var(--ad-space-l));
+ max-height: calc(100vh - 3.5rem - var(--gl-space-l));
overflow-y: auto;
- padding-inline-end: var(--ad-space-2xs);
+ padding-inline-end: var(--gl-space-2xs);
}
-.ad-doc-nav__group + .ad-doc-nav__group { margin-top: var(--ad-space-s); }
-.ad-doc-nav__heading {
- margin-bottom: var(--ad-space-2xs);
- font-family: var(--ad-font-mono);
+.gl-doc-nav__group + .gl-doc-nav__group { margin-top: var(--gl-space-s); }
+.gl-doc-nav__heading {
+ margin-bottom: var(--gl-space-2xs);
+ font-family: var(--gl-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
}
-.ad-doc-nav__link {
+.gl-doc-nav__link {
display: block;
- padding: var(--ad-space-3xs) var(--ad-space-xs);
- margin-inline-start: calc(var(--ad-space-xs) * -1);
+ padding: var(--gl-space-3xs) var(--gl-space-xs);
+ margin-inline-start: calc(var(--gl-space-xs) * -1);
border-inline-start: 2px solid transparent;
- border-radius: 0 var(--ad-radius-sm) var(--ad-radius-sm) 0;
- color: var(--ad-color-text-secondary);
- font-size: var(--ad-step--1);
+ border-radius: 0 var(--gl-radius-sm) var(--gl-radius-sm) 0;
+ color: var(--gl-color-text-secondary);
+ font-size: var(--gl-step--1);
text-decoration: none;
- transition: color var(--ad-dur-fast) var(--ad-ease),
- background-color var(--ad-dur-fast) var(--ad-ease);
-}
-.ad-doc-nav__link:hover { color: var(--ad-color-text-primary); background: var(--ad-color-surface-fill); }
-.ad-doc-nav__link[aria-current="page"] {
- color: var(--ad-color-accent-ink);
- border-inline-start-color: var(--ad-color-accent);
- background: var(--ad-color-accent-soft);
+ transition: color var(--gl-dur-fast) var(--gl-ease),
+ background-color var(--gl-dur-fast) var(--gl-ease);
+}
+.gl-doc-nav__link:hover { color: var(--gl-color-text-primary); background: var(--gl-color-surface-fill); }
+.gl-doc-nav__link[aria-current="page"] {
+ color: var(--gl-color-accent-ink);
+ border-inline-start-color: var(--gl-color-accent);
+ background: var(--gl-color-accent-soft);
font-weight: 500;
}
-.ad-doc-main {
+.gl-doc-main {
min-width: 0;
- /* The design system's own body-text token (--ad-step-0, 18–20px) is right
+ /* The design system's own body-text token (--gl-step-0, 18–20px) is right
for a product screen but too large for long-form documentation prose.
This site's own copy gets a plain, fixed 16px instead — the token above
is unchanged, and specimen tables/demos below still show its real
value. */
font-size: 1rem;
}
-.ad-doc-main > * { max-width: 50rem; }
+.gl-doc-main > * { max-width: 50rem; }
-.ad-doc-title { margin-bottom: var(--ad-space-xs); }
-.ad-doc-title__section {
+.gl-doc-title { margin-bottom: var(--gl-space-xs); }
+.gl-doc-title__section {
display: block;
- margin-bottom: var(--ad-space-2xs);
- font-family: var(--ad-font-mono);
+ margin-bottom: var(--gl-space-2xs);
+ font-family: var(--gl-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--ad-color-accent);
+ color: var(--gl-color-accent);
}
-.ad-doc-main h2 {
- margin-block: var(--ad-space-2xl) var(--ad-space-xs);
- padding-bottom: var(--ad-space-2xs);
- border-bottom: 1px solid var(--ad-color-border-hairline);
-}
-.ad-doc-main h3 { margin-block: var(--ad-space-l) var(--ad-space-2xs); }
-.ad-doc-main h4 { margin-block: var(--ad-space-s) var(--ad-space-2xs); }
-.ad-doc-main p,
-.ad-doc-main ul,
-.ad-doc-main ol { max-width: 68ch; }
-.ad-doc-main ul:not([class]),
-.ad-doc-main ol:not([class]) { padding-inline-start: var(--ad-space-s); }
+.gl-doc-main h2 {
+ margin-block: var(--gl-space-2xl) var(--gl-space-xs);
+ padding-bottom: var(--gl-space-2xs);
+ border-bottom: 1px solid var(--gl-color-border-hairline);
+}
+.gl-doc-main h3 { margin-block: var(--gl-space-l) var(--gl-space-2xs); }
+.gl-doc-main h4 { margin-block: var(--gl-space-s) var(--gl-space-2xs); }
+.gl-doc-main p,
+.gl-doc-main ul,
+.gl-doc-main ol { max-width: 68ch; }
+.gl-doc-main ul:not([class]),
+.gl-doc-main ol:not([class]) { padding-inline-start: var(--gl-space-s); }
-.ad-doc-footer {
+.gl-doc-footer {
max-width: 72rem;
margin-inline: auto;
- padding: var(--ad-space-s) var(--ad-space-xs) var(--ad-space-l);
- border-top: 1px solid var(--ad-color-border-hairline);
- color: var(--ad-color-text-tertiary);
- font-size: var(--ad-step--1);
+ padding: var(--gl-space-s) var(--gl-space-xs) var(--gl-space-l);
+ border-top: 1px solid var(--gl-color-border-hairline);
+ color: var(--gl-color-text-tertiary);
+ font-size: var(--gl-step--1);
}
-.ad-doc-footer__inner { display: flex; flex-wrap: wrap; gap: var(--ad-space-xs); justify-content: space-between; }
+.gl-doc-footer__inner { display: flex; flex-wrap: wrap; gap: var(--gl-space-xs); justify-content: space-between; }
-/* `button.ad-doc-nav-toggle` (element + class) rather than a bare class:
+/* `button.gl-doc-nav-toggle` (element + class) rather than a bare class:
button.css's own base rule is `button:not(.icon-button)`, which is also
one element + one class in specificity and sets `display: inline-flex` —
- a bare `.ad-doc-nav-toggle { display: none }` loses that fight and the
+ a bare `.gl-doc-nav-toggle { display: none }` loses that fight and the
toggle stays visible at every width. Matching its specificity here (and
coming later in the concatenated stylesheet) settles it in source order. */
-button.ad-doc-nav-toggle { display: none; }
+button.gl-doc-nav-toggle { display: none; }
@media (max-width: 60rem) {
- .ad-doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--ad-space-s); }
- .ad-doc-sidebar {
+ .gl-doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--gl-space-s); }
+ .gl-doc-sidebar {
position: static;
max-height: none;
}
/* The toggle is a normal Button; the panel it opens gets its own card
treatment. Putting the same card styling on the <aside> wrapper too
nested a button-shaped box inside an outer box for no reason. */
- .ad-doc-nav {
- margin-top: var(--ad-space-xs);
- padding: var(--ad-space-xs);
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-md);
+ .gl-doc-nav {
+ margin-top: var(--gl-space-xs);
+ padding: var(--gl-space-xs);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-md);
}
- .ad-doc-sidebar[data-collapsed="true"] > .ad-doc-nav { display: none; }
- button.ad-doc-nav-toggle {
+ .gl-doc-sidebar[data-collapsed="true"] > .gl-doc-nav { display: none; }
+ button.gl-doc-nav-toggle {
display: flex;
width: 100%;
justify-content: space-between;
@@ -192,6 +192,6 @@ button.ad-doc-nav-toggle { display: none; }
}
@media (max-width: 34rem) {
- .ad-doc-wordmark__version { display: none; }
- .ad-doc-layout { padding-inline: var(--ad-space-2xs); }
+ .gl-doc-wordmark__version { display: none; }
+ .gl-doc-layout { padding-inline: var(--gl-space-2xs); }
}
diff --git a/_sass/site/tokens-docs.css b/_sass/site/tokens-docs.css
index 4388f8a..0920fae 100644
--- a/_sass/site/tokens-docs.css
+++ b/_sass/site/tokens-docs.css
@@ -3,167 +3,167 @@
design system itself has no Table component (see the note on the removed
`table`/`progress`/`callout` pages in git history). */
-.ad-swatch-grid {
+.gl-swatch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
- gap: var(--ad-space-xs);
- margin-block: var(--ad-space-xs) var(--ad-space-s);
+ gap: var(--gl-space-xs);
+ margin-block: var(--gl-space-xs) var(--gl-space-s);
padding: 0;
list-style: none;
}
-.ad-swatch {
+.gl-swatch {
display: flex;
flex-direction: column;
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-sm);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-sm);
overflow: hidden;
- background: var(--ad-color-surface-card);
+ background: var(--gl-color-surface-card);
}
-.ad-swatch__chip {
+.gl-swatch__chip {
display: flex;
align-items: flex-end;
justify-content: flex-end;
height: 4rem;
- padding: var(--ad-space-2xs);
- font-family: var(--ad-font-mono);
+ padding: var(--gl-space-2xs);
+ font-family: var(--gl-font-mono);
font-size: 11px;
font-weight: 600;
}
-.ad-swatch__meta {
+.gl-swatch__meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
- padding: var(--ad-space-2xs);
- border-top: 1px solid var(--ad-color-border-hairline);
- font-family: var(--ad-font-mono);
+ padding: var(--gl-space-2xs);
+ border-top: 1px solid var(--gl-color-border-hairline);
+ font-family: var(--gl-font-mono);
font-size: 11px;
}
-.ad-swatch__hex { color: var(--ad-color-text-primary); text-transform: uppercase; }
-.ad-swatch__ratio { color: var(--ad-color-text-tertiary); }
+.gl-swatch__hex { color: var(--gl-color-text-primary); text-transform: uppercase; }
+.gl-swatch__ratio { color: var(--gl-color-text-tertiary); }
-.ad-alias-row { display: flex; align-items: center; gap: var(--ad-space-2xs); }
-.ad-alias-chip {
+.gl-alias-row { display: flex; align-items: center; gap: var(--gl-space-2xs); }
+.gl-alias-chip {
width: 1.5rem;
height: 1.5rem;
flex: none;
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-sm);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-sm);
}
-.ad-alias-chip--pair { display: flex; }
-.ad-alias-chip--pair > span { flex: 1; }
+.gl-alias-chip--pair { display: flex; }
+.gl-alias-chip--pair > span { flex: 1; }
/* Type specimen rows. */
-.ad-specimen {
+.gl-specimen {
display: grid;
grid-template-columns: minmax(0, 1fr);
- gap: var(--ad-space-3xs);
- padding-block: var(--ad-space-xs);
- border-bottom: 1px solid var(--ad-color-border-hairline);
+ gap: var(--gl-space-3xs);
+ padding-block: var(--gl-space-xs);
+ border-bottom: 1px solid var(--gl-color-border-hairline);
}
-.ad-specimen__meta {
+.gl-specimen__meta {
display: flex;
flex-wrap: wrap;
- gap: var(--ad-space-xs);
- font-family: var(--ad-font-mono);
+ gap: var(--gl-space-xs);
+ font-family: var(--gl-font-mono);
font-size: 11px;
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
}
-.ad-specimen__sample {
+.gl-specimen__sample {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- color: var(--ad-color-text-primary);
+ color: var(--gl-color-text-primary);
}
/* Space and radius rulers. */
-.ad-ruler { display: flex; flex-direction: column; gap: var(--ad-space-2xs); }
-.ad-ruler__row { display: grid; grid-template-columns: 6.5rem 4.5rem 1fr; align-items: center; gap: var(--ad-space-xs); font-family: var(--ad-font-mono); font-size: 11px; }
-.ad-ruler__bar { height: 0.75rem; background: var(--ad-color-accent); border-radius: var(--ad-radius-sm); }
-.ad-ruler__num { color: var(--ad-color-text-tertiary); text-align: right; }
+.gl-ruler { display: flex; flex-direction: column; gap: var(--gl-space-2xs); }
+.gl-ruler__row { display: grid; grid-template-columns: 6.5rem 4.5rem 1fr; align-items: center; gap: var(--gl-space-xs); font-family: var(--gl-font-mono); font-size: 11px; }
+.gl-ruler__bar { height: 0.75rem; background: var(--gl-color-accent); border-radius: var(--gl-radius-sm); }
+.gl-ruler__num { color: var(--gl-color-text-tertiary); text-align: right; }
-.ad-radius-grid, .ad-elevation-grid, .ad-motion-grid, .ad-accent-grid {
+.gl-radius-grid, .gl-elevation-grid, .gl-motion-grid, .gl-accent-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
- gap: var(--ad-space-xs);
- margin-block: var(--ad-space-xs);
+ gap: var(--gl-space-xs);
+ margin-block: var(--gl-space-xs);
padding: 0;
list-style: none;
}
-.ad-radius-demo {
+.gl-radius-demo {
height: 4.5rem;
- background: var(--ad-color-accent-soft);
- border: 1px solid var(--ad-color-accent);
- margin-bottom: var(--ad-space-2xs);
+ background: var(--gl-color-accent-soft);
+ border: 1px solid var(--gl-color-accent);
+ margin-bottom: var(--gl-space-2xs);
}
-.ad-elevation-demo {
+.gl-elevation-demo {
height: 4.5rem;
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-hairline);
- border-radius: var(--ad-radius-lg);
- margin-bottom: var(--ad-space-2xs);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-hairline);
+ border-radius: var(--gl-radius-lg);
+ margin-bottom: var(--gl-space-2xs);
}
-.ad-motion-demo {
+.gl-motion-demo {
height: 4.5rem;
display: grid;
place-items: center;
- background: var(--ad-color-surface-fill);
- border: 1px solid var(--ad-color-border-hairline);
- border-radius: var(--ad-radius-md);
- margin-bottom: var(--ad-space-2xs);
+ background: var(--gl-color-surface-fill);
+ border: 1px solid var(--gl-color-border-hairline);
+ border-radius: var(--gl-radius-md);
+ margin-bottom: var(--gl-space-2xs);
cursor: pointer;
overflow: hidden;
}
-.ad-motion-demo__dot {
+.gl-motion-demo__dot {
width: 1.25rem;
height: 1.25rem;
- border-radius: var(--ad-radius-full);
- background: var(--ad-color-accent);
+ border-radius: var(--gl-radius-full);
+ background: var(--gl-color-accent);
translate: -3rem 0;
transition-property: translate;
- transition-duration: var(--ad-dur-base);
- transition-timing-function: var(--ad-ease);
+ transition-duration: var(--gl-dur-base);
+ transition-timing-function: var(--gl-ease);
}
-.ad-motion-demo:hover .ad-motion-demo__dot,
-.ad-motion-demo:focus-visible .ad-motion-demo__dot { translate: 3rem 0; }
+.gl-motion-demo:hover .gl-motion-demo__dot,
+.gl-motion-demo:focus-visible .gl-motion-demo__dot { translate: 3rem 0; }
-.ad-accent-demo {
+.gl-accent-demo {
height: 4.5rem;
display: flex;
align-items: flex-end;
- padding: var(--ad-space-2xs);
- border-radius: var(--ad-radius-md);
+ padding: var(--gl-space-2xs);
+ border-radius: var(--gl-radius-md);
color: #fff;
- font-family: var(--ad-font-mono);
+ font-family: var(--gl-font-mono);
font-size: 11px;
- margin-bottom: var(--ad-space-2xs);
+ margin-bottom: var(--gl-space-2xs);
}
/* Token names read `<code>` sitewide, which already carries a mono chip
look for running prose (see :not(pre) > code in base/typography.css).
- Inside these specimen/swatch/ruler rows the old `.ad-token-name` class was
+ Inside these specimen/swatch/ruler rows the old `.gl-token-name` class was
plain mono text with no chip, so `<code>` is flattened back to that look
here the same way table cells are. */
-.ad-swatch code, .ad-specimen code, .ad-ruler code, .ad-alias-row code {
+.gl-swatch code, .gl-specimen code, .gl-ruler code, .gl-alias-row code {
background: none;
border: 0;
padding: 0;
- font-size: var(--ad-step--2);
- color: var(--ad-color-text-primary);
+ font-size: var(--gl-step--2);
+ color: var(--gl-color-text-primary);
white-space: nowrap;
}
/* A documentation aside. Like `<table>`, this is site chrome for the prose
itself, not a system component — the real system has no Callout. */
-.ad-callout {
- margin-block: var(--ad-space-s);
- padding: var(--ad-space-xs) var(--ad-space-s);
- border: 1px solid var(--ad-color-border-hairline);
- border-left: 3px solid var(--ad-color-accent);
- border-radius: var(--ad-radius-md);
- background: var(--ad-color-surface-fill);
-}
-.ad-callout p { margin: 0; font-size: var(--ad-step--1); }
-.ad-callout .type-label { display: block; margin-bottom: var(--ad-space-2xs); }
+.gl-callout {
+ margin-block: var(--gl-space-s);
+ padding: var(--gl-space-xs) var(--gl-space-s);
+ border: 1px solid var(--gl-color-border-hairline);
+ border-left: 3px solid var(--gl-color-accent);
+ border-radius: var(--gl-radius-md);
+ background: var(--gl-color-surface-fill);
+}
+.gl-callout p { margin: 0; font-size: var(--gl-step--1); }
+.gl-callout .type-label { display: block; margin-bottom: var(--gl-space-2xs); }
/* Generic reference tables (component APIs, alias tables, the contrast
contract). `<table>` IS a table — no class needed to say so. Every table
on this site uses the one compact density, so there is no separate
@@ -171,51 +171,51 @@
its own horizontal scrollbar on narrow viewports without a wrapper div;
the anonymous table box the browser generates around `<thead>`/`<tbody>`
still does the row/column layout. `<code>` replaces the old
- `.ad-token-name` / `.ad-table__code` cells — it is already styled
+ `.gl-token-name` / `.gl-table__code` cells — it is already styled
sitewide, just re-flattened here to a plain mono run instead of the
chip-with-border look prose code gets, to match this table's original
look. `.num` is the one sanctioned class left, for right-aligned numeric
columns — there is no attribute that means "this column is a number". */
-table { width: 100%; border-collapse: collapse; font-size: var(--ad-step--1); display: block; overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: var(--gl-step--1); display: block; overflow-x: auto; }
table th, table td {
- padding: var(--ad-space-3xs) var(--ad-space-xs);
- border-bottom: 1px solid var(--ad-color-border-hairline);
+ padding: var(--gl-space-3xs) var(--gl-space-xs);
+ border-bottom: 1px solid var(--gl-color-border-hairline);
text-align: left;
vertical-align: top;
}
-table th { font-family: var(--ad-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ad-color-text-secondary); font-weight: 500; }
-table code { background: none; border: 0; padding: 0; font-size: var(--ad-step--2); white-space: nowrap; }
+table th { font-family: var(--gl-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gl-color-text-secondary); font-weight: 500; }
+table code { background: none; border: 0; padding: 0; font-size: var(--gl-step--2); white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Home page. */
-.ad-hero { padding-block: var(--ad-space-m) var(--ad-space-l); }
-.ad-hero__title {
- font-size: var(--ad-step-4);
- margin-bottom: var(--ad-space-xs);
+.gl-hero { padding-block: var(--gl-space-m) var(--gl-space-l); }
+.gl-hero__title {
+ font-size: var(--gl-step-4);
+ margin-bottom: var(--gl-space-xs);
}
-.ad-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ad-space-xs); margin-top: var(--ad-space-s); }
-.ad-stat-row {
+.gl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gl-space-xs); margin-top: var(--gl-space-s); }
+.gl-stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
- gap: var(--ad-space-xs);
- margin-block: var(--ad-space-l);
- padding: var(--ad-space-xs);
- background: var(--ad-color-surface-card);
- border: 1px solid var(--ad-color-border-default);
- border-radius: var(--ad-radius-lg);
-}
-.ad-stat__value {
+ gap: var(--gl-space-xs);
+ margin-block: var(--gl-space-l);
+ padding: var(--gl-space-xs);
+ background: var(--gl-color-surface-card);
+ border: 1px solid var(--gl-color-border-default);
+ border-radius: var(--gl-radius-lg);
+}
+.gl-stat__value {
display: block;
- font-family: var(--ad-font-sans);
- font-size: var(--ad-step-2);
+ font-family: var(--gl-font-sans);
+ font-size: var(--gl-step-2);
font-weight: 600;
line-height: 1.16;
font-variant-numeric: tabular-nums;
}
-.ad-stat__label {
- font-family: var(--ad-font-mono);
+.gl-stat__label {
+ font-family: var(--gl-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
- color: var(--ad-color-text-tertiary);
+ color: var(--gl-color-text-tertiary);
}
diff --git a/assets/css/tokens.css b/assets/css/tokens.css
index 34ff530..31bc443 100644
--- a/assets/css/tokens.css
+++ b/assets/css/tokens.css
@@ -1,134 +1,134 @@
-/* Arbitrary Definitions — design tokens. Hand-maintained; edit values directly. */
+/* Gloss — design tokens. Hand-maintained; edit values directly. */
:root {
/* Palette ramps — reference only. Components use the aliases below. */
- --ad-neutral-0: #faf9f7;
- --ad-neutral-50: #fdfdfb;
- --ad-neutral-100: #f1f0ed;
- --ad-neutral-150: #e8e6e2;
- --ad-neutral-200: #dcdad7;
- --ad-neutral-300: #c0bdb9;
- --ad-neutral-500: #888681;
- --ad-neutral-600: #5f5d59;
- --ad-neutral-800: #2a2926;
- --ad-neutral-900: #100f0d;
- --ad-neutral-dark-0: #0e0d0b;
- --ad-neutral-dark-50: #151412;
- --ad-neutral-dark-100: #1e1d1a;
- --ad-neutral-dark-150: #252421;
- --ad-neutral-dark-200: #2c2b29;
- --ad-neutral-dark-300: #44423f;
- --ad-neutral-dark-500: #7c7a76;
- --ad-neutral-dark-600: #a09e9a;
- --ad-neutral-dark-800: #d9d7d4;
- --ad-neutral-dark-900: #e9e8e6;
- --ad-accent-teal: #3a6a63;
- --ad-accent-clay: #9a5a3c;
- --ad-accent-ink-blue: #2b4a78;
- --ad-accent-ochre: #93701f;
- --ad-accent-plum: #6a3a5c;
+ --gl-neutral-0: #faf9f7;
+ --gl-neutral-50: #fdfdfb;
+ --gl-neutral-100: #f1f0ed;
+ --gl-neutral-150: #e8e6e2;
+ --gl-neutral-200: #dcdad7;
+ --gl-neutral-300: #c0bdb9;
+ --gl-neutral-500: #888681;
+ --gl-neutral-600: #5f5d59;
+ --gl-neutral-800: #2a2926;
+ --gl-neutral-900: #100f0d;
+ --gl-neutral-dark-0: #0e0d0b;
+ --gl-neutral-dark-50: #151412;
+ --gl-neutral-dark-100: #1e1d1a;
+ --gl-neutral-dark-150: #252421;
+ --gl-neutral-dark-200: #2c2b29;
+ --gl-neutral-dark-300: #44423f;
+ --gl-neutral-dark-500: #7c7a76;
+ --gl-neutral-dark-600: #a09e9a;
+ --gl-neutral-dark-800: #d9d7d4;
+ --gl-neutral-dark-900: #e9e8e6;
+ --gl-accent-teal: #3a6a63;
+ --gl-accent-clay: #9a5a3c;
+ --gl-accent-ink-blue: #2b4a78;
+ --gl-accent-ochre: #93701f;
+ --gl-accent-plum: #6a3a5c;
/* Surfaces */
- --ad-color-surface-page: #faf9f7;
- --ad-color-surface-card: #fdfdfb;
- --ad-color-surface-fill: #f1f0ed;
- --ad-color-surface-fill-2: #e8e6e2;
+ --gl-color-surface-page: #faf9f7;
+ --gl-color-surface-card: #fdfdfb;
+ --gl-color-surface-fill: #f1f0ed;
+ --gl-color-surface-fill-2: #e8e6e2;
/* Borders */
- --ad-color-border-hairline: #dcdad7;
- --ad-color-border-default: #c0bdb9;
+ --gl-color-border-hairline: #dcdad7;
+ --gl-color-border-default: #c0bdb9;
/* Text */
- --ad-color-text-primary: #100f0d;
- --ad-color-text-secondary: #5f5d59;
- --ad-color-text-tertiary: #888681;
+ --gl-color-text-primary: #100f0d;
+ --gl-color-text-secondary: #5f5d59;
+ --gl-color-text-tertiary: #888681;
/* Accent */
- --ad-color-accent: #3a6a63;
- --ad-color-accent-fg: #ffffff;
- --ad-color-accent-ink: color-mix(in oklch, var(--ad-color-accent) 78%, black);
- --ad-color-accent-soft: color-mix(in oklch, var(--ad-color-accent) 12%, white);
+ --gl-color-accent: #3a6a63;
+ --gl-color-accent-fg: #ffffff;
+ --gl-color-accent-ink: color-mix(in oklch, var(--gl-color-accent) 78%, black);
+ --gl-color-accent-soft: color-mix(in oklch, var(--gl-color-accent) 12%, white);
/* Status (fixed — never swapped like the accent) */
- --ad-color-success: #3f7a4a;
- --ad-color-success-bg: color-mix(in oklch, var(--ad-color-success) 12%, white);
- --ad-color-danger: #ad3a2c;
- --ad-color-danger-bg: color-mix(in oklch, var(--ad-color-danger) 10%, white);
+ --gl-color-success: #3f7a4a;
+ --gl-color-success-bg: color-mix(in oklch, var(--gl-color-success) 12%, white);
+ --gl-color-danger: #ad3a2c;
+ --gl-color-danger-bg: color-mix(in oklch, var(--gl-color-danger) 10%, white);
/* Type families */
- --ad-font-sans: -apple-system, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
- --ad-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
- --ad-font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
+ --gl-font-sans: -apple-system, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
+ --gl-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
+ --gl-font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
/* Type steps — fluid (Utopia scale), the design system's own body-text size */
- --ad-step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
- --ad-step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
- --ad-step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
- --ad-step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
- --ad-step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
- --ad-step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
- --ad-step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
- --ad-step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
+ --gl-step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
+ --gl-step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
+ --gl-step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+ --gl-step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
+ --gl-step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
+ --gl-step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
+ --gl-step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
+ --gl-step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
/* Space */
- --ad-space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
- --ad-space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
- --ad-space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
- --ad-space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
- --ad-space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
- --ad-space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
- --ad-space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
- --ad-space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
- --ad-space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
+ --gl-space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
+ --gl-space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
+ --gl-space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
+ --gl-space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+ --gl-space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
+ --gl-space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
+ --gl-space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
+ --gl-space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
+ --gl-space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
/* Radius */
- --ad-radius-sm: 4px;
- --ad-radius-md: 6px;
- --ad-radius-lg: 10px;
- --ad-radius-full: 999px;
- --ad-border-w: 1px;
+ --gl-radius-sm: 4px;
+ --gl-radius-md: 6px;
+ --gl-radius-lg: 10px;
+ --gl-radius-full: 999px;
+ --gl-border-w: 1px;
/* Elevation */
- --ad-shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.05);
- --ad-shadow-float: 0 2px 6px rgba(20, 18, 14, 0.06), 0 10px 24px -12px rgba(20, 18, 14, 0.18);
+ --gl-shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.05);
+ --gl-shadow-float: 0 2px 6px rgba(20, 18, 14, 0.06), 0 10px 24px -12px rgba(20, 18, 14, 0.18);
/* Motion */
- --ad-dur-fast: 0.12s;
- --ad-dur-base: 0.16s;
- --ad-ease: cubic-bezier(0.2, 0, 0, 1);
+ --gl-dur-fast: 0.12s;
+ --gl-dur-base: 0.16s;
+ --gl-ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
- --ad-color-surface-page: #0e0d0b;
- --ad-color-surface-card: #151412;
- --ad-color-surface-fill: #1e1d1a;
- --ad-color-surface-fill-2: #252421;
- --ad-color-border-hairline: #2c2b29;
- --ad-color-border-default: #44423f;
- --ad-color-text-primary: #e9e8e6;
- --ad-color-text-secondary: #a09e9a;
- --ad-color-text-tertiary: #7c7a76;
+ --gl-color-surface-page: #0e0d0b;
+ --gl-color-surface-card: #151412;
+ --gl-color-surface-fill: #1e1d1a;
+ --gl-color-surface-fill-2: #252421;
+ --gl-color-border-hairline: #2c2b29;
+ --gl-color-border-default: #44423f;
+ --gl-color-text-primary: #e9e8e6;
+ --gl-color-text-secondary: #a09e9a;
+ --gl-color-text-tertiary: #7c7a76;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
- --ad-color-surface-page: #0e0d0b;
- --ad-color-surface-card: #151412;
- --ad-color-surface-fill: #1e1d1a;
- --ad-color-surface-fill-2: #252421;
- --ad-color-border-hairline: #2c2b29;
- --ad-color-border-default: #44423f;
- --ad-color-text-primary: #e9e8e6;
- --ad-color-text-secondary: #a09e9a;
- --ad-color-text-tertiary: #7c7a76;
+ --gl-color-surface-page: #0e0d0b;
+ --gl-color-surface-card: #151412;
+ --gl-color-surface-fill: #1e1d1a;
+ --gl-color-surface-fill-2: #252421;
+ --gl-color-border-hairline: #2c2b29;
+ --gl-color-border-default: #44423f;
+ --gl-color-text-primary: #e9e8e6;
+ --gl-color-text-secondary: #a09e9a;
+ --gl-color-text-tertiary: #7c7a76;
}
@media (prefers-reduced-motion: reduce) {
:root {
- --ad-dur-fast: 0ms;
- --ad-dur-base: 0ms;
+ --gl-dur-fast: 0ms;
+ --gl-dur-base: 0ms;
}
}
diff --git a/assets/js/system.js b/assets/js/system.js
index 85ae6a6..bba90eb 100644
--- a/assets/js/system.js
+++ b/assets/js/system.js
@@ -4,7 +4,7 @@
(function () {
"use strict";
- var STORAGE_KEY = "ad-theme";
+ var STORAGE_KEY = "gl-theme";
function readStored() {
try {
diff --git a/index.md b/index.md
index 804faf4..bfa4ec6 100644
--- a/index.md
+++ b/index.md
@@ -6,34 +6,35 @@ description: >-
a small Ruby/ERB static-site generator on Ruby 4.0.
---
-<div class="ad-hero">
- <p class="ad-overline">Design system</p>
- <h1 class="ad-hero__title">A personal umbrella for side projects, given a shared visual spine.</h1>
- <p class="ad-lead">
- Arbitrary Definitions is not a company's design system — it is one
- person's. Nothing in it is derived from a brief; every value was chosen
- once, named, and kept consistent since. Any project under this umbrella
- keeps its own accent color and typographic mood; this system is what
- they all share underneath.
+<div class="gl-hero">
+ <p class="gl-overline">Design system</p>
+ <h1 class="gl-hero__title">One visual spine under a personal umbrella of side projects.</h1>
+ <p class="gl-lead">
+ Gloss is the design system for Arbitrary Definitions — a personal
+ umbrella for self-hosted, single-user tools, never a SaaS product. It is
+ not a company's design system; it is one person's. Nothing in it is
+ derived from a brief; every value was chosen once, named, and kept
+ consistent since. Any project under the umbrella keeps its own accent
+ color and typographic mood; Gloss is what they all share underneath.
</p>
- <div class="ad-hero__actions">
+ <div class="gl-hero__actions">
<a class="btn" data-variant="primary" data-size="lg" href="<%= relative_url('/foundations/color/') %>">Start with color</a>
<a class="btn" data-size="lg" href="<%= relative_url('/components/button/') %>">Jump to components</a>
</div>
</div>
-<div class="ad-stat-row">
- <div class="ad-stat">
- <span class="ad-stat__value">3</span>
- <span class="ad-stat__label">Color ramps</span>
+<div class="gl-stat-row">
+ <div class="gl-stat">
+ <span class="gl-stat__value">3</span>
+ <span class="gl-stat__label">Color ramps</span>
</div>
- <div class="ad-stat">
- <span class="ad-stat__value">17</span>
- <span class="ad-stat__label">Semantic aliases</span>
+ <div class="gl-stat">
+ <span class="gl-stat__value">17</span>
+ <span class="gl-stat__label">Semantic aliases</span>
</div>
- <div class="ad-stat">
- <span class="ad-stat__value">16</span>
- <span class="ad-stat__label">Components</span>
+ <div class="gl-stat">
+ <span class="gl-stat__value">16</span>
+ <span class="gl-stat__label">Components</span>
</div>
</div>
@@ -42,7 +43,7 @@ description: >-
`assets/css/tokens.css` is one hand-maintained, hand-readable file of CSS
custom properties — the palette ramps, the semantic aliases, the dark theme,
and a `prefers-reduced-motion` override. The component stylesheets read
-`var(--ad-*)` and nothing else.
+`var(--gl-*)` and nothing else.
The tables and swatches on these pages are static too — transcribed once
from the token values, not recomputed on every build. If a hex changes in
@@ -93,8 +94,8 @@ same afternoon.
<h3>Rename the caution color</h3>
<p>
Three people have called it "yellow" in review this month. There is no
- caution token in this system — only <code>--ad-color-success</code> and
- <code>--ad-color-danger</code>, fixed across every project.
+ caution token in this system — only <code>--gl-color-success</code> and
+ <code>--gl-color-danger</code>, fixed across every project.
</p>
</div>
<div class="card-footer">
@@ -113,8 +114,8 @@ same afternoon.
<h3>Rename the caution color</h3>
<p>
Three people have called it "yellow" in review this month. There is no
- caution token in this system — only <code>--ad-color-success</code> and
- <code>--ad-color-danger</code>, fixed across every project.
+ caution token in this system — only <code>--gl-color-success</code> and
+ <code>--gl-color-danger</code>, fixed across every project.
</p>
</div>
<div class="card-footer">
diff --git a/install.md b/install.md
index 6a4efed..ea56da4 100644
--- a/install.md
+++ b/install.md
@@ -49,13 +49,13 @@ from the OS — the toggle UI on every page depends on this exact mechanism.
Both repoint the same semantic aliases at the inverted neutral ramp.
```css
-:root { --ad-color-surface-page: #faf9f7; }
+:root { --gl-color-surface-page: #faf9f7; }
@media (prefers-color-scheme: dark) {
- :root:not([data-theme="light"]) { --ad-color-surface-page: #0e0d0b; }
+ :root:not([data-theme="light"]) { --gl-color-surface-page: #0e0d0b; }
}
-:root[data-theme="dark"] { --ad-color-surface-page: #0e0d0b; }
+:root[data-theme="dark"] { --gl-color-surface-page: #0e0d0b; }
```
To wire up your own toggle, set or clear `data-theme` on `<html>` and persist
@@ -66,16 +66,16 @@ flash the wrong theme before your bundle runs.
Because every component reads an alias, retheming is a matter of repointing
a handful of custom properties after the token file loads — most of all,
-`--ad-color-accent`, which `-ink` and `-soft` re-derive from automatically via
+`--gl-color-accent`, which `-ink` and `-soft` re-derive from automatically via
`color-mix()`.
```css
:root {
- --ad-color-accent: #9a5a3c; /* Clay */
+ --gl-color-accent: #9a5a3c; /* Clay */
}
```
-<div class="ad-callout">
+<div class="gl-callout">
<p>
Re-check contrast after retheming. The system's contrast guarantees on
the <a href="<%= relative_url('/foundations/color/') %>">Color page</a>
diff --git a/lib/build.rb b/lib/build.rb
index 82167ee..3c26d4c 100644
--- a/lib/build.rb
+++ b/lib/build.rb
@@ -30,14 +30,13 @@ VERSION = "2.0.0"
# file to load. (The previous _config.yml also carried a `tagline` key
# nothing ever rendered — a small config file with a dead entry is exactly
# the kind of thing that's easy to miss when it's not just a constant.)
-TITLE = "Arbitrary Definitions"
-DESCRIPTION = "Arbitrary Definitions is a personal design system for self-hosted, " \
- "single-user tools — synthesized from three real running projects, not " \
- "written from a spec. Sixteen components and five foundations, built with a " \
- "small Ruby/ERB site builder running on Ruby 4.0."
+TITLE = "Gloss"
+DESCRIPTION = "Gloss is the design system for Arbitrary Definitions, a personal " \
+ "umbrella of self-hosted, single-user tools. Sixteen components and five " \
+ "foundations, built with a small Ruby/ERB site builder running on Ruby 4.0."
SITE_URL = "https://kejadlen.github.io"
-BASEURL = "/arbitrary-definitions-design-system"
-REPOSITORY = "kejadlen/arbitrary-definitions-design-system"
+BASEURL = "/gloss"
+REPOSITORY = "kejadlen/gloss"
LANG = "en"
# Plain CSS files, concatenated into one output bundle per named group
@@ -108,10 +107,10 @@ def render_page(source_path, url, section)
if front["layout"] == "default"
content_html
else
- title_header = section ? %(<span class="ad-doc-title__section">#{section}</span>) : ""
- summary = front["summary"] ? %(<p class="ad-lead">#{front["summary"]}</p>\n) : ""
+ title_header = section ? %(<span class="gl-doc-title__section">#{section}</span>) : ""
+ summary = front["summary"] ? %(<p class="gl-lead">#{front["summary"]}</p>\n) : ""
<<~HTML
- <header class="ad-doc-title">#{title_header}
+ <header class="gl-doc-title">#{title_header}
<h1>#{front.fetch("title")}</h1>
</header>
#{summary}#{content_html}
diff --git a/rationale.md b/rationale.md
index 08faf71..c733453 100644
--- a/rationale.md
+++ b/rationale.md
@@ -7,11 +7,13 @@ summary: >-
about it that is not arbitrary.
---
-## Where the name comes from
+## Where this comes from
-Arbitrary Definitions is a personal umbrella for side projects — self-hosted,
-single-user tools built for one household or one person, never a SaaS
-product. Almost nothing in a design system is derived: the accent is teal
+Gloss is a name and nothing more — it is not an argument about the system.
+The argument is in the umbrella it belongs to. Arbitrary Definitions is a
+personal umbrella for side projects — self-hosted, single-user tools built
+for one household or one person, never a SaaS product. Almost nothing in a
+design system is derived: the accent is teal
because someone liked it, the type scale ratio is 1.20 at the small end and
1.25 at the large end because that is what looked right, not because either
number is correct. What makes it a *system* is not that the choices are
@@ -37,7 +39,7 @@ Not the quality of the individual choices. The properties below:
<div class="card-body">
<h3>It has names</h3>
<p>
- <code>--ad-color-danger</code> survives a change of mind about which
+ <code>--gl-color-danger</code> survives a change of mind about which
red. <code>#ad3a2c</code> does not.
</p>
</div>
@@ -47,7 +49,7 @@ Not the quality of the individual choices. The properties below:
<h3>It is actually used</h3>
<p>
Every color, type, spacing, radius, elevation, and motion value in
- the components is a <code>var(--ad-*)</code>. Not one is a literal.
+ the components is a <code>var(--gl-*)</code>. Not one is a literal.
</p>
</div>
</article>
@@ -75,7 +77,7 @@ rather than re-derived on every build — a personal site does not need a test
suite standing between an edit and a deploy to keep five numbers honest.
That contract is deliberately narrower than "every color in the system".
-`--ad-color-text-tertiary` — this palette's own "muted-faint text" step — is
+`--gl-color-text-tertiary` — this palette's own "muted-faint text" step — is
about 3.46:1 against the page in light mode, under the 4.5:1 floor for normal
text. That is not a bug to paper over by darkening a real brand value; it is
a documented, intentional property of the palette (see the
@@ -87,7 +89,7 @@ borders do the elevation work, not high contrast, so it does not invent a
## The four rules
-<div class="ad-callout">
+<div class="gl-callout">
<p class="type-label">1. No color and no duration outside tokens.css</p>
<p>
A hex or a duration in a component stylesheet is a decision made in the
@@ -98,17 +100,17 @@ borders do the elevation work, not high contrast, so it does not invent a
</p>
</div>
-<div class="ad-callout">
+<div class="gl-callout">
<p class="type-label">2. Components read aliases, never ramps</p>
<p>
- <code>--ad-color-text-primary</code>, not <code>--ad-neutral-900</code>.
+ <code>--gl-color-text-primary</code>, not <code>--gl-neutral-900</code>.
The ramp is raw material; the alias is the decision. This is the whole
reason the dark theme is a block of repointed aliases rather than a
second stylesheet.
</p>
</div>
-<div class="ad-callout">
+<div class="gl-callout">
<p class="type-label">3. Every token says what it is for</p>
<p>
Every semantic alias on the <a href="<%= relative_url('/foundations/color/') %>">Color page</a>
@@ -117,7 +119,7 @@ borders do the elevation work, not high contrast, so it does not invent a
</p>
</div>
-<div class="ad-callout">
+<div class="gl-callout">
<p class="type-label">4. One accent, one dark-mode convention</p>
<p>
Never two accents in one view. Dark mode is opt-in — a
@@ -134,8 +136,8 @@ Being honest about the design is being honest about the gaps too.
components documented here are a from-scratch, best-guess personal-tool
kit — not a literal recreation of any real app's screens, and not backed
by a source of truth beyond this site.
-- **No logo or brand mark.** Render "Arbitrary Definitions" or the
- project's own name in type wherever a mark would go — don't invent one.
+- **No logo or brand mark.** Render "Gloss" or the project's own name in
+ type wherever a mark would go — don't invent one.
- **The icon set (Lucide) is a flagged substitution** — there's no shipped
icon library of its own yet.
- **Signal Teal, the default accent, is one pick among the sanctioned