baseui 15.0.1 → 16.0.0

package/button/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StartEnhancer = exports.LoadingSpinnerContainer = exports.LoadingSpinner = exports.EndEnhancer = exports.BaseButton = exports.AnchorBaseButton = void 0;
+exports.getArtworkSize = exports.StartEnhancerButtonContentContainer = exports.StartEnhancer = exports.LoadingSpinnerContainer = exports.LoadingSpinner = exports.EndEnhancer = exports.BaseButton = exports.AnchorBaseButton = void 0;
 var _styles = require("../styles");
 var _constants = require("./constants");
 /*
@@ -26,7 +26,10 @@ const createStyledBaseButton = (type, styleFn) => (0, _styles.styled)(type, ({
   $isSelected,
   $disabled,
   $isFocusVisible,
-  $as
+  $minHitArea,
+  $as,
+  $backgroundSafe,
+  $widthType
 }) => ({
   display: 'inline-flex',
   // need to maintain button width while showing loading spinner
@@ -42,7 +45,9 @@ const createStyledBaseButton = (type, styleFn) => (0, _styles.styled)(type, ({
   borderRightStyle: 'none',
   borderBottomStyle: 'none',
   outline: 'none',
-  boxShadow: $isFocusVisible ? `inset 0 0 0 3px ${$theme.colors.borderAccent}` : 'none',
+  boxSizing: 'border-box',
+  // <button> is default to border-box for most browsers, but <a> is content-box
+  boxShadow: $isFocusVisible && $backgroundSafe ? `inset 0 0 0 2px ${$theme.colors.borderAccent}, ${$theme.lighting.shallowBelow}` : $backgroundSafe ? `${$theme.lighting.shallowBelow}` : $isFocusVisible ? `inset 0 0 0 2px ${$theme.colors.borderAccent}` : 'none',
   textDecoration: 'none',
   WebkitAppearance: 'none',
   transitionProperty: 'background',
@@ -62,11 +67,16 @@ const createStyledBaseButton = (type, styleFn) => (0, _styles.styled)(type, ({
   marginTop: 0,
   marginRight: 0,
   marginBottom: 0,
+  ...getDimensionStyles({
+    $theme,
+    $size,
+    $widthType
+  }),
   ...getFontStyles({
     $theme,
     $size
   }),
-  ...getBorderRadiiStyles({
+  ...getBorderRadiusStyles({
     $theme,
     $size,
     $shape
@@ -76,13 +86,22 @@ const createStyledBaseButton = (type, styleFn) => (0, _styles.styled)(type, ({
     $size,
     $shape
   }),
+  ...getDoubleBorderStyles({
+    $theme,
+    $isLoading,
+    $isSelected,
+    $kind,
+    $disabled,
+    $backgroundSafe
+  }),
   ...getColorStyles({
     $theme,
     $colors,
     $kind,
     $isLoading,
     $isSelected,
-    $disabled
+    $disabled,
+    $backgroundSafe
   }),
   ...getAnchorDisabledStyles({
     $as,
@@ -93,7 +112,12 @@ const createStyledBaseButton = (type, styleFn) => (0, _styles.styled)(type, ({
   }),
   ...getShapeStyles({
     $shape,
-    $size
+    $size,
+    $theme
+  }),
+  ...getMinHitAreaStyles({
+    $minHitArea,
+    $theme
   }),
   ...styleFn?.({
     $theme,
@@ -105,6 +129,7 @@ const createStyledBaseButton = (type, styleFn) => (0, _styles.styled)(type, ({
     $isSelected,
     $disabled,
     $isFocusVisible,
+    $minHitArea,
     $as
   })
 }));
@@ -145,23 +170,34 @@ const StartEnhancer = exports.StartEnhancer = (0, _styles.styled)('div', ({
 });
 StartEnhancer.displayName = "StartEnhancer";
 StartEnhancer.displayName = 'StartEnhancer';
+const StartEnhancerButtonContentContainer = exports.StartEnhancerButtonContentContainer = (0, _styles.styled)('div', ({
+  $theme
+}) => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexGrow: 1
+  };
+});
+StartEnhancerButtonContentContainer.displayName = "StartEnhancerButtonContentContainer";
+StartEnhancerButtonContentContainer.displayName = 'StartEnhancerButtonContentContainer';
 const LoadingSpinnerContainer = exports.LoadingSpinnerContainer = (0, _styles.styled)('div', ({
   $theme,
   $size
 }) => {
-  // we don't have a theming value for this
-  let margins = '3px';
-  if ($size === _constants.SIZE.mini || $size === _constants.SIZE.compact) {
-    margins = $theme.sizing.scale0;
-  }
-  if ($size === _constants.SIZE.large) {
-    margins = $theme.sizing.scale100;
+  let margins = {};
+  // Add a few pixels of margin to match the line-height for non-loading xSmall buttons.
+  if ($size === _constants.SIZE.mini || $size === _constants.SIZE.xSmall) {
+    margins = {
+      marginBottom: $theme.sizing.scale0,
+      marginTop: $theme.sizing.scale0
+    };
   }
   return {
     lineHeight: 0,
     position: 'static',
-    marginBottom: margins,
-    marginTop: margins
+    ...margins
   };
 });
 LoadingSpinnerContainer.displayName = "LoadingSpinnerContainer";
@@ -180,12 +216,24 @@ const LoadingSpinner = exports.LoadingSpinner = (0, _styles.styled)('span', ({
     $kind,
     $disabled
   });
-  let dimension = $theme.sizing.scale550;
-  if ($size === _constants.SIZE.mini || $size === _constants.SIZE.compact) {
-    dimension = $theme.sizing.scale500;
-  }
-  if ($size === _constants.SIZE.large) {
-    dimension = $theme.sizing.scale600;
+  let dimension;
+  switch ($size) {
+    case _constants.SIZE.mini:
+    case _constants.SIZE.xSmall:
+      dimension = $theme.sizing.scale500;
+      break;
+    case _constants.SIZE.compact:
+    case _constants.SIZE.small:
+      dimension = $theme.sizing.scale600;
+      break;
+    case _constants.SIZE.large:
+      dimension = $theme.sizing.scale800;
+      break;
+    case _constants.SIZE.medium:
+    case _constants.SIZE.default:
+    default:
+      dimension = $theme.sizing.scale700;
+      break;
   }
   return {
     height: dimension,
@@ -251,6 +299,34 @@ function getLoadingSpinnerColors({
           background: $theme.colors.buttonTertiarySpinnerBackground
         };
       }
+    case _constants.KIND.dangerPrimary:
+      {
+        return {
+          foreground: $theme.colors.buttonDangerPrimarySpinnerForeground,
+          background: $theme.colors.buttonDangerPrimarySpinnerBackground
+        };
+      }
+    case _constants.KIND.dangerSecondary:
+      {
+        return {
+          foreground: $theme.colors.buttonDangerSecondarySpinnerForeground,
+          background: $theme.colors.buttonDangerSecondarySpinnerBackground
+        };
+      }
+    case _constants.KIND.dangerTertiary:
+      {
+        return {
+          foreground: $theme.colors.buttonDangerTertiarySpinnerForeground,
+          background: $theme.colors.buttonDangerTertiarySpinnerBackground
+        };
+      }
+    case _constants.BUTTON_GROUP_EXCLUSIVE_KINDS.outline:
+      {
+        return {
+          foreground: $theme.colors.buttonOutlineSpinnerForeground,
+          background: $theme.colors.buttonOutlineSpinnerBackground
+        };
+      }
     case _constants.KIND.primary:
     default:
       {
@@ -263,24 +339,16 @@ function getLoadingSpinnerColors({
 }
 
 // @ts-ignore
-function getBorderRadiiStyles({
+function getBorderRadiusStyles({
   $theme,
   $size,
   $shape
 }) {
   let value = $theme.borders.buttonBorderRadius;
-  if ($shape === _constants.SHAPE.pill) {
-    if ($size === _constants.SIZE.compact) {
-      value = '30px';
-    } else if ($size === _constants.SIZE.large) {
-      value = '42px';
-    } else {
-      value = '38px';
-    }
+  if ($shape === _constants.SHAPE.pill || $shape === _constants.SHAPE.rounded) {
+    value = '999px';
   } else if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round) {
     value = '50%';
-  } else if ($size === _constants.SIZE.mini) {
-    value = $theme.borders.buttonBorderRadiusMini;
   }
   return {
     borderTopRightRadius: value,
@@ -296,14 +364,16 @@ function getFontStyles({
   $size
 }) {
   switch ($size) {
+    case _constants.SIZE.xSmall:
     case _constants.SIZE.mini:
-      return $theme.typography.font150;
+      return $theme.typography.LabelXSmall;
+    case _constants.SIZE.small:
     case _constants.SIZE.compact:
-      return $theme.typography.font250;
+      return $theme.typography.LabelSmall;
     case _constants.SIZE.large:
-      return $theme.typography.font450;
+      return $theme.typography.LabelLarge;
     default:
-      return $theme.typography.font350;
+      return $theme.typography.LabelMedium;
   }
 }
 function getAnchorDisabledStyles({
@@ -349,7 +419,7 @@ function getDisabledStyles({
     }
   }
   return {
-    backgroundColor: $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    backgroundColor: $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   };
 }
@@ -363,6 +433,7 @@ function getPaddingStyles({
   const iconShape = $shape === _constants.SHAPE.square || $shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round;
   switch ($size) {
     case _constants.SIZE.mini:
+    case _constants.SIZE.xSmall:
       return {
         paddingTop: $theme.sizing.scale200,
         paddingBottom: $theme.sizing.scale200,
@@ -370,6 +441,7 @@ function getPaddingStyles({
         paddingRight: iconShape ? $theme.sizing.scale200 : $theme.sizing.scale300
       };
     case _constants.SIZE.compact:
+    case _constants.SIZE.small:
       return {
         paddingTop: $theme.sizing.scale400,
         paddingBottom: $theme.sizing.scale400,
@@ -383,6 +455,8 @@ function getPaddingStyles({
         paddingLeft: iconShape ? $theme.sizing.scale600 : $theme.sizing.scale700,
         paddingRight: iconShape ? $theme.sizing.scale600 : $theme.sizing.scale700
       };
+    case _constants.SIZE.medium:
+    case _constants.SIZE.default:
     default:
       return {
         paddingTop: $theme.sizing.scale550,
@@ -404,39 +478,54 @@ function getColorStyles({
   // @ts-ignore
   $kind,
   // @ts-ignore
-  $disabled
+  $disabled,
+  // @ts-ignore
+  $backgroundSafe
 }) {
+  if ($disabled) {
+    return Object.freeze({});
+  }
+  const backgroundSafeBoxShadow = $backgroundSafe ? `, ${$theme.lighting.shallowBelow}` : '';
   if ($colors) {
     return {
       color: $colors.color,
       backgroundColor: $colors.backgroundColor,
-      ':hover': {
-        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+      // Applies only on devices that support hovering, like desktop computers.
+      '@media (hover: hover)': {
+        ':hover': {
+          boxShadow: `inset 999px 999px 0px rgba(0, 0, 0, 0.04) ${backgroundSafeBoxShadow}`
+        }
       },
       ':active': {
-        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+        boxShadow: `inset 999px 999px 0px rgba(0, 0, 0, 0.08) ${backgroundSafeBoxShadow}`
       }
     };
   }
-  if ($disabled) {
-    return Object.freeze({});
-  }
   switch ($kind) {
     case _constants.KIND.primary:
       if ($isSelected) {
         return {
-          color: $theme.colors.buttonPrimarySelectedText,
-          backgroundColor: $theme.colors.buttonPrimarySelectedFill
+          color: $theme.colors.buttonPrimarySelectedText || $theme.colors.buttonPrimaryText,
+          // provide fallback values in case some projects customized the theme but do not provide the tokens.
+          backgroundColor: $theme.colors.buttonPrimarySelectedFill || $theme.colors.buttonPrimaryFill
+        };
+      }
+      if ($isLoading) {
+        return {
+          backgroundColor: $theme.colors.buttonPrimaryLoadingFill || $theme.colors.buttonPrimaryFill
         };
       }
       return {
         color: $theme.colors.buttonPrimaryText,
         backgroundColor: $theme.colors.buttonPrimaryFill,
-        ':hover': {
-          backgroundColor: $isLoading ? $theme.colors.buttonPrimaryActive : $theme.colors.buttonPrimaryHover
+        // Applies only on devices that support hovering, like desktop computers.
+        '@media (hover: hover)': {
+          ':hover': {
+            boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonPrimaryHoverOverlay} ${backgroundSafeBoxShadow}`
+          }
         },
         ':active': {
-          backgroundColor: $theme.colors.buttonPrimaryActive
+          boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonPrimaryActiveOverlay} ${backgroundSafeBoxShadow}`
         }
       };
     case _constants.KIND.secondary:
@@ -446,33 +535,271 @@ function getColorStyles({
           backgroundColor: $theme.colors.buttonPrimaryFill
         };
       }
+      if ($isLoading) {
+        return {
+          backgroundColor: $theme.colors.buttonSecondaryLoadingFill || $theme.colors.buttonSecondaryFill
+        };
+      }
       return {
         color: $theme.colors.buttonSecondaryText,
         backgroundColor: $theme.colors.buttonSecondaryFill,
-        ':hover': {
-          backgroundColor: $isLoading ? $theme.colors.buttonSecondaryActive : $theme.colors.buttonSecondaryHover
+        // Applies only on devices that support hovering, like desktop computers.
+        '@media (hover: hover)': {
+          ':hover': {
+            boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonSecondaryHoverOverlay} ${backgroundSafeBoxShadow}`
+          }
         },
         ':active': {
-          backgroundColor: $theme.colors.buttonSecondaryActive
+          boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonSecondaryActiveOverlay} ${backgroundSafeBoxShadow}`
         }
       };
     case _constants.KIND.tertiary:
       if ($isSelected) {
         return {
-          color: $theme.colors.buttonTertiarySelectedText,
-          backgroundColor: $theme.colors.buttonTertiarySelectedFill
+          color: $theme.colors.buttonTertiarySelectedText || $theme.colors.buttonTertiaryText,
+          backgroundColor: $theme.colors.buttonTertiarySelectedFill || $theme.colors.buttonTertiaryFill
+        };
+      }
+      if ($isLoading) {
+        return {
+          backgroundColor: $theme.colors.buttonTertiaryLoadingFill || $theme.colors.buttonTertiaryFill
         };
       }
       return {
         color: $theme.colors.buttonTertiaryText,
         backgroundColor: $theme.colors.buttonTertiaryFill,
-        ':hover': {
-          backgroundColor: $isLoading ? $theme.colors.buttonTertiaryActive : $theme.colors.buttonTertiaryHover
+        // Applies only on devices that support hovering, like desktop computers.
+        '@media (hover: hover)': {
+          ':hover': {
+            boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonTertiaryHoverOverlay} ${backgroundSafeBoxShadow}`
+          }
         },
         ':active': {
-          backgroundColor: $theme.colors.buttonTertiaryActive
+          boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonTertiaryActiveOverlay} ${backgroundSafeBoxShadow}`
+        }
+      };
+    // Below are the danger button styles.(newly added, other customized themes system should provide the tokens)
+    case _constants.KIND.dangerPrimary:
+      {
+        if ($isSelected) {
+          return {
+            color: $theme.colors.buttonDangerPrimarySelectedText,
+            backgroundColor: $theme.colors.buttonDangerPrimarySelectedFill
+          };
+        }
+        if ($isLoading) {
+          return {
+            backgroundColor: $theme.colors.buttonDangerPrimaryLoadingFill
+          };
+        }
+        return {
+          color: $theme.colors.buttonDangerPrimaryText,
+          backgroundColor: $theme.colors.buttonDangerPrimaryFill,
+          // Applies only on devices that support hovering, like desktop computers.
+          '@media (hover: hover)': {
+            ':hover': {
+              boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerPrimaryHoverOverlay} ${backgroundSafeBoxShadow}`
+            }
+          },
+          ':active': {
+            boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerPrimaryActiveOverlay} ${backgroundSafeBoxShadow}`
+          }
+        };
+      }
+    case _constants.KIND.dangerSecondary:
+      {
+        if ($isSelected) {
+          return {
+            color: $theme.colors.buttonDangerSecondarySelectedText,
+            backgroundColor: $theme.colors.buttonDangerSecondarySelectedFill
+          };
+        }
+        if ($isLoading) {
+          return {
+            backgroundColor: $theme.colors.buttonDangerSecondaryLoadingFill
+          };
+        }
+        return {
+          color: $theme.colors.buttonDangerSecondaryText,
+          backgroundColor: $theme.colors.buttonDangerSecondaryFill,
+          // Applies only on devices that support hovering, like desktop computers.
+          '@media (hover: hover)': {
+            ':hover': {
+              boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerSecondaryHoverOverlay} ${backgroundSafeBoxShadow}`
+            }
+          },
+          ':active': {
+            boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerSecondaryActiveOverlay} ${backgroundSafeBoxShadow}`
+          }
+        };
+      }
+    case _constants.KIND.dangerTertiary:
+      {
+        if ($isSelected) {
+          return {
+            color: $theme.colors.buttonDangerTertiarySelectedText,
+            backgroundColor: $theme.colors.buttonDangerTertiarySelectedFill
+          };
+        }
+        if ($isLoading) {
+          return {
+            backgroundColor: $theme.colors.buttonDangerTertiaryLoadingFill
+          };
+        }
+        return {
+          color: $theme.colors.buttonDangerTertiaryText,
+          backgroundColor: $theme.colors.buttonDangerTertiaryFill,
+          // Applies only on devices that support hovering, like desktop computers.
+          '@media (hover: hover)': {
+            ':hover': {
+              boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerTertiaryHoverOverlay} ${backgroundSafeBoxShadow}`
+            }
+          },
+          ':active': {
+            boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerTertiaryActiveOverlay} ${backgroundSafeBoxShadow}`
+          }
+        };
+      }
+    case _constants.BUTTON_GROUP_EXCLUSIVE_KINDS.outline:
+      {
+        if ($isSelected) {
+          return {
+            color: $theme.colors.buttonOutlineSelectedText,
+            backgroundColor: $theme.colors.buttonOutlineSelectedFill
+          };
+        }
+        if ($isLoading) {
+          return {
+            backgroundColor: $theme.colors.buttonOutlineLoadingFill
+          };
+        }
+        return {
+          color: $theme.colors.buttonOutlineText,
+          backgroundColor: $theme.colors.buttonOutlineFill,
+          // adding overlay for hovered and pressed state (we previously used inset box shadow to simulate this, but cannot extend to border)
+          // This is ideally moved to root level, but putting here is less risky since it's probably ::after element is used or overridden somewhere.
+          position: 'relative',
+          '::after': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+            borderBottomLeftRadius: 'inherit',
+            backgroundColor: 'transparent',
+            boxShadow: `0 0 0 ${$theme.sizing.scale0} transparent`,
+            pointerEvents: 'none'
+          },
+          // end of overlay
+          // Applies only on devices that support hovering, like desktop computers.
+          '@media (hover: hover)': {
+            ':hover::after': {
+              backgroundColor: $theme.colors.buttonOutlineHoverOverlay,
+              // this box shadow is used to extend the overlay to the border
+              boxShadow: `0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOutlineHoverOverlay} ${backgroundSafeBoxShadow}`
+            }
+          },
+          ':active::after': {
+            backgroundColor: $theme.colors.buttonOutlineActiveOverlay,
+            // this box shadow is used to extend the overlay to the border
+            boxShadow: `0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOutlineActiveOverlay} ${backgroundSafeBoxShadow}`
+          }
+        };
+      }
+    default:
+      return Object.freeze({});
+  }
+}
+function getDoubleBorderStyles({
+  // @ts-ignore
+  $theme,
+  // @ts-ignore
+  $isLoading,
+  // @ts-ignore
+  $isSelected,
+  // @ts-ignore
+  $kind,
+  // @ts-ignore
+  $disabled,
+  // @ts-ignore
+  $backgroundSafe
+}) {
+  if ($disabled) {
+    return Object.freeze({});
+  }
+  const backgroundSafeBoxShadow = $backgroundSafe ? `, ${$theme.lighting.shallowBelow}` : '';
+  switch ($kind) {
+    case _constants.KIND.primary:
+      return {
+        ...($isSelected ? {
+          boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonInnerBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOuterBorder} ${backgroundSafeBoxShadow}`
+        } : {}),
+        ':focus-visible': {
+          boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonInnerBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonFocusOuterBorder} ${backgroundSafeBoxShadow}`
+        }
+      };
+    case _constants.KIND.secondary:
+      return {
+        ':focus-visible': {
+          boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonInnerBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonFocusOuterBorder} ${backgroundSafeBoxShadow}`
+        }
+      };
+    case _constants.KIND.tertiary:
+      return {
+        ...($isSelected ? {
+          boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonInnerBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOuterBorder} ${backgroundSafeBoxShadow}`
+        } : {}),
+        ':focus-visible': {
+          boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonInnerBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonFocusOuterBorder} ${backgroundSafeBoxShadow}`
         }
       };
+    case _constants.KIND.dangerPrimary:
+      {
+        return {
+          ...($isSelected ? {
+            boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonInnerBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOuterBorder} ${backgroundSafeBoxShadow}`
+          } : {}),
+          ':focus-visible': {
+            boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonInnerBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonFocusOuterBorder} ${backgroundSafeBoxShadow}`
+          }
+        };
+      }
+    case _constants.KIND.dangerSecondary:
+      {
+        return {
+          ':focus-visible': {
+            boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonInnerBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonFocusOuterBorder} ${backgroundSafeBoxShadow}`
+          }
+        };
+      }
+    case _constants.KIND.dangerTertiary:
+      {
+        return {
+          ...($isSelected ? {
+            boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonTransparentBorder}, 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonDangerTertiaryOuterBorder} ${backgroundSafeBoxShadow}`
+          } : {}),
+          ':focus-visible': {
+            boxShadow: `inset 0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonTransparentBorder},  0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonFocusOuterBorder} ${backgroundSafeBoxShadow}`
+          }
+        };
+      }
+    case _constants.BUTTON_GROUP_EXCLUSIVE_KINDS.outline:
+      {
+        return {
+          ...($isSelected ? {
+            boxShadow: `0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOuterBorder}`
+          } : {
+            boxShadow: `0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOutlineOuterBorder}`
+          }),
+          ':focus-visible': {
+            boxShadow: `0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonFocusOuterBorder}`
+          }
+        };
+      }
     default:
       return Object.freeze({});
   }
@@ -481,27 +808,31 @@ function getColorStyles({
 // @ts-ignore
 function getShapeStyles({
   $shape,
-  $size
+  $size,
+  $theme
 }) {
   if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {
     let height, width;
     switch ($size) {
       case _constants.SIZE.mini:
-        height = '28px';
-        width = '28px';
+      case _constants.SIZE.xSmall:
+        height = $theme.sizing.scale850;
+        width = $theme.sizing.scale850;
         break;
       case _constants.SIZE.compact:
-        height = '36px';
-        width = '36px';
+      case _constants.SIZE.small:
+        height = $theme.sizing.scale950;
+        width = $theme.sizing.scale950;
         break;
       case _constants.SIZE.large:
-        height = '56px';
-        width = '56px';
+        height = $theme.sizing.scale1400;
+        width = $theme.sizing.scale1400;
         break;
       case _constants.SIZE.default:
+      case _constants.SIZE.medium:
       default:
-        height = '48px';
-        width = '48px';
+        height = $theme.sizing.scale1200;
+        width = $theme.sizing.scale1200;
         break;
     }
     return {
@@ -515,4 +846,83 @@ function getShapeStyles({
   } else {
     return {};
   }
+}
+const getArtworkSize = ({
+  $theme,
+  $size
+}) => {
+  switch ($size) {
+    case _constants.SIZE.mini:
+    case _constants.SIZE.xSmall:
+      return $theme.sizing.scale500;
+    case _constants.SIZE.compact:
+    case _constants.SIZE.small:
+      return $theme.sizing.scale600;
+    case _constants.SIZE.large:
+      return $theme.sizing.scale800;
+    case _constants.SIZE.default:
+    case _constants.SIZE.medium:
+    default:
+      return $theme.sizing.scale700;
+  }
+};
+
+// @ts-ignore
+exports.getArtworkSize = getArtworkSize;
+function getMinHitAreaStyles({
+  $minHitArea,
+  $theme
+}) {
+  if (!$minHitArea || $minHitArea !== _constants.MIN_HIT_AREA.tap) {
+    return {};
+  }
+  return {
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      left: 0,
+      right: 0,
+      height: $theme.sizing.scale1200,
+      minHeight: $theme.sizing.scale1200,
+      transform: 'translateY(-50%)'
+    },
+    position: 'relative'
+  };
+}
+function getDimensionStyles({
+  $theme,
+  $size,
+  $widthType
+}) {
+  let minWidth, minHeight;
+  switch ($size) {
+    case _constants.SIZE.mini:
+    case _constants.SIZE.xSmall:
+      minHeight = $theme.sizing.scale850;
+      minWidth = '52px'; //
+      break;
+    case _constants.SIZE.compact:
+    case _constants.SIZE.small:
+      minHeight = $theme.sizing.scale950;
+      minWidth = '60px'; // min-width = min-height + 24px
+      break;
+    case _constants.SIZE.large:
+      minHeight = $theme.sizing.scale1400;
+      minWidth = '80px'; // min-width = min-height + 24px
+      break;
+    case _constants.SIZE.default:
+    case _constants.SIZE.medium:
+    default:
+      minHeight = $theme.sizing.scale1200;
+      minWidth = '72px'; // min-width = min-height + 24px
+      break;
+  }
+  return {
+    ...($widthType === _constants.WIDTH_TYPE.fill ? {
+      minWidth,
+      minHeight,
+      width: '100%'
+    } : {}) // min-width and min-height only apply to "fill" width type
+  };
 }