@khanacademy/wonder-blocks-button 6.0.1 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-button
 
+## 6.2.0
+
+### Minor Changes
+
+-   a70a929b: Add `labelStyle` to override the styles of the internal label
+
+### Patch Changes
+
+-   Updated dependencies [7b24db93]
+    -   @khanacademy/wonder-blocks-clickable@4.0.10
+
+## 6.1.0
+
+### Minor Changes
+
+-   d73f6988: Add Khanmigo theming support to buttons with icons
+
 ## 6.0.1
 
 ### Patch Changes

package/dist/components/button-core.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
 import type { SharedProps } from "./button";
+import { ButtonThemeContract } from "../themes/themed-button";
 type Props = SharedProps & ChildrenProps & ClickableState;
 declare const ButtonCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
 export default ButtonCore;
+export declare const _generateStyles: (buttonColor: string | undefined, kind: "primary" | "secondary" | "tertiary", light: boolean, size: "large" | "medium" | "small", theme: ButtonThemeContract, themeName: string) => any;

package/dist/components/button.d.ts

@@ -100,6 +100,10 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
      * page reload.
      */
     skipClientNav?: boolean;
+    /**
+     * Optional custom styles for the inner label.
+     */
+    labelStyle?: StyleType;
     /**
      * Optional custom styles.
      */

package/dist/es/index.js

@@ -4,7 +4,7 @@ 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 { addStyle } from '@khanacademy/wonder-blocks-core';
+import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import { tokens, mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
@@ -66,6 +66,9 @@ const theme$1 = {
       },
       tertiary: {
         hover: tokens.color.white
+      },
+      icon: {
+        secondaryHover: "transparent"
       }
     },
     text: {
@@ -76,6 +79,9 @@ const theme$1 = {
       },
       secondary: {
         inverse: tokens.color.white50
+      },
+      icon: {
+        secondaryHover: tokens.color.blue
       }
     },
     border: {
@@ -103,7 +109,8 @@ const theme$1 = {
       default: tokens.border.radius.medium_4,
       tertiary: tokens.border.radius.xSmall_2,
       small: tokens.border.radius.medium_4,
-      large: tokens.border.radius.large_6
+      large: tokens.border.radius.large_6,
+      icon: tokens.border.radius.full
     }
   },
   size: {
@@ -114,8 +121,14 @@ const theme$1 = {
       large: 56
     }
   },
+  margin: {
+    icon: {
+      offset: -tokens.spacing.xxxxSmall_2
+    }
+  },
   padding: {
-    small: tokens.spacing.xSmall_8,
+    xsmall: tokens.spacing.xxxxSmall_2,
+    small: tokens.spacing.xxSmall_6,
     medium: tokens.spacing.small_12,
     large: tokens.spacing.medium_16,
     xLarge: tokens.spacing.xLarge_32
@@ -143,6 +156,9 @@ const theme = mergeTheme(theme$1, {
           critical: tokens.color.fadedRed8
         },
         focus: tokens.color.offWhite
+      },
+      icon: {
+        secondaryHover: tokens.color.fadedBlue16
       }
     },
     border: {
@@ -150,6 +166,11 @@ const theme = mergeTheme(theme$1, {
         action: tokens.color.fadedBlue,
         critical: tokens.color.fadedRed
       }
+    },
+    text: {
+      icon: {
+        secondaryHover: tokens.color.blue
+      }
     }
   },
   border: {
@@ -162,6 +183,11 @@ const theme = mergeTheme(theme$1, {
       focused: tokens.border.width.hairline
     }
   },
+  margin: {
+    icon: {
+      offset: -tokens.spacing.xSmall_8
+    }
+  },
   font: {
     weight: {
       default: tokens.font.weight.regular
@@ -209,7 +235,7 @@ function ButtonIcon({
   }
 }
 
-const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
@@ -229,6 +255,7 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
         hovered,
         href = undefined,
         kind = "primary",
+        labelStyle,
         light = false,
         pressed,
         size = "medium",
@@ -252,7 +279,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, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
+      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)],
       testId: testId ? `${testId}-inner-label` : undefined
     }, children);
     const sizeMapping = {
@@ -261,22 +288,26 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
       large: "medium"
     };
     const iconSize = size === "small" ? "small" : "medium";
