@khanacademy/wonder-blocks-modal 7.1.0 → 7.1.2

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 +39 -0
  2. package/dist/components/modal-backdrop.d.ts +4 -36
  3. package/dist/es/index.js +99 -71
  4. package/dist/index.js +121 -85
  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 +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,44 @@
1
1
  # @khanacademy/wonder-blocks-modal
2
2
 
3
+ ## 7.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 5655b9f: Switch to use `focus.outer` semanticColor token
8
+ - 6d37702: Refactor Modal package to use semanticColors. Restructure theme contract.
9
+ - Updated dependencies [ed26d66]
10
+ - Updated dependencies [5655b9f]
11
+ - Updated dependencies [5655b9f]
12
+ - Updated dependencies [8f53293]
13
+ - Updated dependencies [6d37702]
14
+ - Updated dependencies [051f0f8]
15
+ - Updated dependencies [e1b78db]
16
+ - Updated dependencies [8f53293]
17
+ - Updated dependencies [051f0f8]
18
+ - @khanacademy/wonder-blocks-core@12.2.0
19
+ - @khanacademy/wonder-blocks-tokens@5.0.0
20
+ - @khanacademy/wonder-blocks-icon-button@6.1.2
21
+ - @khanacademy/wonder-blocks-theming@3.2.0
22
+ - @khanacademy/wonder-blocks-breadcrumbs@3.1.2
23
+ - @khanacademy/wonder-blocks-layout@3.1.2
24
+ - @khanacademy/wonder-blocks-typography@3.1.2
25
+ - @khanacademy/wonder-blocks-timing@7.0.1
26
+
27
+ ## 7.1.1
28
+
29
+ ### Patch Changes
30
+
31
+ - ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
32
+ - Updated dependencies [ee8d95a]
33
+ - @khanacademy/wonder-blocks-breadcrumbs@3.1.1
34
+ - @khanacademy/wonder-blocks-core@12.1.1
35
+ - @khanacademy/wonder-blocks-icon-button@6.1.1
36
+ - @khanacademy/wonder-blocks-layout@3.1.1
37
+ - @khanacademy/wonder-blocks-theming@3.1.1
38
+ - @khanacademy/wonder-blocks-timing@7.0.1
39
+ - @khanacademy/wonder-blocks-tokens@4.2.1
40
+ - @khanacademy/wonder-blocks-typography@3.1.1
41
+
3
42
  ## 7.1.0
4
43
 
5
44
  ### Minor 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 = {
