Better box examples

src/components/Box/box.stories.tsx

@@ -1,6 +1,14 @@
 import React from 'react'
+import styled from 'styled-components'
+import {
+  colorTokens,
+  spacingTokens,
+  SpacingTokens,
+  ColorTokens,
+} from '../../tokens'
 import Box from './index'
 import { Preflight } from '..'
+import { Color } from 'csstype'
 
 export default {
   title: 'Box',
@@ -14,33 +22,25 @@ export default {
   ],
 }
 
-export const basic = () => <Box themeTest="secondary">Hello Button</Box>
+export const basic = () => <Box>Basic Box</Box>
 
-export const asH2 = () => (
-  <Box as="h2" display="flex" direction="row" justify="center">
-    <Box
-      elevation="xs"
-      ma="xl"
-      bgColor="maroon"
-      style={{ width: 100, height: 100 }}
-    ></Box>
-    <Box
-      elevation="md"
-      ma="xl"
-      bgColor="fuchsia"
-      style={{ width: 100, height: 100 }}
-    ></Box>
-    <Box
-      elevation="xl"
-      ma="xl"
-      bgColor="aqua"
-      style={{ width: 100, height: 100 }}
-    ></Box>
-  </Box>
-)
+export const asH2 = () => <Box as="h2">A Box can be a H2</Box>
 
 export const asButton = () => (
   <Box as="button" onClick={() => alert('Clicked Box')}>
     A Box can be anything!
   </Box>
 )
+
+export const withTokens = () => {
+  const StyledBox = styled(Box)<SpacingTokens & ColorTokens>`
+    ${colorTokens}
+    ${spacingTokens}
+  `
+
+  return (
+    <StyledBox pa="xl" bgColor="black" color="fuchsia">
+      <h1>Styled Box</h1>
+    </StyledBox>
+  )
+}

src/components/Box/index.tsx

@@ -1,54 +1,7 @@
 import styled from 'styled-components'
-import { createVariation } from 'styled-tokens'
-import {
-  displayTokens,
-  flexboxTokens,
-  positionTokens,
-  colorTokens,
-  spacingTokens,
-  elevationTokens,
-  DisplayTokens,
-  FlexTokens,
-  PositionTokens,
-  ColorTokens,
-  SpacingTokens,
-  ElevationTokens,
-} from '../../tokens'
 
-const variation = {
-  primary: {
-    backgroundColor: 'blue',
-    color: 'green',
-  },
-  secondary: {
-    backgroundColor: 'aqua',
-    color: 'pink',
-  },
-}
-
-const theme = createVariation({ variation, name: 'themeTest' })
-
-type ThemeVariation = {
-  themeTest?: keyof typeof variation
-}
-
-const Box = styled.div<BoxProps>`
-  ${flexboxTokens};
-  ${displayTokens};
-  ${positionTokens};
-  ${colorTokens};
-  ${spacingTokens};
-  ${elevationTokens};
-  ${theme}
+const Box = styled.div`
   box-sizing: border-box;
 `
 
-export type BoxProps = FlexTokens &
-  DisplayTokens &
-  PositionTokens &
-  ColorTokens &
-  SpacingTokens &
-  ElevationTokens &
-  ThemeVariation
-
 export default Box

src/components/Collapsible/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Box, { BoxProps } from '../Box'
+import Box from '../Box'
 
 const Collapsible: FC<CollapsibleProps> = ({
   collapsed,
@@ -9,6 +9,6 @@ const Collapsible: FC<CollapsibleProps> = ({
   return collapsed ? <Box {...props}>{children}</Box> : null
 }
 
-export type CollapsibleProps = { collapsed?: boolean } & BoxProps
+export type CollapsibleProps = { collapsed?: boolean }
 
 export default Collapsible

src/components/Preflight/index.tsx

@@ -187,6 +187,10 @@ const GlobalStyle = createGlobalStyle`
     line-height: 1.15; 
   }
 
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1.15; 
+  }
+
   ::-webkit-file-upload-button {
     font: inherit; 
   }