fix(Button): icon size definition * 4

Author: tenphi

src/components/actions/Button/Button.tsx

@@ -87,7 +87,7 @@ export const DEFAULT_BUTTON_STYLES: Styles = {
       'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
   },
 
-  '& [data-element="ButtonIcon"]:not(:has(.tabler-icon))': {
+  '& [data-element="ButtonIcon"]:has(.anticon)': {
     fontSize: '@icon-size',
   },
 };

src/icons/Icon.tsx

@@ -26,7 +26,12 @@ const IconElement = tasty({
     verticalAlign: 'sub',
     width: '1em 1em',
     height: 'min 1em',
-    fontSize: 'var(--icon-size, var(--font-size))',
+    fontSize: {
+      // legacy icons
+      '': 'calc(var(--icon-size, calc(var(--font-size) + 4px)) - 2px)',
+      // tabler icons
+      ':has(.tabler-icon)': 'var(--icon-size, var(--font-size))',
+    },
     textAlign: 'center',
     textTransform: 'none',
     textRendering: 'optimizeLegibility',

src/icons/wrap-icon.tsx

@@ -6,7 +6,7 @@ export function wrapIcon(name: string, icon: ReactElement) {
   function IconWrapper(props: CubeIconProps) {
     return (
       // use custom size to support legacy icons
-      <Icon qa={name} aria-hidden="true" size="(@icon-size - 2px)" {...props}>
+      <Icon qa={name} aria-hidden="true" {...props}>
         {icon}
       </Icon>
     );