@symbo.ls/preview 0.0.16 → 0.0.18

package/.symbols/button-download/index.js

@@ -14,9 +14,11 @@ const component = {
   props: {
     icon: 'arrowDown',
     gap: 'X2',
-    theme: 'quaternary',
+    theme: 'quinary',
     text: 'Download',
-    padding: 'Z2 B2',
+    // padding: 'Z2 B2',
+    border: '.2em, solid, blue .2',
+    padding: 'A1 B2',
     round: 'C'
   }
 }

package/.symbols/button-pro/index.js

@@ -15,7 +15,7 @@ const component = {
   extend: KangorooButton,
 
   props: {
-    theme: 'lightDark',
+
     round: 'Z2',
     padding: ['X1', 'X1', 'X1', 'A'],
     size: 'A',
@@ -31,7 +31,6 @@ const component = {
 
     child: {
       round: 12,
-      theme: ['lightDark', 'inverse'],
       size: 'Z',
       padding: 'Z A2',
       text: '1 month free'
@@ -45,7 +44,7 @@ const component = {
 const code = `{
   extend: Button,
   props: {
-    theme: 'lightDark',
+
     round: 12,
     padding: ['X1', 'X1', 'X1', 'A'],
     size: 'A',
@@ -54,7 +53,6 @@ const code = `{
 
     label: {
       round: 12,
-      theme: ['lightDark', 'inverse'],
       size: 'Z',
       gap: 'A',
       padding: 'Z A2',
@@ -65,7 +63,7 @@ const code = `{
 
 const defaultState = {}
 const props = {
-  theme: 'lightDark',
+
   round: 12,
   padding: ['X1', 'X1', 'X1', 'A'],
   size: 'A',

package/.symbols/button-theme-switcher/index.js

@@ -17,7 +17,6 @@ const component = {
 
   props: {
     round: 'C',
-    theme: 'lightDark',
     size: 'A',
     padding: 'X1 Y X1 A1',
     gap: 'Z1',
@@ -29,7 +28,6 @@ const component = {
     },
 
     child: {
-      theme: ['lightDark', 'inverse'],
       round: 'C',
       icon: 'moon',
       padding: 'Z Z1',
@@ -52,7 +50,6 @@ const code2 = `{
   extend: KangorooButton,
   props: {
     round: 'C',
-    theme: 'lightDark',
     size: 'Z',
 
     light: {
@@ -61,7 +58,6 @@ const code2 = `{
     },
 
     dark: {
-      theme: ['lightDark', 'inverse'],
       round: 'C',
       icon: 'moon',
       text: 'Dark Mode'
@@ -72,7 +68,6 @@ const code2 = `{
 const defaultState = {}
 const props = {
   round: 'C',
-  theme: 'lightDark',
   size: 'Z',
 
   light: {
@@ -81,7 +76,6 @@ const props = {
   },
 
   child: {
-    theme: ['lightDark', 'inverse'],
     round: 'C',
     icon: 'moon',
     text: 'Dark Mode'

package/.symbols/button-user/index.js

@@ -22,7 +22,6 @@ const component = {
     gap: 'Y2',
     padding: 'W2 A W2 W2',
     icon: 'arrowAngleDown',
-    theme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
   }),
 
   user: {

package/.symbols/datepicker/index.js

@@ -13,13 +13,24 @@ const category = CATEGORIES[7]
 
 const component = {
   style,
-  extend: DatePicker
+  extend: DatePicker,
+  props: {
+    theme: null,
+    background: '--theme-quinary-dark-background',
+    style: {
+      backdropFilter: 'blur(3px)',
+    }
+  }
 }
 
 const code = `{}`
 
 const defaultState = {}
-const props = {}
+const props = {
+  style: {
+    backdropFilter: 'blur(3px)',
+  }
+}
 
 const settings = {
   gridOptions: { colspan: 7, rowspan: 5 }

package/.symbols/dropdown-list/index.js

@@ -14,14 +14,6 @@ const component = {
   props: {
     theme: 'quaternary', round: 'A'
   },
-  // props: (el, s) => {
-  //   return {
-  //     round: 'Z',
-  //     depth: '16',
-  //     theme: s.sceneTheme === 'light' ? 'lightDark' : 'dark',
-  //     rowTheme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
-  //   }
-  // },
 
   ...[
     { span: { props: { text: 'Today' } } },

package/.symbols/field/index.js

@@ -12,7 +12,6 @@ const category = CATEGORIES[2]
 const component = {
   extend: Field,
   props: (el, s) => ({
-    theme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
   })
 }
 

package/.symbols/label/index.js

@@ -12,7 +12,6 @@ const category = CATEGORIES[0]
 const component = {
   extend: Label,
   props: {
-    theme: 'lightDark'
   }
 }
 

package/package.json

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

package/src/components/ShapeSet.js

@@ -12,9 +12,10 @@ const ShapeItem = {
     background: 'white .05',
     alignItems: 'center',
     justifyContent: 'center',
+    theme: 'tertiary',
 
     _shape: {
-      theme: 'quaternary',
+      theme: 'quinary',
       width: 'C',
       height: 'C'
     }

package/src/config/index.js

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

package/src/config/theme.js

@@ -1,83 +1,13 @@
 'use strict'
 
-import dots from '../assets/dots.png'
-import dotsDark from '../assets/dotsDark.png'
-
-const MODAL = {
-  modalFade: {
-    color: 'white',
-    backdropFilter: 'blur(3px)',
-    backgroundColor: 'modalFade 0.75'
-  },
-  modalBackground: {
-    color: 'white',
-    backgroundColor: 'modalBackground'
-  }
-}
-
-const SCENE = {
-  darkScene: {
-    backgroundColor: 'white 0.02',
-    '> div': { backgroundImage: `url(${dots})` }
-  },
-  lightScene: {
-    backgroundColor: 'white',
-    '> div': { backgroundImage: `url(${dotsDark})` }
-  }
-}
-
-const DROPDOWN = {
-  dropdownItem: {
-    color: 'white 0.65',
-    state: {
-      hover: {
-        color: 'white',
-        background: 'gradient-light-active'
-      },
-      active: {
-        color: 'white',
-        background: 'gradient-light-active'
-      }
-    }
-  },
-  dropdownItemActive: {
-    color: 'white',
-    background: 'gradient-light-active'
-  }
-}
-
 export const EDITOR_THEMES = {
-  header: {
-    color: 'white',
-    backgroundColor: 'black 0.85',
-    borderColor: 'white 0.09',
-    backdropFilter: 'blur(3px)'
-  },
-
   shape: {
     background: 'shapeColor',
     border: 'none'
-  },
-
-  ...MODAL,
-  ...SCENE,
-  ...DROPDOWN
+  }
 }
 
 export const COMPONENT_THEMES = {
-  lightDark: {
-    background: 'white',
-    color: 'darkPurple',
-    variants: {
-      inverse: true
-    }
-  },
-
-  alert: {
-    background: 'yellow',
-    color: 'black'
-  },
-
   label: {
     background: 'brown',
     color: 'white'

package/src/index.js

@@ -5,6 +5,7 @@ import DOM from 'domql'
 import SYMBOLS_CONF from '@symbo.ls/config'
 import style from './style'
 
+import 'smbls'
 import * as smbls from '@symbo.ls/components'
 
 import App from './app'

package/src/pages/Editor/scene.js

@@ -33,7 +33,6 @@ const buttonThemeSwitcher = {
 
   props: {
     round: 'C',
-    theme: 'lightDark',
     size: 'A',
     padding: 'X1 Y X1 A1',
     gap: 'Z1',
@@ -45,7 +44,6 @@ const buttonThemeSwitcher = {
     },
 
     dark: {
-      theme: ['lightDark', 'inverse'],
       round: 'C',
       icon: 'moon',
       padding: 'Z Z1',

package/src/pages/Export/scene.js

@@ -2,6 +2,7 @@
 
 import { BREAKPOINTS } from '@symbo.ls/scratch'
 import { Scene } from '@symbo.ls/components'
+import { updateReset } from '@symbo.ls/init'
 
 export default {
   extend: Scene,
@@ -41,6 +42,7 @@ export default {
       },
       comp: (el, s) => ({
         extend: [s.component],
+        props: { inheritSpacingRatio: true }
       }),
 
       on: {
@@ -50,6 +52,7 @@ export default {
             fontSize: s.base + 'px',
             spacingRatio: s.ratio
           }, { preventUpdate: true })
+          updateReset()
         }
       }
     }

package/src/pages/Export/state.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { TYPOGRAPHY } from '@symbo.ls/scratch'
+import { SPACING, TYPOGRAPHY } from '@symbo.ls/scratch'
 
 export default {
   descriptionTheme: 'dark',
@@ -11,7 +11,7 @@ export default {
   currentFontSizeIndex: 3,
 
   base: TYPOGRAPHY.base,
-  ratio: TYPOGRAPHY.ratio,
+  ratio: SPACING.ratio,
   range: [-1, +4],
   scales: {},
   sequence: {},

package/src/pages/Icons/index.js

@@ -5,7 +5,7 @@ import { copyStringToClipboard } from '@symbo.ls/utils'
 import { IconText, Flex, Link, ClickableItem, SectionHeader, Grid } from '@symbo.ls/components'
 
 import * as ACCESSIBILITY from '@symbo.ls/icons/src/accessibility'
-import * as BOXSIZE from '@symbo.ls/icons/src/boxSize'
+import * as BOXMODEL from '@symbo.ls/icons/src/boxModel'
 import * as DISPLAY from '@symbo.ls/icons/src/display'
 import * as INTERACTIVE from '@symbo.ls/icons/src/interactive'
 import * as LOGOS from '@symbo.ls/icons/src/logos'
@@ -19,10 +19,11 @@ const IconItem = {
   extend: [ClickableItem, Link, IconText],
   props: ({ state }) => ({
     round: 'A',
-    size: 'D',
+    size: 'C1',
     aspectRatio: '1 / 1',
     flexAlign: 'center center',
     href: '/icons/edit-icon/' + state.name,
+    theme: 'tertiary',
     icon: {
       fontSize: 'C2',
       name: state.name
@@ -70,10 +71,11 @@ const ICON_GROUPS = [{
   list: Object.keys(SVG).map(name => ({ name }))
 }, {
   title: 'Accessibility',
-  list: Object.keys(ACCESSIBILITY).map(name => ({ name }))
+  list: Object.keys(ACCESSIBILITY).map(name => ({ name })),
+  p: ''
 }, {
-  title: 'Boxsize',
-  list: Object.keys(BOXSIZE).map(name => ({ name }))
+  title: 'Box Model',
+  list: Object.keys(BOXMODEL).map(name => ({ name }))
 }, {
   title: 'Display',
   list: Object.keys(DISPLAY).map(name => ({ name }))

package/src/pages/Shapes/shapeSet.js

@@ -9,14 +9,14 @@ export const 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 } } }
-  ]
+    { _shape: { round: '0' } },
+    { _shape: { round: 'X' } },
+    { _shape: { round: 'Y' } },
+    { _shape: { round: 'Z' } },
+    { _shape: { round: 'A' } },
+    { _shape: { round: 'B' } },
+    { _shape: { round: 'C' } }
+  ].map(props => ({ props }))
 }
 
 export const circle = {
@@ -36,11 +36,11 @@ export const toolTip = {
     },
 
     ...[
-      { _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' } } }
-    ]
+      { _shape: { shape: 'tooltip', shapeDirection: 'top' } },
+      { _shape: { shape: 'tooltip', shapeDirection: 'right' } },
+      { _shape: { shape: 'tooltip', shapeDirection: 'bottom' } },
+      { _shape: { shape: 'tooltip', shapeDirection: 'left' } }
+    ].map(props => ({ props }))
   }
 }
 
@@ -52,11 +52,11 @@ export const tagShape = {
       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' } } }
-    ]
+      { _shape: { shape: 'tag', shapeDirection: 'left' } },
+      { _shape: { shape: 'tag', shapeDirection: 'top' } },
+      { _shape: { shape: 'tag', shapeDirection: 'right' } },
+      { _shape: { shape: 'tag', shapeDirection: 'bottom' } }
+    ].map(props => ({ props }))
   }
 }
 
@@ -64,13 +64,13 @@ 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' } } }
-  ]
+    { _shape: { round: 'X B B X' } },
+    { _shape: { round: 'B X X B' } },
+    { _shape: { round: 'X X B B' } },
+    { _shape: { round: 'B B X X' } },
+    { _shape: { round: 'B X X X' } },
+    { _shape: { round: 'X B X X' } },
+    { _shape: { round: 'X X B X' } },
+    { _shape: { round: 'X X X B' } }
+  ].map(props => ({ props }))
 }

package/src/pages/Spaces/Preview.js

@@ -0,0 +1,62 @@
+'use strict'
+
+import { Grid, Scene } from '@symbo.ls/components'
+
+const returnScale = (state, key) => {
+  const { scales } = state
+  return (scales[state[key]] || 0) + 'em'
+}
+
+export const Preview = {
+  extend: Scene,
+
+  props: {
+    margin: '0 -Z1'
+  },
+
+  scene: {
+    boxModel: {
+      extend: Grid,
+      props: {
+        color: 'gray5',
+        fontSize: 'Z',
+        columns: '30px auto 30px',
+        rows: '30px auto 30px',
+        templateAreas: `"x1 t x2"
+          "l content r"
+          "x3 b x4"`,
+        alignItems: 'center',
+        textAlign: 'center'
+      },
+
+      ...[
+        ...['', { text: (el, s) => s.paddingTop || '', style: { gridArea: 't' } }, ''],
+        ...[
+          { text: (el, s) => s.paddingLeft || '', style: { gridArea: 'l' } },
+          {
+            props: ({ state }) => ({
+              fontSize: `${state.base}px`,
+              borderRadius: state['borderRadius'],
+              lineHeight: 1,
+              gridArea: 'content',
+              borderStyle: 'solid',
+              theme: 'quaternary',
+              padding: 'X2',
+              borderColor: 'grassgreen 0.25',
+              borderWidth: [
+                returnScale(state, 'paddingTop'),
+                returnScale(state, 'paddingRight'),
+                returnScale(state, 'paddingBottom'),
+                returnScale(state, 'paddingLeft')
+              ],
+              style: { whiteSpace: 'nowrap' }
+            }),
+            text: (el, s) => `Base ${s.base}`
+          }, {
+            text: (el, s) => s.paddingRight || '', style: { gridArea: 'r' }
+          }],
+        ...['', { text: (el, s) => s.paddingBottom || '', style: { gridArea: 'b' } }, '']
+      ]
+    }
+  }
+}

package/src/pages/Spaces/SpacingScale.js

@@ -0,0 +1,53 @@
+'use strict'
+
+import { SequenceSliders, Flex } from '@symbo.ls/components'
+import { Preview } from './Preview'
+import { Table } from './Table'
+
+export const SpacingScale = {
+  extend: Flex,
+
+  props: {
+    flow: 'column',
+    gap: 'C1'
+  },
+
+  sliders: {
+    extend: SequenceSliders,
+    props: {
+      position: 'sticky',
+      top: 'D',
+      background: 'black .5',
+      zIndex: '2',
+      margin: '-C -B -B',
+      padding: 'C B B',
+      style: {
+        backdropFilter: 'blur(15px)'
+      }
+    }
+  },
+
+  scale: {
+    extend: Flex,
+    props: {
+      flow: 'column',
+      gap: 'B1',
+      margin: '0 0 C2',
+
+      table: { flex: 1 },
+      preview: { flex: 1 }
+    },
+
+    table: { extend: Table },
+    preview: {
+      extend: Preview,
+      props: {
+        position: 'sticky',
+        bottom: 'Z',
+        style: {
+          backdropFilter: 'blur(15px)'
+        }
+      }
+    }
+  }
+}

package/src/pages/Spaces/Table.js

@@ -0,0 +1,206 @@
+'use strict'
+
+import { ClickableItem, Grid, Pseudo, WiderButton } from '@symbo.ls/components'
+
+import { mapSequence, sortSequence } from '@symbo.ls/utils'
+
+const Buttons = {
+  childExtend: {
+    extend: [ClickableItem, WiderButton],
+    props: ({ key, state, parent }) => ({
+      isActive: parent.parent.parent.state[key] === state.key,
+      padding: 'Z',
+      icon: key,
+      theme: null,
+      '@dark': {
+        background: 'gray1',
+        color: 'gray5'
+      },
+      '@light': {
+        background: 'white .5',
+        color: 'gray7'
+      },
+      ':hover': {
+        theme: 'quaternary'
+      },
+      '.isActive': {
+        color: 'blue',
+        ':hover': {
+          color: 'blue'
+        }
+      }
+    }),
+
+    attr: { title: el => el.key },
+
+    on: {
+      click: (ev, { key, state, parent }) => {
+        const parentState = parent.parent.parent.state
+        const active = parentState[key] === state.key
+        if (active) {
+          delete parentState[key] && parentState.update()
+        } else {
+          parentState.update({ [key]: state.key })
+        }
+      }
+    }
+  },
+
+  paddingTop: {},
+  paddingRight: {},
+  paddingBottom: {},
+  paddingLeft: {},
+  borderRadius: {}
+}
+
+const Cell = {
+  tag: 'div',
+  props: {
+    padding: 'X2 C2 X2 0'
+  }
+}
+
+const Row = {
+  extend: Grid,
+  key: state => state.key,
+
+  props: ({ state }) => ({
+    columns: '10ch 14ch 13ch 10ch 18em 1fr',
+    alignItems: 'center',
+    isBase: state.index === 0,
+    isNotActive: (state.key && state.key.length) !== 1,
+
+    margin: '0 -A',
+    padding: '0 B',
+
+    '.isNotActive': {
+      opacity: 0.8
+    },
+    '.isBase': {
+      opacity: 1,
+      background: 'gray1 .5'
+    },
+
+    ':hover': {
+      background: 'gray1 .65'
+    },
+
+    i: {
+      text: state.key,
+      isActive: (state.key && state.key.length) === 1,
+      isNotActive: (state.key && state.key.length) !== 1,
+
+      '.isActive': {
+        fontWeight: '600',
+        '@dark': { color: 'gray9' },
+        '@light': { color: 'gray3' }
+      },
+      '.isNotActive': {
+        fontWeight: '400',
+        '@dark': { color: 'gray6' },
+        '@light': { color: 'gray7' }
+      }
+    },
+    decimal: {
+      text: state.decimal,
+      color: 'gray6',
+      fontWeight: '300'
+    },
+    px: {
+      text: state.val,
+      '@dark': { color: 'gray9' },
+      '@light': { color: 'gray3' }
+    },
+    em: {
+      color: 'gray6',
+      text: state.scaling + 'em'
+    },
+    buttons: {
+      display: 'flex',
+      gap: '.2em',
+      opacity: '1',
+      ':empty': { padding: '0' }
+    },
+    graph: {
+      margin: '0 0 0 -B2',
+      line: {
+        widthRange: `${state.val}px` || 0,
+        height: '2px',
+        background: 'blue',
+        borderRadius: '2px'
+      }
+    }
+  }),
+
+  childExtend: Cell,
+
+  i: {},
+  em: {},
+  decimal: {},
+  px: {},
+  buttons: Buttons,
+
+  graph: { line: {} }
+}
+
+const HeaderRow = {
+  extend: Row,
+
+  childExtend: {
+    props: {
+      color: 'gray7',
+      style: { paddingBlock: '0 .618em' }
+    }
+  },
+
+  i: '#',
+  em: 'em',
+  decimal: 'decimal',
+  px: 'px',
+  buttons: null,
+  graph: null
+}
+
+export const Table = {
+  extend: Pseudo,
+  tag: 'section',
+
+  props: {
+    overflow: 'hidden',
+    position: 'relative',
+    header: {
+      '@dark': { color: 'gray6' },
+      '@light': { color: 'gray7' }
+    },
+
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: '0',
+      left: '100%'
+    },
+    '@dark': {
+      color: 'gray8',
+      '::after': {
+        background: 'black',
+        boxShadow: 'black, 0 0px 50px 50px'
+      }
+    },
+    '@light': {
+      color: 'gray3',
+      '::after': {
+        background: 'gray12',
+        boxShadow: 'gray12, 0 0px 50px 50px'
+      }
+    }
+  },
+
+  header: HeaderRow,
+
+  cnt: {
+    childExtend: Row,
+    $setCollection: (el) => mapSequence(el.state, sortSequence)
+  }
+}

package/src/pages/Spaces/__/index copy.js

@@ -0,0 +1,45 @@
+'use strict'
+
+import { SectionHeader } from '@symbo.ls/components'
+
+import preview from './preview'
+import sequence from './sequence'
+import boxModel from './boxModel'
+
+export const Spaces = {
+  key: 'spaces',
+
+  state: {
+    activePage: 'spaces',
+    activeTab: 'preview',
+
+    title: 'Spacing',
+    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
+  },
+
+  define: { routes: param => param },
+
+  routes: {
+    preview,
+    sequence,
+    boxModel
+  },
+
+  on: {
+    init: (el, s) => {
+      var route = window.location.pathname
+      var routes = route.slice(1).split('/')
+      s.activeTab = routes[1] || s.activeTab
+    }
+  },
+
+  header: {
+    extend: SectionHeader
+  },
+
+  preview
+
+  // page: {
+  //   content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
+  // }
+}

package/src/pages/Spaces/index.js

@@ -1,45 +1,23 @@
 'use strict'
 
-import { SectionHeader } from '@symbo.ls/components'
-
-import preview from './preview'
-import sequence from './sequence'
-import boxModel from './boxModel'
+import { TypeSection } from '../Typography/shared'
+import { SpacingScale } from './SpacingScale'
+import { state } from './state'
 
 export const Spaces = {
-  key: 'spaces',
-
-  state: {
-    activePage: 'spaces',
-    activeTab: 'preview',
-
-    title: 'Spacing',
-    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
-  },
-
-  define: { routes: param => param },
-
-  routes: {
-    preview,
-    sequence,
-    boxModel
-  },
-
-  on: {
-    init: (el, s) => {
-      var route = window.location.pathname
-      var routes = route.slice(1).split('/')
-      s.activeTab = routes[1] || s.activeTab
-    }
-  },
+  extend: TypeSection,
+  state,
 
   header: {
-    extend: SectionHeader
+    state: {
+      title: 'Spacing',
+      p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
+    }
   },
 
-  preview
-
-  // page: {
-  //   content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
-  // }
+  SpacingScale
 }
+
+// preview,
+// sequence,
+// boxModel

package/src/pages/Spaces/state.js

@@ -1,9 +1,8 @@
 'use strict'
 
-import { SPACING } from '@symbo.ls/components'
-import { TYPOGRAPHY_SEQUENCE } from '../Export/const'
+import { SPACING } from '@symbo.ls/scratch'
 
-export default {
+export const state = {
   tabs: [{
     key: 0,
     name: 'Default'
@@ -11,8 +10,13 @@ export default {
     key: 1,
     name: 'Font Size'
   }],
-  activeTab: '0',
-  sequence: TYPOGRAPHY_SEQUENCE,
-  spacingRatio: SPACING.ratio,
-  currentFontSizeIndex: 3
+
+  base: SPACING.base,
+  ratio: SPACING.ratio,
+  subSequence: true,
+  range: [-5, +12],
+  scales: {},
+  sequence: {},
+  vars: {},
+  type: 'spacing-scale'
 }