@symbo.ls/preview 0.0.73 → 0.0.75

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.73",
+  "version": "0.0.75",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -31,7 +31,9 @@
     "@symbo.ls/config-default": "^1.0.1",
     "@symbo.ls/icons": "latest",
     "@symbo.ls/init": "^1.1.3",
+    "@symbo.ls/preview": "^0.0.73",
     "@symbo.ls/scratch": "latest",
+    "@symbo.ls/temp-db": "^0.0.2",
     "@symbo.ls/utils": "latest",
     "domql": "^1.5.7",
     "showdown": "^2.1.0"

package/src/index.js

@@ -27,10 +27,7 @@ DOM.define({
 const app = DOM.create({
   // extend: [Sync, App],
   extend: [App],
-
-  HeaderOnRouter: {},
-
-  routes: {}
+  HeaderOnRouter: {}
 }, undefined, 'app', {
   extend: [smbls.Box],
   components: { ...smbls, ...components },

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

@@ -1,10 +1,12 @@
 
-import { DesignElement } from '@symbo.ls/components'
+import { Flex, DesignElement } from '@symbo.ls/components'
 
 export default {
+  extend: Flex,
+
   props: {
-    flexFlow: 'row wrap',
-    flexAlign: 'flex-start flex-start',
+    flow: 'row wrap',
+    align: 'flex-start flex-start',
     gap: 'C B2',
     padding: 'B1 0 B2',
     margin: '0 -Z2'

package/src/state.js

@@ -1,21 +1,17 @@
 'use strict'
 
 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
+import { LIBRARY, COMPONENTS } from '@symbo.ls/preview/.symbols'
+import USR_DATA from '@symbo.ls/temp-db'
 
 export const state = {
   globalTheme: 'dark',
-  appKey: '4it.symbo.ls',
-  SYSTEM: FIT
-  // SYSTEM: {}
-  // SYSTEM
-  // SYSTEM: BYLD
+  appKey: '4it.symbo.ls'
 }
 
+state.SYSTEM = USR_DATA[state.appKey]
+
 export const context = {
-  CONFIG: SYSTEM,
   LIBRARY,
   SYSTEM,
   COMPONENTS

package/src/style.js

@@ -15,6 +15,6 @@ export default {
     'button, a': {
       cursor: 'default'
     }
-  },
-  content: { position: 'relative' }
+  }
+  // content: { position: 'relative' }
 }

package/user_data/4it.js

@@ -1,164 +0,0 @@
-'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
-  }],
-  AvenirVariable: {
-    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2729/AvenirNext_Variable.ttf',
-    isVariable: true
-  }
-}
-
-export const FONT_FAMILY = {
-  Default: {
-    isDefault: true,
-    value: ['"AvenirVariable"', '"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

@@ -1 +0,0 @@
-<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/user_data/byld.js

@@ -1,117 +0,0 @@
-'use strict'
-
-const CDN_URL = 'https://byld-symbols.s3.us-east-2.amazonaws.com/fonts/'
-
-const COLOR = {
-  darkgray: '#161715',
-  orange: '#F45825',
-  green: '#006547',
-  gray: '#756E6A',
-  grayContrastful: '#A9A09A',
-  white: '#FAF9F8',
-  violet: '#4A4ADD',
-  lightgray: '#D8CFC5'
-}
-
-const THEME = {
-  document: {
-    background: 'black',
-    color: 'white'
-  },
-
-  philosophy: {
-    background: 'orange',
-    color: 'black',
-    '.onlyColor': {
-      color: 'orange'
-    }
-  },
-
-  team: {
-    background: 'green',
-    color: 'white',
-    '.onlyColor': {
-      color: 'green'
-    }
-  },
-
-  portfolio: {
-    background: 'violet',
-    color: 'white',
-    '.onlyColor': {
-      color: 'violet'
-    }
-  },
-
-  meta: {
-    background: 'lightgray',
-    color: 'black',
-    borderColor: 'black'
-  },
-
-  link: {
-    color: 'white'
-  }
-}
-
-const FONT = {
-  SourceCodePro: [{
-    url: CDN_URL + 'SourceCodePro-Regular.woff2',
-    fontWeight: 400
-  }, {
-    url: CDN_URL + 'SourceCodePro-SemiBold.woff2',
-    fontWeight: 600
-  }]
-}
-
-const FONT_FAMILY = {
-  Default: {
-    isDefault: true,
-    value: ['"SourceCodePro"'],
-    type: 'serif'
-  }
-}
-
-const TYPOGRAPHY = {
-  base: 16,
-  ratio: 1.125,
-  subSequence: true,
-
-  styles: {},
-
-  '@mobileL': {
-    base: 15,
-    ratio: 1.125
-  },
-
-  '@mobileS': {
-    base: 14,
-    ratio: 1.067
-  }
-}
-
-const SPACING = {
-  range: [-5, +12],
-
-  '@mobileL': {
-    ratio: 1.2
-  }
-}
-
-const RESET = {
-  body: {
-    position: 'relative',
-    width: '100%',
-    height: '100%'
-  }
-}
-
-export default {
-  COLOR,
-  THEME,
-  FONT,
-  FONT_FAMILY,
-  TYPOGRAPHY,
-  SPACING,
-  RESET
-}