@symbo.ls/preview 0.0.16 → 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,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

@@ -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.16",
+  "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/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 }))