@@ -246,7 +273,7 @@ const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex
246
273
  class FocusTrap extends React.Component {
247
274
  constructor(...args) {
248
275
  super(...args);
249
- this.modalRoot = undefined;
276
+ this.modalRoot = void 0;
250
277
  this.getModalRoot = node => {
251
278
  if (!node) {
252
279
  return;
@@ -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") {
@@ -438,11 +466,11 @@ class ScrollDisabler extends React.Component {
438
466
  return null;
439
467
  }
440
468
  }
441
- ScrollDisabler.oldOverflow = undefined;
442
- ScrollDisabler.oldPosition = undefined;
443
- ScrollDisabler.oldScrollY = undefined;
444
- ScrollDisabler.oldWidth = undefined;
445
- ScrollDisabler.oldTop = undefined;
469
+ ScrollDisabler.oldOverflow = void 0;
470
+ ScrollDisabler.oldPosition = void 0;
471
+ ScrollDisabler.oldScrollY = void 0;
472
+ ScrollDisabler.oldWidth = void 0;
473
+ ScrollDisabler.oldTop = void 0;
446
474
  ScrollDisabler.numModalsOpened = 0;
447
475
 
448
476
  const defaultContext = {
@@ -454,7 +482,7 @@ ModalContext.displayName = "ModalContext";
454
482
  class ModalLauncher extends React.Component {
455
483
  constructor(...args) {
456
484
  super(...args);
457
- this.lastElementFocusedOutsideModal = undefined;
485
+ this.lastElementFocusedOutsideModal = void 0;
458
486
  this.state = {
459
487
  opened: false
460
488
  };
@@ -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
@@ -1,19 +1,24 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var _extends = require('@babel/runtime/helpers/extends');
4
6
  var React = require('react');
5
7
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
6
8
  var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
7
- var tokens = require('@khanacademy/wonder-blocks-tokens');
8
- var aphrodite = require('aphrodite');
9
+ var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
9
10
  var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
10
11
  var ReactDOM = require('react-dom');
12
+ var aphrodite = require('aphrodite');
11
13
  var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
12
14
  var xIcon = require('@phosphor-icons/core/regular/x.svg');
13
15
  var IconButton = require('@khanacademy/wonder-blocks-icon-button');
14
16
  var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
15
17
 
16
- function _interopNamespaceDefault(e) {
18
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
+
20
+ function _interopNamespace(e) {
21
+ if (e && e.__esModule) return e;
17
22
  var n = Object.create(null);
18
23
  if (e) {
19
24
  Object.keys(e).forEach(function (k) {
@@ -26,53 +31,79 @@ function _interopNamespaceDefault(e) {
26
31
  }
27
32
  });
28
33
  }
29
- n.default = e;
34
+ n["default"] = e;
30
35
  return Object.freeze(n);
31
36
  }
32
37
 
33
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
34
- var tokens__namespace = /*#__PURE__*/_interopNamespaceDefault(tokens);
35
- var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
38
+ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
39
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
40
+ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
41
+ var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
42
+ var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
36
43
 
37
44
  const theme$1 = {
38
- color: {
39
- bg: {
40
- inverse: tokens__namespace.color.darkBlue
41
- },
42
- text: {
43
- inverse: tokens__namespace.color.white,
44
- secondary: tokens__namespace.color.offBlack64
45
+ root: {
46
+ color: {
47
+ inverse: {
48
+ background: wonderBlocksTokens.semanticColor.surface.inverse,
49
+ foreground: wonderBlocksTokens.semanticColor.text.inverse
50
+ }
45
51
  },
46
- shadow: {
47
- default: tokens__namespace.color.offBlack16
52
+ border: {
53
+ radius: wonderBlocksTokens.border.radius.medium_4,
54
+ width: wonderBlocksTokens.border.width.thin
48
55
  }
49
56
  },
50
- border: {
51
- radius: tokens__namespace.border.radius.medium_4,
52
- width: tokens__namespace.border.width.thin,
53
- color: tokens__namespace.color.blue
57
+ backdrop: {
58
+ color: {
59
+ background: wonderBlocksTokens.semanticColor.surface.overlay
60
+ }
54
61
  },
55
- spacing: {
56
- dialog: {
57
- 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
58
76
  },
59
- panel: {
60
- closeButton: tokens__namespace.spacing.medium_16,
61
- 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
62
89
  },
63
- header: {
64
- xsmall: tokens__namespace.spacing.xSmall_8,
65
- small: tokens__namespace.spacing.medium_16,
66
- medium: tokens__namespace.spacing.large_24,
67
- 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
68
97
  }
69
98
  }
70
99
  };
71
100
 
72
101
  const theme = wonderBlocksTheming.mergeTheme(theme$1, {
73
- color: {
74
- bg: {
75
- inverse: tokens.color.eggplant
102
+ root: {
103
+ color: {
104
+ inverse: {
105
+ background: wonderBlocksTokens.semanticColor.khanmigo.primary
106
+ }
76
107
  }
77
108
  }
78
109
  });
@@ -104,7 +135,7 @@ const ModalDialogCore = React__namespace.forwardRef(function ModalDialogCore(pro
104
135
  const {
105
136
  theme
106
137
  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
107
- const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
138
+ const styles = wonderBlocksTheming.useStyles(themedStylesFn$5, theme);
108
139
  return React__namespace.createElement(wonderBlocksCore.View, {
109
140
  style: [styles.wrapper, style]
110
141
  }, below && React__namespace.createElement(wonderBlocksCore.View, {
@@ -122,12 +153,12 @@ const ModalDialogCore = React__namespace.forwardRef(function ModalDialogCore(pro
122
153
  }, above));
123
154
  });
124
155
  const ModalDialog = React__namespace.forwardRef(function ModalDialog(props, ref) {
125
- return React__namespace.createElement(ThemeModalDialog, null, React__namespace.createElement(ModalDialogCore, _extends({}, props, {
156
+ return React__namespace.createElement(ThemeModalDialog, null, React__namespace.createElement(ModalDialogCore, _extends__default["default"]({}, props, {
126
157
  ref: ref
127
158
  })));
128
159
  });
129
160
  const small$2 = "@media (max-width: 767px)";
130
- const themedStylesFn$3 = theme => ({
161
+ const themedStylesFn$5 = theme => ({
131
162
  wrapper: {
132
163
  display: "flex",
133
164
  flexDirection: "row",
@@ -136,14 +167,14 @@ const themedStylesFn$3 = theme => ({
136
167
  height: "100%",
137
168
  position: "relative",
138
169
  [small$2]: {
139
- padding: theme.spacing.dialog.small,
170
+ padding: theme.dialog.spacing.padding,
140
171
  flexDirection: "column"
141
172
  }
142
173
  },
143
174
  dialog: {
144
175
  width: "100%",
145
176
  height: "100%",
146
- borderRadius: theme.border.radius,
177
+ borderRadius: theme.root.border.radius,
147
178
  overflow: "hidden"
148
179
  },
149
180
  above: {
@@ -170,28 +201,32 @@ ModalDialog.displayName = "ModalDialog";
170
201
  function ModalFooter({
171
202
  children
172
203
  }) {
204
+ const {
205
+ theme
206
+ } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
207
+ const styles = wonderBlocksTheming.useStyles(themedStylesFn$4, theme);
173
208
  return React__namespace.createElement(wonderBlocksCore.View, {
174
- style: styles$2.footer
209
+ style: styles.footer
175
210
  }, children);
176
211
  }
177
212
  ModalFooter.__IS_MODAL_FOOTER__ = true;
178
213
  ModalFooter.isComponentOf = instance => {
179
214
  return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
180
215
  };
181
- const styles$2 = aphrodite.StyleSheet.create({
216
+ const themedStylesFn$4 = theme => ({
182
217
  footer: {
183
218
  flex: "0 0 auto",
184
219
  boxSizing: "border-box",
185
- minHeight: tokens.spacing.xxxLarge_64,
186
- paddingLeft: tokens.spacing.medium_16,
187
- paddingRight: tokens.spacing.medium_16,
188
- paddingTop: tokens.spacing.xSmall_8,
189
- 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,
190
225
  display: "flex",
191
226
  flexDirection: "row",
192
227
  alignItems: "center",
193
228
  justifyContent: "flex-end",
194
- boxShadow: `0px -1px 0px ${tokens.color.offBlack16}`
229
+ boxShadow: `0px -1px 0px ${theme.footer.color.border}`
195
230
  }
196
231
  });
197
232
 
@@ -210,7 +245,7 @@ function ModalHeader(props) {
210
245
  const {
211
246
  theme
212
247
  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
213
- const styles = wonderBlocksTheming.useStyles(themedStylesFn$2, theme);
248
+ const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
214
249
  return React__namespace.createElement(wonderBlocksCore.View, {
215
250
  style: [styles.header, !light && styles.dark],
216
251
  testId: testId
@@ -227,37 +262,37 @@ function ModalHeader(props) {
227
262
  }, subtitle));
228
263
  }
229
264
  const small$1 = "@media (max-width: 767px)";
230
- const themedStylesFn$2 = theme => ({
265
+ const themedStylesFn$3 = theme => ({
231
266
  header: {
232
- boxShadow: `0px 1px 0px ${theme.color.shadow.default}`,
267
+ boxShadow: `0px 1px 0px ${theme.header.color.border}`,
233
268
  display: "flex",
234
269
  flexDirection: "column",
235
270
  minHeight: 66,
236
- padding: `${theme.spacing.header.medium}px ${theme.spacing.header.large}px`,
271
+ paddingBlock: theme.header.spacing.paddingBlockMd,
272
+ paddingInline: theme.header.spacing.paddingInlineMd,
237
273
  position: "relative",
238
274
  width: "100%",
239
275
  [small$1]: {
240
- paddingLeft: theme.spacing.header.small,
241
- paddingRight: theme.spacing.header.small
276
+ paddingInline: theme.header.spacing.paddingInlineSm
242
277
  }
243
278
  },
244
279
  dark: {
245
- background: theme.color.bg.inverse,
246
- color: theme.color.text.inverse
280
+ background: theme.root.color.inverse.background,
281
+ color: theme.root.color.inverse.foreground
247
282
  },
248
283
  breadcrumbs: {
249
- color: theme.color.text.secondary,
250
- marginBottom: theme.spacing.header.xsmall
284
+ color: theme.header.color.secondary,
285
+ marginBottom: theme.header.spacing.gap
251
286
  },
252
287
  title: {
253
- paddingRight: theme.spacing.header.small,
288
+ paddingRight: theme.header.spacing.titleGapMd,
254
289
  [small$1]: {
255
- paddingRight: theme.spacing.header.large
290
+ paddingRight: theme.header.spacing.titleGapSm
256
291
  }
257
292
  },
258
293
  subtitle: {
259
- color: theme.color.text.secondary,
260
- marginTop: theme.spacing.header.xsmall
294
+ color: theme.header.color.secondary,
295
+ marginTop: theme.header.spacing.gap
261
296
  }
262
297
  });
263
298
  ModalHeader.defaultProps = {
@@ -268,7 +303,7 @@ const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex
268
303
  class FocusTrap extends React__namespace.Component {
269
304
  constructor(...args) {
270
305
  super(...args);
271
- this.modalRoot = undefined;
306
+ this.modalRoot = void 0;
272
307
  this.getModalRoot = node => {
273
308
  if (!node) {
274
309
  return;
@@ -386,15 +421,15 @@ class ModalBackdrop extends React__namespace.Component {
386
421
  const backdropProps = {
387
422
  [ModalLauncherPortalAttributeName]: true
388
423
  };
389
- return React__namespace.createElement(wonderBlocksCore.View, _extends({
390
- style: styles$1.modalPositioner,
424
+ return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
425
+ style: this.props.wbThemeStyles.modalPositioner,
391
426
  onMouseDown: this.handleMouseDown,
392
427
  onMouseUp: this.handleMouseUp,
393
428
  testId: testId
394
429
  }, backdropProps), children);
395
430
  }
396
431
  }
397
- const styles$1 = aphrodite.StyleSheet.create({
432
+ const themedStylesFn$2 = theme => ({
398
433
  modalPositioner: {
399
434
  position: "fixed",
400
435
  left: 0,
@@ -404,9 +439,10 @@ const styles$1 = aphrodite.StyleSheet.create({
404
439
  alignItems: "center",
405
440
  justifyContent: "center",
406
441
  overflow: "auto",
407
- background: tokens.color.offBlack64
442
+ background: theme.backdrop.color.background
408
443
  }
409
444
  });
445
+ var ModalBackdrop$1 = wonderBlocksTheming.withScopedTheme(themedStylesFn$2, ModalDialogThemeContext)(ModalBackdrop);
410
446
 
411
447
  const needsHackyMobileSafariScrollDisabler = (() => {
412
448
  if (typeof window === "undefined") {
@@ -460,11 +496,11 @@ class ScrollDisabler extends React__namespace.Component {
460
496
  return null;
461
497
  }
462
498
  }
463
- ScrollDisabler.oldOverflow = undefined;
464
- ScrollDisabler.oldPosition = undefined;
465
- ScrollDisabler.oldScrollY = undefined;
466
- ScrollDisabler.oldWidth = undefined;
467
- ScrollDisabler.oldTop = undefined;
499
+ ScrollDisabler.oldOverflow = void 0;
500
+ ScrollDisabler.oldPosition = void 0;
501
+ ScrollDisabler.oldScrollY = void 0;
502
+ ScrollDisabler.oldWidth = void 0;
503
+ ScrollDisabler.oldTop = void 0;
468
504
  ScrollDisabler.numModalsOpened = 0;
469
505
 
470
506
  const defaultContext = {
@@ -476,7 +512,7 @@ ModalContext.displayName = "ModalContext";
476
512
  class ModalLauncher extends React__namespace.Component {
477
513
  constructor(...args) {
478
514
  super(...args);
479
- this.lastElementFocusedOutsideModal = undefined;
515
+ this.lastElementFocusedOutsideModal = void 0;
480
516
  this.state = {
481
517
  opened: false
482
518
  };
@@ -566,7 +602,7 @@ class ModalLauncher extends React__namespace.Component {
566
602
  }
567
603
  }, renderedChildren, this.state.opened && ReactDOM__namespace.createPortal(React__namespace.createElement(FocusTrap, {
568
604
  style: styles.container
569
- }, React__namespace.createElement(ModalBackdrop, {
605
+ }, React__namespace.createElement(ModalBackdrop$1, {
570
606
  initialFocusId: this.props.initialFocusId,
571
607
  testId: this.props.testId,
572
608
  onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
@@ -638,10 +674,10 @@ const themedStylesFn$1 = theme => ({
638
674
  content: {
639
675
  flex: 1,
640
676
  minHeight: "100%",
641
- padding: tokens.spacing.xLarge_32,
677
+ padding: wonderBlocksTokens.spacing.xLarge_32,
642
678
  boxSizing: "border-box",
643
679
  [small]: {
644
- padding: `${tokens.spacing.xLarge_32}px ${tokens.spacing.medium_16}px`
680
+ padding: `${wonderBlocksTokens.spacing.xLarge_32}px ${wonderBlocksTokens.spacing.medium_16}px`
645
681
  }
646
682
  }
647
683
  });
@@ -663,8 +699,8 @@ class CloseButton extends React__namespace.Component {
663
699
  if (closeModal && onClick) {
664
700
  throw new Error("You've specified 'onClose' on a modal when using ModalLauncher. Please specify 'onClose' on the ModalLauncher instead");
665
701
  }
666
- return React__namespace.createElement(IconButton, {
667
- icon: xIcon,
702
+ return React__namespace.createElement(IconButton__default["default"], {
703
+ icon: xIcon__default["default"],
668
704
  "aria-label": "Close modal",
669
705
  onClick: onClick || closeModal,
670
706
  kind: light ? "primary" : "tertiary",
@@ -731,23 +767,23 @@ const themedStylesFn = theme => ({
731
767
  },
732
768
  closeButton: {
733
769
  position: "absolute",
734
- right: theme.spacing.panel.closeButton,
735
- top: theme.spacing.panel.closeButton,
770
+ right: theme.closeButton.spacing.gap,
771
+ top: theme.closeButton.spacing.gap,
736
772
  zIndex: 1,
737
773
  ":focus": {
738
- outlineWidth: theme.border.width,
739
- outlineColor: theme.border.color,
774
+ outlineWidth: theme.root.border.width,
775
+ outlineColor: theme.panel.color.border,
740
776
  outlineOffset: 1,
741
777
  outlineStyle: "solid",
742
- borderRadius: theme.border.radius
778
+ borderRadius: theme.root.border.radius
743
779
  }
744
780
  },
745
781
  dark: {
746
- background: theme.color.bg.inverse,
747
- color: theme.color.text.inverse
782
+ background: theme.root.color.inverse.background,
783
+ color: theme.root.color.inverse.foreground
748
784
  },
749
785
  hasFooter: {
750
- paddingBottom: theme.spacing.panel.footer
786
+ paddingBlockEnd: theme.panel.spacing.gap
751
787
  }
752
788
  });
753
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.0",
3
+ "version": "7.1.2",
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.0",
17
- "@khanacademy/wonder-blocks-core": "12.1.0",
18
- "@khanacademy/wonder-blocks-icon-button": "6.1.0",
19
- "@khanacademy/wonder-blocks-layout": "3.1.0",
20
- "@khanacademy/wonder-blocks-theming": "3.1.0",
21
- "@khanacademy/wonder-blocks-timing": "7.0.0",
22
- "@khanacademy/wonder-blocks-tokens": "4.2.0",
23
- "@khanacademy/wonder-blocks-typography": "3.1.0"
16
+ "@khanacademy/wonder-blocks-breadcrumbs": "3.1.2",
17
+ "@khanacademy/wonder-blocks-core": "12.2.0",
18
+ "@khanacademy/wonder-blocks-icon-button": "6.1.2",
19
+ "@khanacademy/wonder-blocks-layout": "3.1.2",
20
+ "@khanacademy/wonder-blocks-theming": "3.2.0",
21
+ "@khanacademy/wonder-blocks-timing": "7.0.1",
22
+ "@khanacademy/wonder-blocks-tokens": "5.0.0",
23
+ "@khanacademy/wonder-blocks-typography": "3.1.2"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "@phosphor-icons/core": "^2.0.2",
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "devDependencies": {
32
32
  "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.8",
33
- "@khanacademy/wb-dev-build-settings": "2.1.0"
33
+ "@khanacademy/wb-dev-build-settings": "2.1.1"
34
34
  },
35
35
  "scripts": {
36
36
  "test": "echo \"Error: no test specified\" && exit 1"