@khanacademy/wonder-blocks-modal 7.1.1 → 7.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/components/modal-backdrop.d.ts +4 -36
  3. package/dist/es/index.js +92 -64
  4. package/dist/index.js +98 -70
  5. package/dist/themes/default.d.ts +52 -24
  6. package/dist/themes/khanmigo.d.ts +46 -24
  7. package/dist/themes/themed-modal-dialog.d.ts +46 -24
  8. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @khanacademy/wonder-blocks-modal
2
2
 
3
+ ## 7.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [507cf2f]
8
+ - @khanacademy/wonder-blocks-tokens@5.1.0
9
+ - @khanacademy/wonder-blocks-breadcrumbs@3.1.3
10
+ - @khanacademy/wonder-blocks-icon-button@6.1.3
11
+ - @khanacademy/wonder-blocks-layout@3.1.3
12
+
13
+ ## 7.1.2
14
+
15
+ ### Patch Changes
16
+
17
+ - 5655b9f: Switch to use `focus.outer` semanticColor token
18
+ - 6d37702: Refactor Modal package to use semanticColors. Restructure theme contract.
19
+ - Updated dependencies [ed26d66]
20
+ - Updated dependencies [5655b9f]
21
+ - Updated dependencies [5655b9f]
22
+ - Updated dependencies [8f53293]
23
+ - Updated dependencies [6d37702]
24
+ - Updated dependencies [051f0f8]
25
+ - Updated dependencies [e1b78db]
26
+ - Updated dependencies [8f53293]
27
+ - Updated dependencies [051f0f8]
28
+ - @khanacademy/wonder-blocks-core@12.2.0
29
+ - @khanacademy/wonder-blocks-tokens@5.0.0
30
+ - @khanacademy/wonder-blocks-icon-button@6.1.2
31
+ - @khanacademy/wonder-blocks-theming@3.2.0
32
+ - @khanacademy/wonder-blocks-breadcrumbs@3.1.2
33
+ - @khanacademy/wonder-blocks-layout@3.1.2
34
+ - @khanacademy/wonder-blocks-typography@3.1.2
35
+ - @khanacademy/wonder-blocks-timing@7.0.1
36
+
3
37
  ## 7.1.1
4
38
 
5
39
  ### Patch Changes
package/dist/components/modal-backdrop.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
+ import { WithThemeProps } from "@khanacademy/wonder-blocks-theming";
2
3
  import type { ModalElement } from "../util/types";
3
4
  type Props = {
4
5
  children: ModalElement;
@@ -13,39 +14,6 @@ type Props = {
13
14
  * Test ID used for e2e testing.
14
15
  */
15
16
  testId?: string;
16
- };
17
- /**
18
- * A private component used by ModalLauncher. This is the fixed-position
19
- * container element that gets mounted outside the DOM. It overlays the modal
20
- * content (provided as `children`) over the content, with a gray backdrop
21
- * behind it.
22
- *
23
- * This component is also responsible for cloning the provided modal `children`,
24
- * and adding an `onClose` prop that will call `onCloseModal`. If an
25
- * `onClose` prop is already provided, the two are merged.
26
- */
27
- export default class ModalBackdrop extends React.Component<Props> {
28
- componentDidMount(): void;
29
- _mousePressedOutside: boolean;
30
- /**
31
- * Returns an element specified by the user
32
- */
33
- _getInitialFocusElement(node: HTMLElement): HTMLElement | null;
34
- /**
35
- * Returns the first focusable element found inside the Dialog
36
- */
37
- _getFirstFocusableElement(node: HTMLElement): HTMLElement | null;
38
- /**
39
- * Returns the dialog element
40
- */
41
- _getDialogElement(node: HTMLElement): HTMLElement;
42
- /**
43
- * When the user clicks on the gray backdrop area (i.e., the click came
44
- * _directly_ from the positioner, not bubbled up from its children), close
45
- * the modal.
46
- */
47
- handleMouseDown: (e: React.SyntheticEvent) => void;
48
- handleMouseUp: (e: React.SyntheticEvent) => void;
49
- render(): React.ReactNode;
50
- }
51
- export {};
17
+ } & WithThemeProps;
18
+ declare const _default: (props: import("@khanacademy/wonder-blocks-theming").WithoutTheme<Props>) => React.JSX.Element;
19
+ export default _default;
package/dist/es/index.js CHANGED
@@ -1,56 +1,79 @@
1
1
  import _extends from '@babel/runtime/helpers/extends';
2
2
  import * as React from 'react';
3
3
  import { View, Id } from '@khanacademy/wonder-blocks-core';
4
- import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
5
- import * as tokens from '@khanacademy/wonder-blocks-tokens';
6
- import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
7
- import { StyleSheet } from 'aphrodite';
4
+ import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles, withScopedTheme } from '@khanacademy/wonder-blocks-theming';
5
+ import { semanticColor, border, spacing } from '@khanacademy/wonder-blocks-tokens';
8
6
  import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
