npm - @gemboss/website-ui - Versions diffs - 0.2.0 → 0.3.0 - Mend

@gemboss/website-ui 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/AGENTS.md +47 -22
package/CHANGELOG.md +32 -0
package/README.md +16 -8
package/bin/lib/check.mjs +76 -7
package/bin/lib/contrast.mjs +67 -0
package/css/components.css +8 -6
package/css/header.css +37 -5
package/css/prose.css +3 -2
package/css/tokens.css +19 -0
package/demo/brand-profiles.html +199 -0
package/docs/components.md +26 -11
package/docs/markup-contract.md +16 -5
package/docs/philosophy.md +14 -9
package/docs/theming.md +85 -29
package/js/website.js +1 -1
package/package.json +1 -1
package/skill/SKILL.md +3 -1
package/system.json +31 -7
package/templates/header.html +3 -1
package/templates/page.html +2 -0
package/website.css +68 -14
package/website.min.css +1 -1

package/demo/brand-profiles.html ADDED Viewed

@@ -0,0 +1,199 @@
+<!doctype html>
+<!-- Kit demo: one brand that chose all three profiles (docs/theming.md). The profiles are two attributes on <html> and
+     one class on the header; the only CSS of the brand is the accent family below. Sample text, not a brand's copy. -->
+<html lang="en" data-gw-action="accent" data-gw-radius="soft">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>GemPages-style example · website UI kit</title>
+  <meta name="description" content="A kit demo with all three brand profiles on: the accent action, soft corners and the floating header, with a GemPages-style blue.">
+  <script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
+  <link rel="stylesheet" href="../website.css">
+  <style>
+    /* The brand's whole CSS: the accent family, light and dark, in one :root block (docs/theming.md).
+       Light: #3c67ff fills the primary button, white words on it are 4.58:1 (6.36:1 on the hover #2f52d6).
+       #2f52d6 as accent-strong is an EXAMPLE, not confirmed by the GemPages team: accent text needs it, because
+       #3c67ff is 4.13:1 on --gw-bg-soft; #2f52d6 is 6.36:1 on white, 5.73:1 on --gw-bg-soft, 5.54:1 on its tint.
+       Dark and night bands: #7c9bff is 7.37:1 on the dark page, and #0d0d12 words on it are 7.37:1. */
+    :root {
+      --gw-accent-light: #3c67ff;
+      --gw-accent-strong-light: #2f52d6;
+      --gw-accent-soft-light: #eaefff;
+      --gw-on-accent-light: #ffffff;
+      --gw-accent-dark: #7c9bff;
+      --gw-accent-strong-dark: #a9beff;
+      --gw-accent-soft-dark: #16213d;
+      --gw-on-accent-dark: #0d0d12;
+    }
+  </style>
+</head>
+<body class="gw-page">
+  <a class="gw-skip" href="#main">Skip to content</a>
+  <div class="gw-announce" role="region" aria-label="Announcement">Kit demo: a GemPages-style brand with all three profiles on. Sample text, not a brand's page. <a href="index.html">Back to the full demo</a></div>
+  <header class="gw-header gw-header--float" data-gw-header>
+    <div class="gw-wrap gw-header__bar">
+      <a class="gw-brand" href="brand-profiles.html"><svg class="gw-brand__mark" viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" style="fill:var(--gw-accent)"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg><span class="gw-brand__name">Example brand</span></a>
+      <nav class="gw-nav" aria-label="Main">
+        <ul class="gw-nav__list">
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-kit" data-gw-mega="gw-mega-kit">The kit</button>
+            <div class="gw-mega" id="gw-mega-kit" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">See it</p>
+                  <a class="gw-mega__link" href="index.html#components-h"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg></span><span><b>Components</b><i>Buttons, chips, cards, tables</i></span></a>
+                  <a class="gw-mega__link" href="index.html#features-h"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>Sections</b><i>Hero, features, pricing, FAQ</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Brands</p>
+                  <a class="gw-mega__link" href="theme-example.html"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z"/></svg></span><span><b>Accent only</b><i>A brand that changed one colour</i></span></a>
+                  <a class="gw-mega__link" href="#profiles"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/></svg></span><span><b>All three profiles</b><i>This page</i></span></a>
+                </div>
+                <a class="gw-mega__feature" href="#profiles"><b>Three named choices</b><i>Action colour, corners and header. Chosen once per site.</i><span class="gw-link gw-link--arrow">See the profiles</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="index.html">Default demo</a></li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="theme-example.html">Accent only</a></li>
+        </ul>
+      </nav>
+      <div class="gw-header__actions">
+        <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+        <a class="gw-btn gw-btn--secondary gw-btn--sm" href="index.html">Default demo</a>
+        <a class="gw-btn gw-btn--sm" href="#profiles">See the profiles</a>
+        <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+      </div>
+    </div>
+    <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
+      <nav class="gw-wrap" aria-label="Main, mobile">
+        <details class="gw-mobile-menu__group">
+          <summary>The kit</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="index.html#components-h">Components</a></li>
+            <li><a class="gw-mobile-menu__link" href="index.html#features-h">Sections</a></li>
+            <li><a class="gw-mobile-menu__link" href="#profiles">All three profiles</a></li>
+          </ul>
+        </details>
+        <a class="gw-mobile-menu__top" href="index.html">Default demo</a>
+        <a class="gw-mobile-menu__top" href="theme-example.html">Accent only</a>
+        <div class="gw-mobile-menu__actions">
+          <a class="gw-btn gw-btn--block" href="#profiles">See the profiles</a>
+          <a class="gw-btn gw-btn--secondary gw-btn--block" href="index.html">Default demo</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <main id="main">
+    <section class="gw-hero" aria-labelledby="hero-h">
+      <div class="gw-hero__wash" aria-hidden="true"></div>
+      <div class="gw-wrap">
+        <p class="gw-label">Brand profiles</p>
+        <h1 id="hero-h"><span class="gw-dim">The same kit, three named choices.</span> Still one family.</h1>
+        <p class="gw-lead">This brand fills its primary button with its accent, rounds its corners one step and floats its header as a card. Everything else is the kit as it ships.</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="#profiles">See the three profiles</a>
+          <a class="gw-btn gw-btn--secondary" href="index.html">Open the default demo</a>
+        </div>
+      </div>
+    </section>
+    <section class="gw-section gw-section--soft" id="profiles" aria-labelledby="profiles-h">
+      <div class="gw-wrap">
+        <div class="gw-section__head">
+          <p class="gw-label">Three knobs</p>
+          <h2 id="profiles-h"><span class="gw-dim">Set once for the site.</span> Every component follows.</h2>
+          <p class="gw-lead">Each knob is a named profile, not a free value. A brand picks one of each, and the kit does the rest.</p>
+        </div>
+        <div class="gw-grid--3">
+          <div class="gw-card">
+            <h3>Action colour</h3>
+            <p>The primary button takes the accent. Its label must reach 4.5:1 on the fill in light and dark, or the check fails.</p>
+          </div>
+          <div class="gw-card">
+            <h3>Soft corners</h3>
+            <p>Actions 12px, cards 20px, panels 24px. Chips stay pills, and nothing else is allowed in between.</p>
+          </div>
+          <div class="gw-card">
+            <h3>Floating header</h3>
+            <p>An inset card over a light blur, from 1080px. The same bar and mega menu; phones keep the flat bar.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="gw-section" aria-labelledby="shapes-h">
+      <div class="gw-wrap gw-split">
+        <div>
+          <p class="gw-label">Radius profiles</p>
+          <h2 id="shapes-h">Two sets of corners, nothing in between.</h2>
+          <p class="gw-lead">Tight is the default. Soft rounds every action, card and panel by one step.</p>
+          <div class="gw-actions">
+            <button class="gw-chip" type="button" aria-pressed="false">Tight</button>
+            <button class="gw-chip" type="button" aria-pressed="true">Soft</button>
+            <span class="gw-badge gw-badge--accent">Chosen on the page</span>
+          </div>
+          <div class="gw-actions">
+            <a class="gw-btn" href="#rules-h">See what stays fixed</a>
+            <a class="gw-btn gw-btn--ghost" href="theme-example.html">Accent only</a>
+          </div>
+        </div>
+        <div class="gw-table" role="region" aria-labelledby="shapes-h" tabindex="0">
+          <table>
+            <thead><tr><th scope="col">Profile</th><th scope="col">Action</th><th scope="col">Card</th><th scope="col">Panel</th></tr></thead>
+            <tbody>
+              <tr><th scope="row">Tight, the default</th><td>8px</td><td>12px</td><td>16px</td></tr>
+              <tr><th scope="row">Soft</th><td>12px</td><td>20px</td><td>24px</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+    <section class="gw-section gw-section--soft" aria-labelledby="rules-h">
+      <div class="gw-wrap gw-wrap--narrow">
+        <div class="gw-section__head">
+          <p class="gw-label">Still fixed</p>
+          <h2 id="rules-h"><span class="gw-dim">Three knobs, no more.</span> The rest is the kit's.</h2>
+        </div>
+        <div class="gw-faq">
+          <details class="gw-faq__item"><summary>Can a brand choose its own radius?</summary><p>No. It picks tight or soft. A radius of its own, or a token it redefines, is reported by the check.</p></details>
+          <details class="gw-faq__item"><summary>Can a heading use the accent?</summary><p>No. Words in a heading stay ink or muted, never the accent or a gradient. Bands are white, soft grey or night, never the accent. Labels stay in sentence case.</p></details>
+          <details class="gw-faq__item"><summary>What changes on a phone?</summary><p>Nothing. Below 1080px the floating header is the flat bar, and the menu opens the same way.</p></details>
+          <details class="gw-faq__item"><summary>What if a visitor turns transparency off?</summary><p>The header becomes a solid card. A browser that cannot blur gets the same solid card.</p></details>
+        </div>
+      </div>
+    </section>
+    <section class="gw-section gw-band--night" aria-labelledby="cta-h">
+      <div class="gw-wrap gw-cta">
+        <p class="gw-label">Night band</p>
+        <h2 id="cta-h">The accent button keeps its contrast at night.</h2>
+        <p class="gw-lead">In a night band and in dark mode it takes the dark accent with dark words, also checked at 4.5:1.</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="theme-example.html">Open the accent example</a>
+          <a class="gw-btn gw-btn--secondary" href="index.html">Open the default demo</a>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="gw-footer">
+    <div class="gw-wrap">
+      <div class="gw-footer__bottom">
+        <span>Website UI kit demo. Sample text.</span>
+        <ul aria-label="Demo pages">
+          <li><a href="index.html">Default demo</a></li>
+          <li><a href="theme-example.html">Accent only</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+  <script src="../js/website.js" defer></script>
+</body>
+</html>

