Skip to content

chore: add design-sync config for Claude Design upload#3381

Draft
dreamwasp wants to merge 3 commits into
mainfrom
cass-gmt-4007
Draft

chore: add design-sync config for Claude Design upload#3381
dreamwasp wants to merge 3 commits into
mainfrom
cass-gmt-4007

Conversation

@dreamwasp

Copy link
Copy Markdown
Contributor

Adds .design-sync/ config set for syncing @codecademy/gamut to the [DRAFT] Gamut Design System project on claude.ai/design (71 components).

  • config.json: project ID, storybook shape, build cmd, provider config, card mode overrides, titleMap for docs-only stories
  • tsconfig.json: resolves ~styleguide webpack aliases for esbuild
  • overrides/bundle.mjs: enables minification (icons-as-code pushes unminified bundle to 5.2MB, over the 5MB upload limit)
  • previews/SkipToContent.tsx: custom preview for hidden skip-link component
  • NOTES.md: setup notes and re-apply instructions for dist patches
  • packages/gamut/package.json: add "types" field so design-sync converter can locate dist/index.d.ts in this NX monorepo (NX omits it by default)
  • .gitignore: exclude .ds-sync/, ds-bundle/, and ephemeral .design-sync/ subdirs

Overview

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: [ABC-123]
  • Version plan added/updated (or not needed)
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

  1. Go to story X
  2. Do something
  3. Do that something in dark mode
  4. Check it with VO
  5. Finish and do a celebratory dance

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

Adds .design-sync/ config set for syncing @Codecademy/gamut to the
[DRAFT] Gamut Design System project on claude.ai/design (71 components).

- config.json: project ID, storybook shape, build cmd, provider config,
  card mode overrides, titleMap for docs-only stories
- tsconfig.json: resolves ~styleguide webpack aliases for esbuild
- overrides/bundle.mjs: enables minification (icons-as-code pushes
  unminified bundle to 5.2MB, over the 5MB upload limit)
- previews/SkipToContent.tsx: custom preview for hidden skip-link component
- NOTES.md: setup notes and re-apply instructions for dist patches
- packages/gamut/package.json: add "types" field so design-sync converter
  can locate dist/index.d.ts in this NX monorepo (NX omits it by default)
- .gitignore: exclude .ds-sync/, ds-bundle/, and ephemeral .design-sync/ subdirs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@nx-cloud

nx-cloud Bot commented Jun 22, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit fc93bc5


☁️ Nx Cloud last updated this comment at 2026-06-26 19:56:58 UTC

@codecov

codecov Bot commented Jun 22, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.08%. Comparing base (e5e3bd0) to head (fc93bc5).
⚠️ Report is 6 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3381      +/-   ##
==========================================
- Coverage   90.38%   90.08%   -0.31%     
==========================================
  Files         398      270     -128     
  Lines        6576     5670     -906     
  Branches     2137     1905     -232     
==========================================
- Hits         5944     5108     -836     
+ Misses        624      553      -71     
- Partials        8        9       +1     
Flag Coverage Δ
main ?
pull-request 90.08% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

dreamwasp and others added 2 commits June 24, 2026 10:41
…header

- Add @codecademy/gamut-styles/dist/themes to extraEntries so all 5 named
  themes (coreTheme, adminTheme, platformTheme, lxStudioTheme, percipioTheme)
  are available in the bundle for theme-swapping in Claude Design
- Fix tsconfig path (../../ not ../../../ from PKG_DIR=packages/gamut)
- Add .design-sync/conventions.md as readmeHeader: GamutProvider wrapping,
  theme table, props-only styling idiom, idiomatic build example
- Update NOTES.md with tsconfig fix, grade edge cases, and theme export finding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@codecademydev

Copy link
Copy Markdown
Collaborator

📬 Published Alpha Packages:

Package Version npm Diff
@codecademy/gamut 72.1.1-alpha.c07dff.0 npm diff
@codecademy/gamut-icons 9.57.10-alpha.c07dff.0 npm diff
@codecademy/gamut-illustrations 0.58.16-alpha.c07dff.0 npm diff
@codecademy/gamut-kit 3.0.4-alpha.c07dff.0 npm diff
@codecademy/gamut-patterns 0.10.35-alpha.c07dff.0 npm diff
@codecademy/gamut-styles 20.0.3-alpha.c07dff.0 npm diff
@codecademy/gamut-tests 6.0.6-alpha.c07dff.0 npm diff
@codecademy/variance 0.26.2-alpha.c07dff.0 npm diff
eslint-plugin-gamut 2.4.4-alpha.c07dff.0 npm diff

@github-actions

Copy link
Copy Markdown
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants