From 999f3d81946b7c0e30853931dc7e89cbf30cf83d Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Wed, 5 Jun 2024 13:37:02 -0400
Subject: [PATCH] Add panda support to Button (including theming)

---
 .changeset/spotty-rivers-admire.md            |   5 +
 .../wonder-blocks-button/button.stories.tsx   |  86 ++---
 .../src/components/button-core.tsx            | 328 +++++++++---------
 .../src/themes/default.ts                     | 160 +++++----
 .../src/themes/khanmigo.ts                    |  89 ++---
 .../wonder-blocks-button/src/themes/theme.ts  | 129 +++++++
 .../src/themes/themed-button.tsx              |  24 +-
 .../src/components/text.tsx                   |  19 +-
 panda.config.ts                               |  12 +
 9 files changed, 495 insertions(+), 357 deletions(-)
 create mode 100644 .changeset/spotty-rivers-admire.md
 create mode 100644 packages/wonder-blocks-button/src/themes/theme.ts

diff --git a/.changeset/spotty-rivers-admire.md b/.changeset/spotty-rivers-admire.md
new file mode 100644
index 000000000..668a0cf9c
--- /dev/null
+++ b/.changeset/spotty-rivers-admire.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": major
+---
+
+Add panda support to Button (including theming)
diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx
index 227f9a435..b8c9db025 100644
--- a/__docs__/wonder-blocks-button/button.stories.tsx
+++ b/__docs__/wonder-blocks-button/button.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
+// import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 import {expect, fireEvent, userEvent, within} from "@storybook/test";
 
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 
-import type {StyleDeclaration} from "aphrodite";
+// import type {StyleDeclaration} from "aphrodite";
 
 import pencilSimple from "@phosphor-icons/core/regular/pencil-simple.svg";
 import pencilSimpleBold from "@phosphor-icons/core/bold/pencil-simple-bold.svg";
@@ -26,6 +26,8 @@ import ComponentInfo from "../../.storybook/components/component-info";
 
 import ButtonArgTypes from "./button.argtypes";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