package/docs/components.md CHANGED Viewed

@@ -8,6 +8,10 @@ Conventions: kit classes start with `gw-`, variants are `--name`, parts are `__n
 `is-*`. Never style a `.gw-*` class in your site's CSS: if the kit's version is wrong for you, that is a gap
 (`AGENTS.md` section 9).
+Radii and the button fill follow the site's brand profiles (`docs/theming.md`): below, "radius 8 / 12 / 16" is the
+default `tight` profile, and `soft` makes them 12 / 20 / 24; "ink fill" is the default `ink` action profile, and
+`data-gw-action="accent"` makes it the accent.
 Spacing between the children of text blocks is automatic: inside `.gw-section__head`, the hero, a split column,
 `.gw-cta`, `.gw-card`, `.gw-feature` and `.gw-plan`, each child is 16px below the previous one, a `.gw-actions` row
 32px, a `.gw-list--check` 24px. Do not add margins to fix rhythm; reorder or remove content instead.
@@ -86,7 +90,8 @@ Don't: more than three night bands on a page (the closing CTA does not count), o
 ### Buttons `.gw-btn`
-40px tall, radius 8, 14px/600, sentence case, ink fill. Variants: `--secondary` (hairline, transparent), `--ghost`
+40px tall, the action radius (8, 12 in `soft`), 14px/600, sentence case, the action colour as fill: ink, or the
+brand's accent with `--gw-on-accent` words under `data-gw-action="accent"` (one colour on the whole site). Variants: `--secondary` (hairline, transparent), `--ghost`
 (no frame), `--on-night` (light fill for a dark surface that is not a `.gw-band--night`), `--sm` (36px, with a 44px
 hit area), `--lg` (48px, 16px type), `--block` (full width). On touch screens every button is at least 44px tall and
 its label may wrap. Inside a night band the default button turns light by itself.
@@ -98,7 +103,8 @@ its label may wrap. Inside a night band the default button turns light by itself
 </div>
 ```
