@symbo.ls/preview 0.0.17 → 0.0.18

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

@@ -18,7 +18,7 @@ const component = {
     text: 'Download',
     // padding: 'Z2 B2',
     border: '.2em, solid, blue .2',
-    padding: 'A B2',
+    padding: 'A1 B2',
     round: 'C'
   }
 }

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

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.17",
+  "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/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/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'
 }