@bongos/core 1.24.54 → 1.24.56
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.
- package/.bongos-core.json +65 -35
- package/docs/copy-inventory.md +16 -16
- package/docs/copy-registry.json +17 -17
- package/docs/module-api-changelog.md +4 -0
- package/docs/page-readings.json +18 -18
- package/modules/hall-ui/public/approval-queue.css +9 -9
- package/modules/hall-ui/public/atlas.css +5 -1
- package/modules/hall-ui/public/atlas.js +14 -11
- package/modules/hall-ui/public/city-draw.js +14 -14
- package/modules/hall-ui/public/sky-draw.js +24 -6
- package/modules/hall-ui/public/sky-interaction.js +1 -1
- package/modules/hall-ui/public/sky-panel.js +1 -1
- package/modules/hall-ui/public/studio.css +22 -22
- package/modules/hall-ui/public/thinking.css +46 -48
- package/modules/hall-ui/public/tweak-editor.css +18 -18
- package/modules/hall-ui/public/welcome-boot.css +5 -8
- package/modules/hall-ui/public/welcome-boot.js +11 -15
- package/modules/ui-design/public/brand.css +168 -0
- package/modules/ui-design/public/brand.html +162 -0
- package/modules/ui-design/public/brand.states.json +35 -0
- package/modules/ui-design/scripts/gen-design-reference.js +354 -0
- package/package-lock.json +2 -2
- package/package.json +1 -1
- package/release-notes.json +12 -0
- package/src/module-api.js +1 -1
- package/src/platform-server.js +18 -0
- package/tests/design_reference.mjs +175 -0
- package/tests/hall_catalog_world.mjs +7 -2
- package/tests/hall_city.mjs +5 -4
- package/tests/hall_private_palettes.mjs +148 -0
- package/tests/hall_sky.mjs +29 -32
- package/tests/hall_street.mjs +3 -2
- package/tests/helpers.mjs +25 -1
- package/tests/welcome_boot.mjs +1 -1
- package/tests/welcome_boot_browser.mjs +1 -1
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>{{productName}} — Design system</title>
|
|
7
|
+
<meta name="description" content="The colours, type, spacing, corners, motion and shared components every {{productName}} page is drawn from.">
|
|
8
|
+
<!-- GENERATED by node modules/ui-design/scripts/gen-design-reference.js (task 1005083); do not edit by hand.
|
|
9
|
+
Every value is read from its source file; every component is drawn by the hall's shared rules.
|
|
10
|
+
kit-ignore: tell: tiny type (the type scale shows its smallest step at its own size) -->
|
|
11
|
+
<link rel="stylesheet" href="/modules/hall-ui/public/style.css">
|
|
12
|
+
<link rel="stylesheet" href="/modules/ui-design/public/brand.css">
|
|
13
|
+
</head>
|
|
14
|
+
<body data-page="brand">
|
|
15
|
+
<header class="ref-head">
|
|
16
|
+
<a class="ref-head__brand" href="/"><svg class="ref-head__mark" viewBox="0 0 200 200" aria-hidden="true"><use href="/modules/ui-design/public/brand/mark.svg#mark"/></svg><span>cloud bongos</span></a>
|
|
17
|
+
</header>
|
|
18
|
+
<main class="ref-main">
|
|
19
|
+
<h1 class="ref-title">Design system</h1>
|
|
20
|
+
<p class="ref-lede">The colours, type, spacing, corners, motion and shared components every {{productName}} page is drawn from. This page is generated from those same files, so it cannot drift from them. It follows your device’s light or dark setting; each value is shown for both.</p>
|
|
21
|
+
<nav class="ref-toc" aria-label="On this page">
|
|
22
|
+
<a href="#ref-logo">Logo</a><a href="#ref-colour">Colour</a><a href="#ref-type">Type</a><a href="#ref-space">Spacing</a><a href="#ref-shape">Corners</a><a href="#ref-motion">Motion</a><a href="#ref-components">Components</a>
|
|
23
|
+
</nav>
|
|
24
|
+
<section class="scroll ref-sec" id="ref-logo" aria-labelledby="ref-logo-h">
|
|
25
|
+
<h2 class="scroll__h" id="ref-logo-h">Logo and name</h2>
|
|
26
|
+
<p class="scroll__lede">The mark is one file every page draws from. The ring and the planet take the ink; the moon takes the accent.</p>
|
|
27
|
+
|
|
28
|
+
<div class="ref-lockup">
|
|
29
|
+
<svg class="ref-lockup__mark" viewBox="0 0 200 200" aria-hidden="true"><use href="/modules/ui-design/public/brand/mark.svg#mark"/></svg>
|
|
30
|
+
<span class="ref-lockup__name">cloud bongos</span>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="ref-naming">
|
|
33
|
+
<p><strong>The wordmark is lowercase; the name in a sentence is capitalised</strong> (owner, 2026-11-06):</p>
|
|
34
|
+
<ul>
|
|
35
|
+
<li>In the logo and the wordmark beside the mark: <strong>cloud bongos</strong>, all lowercase, the display voice.</li>
|
|
36
|
+
<li>In running text, titles, metadata, emails and Discord: <strong>Cloud Bongos</strong>, two capitals. Never "CloudBongos", "Cloud bongos" or "CB".</li>
|
|
37
|
+
<li>The domain is written <code>cloudbongos.com</code>, lowercase, one word.</li>
|
|
38
|
+
<li>An instance's own product name comes from its branding pack (<code>identity.productName</code>) and follows that instance's rules, not these. Platform code never hardcodes either spelling. It reads the pack.</li>
|
|
39
|
+
</ul>
|
|
40
|
+
</div>
|
|
41
|
+
<h3 class="ref-sub">The files</h3>
|
|
42
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/mark.svg"><code>mark.svg</code></a><span class="ref-what">the one source: drawn inline by reference, coloured by the page</span></li><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/mark-light.svg"><code>mark-light.svg</code></a><span class="ref-what">the mark in Ink with the accent moon (light grounds)</span></li><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/mark-dark.svg"><code>mark-dark.svg</code></a><span class="ref-what">the mark in the Night ink with the accent moon (dark grounds)</span></li><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/mark-mono.svg"><code>mark-mono.svg</code></a><span class="ref-what">the whole mark in one ink (black), for a print or a stamp</span></li><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/mark-body.svg"><code>mark-body.svg</code></a><span class="ref-what">the ring and planet only, one ink</span></li><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/mark-dot.svg"><code>mark-dot.svg</code></a><span class="ref-what">the moon only, one ink</span></li><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/favicon.svg"><code>favicon.svg</code></a><span class="ref-what">the small cut, Ink by day and the Night ink by night</span></li><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/apple-touch-icon.png"><code>apple-touch-icon.png</code></a><span class="ref-what">180x180, the light mark on the pack's ground</span></li><li class="ref-row ref-row--file"><a class="ref-file" href="/modules/ui-design/public/brand/og-card.png"><code>og-card.png</code></a><span class="ref-what">1200x630, the link-preview card every public page names</span></li></ul>
|
|
43
|
+
</section>
|
|
44
|
+
<section class="scroll ref-sec" id="ref-colour" aria-labelledby="ref-colour-h">
|
|
45
|
+
<h2 class="scroll__h" id="ref-colour-h">Colour</h2>
|
|
46
|
+
<p class="scroll__lede">The thirteen colours of the branding pack. An instance replaces them in its own pack; in dark mode only the neutrals flip, and the accent, sea and terracotta stay the pack’s.</p>
|
|
47
|
+
|
|
48
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg)" aria-hidden="true"></span><code class="ref-name">--bg</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#edecee</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-card)" aria-hidden="true"></span><code class="ref-name">--bg-card</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fbfafc</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#101012</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-deep)" aria-hidden="true"></span><code class="ref-name">--bg-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#e2e1e4</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-frame)" aria-hidden="true"></span><code class="ref-name">--bg-frame</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#f6f5f7</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#08080a</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink)" aria-hidden="true"></span><code class="ref-name">--ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#17181a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffffff</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-soft)" aria-hidden="true"></span><code class="ref-name">--ink-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#55565a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#c0c0c0</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-faint)" aria-hidden="true"></span><code class="ref-name">--ink-faint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#65656a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#a8a8a8</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule)" aria-hidden="true"></span><code class="ref-name">--rule</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c6c6c8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule-soft)" aria-hidden="true"></span><code class="ref-name">--rule-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#dcdbdd</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .08)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent)" aria-hidden="true"></span><code class="ref-name">--accent</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fb9569</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-deep)" aria-hidden="true"></span><code class="ref-name">--accent-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#a3481a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sea)" aria-hidden="true"></span><code class="ref-name">--sea</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#5b6fd0</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--terracotta)" aria-hidden="true"></span><code class="ref-name">--terracotta</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c9512c</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li></ul>
|
|
49
|
+
<h3 class="ref-sub">The status vocabulary</h3>
|
|
50
|
+
<p class="ref-note">Fixed, not taken from the pack, and the one exception to the fifteen tokens: a status is always a word as well as a colour.</p>
|
|
51
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ok)" aria-hidden="true"></span><code class="ref-name">--ok</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#187444</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#4ade80</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ok-weak)" aria-hidden="true"></span><code class="ref-name">--ok-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #187444 12%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #4ade80 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--warn)" aria-hidden="true"></span><code class="ref-name">--warn</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#895c00</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#fbbf24</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--warn-weak)" aria-hidden="true"></span><code class="ref-name">--warn-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #895c00 14%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #fbbf24 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--danger)" aria-hidden="true"></span><code class="ref-name">--danger</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#b42318</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#f87171</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--danger-weak)" aria-hidden="true"></span><code class="ref-name">--danger-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #b42318 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #f87171 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--info)" aria-hidden="true"></span><code class="ref-name">--info</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--sea) 86%, #000000)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--sea) 80%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--info-weak)" aria-hidden="true"></span><code class="ref-name">--info-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--info) 9%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--info) 14%, var(--bg-card))</code></span></li></ul>
|
|
52
|
+
<h3 class="ref-sub">Derived colours</h3>
|
|
53
|
+
<p class="ref-note">Mixed from the thirteen, never typed as a new colour. Black and white with alpha appear only as a scrim, a shadow or glass.</p>
|
|
54
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass)" aria-hidden="true"></span><code class="ref-name">--glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .05)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .11)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-strong)" aria-hidden="true"></span><code class="ref-name">--glass-strong</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .08)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .17)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-edge)" aria-hidden="true"></span><code class="ref-name">--glass-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .13)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void)" aria-hidden="true"></span><code class="ref-name">--void</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#050508</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-ink)" aria-hidden="true"></span><code class="ref-name">--void-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffffff</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--ink)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-edge)" aria-hidden="true"></span><code class="ref-name">--void-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--skeleton)" aria-hidden="true"></span><code class="ref-name">--skeleton</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-ink)" aria-hidden="true"></span><code class="ref-name">--accent-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 45%, #240e00)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-lift)" aria-hidden="true"></span><code class="ref-name">--accent-lift</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-tint)" aria-hidden="true"></span><code class="ref-name">--accent-tint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 30%, #fffdf9)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 22%, #0b0a09)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-on)" aria-hidden="true"></span><code class="ref-name">--accent-on</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a1305</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a1305</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--focus)" aria-hidden="true"></span><code class="ref-name">--focus</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent-deep) 82%, #3a1400)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--scrim)" aria-hidden="true"></span><code class="ref-name">--scrim</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(0, 0, 0, .55)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(0, 0, 0, .55)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--surface-2)" aria-hidden="true"></span><code class="ref-name">--surface-2</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 5%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 6%, var(--bg-card))</code></span></li></ul>
|
|
55
|
+
</section>
|
|
56
|
+
<section class="scroll ref-sec" id="ref-type" aria-labelledby="ref-type-h">
|
|
57
|
+
<h2 class="scroll__h" id="ref-type-h">Type</h2>
|
|
58
|
+
<p class="scroll__lede">Two faces from the pack and one mono face for what the machine says: task ids, labels, figures.</p>
|
|
59
|
+
|
|
60
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--face"><code class="ref-name">--font-display</code><span class="ref-face" style="font-family: var(--font-display)">Claim the next task</span><span class="ref-val"><span class="ref-val__k">display</span> <code>"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif</code></span></li><li class="ref-row ref-row--face"><code class="ref-name">--font-body</code><span class="ref-face" style="font-family: var(--font-body)">Claim the next task</span><span class="ref-val"><span class="ref-val__k">body</span> <code>"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif</code></span></li><li class="ref-row ref-row--face"><code class="ref-name">--font-mono</code><span class="ref-face" style="font-family: var(--font-mono)">Claim the next task</span><span class="ref-val"><span class="ref-val__k">mono</span> <code>"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace</code></span></li></ul>
|
|
61
|
+
<h3 class="ref-sub">The type scale</h3>
|
|
62
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-3xs</code><span class="ref-val"><span class="ref-val__k">size</span> <code>10.5px</code></span><span class="ref-sample" style="font-size: var(--ds-text-3xs)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-2xs</code><span class="ref-val"><span class="ref-val__k">size</span> <code>11px</code></span><span class="ref-sample" style="font-size: var(--ds-text-2xs)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-2xs-plus</code><span class="ref-val"><span class="ref-val__k">size</span> <code>11.5px</code></span><span class="ref-sample" style="font-size: var(--ds-text-2xs-plus)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-xs</code><span class="ref-val"><span class="ref-val__k">size</span> <code>12px</code></span><span class="ref-sample" style="font-size: var(--ds-text-xs)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-xs-plus</code><span class="ref-val"><span class="ref-val__k">size</span> <code>12.5px</code></span><span class="ref-sample" style="font-size: var(--ds-text-xs-plus)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-sm</code><span class="ref-val"><span class="ref-val__k">size</span> <code>13px</code></span><span class="ref-sample" style="font-size: var(--ds-text-sm)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-sm-plus</code><span class="ref-val"><span class="ref-val__k">size</span> <code>13.5px</code></span><span class="ref-sample" style="font-size: var(--ds-text-sm-plus)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-md</code><span class="ref-val"><span class="ref-val__k">size</span> <code>14px</code></span><span class="ref-sample" style="font-size: var(--ds-text-md)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-md-plus</code><span class="ref-val"><span class="ref-val__k">size</span> <code>14.5px</code></span><span class="ref-sample" style="font-size: var(--ds-text-md-plus)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-lg</code><span class="ref-val"><span class="ref-val__k">size</span> <code>15px</code></span><span class="ref-sample" style="font-size: var(--ds-text-lg)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-xl</code><span class="ref-val"><span class="ref-val__k">size</span> <code>16px</code></span><span class="ref-sample" style="font-size: var(--ds-text-xl)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-2xl</code><span class="ref-val"><span class="ref-val__k">size</span> <code>17px</code></span><span class="ref-sample" style="font-size: var(--ds-text-2xl)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-3xl</code><span class="ref-val"><span class="ref-val__k">size</span> <code>20px</code></span><span class="ref-sample" style="font-size: var(--ds-text-3xl)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-4xl</code><span class="ref-val"><span class="ref-val__k">size</span> <code>22px</code></span><span class="ref-sample" style="font-size: var(--ds-text-4xl)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-5xl</code><span class="ref-val"><span class="ref-val__k">size</span> <code>26px</code></span><span class="ref-sample" style="font-size: var(--ds-text-5xl)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-title</code><span class="ref-val"><span class="ref-val__k">size</span> <code>clamp(23px, 2.4vw, 32px)</code></span><span class="ref-sample" style="font-size: var(--ds-text-title)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-headline</code><span class="ref-val"><span class="ref-val__k">size</span> <code>clamp(26px, 3.1vw, 42px)</code></span><span class="ref-sample" style="font-size: var(--ds-text-headline)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-figure</code><span class="ref-val"><span class="ref-val__k">size</span> <code>clamp(30px, 3.7vw, 52px)</code></span><span class="ref-sample" style="font-size: var(--ds-text-figure)">Claim the next task</span></li><li class="ref-row ref-row--type"><code class="ref-name">--ds-text-display</code><span class="ref-val"><span class="ref-val__k">size</span> <code>clamp(34px, 6.7vw, 96px)</code></span><span class="ref-sample" style="font-size: var(--ds-text-display)">Claim the next task</span></li></ul>
|
|
63
|
+
</section>
|
|
64
|
+
<section class="scroll ref-sec" id="ref-space" aria-labelledby="ref-space-h">
|
|
65
|
+
<h2 class="scroll__h" id="ref-space-h">Spacing</h2>
|
|
66
|
+
<p class="scroll__lede">The rhythm every gap and padding is taken from.</p>
|
|
67
|
+
|
|
68
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--space"><code class="ref-name">--ds-space-hair</code><span class="ref-val"><span class="ref-val__k">size</span> <code>6px</code></span><span class="ref-bar" style="width: var(--ds-space-hair)" aria-hidden="true"></span></li><li class="ref-row ref-row--space"><code class="ref-name">--ds-space-xs</code><span class="ref-val"><span class="ref-val__k">size</span> <code>10px</code></span><span class="ref-bar" style="width: var(--ds-space-xs)" aria-hidden="true"></span></li><li class="ref-row ref-row--space"><code class="ref-name">--ds-space-sm</code><span class="ref-val"><span class="ref-val__k">size</span> <code>14px</code></span><span class="ref-bar" style="width: var(--ds-space-sm)" aria-hidden="true"></span></li><li class="ref-row ref-row--space"><code class="ref-name">--ds-space-md</code><span class="ref-val"><span class="ref-val__k">size</span> <code>22px</code></span><span class="ref-bar" style="width: var(--ds-space-md)" aria-hidden="true"></span></li><li class="ref-row ref-row--space"><code class="ref-name">--ds-space-lg</code><span class="ref-val"><span class="ref-val__k">size</span> <code>34px</code></span><span class="ref-bar" style="width: var(--ds-space-lg)" aria-hidden="true"></span></li><li class="ref-row ref-row--space"><code class="ref-name">--ds-space-xl</code><span class="ref-val"><span class="ref-val__k">size</span> <code>52px</code></span><span class="ref-bar" style="width: var(--ds-space-xl)" aria-hidden="true"></span></li><li class="ref-row ref-row--space"><code class="ref-name">--ds-space-gutter</code><span class="ref-val"><span class="ref-val__k">size</span> <code>26px</code></span><span class="ref-bar" style="width: var(--ds-space-gutter)" aria-hidden="true"></span></li><li class="ref-row ref-row--space"><code class="ref-name">--ds-space-gutter-narrow</code><span class="ref-val"><span class="ref-val__k">size</span> <code>20px</code></span><span class="ref-bar" style="width: var(--ds-space-gutter-narrow)" aria-hidden="true"></span></li></ul>
|
|
69
|
+
<h3 class="ref-sub">The hairline</h3>
|
|
70
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--space"><code class="ref-name">--ds-line</code><span class="ref-val"><span class="ref-val__k">width</span> <code>1px</code></span><span class="ref-hair" aria-hidden="true"></span></li></ul>
|
|
71
|
+
</section>
|
|
72
|
+
<section class="scroll ref-sec" id="ref-shape" aria-labelledby="ref-shape-h">
|
|
73
|
+
<h2 class="scroll__h" id="ref-shape-h">Corners and shadow</h2>
|
|
74
|
+
<p class="scroll__lede">A control is a pill or square; a panel and a tile take their own corner. The one shadow is spent only on what floats.</p>
|
|
75
|
+
|
|
76
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--shape"><span class="ref-corner" style="border-radius: var(--ds-radius-pill)" aria-hidden="true"></span><code class="ref-name">--ds-radius-pill</code><span class="ref-val"><span class="ref-val__k">radius</span> <code>999px</code></span></li><li class="ref-row ref-row--shape"><span class="ref-corner" style="border-radius: var(--ds-radius-panel)" aria-hidden="true"></span><code class="ref-name">--ds-radius-panel</code><span class="ref-val"><span class="ref-val__k">radius</span> <code>16px</code></span></li><li class="ref-row ref-row--shape"><span class="ref-corner" style="border-radius: var(--ds-radius-tile)" aria-hidden="true"></span><code class="ref-name">--ds-radius-tile</code><span class="ref-val"><span class="ref-val__k">radius</span> <code>10px</code></span></li></ul>
|
|
77
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--shape"><span class="ref-float" style="box-shadow: var(--ds-shadow-pop)" aria-hidden="true"></span><code class="ref-name">--ds-shadow-pop</code><span class="ref-val"><span class="ref-val__k">light</span> <code>0 18px 40px rgba(0, 0, 0, .28)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>0 18px 40px rgba(0, 0, 0, .62)</code></span></li></ul>
|
|
78
|
+
</section>
|
|
79
|
+
<section class="scroll ref-sec" id="ref-motion" aria-labelledby="ref-motion-h">
|
|
80
|
+
<h2 class="scroll__h" id="ref-motion-h">Motion and layers</h2>
|
|
81
|
+
<p class="scroll__lede">State changes take the one easing; an entrance takes the slow ease-out. With reduced motion asked for, every duration is zero.</p>
|
|
82
|
+
|
|
83
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--plain"><code class="ref-name">--ds-dur-fast</code><span class="ref-val"><span class="ref-val__k">value</span> <code>150ms</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-dur-base</code><span class="ref-val"><span class="ref-val__k">value</span> <code>200ms</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-dur-slow</code><span class="ref-val"><span class="ref-val__k">value</span> <code>320ms</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-dur-slower</code><span class="ref-val"><span class="ref-val__k">value</span> <code>420ms</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-dur-arrive</code><span class="ref-val"><span class="ref-val__k">value</span> <code>700ms</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-stagger</code><span class="ref-val"><span class="ref-val__k">value</span> <code>70ms</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-ease</code><span class="ref-val"><span class="ref-val__k">value</span> <code>cubic-bezier(.2, .7, .3, 1)</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-ease-arrive</code><span class="ref-val"><span class="ref-val__k">value</span> <code>cubic-bezier(.16, 1, .3, 1)</code></span></li></ul>
|
|
84
|
+
<h3 class="ref-sub">Stacking layers, low to high</h3>
|
|
85
|
+
<ul class="ref-list" role="list"><li class="ref-row ref-row--plain"><code class="ref-name">--ds-z-progress</code><span class="ref-val"><span class="ref-val__k">z</span> <code>25</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-z-topbar</code><span class="ref-val"><span class="ref-val__k">z</span> <code>30</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-z-sidebar</code><span class="ref-val"><span class="ref-val__k">z</span> <code>40</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-z-scrim</code><span class="ref-val"><span class="ref-val__k">z</span> <code>140</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-z-drawer</code><span class="ref-val"><span class="ref-val__k">z</span> <code>150</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-z-modal</code><span class="ref-val"><span class="ref-val__k">z</span> <code>160</code></span></li><li class="ref-row ref-row--plain"><code class="ref-name">--ds-z-diagram-full</code><span class="ref-val"><span class="ref-val__k">z</span> <code>9999</code></span></li></ul>
|
|
86
|
+
</section>
|
|
87
|
+
<section class="scroll ref-sec" id="ref-components" aria-labelledby="ref-components-h">
|
|
88
|
+
<h2 class="scroll__h" id="ref-components-h">Components</h2>
|
|
89
|
+
<p class="scroll__lede">Drawn by the same shared rules every page of the hall loads, in each of their states.</p>
|
|
90
|
+
|
|
91
|
+
<h3 class="ref-sub">Buttons</h3>
|
|
92
|
+
<div class="ref-specimen">
|
|
93
|
+
<button type="button" class="btn">claim it</button>
|
|
94
|
+
<button type="button" class="btn btn--ghost">later</button>
|
|
95
|
+
<button type="button" class="btn btn--danger">release</button>
|
|
96
|
+
<button type="button" class="btn" disabled>claimed</button>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="ref-specimen">
|
|
99
|
+
<button type="button" class="btn btn--sm">claim</button>
|
|
100
|
+
<button type="button" class="btn btn--ghost btn--sm">release</button>
|
|
101
|
+
<button type="button" class="btn btn--text">read the brief</button>
|
|
102
|
+
</div>
|
|
103
|
+
<h3 class="ref-sub">Fields</h3>
|
|
104
|
+
<div class="ref-fields">
|
|
105
|
+
<label class="ref-field">A field <input type="text" value="A sentence someone typed"></label>
|
|
106
|
+
<label class="ref-field">A choice <select><option>ready</option><option>active</option></select></label>
|
|
107
|
+
<label class="ref-field">A longer answer <textarea rows="2">Two lines of what changed.</textarea></label>
|
|
108
|
+
<label class="ref-field">Not open yet <input type="text" value="Read only" disabled></label>
|
|
109
|
+
</div>
|
|
110
|
+
<h3 class="ref-sub">Status pills</h3>
|
|
111
|
+
<div class="ref-specimen" data-ref="tones"><span class="status-pill status-pill--ok">ok</span> <span class="status-pill status-pill--warn">warn</span> <span class="status-pill status-pill--danger">danger</span> <span class="status-pill status-pill--info">info</span> <span class="status-pill status-pill--neutral">neutral</span> <span class="status-pill status-pill--accent">accent</span></div>
|
|
112
|
+
<div class="ref-specimen" data-ref="tones-sm"><span class="status-pill status-pill--ok status-pill--sm">ok</span> <span class="status-pill status-pill--warn status-pill--sm">warn</span> <span class="status-pill status-pill--danger status-pill--sm">danger</span> <span class="status-pill status-pill--info status-pill--sm">info</span> <span class="status-pill status-pill--neutral status-pill--sm">neutral</span> <span class="status-pill status-pill--accent status-pill--sm">accent</span></div>
|
|
113
|
+
<p class="ref-note">A task’s status, from the one map:</p>
|
|
114
|
+
<div class="ref-specimen" data-ref="task-statuses"><span class="status-pill status-pill--neutral">backlog</span> <span class="status-pill status-pill--info">ready</span> <span class="status-pill status-pill--info">active</span> <span class="status-pill status-pill--warn">blocked</span> <span class="status-pill status-pill--info">completed</span> <span class="status-pill status-pill--ok">confirmed</span> <span class="status-pill status-pill--ok">shipped</span> <span class="status-pill status-pill--neutral">abandoned</span></div>
|
|
115
|
+
<h3 class="ref-sub">Tabs and the view toggle</h3>
|
|
116
|
+
<div class="kit-tabs" role="tablist" aria-label="Example tabs">
|
|
117
|
+
<button type="button" class="setup__tab is-active" role="tab" aria-selected="true">ready <span class="count-pill">4</span></button>
|
|
118
|
+
<button type="button" class="setup__tab" role="tab" aria-selected="false">active</button>
|
|
119
|
+
<button type="button" class="setup__tab" role="tab" aria-selected="false">done</button>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="viewtoggle" role="group" aria-label="View">
|
|
122
|
+
<button type="button" class="viewtoggle__btn" aria-pressed="true">rows</button>
|
|
123
|
+
<button type="button" class="viewtoggle__btn" aria-pressed="false">cards</button>
|
|
124
|
+
</div>
|
|
125
|
+
<h3 class="ref-sub">Panel, tile and the empty state</h3>
|
|
126
|
+
<div class="scroll scroll--quiet ref-tile"><p class="ref-note">This section is a panel; a quiet tile inside it recedes by tone.</p></div>
|
|
127
|
+
<div class="empty-state"><p>Nothing is waiting for you.</p><a class="empty-state__action" href="#ref-components">See the whole queue</a></div>
|
|
128
|
+
<h3 class="ref-sub">Loading</h3>
|
|
129
|
+
<p class="hall-loading" role="status">Reading the queue…</p>
|
|
130
|
+
<p class="ref-specimen"><span class="hall-loading hall-loading--inline" role="status">Saving…</span></p>
|
|
131
|
+
<h3 class="ref-sub">Toasts</h3>
|
|
132
|
+
<div class="ref-toasts">
|
|
133
|
+
<p class="toast ref-toast" data-visible="1" data-kind="info">Copied the prompt. <span class="ref-toast__k">(info, 3.2s)</span></p>
|
|
134
|
+
<p class="toast ref-toast" data-visible="1" data-kind="ok">Task claimed. <span class="ref-toast__k">(ok, 2.6s)</span></p>
|
|
135
|
+
<p class="toast ref-toast" data-visible="1" data-kind="warn">The board is paused while the owner reviews it. <span class="ref-toast__k">(warn, 5s)</span></p>
|
|
136
|
+
<p class="toast ref-toast" data-visible="1" data-kind="error">Could not reach the server: try again in a moment. <span class="ref-toast__k">(error, 6.5s)</span></p>
|
|
137
|
+
</div>
|
|
138
|
+
<h3 class="ref-sub">Dialog</h3>
|
|
139
|
+
<div class="ref-dialog">
|
|
140
|
+
<div class="hall-dialog" role="dialog" aria-modal="false" aria-labelledby="ref-dialog-t">
|
|
141
|
+
<div class="hall-dialog__head"><h4 class="hall-dialog__title" id="ref-dialog-t">Release this task?</h4></div>
|
|
142
|
+
<div class="hall-dialog__body"><p>It returns to the queue and no credits are earned.</p></div>
|
|
143
|
+
<div class="hall-dialog__actions"><button type="button" class="btn btn--ghost">cancel</button><button type="button" class="btn btn--danger">release</button></div>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</section>
|
|
147
|
+
<section class="ref-sources" aria-labelledby="ref-sources-h">
|
|
148
|
+
<h2 class="ref-sources__h" id="ref-sources-h">Generated from</h2>
|
|
149
|
+
<ul>
|
|
150
|
+
<li><code>config/branding.neutral.json</code></li>
|
|
151
|
+
<li><code>modules/ui-design/public/tokens.css</code></li>
|
|
152
|
+
<li><code>modules/hall-ui/public/style.css</code></li>
|
|
153
|
+
<li><code>modules/hall-ui/public/controls.css</code></li>
|
|
154
|
+
<li><code>modules/hall-ui/public/dom-utils.js</code></li>
|
|
155
|
+
<li><code>modules/ui-design/public/brand</code></li>
|
|
156
|
+
<li><code>scripts/bongos/gen-brand.js</code></li>
|
|
157
|
+
<li><code>DESIGN.md</code></li>
|
|
158
|
+
</ul>
|
|
159
|
+
</section>
|
|
160
|
+
</main>
|
|
161
|
+
</body>
|
|
162
|
+
</html>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"_": "The public design-system reference (task 1005083, goal 1000138): every token with its light and dark values, the scales, the logo and naming rule, and every shared component in its states. The page is generated (node modules/ui-design/scripts/gen-design-reference.js) and follows the device's mode, so the kit renders it in both: node modules/ui-design/kit/render.js --page /brand --surface modules/ui-design/public",
|
|
3
|
+
"page": "/brand",
|
|
4
|
+
"surface": "modules/ui-design/public",
|
|
5
|
+
"stub": {
|
|
6
|
+
"prefix": "/"
|
|
7
|
+
},
|
|
8
|
+
"modeQuery": false,
|
|
9
|
+
"ignoreRequests": [
|
|
10
|
+
"/api/"
|
|
11
|
+
],
|
|
12
|
+
"ignoreControls": [
|
|
13
|
+
"a.empty-state__action"
|
|
14
|
+
],
|
|
15
|
+
"states": {
|
|
16
|
+
"reference": {
|
|
17
|
+
"expect": {
|
|
18
|
+
"visible": [
|
|
19
|
+
".ref-lockup",
|
|
20
|
+
"#ref-colour .ref-swatch",
|
|
21
|
+
".status-pill--ok",
|
|
22
|
+
".btn--danger",
|
|
23
|
+
".hall-dialog",
|
|
24
|
+
".toast[data-kind=\"error\"]"
|
|
25
|
+
],
|
|
26
|
+
"count": [
|
|
27
|
+
[
|
|
28
|
+
"[data-ref=\"tones\"] .status-pill",
|
|
29
|
+
6
|
|
30
|
+
]
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|