Add `<Button />` blur subvariants (#499)

* upgrade storybook

* add blur variants

* Create breezy-mangos-fry.md

.changeset/breezy-mangos-fry.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+Add `<Button />` blur subvariants

packages/components/package.json

@@ -55,20 +55,20 @@
   },
   "devDependencies": {
     "@status-im/eslint-config": "*",
-    "@storybook/addon-essentials": "7.4.3",
+    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addon-interactions": "7.4.3",
+    "@storybook/addon-interactions": "7.5.1",
-    "@storybook/addon-links": "7.4.3",
+    "@storybook/addon-links": "7.5.1",
-    "@storybook/blocks": "7.4.3",
+    "@storybook/blocks": "7.5.1",
-    "@storybook/react": "7.4.3",
+    "@storybook/react": "7.5.1",
-    "@storybook/react-vite": "7.4.3",
+    "@storybook/react-vite": "7.5.1",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/testing-library": "^0.2.2",
     "@tamagui/vite-plugin": "1.74.21",
     "@vitejs/plugin-react-swc": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-svg": "^13.8.0",
     "react-native-web": "^0.19.5",
-    "storybook": "7.4.3",
+    "storybook": "7.5.1",
     "storybook-addon-designs": "7.0.0-beta.1",
     "storybook-dark-mode": "^3.0.0",
     "vite": "^4.2.1"

packages/components/src/button/button.stories.tsx

@@ -122,13 +122,27 @@ export const PrimaryIconOnlyCirlce: Story = {
   },
 }
 
-export const Success: Story = {
+export const Positive: Story = {
   args: {
     variant: 'positive',
     children: 'Click me',
   },
 }
 
+export const Grey: Story = {
+  args: {
+    variant: 'grey',
+    children: 'Click me',
+  },
+}
+
+export const GreyBlur: Story = {
+  args: {
+    variant: 'blur_grey',
+    children: 'Click me',
+  },
+}
+
 export const Outline: Story = {
   args: {
     variant: 'outline',
@@ -136,6 +150,13 @@ export const Outline: Story = {
   },
 }
 
+export const OutlineBlur: Story = {
+  args: {
+    variant: 'blur_outline',
+    children: 'Click me',
+  },
+}
+
 export const Ghost: Story = {
   args: {
     variant: 'ghost',

packages/components/src/button/button.tsx

@@ -46,6 +46,10 @@ const textColors: MapVariant<typeof Base, 'variant'> = {
 
   // dark theme
   dark_darkGrey: '$white-100',
+
+  // blur variants
+  blur_grey: '$neutral-100',
+  blur_outline: '$neutral-100',
 }
 
 const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
@@ -230,6 +234,30 @@ const Base = styled(View, {
         hoverStyle: { backgroundColor: '$neutral-60' },
         pressStyle: { backgroundColor: '$neutral-50' },
       },
+
+      // FIXME proper subvariant support
+      blur_grey: {
+        backgroundColor: '$neutral-80/5',
+        hoverStyle: { backgroundColor: '$neutral-80/10' },
+        pressStyle: { backgroundColor: '$neutral-80/20' },
+        '$platform-web': {
+          backdropFilter: 'blur(20px)',
+          // Tamagui does not accept this property even though it is valid (and works)
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as unknown as any,
+      },
+      blur_outline: {
+        borderWidth: 1,
+        borderColor: '$neutral-80/10',
+        hoverStyle: { borderColor: '$neutral-80/20' },
+        pressStyle: { borderColor: '$neutral-80/30' },
+
+        '$platform-web': {
+          backdropFilter: 'blur(20px)',
+          // Tamagui does not accept this property even though it is valid (and works)
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as unknown as any,
+      },
     },
 
     disabled: {