@khanacademy/wonder-blocks-button 7.0.4 → 7.0.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-button
 
+## 7.0.5
+
+### Patch Changes
+
+-   0cffa81f: Use pseudo-classes for styling states (:hover, :focus-visible). Keep some clickable states for programmatic focus and preserve active/pressed overrides.
+-   Updated dependencies [7516b239]
+    -   @khanacademy/wonder-blocks-core@11.1.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.5
+    -   @khanacademy/wonder-blocks-icon@5.0.5
+    -   @khanacademy/wonder-blocks-progress-spinner@3.0.5
+    -   @khanacademy/wonder-blocks-typography@3.0.5
+
 ## 7.0.4
 
 ### Patch Changes

package/dist/es/index.js

@@ -12,6 +12,7 @@ import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, u
 import * as tokens from '@khanacademy/wonder-blocks-tokens';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 
+const textUnderlineOffset = tokens.spacing.xxxSmall_4;
 const theme$1 = {
   color: {
     bg: {
@@ -27,8 +28,7 @@ const theme$1 = {
       },
       primary: {
         default: tokens.color.white,
-        disabled: tokens.color.offBlack32,
-        inverse: tokens.color.darkBlue
+        disabled: tokens.color.offBlack32
       },
       secondary: {
         default: "none",
@@ -39,9 +39,6 @@ const theme$1 = {
           critical: tokens.color.fadedRed
         }
       },
-      tertiary: {
-        hover: tokens.color.white
-      },
       icon: {
         secondaryHover: "transparent"
       }
@@ -80,9 +77,11 @@ const theme$1 = {
       focused: tokens.border.width.thin,
       disabled: tokens.border.width.thin
     },
+    offset: {
+      primary: tokens.spacing.xxxxSmall_2
+    },
     radius: {
       default: tokens.border.radius.medium_4,
-      tertiary: tokens.border.radius.xSmall_2,
       small: tokens.border.radius.medium_4,
       large: tokens.border.radius.large_6,
       icon: tokens.border.radius.full
@@ -90,10 +89,13 @@ const theme$1 = {
   },
   size: {
     height: {
-      tertiaryHover: tokens.spacing.xxxxSmall_2,
       small: tokens.spacing.xLarge_32,
       medium: 40,
       large: 56
+    },
+    underline: {
+      hover: tokens.spacing.xxxxSmall_2,
+      active: 1
     }
   },
   margin: {
@@ -113,10 +115,15 @@ const theme$1 = {
       large: 18
     },
     lineHeight: {
-      large: tokens.font.lineHeight.medium
+      small: tokens.font.lineHeight.small + textUnderlineOffset,
+      default: tokens.font.lineHeight.medium + textUnderlineOffset,
+      large: tokens.font.lineHeight.medium + 2 + textUnderlineOffset
     },
     weight: {
       default: tokens.font.weight.bold
+    },
+    offset: {
+      default: textUnderlineOffset
     }
   }
 };
@@ -245,7 +252,7 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
       restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
     const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
     const disabled = spinner || disabledProp;
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, 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 defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
     const commonProps = _extends({
       "data-testid": testId,
       id: id,
@@ -254,7 +261,7 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
     }, restProps);
     const Label = size === "small" ? LabelSmall : LabelLarge;
     const label = React.createElement(Label, {
-      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
+      style: [sharedStyles.text, size === "small" && sharedStyles.smallText, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
       testId: testId ? `${testId}-inner-label` : undefined
     }, children);
     const sizeMapping = {
@@ -341,10 +348,14 @@ const themedSharedStyles = theme => ({
     fontWeight: theme.font.weight.default,
     whiteSpace: "nowrap",
     overflow: "hidden",
+    lineHeight: `${theme.font.lineHeight.default}px`,
     textOverflow: "ellipsis",
     display: "inline-block",
     pointerEvents: "none"
   },
+  smallText: {
+    lineHeight: `${theme.font.lineHeight.small}px`
+  },
   largeText: {
     fontSize: theme.font.size.large,
     lineHeight: `${theme.font.lineHeight.large}px`
@@ -397,34 +408,55 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
   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;
+    const focusStyling = {
+      outlineColor: light ? theme.color.bg.primary.default : color,
+      outlineOffset: theme.border.offset.primary,
+      outlineStyle: "solid",
+      outlineWidth: theme.border.width.focused
+    };
+    const activePressedStyling = {
+      background: light ? fadedColor : activeColor,
+      outlineColor: light ? fadedColor : activeColor
+    };
     newStyles = {
       default: {
         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 ${boxShadowInnerColor}, 0 0 0 3px ${light ? theme.color.bg.primary.default : color}`
-      },
-      active: {
-        boxShadow: `0 0 0 1px ${boxShadowInnerColor}, 0 0 0 3px ${light ? fadedColor : activeColor}`,
-        background: light ? fadedColor : activeColor,
-        color: light ? activeColor : fadedColor
+        paddingRight: padding,
+        [":hover:not([aria-disabled=true])"]: focusStyling,
+        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
+        [":active:not([aria-disabled=true])"]: activePressedStyling
       },
+      focused: focusStyling,
+      pressed: activePressedStyling,
       disabled: {
         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 ? theme.color.bg.primary.disabled : theme.color.bg.primary.default}, 0 0 0 3px ${light ? fadedColor : theme.color.bg.primary.disabled}`
-        }
+        ":focus-visible": _extends({}, focusStyling, {
+          outlineColor: light ? fadedColor : theme.color.bg.primary.disabled
+        })
       }
     };
   } else if (kind === "secondary") {
     const secondaryBorderColor = buttonColor === "destructive" ? theme.color.border.secondary.critical : theme.color.border.secondary.action;
     const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
+    const focusStyling = {
+      background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.focus,
+      borderColor: "transparent",
+      outlineColor: light ? theme.color.border.primary.inverse : color,
+      outlineStyle: "solid",
+      outlineWidth: theme.border.width.focused
+    };
+    const activePressedStyling = {
+      background: light ? activeColor : secondaryActiveColor,
+      color: light ? fadedColor : activeColor,
+      borderColor: "transparent",
+      outlineColor: light ? fadedColor : activeColor,
+      outlineStyle: "solid",
+      outlineWidth: theme.border.width.focused
+    };
     newStyles = {
       default: {
         background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.default,
@@ -433,28 +465,18 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         borderStyle: "solid",
         borderWidth: theme.border.width.secondary,
         paddingLeft: padding,
-        paddingRight: padding
-      },
-      focus: {
-        background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.focus,
-        borderColor: "transparent",
-        outlineColor: light ? theme.color.border.primary.inverse : color,
-        outlineStyle: "solid",
-        outlineWidth: theme.border.width.focused
-      },
-      active: {
-        background: light ? activeColor : secondaryActiveColor,
-        color: light ? fadedColor : activeColor,
-        borderColor: "transparent",
-        outlineColor: light ? fadedColor : activeColor,
-        outlineStyle: "solid",
-        outlineWidth: theme.border.width.focused
+        paddingRight: padding,
+        [":hover:not([aria-disabled=true])"]: focusStyling,
+        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
+        [":active:not([aria-disabled=true])"]: activePressedStyling
       },
+      focused: focusStyling,
+      pressed: activePressedStyling,
       disabled: {
         color: light ? theme.color.text.secondary.inverse : theme.color.text.disabled,
         outlineColor: light ? fadedColor : theme.color.border.disabled,
         cursor: "default",
-        ":focus": {
+        ":focus-visible": {
           outlineColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
           outlineStyle: "solid",
           outlineWidth: theme.border.width.disabled
@@ -462,38 +484,34 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
       }
     };
   } else if (kind === "tertiary") {
+    const focusStyling = {
+      outlineStyle: "solid",
+      outlineColor: light ? theme.color.border.tertiary.inverse : color,
+      outlineWidth: theme.border.width.focused,
+      borderRadius: theme.border.radius.default
+    };
+    const activePressedStyling = {
+      color: light ? fadedColor : activeColor,
+      textDecoration: "underline",
+      textDecorationThickness: theme.size.underline.active,
+      textUnderlineOffset: theme.font.offset.default
+    };
     newStyles = {
       default: {
         background: "none",
         color: light ? theme.color.text.inverse : color,
         paddingLeft: 0,
-        paddingRight: 0
-      },
-      hover: {
-        ":after": {
-          content: "''",
-          position: "absolute",
-          height: theme.size.height.tertiaryHover,
-          width: "100%",
-          right: 0,
-          bottom: 0,
-          background: light ? theme.color.bg.tertiary.hover : color,
-          borderRadius: theme.border.radius.tertiary
-        }
-      },
-      focus: {
-        outlineStyle: "solid",
-        outlineColor: light ? theme.color.border.tertiary.inverse : color,
-        outlineWidth: theme.border.width.focused,
-        borderRadius: theme.border.radius.default
-      },
-      active: {
-        color: light ? fadedColor : activeColor,
-        ":after": {
-          height: theme.size.height.tertiaryHover,
-          background: light ? fadedColor : activeColor
-        }
+        paddingRight: 0,
+        [":hover:not([aria-disabled=true])"]: {
+          textUnderlineOffset: theme.font.offset.default,
+          textDecoration: "underline",
+          textDecorationThickness: theme.size.underline.hover
+        },
+        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
+        [":active:not([aria-disabled=true])"]: activePressedStyling
       },
+      focused: focusStyling,
+      pressed: activePressedStyling,
       disabled: {
         color: light ? fadedColor : theme.color.text.disabled,
         cursor: "default"

package/dist/index.js

@@ -39,6 +39,7 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
 
+const textUnderlineOffset = tokens__namespace.spacing.xxxSmall_4;
 const theme$1 = {
   color: {
     bg: {
@@ -54,8 +55,7 @@ const theme$1 = {
       },
       primary: {
         default: tokens__namespace.color.white,
-        disabled: tokens__namespace.color.offBlack32,
-        inverse: tokens__namespace.color.darkBlue
+        disabled: tokens__namespace.color.offBlack32
       },
       secondary: {
         default: "none",
@@ -66,9 +66,6 @@ const theme$1 = {
           critical: tokens__namespace.color.fadedRed
         }
       },
-      tertiary: {
-        hover: tokens__namespace.color.white
-      },
       icon: {
         secondaryHover: "transparent"
       }
@@ -107,9 +104,11 @@ const theme$1 = {
       focused: tokens__namespace.border.width.thin,
       disabled: tokens__namespace.border.width.thin
     },
+    offset: {
+      primary: tokens__namespace.spacing.xxxxSmall_2
+    },
     radius: {
       default: tokens__namespace.border.radius.medium_4,
-      tertiary: tokens__namespace.border.radius.xSmall_2,
       small: tokens__namespace.border.radius.medium_4,
       large: tokens__namespace.border.radius.large_6,
       icon: tokens__namespace.border.radius.full
@@ -117,10 +116,13 @@ const theme$1 = {
   },
   size: {
     height: {
-      tertiaryHover: tokens__namespace.spacing.xxxxSmall_2,
       small: tokens__namespace.spacing.xLarge_32,
       medium: 40,
       large: 56
+    },
+    underline: {
+      hover: tokens__namespace.spacing.xxxxSmall_2,
+      active: 1
     }
   },
   margin: {
@@ -140,10 +142,15 @@ const theme$1 = {
       large: 18
     },
     lineHeight: {
-      large: tokens__namespace.font.lineHeight.medium
+      small: tokens__namespace.font.lineHeight.small + textUnderlineOffset,
+      default: tokens__namespace.font.lineHeight.medium + textUnderlineOffset,
+      large: tokens__namespace.font.lineHeight.medium + 2 + textUnderlineOffset
     },
     weight: {
       default: tokens__namespace.font.weight.bold
+    },
+    offset: {
+      default: textUnderlineOffset
     }
   }
 };
@@ -272,7 +279,7 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
       restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
     const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
     const disabled = spinner || disabledProp;
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, 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 defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
     const commonProps = _extends__default["default"]({
       "data-testid": testId,
       id: id,
@@ -281,7 +288,7 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
     }, restProps);
     const Label = size === "small" ? wonderBlocksTypography.LabelSmall : wonderBlocksTypography.LabelLarge;
     const label = React__namespace.createElement(Label, {
-      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
+      style: [sharedStyles.text, size === "small" && sharedStyles.smallText, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
       testId: testId ? `${testId}-inner-label` : undefined
     }, children);
     const sizeMapping = {
@@ -368,10 +375,14 @@ const themedSharedStyles = theme => ({
     fontWeight: theme.font.weight.default,
     whiteSpace: "nowrap",
     overflow: "hidden",
+    lineHeight: `${theme.font.lineHeight.default}px`,
     textOverflow: "ellipsis",
     display: "inline-block",
     pointerEvents: "none"
   },
+  smallText: {
+    lineHeight: `${theme.font.lineHeight.small}px`
+  },
   largeText: {
     fontSize: theme.font.size.large,
     lineHeight: `${theme.font.lineHeight.large}px`
@@ -424,34 +435,55 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
   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;
+    const focusStyling = {
+      outlineColor: light ? theme.color.bg.primary.default : color,
+      outlineOffset: theme.border.offset.primary,
+      outlineStyle: "solid",
+      outlineWidth: theme.border.width.focused
+    };
+    const activePressedStyling = {
+      background: light ? fadedColor : activeColor,
+      outlineColor: light ? fadedColor : activeColor
+    };
     newStyles = {
       default: {
         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 ${boxShadowInnerColor}, 0 0 0 3px ${light ? theme.color.bg.primary.default : color}`
-      },
-      active: {
-        boxShadow: `0 0 0 1px ${boxShadowInnerColor}, 0 0 0 3px ${light ? fadedColor : activeColor}`,
-        background: light ? fadedColor : activeColor,
-        color: light ? activeColor : fadedColor
+        paddingRight: padding,
+        [":hover:not([aria-disabled=true])"]: focusStyling,
+        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
+        [":active:not([aria-disabled=true])"]: activePressedStyling
       },
+      focused: focusStyling,
+      pressed: activePressedStyling,
       disabled: {
         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 ? theme.color.bg.primary.disabled : theme.color.bg.primary.default}, 0 0 0 3px ${light ? fadedColor : theme.color.bg.primary.disabled}`
-        }
+        ":focus-visible": _extends__default["default"]({}, focusStyling, {
+          outlineColor: light ? fadedColor : theme.color.bg.primary.disabled
+        })
       }
     };
   } else if (kind === "secondary") {
     const secondaryBorderColor = buttonColor === "destructive" ? theme.color.border.secondary.critical : theme.color.border.secondary.action;
     const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
+    const focusStyling = {
+      background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.focus,
+      borderColor: "transparent",
+      outlineColor: light ? theme.color.border.primary.inverse : color,
+      outlineStyle: "solid",
+      outlineWidth: theme.border.width.focused
+    };
+    const activePressedStyling = {
+      background: light ? activeColor : secondaryActiveColor,
+      color: light ? fadedColor : activeColor,
+      borderColor: "transparent",
+      outlineColor: light ? fadedColor : activeColor,
+      outlineStyle: "solid",
+      outlineWidth: theme.border.width.focused
+    };
     newStyles = {
       default: {
         background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.default,
@@ -460,28 +492,18 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         borderStyle: "solid",
         borderWidth: theme.border.width.secondary,
         paddingLeft: padding,
-        paddingRight: padding
-      },
-      focus: {
-        background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.focus,
-        borderColor: "transparent",
-        outlineColor: light ? theme.color.border.primary.inverse : color,
-        outlineStyle: "solid",
-        outlineWidth: theme.border.width.focused
-      },
-      active: {
-        background: light ? activeColor : secondaryActiveColor,
-        color: light ? fadedColor : activeColor,
-        borderColor: "transparent",
-        outlineColor: light ? fadedColor : activeColor,
-        outlineStyle: "solid",
-        outlineWidth: theme.border.width.focused
+        paddingRight: padding,
+        [":hover:not([aria-disabled=true])"]: focusStyling,
+        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
+        [":active:not([aria-disabled=true])"]: activePressedStyling
       },
+      focused: focusStyling,
+      pressed: activePressedStyling,
       disabled: {
         color: light ? theme.color.text.secondary.inverse : theme.color.text.disabled,
         outlineColor: light ? fadedColor : theme.color.border.disabled,
         cursor: "default",
-        ":focus": {
+        ":focus-visible": {
           outlineColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
           outlineStyle: "solid",
           outlineWidth: theme.border.width.disabled
@@ -489,38 +511,34 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
       }
     };
   } else if (kind === "tertiary") {
+    const focusStyling = {
+      outlineStyle: "solid",
+      outlineColor: light ? theme.color.border.tertiary.inverse : color,
+      outlineWidth: theme.border.width.focused,
+      borderRadius: theme.border.radius.default
+    };
+    const activePressedStyling = {
+      color: light ? fadedColor : activeColor,
+      textDecoration: "underline",
+      textDecorationThickness: theme.size.underline.active,
+      textUnderlineOffset: theme.font.offset.default
+    };
     newStyles = {
       default: {
         background: "none",
         color: light ? theme.color.text.inverse : color,
         paddingLeft: 0,
-        paddingRight: 0
-      },
-      hover: {
-        ":after": {
-          content: "''",
-          position: "absolute",
-          height: theme.size.height.tertiaryHover,
-          width: "100%",
-          right: 0,
-          bottom: 0,
-          background: light ? theme.color.bg.tertiary.hover : color,
-          borderRadius: theme.border.radius.tertiary
-        }
-      },
-      focus: {
-        outlineStyle: "solid",
-        outlineColor: light ? theme.color.border.tertiary.inverse : color,
-        outlineWidth: theme.border.width.focused,
-        borderRadius: theme.border.radius.default
-      },
-      active: {
-        color: light ? fadedColor : activeColor,
-        ":after": {
-          height: theme.size.height.tertiaryHover,
-          background: light ? fadedColor : activeColor
-        }
+        paddingRight: 0,
+        [":hover:not([aria-disabled=true])"]: {
+          textUnderlineOffset: theme.font.offset.default,
+          textDecoration: "underline",
+          textDecorationThickness: theme.size.underline.hover
+        },
+        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
+        [":active:not([aria-disabled=true])"]: activePressedStyling
       },
+      focused: focusStyling,
+      pressed: activePressedStyling,
       disabled: {
         color: light ? fadedColor : theme.color.text.disabled,
         cursor: "default"

package/dist/themes/default.d.ts

@@ -20,7 +20,6 @@ declare const theme: {
             primary: {
                 default: string;
                 disabled: string;
-                inverse: string;
             };
             secondary: {
                 default: string;
@@ -31,9 +30,6 @@ declare const theme: {
                     critical: string;
                 };
             };
-            tertiary: {
-                hover: string;
-            };
             /**
              * Icons
              */
@@ -90,9 +86,11 @@ declare const theme: {
             focused: number;
             disabled: number;
         };
+        offset: {
+            primary: 2;
+        };
         radius: {
             default: number;
-            tertiary: number;
             small: number;
             large: number;
             /**
@@ -103,11 +101,14 @@ declare const theme: {
     };
     size: {
         height: {
-            tertiaryHover: 2;
             small: 32;
             medium: number;
             large: number;
         };
+        underline: {
+            hover: 2;
+            active: number;
+        };
     };
     margin: {
         icon: {
@@ -126,11 +127,16 @@ declare const theme: {
             large: number;
         };
         lineHeight: {
+            small: number;
+            default: number;
             large: number;
         };
         weight: {
             default: number;
         };
+        offset: {
+            default: 4;
+        };
     };
 };
 export default theme;

package/dist/themes/khanmigo.d.ts

@@ -17,7 +17,6 @@ declare const theme: {
             primary: {
                 default: string;
                 disabled: string;
-                inverse: string;
             };
             secondary: {
                 default: string;
@@ -28,9 +27,6 @@ declare const theme: {
                     critical: string;
                 };
             };
-            tertiary: {
-                hover: string;
-            };
             icon: {
                 secondaryHover: string;
             };
@@ -69,9 +65,11 @@ declare const theme: {
             focused: number;
             disabled: number;
         };
+        offset: {
+            primary: 2;
+        };
         radius: {
             default: number;
-            tertiary: number;
             small: number;
             large: number;
             icon: string;
@@ -79,11 +77,14 @@ declare const theme: {
     };
     size: {
         height: {
-            tertiaryHover: 2;
             small: 32;
             medium: number;
             large: number;
         };
+        underline: {
+            hover: 2;
+            active: number;
+        };
     };
     margin: {
         icon: {
@@ -102,11 +103,16 @@ declare const theme: {
             large: number;
         };
         lineHeight: {
+            small: number;
+            default: number;
             large: number;
         };
         weight: {
             default: number;
         };
+        offset: {
+            default: 4;
+        };
     };
 };
 export default theme;

package/dist/themes/themed-button.d.ts

@@ -24,7 +24,6 @@ export declare const ButtonThemeContext: React.Context<{
             primary: {
                 default: string;
                 disabled: string;
-                inverse: string;
             };
             secondary: {
                 default: string;
@@ -35,9 +34,6 @@ export declare const ButtonThemeContext: React.Context<{
                     critical: string;
                 };
             };
-            tertiary: {
-                hover: string;
-            };
             icon: {
                 secondaryHover: string;
             };
@@ -76,9 +72,11 @@ export declare const ButtonThemeContext: React.Context<{
             focused: number;
             disabled: number;
         };
+        offset: {
+            primary: 2;
+        };
         radius: {
             default: number;
-            tertiary: number;
             small: number;
             large: number;
             icon: string;
@@ -86,11 +84,14 @@ export declare const ButtonThemeContext: React.Context<{
     };
     size: {
         height: {
-            tertiaryHover: 2;
             small: 32;
             medium: number;
             large: number;
         };
+        underline: {
+            hover: 2;
+            active: number;
+        };
     };
     margin: {
         icon: {
@@ -109,11 +110,16 @@ export declare const ButtonThemeContext: React.Context<{
             large: number;
         };
         lineHeight: {
+            small: number;
+            default: number;
             large: number;
         };
         weight: {
             default: number;
         };
+        offset: {
+            default: 4;
+        };
     };
 }>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,13 +17,13 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^5.0.4",
-    "@khanacademy/wonder-blocks-core": "^11.0.1",
-    "@khanacademy/wonder-blocks-icon": "^5.0.4",
-    "@khanacademy/wonder-blocks-progress-spinner": "^3.0.4",
+    "@khanacademy/wonder-blocks-clickable": "^5.0.5",
+    "@khanacademy/wonder-blocks-core": "^11.1.0",
+    "@khanacademy/wonder-blocks-icon": "^5.0.5",
+    "@khanacademy/wonder-blocks-progress-spinner": "^3.0.5",
     "@khanacademy/wonder-blocks-theming": "^3.0.1",
     "@khanacademy/wonder-blocks-tokens": "^3.0.1",
-    "@khanacademy/wonder-blocks-typography": "^3.0.4"
+    "@khanacademy/wonder-blocks-typography": "^3.0.5"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",