@khanacademy/wonder-blocks-dropdown 5.1.3 → 5.1.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.1.4
+
+### Patch Changes
+
+-   60aba5b8: Update internal spacing references (from wb-spacing to wb-tokens)
+-   7cd7f6cc: Replace theming.tokens with wb-tokens and update callsites to use the new export
+-   7c51f377: Migrate wb-color imports to use tokens.color
+-   Updated dependencies [60aba5b8]
+-   Updated dependencies [7cd7f6cc]
+-   Updated dependencies [7c51f377]
+-   Updated dependencies [7cd7f6cc]
+-   Updated dependencies [7c51f377]
+    -   @khanacademy/wonder-blocks-search-field@2.2.1
+    -   @khanacademy/wonder-blocks-layout@2.0.26
+    -   @khanacademy/wonder-blocks-modal@4.2.2
+    -   @khanacademy/wonder-blocks-cell@3.2.1
+    -   @khanacademy/wonder-blocks-tokens@0.2.0
+    -   @khanacademy/wonder-blocks-clickable@4.0.13
+
 ## 5.1.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
-import Color, { mix, fade, SemanticColor } from '@khanacademy/wonder-blocks-color';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import * as tokens from '@khanacademy/wonder-blocks-tokens';
+import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
-import { tokens } from '@khanacademy/wonder-blocks-theming';
+import { mix, fade } from '@khanacademy/wonder-blocks-color';
 import { View, addStyle } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
