@khanacademy/wonder-blocks-button 4.1.8 → 4.2.0

package/dist/index.js

@@ -6,11 +6,10 @@ var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var aphrodite = require('aphrodite');
 var reactRouterDom = require('react-router-dom');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
 var Icon = require('@khanacademy/wonder-blocks-icon');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,9 +32,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -65,11 +62,151 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+const theme$1 = {
+  color: {
+    bg: {
+      action: {
+        default: wonderBlocksTheming.tokens.color.blue,
+        active: wonderBlocksTheming.tokens.color.activeBlue,
+        inverse: wonderBlocksTheming.tokens.color.fadedBlue
+      },
+      critical: {
+        default: wonderBlocksTheming.tokens.color.red,
+        active: wonderBlocksTheming.tokens.color.activeRed,
+        inverse: wonderBlocksTheming.tokens.color.fadedRed
+      },
+      primary: {
+        default: wonderBlocksTheming.tokens.color.white,
+        disabled: wonderBlocksTheming.tokens.color.offBlack32,
+        inverse: wonderBlocksTheming.tokens.color.darkBlue
+      },
+      secondary: {
+        default: "none",
+        inverse: "none",
+        focus: wonderBlocksTheming.tokens.color.white,
+        active: wonderBlocksTheming.tokens.color.fadedBlue
+      },
+      tertiary: {
+        hover: wonderBlocksTheming.tokens.color.white
+      }
+    },
+    text: {
+      disabled: wonderBlocksTheming.tokens.color.offBlack32,
+      inverse: wonderBlocksTheming.tokens.color.white,
+      primary: {
+        disabled: wonderBlocksTheming.tokens.color.white64
+      },
+      secondary: {
+        inverse: wonderBlocksTheming.tokens.color.white50
+      }
+    },
+    border: {
+      disabled: wonderBlocksTheming.tokens.color.offBlack32,
+      primary: {
+        inverse: wonderBlocksTheming.tokens.color.white
+      },
+      secondary: {
+        action: wonderBlocksTheming.tokens.color.offBlack50,
+        critical: wonderBlocksTheming.tokens.color.offBlack50,
+        inverse: wonderBlocksTheming.tokens.color.white50
+      },
+      tertiary: {
+        inverse: wonderBlocksTheming.tokens.color.white
+      }
+    }
+  },
+  border: {
+    width: {
+      secondary: wonderBlocksTheming.tokens.border.width.hairline,
+      focused: wonderBlocksTheming.tokens.border.width.thin,
+      disabled: wonderBlocksTheming.tokens.border.width.thin
+    },
+    radius: {
+      default: wonderBlocksTheming.tokens.border.radius.small_3,
+      tertiary: wonderBlocksTheming.tokens.border.radius.xSmall_2,
+      small: wonderBlocksTheming.tokens.border.radius.small_3,
+      large: wonderBlocksTheming.tokens.border.radius.large_6
+    }
+  },
+  size: {
+    width: {
+      medium: wonderBlocksTheming.tokens.spacing.large_24,
+      large: wonderBlocksTheming.tokens.spacing.xLarge_32
+    },
+    height: {
+      tertiaryHover: wonderBlocksTheming.tokens.spacing.xxxxSmall_2,
+      small: wonderBlocksTheming.tokens.spacing.xLarge_32,
+      medium: 40,
+      large: 56
+    }
+  },
+  padding: {
+    small: wonderBlocksTheming.tokens.spacing.xSmall_8,
+    medium: wonderBlocksTheming.tokens.spacing.small_12,
+    large: wonderBlocksTheming.tokens.spacing.medium_16,
+    xLarge: wonderBlocksTheming.tokens.spacing.xLarge_32
+  },
+  font: {
+    size: {
+      large: 18
+    },
+    lineHeight: {
+      large: wonderBlocksTheming.tokens.font.lineHeight.medium
+    }
+  }
+};
+
+const theme = wonderBlocksTheming.mergeTheme(theme$1, {
+  color: {
+    bg: {
+      secondary: {
+        default: wonderBlocksTheming.tokens.color.offWhite,
+        active: wonderBlocksTheming.tokens.color.fadedBlue8,
+        focus: wonderBlocksTheming.tokens.color.offWhite
+      }
+    },
+    border: {
+      secondary: {
+        action: wonderBlocksTheming.tokens.color.fadedBlue,
+        critical: wonderBlocksTheming.tokens.color.fadedRed
+      }
+    }
+  },
+  border: {
+    radius: {
+      default: wonderBlocksTheming.tokens.border.radius.xLarge_12,
+      small: wonderBlocksTheming.tokens.border.radius.large_6,
+      large: wonderBlocksTheming.tokens.border.radius.xLarge_12
+    },
+    width: {
+      focused: wonderBlocksTheming.tokens.border.width.hairline
+    }
+  }
+});
+
+const themes = {
+  default: theme$1,
+  khanmigo: theme
+};
+const ButtonThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
+function ThemedButton(props) {
+  const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
+  const theme = themes[currentTheme] || theme$1;
+  return React__namespace.createElement(ButtonThemeContext.Provider, {
+    value: theme
+  }, props.children);
+}
+
 const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "icon", "id", "waiting"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
 const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
