@symbo.ls/preview 0.0.20 → 0.0.22

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

@@ -37,11 +37,6 @@ const code = `{
 
 const defaultState = {}
 const props = {
-  icon: 'star',
-  text: 'Archived',
-  theme: 'label',
-  spacingRatio: '1.618',
-  round: 'A'
 }
 
 const settings = {

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

@@ -13,6 +13,10 @@ const component = {
   extend: CircleButton,
   props: {
     theme: 'secondary',
+    background: 'blue .2',
+    fontSize: 'A2',
+    color: 'white',
+    padding: 'Y2',
     icon: null,
     text: '3'
   }
@@ -37,9 +41,6 @@ const code = {
 
 const defaultState = {}
 const props = {
-  theme: 'secondary',
-  padding: 'Y2',
-  spacingRatio: '1.618',
   text: '3'
 }
 

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

@@ -16,9 +16,8 @@ const component = {
     gap: 'X2',
     theme: 'quinary',
     text: 'Download',
-    // padding: 'Z2 B2',
+    padding: 'Z2 B2',
     border: '.2em, solid, blue .2',
-    padding: 'A1 B2',
     round: 'C'
   }
 }
@@ -35,10 +34,6 @@ const code = `{
 
 const defaultState = {}
 const props = {
-  icon: 'arrowDown',
-  theme: 'quaternary',
-  text: 'Download',
-  round: 'C'
 }
 
 const settings = {

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

@@ -2,7 +2,6 @@
 
 import { CATEGORIES } from '../categories'
 
-import style from './style'
 import { KangorooButton } from '@symbo.ls/components'
 
 const key = 'button-pro'
@@ -11,64 +10,74 @@ const description = ''
 const category = CATEGORIES[1]
 
 const component = {
-  style,
   extend: KangorooButton,
 
   props: {
-
+    theme: 'quinary',
     round: 'Z2',
-    padding: ['X1', 'X1', 'X1', 'A'],
+    padding: 'X1 X1 X1 A2',
     size: 'A',
-    gap: 'Z',
-    fontWeight: 'bold',
+    gap: 'A',
+    transition: 'A defaultBezier',
+    transitionProperty: 'background, color, opacity',
+    color: 'white',
 
-    iconText: {
+    label: {
       gap: 'X1',
-      icon: 'star',
       text: 'Become PRO',
-      alignItems: 'center'
+      alignItems: 'center',
+      color: 'white',
+      fontWeight: '500',
+      icon: {
+        name: 'star',
+        color: 'yellow'
+      }
     },
-
     child: {
-      round: 12,
+      background: 'black .65',
+      round: 'Z',
       size: 'Z',
       padding: 'Z A2',
-      text: '1 month free'
+      text: '1 month free',
+      opacity: '.85'
     }
   },
 
-  iconText: {},
+  label: {},
   child: {}
 }
 
-const code = `{
-  extend: Button,
-  props: {
+const code = {
+  react: `<KangorooButton ...{
+  // ...
 
-    round: 12,
-    padding: ['X1', 'X1', 'X1', 'A'],
-    size: 'A',
-    icon: 'info',
-    text: 'Become PRO',
+  label: {
+    // ...
+  },
+
+  child: {
+    // ...
+  }
+} />`,
+  domql: `{
+  extend: KangorooButton,
+
+  props: {
+    // ...
 
     label: {
-      round: 12,
-      size: 'Z',
-      gap: 'A',
-      padding: 'Z A2',
-      text: '1 month free'
+      // ...
+    },
+
+    child: {
+      // ...
     }
   }
 }`
+}
 
 const defaultState = {}
 const props = {
-
-  round: 12,
-  padding: ['X1', 'X1', 'X1', 'A'],
-  size: 'A',
-  icon: 'info',
-  text: 'Become PRO'
 }
 
 const settings = {

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

@@ -2,7 +2,6 @@
 
 import { CATEGORIES } from '../categories'
 
-import style from './style'
 import { KangorooButton } from '@symbo.ls/components'
 import { isObject } from 'domql/src/utils'
 
@@ -12,41 +11,48 @@ const description = ''
 const category = CATEGORIES[1]
 
 const component = {
-  style: style,
   extend: KangorooButton,
 
+  childExtend: {
+
+  },
+
   props: {
     round: 'C',
-    size: 'A',
-    padding: 'X1 Y X1 A1',
+    padding: 'V2 V2 V2 A1',
     gap: 'Z1',
     depth: 16,
-
-    light: {
-      icon: 'sun',
-      text: 'Light Mode'
+    fontWeight: '500',
+
+    label: {
+      gap: 'X1',
+      text: 'Light Mode',
+      padding: 'Z2 X',
+      icon: {
+        color: 'yellow',
+        name: 'sun'
+      }
     },
 
     child: {
+      gap: 'X1',
       round: 'C',
-      icon: 'moon',
-      padding: 'Z Z1',
-      text: 'Dark Mode'
+      text: 'Dark Mode',
+      background: 'black .95',
+      color: 'white',
+      padding: 'Z2 A2',
+      icon: {
+        color: 'yellow',
+        name: 'moon'
+      }
     }
   },
 
-  iconText: {},
+  label: {},
   child: {}
 }
 
-function strfy (obj) {
-  return Object.entries(obj).reduce((str, [p, val]) => {
-    return `${str}${p}::${isObject(val) ? strfy(val) : val}\n`;
-  }, '');
-}
-
-const code = strfy(component)
-const code2 = `{
+const code = `{
   extend: KangorooButton,
   props: {
     round: 'C',

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

@@ -2,7 +2,6 @@
 
 import { CATEGORIES } from '../categories'
 
-import style from './style'
 import { Button, User } from '@symbo.ls/components'
 
 const key = 'button-user'
@@ -13,7 +12,6 @@ const category = CATEGORIES[1]
 const component = {
   extend: Button,
   tag: 'label',
-  style,
 
   props: (el, s) => ({
     size: 'A',
@@ -21,19 +19,32 @@ const component = {
     depth: 16,
     gap: 'Y2',
     padding: 'W2 A W2 W2',
-    icon: 'arrowAngleDown',
+    theme: 'tertiary',
+
+    position: 'relative',
+    cursor: 'pointer',
+
+    user: {
+      boxSize: 'B1 B1',
+    },
+
+    select: {
+      outline: 'none',
+      appearance: 'none',
+      border: 'none',
+      width: '100%',
+      height: '100%',
+      background: 'none',
+      color: 'currentColor',
+      fontSize: 'A',
+      lineHeight: 1,
+      padding: '0 A 0 0'
+    },
   }),
 
-  user: {
-    extend: User,
-    props: { boxSize: 'B1 B1' },
-    class: { dis: { pointerEvents: 'none' } }
-  },
+  user: { extend: User },
   select: {
-    attr: {
-      name: 'user',
-      id: 'user'
-    },
+    attr: { name: 'user', id: 'user' },
     childExtend: { tag: 'option' },
     ...[
       { text: 'Kevin' },
@@ -54,13 +65,7 @@ const code = `{
 }`
 
 const defaultState = {}
-const props = {
-  size: 'A',
-  round: 'C',
-  depth: 16,
-  icon: 'arrowAngleDown',
-  theme: 'quaternary'
-}
+const props = {}
 
 const settings = {
   gridOptions: { colspan: 4, rowspan: 2 }

package/.symbols/field/index.js

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Field } from '@symbo.ls/components'
+import { Field, Input } from 'smbls'
 
 const key = 'field'
 const title = 'Field'
@@ -10,8 +10,9 @@ const description = ''
 const category = CATEGORIES[2]
 
 const component = {
-  extend: Field,
+  extend: Input,
   props: (el, s) => ({
+    placeholder: 'Text in me'
   })
 }
 

package/.symbols/label/index.js

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Label } from '@symbo.ls/components'
+import { Label, HoverEffect } from '@symbo.ls/components'
 
 const key = 'label'
 const title = 'Label'
@@ -11,7 +11,14 @@ const category = CATEGORIES[0]
 
 const component = {
   extend: Label,
-  props: {
+  state: { value: 2 },
+  props: ({ state }) => ({
+    text: state.value
+  }),
+  on: {
+    click: (ev, { state }) => {
+      state.update({ value: state.value + 1 })
+    }
   }
 }
 

package/.symbols/tooltip/index.js

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Tooltip } from '@symbo.ls/components'
+import { Tooltip } from 'smbls'
 
 const key = 'tooltip'
 const title = 'Tooltip'

package/package.json

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

package/src/app.js

@@ -7,7 +7,6 @@ import { router, lastLevel } from '@domql/router'
 
 import { state } from './state'
 import {
-  PageExtend,
   Components,
   DesignSystem,
   Export,
@@ -21,7 +20,7 @@ Object.keys(DesignSystem.routes).map(route => {
     extend: DesignSystem,
     sidebar: {},
     main: {
-      extend: [DesignSystem.routes[route], PageExtend]
+      extend: DesignSystem.routes[route]
     },
     __filepath: 'pages/index.js'
   }

package/src/pages/Color/index.js

@@ -9,7 +9,7 @@ import themes from './themes'
 export const Color = {
   key: 'colors',
   props: {
-    gap: '68px'
+    gap: 'A'
   },
 
   globalThemes,

package/src/pages/Components/index.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import PageExtend from '../PageExtend'
 import { splitRoute } from 'domql/packages/router'
 
 import sidebar from './sidebar'
@@ -11,8 +10,6 @@ import { CATEGORIES } from '../../../.symbols/categories'
 // import COMPONENTS from '../../data/components'
 
 export const Components = {
-  extend: PageExtend,
-
   props: {
     maxWidth: '100%',
     width: '100%',

package/src/pages/Export/scene.js

@@ -33,11 +33,9 @@ export default {
 
     content: {
       props: {
-        transition: 'all, B, cubic-bezier(.29,.67,.51,.97)',
+        transition: 'all, B, defaultBezier',
         style: {
-          '*': {
-            transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)'
-          }
+          '*': { transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)' }
         }
       },
       comp: (el, s) => ({

package/src/pages/Fonts/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Grid, FontObject, FontFamilyObject, Line } from '@symbo.ls/components'
+import { Grid, Hoverable, FontObject, FontFamilyObject, Line } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 import { state } from './state'
@@ -20,28 +20,12 @@ const mapFonts = (el, s) => {
       title: v,
       href: `/fonts/font-settings/${v}`,
       labels: [
-        { icon: 'variableFont', text: fontWeightCaption }
+        { icon: 'fontVariable', text: fontWeightCaption }
       ]
     }
   })
 }
 
-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: `/fonts/font-family/${v}`,
-      val
-    }
-  }).filter(v => v)
-}
-
 const FontFaces = {
   extend: TypeSection,
   header: {
@@ -62,11 +46,27 @@ const FontFaces = {
       gap: 'A',
       margin: '0 -Z'
     },
-    childExtend: FontObject,
+    childExtend: [FontObject, Hoverable],
     $setCollection: mapFonts
   }
 }
 
+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: `/fonts/font-family/${v}`,
+      val
+    }
+  }).filter(v => v)
+}
+
 const FontFamilies = {
   extend: TypeSection,
   props: { padding: '0 0 E 0' },
@@ -83,12 +83,12 @@ const FontFamilies = {
   content: {
     extend: Grid,
     props: {
-      columns: 'repeat(3, 1fr)',
+      columns: 'repeat(4, 1fr)',
       gap: 'A',
       margin: '0 -Z'
     },
 
-    childExtend: FontFamilyObject,
+    childExtend: [FontFamilyObject, Hoverable],
     $setCollection: mapFontFamilies
   }
 }

package/src/pages/Spaces/SpacingScale.js

@@ -19,8 +19,8 @@ export const SpacingScale = {
       top: 'D',
       background: 'black .5',
       zIndex: '2',
-      margin: '-C -B -B',
-      padding: 'C B B',
+      margin: '-B2 -B -B',
+      padding: 'B2 B B',
       style: {
         backdropFilter: 'blur(15px)'
       }

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

@@ -1,4 +0,0 @@
-'use strict'
-
-export default {
-}

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

@@ -1,16 +0,0 @@
-'use strict'
-
-export default {
-  fontWeight: 'bold',
-
-  svg: {
-    color: '#EDCB38',
-    marginRight: `${4 / 16}em`
-  },
-
-  span: {
-    maxHeight: '32px',
-    padding: `${9 / 14}em ${16 / 14}em`,
-    marginLeft: `${16 / 14}em`
-  }
-}

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

@@ -1,25 +0,0 @@
-'use strict'
-
-export default {
-  position: 'relative',
-  cursor: 'pointer',
-  svg: {
-    pointerEvents: 'none',
-    position: 'absolute',
-    right: `${13 / 16}em`
-  },
-  select: {
-    outline: 'none',
-    appearance: 'none',
-    border: 'none',
-    width: '100%',
-    height: '100%',
-    background: 'none',
-    boxSizing: 'border-box',
-    color: 'currentColor',
-    fontSize: '1em',
-    lineHeight: 1,
-    paddingRight: '1.618em'
-    // paddingRight: `${16 / 16}em`
-  }
-}