feat(design-data): add Articles section to Spectrum Design Data site - #1230
Merged
Merged
Conversation
|
Adds a lightweight blog-style section to the docs/site 11ty site for release notes, roadmap posts, and in-depth concept/decision write-ups, with a first article covering the token format for a technical audience. - docs/site/src/articles/: new post collection (directory data + layout) - docs/site/src/pages/articles/index.md: category-filterable listing page - docs/site/src/includes/layout/header.liquid, src/data/navigation.js: nav entry - docs/site/eleventy.config.js: passthrough copy for article images - docs/site/src/articles/understanding-spectrum-tokens.md: first post, a technical/forward-looking companion to the S2 "Design tokens" page, using verified real token names and linking into the published spec Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
GarthDB
force-pushed
the
docs/design-tokens-articles-section
branch
from
September 17, 2026 22:46
d5d1ea8 to
a85a33e
Compare
Contributor
🎨 Token Changes ReportTokens Changed (0)Original Branch: This comment was automatically generated by the token diff tool. 🤖 |
Contributor
🧩 Component Schema Changes ReportNo component schema changes detected.This comment was automatically generated by the component schema diff tool. 🤖 |
- **understanding-spectrum-tokens.md**: fix the Banner structure example
(`banner-gap-horizontal` no longer exists; use
`banner-padding-horizontal-compact` → `{spacing-100}`) and correct the
lifecycle field description to match the real nested `lifecycle` object
(`lifecycle.introduced`/`deprecatedIn`/`replacedBy`) instead of flat
snake_case field names.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- **docs/site/src/articles/exporting-tokens-to-dtcg.md**: new article covering the three DTCG export entry points (resolve/query/export), how $type is derived, mode-aware alias resolution, and the known color-format deviation. - **.claude/skills/docs-voice-tone/SKILL.md**: new skill adapting Spectrum's voice principles (Clear, Genuine, Concise, Upfront) into a review pass for docs-site prose, meant to run after `humanizer` on new/edited articles. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…pectrum-design-data-4nrb) - **docs/site/src/pages/articles/index.md**: fixed filter buttons using .is-active (unstyled) instead of .is-selected; fixed Liquid tag whitespace so markdown-it no longer wraps the second filter button in a stray <p>, which broke the flex row layout; restructured card markup with semantic classes and correct Badge markup. - **docs/site/src/assets/js/article-filter.js**: toggle .is-selected + aria-pressed instead of the broken .is-active class. - **docs/site/package.json**: added @spectrum-css/badge dependency, which was referenced in markup but never installed, so category labels rendered as unstyled plain text. - **docs/site/src/assets/css/global/global.css**: import @spectrum-css/badge CSS. - **docs/site/src/assets/css/components/articles.css**: new stylesheet for filter/list/card layout and typography, values verified against installed @spectrum-css/tokens. - **docs/site/src/assets/css/index.css**: register the new articles.css import. - **docs/site/eleventy.config.js**: fixed spectrum-body-links transform to merge/dedupe the class attribute on <a> tags instead of blindly prepending, which produced invalid duplicate class attributes once article markup supplied its own class. - **docs/site/DESIGN.md**: new Impeccable DESIGN.md for the docs site, verified against installed @spectrum-css tokens. - **docs/site/.impeccable/design.json**: sidecar with shadows, motion, breakpoints, and narrative extending DESIGN.md. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- **docs/site/src/articles/README.md**: new — documents the four article categories already implied by the Articles page subtitle (Concepts, Release notes, Roadmap, Decisions), their intended content sources, and the minimal per-post frontmatter shape. No code changes needed since the filter UI already derives categories dynamically from post frontmatter. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- docs/site/eleventy.config.js: exclude src/articles/README.md from the build so the contributor doc stops leaking as a public /articles/README/ page. - docs/site/src/articles/exporting-tokens-to-dtcg.md: correct the font-size-200 DTCG example value (16.0 -> 19.0), verified against the real CLI output. - docs/site/src/layouts/article.liquid: fix category badge markup to match the index page (spectrum-Badge--neutral, inner Badge-label span). - docs/site/src/assets/css/components/articles.css: Prettier-format the font-family declaration. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds an "Articles" section to the Spectrum Design Data docs site (
docs/site/), for release notes, roadmap posts, and in-depth concept/decision write-ups. Ships with a first article, "Understanding Spectrum design tokens", a technical/forward-looking companion to the S2 brand site's design-tokens page.Related Issue
N/A — internal docs improvement, not tied to an open issue.
Motivation and Context
The public S2 design-tokens page is getting a concept-first refresh aimed at designers, and is deliberately light on where the token format is headed. The Spectrum Design Data site serves the technical audience (token consumers/authors/implementers) and had no home for narrative, point-in-time writing. This adds that home, using real, verified token names/values, and links forward into the published spec (
/spec/) rather than duplicating it.How Has This Been Tested?
moon run site:copyContent && moon run site:build) and verified the Articles nav entry, index listing with category filter, and the article page render correctly with Spectrum table/link styling applied.packages/tokens/src/*.json.docs/markdown/pages/articles/index.mdis correctly generated by the markdown-generator.Screenshots (if appropriate):
N/A
Types of changes
Checklist: