Skip to content

docs(foundations): typography catalog, colors palette, and token foundations#629

Open
gab-az wants to merge 6 commits into
mainfrom
docs-foundations
Open

docs(foundations): typography catalog, colors palette, and token foundations#629
gab-az wants to merge 6 commits into
mainfrom
docs-foundations

Conversation

@gab-az
Copy link
Copy Markdown
Collaborator

@gab-az gab-az commented Jun 2, 2026

Summary

  • Reorganizes Storybook Foundations docs for typography, spacing, and colors with a shared layout pattern (page header + copyable rows/cards).
  • Adds Typography overview: DESIGN.md-aligned .text-* catalog, click-to-copy rows (same UX as color palette swatches), font-code for class names, and from-tokens helper for foundations data.
  • Exposes text tokens from texts.data.js via theme build (big-number fontFamily, text-link border-radius and motion-aligned transition) and removes Storybook-only catalog exports from the theme package.
  • Improves Colors palette browsing and copy UX on the foundations overview.

Test plan

  • pnpm storybook:dev — open Foundations → Typography → Overview
  • Click typography rows and confirm class names copy (text-big-number-lg, text-link, etc.)
  • Verify big-number styles use Proto Mono (display font) and headings/body use default text styles
  • Open Foundations → Colors → Overview and confirm swatch copy still works
  • pnpm --dir packages/theme build:tokens (already run in branch; confirm dist matches source)

Made with Cursor

gablisboa and others added 5 commits May 27, 2026 09:22
Restructure Storybook foundations docs and supporting data/components to better present spacing and typography foundations with updated architecture documentation.

Co-authored-by: Cursor <cursoragent@cursor.com>
Split Colors into Primitives and Brand sections with per-palette headers, and make swatches fully clickable/keyboard-accessible with token-aligned styling so token discovery and copying are faster and more consistent.

Co-authored-by: Cursor <cursoragent@cursor.com>
…updates

Expose typographyCatalog from theme, rebuild dist tokens, and add a
Foundations/Typography Storybook catalog aligned with the new data source.

Co-authored-by: Cursor <cursoragent@cursor.com>
…token

Align Typography foundations with DESIGN.md (click-to-copy rows, font-code
meta), move catalog data into Storybook, restore from-tokens helper, and
update text-link border-radius and motion-aligned transition in theme dist.

Co-authored-by: Cursor <cursoragent@cursor.com>
@gab-az gab-az requested a review from a team as a code owner June 2, 2026 15:28
Comment thread apps/storybook/src/foundations/components/ColorPlayground.vue Fixed
Comment thread apps/storybook/src/foundations/components/ColorPlayground.vue Fixed
Comment thread apps/storybook/src/foundations/components/ColorPlayground.vue Fixed
…defined'

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants