@symbo.ls/preview 2.7.16 → 2.7.18

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "symbo.ls",
-  "version": "2.7.16",
+  "version": "2.7.18",
   "main": "src/app.js",
   "scripts": {
     "link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",

package/src/components/DesignComponent.js

@@ -53,6 +53,7 @@ const propertyNumber = {
 
 const componentProperties = {
   extend: Flex,
+  state: 'properties',
   props: {
     padding: 'Z2 A',
     flow: 'column',
@@ -60,7 +61,7 @@ const componentProperties = {
     background: 'gray1'
   },
   childExtend: propertyNumber,
-  $setStateCollection: ({ state }) => state.properties
+  $setStateCollection: ({ state }) => state.parse()
 }
 
 export const DesignComponent = {

package/src/components/Header.js

@@ -1,7 +1,8 @@
 'use strict'
 
 import { router } from '@domql/router'
-import { HeaderSignup, HeaderOfMember, HeaderInitial } from '@symbo.ls/components'
+import { HeaderSignup, HeaderOfMember } from '@symbo.ls/components'
+import { getCookie } from 'domql/packages/cookie'
 
 export const Header = {
   props: {
@@ -17,16 +18,27 @@ export const Header = {
   }
 }
 
+// '/': HeaderSignup, // HeaderInitial,
+// '/init': HeaderInitial, // HeaderInitial,
+
 let cacheToken
 export const HeaderOnRouter = {
   extend: Header,
   props: { width: '100%' },
 
   define: { routes: param => param },
-  routes: {
-    '/': HeaderSignup, // HeaderInitial,
-    '/init': HeaderInitial, // HeaderInitial,
-    '/*': HeaderOfMember
+  routes: ({ state }) => {
+    const appKey = getCookie('appKey')
+    if (appKey || state.appKey) {
+      return {
+        '/*': HeaderOfMember
+      }
+    } else {
+      return {
+        '/*': HeaderSignup
+
+      }
+    }
   },
 
   on: {

package/src/components/IconsGroup.js

@@ -14,9 +14,13 @@ const IconItem = {
     flexAlign: 'center center',
     href: '/icons/edit-icon/' + state.value,
     theme: 'tertiary',
+    transitionProperty: 'transform, opacity, border-radius',
     icon: {
       fontSize: 'C2',
       name: state.value
+    },
+    ':hover': {
+      round: '0'
     }
   }),
 

package/src/pages/Account/Personal.js

@@ -0,0 +1,59 @@
+'use strict'
+
+import { Flex, Grid } from '@symbo.ls/components'
+
+import { fieldsGridProps } from './fieldsGridProps'
+
+const fields = {
+  extend: Grid,
+
+  InputField_email: {
+    gridColumn: 'span 2',
+    title: { text: 'Your Email' }
+  },
+
+  InputField_username: {
+    title: { text: 'Your Username' }
+  },
+
+  SelectField2_role: {
+    title: { text: 'Your role' }
+  },
+
+  PasswordField: {
+    title: { text: 'Change Password' }
+  },
+
+  PasswordField_repeat: {
+    title: { opacity: '0' }
+  }
+}
+
+const props = {
+  boxSize: '100% 100%',
+  flow: 'column',
+  title: {
+    text: 'Your personal account',
+    padding: '- - C2 -'
+  },
+  fields: {
+    ...fieldsGridProps
+  },
+  button: {
+    text: 'Update',
+    padding: 'Z1 C1',
+    fontSize: 'Z2',
+    margin: 'auto - - -',
+    width: 'fit-content'
+  }
+}
+
+export const PersonalAccount = {
+  extend: Flex,
+  props,
+
+  title: {},
+  fields,
+
+  ContinueButton: {}
+}

package/src/pages/Account/{projectAccount.js → Project.js}

@@ -4,17 +4,13 @@ import { Flex } from '@symbo.ls/components'
 import icon from '../Init/Personalize/icon'
 import fields from '../Init/Personalize/fields'
 
-export const projectAccount = {
+export const ProjectAccount = {
   extend: Flex,
   props: {
     flow: 'column',
     height: '100%'
   },
 
-  class: {
-    show: (element, state) => state.activePersonalAccount
-  },
-
   SectionHeader: {
     title: ({ state }) => 'Settings for ' + state.projectName,
     p: 'Some settings will be stored only in this device.'
@@ -29,7 +25,7 @@ export const projectAccount = {
   },
 
   Flex: {
-    props: { gap: 'C1' },
+    props: { gap: 'C1', align: 'flex-start' },
 
     icon,
     fields

package/src/pages/Account/index.js

@@ -1,20 +1,23 @@
 'use strict'
 
+import { router } from '@domql/router'
 import { Flex, IconButton, Link, SquareButton } from '@symbo.ls/components'
 
-import { personalAccount } from './personalAccount'
-import { projectAccount } from './projectAccount'
+import { PersonalAccount } from './Personal'
+import { ProjectAccount } from './Project'
 
 const ProjectButton = {
-  extend: [SquareButton],
-  props: { theme: 'transparent' },
-  User: {
-    props: ({ state }) => ({
+  extend: [Link, SquareButton],
+  props: ({ state }) => ({
+    theme: 'transparent',
+    href: '/account/' + state.key.split('.')[0],
+    User: {
       round: '100%',
       src: state.icon && state.icon.src,
       title: state.projectName
-    })
-  },
+    }
+  }),
+  User: {},
   on: {
     click: (event, el, s) => {
       const { id, name } = s.parse()
@@ -23,7 +26,7 @@ const ProjectButton = {
         projectId: id,
         activeProject: el.key
       })
-      s.update({ activePersonalAccount: false })
+      Link.on.click(event, el, s)
     }
   }
 }
@@ -54,13 +57,8 @@ const sidebar = {
   Flex: {
     extend: Flex,
     profile: {
-      extend: [IconButton],
-      props: { icon: 'openSource' },
-      on: {
-        click: (event, element, state) => {
-          state.update({ activePersonalAccount: true })
-        }
-      }
+      extend: [Link, IconButton],
+      props: { icon: 'human', href: '/account' }
     },
 
     projects: {
@@ -102,8 +100,18 @@ export const Account = {
   props,
 
   sidebar,
-  content: {
-    personalAccount,
-    projectAccount
+
+  define: { routes: param => param },
+  routes: {
+    '/': PersonalAccount,
+    '/*': ProjectAccount
+  },
+
+  on: {
+    render: element => {
+      const { pathname, hash } = window.location
+      const url = pathname + hash
+      router(element, url, {})
+    }
   }
 }

package/src/pages/Color/globalThemes.js

@@ -3,6 +3,8 @@
 import { GlobalThemeTemplate, Flex, SectionHeader, Link, ClickableItem } from '@symbo.ls/components'
 
 export default {
+  state: 'THEME',
+
   header: {
     extend: SectionHeader,
     state: {

package/src/pages/Color/index.js

@@ -6,6 +6,7 @@ import themes from './themes'
 
 export const Color = {
   key: 'colors',
+  state: 'PROJECT_SYSTEM',
 
   props: { gap: 'A' },
 

package/src/pages/Color/palette.js

@@ -3,13 +3,15 @@
 import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
 
 const mapColors = (el, s) => {
-  const { COLOR } = s.__projectSystem
-  if (!COLOR) return
+  const COLOR = s.parse()
+  console.log(s)
   const colorKeys = Object.keys(COLOR)
   return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
 }
 
 export default {
+  state: 'COLOR',
+
   header: {
     extend: SectionHeader,
     state: {
@@ -22,7 +24,7 @@ export default {
     }
   },
 
-  content: {
+  cnt: {
     extend: Flex,
     props: {
       flow: 'row wrap',

package/src/pages/Color/themes.js

@@ -3,13 +3,15 @@
 import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 
 const mapThemes = (el, s) => {
-  const { THEME } = s.__projectSystem
-  if (!THEME) return
+  const THEME = s.parse()
+  console.log(s)
   const themeKeys = Object.keys(THEME)
   return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }
 
 export default {
+  state: 'THEME',
+
   header: {
     extend: SectionHeader,
     state: {
@@ -22,7 +24,7 @@ export default {
     }
   },
 
-  content: {
+  cnt: {
     extend: Grid,
     props: {
       columns: 'repeat(5, 1fr)',
@@ -31,6 +33,6 @@ export default {
     },
 
     childExtend: ThemeTemplate,
-    $setStateCollection: (el, s) => mapThemes(el, s)
+    $setStateCollection: mapThemes
   }
 }

package/src/pages/DesignSystem/Dashboard/banners.js

@@ -13,7 +13,7 @@ export default {
 
   props: {
     align: 'stretch space-between',
-    margin: 'C1 -Z1',
+    margin: '-A -Z1 B',
     gap: 'B1'
   },
 

package/src/pages/DesignSystem/Dashboard/index.js

@@ -2,7 +2,7 @@
 
 import { Flex } from '@symbo.ls/components'
 
-import banners from './banners' // eslint-disable-line no-unused-vars
+import banners from './banners'
 import summary from './summary'
 import quickstart from './quickstart'
 
@@ -16,7 +16,7 @@ export const DesignSystemDashboard = {
     p: { text: 'Create your Design System guidelines' }
   },
 
-  // banners,
+  banners,
   summary,
   quickstart
 }

package/src/pages/DesignSystem/Dashboard/quickstart.js

@@ -26,7 +26,6 @@ export default {
 
   Flex: {
     props: {
-      // display: 'inline-flex',
       gap: 'D1',
       align: 'flex-start space-between',
       childProps: {
@@ -43,7 +42,7 @@ export default {
       Terminal: {
         note: { text: 'Install Symbols to your project' },
         props: {
-          command: { text: 'npm i smbls -g' }
+          command: { text: 'npm i smbls --save' }
         }
       }
     },
@@ -63,12 +62,11 @@ export default {
       extend: 'QuickStartCode',
       QuickStartNumber: { text: '3' },
       Code: {
+        props: {},
         note: { text: 'Create .symbolsrc.js file in your project and insert your Symbols key' },
-        props: ({ state }) => ({
-          code: {
-            text: `{ "key": "${state.appKey}" }`
-          }
-        })
+        code: {
+          text: ({ state }) => `{ "key": "${state.appKey}" }`
+        }
       }
     },
 

package/src/pages/DesignSystem/Dashboard/state.js

@@ -1,10 +1,7 @@
 'use strict'
 
-export default ({ parent }) => {
-  const { state } = parent
-  const { __projectSystem } = state
-
-  if (!__projectSystem) return
+export const applySummaryCollection = (el, s) => {
+  if (!s) return
   const {
     COLOR,
     THEME,
@@ -16,130 +13,130 @@ export default ({ parent }) => {
     TIMING,
     MEDIA,
     DEVICES
-  } = __projectSystem
+  } = s
+
+  if (!COLOR) return
 
-  return {
-    data: [{
-      icon: 'colorOutline',
-      href: '/colors',
-      iconTheme: 'theme',
-      title: 'colors',
-      paragraph: 'Colorize styles manually',
-      iconBackground: 'red',
-      properties: [{
-        property: 'Colors',
-        value: COLOR && Object.keys(COLOR).length
-      }, {
-        property: 'Themes',
-        value: THEME && Object.keys(THEME).length
-      }]
+  return [{
+    icon: 'colorOutline',
+    href: '/colors',
+    iconTheme: 'theme',
+    title: 'colors',
+    paragraph: 'Colorize styles manually',
+    iconBackground: 'red',
+    properties: [{
+      property: 'Colors',
+      value: COLOR && Object.keys(COLOR).length
+    }, {
+      property: 'Themes',
+      value: THEME && Object.keys(THEME).length
+    }]
+  }, {
+    icon: 'typographyOutline',
+    href: '/typography',
+    iconTheme: 'typography',
+    title: 'typography',
+    paragraph: 'style a typed material',
+    properties: [{
+      property: 'Base size',
+      value: TYPOGRAPHY && TYPOGRAPHY.base + 'px'
+    }, {
+      property: 'Ratio',
+      value: TYPOGRAPHY && TYPOGRAPHY.ratio
+    }, {
+      property: 'Styles',
+      value: TYPOGRAPHY && TYPOGRAPHY.styles && Object.keys(TYPOGRAPHY.styles).length
+    }, {
+      property: 'Fonts',
+      value: FONT && Object.keys(FONT).length
+    }, {
+      property: 'Families',
+      value: FONT_FAMILY && Object.keys(FONT_FAMILY).length - 1
+    }]
+  }, {
+    icon: 'spaceOutline',
+    href: '/space',
+    iconTheme: 'space',
+    title: 'Spacing',
+    paragraph: 'Manage properties of a size',
+    properties: [{
+      property: 'Ratio',
+      value: SPACING && SPACING.ratio
+    }, {
+      property: 'Templates',
+      value: 'TBA'
+    }]
+  }, {
+    icon: 'shape',
+    href: '/shape',
+    iconTheme: 'shape',
+    title: 'shapes',
+    paragraph: 'Design an outline to a chosen component',
+    properties: [{
+      property: 'HTML',
+      value: '32'
+    }, {
+      property: 'SVG',
+      value: 'TBA'
+    }]
+  }, {
+    icon: 'iconsOutline',
+    href: '/icons',
+    iconTheme: 'color',
+    title: 'Icons',
+    paragraph: 'Label a role of subject with glyphs',
+    properties: [{
+      property: 'All',
+      value: ICONS && Object.keys(ICONS).length
     }, {
-      icon: 'typographyOutline',
-      href: '/typography',
-      iconTheme: 'typography',
-      title: 'typography',
-      paragraph: 'style a typed material',
-      properties: [{
-        property: 'Base size',
-        value: TYPOGRAPHY && TYPOGRAPHY.base + 'px'
-      }, {
-        property: 'Ratio',
-        value: TYPOGRAPHY && TYPOGRAPHY.ratio
-      }, {
-        property: 'Styles',
-        value: TYPOGRAPHY && TYPOGRAPHY.styles && Object.keys(TYPOGRAPHY.styles).length
-      }, {
-        property: 'Fonts',
-        value: FONT && Object.keys(FONT).length
-      }, {
-        property: 'Families',
-        value: FONT_FAMILY && Object.keys(FONT_FAMILY).length - 1
-      }]
+      property: 'Linear',
+      value: ICONS && Object.keys(ICONS).filter(v => v.includes('Outline')).length
     }, {
-      icon: 'spaceOutline',
-      href: '/space',
-      iconTheme: 'space',
-      title: 'Spacing',
-      paragraph: 'Manage properties of a size',
-      properties: [{
-        property: 'Ratio',
-        value: SPACING && SPACING.ratio
-      }, {
-        property: 'Templates',
-        value: 'TBA'
-      }]
+      property: 'Colored',
+      value: ICONS && Object.keys(ICONS).filter(v => v.includes('Colored')).length
+    }]
+  }, {
+    icon: 'clock',
+    href: '/timing',
+    iconTheme: 'icons',
+    title: 'Timing',
+    paragraph: 'Tokens for transitions and animations',
+    properties: [{
+      property: 'Timing base',
+      value: TIMING && TIMING.base + 'ms'
     }, {
-      icon: 'shape',
-      href: '/shape',
-      iconTheme: 'shape',
-      title: 'shapes',
-      paragraph: 'Design an outline to a chosen component',
-      properties: [{
-        property: 'HTML',
-        value: '32'
-      }, {
-        property: 'SVG',
-        value: 'TBA'
-      }]
+      property: 'Ratio',
+      value: TIMING && TIMING.ratio
     }, {
-      icon: 'iconsOutline',
-      href: '/icons',
-      iconTheme: 'color',
-      title: 'Icons',
-      paragraph: 'Label a role of subject with glyphs',
-      properties: [{
-        property: 'All',
-        value: ICONS && Object.keys(ICONS).length
-      }, {
-        property: 'Linear',
-        value: ICONS && Object.keys(ICONS).filter(v => v.includes('Outline')).length
-      }, {
-        property: 'Colored',
-        value: ICONS && Object.keys(ICONS).filter(v => v.includes('Colored')).length
-      }]
+      property: 'Transitions',
+      value: 'TBA'
     }, {
-      icon: 'clock',
-      href: '/timing',
-      iconTheme: 'icons',
-      title: 'Timing',
-      paragraph: 'Tokens for transitions and animations',
-      properties: [{
-        property: 'Timing base',
-        value: TIMING && TIMING.base + 'ms'
-      }, {
-        property: 'Ratio',
-        value: TIMING && TIMING.ratio
-      }, {
-        property: 'Transitions',
-        value: 'TBA'
-      }, {
-        property: 'Animations',
-        value: 'TBA'
-      }]
+      property: 'Animations',
+      value: 'TBA'
+    }]
+  }, {
+    icon: 'deviceMobileOutline',
+    href: '/media-query',
+    title: 'Breakpoints',
+    paragraph: 'Label a role of subject with glyphs',
+    properties: [{
+      property: 'Breakpoints',
+      value: MEDIA && Object.keys(MEDIA).length
     }, {
-      icon: 'deviceMobileOutline',
-      href: '/media-query',
-      title: 'Breakpoints',
-      paragraph: 'Label a role of subject with glyphs',
-      properties: [{
-        property: 'Breakpoints',
-        value: MEDIA && Object.keys(MEDIA).length
-      }, {
-        property: 'Screens',
-        value: DEVICES && Object.keys(DEVICES).length
-      }]
+      property: 'Screens',
+      value: DEVICES && Object.keys(DEVICES).length
+    }]
+  }, {
+    icon: 'threeDots',
+    href: '/sequence',
+    title: 'Sequence',
+    paragraph: 'The mapping system of generative sizing units',
+    properties: [{
+      property: 'Breakpoints',
+      value: '8'
     }, {
-      icon: 'threeDots',
-      href: '/sequence',
-      title: 'Sequence',
-      paragraph: 'The mapping system of generative sizing units',
-      properties: [{
-        property: 'Breakpoints',
-        value: '8'
-      }, {
-        property: 'Screens',
-        value: '3'
-      }]
+      property: 'Screens',
+      value: '3'
     }]
-  }
+  }]
 }

package/src/pages/DesignSystem/Dashboard/summary.js

@@ -3,9 +3,11 @@
 import { ClickableItem, Link } from '@symbo.ls/components'
 import { DesignComponent } from '../../../components'
 
-import state from './state'
+import { applySummaryCollection } from './state'
+
+export const cnt = {
+  state: 'summary',
 
-export const content = {
   props: {
     margin: '- -Z',
     columns: '15rem',
@@ -14,7 +16,8 @@ export const content = {
 
   childExtend: {
     extend: [Link, ClickableItem, DesignComponent],
-    props: () => ({
+    state: true,
+    props: ({ state }) => ({
       maxWidth: 'none',
       width: '100%',
       margin: '- - B1',
@@ -23,7 +26,7 @@ export const content = {
     })
   },
 
-  $setStateCollection: ({ state }) => state.data
+  $setPropsCollection: (el, s) => s.parse()
 }
 
 export default {
@@ -31,12 +34,19 @@ export default {
     margin: '- - C1'
   },
 
-  state,
+  state: 'PROJECT_SYSTEM',
 
   SectionHeader: {
     title: 'Design System takeaways',
     p: 'Your tokens in the system at a glance'
   },
 
-  content
+  cnt,
+
+  on: {
+    initUpdate: (el, s) => {
+      if (s.summary) return
+      s.summary = applySummaryCollection(el, s)
+    }
+  }
 }

package/src/pages/Init/Personalize/icon.js

@@ -6,14 +6,18 @@ import { UploadImage } from '../../../components'
 
 export default {
   extend: UploadImage,
-  props: {
+  props: ({ state }) => ({
+    position: 'relative',
+
     title: { text: 'Project icon' },
+
     element: {
       flow: 'column',
       position: 'relative',
       width: 'fit-content',
       padding: 'A',
       gap: '0',
+      opacity: !!state.icon,
 
       p: {
         text: 'Drag and drop or click',
@@ -21,25 +25,10 @@ export default {
         textAlign: 'center'
       }
     }
-  },
+  }),
+
   title: {},
   element: {
-    User: {
-      extend: User,
-      props: ({ state }) => ({
-        position: 'absolute',
-        fontSize: 'H',
-        top: '50%',
-        left: '50%',
-        transform: 'translate3d(-50%, -50%, 1px)',
-        src: state.icon && state.icon.src,
-        key: state.projectName,
-        transition: 'C defaultBezier opacity',
-        opacity: (state.icon && state.icon.src) ? '1' : '0',
-        pointerEvents: 'none'
-      })
-    },
-
     input: {
       on: {
         change: (ev, el, s) => {
@@ -68,5 +57,20 @@ export default {
         }
       }
     }
+  },
+
+  User: {
+    extend: User,
+    props: ({ state }) => ({
+      position: 'absolute',
+      fontSize: 'H',
+      bottom: 'Y',
+      left: 'Y1',
+      src: state.icon && state.icon.src,
+      key: state.projectName,
+      transition: 'C defaultBezier opacity',
+      opacity: (state.icon && state.icon.src) ? '1' : '0',
+      pointerEvents: 'none'
+    })
   }
 }

package/src/pages/Theme/buttonTitlesGrid.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { ButtonTitle, Flex } from '@symbo.ls/components'
+import { ButtonTitle, Grid } from '@symbo.ls/components'
 
 export const columnTitleButton = {
   extend: ButtonTitle,
@@ -20,10 +20,17 @@ export const columnTitleButton = {
 }
 
 export const buttonTitlesGrid = {
-  extend: Flex,
+  extend: Grid,
   props: {
-    justifyContent: 'space-between',
-    padding: 'B2 E1 - -'
+    justiyItems: 'start',
+    padding: 'B2 - - -',
+    columns: 'repeat(4, auto)',
+    gap: 'B2+W1',
+    width: 'fit-content',
+    justifyItems: 'start',
+    '@tabletL': { columns: 'repeat(3, auto)' },
+    '@tabletM': { columns: 'repeat(2, auto)' },
+    childProps: { width: 'F+Z1' }
   },
 
   childExtend: {

package/src/pages/Theme/index.js

@@ -6,7 +6,6 @@ import {
   Flex,
   SectionHeader,
   AccessibilityCheck,
-  SceneThemingBar,
   Pseudo,
   CommonField
 } from '@symbo.ls/components'
@@ -16,9 +15,6 @@ import preview from './preview'
 import { buttonsHeader } from './buttonsHeader'
 import { selectsGrid } from './selectsGrid'
 import { buttonTitlesGrid, columnTitleButton } from './buttonTitlesGrid'
-// import { themingTools } from './themingTools'
-// import { interactivity } from './interactivity'
-// import { friendTheme } from './friendTheme'
 
 import style from './style'
 
@@ -29,7 +25,6 @@ const ThemeNameField = {
 
   props: ({ state }) => ({
     gap: '0',
-
     title: {
       text: 'Name the theme',
       fontSize: 'Z'
@@ -44,10 +39,10 @@ const ThemeNameField = {
       round: '0',
       textTransform: 'capitalize',
 
-      border: 'dashed, gray5',
+      border: 'dashed, gray3',
       borderWidth: '0 0 1px',
 
-      text: (el, s) => s.themeName,
+      text: state.themeName,
 
       ':empty::before': {
         content: '"You name it"',
@@ -143,6 +138,17 @@ export const Theme = {
   extend: PageTemplate,
 
   style,
+  props: {
+    padding: '- D2 - -',
+    boxSizing: 'border-box',
+    '@screenL': { fontSize: '20px' },
+    '@screenM': { fontSize: '17px' },
+    '@screenS': { fontSize: 'A' },
+    style: {
+      paddingLeft: '0',
+      '@media only screen and (min-width: 1920px)': { fontSize: '22px' }
+    }
+  },
 
   state: {
     sceneTheme: 'dark',
@@ -172,31 +178,37 @@ export const Theme = {
   header: {
     extend: SectionHeader,
     props: {
-      margin: '0 0 B2',
+      margin: '0 - B2 0',
       justifyContent: 'space-between'
+      // border: '2px solid purple'
     },
     heading: null,
     ThemeNameField,
     nav: null,
-    buttons: { extend: buttonsHeader }
+    buttons: { extend: buttonsHeader },
+    SceneThemingBar: {}
   },
 
   cnt: {
     extend: Flex,
-    props: { gap: 'D' },
+    props: { gap: 'C2', padding: '0' },
 
     preview,
 
     colorEdit: {
       props: {
+        flex: '1',
         gap: '',
         flexFlow: 'column'
+        // border: '5px solid red'
       },
 
       colors: {
         props: {
           padding: '- - C1 -',
-          style: { borderBottom: '.5px solid rgba(255, 255, 255, .3)' }
+          border: 'solid, gray2',
+          borderWidth: '0 0 1px 0'
+          // style: { borderBottom: '.5px solid rgba(255, 255, 255, .1)' }
         },
         selectsGrid,
         buttonTitlesGrid
@@ -205,7 +217,8 @@ export const Theme = {
       onHover: {
         extend: CommonField,
         props: {
-          style: { borderBottom: '.5px solid rgba(255, 255, 255, .3)' },
+          border: 'solid, gray2',
+          borderWidth: '0 0 1px 0',
           gap: 'B2',
           padding: 'B - C1 -',
           title: {
@@ -248,10 +261,6 @@ export const Theme = {
         title: {},
         iconBox: {}
       }
-
-      // themingTools
-      // interactivity,
-      // friendTheme
     }
   },
 
@@ -261,6 +270,4 @@ export const Theme = {
       padding: 'E 0 F'
     }
   }
-
-  // footer
 }

package/src/pages/Theme/selectsGrid.js

@@ -5,20 +5,27 @@ import { CommonField, ColorSelect, Grid } from '@symbo.ls/components'
 export const selectsGrid = {
   extend: Grid,
   props: {
-    columns: 'repeat(4, 1fr)',
-    gap: 'C'
+    columns: 'repeat(4, auto)',
+    style: { width: 'fit-content' },
+    gap: 'B2+W1',
+    justifyItems: 'start',
+    '@tabletL': { columns: 'repeat(3, auto)' },
+    '@tabletM': { columns: 'repeat(2, auto)' }
   },
 
   childExtend: {
     extend: CommonField,
+    tag: 'div',
     props: (el, s) => ({
-      width: 'fit-content',
+      width: 'F+Z',
       title: {
         text: s.title,
         fontSize: 'Z'
       },
       element: {
-        width: 'F+Z1',
+        width: '100%',
+        height: 'B2+W',
+        padding: '0 W1 0 Z1',
         title: {
           box: {
             background: s.color,
@@ -28,6 +35,13 @@ export const selectsGrid = {
             text: s.name,
             fontSize: 'Z1'
           }
+        },
+        buttons: {
+          gap: 'W',
+          childProps: {
+            boxSize: 'fit-content',
+            padding: 'W1+W1'
+          }
         }
       }
     }),

package/src/pages/Theme/style.js

@@ -24,6 +24,7 @@ export const styleColorTones = {
 export default {
   display: 'flex',
   flexFlow: 'column',
+
   'header > nav a:hover': {
     background: 'rgba(255, 255, 255, .08)',
     opacity: 1,

package/src/pages/Typography/collection.js

@@ -52,12 +52,13 @@ const isTag = v => HTML_TAGS.root.indexOf(v) > -1 || HTML_TAGS.body.indexOf(v) >
 const isHelper = v => v.slice(0, 1) === '.'
 
 const getCollectionFromArray = (arr, s) => {
-  const { __projectSystem } = s
-  const { TYPOGRAPHY } = __projectSystem
-  if (!TYPOGRAPHY) return
+  const TYPOGRAPHY = s.parse()
   const styles = TYPOGRAPHY.styles || {}
+
+  if (!s.sequence) return {}
+
   return arr.map((v, k) => {
-    const result = getTypeStyle(v, __projectSystem)
+    const result = getTypeStyle(v, s.parent.parse())
     return {
       key: v,
       value: {
@@ -102,10 +103,8 @@ export const tagsCollection = (el, s) => {
 }
 
 export const helpersCollection = (el, s) => {
-  const { __projectSystem } = s
-  const { TYPOGRAPHY } = __projectSystem
-  if (!TYPOGRAPHY) return
-  const { styles } = TYPOGRAPHY
+  const TYPOGRAPHY = s.parse()
+  const styles = TYPOGRAPHY.styles || {}
 
   const HELPERS = Object.keys(styles)
     .filter(v => v.slice(0, 1) === '.')

package/src/pages/Typography/documentStyles.js

@@ -66,14 +66,14 @@ export default {
             text: '<p>'
           }
         }
-      }, 
+      },
       code: {
         props: {
           title: {
             text: '<code>'
           }
         }
-      }, 
+      },
       pre: {
         props: {
           title: {
@@ -109,16 +109,5 @@ export default {
         props: { icon: 'arrowAngleMirroringVertical' }
       }]
     }
-  },
-
-  on: {
-    init: (el, s) => {
-      const { TYPOGRAPHY } = s.__projectSystem
-      if (!TYPOGRAPHY) return
-      const { styles } = TYPOGRAPHY
-      if (styles) {
-        s.update({ styles }, { preventUpdate: true })
-      } else TYPOGRAPHY.styles = {}
-    }
   }
 }

package/src/pages/Typography/index.js

@@ -1,14 +1,12 @@
 'use strict'
 
-import state from './state'
-
 import typeScale from './typeScale'
 import documentStyles from './documentStyles'
 import stylesHelpers from './stylesHelpers'
 import { mapSequence, sortSequence } from '@symbo.ls/components'
 
 export const Typography = {
-  state,
+  state: 'PROJECT_SYSTEM',
 
   SectionHeader: {
     margin: '0 0 C',
@@ -16,28 +14,56 @@ export const Typography = {
     p: 'A general configuration of type properties on the document.'
   },
 
-  SlidersWithResponsive: {},
+  cnt: {
+    state: 'TYPOGRAPHY',
+
+    SlidersWithResponsive: {},
+
+    line: { extend: 'Line' },
+
+    documentStyles,
+    line1: { extend: 'Line' },
 
-  line: { extend: 'Line' },
+    stylesHelpers,
+    line2: { extend: 'Line' },
 
-  documentStyles,
-  line1: { extend: 'Line' },
+    typeScale,
 
-  stylesHelpers,
-  line2: { extend: 'Line' },
+    on: {
+      stateCreated: (el, s) => {
+        s.update({
+          base: s.base || 16,
+          ratio: s.ratio || 1.125,
+          range: s.range || [-3, +8],
+          subsequence: s.subsequence || true,
+          styles: s.styles || {},
+          h1Matches: s.h1Matches || +6,
+          scales: {},
+          sequence: {},
+          vars: {},
+          type: 'demo-font-size',
+          sampleText: 'Today is a big day for our tribe. The year ends.'
+        }, {
+          preventUpdate: true,
+          preventUpdateListener: true
+        })
 
-  typeScale,
+        if (s.base && s.range) mapSequence(s, sortSequence)
+      },
+      stateUpdated: (el, s, changes) => {
+        const { base, ratio, range, subsequence, h1Matches } = changes
 
-  on: {
-    init: (el, s) => {
-      mapSequence(s, sortSequence)
-    },
-    stateUpdated: (el, s, changes) => {
-      s.projectSystemUpdate({
-        TYPOGRAPHY: changes
-      }, {
-        preventUpdate: true
-      })
+        s.update({
+          base,
+          ratio,
+          range,
+          subsequence,
+          h1Matches
+        }, {
+          preventUpdate: true,
+          preventUpdateListener: true
+        })
+      }
     }
   }
 }

package/src/pages/Typography/typeScale.js

@@ -74,9 +74,10 @@ export default {
       extend: TypeScaleSequence,
       $setStateCollection: (el) => {
         const { state } = el
-        state.sequence = {}
-        el.removeContent()
-        return mapSequence(state, sortSequence)
+        // return state.sequence
+        // state.sequence = {}
+        // el.removeContent()
+        if (state.base && state.range) { return mapSequence(state, sortSequence) }
       }
     },
 

package/src/pages/Account/personalAccount.js

@@ -1,73 +0,0 @@
-'use strict'
-
-import { Flex, InputField, Grid, ContinueButton, PasswordField, SelectField2 } from '@symbo.ls/components'
-
-import { fieldsGridProps } from './fieldsGridProps'
-
-const fields = {
-  extend: Grid,
-  ...[
-    {
-      extend: InputField,
-      props: {
-        gridColumn: 'span 2',
-        title: { text: 'Your Email' }
-      }
-    },
-
-    {
-      extend: InputField,
-      props: { title: { text: 'Your Username' } }
-    },
-
-    {
-      extend: SelectField2,
-      props: { title: { text: 'Your role' } }
-    },
-
-    {
-      extend: PasswordField,
-      props: { title: { text: 'Change Password' } }
-    },
-
-    {
-      extend: PasswordField,
-      props: { title: { opacity: '0' } }
-    }
-  ]
-
-}
-
-const props = {
-  boxSize: '100% 100%',
-  flow: 'column',
-  title: {
-    text: 'Your personal account',
-    padding: '- - C2 -'
-  },
-  fields: {
-    ...fieldsGridProps
-  },
-  button: {
-    text: 'Update',
-    padding: 'Z1 C1',
-    fontSize: 'Z2',
-    margin: 'auto - - -',
-    width: 'fit-content'
-  }
-}
-
-export const personalAccount = {
-  props,
-  extend: Flex,
-
-  class: {
-    show: (element, state) => state.activePersonalAccount
-      ? { display: 'flex' }
-      : { display: 'none' }
-  },
-
-  title: {},
-  fields,
-  button: { extend: ContinueButton }
-}

package/src/pages/Typography/state.js

@@ -1,18 +0,0 @@
-'use strict'
-
-export default ({ parent }) => {
-  const rootState = parent.state
-  const typography = rootState.__projectSystem.TYPOGRAPHY || {}
-  return {
-    base: typography.base || 16,
-    ratio: typography.ratio || 1.125,
-    range: typography.range || [-3, +8],
-    subsequence: typography.subsequence || true,
-    h1Matches: +6,
-    scales: {},
-    sequence: {},
-    vars: {},
-    type: 'demo-font-size',
-    sampleText: 'Today is a big day for our tribe. The year ends.'
-  }
-}