+  const {
+    theme,
+    themeName
+  } = wonderBlocksTheming.useScopedTheme(ButtonThemeContext);
+  const sharedStyles = wonderBlocksTheming.useStyles(themedSharedStyles, theme);
   const renderInner = router => {
     const {
         children,
@@ -91,9 +228,8 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
         id
       } = props,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-    const buttonColor = color === "destructive" ? Color.SemanticColor.controlDestructive : Color.SemanticColor.controlDefault;
-    const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
-    const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
+    const iconWidth = icon ? size === "small" ? theme.size.width.medium : theme.size.width.large : 0;
+    const buttonStyles = _generateStyles(color, kind, light, iconWidth, size, theme, themeName);
     const disabled = spinner || disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && !pressed && focused && [buttonStyles.focus, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
     const commonProps = _extends({
@@ -145,19 +281,19 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
   };
   return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderInner(router));
 });
-const sharedStyles = aphrodite.StyleSheet.create({
+const themedSharedStyles = theme => ({
   shared: {
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    height: 40,
+    height: theme.size.height.medium,
     paddingTop: 0,
     paddingBottom: 0,
-    paddingLeft: 16,
-    paddingRight: 16,
+    paddingLeft: theme.padding.large,
+    paddingRight: theme.padding.large,
     border: "none",
-    borderRadius: 4,
+    borderRadius: theme.border.radius.default,
     cursor: "pointer",
     outline: "none",
     textDecoration: "none",
@@ -169,17 +305,18 @@ const sharedStyles = aphrodite.StyleSheet.create({
     }
   },
   withIcon: {
-    paddingLeft: 12
+    paddingLeft: theme.padding.medium
   },
   disabled: {
     cursor: "auto"
   },
   small: {
-    height: 32
+    borderRadius: theme.border.radius.small,
+    height: theme.size.height.small
   },
   large: {
-    borderRadius: Spacing__default["default"].xxSmall_6,
-    height: 56
+    borderRadius: theme.border.radius.large,
+    height: theme.size.height.large
   },
   text: {
     alignItems: "center",
@@ -191,8 +328,8 @@ const sharedStyles = aphrodite.StyleSheet.create({
     pointerEvents: "none"
   },
   largeText: {
-    fontSize: 18,
-    lineHeight: "20px"
+    fontSize: theme.font.size.large,
+    lineHeight: theme.font.lineHeight.large
   },
   textWithFocus: {
     position: "relative"
@@ -204,85 +341,81 @@ const sharedStyles = aphrodite.StyleSheet.create({
     position: "absolute"
   },
   icon: {
-    paddingRight: Spacing__default["default"].xSmall_8
+    paddingRight: theme.padding.small
   }
 });
 const styles = {};
-const _generateStyles = (color, kind, light, iconWidth, size) => {
-  const buttonType = color + kind + light.toString() + iconWidth.toString() + size;
+const _generateStyles = (buttonColor = "default", kind, light, iconWidth, size, theme, themeName) => {
+  const color = buttonColor === "destructive" ? theme.color.bg.critical.default : theme.color.bg.action.default;
+  const buttonType = `${color}-${kind}-${light}-${iconWidth}-${size}-${themeName}`;
   if (styles[buttonType]) {
     return styles[buttonType];
   }
-  const {
-    white,
-    white50,
-    white64,
-    offBlack32,
-    offBlack50,
-    darkBlue
-  } = Color__default["default"];
-  const fadedColor = Color.mix(Color.fade(color, 0.32), white);
-  const activeColor = Color.mix(offBlack32, color);
-  const padding = size === "large" ? Spacing__default["default"].xLarge_32 : Spacing__default["default"].medium_16;
+  const fadedColor = buttonColor === "destructive" ? theme.color.bg.critical.inverse : theme.color.bg.action.inverse;
+  const activeColor = buttonColor === "destructive" ? theme.color.bg.critical.active : theme.color.bg.action.active;
+  const padding = size === "large" ? theme.padding.xLarge : theme.padding.large;
   let newStyles = {};
   if (kind === "primary") {
+    const boxShadowInnerColor = light ? theme.color.bg.primary.inverse : theme.color.bg.primary.default;
     newStyles = {
       default: {
-        background: light ? white : color,
-        color: light ? color : white,
+        background: light ? theme.color.bg.primary.default : color,
+        color: light ? color : theme.color.text.inverse,
         paddingLeft: padding,
         paddingRight: padding
       },
       focus: {
-        boxShadow: `0 0 0 1px ${light ? darkBlue : white}, 0 0 0 3px ${light ? white : color}`
+        boxShadow: `0 0 0 1px ${boxShadowInnerColor}, 0 0 0 3px ${light ? theme.color.bg.primary.default : color}`
       },
       active: {
-        boxShadow: `0 0 0 1px ${light ? darkBlue : white}, 0 0 0 3px ${light ? fadedColor : activeColor}`,
+        boxShadow: `0 0 0 1px ${boxShadowInnerColor}, 0 0 0 3px ${light ? fadedColor : activeColor}`,
         background: light ? fadedColor : activeColor,
         color: light ? activeColor : fadedColor
       },
       disabled: {
-        background: light ? fadedColor : offBlack32,
-        color: light ? color : white64,
+        background: light ? fadedColor : theme.color.bg.primary.disabled,
+        color: light ? color : theme.color.text.primary.disabled,
         cursor: "default",
         ":focus": {
-          boxShadow: `0 0 0 1px ${light ? offBlack32 : white}, 0 0 0 3px ${light ? fadedColor : offBlack32}`
+          boxShadow: `0 0 0 1px ${light ? theme.color.bg.primary.disabled : theme.color.bg.primary.default}, 0 0 0 3px ${light ? fadedColor : theme.color.bg.primary.disabled}`
         }
       }
     };
   } else if (kind === "secondary") {
+    const horizontalPadding = padding - (theme.border.width.focused - 1);
+    const secondaryBorderColor = buttonColor === "destructive" ? theme.color.border.secondary.critical : theme.color.border.secondary.action;
     newStyles = {
       default: {
-        background: "none",
-        color: light ? white : color,
-        borderColor: light ? white50 : offBlack50,
+        background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.default,
+        color: light ? theme.color.text.inverse : color,
+        borderColor: light ? theme.color.border.secondary.inverse : secondaryBorderColor,
         borderStyle: "solid",
-        borderWidth: 1,
+        borderWidth: theme.border.width.secondary,
         paddingLeft: padding,
         paddingRight: padding
       },
       focus: {
-        background: light ? "transparent" : white,
-        borderColor: light ? white : color,
-        borderWidth: 2,
-        paddingLeft: padding - 1,
-        paddingRight: padding - 1
+        background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.focus,
+        borderColor: light ? theme.color.border.primary.inverse : color,
+        borderWidth: theme.border.width.focused,
+        paddingLeft: horizontalPadding,
+        paddingRight: horizontalPadding
       },
       active: {
-        background: light ? activeColor : fadedColor,
+        background: light ? activeColor : theme.color.bg.secondary.active,
         color: light ? fadedColor : activeColor,
         borderColor: light ? fadedColor : activeColor,
-        borderWidth: 2,
-        paddingLeft: padding - 1,
-        paddingRight: padding - 1
+        borderWidth: theme.border.width.focused,
+        paddingLeft: horizontalPadding,
+        paddingRight: horizontalPadding
       },
       disabled: {
-        color: light ? white50 : offBlack32,
-        borderColor: light ? fadedColor : offBlack32,
+        color: light ? theme.color.text.secondary.inverse : theme.color.text.disabled,
+        borderColor: light ? fadedColor : theme.color.border.disabled,
         cursor: "default",
         ":focus": {
-          borderColor: light ? white50 : offBlack32,
-          borderWidth: 2,
+          borderColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
+          borderWidth: theme.border.width.disabled,
           paddingLeft: padding - 1,
           paddingRight: padding - 1
         }
@@ -292,7 +425,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
     newStyles = {
       default: {
         background: "none",
-        color: light ? white : color,
+        color: light ? theme.color.text.inverse : color,
         paddingLeft: 0,
         paddingRight: 0
       },
@@ -300,24 +433,24 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         ":after": {
           content: "''",
           position: "absolute",
-          height: 2,
+          height: theme.size.height.tertiaryHover,
           width: "100%",
           right: 0,
           bottom: 0,
-          background: light ? white : color,
-          borderRadius: 2
+          background: light ? theme.color.bg.tertiary.hover : color,
+          borderRadius: theme.border.radius.tertiary
         }
       },
       focus: {
         ":after": {
           content: "''",
           position: "absolute",
-          width: `calc(100% + ${Spacing__default["default"].xxxSmall_4}px)`,
-          height: `calc(100% - ${Spacing__default["default"].xxxSmall_4}px)`,
+          width: `calc(100% + ${theme.border.width.focused * 2}px)`,
+          height: `calc(100% - ${theme.border.width.focused * 2}px)`,
           borderStyle: "solid",
-          borderColor: light ? white : color,
-          borderWidth: Spacing__default["default"].xxxxSmall_2,
-          borderRadius: Spacing__default["default"].xxxSmall_4
+          borderColor: light ? theme.color.border.tertiary.inverse : color,
+          borderWidth: theme.border.width.focused,
+          borderRadius: theme.border.radius.default
         }
       },
       active: {
@@ -328,12 +461,12 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         }
       },
       disabled: {
-        color: light ? fadedColor : offBlack32,
+        color: light ? fadedColor : theme.color.text.disabled,
         cursor: "default"
       },
       disabledFocus: {
         ":after": {
-          borderColor: light ? white50 : offBlack32
+          borderColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
         }
       }
     };
@@ -407,7 +540,7 @@ const Button = React__namespace.forwardRef(function Button(props, ref) {
       }, renderProp);
     }
   };
-  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+  return React__namespace.createElement(ThemedButton, null, React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router)));
 });
 
 module.exports = Button;

package/dist/themes/default.d.ts

@@ -0,0 +1,112 @@
+declare const theme: {
+    color: {
+        bg: {
+            /**
+             * Color
+             */
+            action: {
+                default: string;
+                active: string;
+                inverse: string;
+            };
+            critical: {
+                default: string;
+                active: string;
+                inverse: string;
+            };
+            /**
+             * Kind
+             */
+            primary: {
+                default: string;
+                disabled: string;
+                inverse: string;
+            };
+            secondary: {
+                default: string;
+                inverse: string;
+                focus: string;
+                active: string;
+            };
+            tertiary: {
+                hover: string;
+            };
+        };
+        text: {
+            /**
+             * Default
+             */
+            disabled: string;
+            inverse: string;
+            /**
+             * Kind
+             */
+            primary: {
+                disabled: string;
+            };
+            secondary: {
+                inverse: string;
+            };
+        };
+        border: {
+            /**
+             * Default
+             */
+            disabled: string;
+            /**
+             * Kind
+             */
+            primary: {
+                inverse: string;
+            };
+            secondary: {
+                action: string;
+                critical: string;
+                inverse: string;
+            };
+            tertiary: {
+                inverse: string;
+            };
+        };
+    };
+    border: {
+        width: {
+            secondary: number;
+            focused: number;
+            disabled: number;
+        };
+        radius: {
+            default: number;
+            tertiary: number;
+            small: number;
+            large: number;
+        };
+    };
+    size: {
+        width: {
+            medium: 24;
+            large: 32;
+        };
+        height: {
+            tertiaryHover: 2;
+            small: 32;
+            medium: number;
+            large: number;
+        };
+    };
+    padding: {
+        small: 8;
+        medium: 12;
+        large: 16;
+        xLarge: 32;
+    };
+    font: {
+        size: {
+            large: number;
+        };
+        lineHeight: {
+            large: number;
+        };
+    };
+};
+export default theme;

package/dist/themes/khanmigo.d.ts

@@ -0,0 +1,97 @@
+/**
+ * The overrides for the Khanmigo theme.
+ */
+declare const theme: {
+    color: {
+        bg: {
+            action: {
+                default: string;
+                active: string;
+                inverse: string;
+            };
+            critical: {
+                default: string;
+                active: string;
+                inverse: string;
+            };
+            primary: {
+                default: string;
+                disabled: string;
+                inverse: string;
+            };
+            secondary: {
+                default: string;
+                inverse: string;
+                focus: string;
+                active: string;
+            };
+            tertiary: {
+                hover: string;
+            };
+        };
+        text: {
+            disabled: string;
+            inverse: string;
+            primary: {
+                disabled: string;
+            };
+            secondary: {
+                inverse: string;
+            };
+        };
+        border: {
+            disabled: string;
+            primary: {
+                inverse: string;
+            };
+            secondary: {
+                action: string;
+                critical: string;
+                inverse: string;
+            };
+            tertiary: {
+                inverse: string;
+            };
+        };
+    };
+    border: {
+        width: {
+            secondary: number;
+            focused: number;
+            disabled: number;
+        };
+        radius: {
+            default: number;
+            tertiary: number;
+            small: number;
+            large: number;
+        };
+    };
+    size: {
+        width: {
+            medium: 24;
+            large: 32;
+        };
+        height: {
+            tertiaryHover: 2;
+            small: 32;
+            medium: number;
+            large: number;
+        };
+    };
+    padding: {
+        small: 8;
+        medium: 12;
+        large: 16;
+        xLarge: 32;
+    };
+    font: {
+        size: {
+            large: number;
+        };
+        lineHeight: {
+            large: number;
+        };
+    };
+};
+export default theme;