9
7
  import * as ReactDOM from 'react-dom';
8
+ import { StyleSheet } from 'aphrodite';
10
9
  import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
11
10
  import xIcon from '@phosphor-icons/core/regular/x.svg';
12
11
  import IconButton from '@khanacademy/wonder-blocks-icon-button';
13
12
  import { MediaLayout } from '@khanacademy/wonder-blocks-layout';
14
13
 
15
14
  const theme$1 = {
16
- color: {
17
- bg: {
18
- inverse: tokens.color.darkBlue
19
- },
20
- text: {
21
- inverse: tokens.color.white,
22
- secondary: tokens.color.offBlack64
15
+ root: {
16
+ color: {
17
+ inverse: {
18
+ background: semanticColor.surface.inverse,
19
+ foreground: semanticColor.text.inverse
20
+ }
23
21
  },
24
- shadow: {
25
- default: tokens.color.offBlack16
22
+ border: {
23
+ radius: border.radius.medium_4,
24
+ width: border.width.thin
26
25
  }
27
26
  },
28
- border: {
29
- radius: tokens.border.radius.medium_4,
30
- width: tokens.border.width.thin,
31
- color: tokens.color.blue
27
+ backdrop: {
28
+ color: {
29
+ background: semanticColor.surface.overlay
30
+ }
32
31
  },
33
- spacing: {
34
- dialog: {
35
- small: tokens.spacing.medium_16
32
+ dialog: {
33
+ spacing: {
34
+ padding: spacing.medium_16
35
+ }
36
+ },
37
+ footer: {
38
+ color: {
39
+ border: semanticColor.border.primary
40
+ }
41
+ },
42
+ header: {
43
+ color: {
44
+ border: semanticColor.border.primary,
45
+ secondary: semanticColor.text.secondary
36
46
  },
37
- panel: {
38
- closeButton: tokens.spacing.medium_16,
39
- footer: tokens.spacing.xLarge_32
47
+ spacing: {
48
+ paddingBlockMd: spacing.large_24,
49
+ paddingInlineMd: spacing.xLarge_32,
50
+ paddingInlineSm: spacing.medium_16,
51
+ gap: spacing.xSmall_8,
52
+ titleGapMd: spacing.medium_16,
53
+ titleGapSm: spacing.xLarge_32
54
+ }
55
+ },
56
+ panel: {
57
+ color: {
58
+ border: semanticColor.focus.outer
40
59
  },
41
- header: {
42
- xsmall: tokens.spacing.xSmall_8,
43
- small: tokens.spacing.medium_16,
44
- medium: tokens.spacing.large_24,
45
- large: tokens.spacing.xLarge_32
60
+ spacing: {
61
+ gap: spacing.xLarge_32
62
+ }
63
+ },
64
+ closeButton: {
65
+ spacing: {
66
+ gap: spacing.medium_16
46
67
  }
47
68
  }
48
69
  };
49
70
 
50
71
  const theme = mergeTheme(theme$1, {
51
- color: {
52
- bg: {
53
- inverse: color.eggplant
72
+ root: {
73
+ color: {
74
+ inverse: {
75
+ background: semanticColor.khanmigo.primary
76
+ }
54
77
  }
55
78
  }
56
79
  });
@@ -82,7 +105,7 @@ const ModalDialogCore = React.forwardRef(function ModalDialogCore(props, ref) {
82
105
  const {
83
106
  theme
84
107
  } = useScopedTheme(ModalDialogThemeContext);
85
- const styles = useStyles(themedStylesFn$3, theme);
108
+ const styles = useStyles(themedStylesFn$5, theme);
86
109
  return React.createElement(View, {
87
110
  style: [styles.wrapper, style]
88
111
  }, below && React.createElement(View, {
@@ -105,7 +128,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(props, ref) {
105
128
  })));
106
129
  });
107
130
  const small$2 = "@media (max-width: 767px)";
108
- const themedStylesFn$3 = theme => ({
131
+ const themedStylesFn$5 = theme => ({
109
132
  wrapper: {
110
133
  display: "flex",
111
134
  flexDirection: "row",
@@ -114,14 +137,14 @@ const themedStylesFn$3 = theme => ({
114
137
  height: "100%",
115
138
  position: "relative",
116
139
  [small$2]: {
117
- padding: theme.spacing.dialog.small,
140
+ padding: theme.dialog.spacing.padding,
118
141
  flexDirection: "column"
119
142
  }
120
143
  },
121
144
  dialog: {
122
145
  width: "100%",
123
146
  height: "100%",
124
- borderRadius: theme.border.radius,
147
+ borderRadius: theme.root.border.radius,
125
148
  overflow: "hidden"
126
149
  },
127
150
  above: {
@@ -148,15 +171,19 @@ ModalDialog.displayName = "ModalDialog";
148
171
  function ModalFooter({
149
172
  children
150
173
  }) {
174
+ const {
175
+ theme
176
+ } = useScopedTheme(ModalDialogThemeContext);
177
+ const styles = useStyles(themedStylesFn$4, theme);
151
178
  return React.createElement(View, {
152
- style: styles$2.footer
179
+ style: styles.footer
153
180
  }, children);
154
181
  }
155
182
  ModalFooter.__IS_MODAL_FOOTER__ = true;
156
183
  ModalFooter.isComponentOf = instance => {
157
184
  return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
158
185
  };
159
- const styles$2 = StyleSheet.create({
186
+ const themedStylesFn$4 = theme => ({
160
187
  footer: {
161
188
  flex: "0 0 auto",
162
189
  boxSizing: "border-box",
@@ -169,7 +196,7 @@ const styles$2 = StyleSheet.create({
169
196
  flexDirection: "row",
170
197
  alignItems: "center",
171
198
  justifyContent: "flex-end",
172
- boxShadow: `0px -1px 0px ${color.offBlack16}`
199
+ boxShadow: `0px -1px 0px ${theme.footer.color.border}`
173
200
  }
174
201
  });
175
202
 
@@ -188,7 +215,7 @@ function ModalHeader(props) {
188
215
  const {
189
216
  theme
190
217
  } = useScopedTheme(ModalDialogThemeContext);
191
- const styles = useStyles(themedStylesFn$2, theme);
218
+ const styles = useStyles(themedStylesFn$3, theme);
192
219
  return React.createElement(View, {
193
220
  style: [styles.header, !light && styles.dark],
194
221
  testId: testId
@@ -205,37 +232,37 @@ function ModalHeader(props) {
205
232
  }, subtitle));
206
233
  }
207
234
  const small$1 = "@media (max-width: 767px)";
208
- const themedStylesFn$2 = theme => ({
235
+ const themedStylesFn$3 = theme => ({
209
236
  header: {
210
- boxShadow: `0px 1px 0px ${theme.color.shadow.default}`,
237
+ boxShadow: `0px 1px 0px ${theme.header.color.border}`,
211
238
  display: "flex",
212
239
  flexDirection: "column",
213
240
  minHeight: 66,
214
- padding: `${theme.spacing.header.medium}px ${theme.spacing.header.large}px`,
241
+ paddingBlock: theme.header.spacing.paddingBlockMd,
242
+ paddingInline: theme.header.spacing.paddingInlineMd,
215
243
  position: "relative",
216
244
  width: "100%",
217
245
  [small$1]: {
218
- paddingLeft: theme.spacing.header.small,
219
- paddingRight: theme.spacing.header.small
246
+ paddingInline: theme.header.spacing.paddingInlineSm
220
247
  }
221
248
  },
222
249
  dark: {
223
- background: theme.color.bg.inverse,
224
- color: theme.color.text.inverse
250
+ background: theme.root.color.inverse.background,
251
+ color: theme.root.color.inverse.foreground
225
252
  },
226
253
  breadcrumbs: {
227
- color: theme.color.text.secondary,
228
- marginBottom: theme.spacing.header.xsmall
254
+ color: theme.header.color.secondary,
255
+ marginBottom: theme.header.spacing.gap
229
256
  },
230
257
  title: {
231
- paddingRight: theme.spacing.header.small,
258
+ paddingRight: theme.header.spacing.titleGapMd,
232
259
  [small$1]: {
233
- paddingRight: theme.spacing.header.large
260
+ paddingRight: theme.header.spacing.titleGapSm
234
261
  }
235
262
  },
236
263
  subtitle: {
237
- color: theme.color.text.secondary,
238
- marginTop: theme.spacing.header.xsmall
264
+ color: theme.header.color.secondary,
265
+ marginTop: theme.header.spacing.gap
239
266
  }
240
267
  });
241
268
  ModalHeader.defaultProps = {
@@ -365,14 +392,14 @@ class ModalBackdrop extends React.Component {
365
392
  [ModalLauncherPortalAttributeName]: true
366
393
  };
367
394
  return React.createElement(View, _extends({
368
- style: styles$1.modalPositioner,
395
+ style: this.props.wbThemeStyles.modalPositioner,
369
396
  onMouseDown: this.handleMouseDown,
370
397
  onMouseUp: this.handleMouseUp,
371
398
  testId: testId
372
399
  }, backdropProps), children);
373
400
  }
374
401
  }
375
- const styles$1 = StyleSheet.create({
402
+ const themedStylesFn$2 = theme => ({
376
403
  modalPositioner: {
377
404
  position: "fixed",
378
405
  left: 0,
@@ -382,9 +409,10 @@ const styles$1 = StyleSheet.create({
382
409
  alignItems: "center",
383
410
  justifyContent: "center",
384
411
  overflow: "auto",
385
- background: color.offBlack64
412
+ background: theme.backdrop.color.background
386
413
  }
387
414
  });
415
+ var ModalBackdrop$1 = withScopedTheme(themedStylesFn$2, ModalDialogThemeContext)(ModalBackdrop);
388
416
 
389
417
  const needsHackyMobileSafariScrollDisabler = (() => {
390
418
  if (typeof window === "undefined") {
@@ -544,7 +572,7 @@ class ModalLauncher extends React.Component {
544
572
  }
545
573
  }, renderedChildren, this.state.opened && ReactDOM.createPortal(React.createElement(FocusTrap, {
546
574
  style: styles.container
547
- }, React.createElement(ModalBackdrop, {
575
+ }, React.createElement(ModalBackdrop$1, {
548
576
  initialFocusId: this.props.initialFocusId,
549
577
  testId: this.props.testId,
550
578
  onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
@@ -709,23 +737,23 @@ const themedStylesFn = theme => ({
709
737
  },
710
738
  closeButton: {
711
739
  position: "absolute",
712
- right: theme.spacing.panel.closeButton,
713
- top: theme.spacing.panel.closeButton,
740
+ right: theme.closeButton.spacing.gap,
741
+ top: theme.closeButton.spacing.gap,
714
742
  zIndex: 1,
715
743
  ":focus": {
716
- outlineWidth: theme.border.width,
717
- outlineColor: theme.border.color,
744
+ outlineWidth: theme.root.border.width,
745
+ outlineColor: theme.panel.color.border,
718
746
  outlineOffset: 1,
719
747
  outlineStyle: "solid",
720
- borderRadius: theme.border.radius
748
+ borderRadius: theme.root.border.radius
721
749
  }
722
750
  },
723
751
  dark: {
724
- background: theme.color.bg.inverse,
725
- color: theme.color.text.inverse
752
+ background: theme.root.color.inverse.background,
753
+ color: theme.root.color.inverse.foreground
726
754
  },
727
755
  hasFooter: {
728
- paddingBottom: theme.spacing.panel.footer
756
+ paddingBlockEnd: theme.panel.spacing.gap
729
757
  }
730
758
  });
731
759
 
package/dist/index.js CHANGED
@@ -6,10 +6,10 @@ var _extends = require('@babel/runtime/helpers/extends');
6
6
  var React = require('react');
7
7
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
8
8
  var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
9
- var tokens = require('@khanacademy/wonder-blocks-tokens');
10
- var aphrodite = require('aphrodite');
9
+ var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
11
10
  var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
12
11
  var ReactDOM = require('react-dom');
12
+ var aphrodite = require('aphrodite');
13
13
  var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
14
14
  var xIcon = require('@phosphor-icons/core/regular/x.svg');
15
15
  var IconButton = require('@khanacademy/wonder-blocks-icon-button');
@@ -37,50 +37,73 @@ function _interopNamespace(e) {
37
37
 
38
38
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
39
39
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
40
- var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
41
40
  var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
42
41
  var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
43
42
  var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
44
43
 
45
44
  const theme$1 = {
46
- color: {
47
- bg: {
48
- inverse: tokens__namespace.color.darkBlue
49
- },
50
- text: {
51
- inverse: tokens__namespace.color.white,
52
- secondary: tokens__namespace.color.offBlack64
45
+ root: {
46
+ color: {
47
+ inverse: {
48
+ background: wonderBlocksTokens.semanticColor.surface.inverse,
49
+ foreground: wonderBlocksTokens.semanticColor.text.inverse
50
+ }
53
51
  },
54
- shadow: {
55
- default: tokens__namespace.color.offBlack16
52
+ border: {
53
+ radius: wonderBlocksTokens.border.radius.medium_4,
54
+ width: wonderBlocksTokens.border.width.thin
56
55
  }
57
56
  },
58
- border: {
59
- radius: tokens__namespace.border.radius.medium_4,
60
- width: tokens__namespace.border.width.thin,
61
- color: tokens__namespace.color.blue
57
+ backdrop: {
58
+ color: {
59
+ background: wonderBlocksTokens.semanticColor.surface.overlay
60
+ }
62
61
  },
63
- spacing: {
64
- dialog: {
65
- small: tokens__namespace.spacing.medium_16
62
+ dialog: {
63
+ spacing: {
64
+ padding: wonderBlocksTokens.spacing.medium_16
65
+ }
66
+ },
67
+ footer: {
68
+ color: {
69
+ border: wonderBlocksTokens.semanticColor.border.primary
70
+ }
71
+ },
72
+ header: {
73
+ color: {
74
+ border: wonderBlocksTokens.semanticColor.border.primary,
75
+ secondary: wonderBlocksTokens.semanticColor.text.secondary
66
76
  },
67
- panel: {
68
- closeButton: tokens__namespace.spacing.medium_16,
69
- footer: tokens__namespace.spacing.xLarge_32
77
+ spacing: {
78
+ paddingBlockMd: wonderBlocksTokens.spacing.large_24,
79
+ paddingInlineMd: wonderBlocksTokens.spacing.xLarge_32,
80
+ paddingInlineSm: wonderBlocksTokens.spacing.medium_16,
81
+ gap: wonderBlocksTokens.spacing.xSmall_8,
82
+ titleGapMd: wonderBlocksTokens.spacing.medium_16,
83
+ titleGapSm: wonderBlocksTokens.spacing.xLarge_32
84
+ }
85
+ },
86
+ panel: {
87
+ color: {
88
+ border: wonderBlocksTokens.semanticColor.focus.outer
70
89
  },
71
- header: {
72
- xsmall: tokens__namespace.spacing.xSmall_8,
73
- small: tokens__namespace.spacing.medium_16,
74
- medium: tokens__namespace.spacing.large_24,
75
- large: tokens__namespace.spacing.xLarge_32
90
+ spacing: {
91
+ gap: wonderBlocksTokens.spacing.xLarge_32
92
+ }
93
+ },
94
+ closeButton: {
95
+ spacing: {
96
+ gap: wonderBlocksTokens.spacing.medium_16
76
97
  }
77
98
  }
78
99
  };
79
100
 
80
101
  const theme = wonderBlocksTheming.mergeTheme(theme$1, {
81
- color: {
82
- bg: {
83
- inverse: tokens.color.eggplant
102
+ root: {
103
+ color: {
104
+ inverse: {
105
+ background: wonderBlocksTokens.semanticColor.khanmigo.primary
106
+ }
84
107
  }
85
108
  }
86
109
  });
@@ -112,7 +135,7 @@ const ModalDialogCore = React__namespace.forwardRef(function ModalDialogCore(pro
112
135
  const {
113
136
  theme
114
137
  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
115
- const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
138
+ const styles = wonderBlocksTheming.useStyles(themedStylesFn$5, theme);
116
139
  return React__namespace.createElement(wonderBlocksCore.View, {
117
140
  style: [styles.wrapper, style]
118
141
  }, below && React__namespace.createElement(wonderBlocksCore.View, {
@@ -135,7 +158,7 @@ const ModalDialog = React__namespace.forwardRef(function ModalDialog(props, ref)
135
158
  })));
136
159
  });
137
160
  const small$2 = "@media (max-width: 767px)";
138
- const themedStylesFn$3 = theme => ({
161
+ const themedStylesFn$5 = theme => ({
139
162
  wrapper: {
140
163
  display: "flex",
141
164
  flexDirection: "row",
@@ -144,14 +167,14 @@ const themedStylesFn$3 = theme => ({
144
167
  height: "100%",
145
168
  position: "relative",
146
169
  [small$2]: {
147
- padding: theme.spacing.dialog.small,
170
+ padding: theme.dialog.spacing.padding,
148
171
  flexDirection: "column"
149
172
  }
150
173
  },
151
174
  dialog: {
152
175
  width: "100%",
153
176
  height: "100%",
154
- borderRadius: theme.border.radius,
177
+ borderRadius: theme.root.border.radius,
155
178
  overflow: "hidden"
156
179
  },
157
180
  above: {
@@ -178,28 +201,32 @@ ModalDialog.displayName = "ModalDialog";
178
201
  function ModalFooter({
179
202
  children
180
203
  }) {
204
+ const {
205
+ theme
206
+ } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
207
+ const styles = wonderBlocksTheming.useStyles(themedStylesFn$4, theme);
181
208
  return React__namespace.createElement(wonderBlocksCore.View, {
182
- style: styles$2.footer
209
+ style: styles.footer
183
210
  }, children);
184
211
  }
185
212
  ModalFooter.__IS_MODAL_FOOTER__ = true;
186
213
  ModalFooter.isComponentOf = instance => {
187
214
  return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
188
215
  };
189
- const styles$2 = aphrodite.StyleSheet.create({
216
+ const themedStylesFn$4 = theme => ({
190
217
  footer: {
191
218
  flex: "0 0 auto",
192
219
  boxSizing: "border-box",
193
- minHeight: tokens.spacing.xxxLarge_64,
194
- paddingLeft: tokens.spacing.medium_16,
195
- paddingRight: tokens.spacing.medium_16,
196
- paddingTop: tokens.spacing.xSmall_8,
197
- paddingBottom: tokens.spacing.xSmall_8,
220
+ minHeight: wonderBlocksTokens.spacing.xxxLarge_64,
221
+ paddingLeft: wonderBlocksTokens.spacing.medium_16,
222
+ paddingRight: wonderBlocksTokens.spacing.medium_16,
223
+ paddingTop: wonderBlocksTokens.spacing.xSmall_8,
224
+ paddingBottom: wonderBlocksTokens.spacing.xSmall_8,
198
225
  display: "flex",
199
226
  flexDirection: "row",
200
227
  alignItems: "center",
201
228
  justifyContent: "flex-end",
202
- boxShadow: `0px -1px 0px ${tokens.color.offBlack16}`
229
+ boxShadow: `0px -1px 0px ${theme.footer.color.border}`
203
230
  }
204
231
  });
205
232
 
@@ -218,7 +245,7 @@ function ModalHeader(props) {
218
245
  const {
219
246
  theme
220
247
  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
221
- const styles = wonderBlocksTheming.useStyles(themedStylesFn$2, theme);
248
+ const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
222
249
  return React__namespace.createElement(wonderBlocksCore.View, {
223
250
  style: [styles.header, !light && styles.dark],
224
251
  testId: testId
@@ -235,37 +262,37 @@ function ModalHeader(props) {
235
262
  }, subtitle));
236
263
  }
237
264
  const small$1 = "@media (max-width: 767px)";
238
- const themedStylesFn$2 = theme => ({
265
+ const themedStylesFn$3 = theme => ({
239
266
  header: {
240
- boxShadow: `0px 1px 0px ${theme.color.shadow.default}`,
267
+ boxShadow: `0px 1px 0px ${theme.header.color.border}`,
241
268
  display: "flex",
242
269
  flexDirection: "column",
243
270
  minHeight: 66,
244
- padding: `${theme.spacing.header.medium}px ${theme.spacing.header.large}px`,
271
+ paddingBlock: theme.header.spacing.paddingBlockMd,
272
+ paddingInline: theme.header.spacing.paddingInlineMd,
245
273
  position: "relative",
246
274
  width: "100%",
247
275
  [small$1]: {
248
- paddingLeft: theme.spacing.header.small,
249
- paddingRight: theme.spacing.header.small
276
+ paddingInline: theme.header.spacing.paddingInlineSm
250
277
  }
251
278
  },
252
279
  dark: {
253
- background: theme.color.bg.inverse,
254
- color: theme.color.text.inverse
280
+ background: theme.root.color.inverse.background,
281
+ color: theme.root.color.inverse.foreground
255
282
  },
256
283
  breadcrumbs: {
257
- color: theme.color.text.secondary,
258
- marginBottom: theme.spacing.header.xsmall
284
+ color: theme.header.color.secondary,
285
+ marginBottom: theme.header.spacing.gap
259
286
  },
260
287
  title: {
261
- paddingRight: theme.spacing.header.small,
288
+ paddingRight: theme.header.spacing.titleGapMd,
262
289
  [small$1]: {
263
- paddingRight: theme.spacing.header.large
290
+ paddingRight: theme.header.spacing.titleGapSm
264
291
  }
265
292
  },
266
293
  subtitle: {
267
- color: theme.color.text.secondary,
268
- marginTop: theme.spacing.header.xsmall
294
+ color: theme.header.color.secondary,
295
+ marginTop: theme.header.spacing.gap
269
296
  }
270
297
  });
271
298
  ModalHeader.defaultProps = {
@@ -395,14 +422,14 @@ class ModalBackdrop extends React__namespace.Component {
395
422
  [ModalLauncherPortalAttributeName]: true
396
423
  };
397
424
  return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
398
- style: styles$1.modalPositioner,
425
+ style: this.props.wbThemeStyles.modalPositioner,
399
426
  onMouseDown: this.handleMouseDown,
400
427
  onMouseUp: this.handleMouseUp,
401
428
  testId: testId
402
429
  }, backdropProps), children);
403
430
  }
404
431
  }
405
- const styles$1 = aphrodite.StyleSheet.create({
432
+ const themedStylesFn$2 = theme => ({
406
433
  modalPositioner: {
407
434
  position: "fixed",
408
435
  left: 0,
@@ -412,9 +439,10 @@ const styles$1 = aphrodite.StyleSheet.create({
412
439
  alignItems: "center",
413
440
  justifyContent: "center",
414
441
  overflow: "auto",
415
- background: tokens.color.offBlack64
442
+ background: theme.backdrop.color.background
416
443
  }
417
444
  });
445
+ var ModalBackdrop$1 = wonderBlocksTheming.withScopedTheme(themedStylesFn$2, ModalDialogThemeContext)(ModalBackdrop);
418
446
 
419
447
  const needsHackyMobileSafariScrollDisabler = (() => {
420
448
  if (typeof window === "undefined") {
@@ -574,7 +602,7 @@ class ModalLauncher extends React__namespace.Component {
574
602
  }
575
603
  }, renderedChildren, this.state.opened && ReactDOM__namespace.createPortal(React__namespace.createElement(FocusTrap, {
576
604
  style: styles.container
577
- }, React__namespace.createElement(ModalBackdrop, {
605
+ }, React__namespace.createElement(ModalBackdrop$1, {
578
606
  initialFocusId: this.props.initialFocusId,
579
607
  testId: this.props.testId,
580
608
  onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
@@ -646,10 +674,10 @@ const themedStylesFn$1 = theme => ({
646
674
  content: {
647
675
  flex: 1,
648
676
  minHeight: "100%",
649
- padding: tokens.spacing.xLarge_32,
677
+ padding: wonderBlocksTokens.spacing.xLarge_32,
650
678
  boxSizing: "border-box",
651
679
  [small]: {
652
- padding: `${tokens.spacing.xLarge_32}px ${tokens.spacing.medium_16}px`
680
+ padding: `${wonderBlocksTokens.spacing.xLarge_32}px ${wonderBlocksTokens.spacing.medium_16}px`
653
681
  }
654
682
  }
655
683
  });
@@ -739,23 +767,23 @@ const themedStylesFn = theme => ({
739
767
  },
740
768
  closeButton: {
741
769
  position: "absolute",
742
- right: theme.spacing.panel.closeButton,
743
- top: theme.spacing.panel.closeButton,
770
+ right: theme.closeButton.spacing.gap,
771
+ top: theme.closeButton.spacing.gap,
744
772
  zIndex: 1,
745
773
  ":focus": {
746
- outlineWidth: theme.border.width,
747
- outlineColor: theme.border.color,
774
+ outlineWidth: theme.root.border.width,
775
+ outlineColor: theme.panel.color.border,
748
776
  outlineOffset: 1,
749
777
  outlineStyle: "solid",
750
- borderRadius: theme.border.radius
778
+ borderRadius: theme.root.border.radius
751
779
  }
752
780
  },
753
781
  dark: {
754
- background: theme.color.bg.inverse,
755
- color: theme.color.text.inverse
782
+ background: theme.root.color.inverse.background,
783
+ color: theme.root.color.inverse.foreground
756
784
  },
757
785
  hasFooter: {
758
- paddingBottom: theme.spacing.panel.footer
786
+ paddingBlockEnd: theme.panel.spacing.gap
759
787
  }
760
788
  });
761
789
 
package/dist/themes/default.d.ts CHANGED
@@ -1,34 +1,62 @@
1
1
  declare const theme: {
2
- color: {
3
- bg: {
4
- inverse: string;
2
+ /**
3
+ * Shared tokens
4
+ */
5
+ root: {
6
+ color: {
7
+ inverse: {
8
+ background: string;
9
+ foreground: string;
10
+ };
5
11
  };
6
- text: {
7
- inverse: string;
12
+ border: {
13
+ radius: number;
14
+ width: number;
15
+ };
16
+ };
17
+ /**
18
+ * Building blocks
19
+ */
20
+ backdrop: {
21
+ color: {
22
+ background: string;
23
+ };
24
+ };
25
+ dialog: {
26
+ spacing: {
27
+ padding: 16;
28
+ };
29
+ };
30
+ footer: {
31
+ color: {
32
+ border: string;
33
+ };
34
+ };
35
+ header: {
36
+ color: {
37
+ border: string;
8
38
  secondary: string;
9
39
  };
10
- shadow: {
11
- default: string;
40
+ spacing: {
41
+ paddingBlockMd: 24;
42
+ paddingInlineMd: 32;
43
+ paddingInlineSm: 16;
44
+ gap: 8;
45
+ titleGapMd: 16;
46
+ titleGapSm: 32;
12
47
  };
13
48
  };
14
- border: {
15
- radius: number;
16
- width: number;
17
- color: string;
49
+ panel: {
50
+ color: {
51
+ border: string;
52
+ };
53
+ spacing: {
54
+ gap: 32;
55
+ };
18
56
  };
19
- spacing: {
20
- dialog: {
21
- small: 16;
22
- };
23
- panel: {
24
- closeButton: 16;
25
- footer: 32;
26
- };
27
- header: {
28
- xsmall: 8;
29
- small: 16;
30
- medium: 24;
31
- large: 32;
57
+ closeButton: {
58
+ spacing: {
59
+ gap: 16;
32
60
  };
33
61
  };
34
62
  };
package/dist/themes/khanmigo.d.ts CHANGED
@@ -2,36 +2,58 @@
2
2
  * The overrides for the Khanmigo theme.
3
3
  */
4
4
  declare const theme: {
5
- color: {
6
- bg: {
7
- inverse: string;
5
+ root: {
6
+ color: {
7
+ inverse: {
8
+ background: string;
9
+ foreground: string;
10
+ };
8
11
  };
9
- text: {
10
- inverse: string;
12
+ border: {
13
+ radius: number;
14
+ width: number;
15
+ };
16
+ };
17
+ backdrop: {
18
+ color: {
19
+ background: string;
20
+ };
21
+ };
22
+ dialog: {
23
+ spacing: {
24
+ padding: 16;
25
+ };
26
+ };
27
+ footer: {
28
+ color: {
29
+ border: string;
30
+ };
31
+ };
32
+ header: {
33
+ color: {
34
+ border: string;
11
35
  secondary: string;
12
36
  };
13
- shadow: {
14
- default: string;
37
+ spacing: {
38
+ paddingBlockMd: 24;
39
+ paddingInlineMd: 32;
40
+ paddingInlineSm: 16;
41
+ gap: 8;
42
+ titleGapMd: 16;
43
+ titleGapSm: 32;
15
44
  };
16
45
  };
17
- border: {
18
- radius: number;
19
- width: number;
20
- color: string;
46
+ panel: {
47
+ color: {
48
+ border: string;
49
+ };
50
+ spacing: {
51
+ gap: 32;
52
+ };
21
53
  };
22
- spacing: {
23
- dialog: {
24
- small: 16;
25
- };
26
- panel: {
27
- closeButton: 16;
28
- footer: 32;
29
- };
30
- header: {
31
- xsmall: 8;
32
- small: 16;
33
- medium: 24;
34
- large: 32;
54
+ closeButton: {
55
+ spacing: {
56
+ gap: 16;
35
57
  };
36
58
  };
37
59
  };
package/dist/themes/themed-modal-dialog.d.ts CHANGED
@@ -9,36 +9,58 @@ export type ModalDialogThemeContract = typeof defaultTheme;
9
9
  * This is generally consumed via the `useScopedTheme` hook.
10
10
  */
11
11
  export declare const ModalDialogThemeContext: React.Context<{
12
- color: {
13
- bg: {
14
- inverse: string;
12
+ root: {
13
+ color: {
14
+ inverse: {
15
+ background: string;
16
+ foreground: string;
17
+ };
15
18
  };
16
- text: {
17
- inverse: string;
19
+ border: {
20
+ radius: number;
21
+ width: number;
22
+ };
23
+ };
24
+ backdrop: {
25
+ color: {
26
+ background: string;
27
+ };
28
+ };
29
+ dialog: {
30
+ spacing: {
31
+ padding: 16;
32
+ };
33
+ };
34
+ footer: {
35
+ color: {
36
+ border: string;
37
+ };
38
+ };
39
+ header: {
40
+ color: {
41
+ border: string;
18
42
  secondary: string;
19
43
  };
20
- shadow: {
21
- default: string;
44
+ spacing: {
45
+ paddingBlockMd: 24;
46
+ paddingInlineMd: 32;
47
+ paddingInlineSm: 16;
48
+ gap: 8;
49
+ titleGapMd: 16;
50
+ titleGapSm: 32;
22
51
  };
23
52
  };
24
- border: {
25
- radius: number;
26
- width: number;
27
- color: string;
53
+ panel: {
54
+ color: {
55
+ border: string;
56
+ };
57
+ spacing: {
58
+ gap: 32;
59
+ };
28
60
  };
29
- spacing: {
30
- dialog: {
31
- small: 16;
32
- };
33
- panel: {
34
- closeButton: 16;
35
- footer: 32;
36
- };
37
- header: {
38
- xsmall: 8;
39
- small: 16;
40
- medium: 24;
41
- large: 32;
61
+ closeButton: {
62
+ spacing: {
63
+ gap: 16;
42
64
  };
43
65
  };
44
66
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-modal",
3
- "version": "7.1.1",
3
+ "version": "7.1.3",
4
4
  "design": "v2",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -13,14 +13,14 @@
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
15
  "@babel/runtime": "^7.24.5",
16
- "@khanacademy/wonder-blocks-breadcrumbs": "3.1.1",
17
- "@khanacademy/wonder-blocks-core": "12.1.1",
18
- "@khanacademy/wonder-blocks-icon-button": "6.1.1",
19
- "@khanacademy/wonder-blocks-layout": "3.1.1",
20
- "@khanacademy/wonder-blocks-theming": "3.1.1",
16
+ "@khanacademy/wonder-blocks-breadcrumbs": "3.1.3",
17
+ "@khanacademy/wonder-blocks-core": "12.2.0",
18
+ "@khanacademy/wonder-blocks-icon-button": "6.1.3",
19
+ "@khanacademy/wonder-blocks-layout": "3.1.3",
20
+ "@khanacademy/wonder-blocks-theming": "3.2.0",
21
21
  "@khanacademy/wonder-blocks-timing": "7.0.1",
22
- "@khanacademy/wonder-blocks-tokens": "4.2.1",
23
- "@khanacademy/wonder-blocks-typography": "3.1.1"
22
+ "@khanacademy/wonder-blocks-tokens": "5.1.0",
23
+ "@khanacademy/wonder-blocks-typography": "3.1.2"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "@phosphor-icons/core": "^2.0.2",