@khanacademy/wonder-blocks-modal - npm Package Compare versions

Comparing version 0.0.0-PR2466-20250207212603 to 0.0.0-PR2468-20250210173927

CHANGELOG.md

 # @khanacademy/wonder-blocks-modal
 
-## 0.0.0-PR2466-20250207212603
+## 0.0.0-PR2468-20250210173927
 
 ### Patch Changes
 
-- efc1911: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
-- Updated dependencies [efc1911]
-    - @khanacademy/wonder-blocks-breadcrumbs@0.0.0-PR2466-20250207212603
-    - @khanacademy/wonder-blocks-core@0.0.0-PR2466-20250207212603
-    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2466-20250207212603
-    - @khanacademy/wonder-blocks-layout@0.0.0-PR2466-20250207212603
-    - @khanacademy/wonder-blocks-theming@0.0.0-PR2466-20250207212603
-    - @khanacademy/wonder-blocks-timing@0.0.0-PR2466-20250207212603
-    - @khanacademy/wonder-blocks-tokens@0.0.0-PR2466-20250207212603
-    - @khanacademy/wonder-blocks-typography@0.0.0-PR2466-20250207212603
+- 5609c18: Refactor Modal package to use semanticColors. Restructure theme contract.
+- Updated dependencies [c1fdfd2]
+    - @khanacademy/wonder-blocks-theming@0.0.0-PR2468-20250210173927
+    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2468-20250210173927
 
+## 7.1.1
+
+### Patch Changes
+
+- ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
+- Updated dependencies [ee8d95a]
+    - @khanacademy/wonder-blocks-breadcrumbs@3.1.1
+    - @khanacademy/wonder-blocks-core@12.1.1
+    - @khanacademy/wonder-blocks-icon-button@6.1.1
+    - @khanacademy/wonder-blocks-layout@3.1.1
+    - @khanacademy/wonder-blocks-theming@3.1.1
+    - @khanacademy/wonder-blocks-timing@7.0.1
+    - @khanacademy/wonder-blocks-tokens@4.2.1
+    - @khanacademy/wonder-blocks-typography@3.1.1
+
 ## 7.1.0
@@ -19,0 +28,0 @@

dist/components/modal-backdrop.d.ts

 import * as React from "react";
+import { WithThemeProps } from "@khanacademy/wonder-blocks-theming";
 import type { ModalElement } from "../util/types";
@@ -16,37 +17,4 @@ type Props = {
     testId?: string;
-};
-/**
- * A private component used by ModalLauncher. This is the fixed-position
- * container element that gets mounted outside the DOM. It overlays the modal
- * content (provided as `children`) over the content, with a gray backdrop
- * behind it.
- *
- * This component is also responsible for cloning the provided modal `children`,
- * 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> {
-    componentDidMount(): void;
-    _mousePressedOutside: boolean;
-    /**
-     * Returns an element specified by the user
-     */
-    _getInitialFocusElement(node: HTMLElement): HTMLElement | null;
-    /**
-     * Returns the first focusable element found inside the Dialog
-     */
-    _getFirstFocusableElement(node: HTMLElement): HTMLElement | null;
-    /**
-     * Returns the dialog element
-     */
-    _getDialogElement(node: HTMLElement): HTMLElement;
-    /**
-     * When the user clicks on the gray backdrop area (i.e., the click came
-     * _directly_ from the positioner, not bubbled up from its children), close
-     * the modal.
-     */
-    handleMouseDown: (e: React.SyntheticEvent) => void;
-    handleMouseUp: (e: React.SyntheticEvent) => void;
-    render(): React.ReactNode;
-}
-export {};
+} & WithThemeProps;
+declare const _default: (props: import("@khanacademy/wonder-blocks-theming").WithoutTheme<Props>) => React.JSX.Element;
+export default _default;

dist/es/index.js

 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import { View, Id } from '@khanacademy/wonder-blocks-core';