-Pressed (`:active`): the ink one step darker (the hover ink), and nothing moves; `--secondary` takes the soft tint and
+Pressed (`:active`): the fill one step stronger (the hover fill: the darker ink, or `--gw-accent-strong`), and
+nothing moves; `--secondary` takes the soft tint and
 `--ghost` the hairline tint.
 **Loading.** While a `<button>` waits on the network (a form sent, an audit started), set `aria-busy="true"` on it and
@@ -116,7 +122,8 @@ button.setAttribute('aria-busy', 'true');   // the request leaves
 button.removeAttribute('aria-busy');        // the answer came
 ```
-Don't: an accent, gradient or wash fill; pill-shaped buttons; uppercase; two filled buttons side by side (one
+Don't: a fill of your own (the accent comes only from the action profile, set on `<html>`), a gradient or a wash; a
+raised or inset shadow; pill-shaped buttons; uppercase; two filled buttons side by side (one
 `.gw-btn` per view, the second is `--secondary` or a link); a `<div>` with a click handler instead of `<a>`/`<button>`;
 a loading class, your own spinner or `disabled` on a waiting button (`check` reports `busy-button`: `disabled` throws
 the keyboard focus to the top of the page); a "Loading…" label in place of the real one.
@@ -136,7 +143,7 @@ Don't: use a chip as the page's action; square it; more than about six in a row.
 One choice out of two to four, shown as one group: Monthly / Yearly on a pricing page, Run it yourself / We run it for
 you. It is a radio group: one Tab stop, the arrow keys (and Home, End) move and choose, a click or Space chooses. The
-look is the dashboard's (`@gemboss/ui` `.ui-seg`): one hairline group, radius 8, a hairline between options, the chosen
+look is the dashboard's (`@gemboss/ui` `.ui-seg`): one hairline group, the action radius, a hairline between options, the chosen
 option on the accent tint, so it follows a brand's accent. 40px tall; on touch screens every option is at least 44px
 and its label may wrap. `--block` stretches it to the row and shares the width equally.
@@ -176,7 +183,7 @@ Don't: make a badge clickable; write a sentence in it; use success or warning fo
 ### Cards `.gw-card`
-A white box with a 1px hairline, radius 12, the resting shadow `--gw-shadow` (as the dashboard's cards), 24px padding
+A white box with a 1px hairline, the card radius (12, 20 in `soft`), the resting shadow `--gw-shadow` (as the dashboard's cards), 24px padding
 (32px from 768px). It sits: no hover lift. `--soft` is a tint and has no shadow.
 Variants: `--soft` (on `--gw-bg-soft`), `--link` (the whole card is one `<a>`; the border darkens on hover).
@@ -188,8 +195,8 @@ Variants: `--soft` (on `--gw-bg-soft`), `--link` (the whole card is one `<a>`; t
 </a>
 ```