-    const contents = React.createElement(React.Fragment, null, startIcon && React.createElement(ButtonIcon, {
+    const contents = React.createElement(React.Fragment, null, startIcon && React.createElement(View, {
+      style: sharedStyles.iconWrapper
+    }, React.createElement(ButtonIcon, {
       size: iconSize,
       icon: startIcon,
-      style: sharedStyles.startIcon,
+      style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
       testId: testId ? `${testId}-start-icon` : undefined
-    }), label, spinner && React.createElement(CircularSpinner, {
+    })), label, spinner && React.createElement(CircularSpinner, {
       style: sharedStyles.spinner,
       size: sizeMapping[size],
       light: kind === "primary",
       testId: `${testId || "button"}-spinner`
-    }), endIcon && React.createElement(ButtonIcon, {
+    }), endIcon && React.createElement(View, {
+      testId: testId ? `${testId}-end-icon-wrapper` : undefined,
+      style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && sharedStyles.iconWrapperSecondaryHovered]
+    }, React.createElement(ButtonIcon, {
       size: iconSize,
       icon: endIcon,
-      style: sharedStyles.endIcon,
       testId: testId ? `${testId}-end-icon` : undefined
-    }));
+    })));
     if (href && !disabled) {
       return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
         to: href,
@@ -319,9 +350,6 @@ const themedSharedStyles = theme => ({
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
   },
-  withIcon: {
-    paddingLeft: theme.padding.medium
-  },
   disabled: {
     cursor: "auto"
   },
@@ -344,7 +372,7 @@ const themedSharedStyles = theme => ({
   },
   largeText: {
     fontSize: theme.font.size.large,
-    lineHeight: theme.font.lineHeight.large
+    lineHeight: `${theme.font.lineHeight.large}px`
   },
   textWithFocus: {
     position: "relative"
@@ -356,10 +384,30 @@ const themedSharedStyles = theme => ({
     position: "absolute"
   },
   startIcon: {
-    marginInlineEnd: theme.padding.small
+    marginRight: theme.padding.small,
+    marginLeft: theme.margin.icon.offset
+  },
+  tertiaryStartIcon: {
+    marginLeft: 0
   },
   endIcon: {
-    marginInlineStart: theme.padding.small
+    marginLeft: theme.padding.small
+  },
+  iconWrapper: {
+    borderRadius: theme.border.radius.icon,
+    padding: theme.padding.xsmall,
+    minWidth: "auto"
+  },
+  iconWrapperSecondaryHovered: {
+    backgroundColor: theme.color.bg.icon.secondaryHover,
+    color: theme.color.text.icon.secondaryHover
+  },
+  endIconWrapper: {
+    marginLeft: theme.padding.small,
+    marginRight: theme.margin.icon.offset
+  },
+  endIconWrapperTertiary: {
+    marginRight: 0
   }
 });
 const styles = {};
@@ -400,43 +448,37 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
       }
     };
   } 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;
     const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
     newStyles = {
       default: {
         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: theme.border.width.secondary,
+        outlineColor: light ? theme.color.border.secondary.inverse : secondaryBorderColor,
+        outlineStyle: "solid",
+        outlineWidth: theme.border.width.secondary,
+        outlineOffset: 1,
         paddingLeft: padding,
         paddingRight: padding
       },
       focus: {
         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
+        outlineColor: light ? theme.color.border.primary.inverse : color,
+        outlineWidth: theme.border.width.focused
       },
       active: {
         background: light ? activeColor : secondaryActiveColor,
         color: light ? fadedColor : activeColor,
-        borderColor: light ? fadedColor : activeColor,
-        borderWidth: theme.border.width.focused,
-        paddingLeft: horizontalPadding,
-        paddingRight: horizontalPadding
+        outlineColor: light ? fadedColor : activeColor,
+        outlineWidth: theme.border.width.focused
       },
       disabled: {
         color: light ? theme.color.text.secondary.inverse : theme.color.text.disabled,
-        borderColor: light ? fadedColor : theme.color.border.disabled,
+        outlineColor: light ? fadedColor : theme.color.border.disabled,
         cursor: "default",
         ":focus": {
-          borderColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
-          borderWidth: theme.border.width.disabled,
-          paddingLeft: padding - 1,
-          paddingRight: padding - 1
+          outlineColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
+          outlineWidth: theme.border.width.disabled
         }
       }
     };
