@symbo.ls/preview 0.0.67 → 0.0.69

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "GitHub.copilot"
+  ]
+}

package/package.json

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

package/src/app.js

@@ -2,7 +2,6 @@
 
 import './config'
 
-import 'domql/packages/emotion'
 import { router } from '@domql/router'
 import { openModal } from '@symbo.ls/components'
 
@@ -15,7 +14,7 @@ import {
   Library
 } from './pages'
 
-import { Sync } from './sync'
+import { Sync } from './sync' // eslint-disable-line no-unused-vars
 
 const SUB_ROUTES = {}
 Object.keys(DesignSystem.routes).map(route => {

package/src/components/Aside.js

@@ -21,7 +21,7 @@ export const NavbarButton = {
   }),
 
   Tooltip: ({ state }) => ({
-    background: 'black .95',
+    background: 'gray0 .95',
     position: 'absolute',
     pointerEvents: 'none',
     top: '50%',

package/src/components/FontText.js

@@ -70,24 +70,29 @@ const fontStyle = {
       padding: '0'
     }
   },
-  ...[
-    { props: { text: 'a' } },
-    { props: { text: 'b', style: { fontStyle: 'italic' } } },
-    {
-      props: {
-        text: 'c',
-        position: 'relative',
-        ':before': {
-          content: '""',
-          width: '100%',
-          height: '2px',
-          background: 'black .75',
-          position: 'absolute',
-          bottom: '10px'
-        }
+  ...[{
+    props: { text: 'a' }
+  }, {
+    props: {
+      text: 'b',
+      style: {
+        fontStyle: 'italic'
       }
     }
-  ]
+  }, {
+    props: {
+      text: 'c',
+      position: 'relative',
+      ':before': {
+        content: '""',
+        width: '100%',
+        height: '2px',
+        background: 'black .75',
+        position: 'absolute',
+        bottom: '10px'
+      }
+    }
+  }]
 }
 
 const paragraph = {

package/src/components/ThemeButtons.js

@@ -1,51 +1,42 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/components'
+import { ColorPicker } from '@symbo.ls/components'
 
-import { ColorText } from './ColorText'
-
-const props = {
-  background: 'gray6',
-  width: 'fit-content',
-  round: 'B2',
-  position: 'relative',
-  maxHeight: '36px',
-  zIndex: '2',
-  ':after': {
-    content: '""',
-    width: '1px',
-    height: '95%',
-    background: 'black',
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)'
-  },
-  childProps: {
-    // color: 'red'
-    // padding: 'Z E Z B'
-  }
-
-}
 export const ThemeButtons = {
-  extend: Flex,
-
-  props,
+  props: {
+    position: 'relative',
+    zIndex: '2',
+    round: 'X2',
+    style: {
+      columnCount: 2,
+      columnGap: '0'
+    }
+  },
 
   attr: { buttons: true },
 
-  childExtend: ColorText,
-  ...[{
+  childExtend: {
+    extend: ColorPicker,
     props: {
-      padding: 'Z E Z Z1',
-      color: { background: 'white' }
+      width: '100%',
+      theme: null,
+      background: 'black 0'
+    },
+    on: {
+      stateUpdated: (el, s) => {
+        s.parent.update({ [s.key]: s.value })
+        return false
+      }
     }
+  },
 
-  }, {
-    props: {
-      padding: 'Z E Z B',
-      color: { background: 'black' },
-      caption: { text: 'Text color' }
-    }
-  }]
+  $setStateCollection: (el, s) => {
+    return [{
+      key: 'color',
+      value: s.color
+    }, {
+      key: 'background',
+      value: s.background
+    }]
+  }
 }

package/src/components/index.js

@@ -13,7 +13,6 @@ export * from './ThemeButtons'
 export * from './ContinueButton'
 export * from './SlidersWithResponsive'
 export * from './HeaderHeading'
-export * from './UploadImage'
 export * from './ColorsPalette'
 export * from './ShapePreview'
 export * from './SpacingPreview'

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

@@ -27,7 +27,7 @@ export default ({ parent: { state: { __system } } }) => ({
       value: __system.TYPOGRAPHY.ratio
     }, {
       property: 'Styles',
-      value: Object.keys(__system.TYPOGRAPHY?.styles).length
+      value: __system.TYPOGRAPHY.styles && Object.keys(__system.TYPOGRAPHY.styles).length
     }, {
       property: 'Fonts',
       value: Object.keys(__system.FONT).length

package/src/pages/Export/scene.js

@@ -53,6 +53,13 @@ export default {
             spacingRatio: s.ratio,
             direction: s.direction
           }, { preventUpdate: true })
+
+          // const componentNode = el.comp.node
+          // const SVG = elementToSVG(componentNode)
+          // const svgString = new window.XMLSerializer().serializeToString(SVG)
+          // console.log(SVG)
+          // console.log(svgString)
+
           updateReset()
         }
       }

package/src/pages/Init/ChooseEnvironment.js

@@ -1,34 +1,24 @@
 'use strict'
 
-import { Flex, CommonField, WiderButton } from '@symbo.ls/components'
+import { Flex, CommonField, WiderButton, ClickableItem } from '@symbo.ls/components'
 
 import { InitPage } from '../../components'
 
 const header = {
   props: {
-    margin: '- - D -',
-    Caption: { text: 'And finally' },
-    H1: {
-      text: 'Choose your environment',
-      flow: 'row-reverse',
-      align: 'center flex-end',
-      ':after': {
-        content: '", if any"',
-        fontWeight: '200',
-        color: 'gray9'
-      }
-    }
+    margin: '- - D -'
   },
 
-  Caption: {},
+  Caption: { text: 'And finally,' },
   H1: {
-    span: {},
-    span2: {}
+    text: 'Your environment'
   }
 }
 
 const commonField = {
+  tag: 'section',
   extend: CommonField,
+
   props: {
     gap: 'Z2',
     element: {
@@ -36,7 +26,7 @@ const commonField = {
       maxWidth: 'I',
       alignItems: 'center',
       childProps: {
-        background: 'gray2',
+        theme: 'quaternary',
         color: 'white .8',
         round: 'Z1',
         fontSize: 'A2'
@@ -48,7 +38,12 @@ const commonField = {
   element: {
     extend: Flex,
     childExtend: {
-      extend: WiderButton
+      extend: [WiderButton, ClickableItem],
+      on: {
+        click: (ev, el, s) => {
+          s.parent.update({ })
+        }
+      }
     }
   }
 }
@@ -57,10 +52,7 @@ const yourEnvironment = {
   extend: commonField,
   props: {
     margin: '- - C2 -',
-    title: { text: 'Your environment' },
-    element: {
-      childProps: {}
-    }
+    title: { text: 'Your environment' }
   },
 
   title: {},

package/src/pages/Init/CreateDocumentTheme.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex, GlobalThemeTemplate, Hoverable } from '@symbo.ls/components'
+import { Clickable, Flex, GlobalThemeTemplate } from '@symbo.ls/components'
 import { InitPage } from '../../components'
 
 const paragraphs = {
@@ -16,8 +16,10 @@ const modes = {
     gap: 'C',
     margin: '- -Z E2'
   },
+
   childExtend: {
-    extend: [Hoverable, GlobalThemeTemplate],
+    extend: [Clickable, GlobalThemeTemplate],
+
     props: ({ state }) => ({
       minWidth: 'G3',
       maxWidth: '406px',
@@ -25,16 +27,18 @@ const modes = {
       maxHeight: 'E2',
       boxSizing: 'content-box',
       align: 'flex-start flex-start',
-      padding: 'A2 A X X1',
+      padding: 'A A Z',
       overflow: 'hidden',
       round: 'A1',
+      color: state.color,
       background: state.background,
       wrap: 'wrap',
+      transitionProperty: 'transform, opacity, border-radius',
 
       icon: {
         boxSize: 'C C',
-        margin: '- - - Z2',
-        background: 'yellow .3',
+        color: 'yellow 1 +5',
+        background: 'yellow .2',
         pointerEvents: 'none',
         fontSize: `B`
       },
@@ -44,8 +48,9 @@ const modes = {
         title: { fontSize: 'D2', fontWeight: 'bold' }
       },
 
-      ':hover': {
+      '.active': {
         opacity: '1',
+        round: 'A1 A1 Y2 Y2',
 
         style: {
           '[buttons]': {
@@ -60,36 +65,45 @@ const modes = {
     article: {},
 
     ThemeButtons: {
-      transform: 'translate3d(0, 150%, 0)',
+      position: 'absolute',
+      left: 'X2',
+      right: 'X2',
+      bottom: 'X2',
+      opacity: '0',
       transition: 'B default-bezier',
       transitionProperty: 'transform, opacity',
-      opacity: '0',
-      margin: 'B2 0 0 0',
-      alignSelf: 'flex-end'
+      transform: 'translate3d(0, 100%, 0)'
     },
 
     Span: {
-      position: 'absolute',
-      bottom: 'A2',
-      left: 'B',
+      width: '100%',
       fontSize: 'Z',
       color: 'gray7',
       fontStyle: 'italic',
-      text: 'hover to change'
+      margin: 'C 0 0 X2',
+      text: 'click to change'
+    },
+
+    on: {
+      click: (ev, el, s) => {
+        if (ev.target === el.node) {
+          el.setProps({ active: !el.props.active })
+        }
+      },
+      stateUpdated: (el, s, changes) => {
+        const { color, background } = s
+        s.systemUpdate({
+          THEME: {
+            document: {
+              ['@' + s.key]: { color, background }
+            }
+          }
+        }, { preventUpdate: true })
+      }
     }
   },
 
-  $setStateCollection: () => [{
-    title: 'Day',
-    key: 'light',
-    icon: 'sun',
-    background: 'white'
-  }, {
-    title: 'Night',
-    key: 'dark',
-    icon: 'moon',
-    background: 'gray3'
-  }]
+  $setStateCollection: ({ state }) => state.values
 }
 
 export const CreateDocumentTheme = {
@@ -114,5 +128,35 @@ export const CreateDocumentTheme = {
 
   ContinueButton: {
     href: '/init/pallete'
+  },
+
+  on: {
+    init: ({ state }) => {
+      const { THEME, COLOR } = state.__system
+      const { document } = THEME
+      const dark = document['@dark']
+      const light = document['@light']
+
+      const colorRef = {
+        light: {
+          key: 'light',
+          title: 'Day',
+          icon: 'sun',
+          color: COLOR[light.color] || light.color || '#000000',
+          background: COLOR[light.background] || light.background || '#FFFFFF'
+        },
+        dark: {
+          key: 'dark',
+          title: 'Night',
+          icon: 'moon',
+          color: COLOR[dark.color] || dark.color || '#FFFFFF',
+          background: COLOR[dark.background] || dark.background || '#000000'
+        }
+      }
+
+      state.update({
+        values: colorRef
+      }, { preventUpdate: true, ignoreInitUpdate: true })
+    }
   }
 }

package/src/pages/Init/CreatePalette.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex, ColorSelectWithTitle, Input } from '@symbo.ls/components'
+import { Flex, ColorPickerWithTitle } from '@symbo.ls/components'
 import { InitPage } from '../../components'
 
 const colors = {
@@ -11,82 +11,12 @@ const colors = {
     gap: 'B1',
     opacity: '.75'
   },
+
   childExtend: {
-    extend: ColorSelectWithTitle,
+    extend: ColorPickerWithTitle,
     props: ({ state }) => ({
-      width: '100%',
-      title: { text: state.title },
-      element: {
-        padding: 'Z',
-        title: {
-          box: {
-            boxSize: 'B B',
-            position: 'relative',
-            zIndex: 2,
-            background: 'white .05',
-            '::-webkit-color-swatch-wrapper': {
-              padding: '0'
-            },
-            '::-webkit-color-swatch': {
-              border: 'none',
-              round: 'Y'
-            }
-          },
-          value: {
-            round: 'Z',
-            position: 'absolute',
-            inset: '0 0 0 0',
-            padding: '- - - B2+W1',
-            textAlign: 'start',
-            lineHeight: '100%',
-            placeholder: 'Color value',
-            ':focus': {
-              outline: 'solid, X, blue .3'
-            }
-          }
-        }
-      }
-    }),
-    title: {},
-    element: {
-      title: {
-        box: {
-          extend: 'Focusable',
-          tag: 'input',
-          attr: {
-            type: 'color',
-            value: ({ state }) => state.value
-          },
-          props: {
-            border: '0',
-            padding: '0',
-            style: {
-              appearance: 'none'
-            }
-          },
-          on: {
-            update: (el, s) => {
-              el.node.value = s.value || ''
-            },
-            input: (ev, el, s) => {
-              s.update({ value: el.node.value || '' })
-            }
-          }
-        },
-        value: {
-          extend: Input,
-          on: {
-            update: (el, s) => {
-              el.node.value = s.value || ''
-            },
-            input: (ev, el, s) => {
-              s.update({ value: el.node.value || '' })
-            }
-          }
-        }
-      },
-      buttons: null
-    }
+      title: { text: state.title }
+    })
   },
 
   $setStateCollection: ({ state }) => [{
@@ -114,9 +44,12 @@ const content = {
 
   colors,
 
-  UploadImage: {},
+  ImageColorPicker: {},
   ColorsPalette: {
-    margin: '- - auto'
+    props: ({ state }) => ({
+      hide: state.imageUrl,
+      margin: '- - auto'
+    })
   }
 }
 

package/src/pages/Spaces/Table.js

@@ -142,8 +142,8 @@ export const Table = {
     '@dark': {
       color: 'gray8',
       '::after': {
-        background: 'black',
-        boxShadow: 'black, 0 0px 50px 50px'
+        background: 'gray0',
+        boxShadow: 'gray0, 0 0px 50px 50px'
       }
     },
     '@light': {

package/src/state.js

@@ -3,11 +3,14 @@
 import SYSTEM from './config'
 import { LIBRARY, COMPONENTS } from '../.symbols'
 import BYLD from '../user_data/byld' // eslint-disable-line no-unused-vars
+import FIT from '../user_data/4it' // eslint-disable-line no-unused-vars
 
 export const state = {
   globalTheme: 'dark',
-  SYSTEM
   // SYSTEM: {}
+  SYSTEM: FIT
+  // SYSTEM
+  // SYSTEM: BYLD
 }
 
 export const context = {

package/src/sync.js

@@ -3,16 +3,9 @@
 // import { init } from '@symbo.ls/init'
 import { connect, send } from '@symbo.ls/socket/client'
 
-import CONFIG_DEFAULT from '@symbo.ls/config-default'
-
 const receive = (element, state) => {
   return (event, data) => {
     state.update({ SYSTEM: data })
-    if (!state.SYSTEM.TYPOGRAPHY) {
-      state.update({
-        SYSTEM: CONFIG_DEFAULT
-      }, { preventUpdate: true })
-    }
   }
 }
 

package/user_data/4it.js

@@ -0,0 +1,160 @@
+'use strict'
+
+import ARROW_SVG from './assets/arrow.svg'
+
+const S3_BUCKET = 'https://symbols-fonts.s3.us-west-1.amazonaws.com'
+
+const AvenirLight = '/avenir/49c5f3e1-5867-4b1d-a843-2d07fa60d85d.woff2'
+const AvenirRegular = '/avenir/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2'
+const AvenirMedium = '/avenir/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2'
+const AvenirDemiBold = '/avenir/6afe4676-059a-4aa8-b891-29856bbcba22.woff2'
+const AvenirBold = '/avenir/14c73713-e4df-4dba-933b-057feeac8dd1.woff2'
+const AvenirHeavy = '/avenir/5c57b2e2-f641-421e-a95f-65fcb47e409a.woff2'
+
+// const CDN_URL = 'https://fonts.gstatic.com/s/sourcecodepro/v21'
+
+export const COLOR = {
+  black: '#000000',
+  white: '#ffffff',
+  indigo: '#039E8D',
+  purple: '#506EFF',
+  pink: '#E51364',
+  text: '#47464E',
+  blue: '#3686F7',
+
+  grey25: '#473838',
+  blue27: '#088177',
+  blue94: '#ecf5f5',
+  blue92: '#e6efee',
+
+  gray75: '#c0c0c0',
+  gray8: '#141414'
+}
+
+export const GRADIENT = {
+  logoGradient: 'linear-gradient(56deg, rgba(0,191,255,1) 0%, rgba(127,58,236,1) 100%)',
+
+  brandedGradient: {
+    '@light': '--logoGradient',
+    '@dark': '--logoGradient'
+  },
+
+  mapGradient: {
+    '@light': 'radial-gradient(rgba(255,255,255,0) 35%, white 75%)',
+    '@dark': 'radial-gradient(rgba(255,255,255,0) 35%, #141414 75%)'
+  },
+
+  packageGradientHover: {
+    '@light': 'linear-gradient(135deg, #d6e9e9 46%, #d8ecec 87%, #dceeee 135%, #e0f0f0 100%)',
+    '@dark': 'linear-gradient(115deg, rgba(236,245,245,0.05) 0%, rgba(239,247,247,0.05) 50%, rgba(243,249,249,0.05) 100%)'
+  },
+
+  packageGradient: {
+    '@light': 'linear-gradient(115deg, #ECF5F5 51%, #EFF7F7 87%, #F3F9F9 125%, #F7FBFB 100%)',
+    '@dark': 'linear-gradient(115deg, rgba(236,245,245,0.02) 0%, rgba(239,247,247,0.02) 50%, rgba(243,249,249,0.02) 100%)'
+  },
+
+  bottomFadingShadow: {
+    '@dark': 'linear-gradient(rgba(255, 255, 255, 0) 25%, #141414 85%)',
+    '@light': 'linear-gradient(rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 1)) 85%'
+  }
+}
+
+export const THEME = {
+  document: {
+    '@dark': {
+      background: 'gray8',
+      color: 'white'
+    },
+    '@light': {
+      background: 'white',
+      color: 'black'
+    }
+  },
+
+  branded: {
+    color: 'white',
+    '@dark': {
+      background: 'brandedGradient'
+    },
+    '@light': {
+      background: 'brandedGradient'
+    }
+  },
+
+  primary: {
+    color: 'white',
+    '@dark': {
+      background: 'blue .35',
+      ':hover': {
+        background: 'blue .45'
+      }
+    },
+    '@light': {
+      background: 'blue',
+      ':hover': {
+        background: 'blue 1 -15'
+      }
+    }
+  }
+}
+
+export const FONT = {
+  Avenir: [{
+    url: S3_BUCKET + AvenirLight,
+    fontWeight: 300
+  }, {
+    url: S3_BUCKET + AvenirRegular,
+    fontWeight: 400
+  }, {
+    url: S3_BUCKET + AvenirMedium,
+    fontWeight: 500
+  }, {
+    url: S3_BUCKET + AvenirDemiBold,
+    fontWeight: 600
+  }, {
+    url: S3_BUCKET + AvenirBold,
+    fontWeight: 700
+  }, {
+    url: S3_BUCKET + AvenirHeavy,
+    fontWeight: 900
+  }]
+}
+
+export const FONT_FAMILY = {
+  Default: {
+    isDefault: true,
+    value: ['"Avenir"'],
+    type: 'serif'
+  }
+}
+
+export const TYPOGRAPHY = {
+  base: 16,
+  default: 16,
+  ratio: 1.125,
+  subSequence: true,
+  range: [-5, +18]
+}
+
+export const SPACING = {
+  range: [-5, +12]
+}
+
+export const ICONS = {
+  arrow: ARROW_SVG
+}
+
+export default {
+  COLOR,
+  GRADIENT,
+  THEME,
+  FONT,
+  FONT_FAMILY,
+  TYPOGRAPHY,
+  SPACING,
+  ICONS,
+  TIMING: {},
+  MEDIA: {},
+  DEVICES: {}
+}

package/user_data/assets/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21.4009822,3.43046745 C21.4009822,3.22337399 21.233133,3.05539228 21.0260396,3.05539228 L8.17775079,3.05539228 C7.97065732,3.05539228 7.80267562,3.22337399 7.8028082,3.43033487 L7.8028082,4.18022005 C7.8028082,4.38731352 7.97065732,4.55516264 8.17788337,4.55529522 L18.8400235,4.55529522 L2.81469096,20.49958 C2.66818758,20.6460834 2.66818758,20.8834056 2.81469096,21.029909 L3.34501994,21.5602379 C3.49139074,21.7066087 3.72884554,21.7067413 3.87534892,21.5602379 L19.9013444,5.61529027 L19.9012118,15.6683854 C19.9012118,15.8754789 20.0690609,16.043328 20.2761544,16.043328 L21.0260396,16.043328 C21.2330005,16.0434606 21.4009822,15.8754789 21.4009822,15.6683854 L21.4009822,3.43046745 Z"/></svg>

package/src/components/UploadImage.js

@@ -1,28 +0,0 @@
-'use strict'
-
-import { Flex, CommonField, Upload, ClickableItem } from '@symbo.ls/components'
-
-export const UploadImage = {
-  extend: [CommonField, Flex],
-
-  props: {
-    title: { text: 'Pick from the picture' },
-    element: {
-      border: 'none',
-      background: 'gray1',
-      padding: 'Z2 A2 Z2 Z2',
-      gap: 'Z',
-      flow: 'row',
-      icon: { style: { fontSize: '52px' } },
-      p: {
-        text: 'Upload or drop the image'
-      }
-    }
-  },
-  title: {},
-  element: {
-    extend: [Upload, Flex, ClickableItem],
-    icon: { style: { fontSize: '52px' } },
-    p: { span: null }
-  }
-}