feat(styles): Implement styles/basics/utils

components/templates/styleguide/index.tsx

@@ -26,7 +26,7 @@ const Styleguide = () => {
       <FooBar />
       <FooBarTag4 />
       <StyledTitle $m="xs" $p="0">Styleguide</StyledTitle>
-      <div css={ prop }>This is css prop</div>
+      <div css={ prop } className="u-mt-xs u-px-lg">This is css prop</div>
       <StyledTag1>Cool Styles</StyledTag1>
       <StyledTag2>
         With <code>:hover</code>.

contexts/app_state.tsx

@@ -29,6 +29,10 @@ export const AppStateProvider = (props: {
     const root = document.documentElement
     root.style.setProperty('--b-colors-text-body', theme.colors.text.body)
     root.style.setProperty('--b-colors-bg-content', theme.colors.bg.content)
+
+    Object.entries(theme.space).forEach(([key, value]) => {
+      root.style.setProperty(`--theme-space-${key}`, value.px())
+    })
   }, [appState])
 
   return (

pages/_app.tsx

@@ -4,6 +4,7 @@ import * as gtag from '@/utils/gtag'
 import Styles from '@/styles'
 import { AppStateProvider } from '@/contexts/app_state'
 import { useAppState } from '@/hooks/app_state'
+import { StyledBasicUtils } from '@/styles/basics/utils'
 import '@/styles/basics_normalize.scss'
 import '@/styles/basics_highlightjs.scss'
 import '@/styles/basics_fonts.scss'
@@ -18,6 +19,7 @@ export default function App ({ Component, pageProps }: AppProps) {
     <AppStateProvider initialAppState={ appState }>
       <Styles.CustomProperties />
       <Styles.Elements />
+      <StyledBasicUtils />
       <Component { ...pageProps } />
     </AppStateProvider>
   )

styles/basics/utils.ts

@@ -0,0 +1,33 @@
+import { createGlobalStyle, css } from 'styled-components'
+
+const prefix = 'u'
+
+export const StyledBasicUtils = createGlobalStyle`
+  ${({ theme }) => css`
+    ${
+      Object.entries({ margin: 'm', padding: 'p' }).map(([prop, abbr]) => {
+        return Object.entries(theme.space).map(([size, unitize]) => {
+          return `
+            .${prefix}-${abbr}-${size} { ${prop}: ${unitize.px()} !important; }
+            .${prefix}-${abbr}t-${size},
+            .${prefix}-${abbr}y-${size} {
+              ${prop}-top: ${unitize.px()} !important;
+            }
+            .${prefix}-${abbr}r-${size},
+            .${prefix}-${abbr}x-${size} {
+              ${prop}-right: ${unitize.px()} !important;
+            }
+            .${prefix}-${abbr}b-${size},
+            .${prefix}-${abbr}y-${size} {
+              ${prop}-bottom: ${unitize.px()} !important;
+            }
+            .${prefix}-${abbr}l-${size},
+            .${prefix}-${abbr}x-${size} {
+              ${prop}-left: ${unitize.px()} !important;
+            }
+          `
+        })
+      })
+    }
+  `}
+`

styles/system.ts

@@ -27,7 +27,7 @@ export interface TPaddingProps {
 export type TSpaceProps = TMarginProps & TPaddingProps
 
 const getThemeValue = (theme: TTheme) => (value: TSpaceValue) => {
-  return value === '0' ? '0' : theme.space[value]
+  return value === '0' ? '0' : theme.space[value].px()
 }
 
 export const margin = (props: any) => {