Migrate Typography to Panda CSS

.changeset/rare-actors-boil.md

@@ -1,5 +1,6 @@
 ---
 "@khanacademy/wonder-blocks-form": major
+"@khanacademy/wonder-blocks-typography": major
 ---
 
-Migrate TextField to PandaCSS
+Migrate TextField and Typography to PandaCSS

__docs__/wonder-blocks-typography/typography.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {css, StyleSheet} from "aphrodite";
+// import {css, StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
@@ -31,6 +31,8 @@ import TypographyArgTypes from "./typography.argtypes";
 // NOTE: Only for testing purposes.
 // eslint-disable-next-line import/no-unassigned-import
 import "./styles.css";
+import {SystemStyleObject} from "@/styled-system/types";
+import {css} from "@/styled-system/css";
 
 const typographyDescription = `Typography. \`wonder-blocks-typography\`
 provides a set of standardized components for displaying text in a consistent
@@ -117,14 +119,14 @@ TypographyElements.parameters = {
  */
 export const WithStyle: StoryObj<typeof Title> = {
     render: () => {
-        const styles = StyleSheet.create({
+        const styles: Record<string, SystemStyleObject> = {
             blueText: {
                 color: color.blue,
             },
             highlighted: {
                 background: color.offBlack16,
             },
-        });
+        };
 
         return (
             <Title

packages/wonder-blocks-core/src/components/text.tsx

@@ -2,16 +2,43 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
+import {css, cx} from "@/styled-system/css";
+import {SystemStyleObject} from "@/styled-system/types";
 import {processStyleList} from "../util/util";
 
-import type {TextViewSharedProps} from "../util/types";
+import type {StyleType, TextViewSharedProps} from "../util/types";
 
 type Props = TextViewSharedProps & {
     tag?: string;
 };
 
 const isHeaderRegex = /^h[1-6]$/;
 
+function isAphroditeStyle(style: StyleType): style is StyleType {
+    return (
+        (typeof style === "object" &&
+            Object.prototype.hasOwnProperty.call(style, "_definition")) ||
+        (Array.isArray(style) &&
+            style.length > 0 &&
+            style.some(
+                (s) =>
+                    s &&
+                    typeof s === "object" &&
+                    Object.prototype.hasOwnProperty.call(s, "_definition"),
+            ))
+    );
+}
+
+const rawStyles: Record<string, SystemStyleObject> = {
+    text: {
+        fontSmoothing: "antialiased",
+    },
+    header: {
+        marginTop: 0,
+        marginBottom: 0,
+    },
+};
+
 const styles = StyleSheet.create({
     text: {
         // Disable subpixel antialiasing on Mac desktop for consistency of
@@ -45,23 +72,41 @@ const Text = React.forwardRef(function Text(
     ref,
 ) {
     const isHeader = isHeaderRegex.test(Tag);
-    const styleAttributes = processStyleList([
-        styles.text,
-        isHeader && styles.header,
-        style,
-    ]);
 
-    // Make sure we include the className from the parent component, if any.
-    const classNames = otherProps.className
-        ? [otherProps.className, styleAttributes.className].join(" ")
-        : styleAttributes.className;
+    if (isAphroditeStyle(style)) {
+        const styleAttributes = processStyleList([
+            styles.text,
+            isHeader && styles.header,
+            style,
+        ]);
+
+        // Make sure we include the className from the parent component, if any.
+        const classNames = otherProps.className
+            ? [otherProps.className, styleAttributes.className].join(" ")
+            : styleAttributes.className;
+
+        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}
+                style={styleAttributes.style}
+                className={classNames}
+                data-testid={testId}
+                ref={ref}
+            >
+                {children}
+            </Tag>
+        );
+    }
 
     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}
-            style={styleAttributes.style}
-            className={classNames}
+            className={cx(
+                css(rawStyles.text, isHeader && rawStyles.header, style),
+                otherProps.className,
+            )}
             data-testid={testId}
             ref={ref}
         >

packages/wonder-blocks-form/src/components/text-field.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 
 // import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens";
 // import {addStyle} from "@khanacademy/wonder-blocks-core";
-// import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
+import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
 import {SystemStyleObject} from "@/styled-system/types";
@@ -275,9 +275,7 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
             <StyledInput
                 className={css(
                     styles.input,
-                    // TODO(juan): Convert typography styles to
-                    // SystemStyleObject
-                    // typographyStyles.LabelMedium,
+                    typographyStyles.LabelMedium,
                     styles.default,
                     // Prioritizes disabled, then focused, then error (if any)
                     disabled

packages/wonder-blocks-typography/src/util/styles.ts

@@ -1,5 +1,7 @@
-import {StyleSheet} from "aphrodite";
-import type {StyleDeclaration} from "aphrodite";
+import {css} from "@/styled-system/css";
+import {SystemStyleObject} from "@/styled-system/types";
+// import {StyleSheet} from "aphrodite";
+// import type {StyleDeclaration} from "aphrodite";
 
 const Regular = 400;
 const Bold = 700;
@@ -17,8 +19,8 @@ const SansFamily = 'Lato, "Noto Sans", sans-serif';
 const SerifFamily = '"Noto Serif", serif';
 const InconsolataFamily = "Inconsolata, monospace";
 
-const styles: StyleDeclaration = StyleSheet.create({
-    Title: {
+const styles: Record<string, SystemStyleObject> = {
+    Title: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Black,
@@ -30,15 +32,15 @@ const styles: StyleDeclaration = StyleSheet.create({
             fontSize: 28,
             lineHeight: "32px",
         },
-    },
-    Tagline: {
+    }),
+    Tagline: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Regular,
         fontSize: 20,
         lineHeight: "24px",
-    },
-    HeadingLarge: {
+    }),
+    HeadingLarge: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Bold,
@@ -50,8 +52,8 @@ const styles: StyleDeclaration = StyleSheet.create({
             fontSize: 24,
             lineHeight: "28px",
         },
-    },
-    HeadingMedium: {
+    }),
+    HeadingMedium: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Bold,
@@ -63,93 +65,93 @@ const styles: StyleDeclaration = StyleSheet.create({
             fontSize: 22,
             lineHeight: "26px",
         },
-    },
-    HeadingSmall: {
+    }),
+    HeadingSmall: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Bold,
         fontSize: 20,
         lineHeight: "24px",
-    },
-    HeadingXSmall: {
+    }),
+    HeadingXSmall: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Bold,
         fontSize: 12,
         lineHeight: "16px",
         letterSpacing: 0.6,
         textTransform: "uppercase",
-    },
-    BodySerifBlock: {
+    }),
+    BodySerifBlock: css.raw({
         ...common,
         fontFamily: SerifFamily,
         fontWeight: Regular,
         fontSize: 22,
         lineHeight: "28px",
-    },
-    BodySerif: {
+    }),
+    BodySerif: css.raw({
         ...common,
         fontFamily: SerifFamily,
         fontWeight: Regular,
         fontSize: 18,
         lineHeight: "22px",
-    },
-    BodyMonospace: {
+    }),
+    BodyMonospace: css.raw({
         ...common,
         fontFamily: InconsolataFamily,
         fontWeight: Regular,
         fontSize: 17,
         lineHeight: "22px",
-    },
-    Body: {
+    }),
+    Body: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Regular,
         fontSize: 16,
         lineHeight: "22px",
-    },
-    LabelLarge: {
+    }),
+    LabelLarge: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Bold,
         fontSize: 16,
         lineHeight: "20px",
-    },
-    LabelMedium: {
+    }),
+    LabelMedium: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Regular,
         fontSize: 16,
         lineHeight: "20px",
-    },
-    LabelSmall: {
+    }),
+    LabelSmall: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Regular,
         fontSize: 14,
         lineHeight: "18px",
-    },
-    LabelXSmall: {
+    }),
+    LabelXSmall: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Regular,
         fontSize: 12,
         lineHeight: "16px",
-    },
-    Caption: {
+    }),
+    Caption: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Regular,
         fontSize: 14,
         lineHeight: "20px",
-    },
-    Footnote: {
+    }),
+    Footnote: css.raw({
         ...common,
         fontFamily: SansFamily,
         fontWeight: Regular,
         fontSize: 12,
         lineHeight: "18px",
-    },
-});
+    }),
+};
 
 export {styles as default};

panda.config.ts

@@ -64,5 +64,5 @@ export default defineConfig({
     strictTokens: false,
     // optimizations
     minify: true,
-    hash: true,
+    // hash: true,
 });