@symbo.ls/preview 0.0.15 → 0.0.17

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: 'A B2',
     round: 'C'
   }
 }

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

@@ -15,11 +15,12 @@ const component = {
   extend: KangorooButton,
 
   props: {
-    theme: 'lightDark',
+
     round: 'Z2',
     padding: ['X1', 'X1', 'X1', 'A'],
     size: 'A',
     gap: 'Z',
+    fontWeight: 'bold',
 
     iconText: {
       gap: 'X1',
@@ -28,29 +29,22 @@ const component = {
       alignItems: 'center'
     },
 
-    label: {
+    child: {
       round: 12,
-      theme: ['lightDark', 'inverse'],
       size: 'Z',
       padding: 'Z A2',
       text: '1 month free'
     }
   },
 
-  iconText: {
-
-    props: el => el.parent.props.iconText
-  },
-
-  child: {
-    props: el => el.parent.props.label
-  }
+  iconText: {},
+  child: {}
 }
 
 const code = `{
   extend: Button,
   props: {
-    theme: 'lightDark',
+
     round: 12,
     padding: ['X1', 'X1', 'X1', 'A'],
     size: 'A',
@@ -59,7 +53,6 @@ const code = `{
 
     label: {
       round: 12,
-      theme: ['lightDark', 'inverse'],
       size: 'Z',
       gap: 'A',
       padding: 'Z A2',
@@ -70,7 +63,7 @@ const code = `{
 
 const defaultState = {}
 const props = {
-  theme: 'lightDark',
+
   round: 12,
   padding: ['X1', 'X1', 'X1', 'A'],
   size: 'A',

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

@@ -1,19 +1,4 @@
 'use strict'
 
 export default {
-  color: '#241C39',
-  fontWeight: 'bold',
-
-  '> svg': {
-    borderRadius: '100%',
-    padding: '.2em',
-    background: '#241C39',
-    color: 'white',
-    marginRight: `${6 / 16}em`
-  },
-
-  span: {
-    alignItems: 'center',
-    marginLeft: '8px'
-  }
 }

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

@@ -4,6 +4,7 @@ import { CATEGORIES } from '../categories'
 
 import style from './style'
 import { KangorooButton } from '@symbo.ls/components'
+import { isObject } from 'domql/src/utils'
 
 const key = 'button-theme-switcher'
 const title = 'Theme Switcher'
@@ -16,7 +17,6 @@ const component = {
 
   props: {
     round: 'C',
-    theme: 'lightDark',
     size: 'A',
     padding: 'X1 Y X1 A1',
     gap: 'Z1',
@@ -27,8 +27,7 @@ const component = {
       text: 'Light Mode'
     },
 
-    dark: {
-      theme: ['lightDark', 'inverse'],
+    child: {
       round: 'C',
       icon: 'moon',
       padding: 'Z Z1',
@@ -36,20 +35,21 @@ const component = {
     }
   },
 
-  iconText: {
-    props: el => el.parent.props.light
-  },
+  iconText: {},
+  child: {}
+}
 
-  child: {
-    props: el => el.parent.props.dark
-  }
+function strfy (obj) {
+  return Object.entries(obj).reduce((str, [p, val]) => {
+    return `${str}${p}::${isObject(val) ? strfy(val) : val}\n`;
+  }, '');
 }
 
-const code = `{
+const code = strfy(component)
+const code2 = `{
   extend: KangorooButton,
   props: {
     round: 'C',
-    theme: 'lightDark',
     size: 'Z',
 
     light: {
@@ -58,7 +58,6 @@ const code = `{
     },
 
     dark: {
-      theme: ['lightDark', 'inverse'],
       round: 'C',
       icon: 'moon',
       text: 'Dark Mode'
@@ -69,7 +68,6 @@ const code = `{
 const defaultState = {}
 const props = {
   round: 'C',
-  theme: 'lightDark',
   size: 'Z',
 
   light: {
@@ -77,8 +75,7 @@ const props = {
     text: 'Light Mode'
   },
 
-  dark: {
-    theme: ['lightDark', 'inverse'],
+  child: {
     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

@@ -18,8 +18,6 @@ const component = {
   //   return {
   //     round: 'Z',
   //     depth: '16',
-  //     theme: s.sceneTheme === 'light' ? 'lightDark' : 'dark',
-  //     rowTheme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
   //   }
   // },
 

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.15",
+  "version": "0.0.17",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

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/pages/DesignSystem/index.js

@@ -43,7 +43,7 @@ const NAV = [{
   }
 }, {
   props: {
-    icon: 'typeface colored',
+    icon: 'fontFace colored',
     href: '/fonts'
   }
 }, {

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

@@ -2,16 +2,28 @@
 
 import { copyStringToClipboard } from '@symbo.ls/utils'
 
-import * as sprite from '@symbo.ls/icons'
-import { IconText, ClickableItem, SectionHeader, Grid } from '@symbo.ls/components'
+import { IconText, Flex, Link, ClickableItem, SectionHeader, Grid } from '@symbo.ls/components'
+
+import * as ACCESSIBILITY from '@symbo.ls/icons/src/accessibility'
+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'
+import * as SIGNS from '@symbo.ls/icons/src/signs'
+import * as STYLE from '@symbo.ls/icons/src/style'
+import * as SVG from '@symbo.ls/icons/src/svg'
+import * as TECH from '@symbo.ls/icons/src/tech'
+import * as TEXT from '@symbo.ls/icons/src/text'
 
 const IconItem = {
-  extend: [ClickableItem, IconText],
+  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
@@ -25,17 +37,12 @@ const IconItem = {
 }
 
 const IconsGroup = {
-  state: {
-    toggleShow: true
-  },
+  state: { toggleShow: true },
 
-  header: {
-    extend: SectionHeader
-  },
+  header: { extend: SectionHeader },
 
   iconSet: {
     extend: Grid,
-
     props: ({ state }) => ({
       hide: !state.toggleShow,
       columns: 'repeat(12, 1fr)',
@@ -57,15 +64,49 @@ const ICON_GROUPS = [{
   p: 'All ungrouped document icons',
 
   nav: [{
-    icon: 'upload outline',
-    href: '/icons/upload-icon'
+    icon: 'plus',
+    href: '/icons/add-icon'
   }],
 
-  list: Object.keys(sprite).map(name => ({ name }))
+  list: Object.keys(SVG).map(name => ({ name }))
+}, {
+  title: 'Accessibility',
+  list: Object.keys(ACCESSIBILITY).map(name => ({ name })),
+  p: ''
+}, {
+  title: 'Box Model',
+  list: Object.keys(BOXMODEL).map(name => ({ name }))
+}, {
+  title: 'Display',
+  list: Object.keys(DISPLAY).map(name => ({ name }))
+}, {
+  title: 'Interactive',
+  list: Object.keys(INTERACTIVE).map(name => ({ name }))
+}, {
+  title: 'Logos',
+  list: Object.keys(LOGOS).map(name => ({ name }))
+}, {
+  title: 'Signs',
+  list: Object.keys(SIGNS).map(name => ({ name }))
+}, {
+  title: 'Style',
+  list: Object.keys(STYLE).map(name => ({ name }))
+}, {
+  title: 'Tech',
+  list: Object.keys(TECH).map(name => ({ name }))
+}, {
+  title: 'Text',
+  list: Object.keys(TEXT).map(name => ({ name }))
 }]
 
 export const Icons = {
   tag: 'section',
+  extend: Flex,
+
+  props: {
+    flow: 'column',
+    gap: 'D1'
+  },
 
   childExtend: IconsGroup,
   $setCollection: () => ICON_GROUPS

package/src/pages/Typography/rangeButtons.js

@@ -0,0 +1,59 @@
+'use strict'
+
+import { IncDecButtons } from '@symbo.ls/components'
+
+export const Range0Buttons = {
+  extend: IncDecButtons,
+
+  ...[{
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[0] + 1 < 0) {
+          ++range[0]
+          state.update()
+        }
+        console.log(range)
+      }
+    }
+  }, {
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[0] - 1 > -6) {
+          --range[0]
+          state.update()
+        }
+      }
+    }
+  }]
+}
+
+export const Range1Buttons = {
+  extend: IncDecButtons,
+  ...[{
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[1] - 1 > 5) {
+          --range[1]
+          state.update()
+        }
+      }
+    }
+  }, {
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[1] + 1 < 21) {
+          ++range[1]
+          state.update()
+        }
+      }
+    }
+  }]
+}

package/src/pages/Typography/typeScale.js

@@ -2,11 +2,16 @@
 
 import {
   TypeScaleSequence,
-  SequenceSliders
+  SequenceSliders,
+  Grid,
+  Flex,
+  TestText
 } from '@symbo.ls/components'
+
 import { mapSequence, sortSequence } from '@symbo.ls/utils'
 
 import { TypeSection } from './shared'
+import { Range0Buttons, Range1Buttons } from './rangeButtons'
 
 export const TypeScale = {
   extend: TypeSection,
@@ -18,73 +23,75 @@ export const TypeScale = {
     }
   },
 
-  sliders: { extend: SequenceSliders },
+  grid: {
+    extend: Grid,
 
-  p: {
-    extend: 'Paragraph',
     props: {
-      margin: '0',
-      padding: 'B2 0',
-      text: `Base size and ratio will sequentially generate set by multiplying each next unit by the ratio.`
+      gap: 'D',
+      columns: '16em auto',
+      align: 'flex-start flex-start',
+
+      sidebar: {
+        padding: 'B 0 0',
+        position: 'sticky',
+        top: 'E2'
+      },
+
+      content: {
+        overflow: 'hidden',
+        flow: 'column',
+        gap: 'C',
+
+        header: {
+          align: 'flex-end space-between',
+          padding: '0 0 0 C',
+          gap: 'C1'
+        },
+
+        footer: {
+          padding: '0 0 0 C'
+        }
+      }
+    },
+
+    sidebar: {
+      sliders: {
+        extend: SequenceSliders,
+        props: { flow: 'column' }
+      },
+
+      p: {
+        extend: 'Paragraph',
+        props: {
+          margin: '0',
+          fontSize: 'Z2',
+          padding: 'B2 0',
+          text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
+        }
+      }
+    },
+
+    content: {
+      extend: Flex,
+
+      header: {
+        extend: Flex,
+        Range0Buttons,
+        TestText
+      },
+
+      sequence: {
+        extend: TypeScaleSequence,
+        $setCollection: (el) => {
+          const { state } = el
+          el.removeContent()
+          return mapSequence(state, sortSequence)
+        }
+      },
+
+      footer: {
+        Range1Buttons
+      }
     }
-  },
-
-  sequence: {
-    extend: TypeScaleSequence,
-    $setCollection: ({ state }) => mapSequence(state, sortSequence)
   }
 }
-
-// export default {
-//   extend: TypeSection,
-
-//   header: {
-//     heading: {
-//       p: { props: { text: 'Generate text sequence by a base size and ratio' } }
-//     },
-//     nav: {
-//       add: { props: { icon: 'plus' } }
-//     }
-//   },
-
-//   wrapper: {
-//     textTest: '',
-//     fonts: '',
-
-//     cnt: {
-//       extend: [Block, Grid],
-
-//       props: {
-//         gap: 'D',
-//         columns: '16em auto'
-//       },
-
-//       aside: ScalingTools,
-
-//       wrapper: {
-//         settings: {
-//           extend: PreviewSettings,
-//           props: { margin: '0 0 B' }
-//         },
-
-//         fonts: ScalesSequence
-//       },
-
-//       sequenceSet: {
-//         extend: CommonField,
-//         props: { margin: 'C2 0' },
-//         caption: {
-//           extend: [Block, Text],
-//           props: {
-//             text: 'Sizing generated by this setting',
-//             padding: '0 0 A 0'
-//           }
-//         },
-//         element: {
-//           extend: [SequenceGraph, Block, Text],
-//           style: { '> span': { display: 'none' } }
-//         }
-//       }
-//     }
-//   }
-// }

package/svgSprite.config.js

@@ -3,5 +3,6 @@ const path = require('path')
 module.exports = {
   getSymbolId: (filePath, fileContent, fileHash) => {
     return path.basename(filePath, '.svg')
-  }
+  },
+  exclude: ['**/components/**', '**/Modals/**']
 }