Skip to content

[WB-1896] Add ThunderBlocks theme #2501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 29 commits into
base: feature/css-vars
Choose a base branch
from
Draft

Conversation

jandrade
Copy link
Member

Summary:

Adds the new ThunderBlocks theme to support the new classroom experience.

Issue: https://khanacademy.atlassian.net/browse/WB-1896

Test plan:

TBD

@jandrade jandrade self-assigned this Mar 12, 2025
Copy link

changeset-bot bot commented Mar 12, 2025

🦋 Changeset detected

Latest commit: 45b391a

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

This PR includes changesets to release 26 packages
Name Type
@khanacademy/wonder-blocks-theming Minor
@khanacademy/wonder-blocks-tokens Minor
@khanacademy/wonder-blocks-button Patch
@khanacademy/wonder-blocks-icon-button Patch
@khanacademy/wonder-blocks-modal Patch
@khanacademy/wonder-blocks-switch Patch
@khanacademy/wonder-blocks-accordion Patch
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-birthday-picker Patch
@khanacademy/wonder-blocks-breadcrumbs Patch
@khanacademy/wonder-blocks-cell Patch
@khanacademy/wonder-blocks-clickable Patch
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-form Patch
@khanacademy/wonder-blocks-grid Patch
@khanacademy/wonder-blocks-labeled-field Patch
@khanacademy/wonder-blocks-layout Patch
@khanacademy/wonder-blocks-link 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-tabs Patch
@khanacademy/wonder-blocks-toolbar Patch
@khanacademy/wonder-blocks-tooltip 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

Copy link
Contributor

github-actions bot commented Mar 12, 2025

Size Change: 0 B

Total Size: 103 kB

ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.54 kB
packages/wonder-blocks-announcer/dist/es/index.js 2.04 kB
packages/wonder-blocks-banner/dist/es/index.js 1.56 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.88 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 886 B
packages/wonder-blocks-button/dist/es/index.js 4.32 kB
packages/wonder-blocks-cell/dist/es/index.js 2.35 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.07 kB
packages/wonder-blocks-core/dist/es/index.js 2.85 kB
packages/wonder-blocks-data/dist/es/index.js 6.25 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.8 kB
packages/wonder-blocks-form/dist/es/index.js 6.04 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-icon-button/dist/es/index.js 2.3 kB
packages/wonder-blocks-icon/dist/es/index.js 873 B
packages/wonder-blocks-labeled-field/dist/es/index.js 1.26 kB
packages/wonder-blocks-layout/dist/es/index.js 1.82 kB
packages/wonder-blocks-link/dist/es/index.js 2.04 kB
packages/wonder-blocks-modal/dist/es/index.js 5.48 kB
packages/wonder-blocks-pill/dist/es/index.js 1.52 kB
packages/wonder-blocks-popover/dist/es/index.js 4.84 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.33 kB
packages/wonder-blocks-styles/dist/es/index.js 473 B
packages/wonder-blocks-switch/dist/es/index.js 2.02 kB
packages/wonder-blocks-tabs/dist/es/index.js 1.91 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.91 kB
packages/wonder-blocks-testing/dist/es/index.js 1.07 kB
packages/wonder-blocks-theming/dist/es/index.js 745 B
packages/wonder-blocks-timing/dist/es/index.js 1.79 kB
packages/wonder-blocks-tokens/dist/es/index.js 3 kB
packages/wonder-blocks-toolbar/dist/es/index.js 923 B
packages/wonder-blocks-tooltip/dist/es/index.js 7.01 kB
packages/wonder-blocks-typography/dist/es/index.js 1.23 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented Mar 12, 2025

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

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

@@ -0,0 +1,119 @@
import {fade} from "../util/utils";
Copy link
Member

Choose a reason for hiding this comment

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

question: Should we put theme tokens into directories to organize them? Now that I'm looking into Typography tokens, I'm noticing this folder could get a bit crowded.

const black = "#191918";
const white = "#FFFFFF";

export const color = {
Copy link
Member

Choose a reason for hiding this comment

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

question: I realize this is a draft PR...but can you add some comments or docs on how this works when you get a chance? I'm a little confused after looking at color.ts vs. color-thunderblocks.ts. The object entries are SO different, it's a bit difficult to understand the overlap! Does that only matter when you get to the theme merging part?

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm planning to add all of that later, but as you mentioned, this PR is very drafty, so I'll make sure to mark it as ready for review when I cover all the required parts. I need to work on other PRs first (and land them) before coming back to this one.

Base automatically changed from global-theming to feature/css-vars April 7, 2025 21:01
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