sheleg-design-skill 1.56.0 → 1.58.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.
- package/CHANGELOG.md +151 -0
- package/kits/chorus/src/Slab.md +4 -2
- package/kits/chorus/src/Slab.tsx +1 -1
- package/kits/chorus/src/styles.css +61 -9
- package/kits/surveyor/src/styles.css +14 -0
- package/package.json +7 -3
- package/plugins/sheleg-design/.claude-plugin/plugin.json +2 -2
- package/plugins/sheleg-design/skills/sheleg-design/AI_PRODUCT_PATTERNS.md +13 -0
- package/plugins/sheleg-design/skills/sheleg-design/DESIGN_SYNC_BRIDGE.md +10 -0
- package/plugins/sheleg-design/skills/sheleg-design/FIGMA_BRIDGE.md +7 -0
- package/plugins/sheleg-design/skills/sheleg-design/MOBILE_SURFACES.md +1 -1
- package/plugins/sheleg-design/skills/sheleg-design/MOTION_DOCTRINE.md +22 -4
- package/plugins/sheleg-design/skills/sheleg-design/MOTION_PRODUCTION.md +10 -0
- package/plugins/sheleg-design/skills/sheleg-design/SHELEG_DESIGN.md +19 -0
- package/plugins/sheleg-design/skills/sheleg-design/SKILL.md +18 -9
- package/plugins/sheleg-design/skills/sheleg-design/SURFACE_COMPOSITION.md +9 -3
- package/plugins/sheleg-design/skills/sheleg-design/styles/STYLE_PACK_TEMPLATE.md +18 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/almanac.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/atrium.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/awning.md +12 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/babylove.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/blueprint.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/briefing-room.md +12 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/bulletin.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/chorus.md +47 -15
- package/plugins/sheleg-design/skills/sheleg-design/styles/cyclorama.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/datasheet.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/daylight.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/deskmate.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/editorial-luxury.md +13 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/field-notes.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/instrument-console.md +13 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/ledger.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/manpage.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/maquette.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/nameplate.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/notation.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/onionskin.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/ora.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/orchard.md +13 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/outrank.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/paperclip.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/patchbay.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/pigeonhole.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/prism.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/proscenium.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/rimlight.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/roster.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/router.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/scoreboard.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/showroom.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/surveyor.md +23 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/tenor.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/test-drive.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/chorus.css +61 -9
- package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/surveyor.css +14 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/vitrine.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/workbench.md +12 -0
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,157 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [1.58.0] - 2026-08-30
|
|
10
|
+
|
|
11
|
+
### The catalogue stops being the one surface nobody designed, and two blind reads land
|
|
12
|
+
|
|
13
|
+
**The site is now built from a pack.** The two generators behind
|
|
14
|
+
`ssheleg.github.io/sheleg-design-skill` carried **sixty-seven colour literals**
|
|
15
|
+
between them — a dark-only scheme that appears in no pack, answers no
|
|
16
|
+
`prefers-color-scheme`, and had never been through the contrast gate every pack must
|
|
17
|
+
pass. A library that ships thirty-nine measured token layers and paints its own
|
|
18
|
+
catalogue in an undocumented one is arguing against itself.
|
|
19
|
+
|
|
20
|
+
`tools/chrome.py` is the shell now: it inlines `styles/tokens/workbench.css`
|
|
21
|
+
**verbatim** and the site's own CSS consumes `var(--…)` and nothing else.
|
|
22
|
+
`workbench` for two checkable reasons — it is the library's stated default for
|
|
23
|
+
product UI, which is what a catalogue is, and it is one of only two packs shipping a
|
|
24
|
+
full `[data-theme="dark"]` twin, which a public page needs. The theme follows the
|
|
25
|
+
pack's own written instruction (*"keep one switch, never two sources of truth"*): a
|
|
26
|
+
`prefers-color-scheme` listener sets `data-theme`, and the two `theme-color` meta
|
|
27
|
+
tags are **derived** from the layer's `--bg` rather than typed. `no_literals()` runs
|
|
28
|
+
on every build and in `npm test`, so this cannot rot back.
|
|
29
|
+
|
|
30
|
+
The site's links honour the pack rather than override it: `--accent` is declared
|
|
31
|
+
`@role non-text` at 4.30:1, so a link is `--ink` wearing an accent underline, and
|
|
32
|
+
hover thickens the rule instead of recolouring the word.
|
|
33
|
+
|
|
34
|
+
**The front door had been publishing 39 blank cards.** `tools/gallery.py` parsed the
|
|
35
|
+
pack catalogue out of `SKILL.md` long after that table moved to
|
|
36
|
+
`STYLE_PACK_INDEX.md`. The regex matched nothing, `look` and `for` came back empty
|
|
37
|
+
for **every** pack, and the live site shipped *"Choose for"* followed by silence on
|
|
38
|
+
all thirty-nine — with the JSON-LD `ItemList` descriptions and the `llms.txt`
|
|
39
|
+
entries empty behind it. Nothing failed, because an empty string is a valid string.
|
|
40
|
+
Fixed, and the parse is now asserted: a run that finds no catalogue rows stops
|
|
41
|
+
instead of publishing a catalogue with no prose in it.
|
|
42
|
+
|
|
43
|
+
### Scenario T37 ran, both branches passed, and cost 29 findings
|
|
44
|
+
|
|
45
|
+
Written on 2026-08-30 with its debt stated; run the same day once subagents were
|
|
46
|
+
available. Both branches blind against the bundle directory, both correct — `T37a`
|
|
47
|
+
reached `chorus` from a quoted-thread brief, `T37b` **stayed on `surveyor`** from an
|
|
48
|
+
enterprise-tracker brief, which is the failure a positive-only branch cannot detect.
|
|
49
|
+
|
|
50
|
+
**Twelve of `T37a`'s sixteen findings on `chorus` are fixed here.** The three that
|
|
51
|
+
mattered were invisible to every gate:
|
|
52
|
+
|
|
53
|
+
- `--on-status` stayed at its root white inside the slab block, putting **white on
|
|
54
|
+
the mint at 1.32:1** — in the one surface the pack invented the mint for. The
|
|
55
|
+
comment above that block said it owed "two tokens" while the block changed five.
|
|
56
|
+
It now re-declares six, and the count is stated.
|
|
57
|
+
- The slab's overrides **inherited into light descendants**: a white card nested in a
|
|
58
|
+
slab took a white hairline and re-admitted the mint the pack's own Bans forbid on
|
|
59
|
+
paper. A nested light surface takes its tokens back.
|
|
60
|
+
- The Responsive section's opening sentence contradicted its own table two lines
|
|
61
|
+
below: *"768 and 1440 differ only in the frame, not in the type"*, against a table
|
|
62
|
+
giving the display 40px at 768 and 56px at 1440.
|
|
63
|
+
|
|
64
|
+
Also: `--track-h2-sm` now exists for the narrow section head the Responsive table
|
|
65
|
+
asks for; the Delta chip's "wash" is two real tokens (`--good-weak`,
|
|
66
|
+
`--danger-weak`); the provenance legend names the family it actually uses
|
|
67
|
+
(**PACK DECISION**, and no SELECTED); one ratio was wrong (`--parchment` on `--bg` is
|
|
68
|
+
1.14:1, not 1.15); "a factor of three" was 2.8; the eyebrow was two objects with two
|
|
69
|
+
sizes; three things were called a pill and none of them used `--r-pill`; and the
|
|
70
|
+
slab hook is now the library's own unprefixed `[data-surface="slab"]` — chorus had
|
|
71
|
+
been the only pack you could not A/B by swapping the token layer alone.
|
|
72
|
+
|
|
73
|
+
**One of `T37b`'s thirteen findings on `surveyor` is fixed here**, because it is an
|
|
74
|
+
accessibility hole with a one-token remedy: `--focus-color` is `--action`, and
|
|
75
|
+
`#0a7269` on the pack's own `--accent` closer panel measures **1.55:1** — under the
|
|
76
|
+
3:1 mark floor, on the surface carrying the final CTA. `[data-surface="accent"]` now
|
|
77
|
+
re-declares the ring to the pack's `--bg` at 3.54:1. The other eight are verified and
|
|
78
|
+
filed as B-137 for the pack's author, per the B-134/B-135 precedent.
|
|
79
|
+
|
|
80
|
+
**Both branches found the same third-party defect, and neither pack could have
|
|
81
|
+
caught it.** `MOTION_DOCTRINE.md` called `bulletin` at 3 *"the lowest ceiling in the
|
|
82
|
+
library"* — false for four releases, while four packs pin **2**. Corrected, and
|
|
83
|
+
`validate_motion_ceiling_floor()` now recomputes both the minimum and the count from
|
|
84
|
+
the packs' own Register lines; it was watched failing against a planted 3 before it
|
|
85
|
+
went green.
|
|
86
|
+
|
|
87
|
+
### Ledgers
|
|
88
|
+
|
|
89
|
+
B-136 closed. B-137 and B-138 opened with the verified remainder. `REQ-CHORUS-3`
|
|
90
|
+
moves off `never`, taking the ledger from two `never` rows to one. The `chorus`
|
|
91
|
+
acceptance record's REQ-10/11/12 are closed against receipts — including the one
|
|
92
|
+
that is only **partly** met and says so: the launcher's pin still names v1.54.0,
|
|
93
|
+
because that repository holds ~2,100 lines of another session's uncommitted work.
|
|
94
|
+
|
|
95
|
+
## [1.57.0] - 2026-08-30
|
|
96
|
+
|
|
97
|
+
### The siblings are declared, the maps are derived, the descriptions stop scarring
|
|
98
|
+
|
|
99
|
+
Five closures from the family audit of 2026-08-29 (SHD-05, SHD-01, SHD-03, SHD-09,
|
|
100
|
+
SHD-11), one release.
|
|
101
|
+
|
|
102
|
+
**The three sibling skills are declared, and every one has a written absent-branch
|
|
103
|
+
(SHD-05, the audit's HIGH).** `SKILL.md` handed charts to a `dataviz` skill that
|
|
104
|
+
exists on no consumer machine this skill ships to, and asserted `shadcn` /
|
|
105
|
+
`migrate-radix-to-base` "are installed" — a promise this repository has no way to
|
|
106
|
+
keep. Three changes, none of them a removal:
|
|
107
|
+
|
|
108
|
+
- A `compatibility` front-matter line names all three as optional siblings with
|
|
109
|
+
in-text fallbacks — the Agent Skills field for environment expectations, spent on
|
|
110
|
+
the one expectation this skill actually has.
|
|
111
|
+
- The chart handoff is now conditional in both homes: where a `dataviz` skill is
|
|
112
|
+
installed it consumes the pack as its parameter set, and **where none is
|
|
113
|
+
installed, the role table in `SURFACE_COMPOSITION.md` IS the chart contract**,
|
|
114
|
+
applied by hand — which is what that table always was, stated instead of implied.
|
|
115
|
+
- The component-layer section says what absence costs: nothing. `npx shadcn@latest
|
|
116
|
+
add` does the adding without the skill, and the token mapping binds either way.
|
|
117
|
+
|
|
118
|
+
**Every long reference now carries a derived `## Contents` list (SHD-01).** The
|
|
119
|
+
authoring rule — a reference over 100 lines carries a map, because that is what a
|
|
120
|
+
partial read sees — held in 2 of 46 qualifying files. Hand-adding 44 lists creates
|
|
121
|
+
44 lists that rot, so the list is **derived**: `scripts/gen_contents.py` writes the
|
|
122
|
+
entries from the file's own `## ` headings (fenced code blocked out), `--write`
|
|
123
|
+
regenerates bundle + mirror + template source together, and
|
|
124
|
+
`validate_contents_lists()` refuses a file whose list is missing *or drifted* —
|
|
125
|
+
including the one pre-existing list whose entries had already wandered from the
|
|
126
|
+
headings they mapped (`MOBILE_SURFACES.md`). A new pack without a Contents list now
|
|
127
|
+
fails the gate with the remedy in the message.
|
|
128
|
+
|
|
129
|
+
**Both host-facing manifest descriptions are generated, never hand-appended
|
|
130
|
+
(SHD-03).** `plugin.json` and the plugin entry in `marketplace.json` had converged
|
|
131
|
+
to what per-release appending always produces: `patchbay` and `nameplate` glossed
|
|
132
|
+
twice, `deskmate` never glossed, and `chorus` carrying `deskmate`'s orphaned
|
|
133
|
+
parenthesis. Both descriptions are now derived from `STYLE_PACK_INDEX.md`'s
|
|
134
|
+
catalogue — the register and good-fit columns packs are already chosen by — via
|
|
135
|
+
`scripts/gen_manifest_descriptions.py` (`npm run gen-descriptions`), and
|
|
136
|
+
`validate_manifest_descriptions()` refuses a manifest that differs from the
|
|
137
|
+
derivation. The generator also refuses to run when the catalogue and `styles/`
|
|
138
|
+
disagree, so the index parity gate fires first, not silently.
|
|
139
|
+
|
|
140
|
+
**The deck trigger names the register it owns (SHD-09).** "investor deck" /
|
|
141
|
+
«презентация» was broad enough to catch every presentation request, including the
|
|
142
|
+
`.pptx` files the pptx/pitch-deck neighbours own. Now: *"investor deck as a web
|
|
143
|
+
page" / "веб-презентация"*, with the file-based register explicitly declined in the
|
|
144
|
+
description tail. The T1 carrier word `deck` survives, and the umbrella advertises
|
|
145
|
+
no presentation trigger for this skill, so no routing hook loses a word.
|
|
146
|
+
|
|
147
|
+
**The layout deviation is recorded where a retrofit would look (SHD-11).**
|
|
148
|
+
References at the skill root and tokens two levels deep predate the layout
|
|
149
|
+
guidance, and every deep link, the `.cursor` byte-mirror and `install.sh`'s file
|
|
150
|
+
list depend on them. CONTRIBUTING.md now records the deviation as deliberate so the
|
|
151
|
+
next standards pass reads a decision instead of an accident.
|
|
152
|
+
|
|
153
|
+
Gate: 5060 → 5598 checks (the floor moves with it); both new checks watched
|
|
154
|
+
failing against the real tree first — 46 references and 2 manifests red before the
|
|
155
|
+
regeneration, green after — and each ships a planted defect in the self-test. The
|
|
156
|
+
Contents gate's first live catch was the next release's own file: v1.56.0's
|
|
157
|
+
`MOTION_PRODUCTION.md` landed mid-flight without a list, and the rebase gate
|
|
158
|
+
refused it until `npm run gen-contents` wrote one.
|
|
159
|
+
|
|
9
160
|
## [1.56.0] - 2026-08-30
|
|
10
161
|
|
|
11
162
|
### The render seam — what changes when motion stops being a page
|
package/kits/chorus/src/Slab.md
CHANGED
|
@@ -5,8 +5,10 @@ category: Surfaces
|
|
|
5
5
|
The dark band cut into the paper: `--slab` at `--r-panel`, inset `--slab-inset` (30px,
|
|
6
6
|
measured against the viewport rather than a parent), full width otherwise.
|
|
7
7
|
|
|
8
|
-
It carries `data-
|
|
9
|
-
|
|
8
|
+
It carries `data-surface="slab"` — the library's own unprefixed hook, so this pack
|
|
9
|
+
can be A/B'd against any other by swapping the token layer alone — and that
|
|
10
|
+
attribute is what re-declares the six tokens that would otherwise resolve to a
|
|
11
|
+
light-field value on a dark ground. That re-declaration is not decoration:
|
|
10
12
|
the ink focus ring measures 1.00:1 against `--slab` and would vanish on the band that
|
|
11
13
|
carries the closing CTA.
|
|
12
14
|
|
package/kits/chorus/src/Slab.tsx
CHANGED
|
@@ -39,10 +39,16 @@
|
|
|
39
39
|
|
|
40
40
|
MEASURED — the literal was computed on the live page or read from an authored
|
|
41
41
|
Framer token that the census confirmed paints.
|
|
42
|
-
SELECTED — a value the reference ships in another role, taken because a floor
|
|
43
|
-
forces the move; only the role changes.
|
|
44
42
|
DERIVED — computed from a token here because the reference's own value fails a
|
|
45
43
|
floor. Hue is held; lightness moves and chroma is clipped to gamut.
|
|
44
|
+
PACK DECISION — a value the reference does not carry at all, so there was
|
|
45
|
+
nothing to measure. Two of them, and both are named where they sit: the
|
|
46
|
+
mirrored cut corner, which the reference ships in one direction only, and the
|
|
47
|
+
state clock, because the reference's controls compute to 0s.
|
|
48
|
+
|
|
49
|
+
There is no SELECTED family here. The reference offers no darker step of its own
|
|
50
|
+
in any hue that fails, so every correction below had to be DERIVED — which is
|
|
51
|
+
the opposite of `surveyor`, whose whole remedy was its reference's own ladder.
|
|
46
52
|
|
|
47
53
|
The corrections are in the pack's Gotchas, and there are six. */
|
|
48
54
|
|
|
@@ -150,6 +156,13 @@
|
|
|
150
156
|
--danger: #d03950;
|
|
151
157
|
--info: #1167f4;
|
|
152
158
|
--on-status: #ffffff; /* 4.84:1 on --good, 4.79:1 on --danger, 4.92:1 on --info */
|
|
159
|
+
/* The delta chip's ground. The reference paints its rose at two alphas over the
|
|
160
|
+
field (10% and 15%); the green wash is the same construction at the same
|
|
161
|
+
alpha, which is a PACK DECISION stated rather than a measurement implied.
|
|
162
|
+
@role non-text: --good-weak, --danger-weak — a tint under a figure that
|
|
163
|
+
carries its own solid; nothing is written ON them. */
|
|
164
|
+
--good-weak: rgba(25, 132, 0, 0.1);
|
|
165
|
+
--danger-weak: rgba(208, 57, 80, 0.1);
|
|
153
166
|
|
|
154
167
|
/* ---- Status on the slab: a separate ladder, and the mint lives only here */
|
|
155
168
|
/* MEASURED on the dark wells. The mint is the identity of the reading — 36
|
|
@@ -215,7 +228,10 @@
|
|
|
215
228
|
--focus-w: 2px;
|
|
216
229
|
--focus-offset: 2px;
|
|
217
230
|
--focus-color: var(--ink-strong);
|
|
218
|
-
|
|
231
|
+
/* It points at the ink token rather than at --paper: a ring on the dark IS ink,
|
|
232
|
+
and two names for one value is what this file's own coral comment argues
|
|
233
|
+
against. The ratio it has to clear is the one --on-slab already states. */
|
|
234
|
+
--focus-color-on-dark: var(--on-slab);
|
|
219
235
|
|
|
220
236
|
/* ---- Radii: a measured ladder, and one corner that is not there -------- */
|
|
221
237
|
/* MEASURED across the census: 8px on a badge, 10px on a chip and eyebrow, 12px
|
|
@@ -240,8 +256,13 @@
|
|
|
240
256
|
--r-bubble: 24px 0 24px 24px;
|
|
241
257
|
--r-bubble-mirror: 0 24px 24px 24px;
|
|
242
258
|
|
|
243
|
-
/* ---- Spacing:
|
|
244
|
-
/*
|
|
259
|
+
/* ---- Spacing: the measured steps, named by their step number ---------- */
|
|
260
|
+
/* The suffix is the ladder's INDEX, not the value in quarters — `--space-10`
|
|
261
|
+
is the tenth step and it is 32px. That is worth stating because the values
|
|
262
|
+
are the reference's own measured gaps (4, 6, 8, 10, 12, 16, 24, 32, 40, 100)
|
|
263
|
+
and two of them are not multiples of four, so no arithmetic reading of the
|
|
264
|
+
name survives contact with the ladder. Read the comment, not the number.
|
|
265
|
+
MEASURED. The card's padding is 32px and its internal gap is 32px, and
|
|
245
266
|
NEITHER CHANGES at 390 — the card keeps desktop padding on a 350px sheet,
|
|
246
267
|
which is a deliberate property of the reference and is stated in Responsive.
|
|
247
268
|
The section rhythm is 100px at desktop. */
|
|
@@ -310,6 +331,9 @@
|
|
|
310
331
|
--track-display: -0.0625em; /* MEASURED — -3.5px at 56px */
|
|
311
332
|
--track-display-sm: -0.025em; /* MEASURED — -1px at 40px; it RELAXES */
|
|
312
333
|
--track-h2: -0.032em; /* MEASURED — -1.4px at 44px */
|
|
334
|
+
--track-h2-sm: -0.025em; /* MEASURED — -1px at 34px, the narrow section head.
|
|
335
|
+
It exists because the Responsive table asks for it: a size step with no
|
|
336
|
+
tracking token forces the literal this library bans everywhere else. */
|
|
313
337
|
--track-quote: -0.02em; /* MEASURED — -0.48px at 24px */
|
|
314
338
|
|
|
315
339
|
--weight-body: 400;
|
|
@@ -339,11 +363,21 @@
|
|
|
339
363
|
line-height: var(--lh-body);
|
|
340
364
|
}
|
|
341
365
|
|
|
342
|
-
/* The slab is a surface, not a theme — the page never inverts.
|
|
343
|
-
|
|
344
|
-
|
|
366
|
+
/* The slab is a surface, not a theme — the page never inverts. The hook is the
|
|
367
|
+
library's own `[data-surface]`, unprefixed: every other surface-variant pack in
|
|
368
|
+
this collection uses that attribute, and the index's selection protocol says to
|
|
369
|
+
compare candidates by changing the token layer alone. A namespaced hook would
|
|
370
|
+
have made chorus the one pack you cannot A/B without editing the markup, which
|
|
371
|
+
is a cost paid by every reader to buy nothing. `.chorus-slab` is kept beside it
|
|
372
|
+
as an alias, because a class is what a component library reaches for.
|
|
373
|
+
|
|
374
|
+
What the block owes is every token that would otherwise resolve to a light-field
|
|
375
|
+
value on a dark ground. There are SIX, and the count is stated because the first
|
|
376
|
+
version of this block listed two, changed five, and left the sixth — --on-status
|
|
377
|
+
— at its root white, which put white on the mint at 1.32:1 inside the one
|
|
378
|
+
surface the pack invented the mint for. */
|
|
345
379
|
.chorus-slab,
|
|
346
|
-
[data-
|
|
380
|
+
[data-surface="slab"] {
|
|
347
381
|
background-color: var(--slab);
|
|
348
382
|
color: var(--on-slab);
|
|
349
383
|
--focus-color: var(--focus-color-on-dark);
|
|
@@ -351,6 +385,24 @@
|
|
|
351
385
|
--good: var(--good-on-dark);
|
|
352
386
|
--danger: var(--danger-on-dark);
|
|
353
387
|
--info: var(--info-on-dark);
|
|
388
|
+
/* The sixth. On the on-dark ladder the label is INK, not white: --slab on the
|
|
389
|
+
mint is 13.31:1, on the rose 6.01:1, on the periwinkle 7.40:1. White on those
|
|
390
|
+
three is 1.32:1, 2.93:1 and 2.38:1 — the first of them invisible. */
|
|
391
|
+
--on-status: var(--slab);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
/* Custom properties inherit, and a slab is a section rather than a leaf: a white
|
|
395
|
+
card placed inside one would take the slab's white hairline and its mint, which
|
|
396
|
+
is the pack's own ban ("No mint on paper") arriving by inheritance. A light
|
|
397
|
+
surface nested in a slab therefore takes its tokens back. */
|
|
398
|
+
.chorus-slab :is(.ch-card, .ch-well--paper, [data-surface="paper"]),
|
|
399
|
+
[data-surface="slab"] :is(.ch-card, .ch-well--paper, [data-surface="paper"]) {
|
|
400
|
+
--focus-color: var(--ink-strong);
|
|
401
|
+
--line: rgba(70, 72, 77, 0.12);
|
|
402
|
+
--good: #198400;
|
|
403
|
+
--danger: #d03950;
|
|
404
|
+
--info: #1167f4;
|
|
405
|
+
--on-status: #ffffff;
|
|
354
406
|
}
|
|
355
407
|
|
|
356
408
|
/* The reference ships ZERO prefers-reduced-motion rules across 274KB. This block
|
|
@@ -152,6 +152,13 @@
|
|
|
152
152
|
--focus-w: 2px;
|
|
153
153
|
--focus-offset: 2px;
|
|
154
154
|
--focus-color: var(--action);
|
|
155
|
+
/* The ring VANISHES on the one surface the pack fills with --accent: #0a7269 on
|
|
156
|
+
#0d9488 is 1.55:1, under the 3:1 mark floor, and the closer panel is where the
|
|
157
|
+
pack puts its final CTA. So the accent slab re-declares the ring in the pack's
|
|
158
|
+
own paper — #fff7f3 on #0d9488 is 3.54:1, over the floor. Found by a blind
|
|
159
|
+
read of the shipped pack, not by a gate: a token that resolves is a token the
|
|
160
|
+
gates accept, whatever it resolves to underneath. */
|
|
161
|
+
--focus-color-on-accent: var(--bg);
|
|
155
162
|
|
|
156
163
|
/* ---- Radii: a 10px hand, a 24px card, a 32px panel ------------------- */
|
|
157
164
|
/* MEASURED. The control is the se-uikit's own 10px on every button and
|
|
@@ -284,6 +291,13 @@ b {
|
|
|
284
291
|
font-weight: var(--weight-heading);
|
|
285
292
|
}
|
|
286
293
|
|
|
294
|
+
/* The closer panel is the pack's only saturated surface, and the only place the ink
|
|
295
|
+
ring cannot be seen. It is a SURFACE variant, not a theme: nothing else changes. */
|
|
296
|
+
[data-surface="accent"] {
|
|
297
|
+
background-color: var(--accent);
|
|
298
|
+
--focus-color: var(--focus-color-on-accent);
|
|
299
|
+
}
|
|
300
|
+
|
|
287
301
|
/* ── components ── */
|
|
288
302
|
/* Everything below consumes tokens only. The pack's rules in one place: the
|
|
289
303
|
page is flat — elevation is a tint, the one shadow belongs to the detached
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheleg-design-skill",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.58.0",
|
|
4
4
|
"description": "Design taste as an installable agent skill. Cinematic scroll-driven landing pages built on one scroll clock and layered degrade-to-calm motion, a motion doctrine that decides whether to animate before it decides how, three calibration dials, and thirty-nine locked style packs with ready-made design tokens — instrument-console, editorial-luxury, workbench, briefing-room, atrium, orchard, outrank, babylove, patchbay, nameplate, field-notes, cyclorama, showroom, blueprint, prism, maquette, scoreboard, datasheet, manpage, pigeonhole, roster, ora, tenor, paperclip, ledger, router, daylight, notation, almanac, vitrine, proscenium, awning, bulletin, rimlight, onionskin, deskmate, test-drive, surveyor and chorus. Colour, slop and fork-reciprocity gates run as scripts, not opinions. Works with Cursor, Claude Code and any agent that reads a SKILL.md.",
|
|
5
5
|
"bin": {
|
|
6
6
|
"sheleg-design-skill": "bin/cli.js"
|
|
@@ -19,13 +19,17 @@
|
|
|
19
19
|
"node": ">=16"
|
|
20
20
|
},
|
|
21
21
|
"scripts": {
|
|
22
|
-
"test": "python3 test/validate.py && python3 test/validate_palette.py && python3 test/sloplint.py && node --check bin/cli.js && node test/installer_test.js && npm run selftest",
|
|
22
|
+
"test": "python3 test/validate.py && python3 test/validate_palette.py && python3 test/sloplint.py && python3 tools/chrome.py && node --check bin/cli.js && node test/installer_test.js && npm run selftest",
|
|
23
23
|
"validate": "python3 test/validate.py && python3 test/validate_palette.py && python3 test/sloplint.py",
|
|
24
24
|
"smoke": "node bin/cli.js --help",
|
|
25
25
|
"palette": "python3 test/validate_palette.py",
|
|
26
26
|
"sync-kits": "python3 scripts/sync-kit-tokens.py",
|
|
27
|
+
"gen-descriptions": "python3 scripts/gen_manifest_descriptions.py --write",
|
|
28
|
+
"gen-contents": "python3 scripts/gen_contents.py --write",
|
|
27
29
|
"sloplint": "python3 test/sloplint.py",
|
|
28
|
-
"selftest": "python3 test/validate.py --self-test && python3 test/validate_palette.py --self-test && python3 test/sloplint.py --self-test"
|
|
30
|
+
"selftest": "python3 test/validate.py --self-test && python3 test/validate_palette.py --self-test && python3 test/sloplint.py --self-test",
|
|
31
|
+
"site": "python3 tools/site.py --out _site",
|
|
32
|
+
"chrome": "python3 tools/chrome.py"
|
|
29
33
|
},
|
|
30
34
|
"keywords": [
|
|
31
35
|
"skill",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheleg-design",
|
|
3
3
|
"displayName": "SHELEG Design",
|
|
4
|
-
"description": "SHELEG Design methodology: cinematic scroll-driven landing pages (single scroll clock, layered degrade-to-calm motion, WebGL particle formations), a motion doctrine that decides whether to animate before it decides how, and thirty-nine pluggable visual style packs — instrument-console (
|
|
5
|
-
"version": "1.
|
|
4
|
+
"description": "SHELEG Design methodology: cinematic scroll-driven landing pages (single scroll clock, layered degrade-to-calm motion, WebGL particle formations), a motion doctrine that decides whether to animate before it decides how, and thirty-nine pluggable visual style packs, each with a ready-made token layer — instrument-console (near-black aerospace console; technical systems and infrastructure), editorial-luxury (cream and espresso; editorial, research, premium B2B), workbench (quiet light/dark UI; dashboards, admin, internal tools), briefing-room (dark 16:9 deck; investor and board presentations), atrium (cream daylight; consumer health and high-trust DTC), babylove (white with orange; SEO SaaS, long time-to-value, disconnected states), patchbay (black with mint-cyan; engines, buses, pipelines, OSS front doors), nameplate (cool slab with coral; press, certification and third-party trust), rimlight (white with blue light; studios, services and case studies), onionskin (white working sheet; developer and AI infrastructure), deskmate (warm beige with a dusk bleed; AI coworkers and chat-native agents), test-drive (warm paper with one coral; self-serve SaaS proven by the live product), surveyor (peach paper with teal and pink; visibility, monitoring and benchmark tools), chorus (warm paper under a crosshair grid, with a cut-corner bubble; AI-search visibility, brand monitoring and community marketing), outrank (white with violet; one brand across marketing and product), orchard (warm oat slabs; friendly biotech and wellness), field-notes (ruled green paper; auditable open-source developer tools), showroom (white gallery; product-led companies selling the app), blueprint (white technical stock; vector, storage and query infrastructure), prism (iridescent hard edge; command-first OSS infrastructure), maquette (near-black table; enterprise data infrastructure), cyclorama (looping pastel field; applied-AI consultancies), scoreboard (warm paper; growth, ads and accumulating metrics), datasheet (off-white specification; fraud, identity and device intelligence), manpage (cream manual; APIs, SDKs, CLIs and MCP servers), pigeonhole (filed white field; inbox, ticket and CRM triage), roster (faint square grid; platforms sold through who uses them), ora (warm coal; machine verdicts, audits and protocol traces), tenor (warm management paper; agent operations and autonomous back office), ledger (cream ruled console; analysts, BI and warehouse agents), paperclip (monochrome coal; orchestrators, schedulers and job runners), awning (white commerce forecourt; storefront, payroll and billing platforms), router (pale console with hairlines; dashboard, billing and inventory surfaces), daylight (bright portal with one shadow; client onboarding and service portals), notation (restrained technical hairlines; OSS, docs and developer workspaces), almanac (oatmeal editorial paper; manifestos and category-defining pages), vitrine (serif trust display; evaluated B2B, security and compliance), proscenium (white demo sequence; product tours and launch pages), bulletin (cheerful outlined bands; broad SMB and agency platforms). Ships the sheleg-design skill, the architecture reference, the motion doctrine, the Figma and Claude Design bridges, AI-surface patterns, the packs' token CSS, and the /sheleg-design command.",
|
|
5
|
+
"version": "1.58.0",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "ssheleg",
|
|
8
8
|
"url": "https://x.com/sshlg93"
|
|
@@ -14,6 +14,19 @@ and states, not a palette. Every token named here is workbench's.
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
+
## Contents
|
|
18
|
+
|
|
19
|
+
- 1. The five states of a model call
|
|
20
|
+
- 2. Streaming beats spinners
|
|
21
|
+
- 3. Latency has two numbers
|
|
22
|
+
- 4. Provenance and uncertainty
|
|
23
|
+
- 5. Agent actions: the confirm is the design
|
|
24
|
+
- 6. Empty states carry the capability
|
|
25
|
+
- 7. Chat is a shape, not the shape
|
|
26
|
+
- 8. Cost, quota and scope
|
|
27
|
+
- 9. Bans
|
|
28
|
+
- Evidence
|
|
29
|
+
|
|
17
30
|
## 1. The five states of a model call
|
|
18
31
|
|
|
19
32
|
Design all five before building any. Most AI UI ships state 2 and 3 only, then
|
|
@@ -15,6 +15,16 @@ agent that does not have it — the pack stands on its own and nothing below app
|
|
|
15
15
|
|
|
16
16
|
---
|
|
17
17
|
|
|
18
|
+
## Contents
|
|
19
|
+
|
|
20
|
+
- 1. What crosses, and in what shape
|
|
21
|
+
- 2. Style packs — the pack is the source of truth
|
|
22
|
+
- 3. Figma — one border at a time
|
|
23
|
+
- 4. Reference sweeps (Lazyweb, Mobbin, Refero) — layout crosses, identity does not
|
|
24
|
+
- 5. Live-site extraction — the pack first, the sync second
|
|
25
|
+
- 6. What cannot cross
|
|
26
|
+
- 7. Round-trip discipline
|
|
27
|
+
|
|
18
28
|
## 1. What crosses, and in what shape
|
|
19
29
|
|
|
20
30
|
A kit ships **three layers**, and they are a stack rather than a menu:
|
|
@@ -15,6 +15,13 @@ stands on its own and nothing below applies.
|
|
|
15
15
|
|
|
16
16
|
---
|
|
17
17
|
|
|
18
|
+
## Contents
|
|
19
|
+
|
|
20
|
+
- 1. Code → Figma (publish the pack as variables)
|
|
21
|
+
- 2. Figma → code (implement a design without importing slop)
|
|
22
|
+
- 3. What cannot cross
|
|
23
|
+
- 4. Round-trip discipline
|
|
24
|
+
|
|
18
25
|
## 1. Code → Figma (publish the pack as variables)
|
|
19
26
|
|
|
20
27
|
Use when a project has the pack in code and needs the design file to match — or
|
|
@@ -9,7 +9,7 @@ pack's `## Responsive` section covers that, and this file does not repeat it.
|
|
|
9
9
|
|
|
10
10
|
- What a pack decides here, and what it does not
|
|
11
11
|
- The six rules every pack already carries — and one no pack answers
|
|
12
|
-
- Reference sweeps
|
|
12
|
+
- Reference sweeps — structure crosses, identity does not
|
|
13
13
|
|
|
14
14
|
## What a pack decides here, and what it does not
|
|
15
15
|
|
|
@@ -8,6 +8,20 @@ Every number here is a decision someone else already paid for. Use them.
|
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
+
## Contents
|
|
12
|
+
|
|
13
|
+
- 1. Should this animate at all?
|
|
14
|
+
- 2. Easing
|
|
15
|
+
- 3. Duration
|
|
16
|
+
- 4. Springs
|
|
17
|
+
- 5. Forbidden forms
|
|
18
|
+
- 6. Scroll motion
|
|
19
|
+
- 7. Motion that came from a design tool
|
|
20
|
+
- 8. Anti-drift
|
|
21
|
+
- 9. Reduced motion
|
|
22
|
+
- 10. Pre-flight
|
|
23
|
+
- How the calibration dials bind
|
|
24
|
+
|
|
11
25
|
## 1. Should this animate at all?
|
|
12
26
|
|
|
13
27
|
The first question is not "what animation" — it is "how often will a person see
|
|
@@ -339,10 +353,14 @@ parallax and `animation-timeline`; it keeps a sticky nav, which is the only diff
|
|
|
339
353
|
**Four more standalone packs pin their own, and each states it in its own Register:**
|
|
340
354
|
`ora` at **4**, `tenor` at **4**, `paperclip` at **5** — the last one higher because it
|
|
341
355
|
is the only pack in the family that spends a native scroll-driven parallax —
|
|
342
|
-
and `bulletin` at **3**,
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
356
|
+
and `bulletin` at **3**, because its whole measured motion budget is an entrance
|
|
357
|
+
fade, a 0.12s press and a 0.3s hover. Its depth is drawn as a hard ink offset
|
|
358
|
+
rather than animated, and animating that offset is precisely what flattens it.
|
|
359
|
+
**The lowest ceiling in the library is 2**, and four of them pin it. This sentence
|
|
360
|
+
called `bulletin` the lowest for four releases while two others already sat under
|
|
361
|
+
it, which is why the number is now derived: `validate_motion_ceiling_floor()`
|
|
362
|
+
recomputes the minimum from the packs' own Register lines and fails when this
|
|
363
|
+
paragraph disagrees with them.
|
|
346
364
|
`field-notes` is standalone **by default** and may opt into the cinematic layer — it carries a `## Motion flavor` section saying
|
|
347
365
|
how — so it is the one standalone pack without a hard ceiling. Read that
|
|
348
366
|
section before turning the dial up on it.
|
|
@@ -9,6 +9,16 @@ plays.
|
|
|
9
9
|
That is a different medium with different physics, and treating it as "the same
|
|
10
10
|
animation, exported" is the mistake this document exists to prevent.
|
|
11
11
|
|
|
12
|
+
## Contents
|
|
13
|
+
|
|
14
|
+
- The boundary
|
|
15
|
+
- Before the tool: what a rendered asset costs
|
|
16
|
+
- The two tools, measured
|
|
17
|
+
- The recommendation, and the three conditions that reverse it
|
|
18
|
+
- The token seam
|
|
19
|
+
- Reduced motion, on the other side of the render
|
|
20
|
+
- Pre-flight for a rendered asset
|
|
21
|
+
|
|
12
22
|
## The boundary
|
|
13
23
|
|
|
14
24
|
| The motion is… | It belongs to | Read |
|
|
@@ -26,6 +26,25 @@ build new sites on the same principles and understand *why* each piece works.
|
|
|
26
26
|
|
|
27
27
|
---
|
|
28
28
|
|
|
29
|
+
## Contents
|
|
30
|
+
|
|
31
|
+
- 0. The one-paragraph thesis
|
|
32
|
+
- 1. Architecture at a glance
|
|
33
|
+
- 2. Layer 1 — The scroll store (the single clock)
|
|
34
|
+
- 3. Layer 2 — Smooth scroll (one position per frame)
|
|
35
|
+
- 4. Layer 3 — The particle field (the scene-formation engine)
|
|
36
|
+
- 5. Layer 4 — The 2D fallback (SignalMesh)
|
|
37
|
+
- 6. Layer 5 — The projection bridge (fusing DOM and WebGL)
|
|
38
|
+
- 7. Layer 6 — DOM choreography
|
|
39
|
+
- 8. Layer 7 — Reveal primitives (act-themed entrances)
|
|
40
|
+
- 9. Layer 8 — Scrubbed instruments (GSAP recipe)
|
|
41
|
+
- 10. Cross-cutting rules
|
|
42
|
+
- 11. Recipe — build a new SHELEG site from scratch
|
|
43
|
+
- 12. Why it works (the deeper principles)
|
|
44
|
+
- 13. File map (one file per idea)
|
|
45
|
+
- Quick reference — each rule, and the failure it prevents
|
|
46
|
+
- Three looks that are defaults, not decisions
|
|
47
|
+
|
|
29
48
|
## 0. The one-paragraph thesis
|
|
30
49
|
|
|
31
50
|
A landing page feels "alive" not because it has many animations, but because a
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: sheleg-design
|
|
3
|
-
description: Use when deciding how something LOOKS or MOVES — cinematic landing pages and hero sections, particle/WebGL backgrounds, scroll-linked or scrubbed motion, layers that drift, dashboards, admin or internal tools, mobile screens, chat or agent interfaces, tokens, themes, palettes, typography and the Figma border. Triggers
|
|
3
|
+
description: Use when deciding how something LOOKS or MOVES — cinematic landing pages and hero sections, particle/WebGL backgrounds, scroll-linked or scrubbed motion, layers that drift, dashboards, admin or internal tools, mobile screens, chat or agent interfaces, tokens, themes, palettes, typography and the Figma border. Triggers: "design a landing" / "дизайн лендинга", "build a landing page" / "сделай лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens, style pack" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables" / "переменные фигмы, фигма в код", "mobile screen" / "мобильный экран", "palette, colors" / "палитра, цвета", "typography, font" / "типографика, шрифт", "how it looks, make it prettier" / "выглядит, красиво, красивее", "visual reference" / "визуальные референсы", "investor deck as a web page" / "веб-презентация". Not for structure, copy, backend behavior, or .pptx decks.
|
|
4
4
|
license: MIT
|
|
5
|
+
compatibility: Optional siblings — dataviz, shadcn, migrate-radix-to-base; each has an in-text fallback when absent.
|
|
5
6
|
metadata:
|
|
6
|
-
version: 1.
|
|
7
|
+
version: 1.58.0
|
|
7
8
|
---
|
|
8
9
|
|
|
9
10
|
# SHELEG Design
|
|
@@ -156,10 +157,14 @@ as a definition of done, in that order:
|
|
|
156
157
|
- **Scene depth — six layers** ([`SURFACE_COMPOSITION.md`](./SURFACE_COMPOSITION.md)),
|
|
157
158
|
before writing CSS for a cinematic page. A scene has planes; everything on one
|
|
158
159
|
plane is the failure no amount of easing repairs.
|
|
159
|
-
- **Charts —
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
160
|
+
- **Charts — the role contract in the same file, plus the `dataviz` handoff
|
|
161
|
+
where that skill exists**, before drawing a chart in any pack. Token names are
|
|
162
|
+
not uniform across the thirty-nine packs — only `--bg` and `--ink` resolve in
|
|
163
|
+
every one — and an undefined custom property does not error, it silently falls
|
|
164
|
+
back. Guessing one is the quietest way to ship a wrong chart. A `dataviz`
|
|
165
|
+
skill is an optional neighbour this skill does not ship: where none is
|
|
166
|
+
installed, the role table in `SURFACE_COMPOSITION.md` IS the chart contract,
|
|
167
|
+
applied by hand.
|
|
163
168
|
- **Mobile surfaces** ([`MOBILE_SURFACES.md`](./MOBILE_SURFACES.md)), when the
|
|
164
169
|
brief is a native app screen or a mobile-web view — not a desktop page whose
|
|
165
170
|
only mobile concern is collapse. Five mobile rules the packs each state alone,
|
|
@@ -232,9 +237,13 @@ there, the work is bespoke scroll and WebGL, and reaching for a component kit is
|
|
|
232
237
|
how a hero ends up looking like a settings screen.
|
|
233
238
|
|
|
234
239
|
**Who does the work.** This section decides *whether* and *against which tokens*.
|
|
235
|
-
|
|
236
|
-
`migrate-radix-to-base` handles the Radix→Base move; both are
|
|
237
|
-
|
|
240
|
+
Where the `shadcn` skill is installed it does the adding, searching and
|
|
241
|
+
composing, and `migrate-radix-to-base` handles the Radix→Base move; both are
|
|
242
|
+
**optional neighbours** this skill declares in its `compatibility` line and does
|
|
243
|
+
not ship, and they trigger on their own words where present. Where they are
|
|
244
|
+
absent nothing is blocked: the kit's own CLI (`npx shadcn@latest add
|
|
245
|
+
<component>`) does the adding, and the token mapping above binds either way. Do
|
|
246
|
+
not restate their component docs here.
|
|
238
247
|
|
|
239
248
|
## Optional — Figma (design ↔ code)
|
|
240
249
|
|
|
@@ -53,9 +53,15 @@ A pack that bans grain and blur leaves the slot empty rather than filling it —
|
|
|
53
53
|
|
|
54
54
|
## Charts and data — hand the pack to `dataviz`
|
|
55
55
|
|
|
56
|
-
Do not
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
Do not let a chart library pick its own colours. Where a `dataviz` skill is
|
|
57
|
+
installed, it owns chart form, colour roles and the runnable palette validation,
|
|
58
|
+
and a pack is the *parameter set* it consumes — hand it the values mapped below.
|
|
59
|
+
That skill is an **optional neighbour**: this skill declares it in its
|
|
60
|
+
`compatibility` front-matter and does not ship it, so its absence is an ordinary
|
|
61
|
+
state, not a broken install. **Where no dataviz skill is installed, the role
|
|
62
|
+
table below is the contract** — resolve each role from the chosen pack's token
|
|
63
|
+
layer by hand, and the status map and the two rules at the end of this section
|
|
64
|
+
bind exactly the same, with nobody to hand them to.
|
|
59
65
|
|
|
60
66
|
**Read the chosen pack's own token names before you write a single `var()`.**
|
|
61
67
|
This table is by *role*, not by token, because the names are not uniform across
|