[WB-1814.7] Refactor Modal to use semantic colors (#2468)

## Summary:

Next step is to refactor the `Modal` package to use semantic colors.

Besides the migration, this PR also includes the following changes:

- Reworked the theme structure to split tokens by sub-component.
- Updated stories to use the new semantic colors.
- Adapted some components to use theming instead of hardcoded colors.

### Implementation plan:

1. #2439
2. #2440
3. #2441
4. #2446
5. #2449
6. #2464
7. Modal (current PR)
8. Popover, Tooltip
9. Dropdown
10. Clickable, Pill, Toolbar


Issue: WB-1814

## Test plan:

Verify that the Modal Chromatic snapshots are mostly unchanged.

URL: `/?path=/docs/packages-modal-onepanedialog--docs&globals=viewport:desktop`

Author: jandrade

Reviewers: jandrade, beaesguerra, marcysutton

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2468

Author: jandrade

.changeset/nice-maps-tap.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-theming": minor
+---
+
+Expose WithoutTheme type for use in withScopedTheme HOC.

.changeset/odd-fans-provide.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-modal": patch
+---
+
+Refactor Modal package to use semanticColors. Restructure theme contract.

__docs__/wonder-blocks-modal/modal-dialog.stories.tsx

@@ -7,7 +7,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {Body, Title} from "@khanacademy/wonder-blocks-typography";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import {
     ModalLauncher,
@@ -366,7 +366,7 @@ const styles = StyleSheet.create({
     squareDialog: {
         maxHeight: 500,
         maxWidth: 500,
-        backgroundColor: color.darkBlue,
+        backgroundColor: semanticColor.surface.inverse,
     },
     smallSquarePanel: {
         maxHeight: 400,

__docs__/wonder-blocks-modal/modal-panel.stories.tsx

@@ -5,7 +5,11 @@ import type {Meta, StoryObj} from "@storybook/react";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {Body, Title} from "@khanacademy/wonder-blocks-typography";
 
 import {
@@ -352,8 +356,9 @@ export const TwoPanels: StoryComponentType = {
 export const WithStyle: StoryComponentType = {
     render: () => {
         const modalStyles = {
-            color: color.blue,
-            border: `2px solid ${color.darkBlue}`,
+            color: semanticColor.status.notice.foreground,
+            background: semanticColor.status.notice.background,
+            border: `${border.width.thin}px solid ${semanticColor.status.notice.foreground}`,
             borderRadius: 20,
         } as const;
 

__docs__/wonder-blocks-modal/one-pane-dialog.stories.tsx

@@ -11,7 +11,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Link from "@khanacademy/wonder-blocks-link";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
 import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
@@ -363,7 +363,7 @@ export const WithStyle: StoryComponentType = () => (
                     </Body>
                 }
                 style={{
-                    color: color.blue,
+                    color: semanticColor.status.notice.foreground,
                     maxWidth: 1000,
                 }}
             />

packages/wonder-blocks-modal/src/components/modal-backdrop.tsx

@@ -1,13 +1,19 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import {StyleSheet} from "aphrodite";
 
-import {color} from "@khanacademy/wonder-blocks-tokens";
 import {View} from "@khanacademy/wonder-blocks-core";
+import {
+    ThemedStylesFn,
+    withScopedTheme,
+    WithThemeProps,
+} from "@khanacademy/wonder-blocks-theming";
+
+import {
+    ModalDialogThemeContext,
+    ModalDialogThemeContract,
+} from "../themes/themed-modal-dialog";
 import {ModalLauncherPortalAttributeName} from "../util/constants";
-
 import {findFocusableNodes} from "../util/find-focusable-nodes";
-
 import type {ModalElement} from "../util/types";
 
 type Props = {
@@ -23,7 +29,7 @@ type Props = {
      * Test ID used for e2e testing.
      */
     testId?: string;
-};
+} & WithThemeProps;
 
 /**
  * A private component used by ModalLauncher. This is the fixed-position
@@ -35,7 +41,7 @@ type Props = {
  * and adding an `onClose` prop that will call `onCloseModal`. If an
  * `onClose` prop is already provided, the two are merged.
  */
-export default class ModalBackdrop extends React.Component<Props> {
+class ModalBackdrop extends React.Component<Props> {
     componentDidMount() {
         // eslint-disable-next-line import/no-deprecated
         const node: HTMLElement = ReactDOM.findDOMNode(this) as any;
@@ -137,7 +143,7 @@ export default class ModalBackdrop extends React.Component<Props> {
 
         return (
             <View
-                style={styles.modalPositioner}
+                style={this.props.wbThemeStyles.modalPositioner}
                 onMouseDown={this.handleMouseDown}
                 onMouseUp={this.handleMouseUp}
                 testId={testId}
@@ -149,7 +155,7 @@ export default class ModalBackdrop extends React.Component<Props> {
     }
 }
 
-const styles = StyleSheet.create({
+const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
     modalPositioner: {
         position: "fixed",
         left: 0,
@@ -171,6 +177,11 @@ const styles = StyleSheet.create({
         //     now!
         overflow: "auto",
 
-        background: color.offBlack64,
+        background: theme.backdrop.color.background,
     },
 });
+
+export default withScopedTheme(
+    themedStylesFn,
+    ModalDialogThemeContext,
+)(ModalBackdrop);

packages/wonder-blocks-modal/src/components/modal-dialog.tsx

@@ -123,7 +123,7 @@ const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
         height: "100%",
         position: "relative",
         [small]: {
-            padding: theme.spacing.dialog.small,
+            padding: theme.dialog.spacing.padding,
             flexDirection: "column",
         },
     },
@@ -134,7 +134,7 @@ const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
     dialog: {
         width: "100%",
         height: "100%",
-        borderRadius: theme.border.radius,
+        borderRadius: theme.root.border.radius,
         overflow: "hidden",
     },
 

packages/wonder-blocks-modal/src/components/modal-footer.tsx

@@ -1,7 +1,15 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    ThemedStylesFn,
+    useScopedTheme,
+    useStyles,
+} from "@khanacademy/wonder-blocks-theming";
+import {
+    ModalDialogThemeContext,
+    ModalDialogThemeContract,
+} from "../themes/themed-modal-dialog";
 
 type Props = {
     children: React.ReactNode;
@@ -25,6 +33,9 @@ type Props = {
  * ```
  */
 export default function ModalFooter({children}: Props) {
+    const {theme} = useScopedTheme(ModalDialogThemeContext);
+    const styles = useStyles(themedStylesFn, theme);
+
     return <View style={styles.footer}>{children}</View>;
 }
 
@@ -34,7 +45,7 @@ ModalFooter.isComponentOf = (instance: any): boolean => {
     return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
 };
 
-const styles = StyleSheet.create({
+const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
     footer: {
         flex: "0 0 auto",
         boxSizing: "border-box",
@@ -49,6 +60,6 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "flex-end",
 
-        boxShadow: `0px -1px 0px ${color.offBlack16}`,
+        boxShadow: `0px -1px 0px ${theme.footer.color.border}`,
     },
 });

packages/wonder-blocks-modal/src/components/modal-header.tsx

@@ -153,41 +153,42 @@ const small = "@media (max-width: 767px)";
 
 const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
     header: {
-        boxShadow: `0px 1px 0px ${theme.color.shadow.default}`,
+        // TODO(WB-1878): Move this to an `elevation` theme token.
+        boxShadow: `0px 1px 0px ${theme.header.color.border}`,
         display: "flex",
         flexDirection: "column",
         minHeight: 66,
-        padding: `${theme.spacing.header.medium}px ${theme.spacing.header.large}px`,
+        paddingBlock: theme.header.spacing.paddingBlockMd,
+        paddingInline: theme.header.spacing.paddingInlineMd,
         position: "relative",
         width: "100%",
 
         [small]: {
-            paddingLeft: theme.spacing.header.small,
-            paddingRight: theme.spacing.header.small,
+            paddingInline: theme.header.spacing.paddingInlineSm,
         },
     },
 
     dark: {
-        background: theme.color.bg.inverse,
-        color: theme.color.text.inverse,
+        background: theme.root.color.inverse.background,
+        color: theme.root.color.inverse.foreground,
     },
 
     breadcrumbs: {
-        color: theme.color.text.secondary,
-        marginBottom: theme.spacing.header.xsmall,
+        color: theme.header.color.secondary,
+        marginBottom: theme.header.spacing.gap,
     },
 
     title: {
         // Prevent title from overlapping the close button
-        paddingRight: theme.spacing.header.small,
+        paddingRight: theme.header.spacing.titleGapMd,
         [small]: {
-            paddingRight: theme.spacing.header.large,
+            paddingRight: theme.header.spacing.titleGapSm,
         },
     },
 
     subtitle: {
-        color: theme.color.text.secondary,
-        marginTop: theme.spacing.header.xsmall,
+        color: theme.header.color.secondary,
+        marginTop: theme.header.spacing.gap,
     },
 });
 

packages/wonder-blocks-modal/src/components/modal-panel.tsx

@@ -170,8 +170,8 @@ const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
 
     closeButton: {
         position: "absolute",
-        right: theme.spacing.panel.closeButton,
-        top: theme.spacing.panel.closeButton,
+        right: theme.closeButton.spacing.gap,
+        top: theme.closeButton.spacing.gap,
         // This is to allow the button to be tab-ordered before the modal
         // content but still be above the header and content.
         zIndex: 1,
@@ -180,20 +180,21 @@ const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
         // programmatic focus. This is a workaround to make sure the focus
         // outline is visible when this control is focused.
         ":focus": {
-            outlineWidth: theme.border.width,
-            outlineColor: theme.border.color,
+            outlineWidth: theme.root.border.width,
+            outlineColor: theme.panel.color.border,
             outlineOffset: 1,
             outlineStyle: "solid",
-            borderRadius: theme.border.radius,
+            borderRadius: theme.root.border.radius,
         },
     },
 
     dark: {
-        background: theme.color.bg.inverse,
-        color: theme.color.text.inverse,
+        background: theme.root.color.inverse.background,
+        color: theme.root.color.inverse.foreground,
     },
 
     hasFooter: {
-        paddingBottom: theme.spacing.panel.footer,
+        // The space between the content and the footer
+        paddingBlockEnd: theme.panel.spacing.gap,
     },
 });

packages/wonder-blocks-modal/src/themes/default.ts

@@ -1,36 +1,70 @@
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 
 const theme = {
-    color: {
-        bg: {
-            inverse: tokens.color.darkBlue,
+    /**
+     * Shared tokens
+     */
+    root: {
+        // TODO(WB-1852): Remove light variant.
+        color: {
+            inverse: {
+                background: semanticColor.surface.inverse,
+                foreground: semanticColor.text.inverse,
+            },
         },
-        text: {
-            inverse: tokens.color.white,
-            secondary: tokens.color.offBlack64,
+        border: {
+            radius: border.radius.medium_4,
+            width: border.width.thin,
         },
-        shadow: {
-            default: tokens.color.offBlack16,
+    },
+    /**
+     * Building blocks
+     */
+    backdrop: {
+        color: {
+            background: semanticColor.surface.overlay,
+        },
+    },
+    dialog: {
+        spacing: {
+            padding: spacing.medium_16,
+        },
+    },
+    footer: {
+        color: {
+            border: semanticColor.border.primary,
         },
     },
-    border: {
-        radius: tokens.border.radius.medium_4,
-        width: tokens.border.width.thin,
-        color: tokens.color.blue,
+    header: {
+        color: {
+            border: semanticColor.border.primary,
+            secondary: semanticColor.text.secondary,
+        },
+        spacing: {
+            paddingBlockMd: spacing.large_24,
+            paddingInlineMd: spacing.xLarge_32,
+            paddingInlineSm: spacing.medium_16,
+            gap: spacing.xSmall_8,
+            // The space between the title and dismiss button.
+            titleGapMd: spacing.medium_16,
+            titleGapSm: spacing.xLarge_32,
+        },
+    },
+    panel: {
+        color: {
+            border: semanticColor.border.focus,
+        },
+        spacing: {
+            gap: spacing.xLarge_32,
+        },
     },
-    spacing: {
-        dialog: {
-            small: tokens.spacing.medium_16,
-        },
-        panel: {
-            closeButton: tokens.spacing.medium_16,
-            footer: tokens.spacing.xLarge_32,
-        },
-        header: {
-            xsmall: tokens.spacing.xSmall_8,
-            small: tokens.spacing.medium_16,
-            medium: tokens.spacing.large_24,
-            large: tokens.spacing.xLarge_32,
+    closeButton: {
+        spacing: {
+            gap: spacing.medium_16,
         },
     },
 };