feat(storybook): remove use styles stories

.changeset/popular-years-destroy.md

@@ -0,0 +1,8 @@
+---
+"@marigold/storybook-config": patch
+"@marigold/components": patch
+"@marigold/icons": patch
+"@marigold/system": patch
+---
+
+feat(storybook): remove use styles stories

config/storybook/Welcome.stories.mdx

@@ -1,8 +1,8 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import { Box, Heading, Image, Link, Stack, Text } from '@marigold/components';
 import { ExternalLink } from '@marigold/icons';
+
 import logo from './assets/type_logo.png';
-import { useStyles } from '@marigold/system';
 
 <Meta
   title="Welcome/Welcome"
@@ -15,16 +15,11 @@ import { useStyles } from '@marigold/system';
   <Story name="Marigold">
     <Box p={64}>
       <Stack space={64}>
-        <Image
-          src={logo}
-          alt="logo"
-          width={312}
-          className={useStyles({ css: { marginBottom: '48px' } })}
-        />
+        <Box as={Image} src={logo} alt="logo" width={312} mb="48px" />
       </Stack>
-      <Heading className={useStyles({ css: { marginBottom: '32px' } })}>
+      <Box as="h2" mb="32px">
         Welcome to Marigold Storybook
-      </Heading>
+      </Box>
       <Stack space={16}>
         <Text>
           Browse the stories in the sidebar menu to know the different React
@@ -39,15 +34,19 @@ import { useStyles } from '@marigold/system';
           theme. Use the theme selector in the toolbar above to switch between
           the themes.
         </Text>
-        <Text className={useStyles({ css: { marginBottom: '32px' } })}>
+        <Box as={Text} mb="32px">
           You can play around with each component using the 'Controls' tab by
           entering new values.
-        </Text>
+        </Box>
         <Link href="https://marigold-ui.io/" target="_blank">
-          <Text>Marigold Documentation <ExternalLink /></Text>
+          <Text>
+            Marigold Documentation <ExternalLink />
+          </Text>
         </Link>
         <Link href="https://github.com/marigold-ui/marigold/" target="_blank">
-          <Text>GitHub Development Documentation <ExternalLink /></Text>
+          <Text>
+            GitHub Development Documentation <ExternalLink />
+          </Text>
         </Link>
       </Stack>
     </Box>

packages/components/src/Column/Column.stories.mdx

@@ -1,7 +1,7 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Column } from './Column';
+import { Box } from '../Box';
 import { Text } from '../Text';
-import { useStyles } from '@marigold/system';
 
 <Meta
   title="Components/Column"
@@ -26,18 +26,7 @@ import { useStyles } from '@marigold/system';
 # Column
 
 export const Template = args => (
-  <Column
-    className={useStyles({
-      css: {
-        textAlign: 'center',
-        border: '1px solid red',
-        padding: 2,
-        margin: 2,
-      },
-    })}
-    width={12}
-    {...args}
-  >
+  <Column width={12} {...args}>
     <Text>full width</Text>
   </Column>
 );