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

Comparing version 0.0.0-PR2468-20250211171545 to 0.0.0-PR2471-20250211222138

CHANGELOG.md

 # @khanacademy/wonder-blocks-modal
 
-## 0.0.0-PR2468-20250211171545
+## 0.0.0-PR2471-20250211222138
 
 ### Patch Changes
 
-- 5609c18: Refactor Modal package to use semanticColors. Restructure theme contract.
-- Updated dependencies [c1fdfd2]
-    - @khanacademy/wonder-blocks-theming@0.0.0-PR2468-20250211171545
-    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2468-20250211171545
+- 89992c0: Tooling: Enabled jsx-a11y lint rules and disabled existing errors that were found
+    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2471-20250211222138
 
@@ -12,0 +10,0 @@ ## 7.1.1

dist/components/modal-backdrop.d.ts

 import * as React from "react";
-import { WithThemeProps } from "@khanacademy/wonder-blocks-theming";
 import type { ModalElement } from "../util/types";
@@ -17,4 +16,37 @@ type Props = {
     testId?: string;
-} & WithThemeProps;
-declare const _default: (props: import("@khanacademy/wonder-blocks-theming").WithoutTheme<Props>) => React.JSX.Element;
-export default _default;
+};
+/**
+ * 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 {};

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

dist/index.js

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

dist/themes/default.d.ts

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

dist/themes/khanmigo.d.ts

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

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

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

package.json

 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "0.0.0-PR2468-20250211171545",
+  "version": "0.0.0-PR2471-20250211222138",
   "design": "v2",
@@ -18,5 +18,5 @@ "publishConfig": {
     "@khanacademy/wonder-blocks-core": "12.1.1",
-    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2468-20250211171545",
+    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2471-20250211222138",
     "@khanacademy/wonder-blocks-layout": "3.1.1",
-    "@khanacademy/wonder-blocks-theming": "0.0.0-PR2468-20250211171545",
+    "@khanacademy/wonder-blocks-theming": "3.1.1",
     "@khanacademy/wonder-blocks-timing": "7.0.1",
@@ -23,0 +23,0 @@ "@khanacademy/wonder-blocks-tokens": "4.2.1",

No alert changes

Worsened metrics

Total package byte prevSize

106513

decreased by-1.84%

Lines of code

2398

decreased by-3.85%

Dependency changes

• + Added@khanacademy/wonder-blocks-clickable@0.0.0-PR2471-20250211222138(transitive)

• + Added@khanacademy/wonder-blocks-icon-button@0.0.0-PR2471-20250211222138(transitive)

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

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

• - Removed@khanacademy/wonder-blocks-icon-button@0.0.0-PR2468-20250211171545(transitive)

• - Removed@khanacademy/wonder-blocks-theming@0.0.0-PR2468-20250211171545(transitive)

• Updated@khanacademy/wonder-blocks-icon-button@0.0.0-PR2471-20250211222138

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