@symbo.ls/preview 0.0.10 → 0.0.12

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/app.js

@@ -30,6 +30,7 @@ const App = {
   key: 'app',
 
   state,
+
   props: {
     theme: 'document',
     boxSize: '100% 100%',

package/src/components/ShapeSet.js

@@ -0,0 +1,45 @@
+'use strict'
+
+import { Link, Flex, ClickableItem } from '@symbo.ls/components'
+
+const ShapeItem = {
+  extend: [ClickableItem, Link, Flex],
+
+  props: el => ({
+    href: `/shapes/${el.parent.parent.key}-${el.key}`,
+    padding: 'B',
+    round: 'Z',
+    background: 'white .05',
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    _shape: {
+      theme: 'quaternary',
+      width: 'C',
+      height: 'C'
+    }
+  }),
+
+  _shape: {}
+}
+
+export const ShapeSet = {
+  props: {
+    label: {
+      display: 'block',
+      size: 'Y',
+      opacity: '.65',
+      padding: '0 0 Z 0'
+    },
+    nav: {
+      gap: 'A',
+      flexWrap: 'wrap'
+    }
+  },
+
+  label: {},
+  nav: {
+    extend: Flex,
+    childExtend: ShapeItem
+  }
+}

package/src/components/index.js

@@ -1,3 +1,4 @@
 'use strict'
 
 export * from './Header'
+export * from './ShapeSet'

package/src/config/index.js

@@ -16,4 +16,4 @@ const PREVIEW_CONF = {
   }
 }
 
-init({ verbose: false, ...PREVIEW_CONF })
+export default init({ verbose: false, ...PREVIEW_CONF })

package/src/index.js

@@ -11,6 +11,8 @@ import App from './app'
 import { Header } from './components'
 import { Library } from './pages'
 
+import { context } from './state'
+
 smbls.init({ verbose: false, ...SYMBOLS_CONF })
 
 DOM.define({
@@ -29,5 +31,6 @@ export default DOM.create({
   }
 }, undefined, 'app', {
   extend: [smbls.Box],
-  components: { ...smbls }
+  components: { ...smbls },
+  context
 })

package/src/pages/Color/colors.js

@@ -1,58 +1,42 @@
 'use strict'
 
-import { Button, SectionHeader, ColorTemplate } from '@symbo.ls/components'
+import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
+
+const mapColors = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { COLOR } = el.context.SYSTEM
+  const colorKeys = Object.keys(COLOR)
+  return colorKeys.map(v => COLOR[v])
+}
 
 export default {
-  tag: 'section',
   header: {
     extend: SectionHeader,
-    props: { padding: 'C 0 0 0' },
-    heading: {
-      caption: 'Color Palette',
-      p: { text: 'Document styling and theming' }
+    state: {
+      title: 'Color Palette',
+      p: 'Document styling and theming',
+      nav: [{
+        icon: 'plus',
+        href: '/colors/add-color'
+      }]
     }
   },
-  nav: {
-    style: {
-      display: 'flex',
-      gap: '1.2em',
+
+  content: {
+    extend: Flex,
+    props: {
+      gap: 'A1',
       alignItems: 'center'
     },
     colors: {
-      style: {
-        display: 'flex',
-        gap: '12px'
-      },
-
-      content: (el, s) => {
-        if (!el.__root.state.CONFIG) return
-        const { COLOR } = el.__root.state.CONFIG
-
-        const Colors = {}
-        Object.keys(COLOR).map(v => {
-          Colors[v] = { state: COLOR[v] }
-        })
-
-        return {
-          childExtend: ColorTemplate,
-          tag: 'fragment',
-
-          ...Colors
-        }
-      }
-    },
-    plus: {
-      extend: Button,
+      extend: Flex,
       props: {
-        round: 8,
-        icon: 'plus'
+        flow: 'row wrap',
+        gap: 'Z2'
       },
-      style: {
-        height: `26px`,
-        width: `26px`,
-        background: 'rgba(255, 255, 255, .06)',
-        color: 'white'
-      }
+
+      childExtend: ColorTemplate,
+      $setCollection: mapColors
     }
   }
 }

package/src/pages/Color/documentThemes.js

@@ -1,101 +1,80 @@
 'use strict'
 
-import { Notification, Flex, ClickableItem, SectionHeader, Shape, Block, IconText, Link } from '@symbo.ls/components'
+import { Notification, Flex, ClickableItem, SectionHeader, IconText, Link } from '@symbo.ls/components'
 
-// import { SectionHeader } from 'components/Header'
+const ThemeItem = {
+  extend: [Notification, ClickableItem],
+
+  // if: ({ context, state }) => {
+  //   if (!context?.SYSTEM) return
+  //   const { THEME } = context.SYSTEM
+  //   console.log(!!THEME.document[`@${state.key}`])
+  //   return !!THEME.document[`@${state.key}`]
+  // },
+
+  props: ({ state }) => ({
+    opacity: '.5',
+    textDecoration: 'none',
+    gap: 'Z',
+    round: 'Z',
+    padding: 'Z1 D2 A A1',
+    theme: `document @${state.key}`,
+    fontWeight: '400',
+    href: `/colors/document-theme/${state.key}`,
+
+    icon: {
+      size: 'Z',
+      padding: 'Z',
+      round: 'Z',
+      theme: `sepia @${state.key}`,
+      icon: state.icon
+    },
+    article: {
+      gap: 'X',
+      title: {
+        size: 'B'
+      },
+      p: {
+        fontSize: 'Y',
+        text: state.key
+      }
+    }
+  }),
+
+  icon: { extend: IconText },
+  article: {
+    title: {
+      text: ({ state }) => state.title
+    },
+    p: {
+      span: ({ state }) => 'prefers-color-scheme: '
+    }
+  }
+}
 
 export default {
-  tag: 'section',
   header: {
     extend: SectionHeader,
-    props: { padding: 'C 0 0 0' },
-    heading: {
-      caption: 'Document',
-      p: { text: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling' }
+    state: {
+      title: 'Global Themes',
+      p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling'
     }
   },
 
-  mode: {
+  modes: {
     extend: Flex,
-    tag: 'nav',
+    props: { gap: 'A' },
 
-    style: {
-      gap: 16
-    },
-
-    childExtend: {
-      extend: [Notification, ClickableItem, Link],
-      style: {
-        opacity: '.5',
-        textDecoration: 'none'
-      },
-      props: {
-        gap: 'Z',
-        round: 'Z',
-        padding: 'Z1 D2 A A1',
-        href: '/colors/documentThemes/addit-theme'
-      },
-      icon: {
-        extend: [Shape, Block, IconText],
-        props: {
-          size: 'Z',
-          padding: 'Z',
-          round: 'Z'
-        }
-      },
-      article: {
-        props: { gap: 'X' },
-        caption: {
-          style: { fontWeight: 'bold' },
-          props: { size: 'B' }
-        },
-        p: {
-          props: { size: 'Y' },
-          style: { '> span': { fontWeight: 'bold' } }
-        }
-      }
-    },
+    childExtend: [ThemeItem, Link],
 
-    ...[
-      {
-        props: el => {
-          if (!el.__root.state.CONFIG) return
-          const { THEME } = el.__root.state.CONFIG
-          return { theme: THEME.document.value }
-        },
-        icon: {
-          props: { theme: 'lightMode', icon: 'sun' }
-        },
-        article: {
-          caption: { text: 'Light' },
-          p: {
-            text: 'prefers-color-scheme:',
-            span: ' Light'
-          }
-        }
-      }, {
-        if: el => {
-          if (!el.__root.state.CONFIG) return
-          const { THEME } = el.__root.state.CONFIG
-          return THEME.document.variants && THEME.document.variants.dark
-        },
-        props: el => {
-          if (!el.__root.state.CONFIG) return
-          const { THEME } = el.__root.state.CONFIG
-          return { theme: THEME.document.value }
-        },
-        style: { color: 'white' },
-        icon: {
-          props: { theme: 'darkMode', icon: 'moon' }
-        },
-        article: {
-          caption: { text: 'Dark' },
-          p: {
-            text: 'prefers-color-scheme:',
-            span: ' Dark'
-          }
-        }
-      }
-    ]
+    $setCollection: () => [{
+      title: 'Light',
+      key: 'light',
+      icon: 'sun'
+    }, {
+      title: 'Dark',
+      key: 'dark',
+      icon: 'moon'
+    }]
   }
 }

package/src/pages/Color/index.js

@@ -1,20 +1,20 @@
 'use strict'
 
-import style from './style'
+import { Line } from '@symbo.ls/components'
 
-import { PageExtend } from '..'
-
-import palette from './colors'
 import documentThemes from './documentThemes'
+import palette from './colors'
 import themes from './themes'
 
 export const Color = {
-  style,
   key: 'colors',
-
-  extend: [PageExtend],
+  props: {
+    gap: '68px'
+  },
 
   documentThemes,
+  line: { extend: Line },
   palette,
+  line2: { extend: Line },
   themes
 }

package/src/pages/Color/themes.js

@@ -1,19 +1,9 @@
 'use strict'
 
-import { COLOR, opacify } from '@symbo.ls/scratch'
-import { Block, IconText, Link, Shape, Text, Flex, SectionHeader } from '@symbo.ls/components'
+import { IconText, Link, Flex, SectionHeader, Grid } from '@symbo.ls/components'
 
 const style = {
-  width: '100%',
-  maxWidth: '25%',
-  flex: '.25 .3333 25%',
   cursor: 'pointer',
-  color: 'white',
-  textDecoration: 'none',
-  boxSizing: 'border-box',
-  caption: {
-    marginTop: `${12 / 13}em`
-  },
 
   '> *': {
     transition: '350ms',
@@ -28,104 +18,103 @@ const style = {
 }
 
 export const ThemeTemplate = {
-  extend: [Link, Block],
-  style,
+  extend: [Link, Flex],
 
-  props: (el) => ({
-    href: `/theme/${el.key}`,
-    padding: 'A Z1'
-  }),
+  props: (el, s) => ({
+    flow: 'column',
+    href: `/theme/${s.key}`,
+    padding: 'A Z1',
+    fontWeight: '400',
+    color: 'white',
 
-  theme: {
     colors: {
-      extend: [Block, Text, Shape, Flex],
+      margin: '0 -Z',
+      round: 'A2',
+      overflow: 'hidden'
+    },
+
+    title: {
+      size: 'Y',
+      margin: 'Z 0 0 0'
+    },
+
+    style
+  }),
+
+  colors: {
+    extend: Flex,
+
+    childExtend: {
+      extend: [IconText, Flex],
       props: {
-        round: 'Z1'
-      },
-
-      style: {
-        boxShadow: `${COLOR.blue && opacify(COLOR.blue.value, 0.2)} 0 2px 35px`,
-        overflow: 'hidden',
-        div: {
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center'
-        }
-      },
-      _icon: '',
-      sun: {
-        extend: [Shape, Block, IconText, Flex],
-        props: {
-          icon: 'sun',
-          size: 'Z',
-          padding: 'Z1 0 Z1 A',
-          round: 'Z1 0 0 Z1'
-        },
-        style: (element, state) => ({
-          background: state.background,
-          color: state.color,
-          borderBottomLeftRadius: '12px',
-          '&:only-child': {
-            borderRadius: 12
-          }
-        })
-      },
-      moon: {
-        if: (el, state) => state.themes,
-        extend: [Shape, Block, IconText, Flex],
-        props: {
-          theme: 'secondary',
-          padding: 'Z1 0 Z1 A',
-          icon: 'moon',
-          round: '0 Z1 Z1 0'
-        },
-        style: (element, state) => ({
-          background: '', // state.themes.dark.backgroundColor,
-          color: '' // state.themes.dark.color
-        })
+        align: 'center flex-start',
+        flex: 1,
+        padding: 'Z1 A'
       }
+    },
+
+    just: {
+      if: (el, s) => !s['@dark'] && !s['@light'],
+      props: (el, s) => ({
+        theme: s.key,
+        height: 'A',
+        boxSizing: 'content-box',
+        padding: 'Z1 A'
+      })
+    },
+
+    sun: {
+      if: (el, s) => s['@light'],
+      props: (el, s) => ({
+        icon: { name: 'sun' },
+        theme: `${s.key} @light`
+      })
+    },
+
+    moon: {
+      if: (el, s) => s['@dark'],
+      props: (el, s) => ({
+        theme: `${s.key} @dark`,
+        icon: { name: 'moon' }
+      })
     }
   },
-  caption: {
-    extend: [Block, Text],
-    props: {
-      size: 'Y',
-      padding: 'Z 0 0 0'
-    },
-    text: (el, state) => el.parent.key
-  }
+  title: { text: (el, state) => state.key }
+}
+
+const mapThemes = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { THEME } = el.context.SYSTEM
+  const themeKeys = Object.keys(THEME)
+  return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }
 
 export default {
-  tag: 'section',
   header: {
     extend: SectionHeader,
-    props: { padding: 'C 0 0 0' },
-    heading: {
-      caption: 'Theme',
-      p: { text: 'Themes are used to prepare color setting abstractly and apply it to any component' }
+    state: {
+      title: 'Themes',
+      p: 'Themes are used to prepare color setting abstractly and apply it to any component',
+      nav: [{
+        icon: 'plus',
+        href: '/colors/add-color'
+      }]
     }
   },
-  colors: {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      margin: '0 -16px'
-    },
-
-    content: (el, s) => {
-      if (!el.__root.state.CONFIG) return
-      const { THEME } = el.__root.state.CONFIG
-
-      const Themes = {}
-      Object.keys(THEME).map(v => (Themes[v] = { state: THEME[v].value }))
 
-      return {
-        childExtend: ThemeTemplate,
-        tag: 'fragment',
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(6, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
+    },
 
-        ...Themes
-      }
+    childExtend: ThemeTemplate,
+    $setCollection: (el, s) => {
+      const c = mapThemes(el, s)
+      console.log(c)
+      return c
     }
   }
 }

package/src/pages/ColorEditor/index.js

@@ -127,13 +127,13 @@ export const ColorEditor = {
 
   on: {
     init: (el, s) => {
-      if (!el.__root || !el.__root.state.CONFIG) return
+      if (!el.context.SYSTEM) return
 
       var route = window.location.pathname
       var routes = route.slice(1).split('/')
       var param = routes[1]
 
-      const { THEME } = el.__root.state.CONFIG
+      const { THEME } = el.context.SYSTEM
       var content = THEME[`${param}`].value
       content.title = param
       el.state.value = content

package/src/pages/Shapes/index.js

@@ -1,121 +1,19 @@
 'use strict'
 
-import { styleShapeSet } from './style'
+import { Flex, SectionHeader, Line } from '@symbo.ls/components'
 
-import { Link, Flex, SectionHeader, ClickableItem } from '@symbo.ls/components'
-
-const ShapeItem = {
-  extend: [ClickableItem, Link, Flex],
-
-  props: el => ({
-    href: `/shapes/${el.parent.parent.key}-${el.key}`,
-    padding: 'B',
-    round: 'Z'
-  }),
-
-  _shape: {
-    props: {
-      theme: 'quaternary',
-      width: 'C',
-      height: 'C'
-    }
-  }
-}
-
-const ShapeSet = {
-  style: styleShapeSet,
-  label: {
-    props: {
-      display: 'block',
-      size: 'Y',
-      padding: '0 0 Z 0'
-    }
-  },
-  nav: {
-    extend: Flex,
-    props: { gap: 'Z1' },
-    childExtend: ShapeItem
-  }
-}
-
-const rectangle = {
-  extend: ShapeSet,
-  label: {
-    text: 'Rectangle ',
-    span: 'with rounds'
-  },
-  nav: [
-    {},
-    { _shape: { props: { round: 4 } } },
-    { _shape: { props: { round: 6 } } },
-    { _shape: { props: { round: 10 } } },
-    { _shape: { props: { round: 12 } } },
-    { _shape: { props: { round: 16 } } },
-    { _shape: { props: { round: 26 } } }
-  ]
-}
-
-const circle = {
-  extend: ShapeSet,
-  label: { text: 'Circle' },
-  nav: [{
-    _shape: { props: { shape: 'circle' } }
-  }]
-}
-
-const toolTip = {
-  extend: ShapeSet,
-  label: { text: 'Tooltip' },
-  nav: {
-    childExtend: {
-      childExtend: { props: { round: 'Y1' } }
-    },
-
-    ...[
-      { _shape: { props: { shape: 'tooltip', shapeDirection: 'top left' } } },
-      { _shape: { props: { shape: 'tooltip', shapeDirection: 'top center' } } },
-      { _shape: { props: { shape: 'tooltip', shapeDirection: 'right' } } },
-      { _shape: { props: { shape: 'tooltip', shapeDirection: 'bottom' } } }
-    ]
-  }
-}
-
-const tagShape = {
-  extend: ShapeSet,
-  label: { text: 'Tag' },
-  nav: {
-    childExtend: {
-      childExtend: { props: { round: 6 } }
-    },
-    ...[
-      { _shape: { props: { shape: 'tag', shapeDirection: 'left' } } },
-      { _shape: { props: { shape: 'tag', shapeDirection: 'top' } } },
-      { _shape: { props: { shape: 'tag', shapeDirection: 'right' } } },
-      { _shape: { props: { shape: 'tag', shapeDirection: 'bottom' } } }
-    ]
-  }
-}
-
-const bubble = {
-  extend: ShapeSet,
-  label: { text: 'Bubble' },
-  nav: [
-    { _shape: { props: { round: 'X B B X' } } },
-    { _shape: { props: { round: 'B X X B' } } },
-    { _shape: { props: { round: 'X X B B' } } },
-    { _shape: { props: { round: 'B B X X' } } },
-    { _shape: { props: { round: 'B X X X' } } },
-    { _shape: { props: { round: 'X B X X' } } },
-    { _shape: { props: { round: 'X X B X' } } },
-    { _shape: { props: { round: 'X X X B' } } }
-  ]
-}
+import {
+  rectangle,
+  circle,
+  toolTip,
+  tagShape,
+  bubble
+} from './shapeSet'
 
 export const Shapes = {
   extend: Flex,
   props: {
-    flow: 'column',
-    gap: 'F'
+    flow: 'column'
   },
 
   childExtend: {
@@ -123,9 +21,12 @@ export const Shapes = {
     props: {
       gap: 'A',
       flow: 'column',
+      header: {
+        margin: '- - A2'
+      },
       section: {
         flow: 'row wrap',
-        gap: 'A'
+        gap: 'A2'
       }
     },
     section: { extend: Flex }
@@ -149,12 +50,14 @@ export const Shapes = {
     }
   },
 
+  line: { extend: Line },
+
   svgShapes: {
     header: {
       extend: SectionHeader,
       heading: {
         title: 'SVG Shapes',
-        p: 'TBA...'
+        p: 'TBA'
       }
     }
   }

package/src/pages/Shapes/shapeSet.js

@@ -0,0 +1,76 @@
+'use strict'
+
+import { ShapeSet } from '../../components'
+
+export const rectangle = {
+  extend: ShapeSet,
+  label: {
+    text: 'Rectangle ',
+    span: 'with rounds'
+  },
+  nav: [
+    {},
+    { _shape: { props: { round: 4 } } },
+    { _shape: { props: { round: 6 } } },
+    { _shape: { props: { round: 10 } } },
+    { _shape: { props: { round: 12 } } },
+    { _shape: { props: { round: 16 } } },
+    { _shape: { props: { round: 26 } } }
+  ]
+}
+
+export const circle = {
+  extend: ShapeSet,
+  label: { text: 'Circle' },
+  nav: [{
+    _shape: { props: { shape: 'circle' } }
+  }]
+}
+
+export const toolTip = {
+  extend: ShapeSet,
+  label: { text: 'Tooltip' },
+  nav: {
+    childExtend: {
+      childExtend: { props: { round: 'Y1' } }
+    },
+
+    ...[
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'top left' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'top center' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'right' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'bottom' } } }
+    ]
+  }
+}
+
+export const tagShape = {
+  extend: ShapeSet,
+  label: { text: 'Tag' },
+  nav: {
+    childExtend: {
+      childExtend: { props: { round: 6 } }
+    },
+    ...[
+      { _shape: { props: { shape: 'tag', shapeDirection: 'left' } } },
+      { _shape: { props: { shape: 'tag', shapeDirection: 'top' } } },
+      { _shape: { props: { shape: 'tag', shapeDirection: 'right' } } },
+      { _shape: { props: { shape: 'tag', shapeDirection: 'bottom' } } }
+    ]
+  }
+}
+
+export const bubble = {
+  extend: ShapeSet,
+  label: { text: 'Bubble' },
+  nav: [
+    { _shape: { props: { round: 'X B B X' } } },
+    { _shape: { props: { round: 'B X X B' } } },
+    { _shape: { props: { round: 'X X B B' } } },
+    { _shape: { props: { round: 'B B X X' } } },
+    { _shape: { props: { round: 'B X X X' } } },
+    { _shape: { props: { round: 'X B X X' } } },
+    { _shape: { props: { round: 'X X B X' } } },
+    { _shape: { props: { round: 'X X X B' } } }
+  ]
+}

package/src/pages/Shapes/style.js

@@ -1,22 +1,5 @@
 'use strict'
 
-export const styleShapeSet = {
-  label: {
-    display: 'block',
-    opacity: '.65',
-    span: { opacity: '.2' }
-  },
-  nav: {
-    flexWrap: 'wrap',
-    a: {
-      cursor: 'pointer',
-      background: 'rgba(255, 255, 255, .05)',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }
-}
-
 export const styleUploadSVG = {
   div: {
     background: 'rgba(255, 255, 255, .05)',

package/src/pages/Spaces/index.js

@@ -1,7 +1,6 @@
 'use strict'
 
-import { Link, TabHeader } from '@symbo.ls/components'
-import { PageExtend } from '..'
+import { SectionHeader } from '@symbo.ls/components'
 
 import preview from './preview'
 import sequence from './sequence'
@@ -10,11 +9,12 @@ import boxModel from './boxModel'
 export const Spaces = {
   key: 'spaces',
 
-  extend: PageExtend,
-
   state: {
     activePage: 'spaces',
-    activeTab: 'preview'
+    activeTab: 'preview',
+
+    title: 'Spacing',
+    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
   },
 
   define: { routes: param => param },
@@ -34,20 +34,7 @@ export const Spaces = {
   },
 
   header: {
-    extend: TabHeader,
-    style: {
-      margin: `${42 / 16}em -2em 2em -2em`,
-      paddingLeft: '2em'
-    },
-    tabs: {
-      childExtend: {
-        extend: [Link]
-      },
-
-      preview: { props: { text: 'Spacing Preview' } }
-      // sequence: { props: { text: 'Sequence' } },
-      // boxModel: { props: { text: 'Box Model' } }
-    }
+    extend: SectionHeader
   },
 
   preview

package/src/pages/Typography/docFonts.js

@@ -1,12 +1,11 @@
 'use strict'
 
-import { Block, Grid, FontObject, Link, SectionHeader, FontFamilyObject } from '@symbo.ls/components'
+import { Grid, FontObject, FontFamilyObject, Line } from '@symbo.ls/components'
 import { TypeSection } from './shared'
 
 const mapFonts = (el, s) => {
-  if (!el.__root.state.CONFIG) return
-  const { FONT } = el.__root.state.CONFIG
-
+  if (!el.context.SYSTEM) return
+  const { FONT } = el.context.SYSTEM
   const fontKeys = Object.keys(FONT)
 
   return fontKeys.map(v => {
@@ -16,113 +15,84 @@ const mapFonts = (el, s) => {
     const fontWeightCaption = weights[0] === 'variable' ? 'variable' : `${weightsLength} style${weightsLength > 1 ? 's' : ''}`
 
     return {
-      props: {
-        href: `/typography/document-fonts/font-settings/${v}`,
-        fontTitle: v
-      },
-
-      caption: {},
-      p: {},
-      description: [
-        { props: { icon: 'variableFont', text: fontWeightCaption } }
+      title: v,
+      href: `/typography/document-fonts/font-settings/${v}`,
+      labels: [
+        { icon: 'variableFont', text: fontWeightCaption }
       ]
     }
   })
 }
 
-const line = {
-  extend: Block,
-  props: {
-    margin: 'D 0'
-  },
-  style: {
-    height: '.2px',
-    background: 'rgba(255, 255, 255, .1)',
-    marginLeft: '-100%',
-    marginRight: '-100%'
-  }
+const mapFontFamilies = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { FONT_FAMILY } = el.context.SYSTEM
+  const fontFamilyKeys = Object.keys(FONT_FAMILY)
+
+  return fontFamilyKeys.map(v => {
+    const val = FONT_FAMILY[v]
+    if (v === 'default') return
+    return {
+      title: v,
+      href: `/typography/font-family/${v}`,
+      val
+    }
+  }).filter(v => v)
 }
 
-const fontFamilies = {
-  extend: Block,
-  props: { padding: '0 0 E 0' },
+const Fonts = {
+  extend: TypeSection,
   header: {
-    extend: SectionHeader,
-    heading: {
-      caption: { props: { text: 'Font Families' } },
-      p: { props: { text: 'Setup a set and fallback fonts as font FAMILIES' } }
+    state: {
+      title: 'Document Fonts',
+      p: 'Document @font-face, default and backup fonts',
+      nav: [{
+        icon: 'plus',
+        href: '/typography/upload-font'
+      }]
     }
   },
+
   content: {
     extend: Grid,
     props: {
-      flexAlign: 'center space-between',
-      columns: 'repeat(3, 1fr)',
-      gap: 'Z'
-    },
-    childExtend: {
-      extend: [FontFamilyObject, Link],
-      props: { href: '/typography/document-fonts/font-family' },
-      style: { textDecoration: 'none' }
+      columns: 'repeat(2, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
     },
-
-    content: el => {
-      if (!el.__root.state.CONFIG) return
-      const { FONT_FAMILY } = el.__root.state.CONFIG
-
-      const FAMILIES = Object.keys(FONT_FAMILY).map(v => {
-        const val = FONT_FAMILY[v]
-        if (v === 'default') return null
-        return {
-          caption: { props: { text: v } },
-          p: { props: { text: val.value } }
-        }
-      })
-
-      return {
-        tag: 'fragment',
-        ...FAMILIES
-      }
-    }
+    childExtend: FontObject,
+    $setCollection: mapFonts
   }
 }
 
-export default {
+const FontFamilies = {
   extend: TypeSection,
+  props: { padding: '0 0 E 0' },
   header: {
-    extend: Block,
-    heading: {
-      p: { props: { text: 'Document @font-face, default and backup fonts' } }
-    },
-    nav: {
-      add: {
-        extend: Link,
-        props: {
-          icon: 'plus',
-          href: '/typography/document-fonts/upload-font'
-        }
-      }
+    state: {
+      title: 'Font Families',
+      p: 'Setup a set and fallback fonts as font families',
+      nav: [{
+        icon: 'plus',
+        href: '/typography/add-font-family'
+      }]
     }
   },
-
-  wrapper: {
-    fonts: {
-      extend: Grid,
-      props: {
-        columns: 'repeat(2, 1fr)',
-        gap: 'A'
-      },
-
-      childExtend: FontObject,
-
-      content: (el, s) => {
-        return {
-          tag: 'fragment',
-          ...mapFonts(el, s)
-        }
-      }
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(3, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
     },
-    line,
-    fontFamilies
+
+    childExtend: FontFamilyObject,
+    $setCollection: mapFontFamilies
   }
 }
+
+export default {
+  Fonts,
+  line: { extend: Line },
+  FontFamilies
+}

package/src/pages/Typography/docStyles.js

@@ -13,8 +13,11 @@ export default {
   extend: TypeSection,
 
   header: {
+    state: {
+      p: 'Document styling and theming provides global themes of the entire app, imagine it as a :root styling'
+    },
     heading: {
-      p: { props: { text: 'Document styling and theming provides global themes of the entire app, imagine it as a :root styling' } }
+      title: null
     },
     nav: {
       add: {

package/src/pages/Typography/index.js

@@ -1,10 +1,7 @@
 'use strict'
 
-import PageExtend from '../PageExtend'
+import { SectionHeader } from '@symbo.ls/components'
 
-import { Link, TabHeader } from '@symbo.ls/components'
-
-import style from './style'
 import state from './state'
 
 import documentFonts from './docFonts'
@@ -12,41 +9,33 @@ import documentStyle from './docStyles'
 import typeScale from './typeScale'
 
 export const Typography = {
-  extend: PageExtend,
-
-  on: {
-    init: (el, s) => {
-      const route = window.location.pathname
-      const routes = route.slice(1).split('/')
-      s.activeTab = routes[1] || state.activeTab
-    }
-  },
-
   define: { routes: param => param },
 
-  style,
   state,
 
   routes: {
-    'document-fonts': documentFonts,
-    'type-scale': typeScale,
-    'document-styles': documentStyle
+    '/': documentFonts,
+    '/document-fonts': documentFonts,
+    '/type-scale': typeScale,
+    '/document-styles': documentStyle
   },
 
   header: {
-    extend: TabHeader,
-    style: {
-      paddingLeft: '2em'
-    },
-    tabs: {
-      childExtend: { extend: [Link] },
-      'document-fonts': { props: { text: 'Document Fonts' } },
-      'type-scale': { props: { text: 'Type Scale' } },
-      'document-styles': { props: { text: 'Document Styles' } }
-    }
+    extend: SectionHeader
   },
 
   page: {
-    content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
+    content: (el, s) => {
+      const content = el.parent?.routes['/' + s.activeTab]
+      return { extend: content }
+    }
+  },
+
+  on: {
+    init: (el, s) => {
+      const route = window.location.pathname
+      const routes = route.slice(1).split('/')
+      s.activeTab = routes[1] || state.activeTab
+    }
   }
 }

package/src/pages/Typography/shared.js

@@ -4,7 +4,6 @@ import { SectionHeader } from '@symbo.ls/components'
 
 export const TypeSection = {
   header: {
-    extend: SectionHeader,
-    heading: { caption: null }
+    extend: SectionHeader
   }
 }

package/src/pages/Typography/state.js

@@ -9,7 +9,9 @@ export default {
   sequence: {},
   type: 'font-size',
 
+  title: 'Typography',
+  p: 'A general configuration of type properties on the document.',
+
   sampleText: 'Today is a big day for our tribe. The year ends.',
-  activePage: 'typography',
-  activeTab: 'documentFonts'
+  activeTab: ''
 }

package/src/pages/Typography/typeScale.js

@@ -1,7 +1,5 @@
 'use strict'
 
-import { styleTypeScale } from './style'
-
 import {
   Flex, Block, Text, Grid,
   SequenceGraph,
@@ -49,7 +47,6 @@ const ScalingTools = {
 }
 
 export default {
-  style: styleTypeScale,
   extend: TypeSection,
 
   header: {

package/src/state.js

@@ -1,7 +1,13 @@
 'use strict'
 
+import SYSTEM from './config'
 import { LIBRARY } from '../.symbols'
 
 export const state = {
-  LIBRARY
+  globalTheme: 'dark'
+}
+
+export const context = {
+  LIBRARY,
+  SYSTEM
 }

package/src/pages/Color/style.js

@@ -1,7 +0,0 @@
-'use strict'
-
-export default {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '68px',
-}

package/src/pages/Typography/style.js

@@ -1,11 +0,0 @@
-'use strict'
-
-export const styleTypeScale = {
-}
-
-export default {
-  '> div header': {
-    lineHeight: '2em'
-  },
-  p: { margin: 0 }
-}