@aitrien/motifspec 1.13.0 → 1.13.2

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 (83) hide show
  1. package/CHANGELOG.md +269 -257
  2. package/LICENSE +21 -21
  3. package/README.md +150 -150
  4. package/dist/backdrop.html +1 -1
  5. package/dist/chroma.css +36 -36
  6. package/dist/codex.css +1145 -1145
  7. package/dist/codex.js +126 -126
  8. package/dist/contrast.md +101 -101
  9. package/dist/fonts.css +3 -3
  10. package/dist/icons.svg +18 -18
  11. package/dist/plate.html +1 -1
  12. package/dist/plate.js +292 -292
  13. package/dist/theme-init.js +1 -1
  14. package/dist/tokens.css +466 -466
  15. package/dist/tokens.js +3330 -3330
  16. package/dist/tokens.json +3330 -3330
  17. package/docs/components/_template.md +37 -37
  18. package/docs/components/accession-label.md +106 -106
  19. package/docs/components/backdrop.md +83 -83
  20. package/docs/components/button-and-link.md +87 -87
  21. package/docs/components/callout.md +75 -75
  22. package/docs/components/code-block.md +109 -109
  23. package/docs/components/data-table.md +73 -73
  24. package/docs/components/figure.md +68 -68
  25. package/docs/components/heading-anchor.md +76 -76
  26. package/docs/components/icon.md +63 -63
  27. package/docs/components/ornament.md +77 -77
  28. package/docs/components/pagination.md +78 -78
  29. package/docs/components/post-list-item.md +91 -91
  30. package/docs/components/project-card.md +82 -82
  31. package/docs/components/prose.md +122 -122
  32. package/docs/components/site-footer.md +99 -99
  33. package/docs/components/site-header.md +133 -133
  34. package/docs/components/specimen-plate.md +92 -92
  35. package/docs/components/table-of-contents.md +83 -83
  36. package/docs/components/tag.md +70 -70
  37. package/docs/components/tooltip.md +67 -67
  38. package/docs/hugo.md +120 -120
  39. package/docs/syntax-highlighting.md +55 -55
  40. package/docs/templates.md +30 -30
  41. package/fonts/OFL-jetbrains-mono.txt +93 -93
  42. package/fonts/OFL-national-park.txt +93 -93
  43. package/fonts/OFL-yarndings-12.txt +93 -93
  44. package/icons/LICENSE +202 -202
  45. package/icons/manifest.json +75 -75
  46. package/layouts/_markup/render-blockquote.html +30 -30
  47. package/layouts/_markup/render-codeblock.html +18 -18
  48. package/layouts/_markup/render-heading.html +2 -2
  49. package/layouts/_markup/render-image.html +14 -14
  50. package/layouts/_markup/render-link.html +14 -14
  51. package/layouts/_markup/render-table.html +31 -31
  52. package/layouts/_partials/motifspec/accession/id.html +2 -2
  53. package/layouts/_partials/motifspec/accession/label.html +18 -18
  54. package/layouts/_partials/motifspec/accession/status.html +2 -2
  55. package/layouts/_partials/motifspec/article.html +24 -24
  56. package/layouts/_partials/motifspec/back-link.html +2 -2
  57. package/layouts/_partials/motifspec/body-end.html +5 -5
  58. package/layouts/_partials/motifspec/body-start.html +5 -5
  59. package/layouts/_partials/motifspec/figure.html +14 -14
  60. package/layouts/_partials/motifspec/filed-under.html +5 -5
  61. package/layouts/_partials/motifspec/h2s.html +7 -7
  62. package/layouts/_partials/motifspec/head.html +15 -15
  63. package/layouts/_partials/motifspec/pagination-entries.html +34 -34
  64. package/layouts/_partials/motifspec/pagination-pages.html +30 -30
  65. package/layouts/_partials/motifspec/post-list-item.html +15 -15
  66. package/layouts/_partials/motifspec/project-card.html +23 -23
  67. package/layouts/_partials/motifspec/section-heading.html +3 -3
  68. package/layouts/_partials/motifspec/site-header.html +27 -27
  69. package/layouts/_partials/motifspec/table-of-contents.html +21 -21
  70. package/layouts/_partials/motifspec/tag-filter.html +22 -22
  71. package/layouts/_partials/motifspec/tags.html +8 -8
  72. package/layouts/_partials/motifspec/tokens.html +9 -9
  73. package/package.json +68 -68
  74. package/scripts/check.mjs +153 -153
  75. package/scripts/lib.mjs +176 -176
  76. package/tokens/README.md +3 -3
  77. package/tokens/border.json +63 -63
  78. package/tokens/color.json +1902 -1902
  79. package/tokens/motion.json +207 -207
  80. package/tokens/radius.json +53 -53
  81. package/tokens/size.json +378 -378
  82. package/tokens/space.json +289 -289
  83. package/tokens/typography.json +859 -859