-Don't: put links or buttons inside a `--link` card (one card, one destination); a bigger shadow or a hover lift; radius
-other than 12 (16 is for large panels: plans, quote).
+Don't: put links or buttons inside a `--link` card (one card, one destination); a bigger shadow or a hover lift; a
+radius of your own (cards take the card radius, plans and the quote the panel radius, both from the profile).
 ### Window `.gw-window`
@@ -238,7 +245,7 @@ Don't: more than five or six items; full paragraphs as items.
 ### Table `.gw-table`
-A wrapper around a plain `<table>`: hairline, radius 12, and it scrolls inside its own box when the table is wider
+A wrapper around a plain `<table>`: hairline, the card radius, and it scrolls inside its own box when the table is wider
 than the screen. `--compare`: centred values, a 640px minimum width and a sticky first column, for plan comparisons.
 Give the wrapper `role="region"`, an accessible name and `tabindex="0"` so keyboard users can scroll it.
@@ -275,10 +282,11 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
 |---|---|
 | `.gw-announce` | optional one-sentence bar above the header, with one link |
 | `.gw-header` (`data-gw-header`) | the sticky, flat 64px bar with one hairline; `.is-scrolled` darkens the hairline |
+| `.gw-header--float` | with `.gw-header`, a brand's header profile: from 1080px the same bar as an inset card (panel radius, the surface at 85% over a blur, one hairline, the raised shadow, 16px from the top); the flat bar below 1080px; solid under `prefers-reduced-transparency` |
 | `.gw-header__bar` | the row inside (`.gw-wrap gw-header__bar`) |
 | `.gw-brand`, `__mark`, `__name` | logo (26px) and name, linking home |
 | `.gw-nav`, `__list`, `__item`, `__trigger`, `__link` | the desktop nav (from 1080px); `__trigger` opens a mega panel, `__link` is a plain link; `aria-current="page"` underlines it in the accent |
-| `.gw-mega`, `__grid`, `__col`, `__heading`, `__link`, `__icon`, `__feature` | a floating card centred under the bar (radius 20, raised shadow, as on gemboss.ai): columns of links with an icon and one line each, and at most one feature card |
+| `.gw-mega`, `__grid`, `__col`, `__heading`, `__link`, `__icon`, `__feature` | a floating card centred under the bar (the popover radius: 20, 24 in `soft`; raised shadow, as on gemboss.ai): columns of links with an icon and one line each, and at most one feature card |
 | `.gw-header__actions` | theme toggle, Sign in, Book a demo, Start free, menu button |
 | `.gw-header__signin` | with `.gw-nav__link`: hidden below 1080px (it moves into the mobile menu) |
 | `.gw-theme-toggle` | icon button (`data-gw-theme-toggle`), 40px, 44px on touch |
@@ -292,7 +300,8 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
 Header buttons: the secondary one shows from 768px, the primary one from 480px; below that they live in the mobile
 menu. Full markup: `templates/header.html`.
-Don't: a floating, rounded or blurred header; more than five top-level items; a second filled button in the bar; a
+Don't: a floating, rounded or blurred header of your own (the one floating header is `.gw-header--float`, chosen
+for the whole site); more than five top-level items; a second filled button in the bar; a
 hero pulled up under the header.
 ## Footer
@@ -361,7 +370,7 @@ The HTML a CMS or a markdown renderer writes needs no classes. Inside `.gw-prose
 | `code` | a tint chip in `--gw-font-mono` (16px, 14px in `--sm`) that wraps on a phone; in a table it stays whole |
 | `pre` | a soft box, 14px mono, that scrolls sideways inside itself |
 | `table` | as a direct child: the `.gw-table` look, and it scrolls inside its own box when it is wider than the column |
-| `img`, `figure`, `figcaption` | images radius 12; a caption 14px muted, 12px under its figure |
+| `img`, `figure`, `figcaption` | images take the card radius; a caption 14px muted, 12px under its figure |
 | `hr`, `a` | a hairline with 32px of air; links in the accent, underlined |
 Kit components inside the prose keep their own look (`.gw-table`, `.gw-window`, `.gw-list--check`, `.gw-quote`,
@@ -394,6 +403,12 @@ them in order); a page without `.gw-prose` that styles its articles in site CSS
 Put it on a block (a grid, a list, a window), not on each card in a grid. Don't use it on the hero or anything in
 the first screen, and don't animate anything but `transform` and `opacity`.
+## Additions to the markup contract in 0.3.0
+The brand profiles: `data-gw-action="ink|accent"` and `data-gw-radius="tight|soft"` on `<html>`, and
+`.gw-header--float` on the header (`docs/theming.md`). Tokens: `--gw-radius-popover` (the mega menu), `--gw-radius-24`,
+`--gw-header-gap`, `--gw-header-surface`, `--gw-header-blur`. No markup of 0.2.0 changes.
 ## Additions to the markup contract in 0.2.0
 The button states (`:active`, `[aria-busy="true"]`), `.gw-segmented` (+ `--block`) with its `data-gw-segmented` /

package/docs/markup-contract.md CHANGED Viewed

@@ -12,7 +12,9 @@ BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
 ## Page
 ```html
