Skip to content

Update SYL Primitive Colors#2954

Open
beaesguerra wants to merge 3 commits intomainfrom
update-syl-primitives
Open

Update SYL Primitive Colors#2954
beaesguerra wants to merge 3 commits intomainfrom
update-syl-primitives

Conversation

@beaesguerra
Copy link
Member

@beaesguerra beaesguerra commented Feb 5, 2026

Summary:

  • Update Thunderblocks (SYL) primitive colors based on this Slack thread
  • Fill in missing primitive thunderblocks tokens and make sure values are in sync with Figma variables

Issue: WB-2165

Test plan:

Review the updated tokens and make sure they don't have any unintended affects

@changeset-bot
Copy link

changeset-bot bot commented Feb 5, 2026

🦋 Changeset detected

Latest commit: ea84c39

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 30 packages
Name Type
@khanacademy/wonder-blocks-tokens Patch
@khanacademy/wonder-blocks-accordion Patch
@khanacademy/wonder-blocks-badge Patch
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-birthday-picker Patch
@khanacademy/wonder-blocks-breadcrumbs Patch
@khanacademy/wonder-blocks-button Patch
@khanacademy/wonder-blocks-card Patch
@khanacademy/wonder-blocks-cell Patch
@khanacademy/wonder-blocks-clickable Patch
@khanacademy/wonder-blocks-date-picker Patch
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-form Patch
@khanacademy/wonder-blocks-grid Patch
@khanacademy/wonder-blocks-icon-button Patch
@khanacademy/wonder-blocks-icon Patch
@khanacademy/wonder-blocks-labeled-field Patch
@khanacademy/wonder-blocks-layout Patch
@khanacademy/wonder-blocks-link Patch
@khanacademy/wonder-blocks-modal Patch
@khanacademy/wonder-blocks-pill Patch
@khanacademy/wonder-blocks-popover Patch
@khanacademy/wonder-blocks-progress-spinner Patch
@khanacademy/wonder-blocks-search-field Patch
@khanacademy/wonder-blocks-styles Patch
@khanacademy/wonder-blocks-switch Patch
@khanacademy/wonder-blocks-tabs Patch
@khanacademy/wonder-blocks-toolbar Patch
@khanacademy/wonder-blocks-tooltip Patch
@khanacademy/wonder-blocks-typography Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Feb 5, 2026

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (cc99e40) and published all packages with changesets to npm.

You can install the packages in frontend by running:

./dev/tools/deploy_wonder_blocks.js --tag="PR2954"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR2954

@github-actions
Copy link
Contributor

github-actions bot commented Feb 5, 2026

Size Change: +167 B (+0.14%)

Total Size: 118 kB

Filename Size Change
packages/wonder-blocks-tokens/dist/es/index.js 5.11 kB +167 B (+3.38%)
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3 kB
packages/wonder-blocks-announcer/dist/es/index.js 1.74 kB
packages/wonder-blocks-badge/dist/es/index.js 2.02 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.91 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 755 B
packages/wonder-blocks-button/dist/es/index.js 4.25 kB
packages/wonder-blocks-card/dist/es/index.js 1.08 kB
packages/wonder-blocks-cell/dist/es/index.js 2.18 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.6 kB
packages/wonder-blocks-core/dist/es/index.js 2.59 kB
packages/wonder-blocks-data/dist/es/index.js 5.48 kB
packages/wonder-blocks-date-picker/dist/es/index.js 6.38 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.5 kB
packages/wonder-blocks-form/dist/es/index.js 6.3 kB
packages/wonder-blocks-grid/dist/es/index.js 1.24 kB
packages/wonder-blocks-icon-button/dist/es/index.js 4 kB
packages/wonder-blocks-icon/dist/es/index.js 1.91 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.47 kB
packages/wonder-blocks-layout/dist/es/index.js 1.63 kB
packages/wonder-blocks-link/dist/es/index.js 1.53 kB
packages/wonder-blocks-modal/dist/es/index.js 7.21 kB
packages/wonder-blocks-pill/dist/es/index.js 1.31 kB
packages/wonder-blocks-popover/dist/es/index.js 4.32 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.48 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.1 kB
packages/wonder-blocks-styles/dist/es/index.js 464 B
packages/wonder-blocks-switch/dist/es/index.js 1.55 kB
packages/wonder-blocks-tabs/dist/es/index.js 5.57 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.25 kB
packages/wonder-blocks-testing/dist/es/index.js 978 B
packages/wonder-blocks-theming/dist/es/index.js 384 B
packages/wonder-blocks-timing/dist/es/index.js 1.37 kB
packages/wonder-blocks-toolbar/dist/es/index.js 906 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.02 kB
packages/wonder-blocks-typography/dist/es/index.js 1.57 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Feb 5, 2026

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-uatwignprt.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 472
Tests with visual changes 0
Total stories 815
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 472

@beaesguerra beaesguerra force-pushed the update-syl-primitives branch from 4f3d3fe to 43c164d Compare February 5, 2026 22:02
@beaesguerra beaesguerra marked this pull request as ready for review February 5, 2026 22:14
@khan-actions-bot khan-actions-bot requested a review from a team February 5, 2026 22:14
@khan-actions-bot
Copy link
Contributor

khan-actions-bot commented Feb 5, 2026

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .changeset/smart-rocks-provide.md, packages/wonder-blocks-tokens/src/theme/semantic/internal/primitive-color-thunderblocks.ts

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

@beaesguerra beaesguerra changed the base branch from sb-support-dark-theme to main February 5, 2026 22:21
@beaesguerra beaesguerra force-pushed the update-syl-primitives branch from 43c164d to ea84c39 Compare February 5, 2026 22:22
Copy link
Member

@jandrade jandrade left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

red_20: "#BE2626",
red_10: "#8E1C1C",
red_05: "#621414",
red_01: "#3B141A",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Do you know if these colors are going to be consumed by semantic colors at some point?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

afaik, not right now! blue_01 will be used though for background.instructive.subtle in syl-dark

I figured we can include them in code for parity with the figma variables!

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants