fix(Button): styles

Author: tenphi

src/components/actions/Button/Button.tsx

@@ -110,10 +110,9 @@ const ButtonElement = tasty({
         '[data-type="secondary"]': '#purple.15',
         '[data-type="secondary"] & pressed': '#purple.3',
         '[data-type="clear"]': '#clear',
-        '[data-type="outline"]': '#border',
         '[data-type="clear"] & pressed': '#purple-text.10',
-        '[data-type="outline"] | [disabled]': '#dark.12',
-        '[data-type="neutral"]': '#clear',
+        '[data-type="outline"]': '#dark.12',
+        '[data-type="neutral"] | [disabled]': '#clear',
         focused: '#purple-text',
         '[data-type="link"]': '0',
       },
@@ -169,7 +168,7 @@ const ButtonElement = tasty({
         '[data-type="clear"]': '#clear',
         '[data-type="outline"]': '#danger.15',
         '[data-type="outline"] & pressed': '#danger.3',
-        '[data-type="neutral"]': '#clear',
+        '[data-type="neutral"] | [disabled]': '#clear',
         focused: '#danger-text',
         '[data-type="link"]': '#clear',
       },
@@ -224,7 +223,7 @@ const ButtonElement = tasty({
         '[data-type="clear"]': '#clear',
         '[data-type="outline"]': '#success.15',
         '[data-type="outline"] & pressed': '#success.3',
-        '[data-type="neutral"]': '#clear',
+        '[data-type="neutral"] | [disabled]': '#clear',
         focused: '#success-text',
         '[data-type="link"]': '#clear',
       },
@@ -279,6 +278,7 @@ const ButtonElement = tasty({
         '([data-type="outline"] | [data-type="neutral"]) & !pressed':
           '#white.3',
         '![data-type="primary"] & focused': '#white',
+        '[disabled]': '#white.3',
         '[data-type="link"]': false,
       },
       fill: {

src/icons/Icon.tsx

@@ -1,4 +1,10 @@
-import { ForwardedRef, forwardRef, memo } from 'react';
+import {
+  cloneElement,
+  ForwardedRef,
+  forwardRef,
+  memo,
+  ReactElement,
+} from 'react';
 
 import {
   BASE_STYLES,
@@ -11,7 +17,6 @@ import {
   Styles,
   tasty,
 } from '../tasty';
-import { mergeProps } from '../utils/react/index';
 
 const IconElement = tasty({
   as: 'span',
@@ -43,6 +48,7 @@ export interface CubeIconProps
     BaseStyleProps {
   size?: Styles['fontSize'];
   stroke?: number;
+  children: ReactElement;
 }
 
 export const Icon = memo(
@@ -52,16 +58,20 @@ export const Icon = memo(
   ) {
     const { size, stroke, ...rest } = props;
 
-    const mergedProps =
-      size != null || stroke != null
-        ? mergeProps(rest, {
-            styles: {
-              ...(size ? { fontSize: size } : {}),
-              ...(stroke ? { '@stroke-width': stroke } : {}),
-            },
-          })
-        : rest;
+    const icon = cloneElement(rest.children, {
+      size: typeof size === 'number' ? size : undefined,
+      stroke,
+    });
 
-    return <IconElement ref={ref} qa="Icon" {...mergedProps} />;
+    return (
+      <IconElement
+        ref={ref}
+        qa="Icon"
+        {...rest}
+        styles={{ fontSize: size, ...rest.styles }}
+      >
+        {icon}
+      </IconElement>
+    );
   }),
 );