-<html lang="en" data-theme?="light|dark">     <!-- absent = follow the system; the toggle sets it -->
+<html lang="en" data-theme?="light|dark" data-gw-action?="accent" data-gw-radius?="soft">
+<!-- data-theme absent = follow the system; the toggle sets it. data-gw-action, data-gw-radius: brand profiles (0.3.0),
+     absent = ink, tight -->
 <body class="gw-page">
   <a class="gw-skip" href="#main">Skip to content</a>
   <div class="gw-announce" role="region" aria-label="Announcement">…<a href="…">…</a></div>   <!-- optional -->
@@ -25,7 +27,7 @@ BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
 ## Header
 ```html
-<header class="gw-header" data-gw-header>
+<header class="gw-header gw-header--float?" data-gw-header>   <!-- --float: a brand's header profile (0.3.0) -->
   <div class="gw-wrap gw-header__bar">
     <a class="gw-brand" href="/"><img class="gw-brand__mark" src="…" alt="" width="26" height="26"><span class="gw-brand__name">GemBoss</span></a>
     <nav class="gw-nav" aria-label="Main">
@@ -73,10 +75,19 @@ Script behaviour:
   2.5s, or if IntersectionObserver is missing, all get `.is-in`. Under `prefers-reduced-motion` the CSS shows them
   without motion.
 - **Header**: `.is-scrolled` on `[data-gw-header]` once the page scrolled more than 8px (the CSS may use it for the
-  hairline only; the bar does not change height or colour).
+  hairline only; the bar does not change height or colour). The floating header needs nothing more from the script:
+  it is the same element with one more class.
 - **Current page**: the script marks `aria-current="page"` on `.gw-nav__link` / `.gw-mega__link` whose `href`
   pathname equals `location.pathname` (when the markup did not already).
+## Brand profiles (0.3.0)
+- `data-gw-action` and `data-gw-radius` sit on `<html>` only, with a name from `system.json` `profiles` (`ink` or
+  `accent`, `tight` or `soft`); absent means the first. The CSS reads them (`css/tokens.css`), the script does not.
+- `.gw-header--float` sits on the `<header class="gw-header">` itself, next to `gw-header`.
+- `check` reports any other name or place (`profile-unknown`, `header-float-markup`) and, with `accent`, words on the
+  button below 4.5:1 (`action-contrast`).
 ## Segmented control (0.2.0)
 ```html
@@ -112,14 +123,14 @@ Script behaviour:
 | class | what |
 |---|---|
-| `.gw-btn` (+ `--secondary`, `--ghost`, `--on-night`, `--sm`, `--lg`, `--block`) | actions; rectangle 8px, ink fill by default; `:active` pressed, `[aria-busy="true"]` loading (script above) |
+| `.gw-btn` (+ `--secondary`, `--ghost`, `--on-night`, `--sm`, `--lg`, `--block`) | actions; a rectangle with the action radius, the action colour as fill (ink, or the accent under `data-gw-action="accent"`); `:active` pressed, `[aria-busy="true"]` loading (script above) |
 | `.gw-link` (+ `--arrow`) | inline text link in the accent; `--arrow` adds → that moves 2px on hover |
 | `.gw-label` | the label above a heading: 13px muted, 8px accent square before it |
 | `.gw-dim` | the muted first sentence inside a headline |
 | `.gw-chip` (+ `.is-active`) | selectable token, pill |
 | `.gw-segmented` (+ `--block`) | one choice out of two to four (script above) |
 | `.gw-badge` (+ `--accent`, `--success`, `--warning`) | small status, pill |
-| `.gw-card` (+ `--soft`, `--link`) | white box, 1px hairline, radius 12; `--link` makes the whole card an `<a>` |
+| `.gw-card` (+ `--soft`, `--link`) | white box, 1px hairline, the card radius; `--link` makes the whole card an `<a>` |
 | `.gw-window` (+ `__bar`, `__body`, `__caption`) | a framed screenshot/mock-up, like a browser or app window; `__caption` (last child) says what its numbers are: "Illustrative data." or their source |
 | `.gw-icon` | 20px inline stroke SVG wrapper |
 | `.gw-list--check` | list with check marks |