+import {SystemStyleObject} from "@/styled-system/types";
+import {css} from "@/styled-system/css";
 
 /**
  * Reusable button component.
@@ -132,35 +134,35 @@ export const Tertiary: StoryComponentType = {
     },
 };
 
-export const styles: StyleDeclaration = StyleSheet.create({
-    row: {
+export const styles: Record<string, SystemStyleObject> = {
+    row: css.raw({
         flexDirection: "row",
         alignItems: "center",
-        marginBottom: spacing.xSmall_8,
-    },
-    button: {
-        marginRight: spacing.xSmall_8,
-    },
-    truncatedButton: {
+        marginBottom: "xSmall_8",
+    }),
+    button: css.raw({
+        marginRight: "xSmall_8",
+    }),
+    truncatedButton: css.raw({
         maxWidth: 200,
-        marginBottom: spacing.medium_16,
-    },
-    fillSpace: {
+        marginBottom: "medium_16",
+    }),
+    fillSpace: css.raw({
         minWidth: 140,
-    },
-    example: {
-        background: color.offWhite,
-        padding: spacing.medium_16,
-    },
-    label: {
-        marginTop: spacing.large_24,
-        marginBottom: spacing.xSmall_8,
-    },
-});
+    }),
+    example: css.raw({
+        background: "offWhite",
+        padding: "medium_16",
+    }),
+    label: css.raw({
+        marginTop: "large_24",
+        marginBottom: "xSmall_8",
+    }),
+};
 
 export const Variants: StoryComponentType = () => (
-    <View style={{padding: spacing.medium_16, gap: spacing.medium_16}}>
-        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+    <View style={{padding: "medium_16", gap: "medium_16"}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}}>Hello, world!</Button>
             <Button onClick={() => {}} kind="secondary">
                 Hello, world!
@@ -169,7 +171,7 @@ export const Variants: StoryComponentType = () => (
                 Hello, world!
             </Button>
         </View>
-        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} disabled={true}>
                 Hello, world!
             </Button>
@@ -180,7 +182,7 @@ export const Variants: StoryComponentType = () => (
                 Hello, world!
             </Button>
         </View>
-        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} color="destructive">
                 Hello, world!
             </Button>
@@ -247,26 +249,28 @@ WithColor.parameters = {
 };
 
 export const Dark: StoryComponentType = () => (
-    <View style={{backgroundColor: color.darkBlue, padding: spacing.medium_16}}>
-        <View style={{flexDirection: "row"}}>
+    <View
+        style={{
+            backgroundColor: "darkBlue",
+            padding: "medium_16",
+            gap: "medium_16",
+        }}
+    >
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} light={true}>
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button onClick={() => {}} light={true} kind="secondary">
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button onClick={() => {}} light={true} kind="tertiary">
                 Hello, world!
             </Button>
         </View>
-        <Strut size={16} />
-        <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} light={true} disabled={true}>
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -275,7 +279,6 @@ export const Dark: StoryComponentType = () => (
             >
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -285,12 +288,10 @@ export const Dark: StoryComponentType = () => (
                 Hello, world!
             </Button>
         </View>
-        <Strut size={16} />
-        <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} light={true} color="destructive">
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -299,7 +300,6 @@ export const Dark: StoryComponentType = () => (
             >
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -622,15 +622,15 @@ export const CustomStyles = {
         },
     },
     render: (args: any) => (
-        <View style={{gap: spacing.medium_16}}>
+        <View style={{gap: "medium_16"}}>
             <HeadingSmall>Wonder Blocks theme (default)</HeadingSmall>
-            <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+            <View style={{flexDirection: "row", gap: "medium_16"}}>
                 <Button {...args} kind="primary" />
                 <Button {...args} kind="secondary" />
                 <Button {...args} kind="tertiary" />
             </View>
             <HeadingSmall>Khanmigo theme</HeadingSmall>
-            <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+            <View style={{flexDirection: "row", gap: "medium_16"}}>
                 <ThemeSwitcherContext.Provider value="khanmigo">
                     <Button {...args} kind="primary" />
                     <Button {...args} kind="secondary" />
@@ -758,7 +758,7 @@ export const KhanmigoTheme: StoryComponentType = {
 
         return (
             <ThemeSwitcherContext.Provider value="khanmigo">
-                <View style={{gap: spacing.medium_16}}>
+                <View style={{gap: "medium_16"}}>
                     {stories.map((Story, i) => (
                         <Story key={i} />
                     ))}
diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index c02543fc9..e0d34d171 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -1,31 +1,33 @@
 import * as React from "react";
-import {CSSProperties, StyleSheet} from "aphrodite";
+// import {CSSProperties, StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
 import {__RouterContext} from "react-router";
 
 import {LabelLarge, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import {addStyle, View} from "@khanacademy/wonder-blocks-core";
+import {View} from "@khanacademy/wonder-blocks-core";
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 import {isClientSideUrl} from "@khanacademy/wonder-blocks-clickable";
 import {
-    ThemedStylesFn,
+    // ThemedStylesFn,
     useScopedTheme,
-    useStyles,
+    // useStyles,
 } from "@khanacademy/wonder-blocks-theming";
 
 import type {
     ChildrenProps,
     ClickableState,
 } from "@khanacademy/wonder-blocks-clickable";
+import {SystemStyleObject} from "@/styled-system/types";
+import {css} from "@/styled-system/css";
 import type {SharedProps} from "./button";
 import {ButtonThemeContext, ButtonThemeContract} from "../themes/themed-button";
 import {ButtonIcon} from "./button-icon";
 
 type Props = SharedProps & ChildrenProps & ClickableState;
 
-const StyledAnchor = addStyle("a");
-const StyledButton = addStyle("button");
-const StyledLink = addStyle(Link);
+const StyledAnchor = "a"; //addStyle("a");
+const StyledButton = "button"; //addStyle("button");
+const StyledLink = Link; //addStyle(Link);
 
 const ButtonCore: React.ForwardRefExoticComponent<
     Props &
@@ -35,7 +37,8 @@ const ButtonCore: React.ForwardRefExoticComponent<
     Props
 >(function ButtonCore(props: Props, ref) {
     const {theme, themeName} = useScopedTheme(ButtonThemeContext);
-    const sharedStyles = useStyles(themedSharedStyles, theme);
+    // const sharedStyles = useStyles(themedSharedStyles, theme);
+    const sharedStyles = themedSharedStyles;
 
     const renderInner = (router: any): React.ReactNode => {
         const {
@@ -73,7 +76,7 @@ const ButtonCore: React.ForwardRefExoticComponent<
 
         const disabled = spinner || disabledProp;
 
-        const defaultStyle = [
+        const defaultStyle = css(
             sharedStyles.shared,
             disabled && sharedStyles.disabled,
             startIcon && sharedStyles.withStartIcon,
@@ -94,13 +97,14 @@ const ButtonCore: React.ForwardRefExoticComponent<
                 ],
             size === "small" && sharedStyles.small,
             size === "large" && sharedStyles.large,
-        ];
+            style ? (style as SystemStyleObject) : undefined,
+        );
 
         const commonProps = {
             "data-testid": testId,
             id: id,
             role: "button",
-            style: [defaultStyle, style],
+            className: defaultStyle,
             ...restProps,
         } as const;
 
@@ -199,7 +203,8 @@ const ButtonCore: React.ForwardRefExoticComponent<
                 <StyledLink
                     {...commonProps}
                     to={href}
-                    ref={ref as React.Ref<typeof Link>}
+                    // TODO(juan): fix this
+                    // ref={ref as React.Ref<typeof Link>}
                 >
                     {contents}
                 </StyledLink>
@@ -219,6 +224,7 @@ const ButtonCore: React.ForwardRefExoticComponent<
                     {...commonProps}
                     aria-disabled={disabled}
                     ref={ref as React.Ref<HTMLButtonElement>}
+                    data-panda-theme={theme.theme}
                 >
                     {contents}
                 </StyledButton>
@@ -235,99 +241,100 @@ const ButtonCore: React.ForwardRefExoticComponent<
 
 export default ButtonCore;
 
-const themedSharedStyles: ThemedStylesFn<ButtonThemeContract> = (theme) => ({
-    shared: {
+const themedSharedStyles: Record<string, SystemStyleObject> = {
+    shared: css.raw({
         position: "relative",
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        height: theme.size.height.medium,
+        height: "height.medium",
         paddingTop: 0,
         paddingBottom: 0,
-        paddingLeft: theme.padding.large,
-        paddingRight: theme.padding.large,
+        paddingLeft: "padding.large",
+        paddingRight: "padding.large",
         border: "none",
-        borderRadius: theme.border.radius.default,
+        borderRadius: "default",
         cursor: "pointer",
         outline: "none",
+        outlineOffset: 0,
         textDecoration: "none",
         boxSizing: "border-box",
         // This removes the 300ms click delay on mobile browsers by indicating that
         // "double-tap to zoom" shouldn't be used on this element.
         touchAction: "manipulation",
         userSelect: "none",
-        ":focus": {
+        "&:focus": {
             // Mobile: Removes a blue highlight style shown when the user clicks a button
             WebkitTapHighlightColor: "rgba(0,0,0,0)",
         },
-    },
-    disabled: {
+    }),
+    disabled: css.raw({
         cursor: "auto",
-    },
-    small: {
-        borderRadius: theme.border.radius.small,
-        height: theme.size.height.small,
-    },
-    large: {
-        borderRadius: theme.border.radius.large,
-        height: theme.size.height.large,
-    },
-    text: {
+    }),
+    small: css.raw({
+        borderRadius: "small",
+        height: "height.small",
+    }),
+    large: css.raw({
+        borderRadius: "large",
+        height: "height.large",
+    }),
+    text: css.raw({
         alignItems: "center",
-        fontWeight: theme.font.weight.default,
+        fontWeight: "default",
         whiteSpace: "nowrap",
         overflow: "hidden",
         textOverflow: "ellipsis",
         display: "inline-block", // allows the button text to truncate
         pointerEvents: "none", // fix Safari bug where the browser was eating mouse events
-    },
-    largeText: {
-        fontSize: theme.font.size.large,
-        lineHeight: `${theme.font.lineHeight.large}px`,
-    },
-    textWithFocus: {
+    }),
+    largeText: css.raw({
+        fontSize: "large",
+        lineHeight: "large",
+    }),
+    textWithFocus: css.raw({
         position: "relative", // allows the tertiary button border to use the label width
-    },
-    hiddenText: {
+    }),
+    hiddenText: css.raw({
         visibility: "hidden",
-    },
-    spinner: {
+    }),
+    spinner: css.raw({
         position: "absolute",
-    },
-    startIcon: {
-        marginRight: theme.padding.small,
-        marginLeft: theme.margin.icon.offset,
-    },
-    tertiaryStartIcon: {
+    }),
+    startIcon: css.raw({
+        marginRight: "padding.small",
+        marginLeft: "margin.icon.offset",
+    }),
+    tertiaryStartIcon: css.raw({
         // Undo the negative padding from startIcon since tertiary
         // buttons don't have extra padding.
         marginLeft: 0,
-    },
-    endIcon: {
-        marginLeft: theme.padding.small,
-    },
-    iconWrapper: {
-        borderRadius: theme.border.radius.icon,
-        padding: theme.padding.xsmall,
+    }),
+    endIcon: css.raw({
+        marginLeft: "padding.small",
+    }),
+    iconWrapper: css.raw({
+        borderRadius: "icon",
+        padding: "padding.xsmall",
         // View has a default minWidth of 0, which causes the label text
         // to encroach on the icon when it needs to truncate. We can fix
         // this by setting the minWidth to auto.
         minWidth: "auto",
-    },
-    iconWrapperSecondaryHovered: {
-        backgroundColor: theme.color.bg.icon.secondaryHover,
-        color: theme.color.text.icon.secondaryHover,
-    },
-    endIconWrapper: {
-        marginLeft: theme.padding.small,
-        marginRight: theme.margin.icon.offset,
-    },
-    endIconWrapperTertiary: {
+    }),
+    iconWrapperSecondaryHovered: css.raw({
+        backgroundColor: "bg.icon.secondaryHover",
+        color: "text.icon.secondaryHover",
+    }),
+    endIconWrapper: css.raw({
+        marginLeft: "padding.small",
+        marginRight: "margin.icon.offset",
+    }),
+    endIconWrapperTertiary: css.raw({
         marginRight: 0,
-    },
-});
+    }),
+};
 
-const styles: Record<string, any> = {};
+const styles: {[key: string]: Record<string, SystemStyleObject>} = {};
 
 // export for testing only
 export const _generateStyles = (
@@ -340,8 +347,8 @@ export const _generateStyles = (
 ) => {
     const color: string =
         buttonColor === "destructive"
-            ? theme.color.bg.critical.default
-            : theme.color.bg.action.default;
+            ? "bg.critical.default"
+            : "bg.action.default";
 
     const buttonType = `${color}-${kind}-${light}-${size}-${themeName}`;
 
@@ -351,168 +358,145 @@ export const _generateStyles = (
 
     const fadedColor =
         buttonColor === "destructive"
-            ? theme.color.bg.critical.inverse
-            : theme.color.bg.action.inverse;
+            ? "bg.critical.inverse"
+            : "bg.action.inverse";
     const activeColor =
         buttonColor === "destructive"
-            ? theme.color.bg.critical.active
-            : theme.color.bg.action.active;
-    const padding =
-        size === "large" ? theme.padding.xLarge : theme.padding.large;
+            ? "bg.critical.active"
+            : "bg.action.active";
+    const padding = size === "large" ? "padding.xLarge" : "padding.large";
 
-    let newStyles: Record<string, CSSProperties> = {};
+    let newStyles: Record<string, SystemStyleObject> = {};
     if (kind === "primary") {
-        const boxShadowInnerColor: string = light
-            ? theme.color.bg.primary.inverse
-            : theme.color.bg.primary.default;
-
         newStyles = {
-            default: {
-                background: light ? theme.color.bg.primary.default : color,
-                color: light ? color : theme.color.text.inverse,
+            default: css.raw({
+                background: light ? "bg.primary.default" : color,
+                color: light ? color : "text.inverse",
                 paddingLeft: padding,
                 paddingRight: padding,
-            },
-            focus: {
-                // This assumes a background of white for the regular button and
-                // a background of darkBlue for the light version. The inner
-                // box shadow/ring is also small enough for a slight variation
-                // in the background color not to matter too much.
-                boxShadow: `0 0 0 1px ${boxShadowInnerColor}, 0 0 0 3px ${
-                    light ? theme.color.bg.primary.default : color
-                }`,
-            },
-            active: {
-                boxShadow: `0 0 0 1px ${boxShadowInnerColor}, 0 0 0 3px ${
-                    light ? fadedColor : activeColor
-                }`,
+                outlineStyle: "solid",
+                outlineWidth: "focused",
+                outlineOffset: 1,
+            }),
+            focus: css.raw({
+                outlineColor: light ? "bg.primary.default" : color,
+            }),
+            active: css.raw({
+                outlineColor: light ? fadedColor : activeColor,
                 background: light ? fadedColor : activeColor,
                 color: light ? activeColor : fadedColor,
-            },
-            disabled: {
-                background: light
-                    ? fadedColor
-                    : theme.color.bg.primary.disabled,
-                color: light ? color : theme.color.text.primary.disabled,
+            }),
+            disabled: css.raw({
+                background: light ? fadedColor : "bg.primary.disabled",
+                color: light ? color : "text.primary.disabled",
                 cursor: "default",
-                ":focus": {
-                    boxShadow: `0 0 0 1px ${
-                        light
-                            ? theme.color.bg.primary.disabled
-                            : theme.color.bg.primary.default
-                    }, 0 0 0 3px ${
-                        light ? fadedColor : theme.color.bg.primary.disabled
-                    }`,
+                "&:focus": {
+                    outlineColor: light ? fadedColor : "bg.primary.disabled",
                 },
-            },
+            }),
         };
     } else if (kind === "secondary") {
         const secondaryBorderColor =
             buttonColor === "destructive"
-                ? theme.color.border.secondary.critical
-                : theme.color.border.secondary.action;
+                ? "border.secondary.critical"
+                : "border.secondary.action";
         const secondaryActiveColor =
             buttonColor === "destructive"
-                ? theme.color.bg.secondary.active.critical
-                : theme.color.bg.secondary.active.action;
+                ? "bg.secondary.active.critical"
+                : "bg.secondary.active.action";
 
         newStyles = {
-            default: {
+            default: css.raw({
                 background: light
-                    ? theme.color.bg.secondary.inverse
-                    : theme.color.bg.secondary.default,
-                color: light ? theme.color.text.inverse : color,
+                    ? "bg.secondary.inverse"
+                    : "bg.secondary.default",
+                color: light ? "text.inverse" : color,
                 borderColor: light
-                    ? theme.color.border.secondary.inverse
+                    ? "border.secondary.inverse"
                     : secondaryBorderColor,
                 borderStyle: "solid",
-                borderWidth: theme.border.width.secondary,
+                borderWidth: "secondary",
                 paddingLeft: padding,
                 paddingRight: padding,
-            },
-            focus: {
+            }),
+            focus: css.raw({
                 background: light
-                    ? theme.color.bg.secondary.inverse
-                    : theme.color.bg.secondary.focus,
+                    ? "bg.secondary.inverse"
+                    : "bg.secondary.focus",
                 borderColor: "transparent",
-                outlineColor: light
-                    ? theme.color.border.primary.inverse
-                    : color,
+                outlineColor: light ? "border.primary.inverse" : color,
                 outlineStyle: "solid",
-                outlineWidth: theme.border.width.focused,
-            },
+                outlineWidth: "focused",
+            }),
 
-            active: {
+            active: css.raw({
                 background: light ? activeColor : secondaryActiveColor,
                 color: light ? fadedColor : activeColor,
                 borderColor: "transparent",
                 outlineColor: light ? fadedColor : activeColor,
                 outlineStyle: "solid",
-                outlineWidth: theme.border.width.focused,
-            },
-            disabled: {
-                color: light
-                    ? theme.color.text.secondary.inverse
-                    : theme.color.text.disabled,
-                outlineColor: light ? fadedColor : theme.color.border.disabled,
+                outlineWidth: "focused",
+            }),
+            disabled: css.raw({
+                color: light ? "text.secondary.inverse" : "text.disabled",
+                outlineColor: light ? fadedColor : "disabled",
+                outlineWidth: 0,
                 cursor: "default",
-                ":focus": {
+                "&:focus": {
                     outlineColor: light
-                        ? theme.color.border.secondary.inverse
-                        : theme.color.border.disabled,
-                    outlineWidth: theme.border.width.disabled,
+                        ? "border.secondary.inverse"
+                        : "border.disabled",
+                    outlineWidth: "disabled",
                 },
-            },
+            }),
         };
     } else if (kind === "tertiary") {
         newStyles = {
-            default: {
+            default: css.raw({
                 background: "none",
-                color: light ? theme.color.text.inverse : color,
+                color: light ? "text.inverse" : color,
                 paddingLeft: 0,
                 paddingRight: 0,
-            },
-            hover: {
-                ":after": {
+            }),
+            hover: css.raw({
+                "&:after": {
                     content: "''",
                     position: "absolute",
-                    height: theme.size.height.tertiaryHover,
+                    height: "height.tertiaryHover",
                     width: "100%",
                     right: 0,
                     bottom: 0,
-                    background: light ? theme.color.bg.tertiary.hover : color,
-                    borderRadius: theme.border.radius.tertiary,
+                    background: light ? "bg.tertiary.hover" : color,
+                    borderRadius: "tertiary",
                 },
-            },
-            focus: {
+            }),
+            focus: css.raw({
                 outlineStyle: "solid",
-                outlineColor: light
-                    ? theme.color.border.tertiary.inverse
-                    : color,
-                outlineWidth: theme.border.width.focused,
-                borderRadius: theme.border.radius.default,
-            },
-            active: {
+                outlineColor: light ? "border.tertiary.inverse" : color,
+                outlineWidth: "focused",
+                borderRadius: "default",
+            }),
+            active: css.raw({
                 color: light ? fadedColor : activeColor,
-                ":after": {
+                "&:after": {
                     height: 1,
                     background: light ? fadedColor : activeColor,
                 },
-            },
-            disabled: {
-                color: light ? fadedColor : theme.color.text.disabled,
+            }),
+            disabled: css.raw({
+                color: light ? fadedColor : "text.disabled",
                 cursor: "default",
-            },
-            disabledFocus: {
+            }),
+            disabledFocus: css.raw({
                 outlineColor: light
-                    ? theme.color.border.tertiary.inverse
-                    : theme.color.border.disabled,
-            },
+                    ? "border.tertiary.inverse"
+                    : "border.disabled",
+            }),
         };
     } else {
         throw new Error("Button kind not recognized");
     }
 
-    styles[buttonType] = StyleSheet.create(newStyles);
+    styles[buttonType] = newStyles;
     return styles[buttonType];
 };
diff --git a/packages/wonder-blocks-button/src/themes/default.ts b/packages/wonder-blocks-button/src/themes/default.ts
index 63ef85d46..8d8db6463 100644
--- a/packages/wonder-blocks-button/src/themes/default.ts
+++ b/packages/wonder-blocks-button/src/themes/default.ts
@@ -1,53 +1,51 @@
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
+import {defineTheme} from "./theme";
 
 const theme = {
-    color: {
+    colors: {
         bg: {
             /**
              * Color
              */
             // color="default"
             action: {
-                default: tokens.color.blue,
-                active: tokens.color.activeBlue,
-                inverse: tokens.color.fadedBlue,
+                default: {value: tokens.color.blue},
+                active: {value: tokens.color.activeBlue},
+                inverse: {value: tokens.color.fadedBlue},
             },
             // color="destructive"
             critical: {
-                default: tokens.color.red,
-                active: tokens.color.activeRed,
-                inverse: tokens.color.fadedRed,
+                default: {value: tokens.color.red},
+                active: {value: tokens.color.activeRed},
+                inverse: {value: tokens.color.fadedRed},
             },
 
             /**
              * Kind
              */
             primary: {
-                default: tokens.color.white,
-                disabled: tokens.color.offBlack32,
-                // used in boxShadow
-                inverse: tokens.color.darkBlue,
+                default: {value: tokens.color.white},
+                disabled: {value: tokens.color.offBlack32},
+                inverse: {value: tokens.color.darkBlue},
             },