@@ -44,8 +44,8 @@ const keyCodes = {
   down: 40
 };
 const selectDropdownStyle = {
-  marginTop: tokens.spacing.xSmall_8,
-  marginBottom: tokens.spacing.xSmall_8
+  marginTop: spacing.xSmall_8,
+  marginBottom: spacing.xSmall_8
 };
 const filterableDropdownStyle = {
   minHeight: 100
@@ -67,9 +67,8 @@ const defaultLabels = {
 const {
   blue: blue$1,
   white: white$1,
-  offBlack: offBlack$1,
-  offBlack32: offBlack32$1
-} = Color;
+  offBlack: offBlack$1
+} = color;
 class ActionItem extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
@@ -126,9 +125,9 @@ const styles$8 = StyleSheet.create({
     minHeight: DROPDOWN_ITEM_HEIGHT,
     touchAction: "manipulation",
     ":focus": {
-      borderRadius: Spacing.xxxSmall_4,
-      outline: `${Spacing.xxxxSmall_2}px solid ${Color.blue}`,
-      outlineOffset: -Spacing.xxxxSmall_2
+      borderRadius: spacing.xxxSmall_4,
+      outline: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
+      outlineOffset: -spacing.xxxxSmall_2
     },
     [":hover[aria-disabled=false]"]: {
       color: white$1,
@@ -141,8 +140,8 @@ const styles$8 = StyleSheet.create({
       }
     },
     [":active[aria-disabled=false]"]: {
-      color: mix(fade(blue$1, 0.32), white$1),
-      background: mix(offBlack32$1, blue$1)
+      color: color.fadedBlue,
+      background: color.activeBlue
     }
   },
   shared: {
@@ -154,7 +153,7 @@ const styles$8 = StyleSheet.create({
     userSelect: "none"
   },
   indent: {
-    paddingLeft: Spacing.medium_16 * 2
+    paddingLeft: spacing.medium_16 * 2
   }
 });
 
@@ -184,9 +183,9 @@ const Check = function Check(props) {
 const styles$7 = StyleSheet.create({
   bounds: {
     alignSelf: "center",
-    height: Spacing.medium_16,
-    minHeight: Spacing.medium_16,
-    minWidth: Spacing.medium_16
+    height: spacing.medium_16,
+    minHeight: spacing.medium_16,
+    minWidth: spacing.medium_16
   },
   hide: {
     visibility: "hidden"
@@ -197,7 +196,7 @@ const {
   offBlack16,
   offBlack50,
   offWhite
-} = Color;
+} = color;
 const Checkbox = function Checkbox(props) {
   const {
     disabled,
@@ -211,18 +210,18 @@ const Checkbox = function Checkbox(props) {
     size: "small",
     className: "check",
     style: [{
-      width: Spacing.small_12,
-      height: Spacing.small_12,
-      margin: Spacing.xxxxSmall_2
+      width: spacing.small_12,
+      height: spacing.small_12,
+      margin: spacing.xxxxSmall_2
     }, disabled && selected && styles$6.disabledCheckFormatting]
   }));
 };
 const styles$6 = StyleSheet.create({
   checkbox: {
     alignSelf: "center",
-    minHeight: Spacing.medium_16,
-    minWidth: Spacing.medium_16,
-    height: Spacing.medium_16,
+    minHeight: spacing.medium_16,
+    minWidth: spacing.medium_16,
+    height: spacing.medium_16,
     borderRadius: 3,
     borderWidth: 1,
     borderStyle: "solid",
@@ -302,7 +301,7 @@ class OptionItem extends React.Component {
         disabled: disabled,
         selected: selected
       }), React.createElement(Strut, {
-        size: Spacing.xSmall_8
+        size: spacing.xSmall_8
       }), leftAccessory) : React.createElement(CheckComponent, {
         disabled: disabled,
         selected: selected
@@ -332,18 +331,16 @@ OptionItem.__IS_OPTION_ITEM__ = true;
 const {
   blue,
   white,
-  offBlack,
-  offBlack32
-} = Color;
-const activeBlue = mix(offBlack32, blue);
+  offBlack
+} = color;
 const styles$5 = StyleSheet.create({
   item: {
     minHeight: "unset",
-    paddingBlock: Spacing.xxxxSmall_2,
+    paddingBlock: spacing.xxxxSmall_2,
     ":focus": {
-      borderRadius: Spacing.xxxSmall_4,
-      outline: `${Spacing.xxxxSmall_2}px solid ${Color.blue}`,
-      outlineOffset: -Spacing.xxxxSmall_2
+      borderRadius: spacing.xxxSmall_4,
+      outline: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
+      outlineOffset: -spacing.xxxxSmall_2
     },
     ":focus-visible": {
       overflow: "visible"
@@ -359,8 +356,8 @@ const styles$5 = StyleSheet.create({
       }
     },
     [":active[aria-disabled=false]"]: {
-      color: mix(fade(blue, 0.32), white),
-      background: activeBlue
+      color: color.fadedBlue,
+      background: color.activeBlue
     },
     [":hover[aria-disabled=false] .checkbox"]: {
       background: white
@@ -369,7 +366,7 @@ const styles$5 = StyleSheet.create({
       color: blue
     },
     [":active[aria-disabled=false] .check"]: {
-      color: activeBlue
+      color: color.activeBlue
     },
     [":is([aria-selected=true]) .checkbox"]: {
       background: blue
@@ -378,19 +375,19 @@ const styles$5 = StyleSheet.create({
       color: white
     },
     [":is([aria-disabled=false]) .subtitle"]: {
-      color: Color.offBlack64
+      color: color.offBlack64
     },
     [":hover[aria-disabled=false] .subtitle"]: {
-      color: Color.offWhite
+      color: color.offWhite
     },
     [":active[aria-disabled=false] .subtitle"]: {
-      color: mix(fade(blue, 0.16), white)
+      color: mix(color.fadedBlue16, white)
     }
   },
   itemContainer: {
     minHeight: "unset",
-    padding: Spacing.xSmall_8,
-    paddingRight: Spacing.medium_16,
+    padding: spacing.xSmall_8,
+    paddingRight: spacing.medium_16,
     whiteSpace: "nowrap"
   },
   label: {
@@ -418,11 +415,11 @@ class SeparatorItem extends React.Component {
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
 const styles$4 = StyleSheet.create({
   separator: {
-    boxShadow: `0 -1px ${Color.offBlack16}`,
+    boxShadow: `0 -1px ${color.offBlack16}`,
     height: 1,
     minHeight: 1,
-    marginTop: Spacing.xxxSmall_4,
-    marginBottom: Spacing.xxxSmall_4
+    marginTop: spacing.xxxSmall_4,
+    marginBottom: spacing.xxxSmall_4
   }
 });
 
@@ -1247,12 +1244,12 @@ const styles$3 = StyleSheet.create({
     width: "fit-content"
   },
   dropdown: {
-    backgroundColor: Color.white,
+    backgroundColor: color.white,
     borderRadius: 4,
-    paddingTop: Spacing.xxxSmall_4,
-    paddingBottom: Spacing.xxxSmall_4,
-    border: `solid 1px ${Color.offBlack16}`,
-    boxShadow: `0px 8px 8px 0px ${fade(Color.offBlack, 0.1)}`,
+    paddingTop: spacing.xxxSmall_4,
+    paddingBottom: spacing.xxxSmall_4,
+    border: `solid 1px ${color.offBlack16}`,
+    boxShadow: `0px 8px 8px 0px ${fade(color.offBlack, 0.1)}`,
     maxHeight: "var(--popper-max-height)"
   },
   light: {
@@ -1266,13 +1263,13 @@ const styles$3 = StyleSheet.create({
     visibility: "hidden"
   },
   noResult: {
-    color: Color.offBlack64,
+    color: color.offBlack64,
     alignSelf: "center",
-    marginTop: Spacing.xxSmall_6
+    marginTop: spacing.xxSmall_6
   },
   searchInputStyle: {
-    margin: Spacing.xSmall_8,
-    marginTop: Spacing.xxxSmall_4,
+    margin: spacing.xSmall_8,
+    marginTop: spacing.xxxSmall_4,
     minHeight: "auto",
     position: "sticky"
   },
@@ -1305,7 +1302,7 @@ class ActionMenuOpenerCore extends React.Component {
         "aria-label": ariaLabel
       } = _this$props,
       restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
-    const buttonColor = SemanticColor.controlDefault;
+    const buttonColor = color.blue;
     const buttonStyles = _generateStyles$1(buttonColor);
     const disabled = disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && pressed && buttonStyles.active];
@@ -1324,7 +1321,7 @@ class ActionMenuOpenerCore extends React.Component {
     }), React.createElement(View, {
       style: !disabled && (hovered || focused) && buttonStyles.focus
     }, label), React.createElement(Strut, {
-      size: Spacing.xxxSmall_4
+      size: spacing.xxxSmall_4
     }), React.createElement(PhosphorIcon, {
       size: "small",
       color: "currentColor",
@@ -1341,7 +1338,7 @@ const sharedStyles = StyleSheet.create({
     justifyContent: "center",
     height: DROPDOWN_ITEM_HEIGHT,
     border: "none",
-    borderRadius: Spacing.xxxSmall_4,
+    borderRadius: spacing.xxxSmall_4,
     cursor: "pointer",
     outline: "none",
     textDecoration: "none",
@@ -1355,7 +1352,7 @@ const sharedStyles = StyleSheet.create({
     cursor: "auto"
   },
   small: {
-    height: Spacing.xLarge_32
+    height: spacing.xLarge_32
   },
   text: {
     textAlign: "left",
@@ -1376,20 +1373,20 @@ const sharedStyles = StyleSheet.create({
   }
 });
 const styles$2 = {};
-const _generateStyles$1 = color => {
-  const buttonType = color;
+const _generateStyles$1 = localColor => {
+  const buttonType = localColor;
   if (styles$2[buttonType]) {
     return styles$2[buttonType];
   }
   const {
     offBlack32
-  } = Color;
-  const activeColor = mix(offBlack32, color);
+  } = color;
+  const activeColor = color.activeBlue;
   let newStyles = {};
   newStyles = {
     default: {
       background: "none",
-      color: color
+      color: localColor
     },
     focus: {
       ":after": {