package/docs/philosophy.md CHANGED Viewed

@@ -7,26 +7,31 @@ spirit. Each rule came from measuring real pages, not from taste alone.
 A visitor crosses from the website into the product in one click. If the two disagree (a cream site and a white app,
 a purple button outside and a black one inside), the seam is exactly where trust is decided. So the website uses the
-product's language: white canvas, ink actions, one accent, hairlines, almost no shadow.
+product's language: white canvas, the product's action colour, one accent, hairlines, almost no shadow.
-## The thing you click is ink
+## The thing you click is one colour: the product's
-A page has one thing it wants you to do. Near-black is the strongest mark on white and stays readable in every
-light; the accent colour is louder but weaker as an instruction, and a page full of accent-coloured buttons has no
-hierarchy left. The accent marks where you are and what is interactive in text: links, focus, the active item, the
-small square before a label.
+A page has one thing it wants you to do, and the button that does it looks the same on every page. For GemBoss that
+is near-black ink, as in its dashboard: the strongest mark on white, readable in every light. Since 0.3.0 a brand
+whose product clicks in its accent (GemPages' product uses blue primary buttons) may do the same on its site, with
+the `accent` action profile: the site and the product still speak one language. It is a mode, not a colour picked
+per button; its words must reach 4.5:1 on it, and it never gains a shadow or a gradient. Everywhere else the accent
+marks where you are and what is interactive in text: links, focus, the active item, the small square before a
+label. It never colours the words of a heading or a whole section band: that makes a page louder, not clearer.
 ## Shapes carry meaning
 Rectangles act, pills choose. When every button is a rectangle and every chip is a pill, people stop reading the
-shape and read the words. A radius scale with seven steps means two cards side by side never differ by 2px, which is
-the kind of drift that makes a page feel assembled rather than designed.
+shape and read the words. A site has one set of corners, a named profile (`tight` for GemBoss, `soft` for GemPages,
+as in each product), so two cards side by side never differ by 2px, which is the kind of drift that makes a page feel
+assembled rather than designed. Profiles, not free values: a brand can look like itself without inventing a radius.
 ## Separation by line and space, light only at rest
 A shadow says "this floats above". Cards on a page do not float; they sit on it. A 1px hairline and the dashboard's
 resting shadow (two faint pixels) separate a card and keep the page calm; nothing lifts on hover. Larger light is
-spent where it means something: a popover such as the mega menu, an illustration that lights itself.
+spent where it means something: a popover such as the mega menu, the floating header a brand may choose (it does
+float), an illustration that lights itself.
 ## Scales instead of eyeballing

package/docs/theming.md CHANGED Viewed

@@ -1,27 +1,37 @@
 # Theming for a brand other than GemBoss
-A GemCommerce brand (GemPages, Gemians…) uses the kit as it is and changes four things: **its accent colour**, **the
-wash hues**, **its logo** and **its favicon**. Everything else stays the kit's: the shapes, the scales, the ink
-buttons, the white canvas, the type. That is what makes the sites look like one family, and it is why a site built
-by someone with no design training still looks careful.
+A GemCommerce brand (GemPages, Gemians…) uses the kit as it is and chooses six things, **and nothing else**:
-Working example: `demo/theme-example.html` (the demo's hero, buttons and cards with a GemPages-style blue).
+1. **the accent variables** (eight, light and dark),
+2. **the wash hues** (only if the brand has its own),
+3. **the logo** (and the favicon),
+4. **the action colour mode**: `data-gw-action="ink|accent"` on `<html>`,
+5. **the radius profile**: `data-gw-radius="tight|soft"` on `<html>`,
+6. **the header style**: the flat bar, or `.gw-header--float`.
-## What you may override
+The last three are **named profiles**, not values: a brand picks one of a short list, once for the whole site, and
+every component follows. Everything else stays the kit's: the neutrals, the type, the spacing, the shadows, the
+widths. That is what makes the sites look like one family, and why a site built by someone with no design training
+still looks careful. `npx gemboss-website check` reports anything outside this set.
+Working examples: `demo/theme-example.html` (the accent only) and `demo/brand-profiles.html` (a GemPages-style brand:
+the accent, all three profiles and the floating header).
+## 1 to 3. Accent, wash, logo
 Put these in the site's own CSS (`site.css`, linked **after** `website.css`), in **one `:root {}` block**, and nowhere
 else.
 | variable | what it is | GemBoss value |
 |---|---|---|
-| `--gw-accent-light` | the accent on light pages: links, focus ring, active item, label square, chart line | `#5661f5` |
-| `--gw-accent-strong-light` | the accent on hover and as text on `--gw-accent-soft` | `#3a44de` |
+| `--gw-accent-light` | the accent on light pages: links, focus ring, active item, label square, chart line; the primary button's fill under `data-gw-action="accent"` | `#5661f5` |
+| `--gw-accent-strong-light` | accent text (links, the active item), and the accent button's hover and pressed fill | `#3a44de` |
 | `--gw-accent-soft-light` | the accent's tint: active chip, chosen segmented option, accent badge, icon hover | `#eef0fe` |
-| `--gw-on-accent-light` | text on a solid accent (rare; the kit never fills a button with it) | `#ffffff` |
+| `--gw-on-accent-light` | words on a solid accent: the accent button's label | `#ffffff` |
 | `--gw-accent-dark` | the accent in dark mode **and inside night bands** | `#7c84ff` |
-| `--gw-accent-strong-dark` | its hover / strong form | `#a3a9ff` |
+| `--gw-accent-strong-dark` | its text and hover form | `#a3a9ff` |
 | `--gw-accent-soft-dark` | its tint | `#1f2140` |
-| `--gw-on-accent-dark` | text on it | `#0d0d12` |
+| `--gw-on-accent-dark` | words on it | `#0d0d12` |
 | `--gw-wash-pink`, `--gw-wash-violet`, `--gw-wash-sky`, `--gw-wash-mint` | the secondary hues of the hero wash and illustrations | `#ff6f5e`, `#7c8af7`, `#43b0ff`, `#1fcf9f` |
 Why the `-light` / `-dark` names and not `--gw-accent` itself: the kit sets `--gw-accent` from these in four places
@@ -33,45 +43,86 @@ The logo and the favicon are files, not variables: the `<img class="gw-brand__ma
 `alt=""` because the name is written next to it) and the `<span class="gw-brand__name">` in the header and footer
 partials, and `<link rel="icon">` in the page head.
+## 4 to 6. The three profiles
+Chosen once, in the page skeleton (the layout or partial every page shares). The first of each is the default and
+needs no markup, so a GemBoss page, and every page written for 0.2.0, stays exactly as it was.
+```html
+<html lang="en" data-gw-action="accent" data-gw-radius="soft">
+…
+<header class="gw-header gw-header--float" data-gw-header> …the same header markup… </header>
+```
+| knob | profiles | what changes |
+|---|---|---|
+| action colour, `data-gw-action` on `<html>` | `ink` (GemBoss, default), `accent` | `accent`: the primary `.gw-btn` is filled with `--gw-accent`, its words are `--gw-on-accent`, hover and pressed are `--gw-accent-strong`. In dark mode and night bands it takes the `-dark` family. Secondary, ghost and on-night buttons do not change. |
+| radius, `data-gw-radius` on `<html>` | `tight` (GemBoss, default): 8 action, 12 card, 16 panel, 20 mega menu; `soft` (GemPages): 12, 20, 24, 24 | every button, control, card, window, table, FAQ, plan, quote and the mega menu. Chips and badges stay pills. |
+| header, a class on the `<header>` | flat (default), `.gw-header--float` | from 1080px the bar becomes an inset card: the panel radius of the profile (16 tight, 24 soft), the surface at 85% over a 10px blur, one hairline, the raised shadow, 16px from the top. Same bar, same mega menu, same script; below 1080px it is the flat bar, so the phone menu is unchanged. Solid for a visitor who asks for less transparency, and in a browser that cannot blur. |
+Why the action colour is a mode and not a colour of its own: the button stays one colour on the whole site, and that
+colour is a family the brand already checked for contrast. "Site and product speak one language": GemBoss's dashboard
+clicks in ink, so gemboss.ai does; GemPages' product uses blue primary buttons, so a GemPages site may too. Still no
+raised or inset shadow on a button, no gradient, no wash.
+Why the header uses the panel radius: it is the largest piece of chrome on the page, so it follows the profile with
+the panels; in `tight` that is the 16px the header was designed with.
 ## What you may not change
 - **Neutrals**: `--gw-bg`, `--gw-bg-soft`, `--gw-surface`, `--gw-ink`, `--gw-ink-2`, `--gw-muted`, `--gw-line`,
   `--gw-line-strong`, and the night colours. No cream or grey page, no brand-coloured ink.
-- **The action**: `--gw-action`, `--gw-action-hover`, `--gw-on-action`. Buttons stay ink. Your accent never fills a
-  button, a section or a header.
+- **The action tokens**: `--gw-action`, `--gw-action-hover`, `--gw-on-action`. Choose the `accent` profile instead;
+  a colour set here is not checked and does not follow dark mode or night bands.
 - **State**: `--gw-success`, `--gw-warning` and their tints. Green and amber mean state on every GemCommerce site.
-- **Scales and shapes**: type sizes and weights, spacing, radii, shadows, widths, the header height, the
-  font family. No rounder buttons, no bigger shadows, no other font.
+- **Scales and shapes**: type sizes and weights, spacing, the radius tokens (`--gw-radius-*`: choose a profile), shadows,
+  widths, the header height, the font family. No pill buttons, no bigger shadows, no other font.
 - **Kit classes**: never restyle a `.gw-*` class. If the kit cannot do what your brand needs, that is a gap
   (`AGENTS.md` section 9), not a theme.
-`npx gemboss-website check` reports colours outside the tokens, overrides of `.gw-*` classes and accent-filled
-buttons.
+### Still forbidden with every profile
+- **Gradient or accent-coloured words in a heading.** A heading is ink, with a muted first sentence (`.gw-dim`).
+- **Accent-coloured section bands.** A section is white, `--gw-bg-soft` or a night band; the accent only lights a
+  night band's top edge.
+- **All-caps labels.** Labels are sentence case, muted, led by the 8px accent square.
+These make a page louder without making it clearer, and `check` reports the last one (`uppercase-label`) and any
+button filled from site CSS (`accent-button`).
+`check` also reports: colours outside the tokens, a redefined kit token (`token-redefined`, including the radius and
+action tokens), overrides of `.gw-*` classes, an unknown profile or one set on another element than `<html>`
+(`profile-unknown`), `.gw-header--float` anywhere but the header itself (`header-float-markup`), and, on a page with
+`data-gw-action="accent"`, accent button words below 4.5:1 (`action-contrast`).
 ## A full example
 ```css
-/* site.css, linked after website.css. The whole theme of a GemPages-style site. */
+/* site.css, linked after website.css. The whole CSS of a GemPages-style brand. */
 :root {
-  /* accent, light pages: #1e5eff on #ffffff is 5.1:1 */
-  --gw-accent-light: #1e5eff;
-  --gw-accent-strong-light: #1547d1;
-  --gw-accent-soft-light: #eaf0ff;
+  /* light pages. #3c67ff fills the accent button: white words on it are 4.58:1 */
+  --gw-accent-light: #3c67ff;
+  /* EXAMPLE, not confirmed by the GemPages team: accent text needs a darker step, because #3c67ff is 4.13:1 on
+     --gw-bg-soft. #2f52d6 is 6.36:1 on white and 5.73:1 on --gw-bg-soft, and the button's hover. */
+  --gw-accent-strong-light: #2f52d6;
+  --gw-accent-soft-light: #eaefff;
   --gw-on-accent-light: #ffffff;
-  /* accent, dark mode and night bands: #6b98ff on #0d0d12 is 7.0:1 */
-  --gw-accent-dark: #6b98ff;
-  --gw-accent-strong-dark: #a8c0ff;
+  /* dark mode and night bands: #7c9bff is 7.37:1 on #0d0d12, and #0d0d12 words on it are 7.37:1 */
+  --gw-accent-dark: #7c9bff;
+  --gw-accent-strong-dark: #a9beff;
   --gw-accent-soft-dark: #16213d;
   --gw-on-accent-dark: #0d0d12;
   /* wash: only if the brand has its own secondary hues; otherwise leave the kit's */
-  --gw-wash-violet: #7b9cff;
 }
 ```
 ```html
+<html lang="en" data-gw-action="accent" data-gw-radius="soft">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 …
-<a class="gw-brand" href="/"><img class="gw-brand__mark" src="/logo-mark.svg" alt="" width="26" height="26"><span class="gw-brand__name">GemPages</span></a>
+<header class="gw-header gw-header--float" data-gw-header>
+  <div class="gw-wrap gw-header__bar">
+    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="/logo-mark.svg" alt="" width="26" height="26"><span class="gw-brand__name">GemPages</span></a>
 ```
 ## Check the contrast before you ship
@@ -87,10 +138,15 @@ So:
 3. `--gw-accent-dark` and `--gw-accent-strong-dark` on `#0d0d12` (dark page) and on `#0c0e14` (night band): at
    least 4.5:1.
 4. `--gw-accent-strong-dark` on `--gw-accent-soft-dark`: at least 4.5:1.
+5. **With `data-gw-action="accent"`**: `--gw-on-accent-light` on `--gw-accent-light` and on
+   `--gw-accent-strong-light`, and `--gw-on-accent-dark` on `--gw-accent-dark` and on `--gw-accent-strong-dark`: at
+   least 4.5:1. `check` computes these four and fails the site below it (write the colours as `#rrggbb`); the kit's
+   build does the same for its own colours.
 Any WCAG contrast checker works (paste the two hex values). A bright brand colour (yellow, light green, cyan) almost
 never passes on white: darken it for `-light` and keep the bright one for `-dark`. If you cannot get 4.5:1 without
 changing the brand colour beyond recognition, keep the kit's accent and use the brand colour only in the logo and
-illustrations.
+illustrations, and keep the ink button.
-Then open the site in light and dark (the toggle in the header), at 320px and at 1366px, and look at a night band.
+Then open the site in light and dark (the toggle in the header), at 320px and at 1366px, and look at a night band and
+at the header while the page scrolls under it.

package/js/website.js CHANGED Viewed

@@ -2,7 +2,7 @@
 (function () {
   'use strict';
   if (window.gwWebsite) return;
-  window.gwWebsite = { version: '0.2.0' };
+  window.gwWebsite = { version: '0.3.0' };
   var doc = document, root = doc.documentElement;
   function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
   function watch(m, fn) { if (m.addEventListener) m.addEventListener('change', fn); }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
   "license": "UNLICENSED",
   "type": "module",