-
             secondary: {
-                default: "none",
-                inverse: "none",
-                focus: tokens.color.white,
+                default: {value: "none"},
+                inverse: {value: "none"},
+                focus: {value: tokens.color.white},
                 active: {
-                    action: tokens.color.fadedBlue,
-                    critical: tokens.color.fadedRed,
+                    action: {value: tokens.color.fadedBlue},
+                    critical: {value: tokens.color.fadedRed},
                 },
             },
-
             tertiary: {
-                hover: tokens.color.white,
+                hover: {value: tokens.color.white},
             },
 
             /**
              * Icons
              */
             icon: {
-                secondaryHover: "transparent",
+                secondaryHover: {value: "transparent"},
             },
         },
         text: {
@@ -55,25 +53,25 @@ const theme = {
              * Default
              */
             // kind="secondary, tertiary", disabled=true, light=false
-            disabled: tokens.color.offBlack32,
+            disabled: {value: tokens.color.offBlack32},
             // kind="primary", light=false | kind="secondary, tertiary", light=true
-            inverse: tokens.color.white,
+            inverse: {value: tokens.color.white},
 
             /**
              * Kind
              */
             primary: {
-                disabled: tokens.color.white64,
+                disabled: {value: tokens.color.white64},
             },
             secondary: {
-                inverse: tokens.color.white50,
+                inverse: {value: tokens.color.white50},
             },
 
             /**
              * Icons
              */
             icon: {
-                secondaryHover: tokens.color.blue,
+                secondaryHover: {value: tokens.color.blue},
             },
         },
         border: {
@@ -81,81 +79,81 @@ const theme = {
              * Default
              */
             // kind="secondary", light=false | kind="tertiary", light=false
-            disabled: tokens.color.offBlack32,
+            disabled: {value: tokens.color.offBlack32},
             /**
              * Kind
              */
             primary: {
-                inverse: tokens.color.white,
+                inverse: {value: tokens.color.white},
             },
             secondary: {
-                action: tokens.color.offBlack50,
-                critical: tokens.color.offBlack50,
-                inverse: tokens.color.white50,
+                action: {value: tokens.color.offBlack50},
+                critical: {value: tokens.color.offBlack50},
+                inverse: {value: tokens.color.white50},
             },
             tertiary: {
-                inverse: tokens.color.white,
+                inverse: {value: tokens.color.white},
             },
         },
     },
-    border: {
-        width: {
-            // secondary (resting)
-            secondary: tokens.border.width.hairline,
-            // secondary (resting, focus, active), tertiary (focus)
-            focused: tokens.border.width.thin,
-            // secondary (disabled)
-            disabled: tokens.border.width.thin,
-        },
-        radius: {
-            // default
-            default: tokens.border.radius.medium_4,
-            // tertiary
-            tertiary: tokens.border.radius.xSmall_2,
-            // small button
-            small: tokens.border.radius.medium_4,
-            // large button
-            large: tokens.border.radius.large_6,
+    borderWidths: {
+        // secondary (resting)
+        secondary: {value: tokens.border.width.hairline + "px"},
+        // secondary (resting, focus, active), tertiary (focus)
+        focused: {value: tokens.border.width.thin + "px"},
+        // secondary (disabled)
+        disabled: {value: tokens.border.width.thin + "px"},
+    },
+    radii: {
+        // default
+        default: {value: tokens.border.radius.medium_4 + "px"},
+        // tertiary
+        tertiary: {value: tokens.border.radius.xSmall_2 + "px"},
+        // small button
+        small: {value: tokens.border.radius.medium_4 + "px"},
+        // large button
+        large: {value: tokens.border.radius.large_6 + "px"},
 
-            /**
-             * Icons
-             */
-            icon: tokens.border.radius.full,
-        },
+        /**
+         * Icons
+         */
+        icon: {value: tokens.border.radius.full},
     },
-    size: {
+    sizes: {
         height: {
-            tertiaryHover: tokens.spacing.xxxxSmall_2,
-            small: tokens.spacing.xLarge_32,
-            // NOTE: These height tokens are specific to this component.
-            medium: 40,
-            large: 56,
+            tertiaryHover: {value: tokens.spacing.xxxxSmall_2 + "px"},
+            small: {value: tokens.spacing.xLarge_32 + "px"},
+            // NOTE: These tokens are specific to this component.
+            medium: {value: "40px"},
+            large: {value: "56px"},
         },
     },
-    margin: {
-        icon: {
-            offset: -tokens.spacing.xxxxSmall_2,
+    spacing: {
+        margin: {
+            icon: {
+                offset: {value: `-${tokens.spacing.xxxxSmall_2}px`},
+            },
+        },
+        padding: {
+            xsmall: {value: tokens.spacing.xxxxSmall_2 + "px"},
+            small: {value: tokens.spacing.xxSmall_6 + "px"},
+            medium: {value: tokens.spacing.small_12 + "px"},
+            large: {value: tokens.spacing.medium_16 + "px"},
+            xLarge: {value: tokens.spacing.xLarge_32 + "px"},
         },
     },
-    padding: {
-        xsmall: tokens.spacing.xxxxSmall_2,
-        small: tokens.spacing.xxSmall_6,
-        medium: tokens.spacing.small_12,
-        large: tokens.spacing.medium_16,
-        xLarge: tokens.spacing.xLarge_32,
+    fontSizes: {
+        // NOTE: This token is specific to this button size.
+        large: {value: "18px"},
     },
-    font: {
-        size: {
-            // NOTE: This token is specific to this button size.
-            large: 18,
-        },
-        lineHeight: {
-            large: tokens.font.lineHeight.medium,
-        },
-        weight: {
-            default: tokens.font.weight.bold,
-        },
+    lineHeights: {
+        large: {value: tokens.font.lineHeight.medium + "px"},
+    },
+    fontWeights: {
+        default: {value: tokens.font.weight.regular.toString()},
     },
 };
 
-export default theme;
+export default defineTheme({
+    semanticTokens: theme,
+});
diff --git a/packages/wonder-blocks-button/src/themes/khanmigo.ts b/packages/wonder-blocks-button/src/themes/khanmigo.ts
index 12b031ad5..1b10dd71e 100644
--- a/packages/wonder-blocks-button/src/themes/khanmigo.ts
+++ b/packages/wonder-blocks-button/src/themes/khanmigo.ts
@@ -1,58 +1,61 @@
 import {mergeTheme} from "@khanacademy/wonder-blocks-theming";
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import defaultTheme from "./default";
+import {defineTheme} from "./theme";
 
 /**
  * The overrides for the Khanmigo theme.
  */
-const theme = mergeTheme(defaultTheme, {
-    color: {
-        bg: {
-            secondary: {
-                default: tokens.color.offWhite,
-                active: {
-                    action: tokens.color.fadedBlue8,
-                    critical: tokens.color.fadedRed8,
+const theme = defineTheme(
+    mergeTheme(defaultTheme, {
+        semanticTokens: {
+            colors: {
+                bg: {
+                    secondary: {
+                        default: {value: tokens.color.offWhite},
+                        active: {
+                            action: {value: tokens.color.fadedBlue8},
+                            critical: {value: tokens.color.fadedRed8},
+                        },
+                        focus: {value: tokens.color.offWhite},
+                    },
+                    icon: {
+                        secondaryHover: {value: tokens.color.fadedBlue16},
+                    },
+                },
+                border: {
+                    secondary: {
+                        action: {value: tokens.color.fadedBlue},
+                        critical: {value: tokens.color.fadedRed},
+                    },
+                },
+                text: {
+                    icon: {
+                        secondaryHover: {value: tokens.color.blue},
+                    },
                 },
-                focus: tokens.color.offWhite,
             },
-            icon: {
-                secondaryHover: tokens.color.fadedBlue16,
+            radii: {
+                default: {value: tokens.border.radius.xLarge_12 + "px"},
+                small: {value: tokens.border.radius.large_6 + "px"},
+                large: {value: tokens.border.radius.xLarge_12 + "px"},
             },
-        },
-        border: {
-            secondary: {
-                action: tokens.color.fadedBlue,
-                critical: tokens.color.fadedRed,
+            borderWidths: {
+                disabled: {value: tokens.border.width.hairline + "px"},
+                focused: {value: tokens.border.width.hairline + "px"},
             },
-        },
-        text: {
-            icon: {
-                secondaryHover: tokens.color.blue,
+            spacing: {
+                margin: {
+                    icon: {
+                        offset: {value: -tokens.spacing.xSmall_8 + "px"},
+                    },
+                },
+            },
+            fontWeights: {
+                default: {value: tokens.font.weight.regular},
             },
         },
-    },
-    border: {
-        radius: {
-            default: tokens.border.radius.xLarge_12,
-            small: tokens.border.radius.large_6,
-            large: tokens.border.radius.xLarge_12,
-        },
-        width: {
-            focused: tokens.border.width.hairline,
-        },
-    },
-    margin: {
-        icon: {
-            // Bring the icons closer to the edges of the button.
-            offset: -tokens.spacing.xSmall_8,
-        },
-    },
-    font: {
-        weight: {
-            default: tokens.font.weight.regular,
-        },
-    },
-});
+    }),
+);
 
 export default theme;
diff --git a/packages/wonder-blocks-button/src/themes/theme.ts b/packages/wonder-blocks-button/src/themes/theme.ts
new file mode 100644
index 000000000..13089431c
--- /dev/null
+++ b/packages/wonder-blocks-button/src/themes/theme.ts
@@ -0,0 +1,129 @@
+import {defineThemeContract} from "@pandacss/dev";
+
+export const defineTheme = defineThemeContract({
+    // Follows the same "Token types" structure defined in Panda
+    // @see https://panda-css.com/docs/theming/tokens#token-types
+    semanticTokens: {
+        colors: {
+            // @see https://panda-css.com/docs/theming/tokens#token-nesting
+            bg: {
+                // color="default"
+                action: {
+                    default: {value: ""},
+                    active: {value: ""},
+                    inverse: {value: ""},
+                },
+                // color="destructive"
+                critical: {
+                    default: {value: ""},
+                    active: {value: ""},
+                    inverse: {value: ""},
+                },
+                // kind="primary"
+                primary: {
+                    default: {value: ""},
+                    disabled: {value: ""},
+                    inverse: {value: ""},
+                },
+                // kind="secondary"
+                secondary: {
+                    default: {value: ""},
+                    inverse: {value: ""},
+                    focus: {value: ""},
+                    active: {
+                        action: {value: ""},
+                        critical: {value: ""},
+                    },
+                },
+                // kind="tertiary"
+                tertiary: {
+                    hover: {value: ""},
+                },
+                // icon
+                icon: {
+                    secondaryHover: {value: ""},
+                },
+            },
+            text: {
+                // kind="secondary, tertiary", disabled=true, light=false
+                disabled: {value: ""},
+                // kind="primary", light=false | kind="secondary, tertiary", light=true
+                inverse: {value: ""},
+                // kind
+                primary: {
+                    disabled: {value: ""},
+                },
+                secondary: {
+                    inverse: {value: ""},
+                },
+                // icons
+                icon: {
+                    secondaryHover: {value: ""},
+                },
+            },
+            border: {
+                // kind="secondary", light=false | kind="tertiary", light=false
+                disabled: {value: ""},
+                // kind
+                primary: {
+                    inverse: {value: ""},
+                },
+                secondary: {
+                    action: {value: ""},
+                    critical: {value: ""},
+                    inverse: {value: ""},
+                },
+                tertiary: {
+                    inverse: {value: ""},
+                },
+            },
+        },
+
+        borderWidths: {
+            secondary: {value: ""},
+            focused: {value: ""},
+            disabled: {value: ""},
+        },
+        radii: {
+            default: {value: ""},
+            tertiary: {value: ""},
+            small: {value: ""},
+            large: {value: ""},
+            icon: {value: ""},
+        },
+
+        sizes: {
+            height: {
+                tertiaryHover: {value: ""},
+                small: {value: ""},
+                medium: {value: ""},
+                large: {value: ""},
+            },
+        },
+        spacing: {
+            margin: {
+                icon: {
+                    offset: {value: ""},
+                },
+            },
+
+            padding: {
+                xsmall: {value: ""},
+                small: {value: ""},
+                medium: {value: ""},
+                large: {value: ""},
+                xLarge: {value: ""},
+            },
+        },
+
+        fontSizes: {
+            large: {value: ""},
+        },
+        lineHeights: {
+            large: {value: ""},
+        },
+        fontWeights: {
+            default: {value: ""},
+        },
+    },
+});
diff --git a/packages/wonder-blocks-button/src/themes/themed-button.tsx b/packages/wonder-blocks-button/src/themes/themed-button.tsx
index 0402516b8..c214fe076 100644
--- a/packages/wonder-blocks-button/src/themes/themed-button.tsx
+++ b/packages/wonder-blocks-button/src/themes/themed-button.tsx
@@ -1,42 +1,32 @@
 import * as React from "react";
 import {
     createThemeContext,
-    Themes,
     ThemeSwitcherContext,
 } from "@khanacademy/wonder-blocks-theming";
 
-import defaultTheme from "./default";
-import khanmigoTheme from "./khanmigo";
-
 type Props = {
     children: React.ReactNode;
 };
 
-export type ButtonThemeContract = typeof defaultTheme;
-
-/**
- * The themes available to the Button component.
- */
-const themes: Themes<ButtonThemeContract> = {
-    default: defaultTheme,
-    khanmigo: khanmigoTheme,
-};
-
 /**
  * The context that provides the theme to the Button component.
  * This is generally consumed via the `useScopedTheme` hook.
  */
-export const ButtonThemeContext = createThemeContext(defaultTheme);
+export const ButtonThemeContext = createThemeContext({theme: "buttonDefault"});
+
+export type ButtonThemeContract = {theme: string};
 
 /**
  * ThemedButton is a component that provides a theme to the <Button/> component.
  */
 export default function ThemedButton(props: Props) {
     const currentTheme = React.useContext(ThemeSwitcherContext);
+    const theme =
+        // NOTE: This maps to the themes defined in panda.config.ts
+        currentTheme === "default" ? "buttonDefault" : "buttonKhanmigo";
 
-    const theme = themes[currentTheme] || defaultTheme;
     return (
-        <ButtonThemeContext.Provider value={theme}>
+        <ButtonThemeContext.Provider value={{theme}}>
             {props.children}
         </ButtonThemeContext.Provider>
     );
diff --git a/packages/wonder-blocks-core/src/components/text.tsx b/packages/wonder-blocks-core/src/components/text.tsx
index 440d04ec8..54ea1318f 100644
--- a/packages/wonder-blocks-core/src/components/text.tsx
+++ b/packages/wonder-blocks-core/src/components/text.tsx
@@ -99,12 +99,29 @@ const Text = React.forwardRef(function Text(
         );
     }
 
+    const pandaStyle = style as StyleType;
+
+    const flattenStyles = Array.isArray(pandaStyle)
+        ? pandaStyle.flatMap((s: StyleType) => {
+              if (Array.isArray(s)) {
+                  return s.flat();
+              }
+
+              return s;
+          })
+        : pandaStyle;
+
+    // NOTE(juan): To make panda's css function happy!
+    const extraStyles = Array.isArray(flattenStyles)
+        ? [...flattenStyles]
+        : style;
+
     return (
         // @ts-expect-error [FEI-5019] - TS2322 - Type '{ children: ReactNode; style: any; className: string; "data-testid": string | undefined; tabIndex?: number | undefined; id?: string | undefined; "data-modal-launcher-portal"?: boolean | undefined; ... 69 more ...; onBlur?: ((e: FocusEvent<...>) => unknown) | undefined; }' is not assignable to type 'IntrinsicAttributes'.
         <Tag
             {...otherProps}
             className={cx(
-                css(rawStyles.text, isHeader && rawStyles.header, style),
+                css(rawStyles.text, isHeader && rawStyles.header, extraStyles),
                 otherProps.className,
             )}
             data-testid={testId}
diff --git a/panda.config.ts b/panda.config.ts
index af6ef422b..38cd7a680 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -1,5 +1,7 @@
 import {defineConfig, defineTokens} from "@pandacss/dev";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import buttonDefaultTheme from "./packages/wonder-blocks-button/src/themes/default";
+import buttonKhanmigoTheme from "./packages/wonder-blocks-button/src/themes/khanmigo";
 
 const wbTokenToPandaToken = (token: Record<string, string | number>) =>
     Object.entries(token)
@@ -46,6 +48,15 @@ export default defineConfig({
     theme: {
         tokens: tokens,
     },
+    themes: {
+        /**
+         * The themes available to the Button component.
+         */
+        // NOTE: This generates css variables at build time for each theme, so
+        // we don't have to dynamically load the theme at runtime.
+        buttonDefault: buttonDefaultTheme,
+        buttonKhanmigo: buttonKhanmigoTheme,
+    },
 
     // The output directory for your css system
     outdir: "styled-system",
@@ -58,6 +69,7 @@ export default defineConfig({
                 },
             },
         ],
+        themes: ["buttonDefault", "buttonKhanmigo"],
     },
 
     importMap: "@/styled-system",