@@ -461,16 +503,10 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         }
       },
       focus: {
-        ":after": {
-          content: "''",
-          position: "absolute",
-          width: `calc(100% + ${theme.border.width.focused * 2}px)`,
-          height: `calc(100% - ${theme.border.width.focused * 2}px)`,
-          borderStyle: "solid",
-          borderColor: light ? theme.color.border.tertiary.inverse : color,
-          borderWidth: theme.border.width.focused,
-          borderRadius: theme.border.radius.default
-        }
+        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,
@@ -484,9 +520,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         cursor: "default"
       },
       disabledFocus: {
-        ":after": {
-          borderColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
-        }
+        outlineColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
       }
     };
   } else {

package/dist/index.js

@@ -88,6 +88,9 @@ const theme$1 = {
       },
       tertiary: {
         hover: wonderBlocksTheming.tokens.color.white
+      },
+      icon: {
+        secondaryHover: "transparent"
       }
     },
     text: {
@@ -98,6 +101,9 @@ const theme$1 = {
       },
       secondary: {
         inverse: wonderBlocksTheming.tokens.color.white50
+      },
+      icon: {
+        secondaryHover: wonderBlocksTheming.tokens.color.blue
       }
     },
     border: {
@@ -125,7 +131,8 @@ const theme$1 = {
       default: wonderBlocksTheming.tokens.border.radius.medium_4,
       tertiary: wonderBlocksTheming.tokens.border.radius.xSmall_2,
       small: wonderBlocksTheming.tokens.border.radius.medium_4,
-      large: wonderBlocksTheming.tokens.border.radius.large_6
+      large: wonderBlocksTheming.tokens.border.radius.large_6,
+      icon: wonderBlocksTheming.tokens.border.radius.full
     }
   },
   size: {
@@ -136,8 +143,14 @@ const theme$1 = {
       large: 56
     }
   },
+  margin: {
+    icon: {
+      offset: -wonderBlocksTheming.tokens.spacing.xxxxSmall_2
+    }
+  },
   padding: {
-    small: wonderBlocksTheming.tokens.spacing.xSmall_8,
+    xsmall: wonderBlocksTheming.tokens.spacing.xxxxSmall_2,
+    small: wonderBlocksTheming.tokens.spacing.xxSmall_6,
     medium: wonderBlocksTheming.tokens.spacing.small_12,
     large: wonderBlocksTheming.tokens.spacing.medium_16,
     xLarge: wonderBlocksTheming.tokens.spacing.xLarge_32
@@ -165,6 +178,9 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
           critical: wonderBlocksTheming.tokens.color.fadedRed8
         },
         focus: wonderBlocksTheming.tokens.color.offWhite
+      },
+      icon: {
+        secondaryHover: wonderBlocksTheming.tokens.color.fadedBlue16
       }
     },
     border: {
@@ -172,6 +188,11 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
         action: wonderBlocksTheming.tokens.color.fadedBlue,
         critical: wonderBlocksTheming.tokens.color.fadedRed
       }
+    },
+    text: {
+      icon: {
+        secondaryHover: wonderBlocksTheming.tokens.color.blue
+      }
     }
   },
   border: {
@@ -184,6 +205,11 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
       focused: wonderBlocksTheming.tokens.border.width.hairline
     }
   },
+  margin: {
+    icon: {
+      offset: -wonderBlocksTheming.tokens.spacing.xSmall_8
+    }
+  },
   font: {
     weight: {
       default: wonderBlocksTheming.tokens.font.weight.regular
@@ -231,7 +257,7 @@ function ButtonIcon({
   }
 }
 
-const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
@@ -251,6 +277,7 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
         hovered,
         href = undefined,
         kind = "primary",
+        labelStyle,
         light = false,
         pressed,
         size = "medium",
@@ -274,7 +301,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, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
+      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)],
       testId: testId ? `${testId}-inner-label` : undefined
     }, children);
     const sizeMapping = {
@@ -283,22 +310,26 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
       large: "medium"
     };
     const iconSize = size === "small" ? "small" : "medium";
-    const contents = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(ButtonIcon, {
+    const contents = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(wonderBlocksCore.View, {
+      style: sharedStyles.iconWrapper
+    }, React__namespace.createElement(ButtonIcon, {
       size: iconSize,
       icon: startIcon,
-      style: sharedStyles.startIcon,
+      style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
       testId: testId ? `${testId}-start-icon` : undefined
-    }), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
+    })), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
       style: sharedStyles.spinner,
       size: sizeMapping[size],
       light: kind === "primary",
       testId: `${testId || "button"}-spinner`