-import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
-import * as tokens from '@khanacademy/wonder-blocks-tokens';
-import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
-import { StyleSheet } from 'aphrodite';
+import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles, withScopedTheme } from '@khanacademy/wonder-blocks-theming';
+import { semanticColor, border, spacing } from '@khanacademy/wonder-blocks-tokens';
 import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 import * as ReactDOM from 'react-dom';
+import { StyleSheet } from 'aphrodite';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
@@ -16,33 +15,55 @@ import xIcon from '@phosphor-icons/core/regular/x.svg';
 const theme$1 = {
-  color: {
-    bg: {
-      inverse: tokens.color.darkBlue
+  root: {
+    color: {
+      inverse: {
+        background: semanticColor.surface.inverse,
+        foreground: semanticColor.text.inverse
+      }
     },
-    text: {
-      inverse: tokens.color.white,
-      secondary: tokens.color.offBlack64
-    },
-    shadow: {
-      default: tokens.color.offBlack16
+    border: {
+      radius: border.radius.medium_4,
+      width: border.width.thin
     }
   },
-  border: {
-    radius: tokens.border.radius.medium_4,
-    width: tokens.border.width.thin,
-    color: tokens.color.blue
+  backdrop: {
+    color: {
+      background: semanticColor.surface.overlay
+    }
   },
-  spacing: {
-    dialog: {
-      small: tokens.spacing.medium_16
+  dialog: {
+    spacing: {
+      padding: spacing.medium_16
+    }
+  },
+  footer: {
+    color: {
+      border: semanticColor.border.primary
+    }
+  },
+  header: {
+    color: {
+      border: semanticColor.border.primary,
+      secondary: semanticColor.text.secondary
     },
-    panel: {
-      closeButton: tokens.spacing.medium_16,
-      footer: tokens.spacing.xLarge_32
+    spacing: {
+      paddingBlockMd: spacing.large_24,
+      paddingInlineMd: spacing.xLarge_32,
+      paddingInlineSm: spacing.medium_16,
+      gap: spacing.xSmall_8,
+      titlePaddingRightMd: spacing.medium_16,
+      titlePaddingRightSm: spacing.xLarge_32
+    }
+  },
+  panel: {
+    color: {
+      border: semanticColor.border.focus
     },
-    header: {
-      xsmall: tokens.spacing.xSmall_8,
-      small: tokens.spacing.medium_16,
-      medium: tokens.spacing.large_24,
-      large: tokens.spacing.xLarge_32
+    spacing: {
+      paddingBlockEnd: spacing.xLarge_32
     }
+  },
+  closeButton: {
+    spacing: {
+      gap: spacing.medium_16
+    }
   }
@@ -52,5 +73,7 @@ };
 const theme = mergeTheme(theme$1, {
-  color: {
-    bg: {
-      inverse: color.eggplant
+  root: {
+    color: {
+      inverse: {
+        background: semanticColor.khanmigo.primary
+      }
     }
@@ -87,3 +110,3 @@ }
   } = useScopedTheme(ModalDialogThemeContext);
-  const styles = useStyles(themedStylesFn$3, theme);
+  const styles = useStyles(themedStylesFn$5, theme);
   return React.createElement(View, {
@@ -111,3 +134,3 @@ style: [styles.wrapper, style]
 const small$2 = "@media (max-width: 767px)";
-const themedStylesFn$3 = theme => ({
+const themedStylesFn$5 = theme => ({
   wrapper: {
@@ -121,3 +144,3 @@ display: "flex",
     [small$2]: {
-      padding: theme.spacing.dialog.small,
+      padding: theme.dialog.spacing.padding,
       flexDirection: "column"
@@ -129,3 +152,3 @@ }
     height: "100%",
-    borderRadius: theme.border.radius,
+    borderRadius: theme.root.border.radius,
     overflow: "hidden"
@@ -157,4 +180,8 @@ },
 }) {
+  const {
+    theme
+  } = useScopedTheme(ModalDialogThemeContext);
+  const styles = useStyles(themedStylesFn$4, theme);
   return React.createElement(View, {
-    style: styles$2.footer
+    style: styles.footer
   }, children);
@@ -166,3 +193,3 @@ }
 };
-const styles$2 = StyleSheet.create({
+const themedStylesFn$4 = theme => ({
   footer: {
@@ -180,3 +207,3 @@ flex: "0 0 auto",
     justifyContent: "flex-end",
-    boxShadow: `0px -1px 0px ${color.offBlack16}`
+    boxShadow: `0px -1px 0px ${theme.footer.color.border}`
   }
@@ -200,3 +227,3 @@ });
   } = useScopedTheme(ModalDialogThemeContext);
-  const styles = useStyles(themedStylesFn$2, theme);
+  const styles = useStyles(themedStylesFn$3, theme);
   return React.createElement(View, {
@@ -218,33 +245,32 @@ style: [styles.header, !light && styles.dark],
 const small$1 = "@media (max-width: 767px)";
-const themedStylesFn$2 = theme => ({
+const themedStylesFn$3 = theme => ({
   header: {
-    boxShadow: `0px 1px 0px ${theme.color.shadow.default}`,
+    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`,
+    padding: `${theme.header.spacing.paddingBlockMd}px ${theme.header.spacing.paddingInlineMd}px`,
     position: "relative",
     width: "100%",
     [small$1]: {
-      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: {
-    paddingRight: theme.spacing.header.small,
+    paddingRight: theme.header.spacing.titlePaddingRightMd,
     [small$1]: {
-      paddingRight: theme.spacing.header.large
+      paddingRight: theme.header.spacing.titlePaddingRightSm
     }
   },
   subtitle: {
-    color: theme.color.text.secondary,
-    marginTop: theme.spacing.header.xsmall
+    color: theme.header.color.secondary,
+    marginTop: theme.header.spacing.gap
   }
@@ -379,3 +405,3 @@ });
     return React.createElement(View, _extends({
-      style: styles$1.modalPositioner,
+      style: this.props.wbThemeStyles.modalPositioner,
       onMouseDown: this.handleMouseDown,
@@ -387,3 +413,3 @@ onMouseUp: this.handleMouseUp,
 }
-const styles$1 = StyleSheet.create({
+const themedStylesFn$2 = theme => ({
   modalPositioner: {
@@ -398,5 +424,6 @@ position: "fixed",
     overflow: "auto",
-    background: color.offBlack64
+    background: theme.backdrop.color.background
   }
 });
+var ModalBackdrop$1 = withScopedTheme(themedStylesFn$2, ModalDialogThemeContext)(ModalBackdrop);
 
@@ -561,3 +588,3 @@ const needsHackyMobileSafariScrollDisabler = (() => {
       style: styles.container
-    }, React.createElement(ModalBackdrop, {
+    }, React.createElement(ModalBackdrop$1, {
       initialFocusId: this.props.initialFocusId,
@@ -727,19 +754,19 @@ testId: this.props.testId,
     position: "absolute",
-    right: theme.spacing.panel.closeButton,
-    top: theme.spacing.panel.closeButton,
+    right: theme.closeButton.spacing.gap,
+    top: theme.closeButton.spacing.gap,
     zIndex: 1,
     ":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
+    paddingBlockEnd: theme.panel.spacing.paddingBlockEnd
   }
@@ -746,0 +773,0 @@ });

dist/index.js

@@ -9,6 +9,6 @@ 'use strict';
 var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
-var tokens = require('@khanacademy/wonder-blocks-tokens');
-var aphrodite = require('aphrodite');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var ReactDOM = require('react-dom');
+var aphrodite = require('aphrodite');
 var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
@@ -41,3 +41,2 @@ var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
@@ -48,33 +47,55 @@ var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 const theme$1 = {
-  color: {
-    bg: {
-      inverse: tokens__namespace.color.darkBlue
+  root: {
+    color: {
+      inverse: {
+        background: wonderBlocksTokens.semanticColor.surface.inverse,
+        foreground: wonderBlocksTokens.semanticColor.text.inverse
+      }
     },
-    text: {
-      inverse: tokens__namespace.color.white,
-      secondary: tokens__namespace.color.offBlack64
-    },
-    shadow: {
-      default: tokens__namespace.color.offBlack16
+    border: {
+      radius: wonderBlocksTokens.border.radius.medium_4,
+      width: wonderBlocksTokens.border.width.thin
     }
   },
-  border: {
-    radius: tokens__namespace.border.radius.medium_4,
-    width: tokens__namespace.border.width.thin,
-    color: tokens__namespace.color.blue
+  backdrop: {
+    color: {
+      background: wonderBlocksTokens.semanticColor.surface.overlay
+    }
   },
-  spacing: {
-    dialog: {
-      small: tokens__namespace.spacing.medium_16
+  dialog: {
+    spacing: {
+      padding: wonderBlocksTokens.spacing.medium_16
+    }
+  },
+  footer: {
+    color: {
+      border: wonderBlocksTokens.semanticColor.border.primary
+    }
+  },
+  header: {
+    color: {
+      border: wonderBlocksTokens.semanticColor.border.primary,
+      secondary: wonderBlocksTokens.semanticColor.text.secondary
     },
-    panel: {
-      closeButton: tokens__namespace.spacing.medium_16,
-      footer: tokens__namespace.spacing.xLarge_32
+    spacing: {
+      paddingBlockMd: wonderBlocksTokens.spacing.large_24,
+      paddingInlineMd: wonderBlocksTokens.spacing.xLarge_32,
+      paddingInlineSm: wonderBlocksTokens.spacing.medium_16,
+      gap: wonderBlocksTokens.spacing.xSmall_8,
+      titlePaddingRightMd: wonderBlocksTokens.spacing.medium_16,
+      titlePaddingRightSm: wonderBlocksTokens.spacing.xLarge_32
+    }
+  },
+  panel: {
+    color: {
+      border: wonderBlocksTokens.semanticColor.border.focus
     },
-    header: {
-      xsmall: tokens__namespace.spacing.xSmall_8,
-      small: tokens__namespace.spacing.medium_16,
-      medium: tokens__namespace.spacing.large_24,
-      large: tokens__namespace.spacing.xLarge_32
+    spacing: {
+      paddingBlockEnd: wonderBlocksTokens.spacing.xLarge_32
     }
+  },
+  closeButton: {
+    spacing: {
+      gap: wonderBlocksTokens.spacing.medium_16
+    }
   }
@@ -84,5 +105,7 @@ };
 const theme = wonderBlocksTheming.mergeTheme(theme$1, {
-  color: {
-    bg: {
-      inverse: tokens.color.eggplant
+  root: {
+    color: {
+      inverse: {
+        background: wonderBlocksTokens.semanticColor.khanmigo.primary
+      }
     }
@@ -119,3 +142,3 @@ }
   } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
-  const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$5, theme);
   return React__namespace.createElement(wonderBlocksCore.View, {
@@ -143,3 +166,3 @@ style: [styles.wrapper, style]
 const small$2 = "@media (max-width: 767px)";
-const themedStylesFn$3 = theme => ({
+const themedStylesFn$5 = theme => ({
   wrapper: {
@@ -153,3 +176,3 @@ display: "flex",
     [small$2]: {
-      padding: theme.spacing.dialog.small,
+      padding: theme.dialog.spacing.padding,
       flexDirection: "column"
@@ -161,3 +184,3 @@ }
     height: "100%",
-    borderRadius: theme.border.radius,
+    borderRadius: theme.root.border.radius,
     overflow: "hidden"
@@ -189,4 +212,8 @@ },
 }) {
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$4, theme);
   return React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$2.footer
+    style: styles.footer
   }, children);
@@ -198,11 +225,11 @@ }
 };
-const styles$2 = aphrodite.StyleSheet.create({
+const themedStylesFn$4 = theme => ({
   footer: {
     flex: "0 0 auto",
     boxSizing: "border-box",
-    minHeight: tokens.spacing.xxxLarge_64,
-    paddingLeft: tokens.spacing.medium_16,
-    paddingRight: tokens.spacing.medium_16,
-    paddingTop: tokens.spacing.xSmall_8,
-    paddingBottom: tokens.spacing.xSmall_8,
+    minHeight: wonderBlocksTokens.spacing.xxxLarge_64,
+    paddingLeft: wonderBlocksTokens.spacing.medium_16,
+    paddingRight: wonderBlocksTokens.spacing.medium_16,
+    paddingTop: wonderBlocksTokens.spacing.xSmall_8,
+    paddingBottom: wonderBlocksTokens.spacing.xSmall_8,
     display: "flex",
@@ -212,3 +239,3 @@ flexDirection: "row",
     justifyContent: "flex-end",
-    boxShadow: `0px -1px 0px ${tokens.color.offBlack16}`
+    boxShadow: `0px -1px 0px ${theme.footer.color.border}`
   }
@@ -232,3 +259,3 @@ });
   } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
-  const styles = wonderBlocksTheming.useStyles(themedStylesFn$2, theme);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
   return React__namespace.createElement(wonderBlocksCore.View, {
@@ -250,33 +277,32 @@ style: [styles.header, !light && styles.dark],
 const small$1 = "@media (max-width: 767px)";
-const themedStylesFn$2 = theme => ({
+const themedStylesFn$3 = theme => ({
   header: {
-    boxShadow: `0px 1px 0px ${theme.color.shadow.default}`,
+    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`,
+    padding: `${theme.header.spacing.paddingBlockMd}px ${theme.header.spacing.paddingInlineMd}px`,
     position: "relative",
     width: "100%",
     [small$1]: {
-      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: {
-    paddingRight: theme.spacing.header.small,
+    paddingRight: theme.header.spacing.titlePaddingRightMd,
     [small$1]: {
-      paddingRight: theme.spacing.header.large
+      paddingRight: theme.header.spacing.titlePaddingRightSm
     }
   },
   subtitle: {
-    color: theme.color.text.secondary,
-    marginTop: theme.spacing.header.xsmall
+    color: theme.header.color.secondary,
+    marginTop: theme.header.spacing.gap
   }
@@ -411,3 +437,3 @@ });
     return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
-      style: styles$1.modalPositioner,
+      style: this.props.wbThemeStyles.modalPositioner,
       onMouseDown: this.handleMouseDown,
@@ -419,3 +445,3 @@ onMouseUp: this.handleMouseUp,
 }
-const styles$1 = aphrodite.StyleSheet.create({
+const themedStylesFn$2 = theme => ({
   modalPositioner: {
@@ -430,5 +456,6 @@ position: "fixed",
     overflow: "auto",
-    background: tokens.color.offBlack64
+    background: theme.backdrop.color.background
   }
 });
+var ModalBackdrop$1 = wonderBlocksTheming.withScopedTheme(themedStylesFn$2, ModalDialogThemeContext)(ModalBackdrop);
 
@@ -593,3 +620,3 @@ const needsHackyMobileSafariScrollDisabler = (() => {
       style: styles.container
-    }, React__namespace.createElement(ModalBackdrop, {
+    }, React__namespace.createElement(ModalBackdrop$1, {
       initialFocusId: this.props.initialFocusId,
@@ -666,6 +693,6 @@ testId: this.props.testId,
     minHeight: "100%",
-    padding: tokens.spacing.xLarge_32,
+    padding: wonderBlocksTokens.spacing.xLarge_32,
     boxSizing: "border-box",
     [small]: {
-      padding: `${tokens.spacing.xLarge_32}px ${tokens.spacing.medium_16}px`
+      padding: `${wonderBlocksTokens.spacing.xLarge_32}px ${wonderBlocksTokens.spacing.medium_16}px`
     }
@@ -760,19 +787,19 @@ }
     position: "absolute",
-    right: theme.spacing.panel.closeButton,
-    top: theme.spacing.panel.closeButton,
+    right: theme.closeButton.spacing.gap,
+    top: theme.closeButton.spacing.gap,
     zIndex: 1,
     ":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
+    paddingBlockEnd: theme.panel.spacing.paddingBlockEnd
   }
@@ -779,0 +806,0 @@ });

dist/themes/default.d.ts

 declare const theme: {
-    color: {
-        bg: {
-            inverse: string;
+    /**
+     * Shared tokens
+     */
+    root: {
+        color: {
+            inverse: {
+                background: string;
+                foreground: string;
+            };
         };
-        text: {
-            inverse: string;
-            secondary: string;
+        border: {
+            radius: number;
+            width: number;
         };
-        shadow: {
-            default: string;
+    };
+    /**
+     * Building blocks
+     */
+    backdrop: {
+        color: {
+            background: string;
         };
     };
-    border: {
-        radius: number;
-        width: number;
-        color: string;
+    dialog: {
+        spacing: {
+            padding: 16;
+        };
     };
-    spacing: {
-        dialog: {
-            small: 16;
+    footer: {
+        color: {
+            border: string;
         };
-        panel: {
-            closeButton: 16;
-            footer: 32;
+    };
+    header: {
+        color: {
+            border: string;
+            secondary: string;
         };
-        header: {
-            xsmall: 8;
-            small: 16;
-            medium: 24;
-            large: 32;
+        spacing: {
+            paddingBlockMd: 24;
+            paddingInlineMd: 32;
+            paddingInlineSm: 16;
+            gap: 8;
+            titlePaddingRightMd: 16;
+            titlePaddingRightSm: 32;
         };
     };
+    panel: {
+        color: {
+            border: string;
+        };
+        spacing: {
+            paddingBlockEnd: 32;
+        };
+    };
+    closeButton: {
+        spacing: {
+            gap: 16;
+        };
+    };
 };
 export default theme;

dist/themes/khanmigo.d.ts

@@ -5,35 +5,57 @@ /**
 declare const theme: {
-    color: {
-        bg: {
-            inverse: string;
+    root: {
+        color: {
+            inverse: {
+                background: string;
+                foreground: string;
+            };
         };
-        text: {
-            inverse: string;
-            secondary: string;
+        border: {
+            radius: number;
+            width: number;
         };
-        shadow: {
-            default: string;
+    };
+    backdrop: {
+        color: {
+            background: string;
         };
     };
-    border: {
-        radius: number;
-        width: number;
-        color: string;
+    dialog: {
+        spacing: {
+            padding: 16;
+        };
     };
-    spacing: {
-        dialog: {
-            small: 16;
+    footer: {
+        color: {
+            border: string;
         };
-        panel: {
-            closeButton: 16;
-            footer: 32;
+    };
+    header: {
+        color: {
+            border: string;
+            secondary: string;
         };
-        header: {
-            xsmall: 8;
-            small: 16;
-            medium: 24;
-            large: 32;
+        spacing: {
+            paddingBlockMd: 24;
+            paddingInlineMd: 32;
+            paddingInlineSm: 16;
+            gap: 8;
+            titlePaddingRightMd: 16;
+            titlePaddingRightSm: 32;
         };
     };
+    panel: {
+        color: {
+            border: string;
+        };
+        spacing: {
+            paddingBlockEnd: 32;
+        };
+    };
+    closeButton: {
+        spacing: {
+            gap: 16;
+        };
+    };
 };
 export default theme;

dist/themes/themed-modal-dialog.d.ts

@@ -12,34 +12,56 @@ import * as React from "react";
 export declare const ModalDialogThemeContext: React.Context<{
-    color: {
-        bg: {
-            inverse: string;
+    root: {
+        color: {
+            inverse: {
+                background: string;
+                foreground: string;
+            };
         };
-        text: {
-            inverse: string;
-            secondary: string;
+        border: {
+            radius: number;
+            width: number;
         };
-        shadow: {
-            default: string;
+    };
+    backdrop: {
+        color: {
+            background: string;
         };
     };
-    border: {
-        radius: number;
-        width: number;
-        color: string;
+    dialog: {
+        spacing: {
+            padding: 16;
+        };
     };
-    spacing: {
-        dialog: {
-            small: 16;
+    footer: {
+        color: {
+            border: string;
         };
-        panel: {
-            closeButton: 16;
-            footer: 32;
+    };
+    header: {
+        color: {
+            border: string;
+            secondary: string;
         };
-        header: {
-            xsmall: 8;
-            small: 16;
-            medium: 24;
-            large: 32;
+        spacing: {
+            paddingBlockMd: 24;
+            paddingInlineMd: 32;
+            paddingInlineSm: 16;
+            gap: 8;
+            titlePaddingRightMd: 16;
+            titlePaddingRightSm: 32;
         };
     };
+    panel: {
+        color: {
+            border: string;
+        };
+        spacing: {
+            paddingBlockEnd: 32;
+        };
+    };
+    closeButton: {
+        spacing: {
+            gap: 16;
+        };
+    };
 }>;
@@ -46,0 +68,0 @@ /**

package.json

 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "0.0.0-PR2466-20250207212603",
+  "version": "0.0.0-PR2468-20250210173927",
   "design": "v2",
@@ -16,10 +16,10 @@ "publishConfig": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-breadcrumbs": "0.0.0-PR2466-20250207212603",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2466-20250207212603",
-    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2466-20250207212603",
-    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2466-20250207212603",
-    "@khanacademy/wonder-blocks-theming": "0.0.0-PR2466-20250207212603",
-    "@khanacademy/wonder-blocks-timing": "0.0.0-PR2466-20250207212603",
-    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2466-20250207212603",
-    "@khanacademy/wonder-blocks-typography": "0.0.0-PR2466-20250207212603"
+    "@khanacademy/wonder-blocks-breadcrumbs": "3.1.1",
+    "@khanacademy/wonder-blocks-core": "12.1.1",
+    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2468-20250210173927",
+    "@khanacademy/wonder-blocks-layout": "3.1.1",
+    "@khanacademy/wonder-blocks-theming": "0.0.0-PR2468-20250210173927",
+    "@khanacademy/wonder-blocks-timing": "7.0.1",
+    "@khanacademy/wonder-blocks-tokens": "4.2.1",
+    "@khanacademy/wonder-blocks-typography": "3.1.1"
   },
@@ -34,3 +34,3 @@ "peerDependencies": {
     "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.8",
-    "@khanacademy/wb-dev-build-settings": "0.0.0-PR2466-20250207212603"
+    "@khanacademy/wb-dev-build-settings": "2.1.1"
   },
@@ -37,0 +37,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

108698

increased by1.9%

Lines of code

2492

increased by3.92%

Dependency changes

• + Added@khanacademy/wonder-blocks-breadcrumbs@3.1.1(transitive)

• + Added@khanacademy/wonder-blocks-clickable@6.1.1(transitive)

• + Added@khanacademy/wonder-blocks-core@12.1.1(transitive)

• + Added@khanacademy/wonder-blocks-icon@5.1.1(transitive)

• + Added@khanacademy/wonder-blocks-icon-button@0.0.0-PR2468-20250210173927(transitive)

• + Added@khanacademy/wonder-blocks-layout@3.1.1(transitive)

• + Added@khanacademy/wonder-blocks-theming@0.0.0-PR2468-20250210173927(transitive)

• + Added@khanacademy/wonder-blocks-timing@7.0.1(transitive)

• + Added@khanacademy/wonder-blocks-tokens@4.2.1(transitive)

• + Added@khanacademy/wonder-blocks-typography@3.1.1(transitive)

• - Removed@khanacademy/wonder-blocks-breadcrumbs@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-clickable@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-core@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-icon@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-icon-button@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-layout@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-theming@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-timing@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-tokens@0.0.0-PR2466-20250207212603(transitive)

• - Removed@khanacademy/wonder-blocks-typography@0.0.0-PR2466-20250207212603(transitive)

• Updated@khanacademy/wonder-blocks-breadcrumbs@3.1.1

• Updated@khanacademy/wonder-blocks-core@12.1.1

• Updated@khanacademy/wonder-blocks-icon-button@0.0.0-PR2468-20250210173927

• Updated@khanacademy/wonder-blocks-layout@3.1.1

• Updated@khanacademy/wonder-blocks-theming@0.0.0-PR2468-20250210173927

• Updated@khanacademy/wonder-blocks-timing@7.0.1

• Updated@khanacademy/wonder-blocks-tokens@4.2.1

• Updated@khanacademy/wonder-blocks-typography@3.1.1