[WIP] FEI-5591: Experiment with Panda CSS - DO NOT REVIEW

[jandrade]

Summary:

• Configured panda-css.
• Added panda support to View.

Issue: FEI-5591

Test plan:

TBD

[changeset-bot]

🦋 Changeset detected

Latest commit: 9106b52

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

This PR includes changesets to release 28 packages

Name	Type
@khanacademy/wonder-blocks-theming	Minor
@khanacademy/wonder-blocks-layout	Major
@khanacademy/wonder-blocks-icon	Major
@khanacademy/wonder-blocks-form	Major
@khanacademy/wonder-blocks-typography	Major
@khanacademy/wonder-blocks-progress-spinner	Major
@khanacademy/wonder-blocks-core	Major
@khanacademy/wonder-blocks-button	Major
@khanacademy/wonder-blocks-icon-button	Patch
@khanacademy/wonder-blocks-modal	Patch
@khanacademy/wonder-blocks-switch	Patch
@khanacademy/wonder-blocks-birthday-picker	Patch
@khanacademy/wonder-blocks-cell	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-grid	Patch
@khanacademy/wonder-blocks-labeled-field	Patch
@khanacademy/wonder-blocks-tooltip	Patch
@khanacademy/wonder-blocks-accordion	Patch
@khanacademy/wonder-blocks-banner	Patch
@khanacademy/wonder-blocks-link	Patch
@khanacademy/wonder-blocks-search-field	Patch
@khanacademy/wonder-blocks-pill	Patch
@khanacademy/wonder-blocks-popover	Patch
@khanacademy/wonder-blocks-toolbar	Patch
@khanacademy/wonder-blocks-breadcrumbs	Patch
@khanacademy/wonder-blocks-clickable	Patch
@khanacademy/wonder-blocks-data	Patch
@khanacademy/wonder-blocks-testing	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

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to .gitignore, package.json, panda.config.ts, postcss.config.js, tsconfig-common.json, tsconfig.json, yarn.lock, .changeset/old-adults-admire.md, .changeset/plenty-dolls-refuse.md, .changeset/polite-melons-peel.md, .changeset/rare-actors-boil.md, .changeset/sharp-nails-peel.md, .changeset/small-parrots-smell.md, .changeset/spotty-rivers-admire.md, .storybook/index.css, .storybook/main.ts, .storybook/preview.tsx, packages/tsconfig-shared.json, __docs__/wonder-blocks-button/button.stories.tsx, __docs__/wonder-blocks-core/view.stories.tsx, __docs__/wonder-blocks-form/text-field.stories.tsx, __docs__/wonder-blocks-layout/strut.stories.tsx, __docs__/wonder-blocks-progress-spinner/circular-spinner.stories.tsx, __docs__/wonder-blocks-tooltip/tooltip.stories.tsx, __docs__/wonder-blocks-typography/typography.stories.tsx, packages/wonder-blocks-theming/tsconfig-build.json, packages/wonder-blocks-theming/src/index.ts, packages/wonder-blocks-accordion/src/components/accordion-section.tsx, packages/wonder-blocks-button/src/components/button-core.tsx, packages/wonder-blocks-button/src/themes/themed-button.tsx, packages/wonder-blocks-core/src/components/text.tsx, packages/wonder-blocks-core/src/components/view.tsx, packages/wonder-blocks-core/src/util/types.ts, packages/wonder-blocks-form/src/components/text-field.tsx, packages/wonder-blocks-icon/src/components/phosphor-icon.tsx, packages/wonder-blocks-layout/src/components/strut.tsx, packages/wonder-blocks-progress-spinner/src/components/circular-spinner.tsx, packages/wonder-blocks-theming/src/presets/default.ts, packages/wonder-blocks-theming/src/presets/khanmigo.ts, packages/wonder-blocks-theming/src/presets/panda-preset.ts, packages/wonder-blocks-theming/src/presets/theme.ts, packages/wonder-blocks-typography/src/util/styles.ts

---

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

[github-actions]

Size Change: +1.46 kB (+1.51%)

Total Size: 98 kB

Filename	Size	Change
packages/wonder-blocks-banner/dist/es/index.js	1.52 kB	+10 B (+0.66%)
packages/wonder-blocks-button/dist/es/index.js	3.61 kB	-663 B (-15.5%)	👏
packages/wonder-blocks-core/dist/es/index.js	4.05 kB	+386 B (+10.53%)	⚠️
packages/wonder-blocks-dropdown/dist/es/index.js	14.1 kB	+176 B (+1.26%)
packages/wonder-blocks-form/dist/es/index.js	5.38 kB	+36 B (+0.67%)
packages/wonder-blocks-icon/dist/es/index.js	1 kB	-58 B (-5.48%)	✅
packages/wonder-blocks-layout/dist/es/index.js	2.15 kB	+250 B (+13.19%)	⚠️
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.47 kB	-54 B (-3.55%)
packages/wonder-blocks-theming/dist/es/index.js	2.07 kB	+1.37 kB (+198.12%)	🆘
packages/wonder-blocks-typography/dist/es/index.js	1.49 kB	+5 B (+0.34%)

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-accordion/dist/es/index.js	3.78 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.72 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	1.13 kB
packages/wonder-blocks-cell/dist/es/index.js	2.24 kB
packages/wonder-blocks-clickable/dist/es/index.js	3.3 kB
packages/wonder-blocks-data/dist/es/index.js	6.34 kB
packages/wonder-blocks-grid/dist/es/index.js	1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js	4.6 kB
packages/wonder-blocks-icon-button/dist/es/index.js	3.21 kB
packages/wonder-blocks-labeled-field/dist/es/index.js	72 B
packages/wonder-blocks-link/dist/es/index.js	2.53 kB
packages/wonder-blocks-modal/dist/es/index.js	5.51 kB
packages/wonder-blocks-pill/dist/es/index.js	1.64 kB
packages/wonder-blocks-popover/dist/es/index.js	4.85 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.54 kB
packages/wonder-blocks-switch/dist/es/index.js	2.09 kB
packages/wonder-blocks-testing/dist/es/index.js	3.94 kB
packages/wonder-blocks-timing/dist/es/index.js	1.8 kB
packages/wonder-blocks-tokens/dist/es/index.js	1.74 kB
packages/wonder-blocks-toolbar/dist/es/index.js	855 B
packages/wonder-blocks-tooltip/dist/es/index.js	6.91 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

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

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2242"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2242