package/CHANGELOG.md CHANGED
@@ -1,257 +1,269 @@
1
- # Changelog
2
-
3
- Every release of MotifSpec (named brand-codex until 1.10.0), newest first. Entries before 1.10.0 keep the names they were released under. Versions follow the rules in `CONVENTIONS.md`: renaming or removing a semantic token is major, adding tokens, components or icons is minor, and changing a value or fixing a description is a patch. `npm run build` fails if the version in `package.json` has no entry here.
4
-
5
- ## [1.13.0] - 2026-10-27
6
-
7
- ### Added
8
- - Published to npm as `@aitrien/motifspec`. The package drops `"private"`, publishes as public, and ships the CSS, scripts, tokens, fonts and their licences, icons, component docs, Hugo templates and the checker. It leaves out the showcase pages, so it is about 238 KB packed instead of 540 KB.
9
- - Exports for `fonts.css`, `chroma.css`, `icons.svg`, `check` (the checker's functions) and `fonts/*`, which were in the package but couldn't be imported.
10
- - `npx motifspec-check`: the rule checker as a command. `--dirs` points it at a non-Hugo project's folders. It now also reads `.jsx`, `.tsx`, `.vue`, `.svelte`, `.astro` and `.mdx` files and `className` attributes, and skips `dist`, `build` and framework output folders.
11
- - The release workflow publishes each new version to npm after tagging it, using npm trusted publishing, with provenance. It skips a version that is already on npm.
12
- - `npm run pack:check`, run in CI: fails if the package is missing a file that an export, the command, the CSS's font URLs or the checker needs, or if it would ship the showcase.
13
- - README: "Using it from npm".
14
-
15
- ## [1.12.0] - 2026-10-27
16
-
17
- ### Added
18
- - `scripts/check.mjs`, the one rule checker for projects that use MotifSpec (`npm run check -- <dir>`). Sites run it from their pinned module, so they are checked against the release they use; the MCP server's `check_styles` will call the same code. It checks `layouts/` and `content/` and fails on:
19
- - a stylesheet in the project, or a `style` attribute
20
- - a raw colour, or a number with a length or time unit (zero is allowed)
21
- - a primitive, unknown or deprecated `--cx-` token
22
- - a `cx-` class that `dist/codex.css` and the shipped scripts don't define, or a `cx-icon-` that isn't in `icons/manifest.json`. Classes and icons built from Hugo template actions are skipped.
23
- - "·" used as a separator
24
-
25
- In GitHub Actions, each problem is also an annotation on the pull request; `--json` prints them as JSON. It exports `checkText` and `checkProject` for other tools.
26
- - `npm run audit` now runs the checker on `layouts/` and on the HTML examples in `docs/components/`, so the markup sites copy passes the rules they're held to.
27
- - `docs/hugo.md`: how a site runs the checker.
28
-
29
- ## [1.11.0] - 2026-10-26
30
-
31
- ### Added
32
- - Hugo templates. The module now mounts `layouts/`, so a site gets the components as partials under `motifspec/` and the Markdown render hooks, instead of keeping its own copies that can drift from `docs/components/`. Moved from aitrien.com without changing their output:
33
- - Page shell: `head.html`, `body-start.html` (backdrop, icon sprite, skip link), `site-header.html` and `body-end.html`.
34
- - Components: `article.html`, `project-card.html`, `post-list-item.html`, `accession/label.html`, `accession/id.html`, `accession/status.html`, `figure.html`, `table-of-contents.html`, `tags.html`, `tag-filter.html`, `filed-under.html`, `pagination-entries.html`, `pagination-pages.html`, `back-link.html`, `section-heading.html`, plus `tokens.html` and `h2s.html` helpers.
35
- - Render hooks for headings, images, tables, code blocks, blockquotes and links.
36
- - `docs/hugo.md`: every partial with its context and component doc, the front matter they read, the render hooks and the Markdown they expect, and the Goldmark settings they need.
37
- - `npm run audit` also checks `layouts/`: no style attributes, raw colours, sizes or durations.
38
-
39
- ### Changed
40
- - A figure in Markdown is numbered from Plate 2 when the page has a `hero` in front matter (the hero is Plate 1), and from Plate 1 otherwise. On aitrien.com this was keyed to the Work section, which is where every hero is, so its plates don't change.
41
-
42
- ## [1.10.4] - 2026-10-26
43
-
44
- The changes below were meant for 1.10.3, but the `v1.10.3` tag was created a minute before they were merged, so it points at the same commit as 1.10.2. Versions are immutable once Go has fetched them, so they ship as 1.10.4 instead and 1.10.3 is the same as 1.10.2.
45
-
46
- ### Fixed
47
- - Figures and code blocks in `cx-prose` now get the `space.stack.lg` gap above and below them that the prose rhythm sets. `.cx-figure` and `.cx-code` reset their margins to 0 with a class selector that came later in the stylesheet, which overrode the prose rule, so a figure or code block sat directly under the paragraph before it. The reset now has no specificity (`:where()`), so it only removes the browser's default `<figure>` margins.
48
- - Code block header bar on narrow screens: when the language, file name and copy button wrap onto more than one row, the bar now has `space.inset.sm` padding above and below, so the rows no longer touch the bar's edges. A single-row bar is essentially unchanged: it grows by 1px, its bottom border, which the padding now pushes past `size.target.control`.
49
- - Site header on a phone: when the nav wraps onto its own row, the row has `space.inset.xs` below it, so the current page's highlight no longer sits on the header's bottom border.
50
-
51
- ### Changed
52
- - `color.surface.highlight` in dark mode is now `sap.800` instead of `sap.900`. On `color.surface.base` (`ash.900`) the old value was almost invisible (1.03:1); the new one is the brightest sap step that keeps `color.text.primary` on it above its 7:1 target (9.91:1; `sap.700` would be 5.99:1). It affects the current page in the site nav, text selection and `<mark>`.
53
- - Site nav: the current page's pill now has a `color.accent.border` hairline inside its edge, in both themes, as well as the highlight fill. The fill alone is close to the header's surface (1.06:1 light, 1.28:1 dark); the outline stands out from it at 4.46:1 light and 6.57:1 dark. It's an inset box-shadow, so the pill doesn't change size.
54
-
55
- ## [1.10.3] - 2026-10-26
56
-
57
- Tagged on the same commit as 1.10.2 by mistake; no changes. Use 1.10.4.
58
-
59
- ## [1.10.2] - 2026-10-23
60
-
61
- ### Fixed
62
- - Site header on a phone: when the nav and controls wrap below the wordmark, the nav link text now lines up with the wordmark and the page text instead of starting about 17px further in. `dist/codex.js` marks the wrapped header with `data-wrapped`; the nav then starts at the left of its row and is offset by its pills' padding (a relative offset, so it can't change whether the header wraps), and the controls stay at the right. Without the script the row stays right-aligned as before.
63
-
64
- ## [1.10.1] - 2026-10-22
65
-
66
- ### Fixed
67
- - Contour drift no longer starts abruptly. The backdrop used to sit still for `motion.duration.plate` (the specimen plate's draw-in time, which the backdrop doesn't have) and then jump to full speed. It now starts as soon as `dist/plate.js` runs, and every start, on the backdrop and the plate, eases from rest to full speed over `motion.duration.plate`: on load, after the pause control is released, and when a hidden tab or an off-screen plate comes back. Pausing still stops the drift at once.
68
-
69
- ## [1.10.0] - 2026-10-21
70
-
71
- ### Changed
72
- - brand-codex is now **MotifSpec**. The repository is `github.com/Aitrien/motifspec` (GitHub redirects the old URL), the Hugo module path is `github.com/aitrien/motifspec`, the npm package is `@aitrien/motifspec`, and `hugo.toml` mounts `dist/` at `assets/motifspec` instead of `assets/brand-codex`. Docs, the README, the showcase, build banners and the planned MCP resource (`motifspec://readme`) use the new name.
73
- - Unchanged on purpose: the `cx-` class and `--cx-` token prefix, the `codex.*` token extensions, the file names `codex.css` and `codex.js`, and the `cx-theme` and `cx-backdrop` storage keys, so markup, tokens and readers' saved settings carry over.
74
-
75
- ### Removed
76
- - `look/`: four QA screenshots committed by mistake in 1.8.0. Nothing referenced them.
77
-
78
- ### Migrating a site
79
- 1. In the site's config, change the module import path to `github.com/aitrien/motifspec`, then run `hugo mod get github.com/aitrien/motifspec@v1.10.0` and drop the old `brand-codex` lines from `go.mod` and `go.sum`. Earlier tags still declare the old module path, so 1.10.0 is the first release that can be fetched under the new one.
80
- 2. Replace `resources.Get "brand-codex/…"` with `resources.Get "motifspec/…"`. The published asset folder becomes `/motifspec/`.
81
-
82
- ## [1.9.0] - 2026-10-20
83
-
84
- ### Changed
85
- - Site header on backdrop pages: it still starts on the frost, but once the page scrolls it becomes sticky and its `color.surface.base` surface fades in over `motion.duration.slow`. Back at the top the surface fades out again. `dist/codex.js` sets `data-scrolled` on the header (`"false"` at the top, `"true"` once scrolled); without the script the header scrolls away as before. `site-header.md` and `backdrop.md` updated, including the rule against animating the header on scroll, which now allows this one fade.
86
- - Linked headings and the docked table of contents clear the sticky header at its real height: `dist/codex.js` measures it into `--_header-height`, used by `scroll-padding-top` and the TOC's `top`. Before, one row was assumed, and a header wrapped to two rows on a narrow screen covered the heading.
87
- - Site header on narrow screens: nav pills use half-way padding between `space.inset.sm` and `space.inset.md`, so Work, Writing, About, the pause control and the theme toggle fit one row on a 360px phone (a Galaxy S23) instead of the last link being cut off; narrower than that, the list still scrolls inside its row.
88
- - Hover styles on the nav, the theme toggle and the pause controls apply only under `(hover: hover)`, so a tap on a touch screen no longer leaves the wash stuck on.
89
- - Accession label on case studies: a lead label (`cx-label--lead`) above the title and a card (`cx-label--card`) after the article. Below `size.breakpoint.md` the lead label shows only the number, date and status (role and stack are `cx-label__detail` fields), so on a phone the title starts near the top of the screen, and the card shows the full label at the end. From `size.breakpoint.md` up nothing changes and the card is hidden. `accession-label.md` and the case study row in `templates.md` updated.
90
- - Width media queries: `css/components.css` can write `@media (width < token(size.breakpoint.md))`, and the build fills in the breakpoint value. Only `size.breakpoint.*` tokens, only in `@media` conditions; the audit accepts those values there and nowhere else. The README rule and the breakpoint descriptions now say this instead of "SCSS only".
91
- - Site footer: on a phone the link lists (Pages, Elsewhere) sit side by side in two columns and the colophon takes the row below, instead of every group stacking in one column. The groups are equal-width flex columns: a link list needs half of `size.column.sidebar`, prose a whole one.
92
- - Backdrop: the layer's height is the large viewport (new `size.backdrop.height`, from primitive `size.viewport.1` = `100lvh`) instead of being pinned to the bottom of the screen. On a phone, reaching the bottom of a page slides the address bar away; the layer used to resize with it and the contours jumped.
93
- - Accession label: when the fields wrap onto several rows, each row is now closed by a full-width `color.border.subtle` rule, as in a ruled card. Fields grow to fill their row, and the rules that reach the edge sit under the `color.border.default` frame (drawn again as an outline over the border). Before, wrapped rows were separated only by a gap.
94
- - Backdrop pause control: the choice persists across pages, like the theme. `dist/plate.js` stores `paused` under the `cx-backdrop` key and restores it before the drift starts. The specimen plate's own pause is not stored.
95
-
96
- ## [1.8.0] - 2026-10-19
97
-
98
- ### Added
99
- - Backdrop component (`docs/components/backdrop.md`, `cx-backdrop`, `cx-backdrop-page`): the contour survey drawn full-bleed behind every page under a grainy frost. The page surface fades out over its first and last 30rem, so the frost shows behind the header, the opening statement and the footer, and reading happens on the plain surface. Generated as `dist/backdrop.html` (`@aitrien/brand-codex/backdrop.html`); `dist/plate.js` drifts it.
100
- - Backdrop pause control (`cx-backdrop__pause`) in the site header: a native checkbox pill like the theme toggle, revealed by `dist/plate.js` when the drift starts and hidden under reduced motion.
101
- - Tokens: `size.backdrop.fade` (30rem), `size.backdrop.blur` (0.5rem), `border.width.contour` (3px; index contours twice that), `color.backdrop.tint` (40%), `color.backdrop.grain` (14%), `color.backdrop.saturation` (140%), and `color.wash.hover` (10%) for the header hover. Primitives `primitive.size.effect.*`, `primitive.border.width.3` and `primitive.color.amount.*` (percent, via `codex.unit`). The contours use the specimen plate's `color.ornament.rest` and `color.ornament.strong`.
102
- - `cxPlate.backdrop()` in `js/plate.js`, alongside `markup()`.
103
- - The blur is a CSS `filter` on the contours, over a layer three blur radii larger than the viewport. `backdrop-filter` was tried and rejected: Chromium blurs only what is on screen, which leaves lines sharp at the viewport edge.
104
- - The grain is monochrome fractal noise with no blend mode (blending it brought sharp lines back in Chromium).
105
- - Text over the frost is measured against `color.surface.base`; by design, contrast is not checked against the contour lines beneath it.
106
-
107
- ### Changed
108
- - Every page template sits on the backdrop (`docs/templates.md`). The home statement sits on the frost inside the top fade instead of beside the specimen plate.
109
- - Specimen plate: no longer used on a page with the backdrop (one contour field per page; the showcase, which documents both, is the exception).
110
- - Site header: nav items are pills (`radius.pill`) like the icon-only controls. Nav links, the theme toggle and the pause control share one hover, a wash of `color.text.primary` at `color.wash.hover`, which stays visible on the frost. On a backdrop page the header and footer have no surface of their own and the header is no longer sticky.
111
- - `motion.duration.drift` and the `pause` icon now describe the contour drift on the backdrop as well as the plate.
112
- - README principles: pills include nav items; the contour survey (backdrop or plate) is the one decoration and the one loop per page.
113
- - The showcase sits on the backdrop, with the pause control in its header.
114
-
115
- ## [1.7.0] - 2026-10-16
116
-
117
- ### Changed
118
- - Specimen plate: a contour survey of simplex-noise terrain replaces the Vogel phyllotaxis seed head. The build draws the contours as a static SVG; `js/plate.js` (shipped as `dist/plate.js`) reshapes them as the terrain drifts. Index contours every fifth line, a quarter grid, and a once-only draw-in.
119
- - `color.ornament.*` descriptions now name contour lines, index contours and the survey grid instead of seeds.
120
- - The showcase no longer has its own script. It inlines `dist/theme-init.js` and `dist/codex.js`, the same files sites load, so there is one implementation.
121
- - `npm run audit` also checks `dist/codex.js` and `dist/theme-init.js` on their own.
122
-
123
- ### Added
124
- - `motion.duration.drift` (60000ms): time for the plate's terrain to drift one noise unit.
125
- - `dist/plate.html` and `dist/plate.js` for sites that use the plate, exported as `@aitrien/brand-codex/plate.html` and `/plate.js`.
126
- - `dist/codex.js` (`@aitrien/brand-codex/codex.js`), built from `js/codex.js`: the theme toggle (storage key `cx-theme`), tooltip dismissal on Escape, code copy buttons, and TOC docking with the active section. Timings come from `--cx-motion-*` tokens. Load it with `defer`.
127
- - `dist/theme-init.js` (`@aitrien/brand-codex/theme-init.js`): the one-line `<head>` snippet that applies a stored theme before first paint, documented in `site-header.md`. The build fails if the doc and the file differ.
128
- - `$deprecated` support: the validator requires a reason, rejects deprecated primitives, and fails if a component, the Chroma mapping, a script or a component doc uses a deprecated token. `tokens.css` marks them with a comment and `tokens.json` with a `deprecated` field. `CONVENTIONS.md` describes the deprecate-then-remove rule.
129
-
130
- ### Deprecated
131
- - `motion.duration.pulse` and `motion.easing.pulse`, which only the seed-head pulse used. They stay published with `$deprecated` ("Unused since the contour plate; removed in 2.0.0.") so this release is minor and the module path stays `github.com/aitrien/brand-codex`. Nothing in the system uses them; move off them before 2.0.0.
132
-
133
- ### Fixed
134
- - Without JavaScript, the theme toggle and code copy buttons appeared as dead controls: their `display` rules overrode `hidden`. A base `[hidden]` rule now keeps every script-revealed control hidden until the script reveals it (replacing the plate pause's own rule).
135
- - The `pause` icon's usage rule named the plate's pulse; it now names the drift.
136
-
137
- ## [1.6.0] - 2026-10-16
138
-
139
- ### Added
140
- - `CHANGELOG.md`, linked from every version number in the showcase (hero eyebrow, accession label, footers).
141
- - Version link pattern (`cx-version`): the version number is a link to this file, with a "View changelog" tooltip and the `arrow-outward` icon because it leaves the site.
142
- - `cx-tooltip--above` modifier for tooltips near the bottom of the page.
143
- - Build check: the build stops if `CHANGELOG.md` has no entry for the current version.
144
- - `dist/tokens.js`: the tokens as an ES module (`version`, `changelog`, `tokens`), exported as `@aitrien/brand-codex/tokens.js`.
145
- - MIT `LICENSE` for the code, tokens and docs. Fonts and icons keep their own licences.
146
-
147
- ### Changed
148
- - Header lede: "page templates for connected applications".
149
- - The repo's `hugo.toml` now mounts `fonts/` at `static/fonts` as well as `dist/` at `assets/brand-codex`, so a site only needs the import line.
150
-
151
- ## [1.5.1] - 2026-10-15
152
-
153
- ### Changed
154
- - Replaced the sample blockquote. It had reused a line from a reference site without attribution; it now carries an attributed quotation with its source in `<cite>`.
155
- - `cite` inside blockquote footers is set upright, matching the mono label voice.
156
-
157
- ### Added
158
- - Attribution rules in `prose.md` and the README: quote only with a named person and a traceable source; never copy wording from reference sites into sample content.
159
-
160
- ## [1.5.0] - 2026-10-15
161
-
162
- ### Added
163
- - Full ornament catalogue: all 80 non-emoji Yarndings 12 glyphs, named and grouped (botanical, frost, stitch, diamond, mark) in `font.family.ornament` → `codex.glyphs`, with `roles` for the system's own ornaments and a `forbidden` set.
164
- - Validator rules for the catalogue: kebab-case names, known groups, no shared glyphs, no forbidden glyphs.
165
- - Showcase glyph section generated from the tokens.
166
-
167
- ### Fixed
168
- - The footer ornament band stopped short on wide screens. It now covers more than an 8K display.
169
-
170
- ## [1.4.1] - 2026-10-15
171
-
172
- ### Fixed
173
- - Specimen plate seeds now grow and shrink around their own centres. They were anchored at one corner because the centring transform was applied before the pulse scale.
174
-
175
- ## [1.4.0] - 2026-10-15
176
-
177
- ### Added
178
- - Specimen plate pulse: seeds scale 1 → 1.5 → 1 with a phase offset by radius, so a wave travels from the centre outward.
179
- - `motion.duration.pulse` and `motion.easing.pulse` tokens.
180
- - Pause control for the plate: a native checkbox styled as an icon-only pill, so it works without JavaScript; `pause` and `play` icons.
181
- - Tooltips on `<label>` controls.
182
-
183
- ### Changed
184
- - Motion principle: state changes animate, plus the plate's pausable pulse; reduced motion stops it and removes the control.
185
-
186
- ## [1.3.1] - 2026-10-15
187
-
188
- ### Changed
189
- - The current nav item is highlighted with `color.surface.highlight` instead of an underline; hover uses `color.surface.hover`.
190
- - Heading anchors sit in a 44px round target, like the theme toggle.
191
- - `radius.pill` covers buttons and icon-only controls.
192
-
193
- ## [1.3.0] - 2026-10-15
194
-
195
- ### Added
196
- - Tooltip component, with `color.surface.inverse` and `color.text.inverse`.
197
- - `ash.850` primitive for raised surfaces in dark mode.
198
- - `dist/showcase.standalone.html`, a complete document for opening locally.
199
-
200
- ### Changed
201
- - Theme toggle: an icon-only circle that shows the action ("Switch to dark theme"). Clicking flips the visible theme; returning to the system theme clears the stored choice.
202
- - Copy button and theme toggle are pills; `radius.control` is square.
203
- - Dark surfaces: page `ash.900`, raised `ash.850`, sunken `ash.950`, hover `ash.800` (slightly darkened so secondary text keeps 7:1).
204
-
205
- ### Removed
206
- - `theme-auto` icon.
207
-
208
- ### Fixed
209
- - The inline icon sprite could render as an empty box above the header outside the publishing host.
210
- - Icons blocked hover on the controls that contain them.
211
-
212
- ## [1.2.0] - 2026-10-15
213
-
214
- ### Added
215
- - `radius.pill` token; `cx-button` is pill-shaped.
216
- - Heading anchor component, on every major section heading.
217
-
218
- ### Changed
219
- - `radius.control` is square.
220
-
221
- ## [1.1.0] - 2026-10-15
222
-
223
- ### Added
224
- - Material Symbols (Sharp, weight 300) as a self-hosted SVG sprite with `icons/manifest.json`; build fails on unknown icon references.
225
- - Icon component and `size.icon.*` tokens.
226
- - Separator component (`cx-sep`): a muted pipe hidden from screen readers.
227
-
228
- ### Changed
229
- - Separators are "|" instead of "·".
230
- - Button arrows, pagination, theme toggle, copy button, callout titles, TOC chevron and footer links use icons.
231
-
232
- ### Fixed
233
- - Table row headers no longer take the uppercase column-header style.
234
-
235
- ## [1.0.0] - 2026-10-14
236
-
237
- ### Added
238
- - DTCG tokens: colour, typography, space, size, radius, border and motion, with primitive and semantic tiers, dark mode via `codex.modes` and contrast pairs via `codex.pairsWith`.
239
- - Component docs, Chroma syntax mapping, README principles and the showcase page.
240
- - `npm run validate`, `build` and `audit`.
241
-
242
- [1.10.2]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#1102---2026-10-23
243
- [1.10.1]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#1101---2026-10-22
244
- [1.10.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#1100---2026-10-21
245
- [1.9.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#190---2026-10-20
246
- [1.8.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#180---2026-10-19
247
- [1.7.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#170---2026-10-16
248
- [1.6.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#160---2026-10-16
249
- [1.5.1]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#151---2026-10-15
250
- [1.5.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#150---2026-10-15
251
- [1.4.1]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#141---2026-10-15
252
- [1.4.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#140---2026-10-15
253
- [1.3.1]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#131---2026-10-15
254
- [1.3.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#130---2026-10-15
255
- [1.2.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#120---2026-10-15
256
- [1.1.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#110---2026-10-15
257
- [1.0.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#100---2026-10-14
1
+ # Changelog
2
+
3
+ Every release of MotifSpec (named brand-codex until 1.10.0), newest first. Entries before 1.10.0 keep the names they were released under. Versions follow the rules in `CONVENTIONS.md`: renaming or removing a semantic token is major, adding tokens, components or icons is minor, and changing a value or fixing a description is a patch. `npm run build` fails if the version in `package.json` has no entry here.
4
+
5
+ ## [1.13.2] - 2026-10-27
6
+
7
+ ### Fixed
8
+ - `package.json`'s `repository.url` now spells the repository `Aitrien/motifspec`, as GitHub does. npm compares it with the repository recorded in the provenance statement, and the lowercase spelling is the likely reason the workflow couldn't publish 1.13.1. 1.13.1 is tagged on GitHub but was never published to npm; this release has the same contents.
9
+ - When `npm publish` fails in the release workflow, npm's error lines now appear as annotations on the run.
10
+
11
+ ## [1.13.1] - 2026-10-27
12
+
13
+ ### Changed
14
+ - The release workflow can be run by hand from the Actions tab to retry publishing to npm. Run that way, it publishes main's version only if that version's tag is main's current commit and npm doesn't have it yet, and it never tags.
15
+ - No design changes. This is the first version published to npm by the release workflow (1.13.0 was published by hand), which completes the trusted-publishing setup.
16
+
17
+ ## [1.13.0] - 2026-10-27
18
+
19
+ ### Added
20
+ - Published to npm as `@aitrien/motifspec`. The package drops `"private"`, publishes as public, and ships the CSS, scripts, tokens, fonts and their licences, icons, component docs, Hugo templates and the checker. It leaves out the showcase pages, so it is about 238 KB packed instead of 540 KB.
21
+ - Exports for `fonts.css`, `chroma.css`, `icons.svg`, `check` (the checker's functions) and `fonts/*`, which were in the package but couldn't be imported.
22
+ - `npx motifspec-check`: the rule checker as a command. `--dirs` points it at a non-Hugo project's folders. It now also reads `.jsx`, `.tsx`, `.vue`, `.svelte`, `.astro` and `.mdx` files and `className` attributes, and skips `dist`, `build` and framework output folders.
23
+ - The release workflow publishes each new version to npm after tagging it, using npm trusted publishing, with provenance. It skips a version that is already on npm.
24
+ - `npm run pack:check`, run in CI: fails if the package is missing a file that an export, the command, the CSS's font URLs or the checker needs, or if it would ship the showcase.
25
+ - README: "Using it from npm".
26
+
27
+ ## [1.12.0] - 2026-10-27
28
+
29
+ ### Added
30
+ - `scripts/check.mjs`, the one rule checker for projects that use MotifSpec (`npm run check -- <dir>`). Sites run it from their pinned module, so they are checked against the release they use; the MCP server's `check_styles` will call the same code. It checks `layouts/` and `content/` and fails on:
31
+ - a stylesheet in the project, or a `style` attribute
32
+ - a raw colour, or a number with a length or time unit (zero is allowed)
33
+ - a primitive, unknown or deprecated `--cx-` token
34
+ - a `cx-` class that `dist/codex.css` and the shipped scripts don't define, or a `cx-icon-` that isn't in `icons/manifest.json`. Classes and icons built from Hugo template actions are skipped.
35
+ - "·" used as a separator
36
+
37
+ In GitHub Actions, each problem is also an annotation on the pull request; `--json` prints them as JSON. It exports `checkText` and `checkProject` for other tools.
38
+ - `npm run audit` now runs the checker on `layouts/` and on the HTML examples in `docs/components/`, so the markup sites copy passes the rules they're held to.
39
+ - `docs/hugo.md`: how a site runs the checker.
40
+
41
+ ## [1.11.0] - 2026-10-26
42
+
43
+ ### Added
44
+ - Hugo templates. The module now mounts `layouts/`, so a site gets the components as partials under `motifspec/` and the Markdown render hooks, instead of keeping its own copies that can drift from `docs/components/`. Moved from aitrien.com without changing their output:
45
+ - Page shell: `head.html`, `body-start.html` (backdrop, icon sprite, skip link), `site-header.html` and `body-end.html`.
46
+ - Components: `article.html`, `project-card.html`, `post-list-item.html`, `accession/label.html`, `accession/id.html`, `accession/status.html`, `figure.html`, `table-of-contents.html`, `tags.html`, `tag-filter.html`, `filed-under.html`, `pagination-entries.html`, `pagination-pages.html`, `back-link.html`, `section-heading.html`, plus `tokens.html` and `h2s.html` helpers.
47
+ - Render hooks for headings, images, tables, code blocks, blockquotes and links.
48
+ - `docs/hugo.md`: every partial with its context and component doc, the front matter they read, the render hooks and the Markdown they expect, and the Goldmark settings they need.
49
+ - `npm run audit` also checks `layouts/`: no style attributes, raw colours, sizes or durations.
50
+
51
+ ### Changed
52
+ - A figure in Markdown is numbered from Plate 2 when the page has a `hero` in front matter (the hero is Plate 1), and from Plate 1 otherwise. On aitrien.com this was keyed to the Work section, which is where every hero is, so its plates don't change.
53
+
54
+ ## [1.10.4] - 2026-10-26
55
+
56
+ The changes below were meant for 1.10.3, but the `v1.10.3` tag was created a minute before they were merged, so it points at the same commit as 1.10.2. Versions are immutable once Go has fetched them, so they ship as 1.10.4 instead and 1.10.3 is the same as 1.10.2.
57
+
58
+ ### Fixed
59
+ - Figures and code blocks in `cx-prose` now get the `space.stack.lg` gap above and below them that the prose rhythm sets. `.cx-figure` and `.cx-code` reset their margins to 0 with a class selector that came later in the stylesheet, which overrode the prose rule, so a figure or code block sat directly under the paragraph before it. The reset now has no specificity (`:where()`), so it only removes the browser's default `<figure>` margins.
60
+ - Code block header bar on narrow screens: when the language, file name and copy button wrap onto more than one row, the bar now has `space.inset.sm` padding above and below, so the rows no longer touch the bar's edges. A single-row bar is essentially unchanged: it grows by 1px, its bottom border, which the padding now pushes past `size.target.control`.
61
+ - Site header on a phone: when the nav wraps onto its own row, the row has `space.inset.xs` below it, so the current page's highlight no longer sits on the header's bottom border.
62
+
63
+ ### Changed
64
+ - `color.surface.highlight` in dark mode is now `sap.800` instead of `sap.900`. On `color.surface.base` (`ash.900`) the old value was almost invisible (1.03:1); the new one is the brightest sap step that keeps `color.text.primary` on it above its 7:1 target (9.91:1; `sap.700` would be 5.99:1). It affects the current page in the site nav, text selection and `<mark>`.
65
+ - Site nav: the current page's pill now has a `color.accent.border` hairline inside its edge, in both themes, as well as the highlight fill. The fill alone is close to the header's surface (1.06:1 light, 1.28:1 dark); the outline stands out from it at 4.46:1 light and 6.57:1 dark. It's an inset box-shadow, so the pill doesn't change size.
66
+
67
+ ## [1.10.3] - 2026-10-26
68
+
69
+ Tagged on the same commit as 1.10.2 by mistake; no changes. Use 1.10.4.
70
+
71
+ ## [1.10.2] - 2026-10-23
72
+
73
+ ### Fixed
74
+ - Site header on a phone: when the nav and controls wrap below the wordmark, the nav link text now lines up with the wordmark and the page text instead of starting about 17px further in. `dist/codex.js` marks the wrapped header with `data-wrapped`; the nav then starts at the left of its row and is offset by its pills' padding (a relative offset, so it can't change whether the header wraps), and the controls stay at the right. Without the script the row stays right-aligned as before.
75
+
76
+ ## [1.10.1] - 2026-10-22
77
+
78
+ ### Fixed
79
+ - Contour drift no longer starts abruptly. The backdrop used to sit still for `motion.duration.plate` (the specimen plate's draw-in time, which the backdrop doesn't have) and then jump to full speed. It now starts as soon as `dist/plate.js` runs, and every start, on the backdrop and the plate, eases from rest to full speed over `motion.duration.plate`: on load, after the pause control is released, and when a hidden tab or an off-screen plate comes back. Pausing still stops the drift at once.
80
+
81
+ ## [1.10.0] - 2026-10-21
82
+
83
+ ### Changed
84
+ - brand-codex is now **MotifSpec**. The repository is `github.com/Aitrien/motifspec` (GitHub redirects the old URL), the Hugo module path is `github.com/aitrien/motifspec`, the npm package is `@aitrien/motifspec`, and `hugo.toml` mounts `dist/` at `assets/motifspec` instead of `assets/brand-codex`. Docs, the README, the showcase, build banners and the planned MCP resource (`motifspec://readme`) use the new name.
85
+ - Unchanged on purpose: the `cx-` class and `--cx-` token prefix, the `codex.*` token extensions, the file names `codex.css` and `codex.js`, and the `cx-theme` and `cx-backdrop` storage keys, so markup, tokens and readers' saved settings carry over.
86
+
87
+ ### Removed
88
+ - `look/`: four QA screenshots committed by mistake in 1.8.0. Nothing referenced them.
89
+
90
+ ### Migrating a site
91
+ 1. In the site's config, change the module import path to `github.com/aitrien/motifspec`, then run `hugo mod get github.com/aitrien/motifspec@v1.10.0` and drop the old `brand-codex` lines from `go.mod` and `go.sum`. Earlier tags still declare the old module path, so 1.10.0 is the first release that can be fetched under the new one.
92
+ 2. Replace `resources.Get "brand-codex/…"` with `resources.Get "motifspec/…"`. The published asset folder becomes `/motifspec/`.
93
+
94
+ ## [1.9.0] - 2026-10-20
95
+
96
+ ### Changed
97
+ - Site header on backdrop pages: it still starts on the frost, but once the page scrolls it becomes sticky and its `color.surface.base` surface fades in over `motion.duration.slow`. Back at the top the surface fades out again. `dist/codex.js` sets `data-scrolled` on the header (`"false"` at the top, `"true"` once scrolled); without the script the header scrolls away as before. `site-header.md` and `backdrop.md` updated, including the rule against animating the header on scroll, which now allows this one fade.
98
+ - Linked headings and the docked table of contents clear the sticky header at its real height: `dist/codex.js` measures it into `--_header-height`, used by `scroll-padding-top` and the TOC's `top`. Before, one row was assumed, and a header wrapped to two rows on a narrow screen covered the heading.
99
+ - Site header on narrow screens: nav pills use half-way padding between `space.inset.sm` and `space.inset.md`, so Work, Writing, About, the pause control and the theme toggle fit one row on a 360px phone (a Galaxy S23) instead of the last link being cut off; narrower than that, the list still scrolls inside its row.
100
+ - Hover styles on the nav, the theme toggle and the pause controls apply only under `(hover: hover)`, so a tap on a touch screen no longer leaves the wash stuck on.
101
+ - Accession label on case studies: a lead label (`cx-label--lead`) above the title and a card (`cx-label--card`) after the article. Below `size.breakpoint.md` the lead label shows only the number, date and status (role and stack are `cx-label__detail` fields), so on a phone the title starts near the top of the screen, and the card shows the full label at the end. From `size.breakpoint.md` up nothing changes and the card is hidden. `accession-label.md` and the case study row in `templates.md` updated.
102
+ - Width media queries: `css/components.css` can write `@media (width < token(size.breakpoint.md))`, and the build fills in the breakpoint value. Only `size.breakpoint.*` tokens, only in `@media` conditions; the audit accepts those values there and nowhere else. The README rule and the breakpoint descriptions now say this instead of "SCSS only".
103
+ - Site footer: on a phone the link lists (Pages, Elsewhere) sit side by side in two columns and the colophon takes the row below, instead of every group stacking in one column. The groups are equal-width flex columns: a link list needs half of `size.column.sidebar`, prose a whole one.
104
+ - Backdrop: the layer's height is the large viewport (new `size.backdrop.height`, from primitive `size.viewport.1` = `100lvh`) instead of being pinned to the bottom of the screen. On a phone, reaching the bottom of a page slides the address bar away; the layer used to resize with it and the contours jumped.
105
+ - Accession label: when the fields wrap onto several rows, each row is now closed by a full-width `color.border.subtle` rule, as in a ruled card. Fields grow to fill their row, and the rules that reach the edge sit under the `color.border.default` frame (drawn again as an outline over the border). Before, wrapped rows were separated only by a gap.
106
+ - Backdrop pause control: the choice persists across pages, like the theme. `dist/plate.js` stores `paused` under the `cx-backdrop` key and restores it before the drift starts. The specimen plate's own pause is not stored.
107
+
108
+ ## [1.8.0] - 2026-10-19
109
+
110
+ ### Added
111
+ - Backdrop component (`docs/components/backdrop.md`, `cx-backdrop`, `cx-backdrop-page`): the contour survey drawn full-bleed behind every page under a grainy frost. The page surface fades out over its first and last 30rem, so the frost shows behind the header, the opening statement and the footer, and reading happens on the plain surface. Generated as `dist/backdrop.html` (`@aitrien/brand-codex/backdrop.html`); `dist/plate.js` drifts it.
112
+ - Backdrop pause control (`cx-backdrop__pause`) in the site header: a native checkbox pill like the theme toggle, revealed by `dist/plate.js` when the drift starts and hidden under reduced motion.
113
+ - Tokens: `size.backdrop.fade` (30rem), `size.backdrop.blur` (0.5rem), `border.width.contour` (3px; index contours twice that), `color.backdrop.tint` (40%), `color.backdrop.grain` (14%), `color.backdrop.saturation` (140%), and `color.wash.hover` (10%) for the header hover. Primitives `primitive.size.effect.*`, `primitive.border.width.3` and `primitive.color.amount.*` (percent, via `codex.unit`). The contours use the specimen plate's `color.ornament.rest` and `color.ornament.strong`.
114
+ - `cxPlate.backdrop()` in `js/plate.js`, alongside `markup()`.
115
+ - The blur is a CSS `filter` on the contours, over a layer three blur radii larger than the viewport. `backdrop-filter` was tried and rejected: Chromium blurs only what is on screen, which leaves lines sharp at the viewport edge.
116
+ - The grain is monochrome fractal noise with no blend mode (blending it brought sharp lines back in Chromium).
117
+ - Text over the frost is measured against `color.surface.base`; by design, contrast is not checked against the contour lines beneath it.
118
+
119
+ ### Changed
120
+ - Every page template sits on the backdrop (`docs/templates.md`). The home statement sits on the frost inside the top fade instead of beside the specimen plate.
121
+ - Specimen plate: no longer used on a page with the backdrop (one contour field per page; the showcase, which documents both, is the exception).
122
+ - Site header: nav items are pills (`radius.pill`) like the icon-only controls. Nav links, the theme toggle and the pause control share one hover, a wash of `color.text.primary` at `color.wash.hover`, which stays visible on the frost. On a backdrop page the header and footer have no surface of their own and the header is no longer sticky.
123
+ - `motion.duration.drift` and the `pause` icon now describe the contour drift on the backdrop as well as the plate.
124
+ - README principles: pills include nav items; the contour survey (backdrop or plate) is the one decoration and the one loop per page.
125
+ - The showcase sits on the backdrop, with the pause control in its header.
126
+
127
+ ## [1.7.0] - 2026-10-16
128
+
129
+ ### Changed
130
+ - Specimen plate: a contour survey of simplex-noise terrain replaces the Vogel phyllotaxis seed head. The build draws the contours as a static SVG; `js/plate.js` (shipped as `dist/plate.js`) reshapes them as the terrain drifts. Index contours every fifth line, a quarter grid, and a once-only draw-in.
131
+ - `color.ornament.*` descriptions now name contour lines, index contours and the survey grid instead of seeds.
132
+ - The showcase no longer has its own script. It inlines `dist/theme-init.js` and `dist/codex.js`, the same files sites load, so there is one implementation.
133
+ - `npm run audit` also checks `dist/codex.js` and `dist/theme-init.js` on their own.
134
+
135
+ ### Added
136
+ - `motion.duration.drift` (60000ms): time for the plate's terrain to drift one noise unit.
137
+ - `dist/plate.html` and `dist/plate.js` for sites that use the plate, exported as `@aitrien/brand-codex/plate.html` and `/plate.js`.
138
+ - `dist/codex.js` (`@aitrien/brand-codex/codex.js`), built from `js/codex.js`: the theme toggle (storage key `cx-theme`), tooltip dismissal on Escape, code copy buttons, and TOC docking with the active section. Timings come from `--cx-motion-*` tokens. Load it with `defer`.
139
+ - `dist/theme-init.js` (`@aitrien/brand-codex/theme-init.js`): the one-line `<head>` snippet that applies a stored theme before first paint, documented in `site-header.md`. The build fails if the doc and the file differ.
140
+ - `$deprecated` support: the validator requires a reason, rejects deprecated primitives, and fails if a component, the Chroma mapping, a script or a component doc uses a deprecated token. `tokens.css` marks them with a comment and `tokens.json` with a `deprecated` field. `CONVENTIONS.md` describes the deprecate-then-remove rule.
141
+
142
+ ### Deprecated
143
+ - `motion.duration.pulse` and `motion.easing.pulse`, which only the seed-head pulse used. They stay published with `$deprecated` ("Unused since the contour plate; removed in 2.0.0.") so this release is minor and the module path stays `github.com/aitrien/brand-codex`. Nothing in the system uses them; move off them before 2.0.0.
144
+
145
+ ### Fixed
146
+ - Without JavaScript, the theme toggle and code copy buttons appeared as dead controls: their `display` rules overrode `hidden`. A base `[hidden]` rule now keeps every script-revealed control hidden until the script reveals it (replacing the plate pause's own rule).
147
+ - The `pause` icon's usage rule named the plate's pulse; it now names the drift.
148
+
149
+ ## [1.6.0] - 2026-10-16
150
+
151
+ ### Added
152
+ - `CHANGELOG.md`, linked from every version number in the showcase (hero eyebrow, accession label, footers).
153
+ - Version link pattern (`cx-version`): the version number is a link to this file, with a "View changelog" tooltip and the `arrow-outward` icon because it leaves the site.
154
+ - `cx-tooltip--above` modifier for tooltips near the bottom of the page.
155
+ - Build check: the build stops if `CHANGELOG.md` has no entry for the current version.
156
+ - `dist/tokens.js`: the tokens as an ES module (`version`, `changelog`, `tokens`), exported as `@aitrien/brand-codex/tokens.js`.
157
+ - MIT `LICENSE` for the code, tokens and docs. Fonts and icons keep their own licences.
158
+
159
+ ### Changed
160
+ - Header lede: "page templates for connected applications".
161
+ - The repo's `hugo.toml` now mounts `fonts/` at `static/fonts` as well as `dist/` at `assets/brand-codex`, so a site only needs the import line.
162
+
163
+ ## [1.5.1] - 2026-10-15
164
+
165
+ ### Changed
166
+ - Replaced the sample blockquote. It had reused a line from a reference site without attribution; it now carries an attributed quotation with its source in `<cite>`.
167
+ - `cite` inside blockquote footers is set upright, matching the mono label voice.
168
+
169
+ ### Added
170
+ - Attribution rules in `prose.md` and the README: quote only with a named person and a traceable source; never copy wording from reference sites into sample content.
171
+
172
+ ## [1.5.0] - 2026-10-15
173
+
174
+ ### Added
175
+ - Full ornament catalogue: all 80 non-emoji Yarndings 12 glyphs, named and grouped (botanical, frost, stitch, diamond, mark) in `font.family.ornament` → `codex.glyphs`, with `roles` for the system's own ornaments and a `forbidden` set.
176
+ - Validator rules for the catalogue: kebab-case names, known groups, no shared glyphs, no forbidden glyphs.
177
+ - Showcase glyph section generated from the tokens.
178
+
179
+ ### Fixed
180
+ - The footer ornament band stopped short on wide screens. It now covers more than an 8K display.
181
+
182
+ ## [1.4.1] - 2026-10-15
183
+
184
+ ### Fixed
185
+ - Specimen plate seeds now grow and shrink around their own centres. They were anchored at one corner because the centring transform was applied before the pulse scale.
186
+
187
+ ## [1.4.0] - 2026-10-15
188
+
189
+ ### Added
190
+ - Specimen plate pulse: seeds scale 1 → 1.5 → 1 with a phase offset by radius, so a wave travels from the centre outward.
191
+ - `motion.duration.pulse` and `motion.easing.pulse` tokens.
192
+ - Pause control for the plate: a native checkbox styled as an icon-only pill, so it works without JavaScript; `pause` and `play` icons.
193
+ - Tooltips on `<label>` controls.
194
+
195
+ ### Changed
196
+ - Motion principle: state changes animate, plus the plate's pausable pulse; reduced motion stops it and removes the control.
197
+
198
+ ## [1.3.1] - 2026-10-15
199
+
200
+ ### Changed
201
+ - The current nav item is highlighted with `color.surface.highlight` instead of an underline; hover uses `color.surface.hover`.
202
+ - Heading anchors sit in a 44px round target, like the theme toggle.
203
+ - `radius.pill` covers buttons and icon-only controls.
204
+
205
+ ## [1.3.0] - 2026-10-15
206
+
207
+ ### Added
208
+ - Tooltip component, with `color.surface.inverse` and `color.text.inverse`.
209
+ - `ash.850` primitive for raised surfaces in dark mode.
210
+ - `dist/showcase.standalone.html`, a complete document for opening locally.
211
+
212
+ ### Changed
213
+ - Theme toggle: an icon-only circle that shows the action ("Switch to dark theme"). Clicking flips the visible theme; returning to the system theme clears the stored choice.
214
+ - Copy button and theme toggle are pills; `radius.control` is square.
215
+ - Dark surfaces: page `ash.900`, raised `ash.850`, sunken `ash.950`, hover `ash.800` (slightly darkened so secondary text keeps 7:1).
216
+
217
+ ### Removed
218
+ - `theme-auto` icon.
219
+
220
+ ### Fixed
221
+ - The inline icon sprite could render as an empty box above the header outside the publishing host.
222
+ - Icons blocked hover on the controls that contain them.
223
+
224
+ ## [1.2.0] - 2026-10-15
225
+
226
+ ### Added
227
+ - `radius.pill` token; `cx-button` is pill-shaped.
228
+ - Heading anchor component, on every major section heading.
229
+
230
+ ### Changed
231
+ - `radius.control` is square.
232
+
233
+ ## [1.1.0] - 2026-10-15
234
+
235
+ ### Added
236
+ - Material Symbols (Sharp, weight 300) as a self-hosted SVG sprite with `icons/manifest.json`; build fails on unknown icon references.
237
+ - Icon component and `size.icon.*` tokens.
238
+ - Separator component (`cx-sep`): a muted pipe hidden from screen readers.
239
+
240
+ ### Changed
241
+ - Separators are "|" instead of "·".
242
+ - Button arrows, pagination, theme toggle, copy button, callout titles, TOC chevron and footer links use icons.
243
+
244
+ ### Fixed
245
+ - Table row headers no longer take the uppercase column-header style.
246
+
247
+ ## [1.0.0] - 2026-10-14
248
+
249
+ ### Added
250
+ - DTCG tokens: colour, typography, space, size, radius, border and motion, with primitive and semantic tiers, dark mode via `codex.modes` and contrast pairs via `codex.pairsWith`.
251
+ - Component docs, Chroma syntax mapping, README principles and the showcase page.
252
+ - `npm run validate`, `build` and `audit`.
253
+
254
+ [1.10.2]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#1102---2026-10-23
255
+ [1.10.1]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#1101---2026-10-22
256
+ [1.10.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#1100---2026-10-21
257
+ [1.9.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#190---2026-10-20
258
+ [1.8.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#180---2026-10-19
259
+ [1.7.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#170---2026-10-16
260
+ [1.6.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#160---2026-10-16
261
+ [1.5.1]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#151---2026-10-15
262
+ [1.5.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#150---2026-10-15
263
+ [1.4.1]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#141---2026-10-15
264
+ [1.4.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#140---2026-10-15
265
+ [1.3.1]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#131---2026-10-15
266
+ [1.3.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#130---2026-10-15
267
+ [1.2.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#120---2026-10-15
268
+ [1.1.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#110---2026-10-15
269
+ [1.0.0]: https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md#100---2026-10-14