@khanacademy/wonder-blocks-button 4.1.9 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-button
 
+## 4.2.0
+
+### Minor Changes
+
+-   5725703a: Add theming support to the Button component
+
 ## 4.1.9
 
 ### Patch Changes

package/dist/es/index.js

@@ -4,11 +4,10 @@ import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-block
 import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
 import { LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
-import Color, { SemanticColor, mix, fade } from '@khanacademy/wonder-blocks-color';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import Icon from '@khanacademy/wonder-blocks-icon';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { tokens, mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -38,11 +37,151 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+const theme$1 = {
+  color: {
+    bg: {
+      action: {
+        default: tokens.color.blue,
+        active: tokens.color.activeBlue,
+        inverse: tokens.color.fadedBlue
+      },
+      critical: {
+        default: tokens.color.red,
+        active: tokens.color.activeRed,
+        inverse: tokens.color.fadedRed
+      },
+      primary: {
+        default: tokens.color.white,
+        disabled: tokens.color.offBlack32,
+        inverse: tokens.color.darkBlue
+      },
+      secondary: {
+        default: "none",
+        inverse: "none",
+        focus: tokens.color.white,
+        active: tokens.color.fadedBlue
+      },
+      tertiary: {
+        hover: tokens.color.white
+      }
+    },
+    text: {
+      disabled: tokens.color.offBlack32,
+      inverse: tokens.color.white,
+      primary: {
+        disabled: tokens.color.white64
+      },
+      secondary: {
+        inverse: tokens.color.white50
+      }
+    },
+    border: {
+      disabled: tokens.color.offBlack32,
+      primary: {
+        inverse: tokens.color.white
+      },
+      secondary: {
+        action: tokens.color.offBlack50,
+        critical: tokens.color.offBlack50,
+        inverse: tokens.color.white50
+      },
+      tertiary: {
+        inverse: tokens.color.white
+      }
+    }
+  },
+  border: {
+    width: {
+      secondary: tokens.border.width.hairline,
+      focused: tokens.border.width.thin,
+      disabled: tokens.border.width.thin
+    },
+    radius: {
+      default: tokens.border.radius.small_3,
+      tertiary: tokens.border.radius.xSmall_2,
+      small: tokens.border.radius.small_3,
+      large: tokens.border.radius.large_6
+    }
+  },
+  size: {
+    width: {
+      medium: tokens.spacing.large_24,
+      large: tokens.spacing.xLarge_32
+    },
+    height: {
+      tertiaryHover: tokens.spacing.xxxxSmall_2,
+      small: tokens.spacing.xLarge_32,
+      medium: 40,
+      large: 56
+    }
+  },
+  padding: {
+    small: tokens.spacing.xSmall_8,
+    medium: tokens.spacing.small_12,
+    large: tokens.spacing.medium_16,
+    xLarge: tokens.spacing.xLarge_32
+  },
+  font: {
+    size: {
+      large: 18
+    },
+    lineHeight: {
+      large: tokens.font.lineHeight.medium
+    }
+  }
+};
+
+const theme = mergeTheme(theme$1, {
+  color: {
+    bg: {
+      secondary: {
+        default: tokens.color.offWhite,
+        active: tokens.color.fadedBlue8,
+        focus: tokens.color.offWhite
+      }
+    },
+    border: {
+      secondary: {
+        action: tokens.color.fadedBlue,
+        critical: tokens.color.fadedRed
+      }
+    }
+  },
+  border: {
+    radius: {
+      default: tokens.border.radius.xLarge_12,
+      small: tokens.border.radius.large_6,
+      large: tokens.border.radius.xLarge_12
+    },
+    width: {
+      focused: tokens.border.width.hairline
+    }
+  }
+});
+
+const themes = {
+  default: theme$1,
+  khanmigo: theme
+};
+const ButtonThemeContext = createThemeContext(theme$1);
+function ThemedButton(props) {
+  const currentTheme = React.useContext(ThemeSwitcherContext);
+  const theme = themes[currentTheme] || theme$1;
+  return React.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 = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
+  const {
+    theme,
+    themeName
+  } = useScopedTheme(ButtonThemeContext);
+  const sharedStyles = useStyles(themedSharedStyles, theme);
   const renderInner = router => {
     const {
         children,
@@ -64,9 +203,8 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
         id
       } = props,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-    const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : 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({
@@ -118,19 +256,19 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
   };
   return React.createElement(__RouterContext.Consumer, null, router => renderInner(router));
 });
-const sharedStyles = 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",
@@ -142,17 +280,18 @@ const sharedStyles = 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.xxSmall_6,
-    height: 56
+    borderRadius: theme.border.radius.large,
+    height: theme.size.height.large
   },
   text: {
     alignItems: "center",
@@ -164,8 +303,8 @@ const sharedStyles = StyleSheet.create({
     pointerEvents: "none"
   },
   largeText: {
-    fontSize: 18,
-    lineHeight: "20px"
+    fontSize: theme.font.size.large,
+    lineHeight: theme.font.lineHeight.large
   },
   textWithFocus: {
     position: "relative"
@@ -177,85 +316,81 @@ const sharedStyles = StyleSheet.create({
     position: "absolute"
   },
   icon: {
-    paddingRight: Spacing.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;
-  const fadedColor = mix(fade(color, 0.32), white);
-  const activeColor = mix(offBlack32, color);
-  const padding = size === "large" ? Spacing.xLarge_32 : Spacing.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
         }
@@ -265,7 +400,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
       },
@@ -273,24 +408,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.xxxSmall_4}px)`,
-          height: `calc(100% - ${Spacing.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.xxxxSmall_2,
-          borderRadius: Spacing.xxxSmall_4
+          borderColor: light ? theme.color.border.tertiary.inverse : color,
+          borderWidth: theme.border.width.focused,
+          borderRadius: theme.border.radius.default
         }
       },
       active: {
@@ -301,12 +436,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
         }
       }
     };
@@ -380,7 +515,7 @@ const Button = React.forwardRef(function Button(props, ref) {
       }, renderProp);
     }
   };
-  return React.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+  return React.createElement(ThemedButton, null, React.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router)));
 });
 
 export { Button as default };