feat: refresh

Author: enisdenjo

packages/ui/.storybook/config.tsx

@@ -7,26 +7,25 @@
 import React, { StrictMode } from 'react';
 import { configure, addDecorator } from '@storybook/react';
 
-import { ThemeProvider } from '../src/styles';
-import { ThemeProvider as TreatThemeProvider } from '../src/styles/treat';
-import { Baseline } from '../src/Baseline';
-import { Text } from '../src/Text';
+import { Small } from '../src/Typography';
 import { Button } from '../src/Button';
 
+// theme
+import { ThemeProvider, createTheme } from '../src/styles/theme';
+import { themeRef } from './theme.treat';
+import { TreatProvider } from 'react-treat';
+import '../src/styles/baseline.treat';
+
 const req = require.context('../__stories__', true, /\.stories\.tsx$/);
 
 function loadStories() {
   req.keys().forEach(req);
 }
 
-import { theme } from './theme';
-import { themeRef } from './theme.treat';
-
 addDecorator((story) => (
   <StrictMode>
-    <ThemeProvider theme={theme}>
-      <TreatThemeProvider themeRef={themeRef} theme={theme}>
-        <Baseline />
+    <ThemeProvider theme={createTheme()}>
+      <TreatProvider theme={themeRef}>
         <div
           style={{
             position: 'relative',
@@ -39,10 +38,9 @@ addDecorator((story) => (
         >
           <div style={{ flex: 1 }}>{story()}</div>
           <div style={{ opacity: 0.4, margin: '2em 0 1em 0' }}>
-            <Text size="tiny">
+            <Small>
               Design by:&nbsp;
               <Button
-                size="tiny"
                 variant="link"
                 component={({ children, ...rest }) => (
                   <a {...rest} href="http://saismo.at/" target="_blank">
@@ -52,10 +50,10 @@ addDecorator((story) => (
               >
                 saismo
               </Button>
-            </Text>
+            </Small>
           </div>
         </div>
-      </TreatThemeProvider>
+      </TreatProvider>
     </ThemeProvider>
   </StrictMode>
 ));

packages/ui/.storybook/theme.treat.ts

@@ -1,4 +1,4 @@
-import { theme } from './theme';
-import { createTheme as createThemeRef } from '../src/styles/treat';
-
+import { createTheme } from '../src/styles/theme';
+const theme = createTheme();
+import { createTheme as createThemeRef } from 'treat';
 export const themeRef = createThemeRef(theme);

packages/ui/.storybook/theme.ts

@@ -21,7 +21,6 @@ module.exports = ({ config }) => {
 
   config.plugins = [
     new TreatPlugin({
-      verbose: true,
       outputLoaders: [MiniCssExtractPlugin.loader],
     }),
     new MiniCssExtractPlugin(),

packages/ui/.storybook/tsconfig.json

@@ -39,14 +39,14 @@ globalStyle(`${lightMenuItem}${selected}`, ({ palette }) => ({
 // input
 export const inlineAutocompleteInput = style(() => ({}));
 
-globalStyle(`${inlineAutocompleteInput} ${input}`, ({ palette, spacing, typography }) => ({
-  padding: spacing('tiny'),
+globalStyle(`${inlineAutocompleteInput} ${input}`, ({ palette, sizing, typography }) => ({
+  padding: sizing('tiny'),
   color: palette.white,
-  fontWeight: typography.weights.semiBold,
+  fontWeight: typography.weights.bold,
   backgroundColor: palette.lighten('gray100', 0.2),
 }));
 
-globalStyle(`${inlineAutocompleteInput} ${endSvg}`, ({ spacing }) => ({
-  bottom: `${spacing('tiny') + 1}px !important`,
-  right: `${spacing('tiny')}px !important`,
+globalStyle(`${inlineAutocompleteInput} ${endSvg}`, ({ sizing }) => ({
+  bottom: `${sizing('tiny') + 1}px !important`,
+  right: `${sizing('tiny')}px !important`,
 }));

packages/ui/.storybook/webpack.config.js

@@ -37,7 +37,7 @@ stories.add('No bank connections', () => (
       </Avatar>
     </Flex>
     <Flex item style={{ textAlign: 'center' }}>
-      <Text size="large" weight="semiBold" color="accent" gutterBottom>
+      <Text size="large" weight="bold" color="accent" gutterBottom>
         You haven’t connected any accounts yet.
       </Text>
       <Text size="medium" color="secondary">