@symbo.ls/preview 0.0.63 → 0.0.64

package/package.json

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

package/src/components/Banner.js

@@ -44,7 +44,7 @@ export const TutorialBanner = {
     ':after': {
       transition: 'B default-bezier',
       transitionProperty: 'opacity',
-      background: 'imageOverlay',
+      background: 'shadow-overlay',
       opacity: '0.9'
     },
 

package/src/components/DesignComponent.js

@@ -71,7 +71,8 @@ export const DesignComponent = {
     maxWidth: 'F2',
     round: 'A',
     height: 'fit-content',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    userSelect: 'none'
   },
 
   componentHeader,

package/src/components/Page.js

@@ -2,6 +2,9 @@
 
 import { PageTemplate } from '@symbo.ls/components'
 
+import MASK1 from '../assets/mask1.png'
+import MASK2 from '../assets/mask2.png' // eslint-disable-line
+
 export const Page = {
   tag: 'main',
   extend: PageTemplate,
@@ -10,3 +13,44 @@ export const Page = {
     maxWidth: 'K-default'
   }
 }
+
+export const DisabledPage = {
+  props: {
+    maxHeight: 'calc(100vh - 7em)',
+    overflow: 'hidden'
+  },
+
+  Overlay: {
+    props: {
+      overflow: 'hidden',
+      background: 'shadow-overlay',
+      animation: 'fadeInUp',
+      animationDuration: 'G'
+    },
+
+    Overlay: {
+      props: {
+        background: 'gradient-colorful',
+        inset: '0 0 0 0',
+        opacity: '.9',
+        style: {
+          // filter: 'blur(110px)',
+          WebkitMaskImage: 'url(' + MASK1 + ')',
+          WebkitMaskSize: '100% 100%'
+        }
+      }
+    },
+
+    H4: {
+      position: 'absolute',
+      margin: '0',
+      color: 'black',
+      left: 'C',
+      bottom: 'B',
+      text: 'Custom library will come up soon…',
+      animation: 'fadeInUpLong',
+      animationDuration: 'G',
+      animationDelay: 'G'
+    }
+  }
+}

package/src/components/SlidersWithResponsive.js

@@ -9,8 +9,8 @@ export const SlidersWithResponsive = {
     align: 'flex-end space-between',
     position: 'sticky',
     top: 'C2',
-    background: 'black .5',
-    zIndex: '9',
+    theme: 'header',
+    zIndex: '1000',
     margin: '-B2 -B -B',
     padding: 'B2 B B',
     style: {

package/src/index.js

@@ -10,7 +10,7 @@ import * as smbls from '@symbo.ls/components'
 import * as components from './components'
 
 import App from './app'
-import { Library } from './pages'
+import { DesignSystem, Library } from './pages' // eslint-disable-line
 import { router, lastLevel } from '@domql/router'
 
 import { context } from './state'
@@ -30,7 +30,7 @@ const app = DOM.create({
 
   header: components.Header,
   routes: {
-    '/': Library
+    // '/': DesignSystem
   }
 }, undefined, 'app', {
   extend: [smbls.Box],

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

@@ -2,7 +2,8 @@
 
 const startElementProps = {
   position: 'relative',
-  maxWidth: 'G',
+  minWidth: 'G',
+  maxWidth: 'G2',
   width: '100%',
   note: {
     fontSize: 'Z1',
@@ -29,7 +30,8 @@ export default {
 
   Flex: {
     props: {
-      gap: 'C1',
+      // display: 'inline-flex',
+      gap: 'D1',
       align: 'flex-start space-between',
       childProps: {
         flex: '1',

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

@@ -1,20 +1,19 @@
 'use strict'
 
-import { ClickableItem, Grid } from '@symbo.ls/components'
+import { ClickableItem } from '@symbo.ls/components'
 import { DesignComponent } from '../../../components'
 
 import state from './state'
 
-export const designComponents = {
-  extend: Grid,
+export const content = {
   props: {
-    columns: `repeat(auto-fill, 15.235%)`,
-    rows: 'repeat(2, 1fr)',
-    autoFlow: 'dense',
-    justifyItems: 'flex-start',
-    autoColumns: 'auto',
-    autoRows: 'auto',
-
+    // columns: `repeat(6, 1fr)`,
+    // rows: 'repeat(2, 1fr)',
+    // autoFlow: 'dense',
+    // justifyItems: 'flex-start',
+    // autoColumns: 'auto',
+    // autoRows: 'auto',
+    columns: '15rem',
     gap: 'B1'
   },
 
@@ -22,10 +21,8 @@ export const designComponents = {
     extend: [ClickableItem, DesignComponent],
     props: {
       maxWidth: 'none',
-      width: '100%'
-
-      // flex: '1 1 100%'
-      // widthRange: 'F2 G'
+      width: '100%',
+      margin: '- - B1'
     }
   },
 
@@ -41,5 +38,5 @@ export default {
     p: 'Your tokens in the system at a glance'
   },
 
-  designComponents
+  content
 }

package/src/pages/DesignSystem/index.js

@@ -152,6 +152,7 @@ export const DesignSystem = {
 
   define: { routes: param => param },
   routes: {
+    '/': DesignSystemDashboard,
     '/design-system': DesignSystemDashboard,
     '/colors': Color,
     '/theme': Theme,
@@ -169,7 +170,6 @@ export const DesignSystem = {
     extend: Flex,
 
     DesignSystemNavbar: { extend: true, ...NAV },
-
     Page: { extend: Page }
   },
 
@@ -192,3 +192,5 @@ export const DesignSystem = {
     }
   }
 }
+
+export * from './Dashboard'

package/src/pages/Library/index.js

@@ -1,12 +1,12 @@
 'use strict'
 
 import { ComponentTemplate } from '@symbo.ls/components'
-import { Page } from '../../components'
+import { Page, DisabledPage } from '../../components'
 
-import { COMPONENTS } from '../../../.symbols'
+import { COMPONENTS } from '../../../.symbols' // eslint-disable-line
 
 export const Library = {
-  extend: Page,
+  extend: [Page, DisabledPage],
 
   SectionHeader: {
     title: 'My Symbols',
@@ -27,17 +27,9 @@ export const Library = {
     },
 
     childExtend: ComponentTemplate,
-    $setStateCollection: () => COMPONENTS
-  },
-
-  Overlay: {
-    inset: '50% 0 0',
-    style: {
-      WebkitMaskImage: '-webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))'
-    },
-
-    H1: {
-
+    $setStateCollection: () => {
+      return new Array(14)
+      // COMPONENTS
     }
   }
 }