-    }), endIcon && React__namespace.createElement(ButtonIcon, {
+    }), endIcon && React__namespace.createElement(wonderBlocksCore.View, {
+      testId: testId ? `${testId}-end-icon-wrapper` : undefined,
+      style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && sharedStyles.iconWrapperSecondaryHovered]
+    }, React__namespace.createElement(ButtonIcon, {
       size: iconSize,
       icon: endIcon,
-      style: sharedStyles.endIcon,
       testId: testId ? `${testId}-end-icon` : undefined
-    }));
+    })));
     if (href && !disabled) {
       return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
         to: href,
@@ -341,9 +372,6 @@ const themedSharedStyles = theme => ({
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
   },
-  withIcon: {
-    paddingLeft: theme.padding.medium
-  },
   disabled: {
     cursor: "auto"
   },
@@ -366,7 +394,7 @@ const themedSharedStyles = theme => ({
   },
   largeText: {
     fontSize: theme.font.size.large,
-    lineHeight: theme.font.lineHeight.large
+    lineHeight: `${theme.font.lineHeight.large}px`
   },
   textWithFocus: {
     position: "relative"
@@ -378,10 +406,30 @@ const themedSharedStyles = theme => ({
     position: "absolute"
   },
   startIcon: {
-    marginInlineEnd: theme.padding.small
+    marginRight: theme.padding.small,
+    marginLeft: theme.margin.icon.offset
+  },
+  tertiaryStartIcon: {
+    marginLeft: 0
   },
   endIcon: {
-    marginInlineStart: theme.padding.small
+    marginLeft: theme.padding.small
+  },
+  iconWrapper: {
+    borderRadius: theme.border.radius.icon,
+    padding: theme.padding.xsmall,
+    minWidth: "auto"
+  },
+  iconWrapperSecondaryHovered: {
+    backgroundColor: theme.color.bg.icon.secondaryHover,
+    color: theme.color.text.icon.secondaryHover
+  },
+  endIconWrapper: {
+    marginLeft: theme.padding.small,
+    marginRight: theme.margin.icon.offset
+  },
+  endIconWrapperTertiary: {
+    marginRight: 0
   }
 });
 const styles = {};
@@ -422,43 +470,37 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
       }
     };
   } 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;
     const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
     newStyles = {
       default: {
         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: theme.border.width.secondary,
+        outlineColor: light ? theme.color.border.secondary.inverse : secondaryBorderColor,
+        outlineStyle: "solid",
+        outlineWidth: theme.border.width.secondary,
+        outlineOffset: 1,
         paddingLeft: padding,
         paddingRight: padding
       },
       focus: {
         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
+        outlineColor: light ? theme.color.border.primary.inverse : color,
+        outlineWidth: theme.border.width.focused
       },
       active: {
         background: light ? activeColor : secondaryActiveColor,
         color: light ? fadedColor : activeColor,
-        borderColor: light ? fadedColor : activeColor,
-        borderWidth: theme.border.width.focused,
-        paddingLeft: horizontalPadding,
-        paddingRight: horizontalPadding
+        outlineColor: light ? fadedColor : activeColor,
+        outlineWidth: theme.border.width.focused
       },
       disabled: {
         color: light ? theme.color.text.secondary.inverse : theme.color.text.disabled,
-        borderColor: light ? fadedColor : theme.color.border.disabled,
+        outlineColor: light ? fadedColor : theme.color.border.disabled,
         cursor: "default",
         ":focus": {
-          borderColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
-          borderWidth: theme.border.width.disabled,
-          paddingLeft: padding - 1,
-          paddingRight: padding - 1
+          outlineColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
+          outlineWidth: theme.border.width.disabled
         }
       }
     };
@@ -483,16 +525,10 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         }
       },
       focus: {
-        ":after": {
-          content: "''",
-          position: "absolute",
-          width: `calc(100% + ${theme.border.width.focused * 2}px)`,
-          height: `calc(100% - ${theme.border.width.focused * 2}px)`,
-          borderStyle: "solid",
-          borderColor: light ? theme.color.border.tertiary.inverse : color,
-          borderWidth: theme.border.width.focused,
-          borderRadius: theme.border.radius.default
-        }
+        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,
@@ -506,9 +542,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         cursor: "default"
       },
       disabledFocus: {
-        ":after": {
-          borderColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
-        }
+        outlineColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
       }
     };
   } else {

package/dist/themes/default.d.ts

@@ -34,6 +34,12 @@ declare const theme: {
             tertiary: {
                 hover: string;
             };
+            /**
+             * Icons
+             */
+            icon: {
+                secondaryHover: string;
+            };
         };
         text: {
             /**
@@ -50,6 +56,12 @@ declare const theme: {
             secondary: {
                 inverse: string;
             };
+            /**
+             * Icons
+             */
+            icon: {
+                secondaryHover: string;
+            };
         };
         border: {
             /**
@@ -83,6 +95,10 @@ declare const theme: {
             tertiary: number;
             small: number;
             large: number;
+            /**
+             * Icons
+             */
+            icon: string;
         };
     };
     size: {
@@ -93,8 +109,14 @@ declare const theme: {
             large: number;
         };
     };
+    margin: {
+        icon: {
+            offset: number;
+        };
+    };
     padding: {
-        small: 8;
+        xsmall: 2;
+        small: 6;
         medium: 12;
         large: 16;
         xLarge: 32;