@symbo.ls/preview 2.7.14 → 2.7.15

package/index.js

@@ -13,6 +13,7 @@ import { router, lastLevel } from '@domql/router'
 import { Main } from './src/pages'
 
 const designSystem = init(system)
+state.PROJECT_SYSTEM = designSystem
 
 const app = DOM.create({
   extend: App,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "symbo.ls",
-  "version": "2.7.14",
+  "version": "2.7.15",
   "main": "src/app.js",
   "scripts": {
     "link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",
@@ -24,19 +24,21 @@
   "dependencies": {
     "@domql/router": "latest",
     "@domql/tags": "latest",
+    "@symbo.ls/based": "^2.6.16",
     "@symbo.ls/components": "latest",
+    "@symbo.ls/fetch": "^2.7.10",
     "@symbo.ls/icons": "latest",
     "@symbo.ls/scratch": "latest",
     "@symbo.ls/temp-db": "latest",
     "@symbo.ls/utils": "latest"
   },
   "devDependencies": {
-    "@symbo.ls/platform-init": "latest",
+    "@babel/core": "^7.11.5",
     "@symbo.ls/platform-define": "latest",
+    "@symbo.ls/platform-init": "latest",
     "@symbo.ls/platform-state": "latest",
-    "domql": "^1.5.35",
-    "@babel/core": "^7.11.5",
     "babel-eslint": "^10.0.3",
+    "domql": "^1.5.35",
     "eslint": "^6.1.0",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-svg-sprite": "^1.4.1",

package/src/pages/Init/ChooseProject.js

@@ -34,7 +34,7 @@ export const ChooseProject = {
   cnt: {
     extend: Grid,
     props: {
-      columns: 'repeat(6, 1fr)',
+      columns: 'repeat(7, 1fr)',
       gap: 'D1',
       margin: '10% -Z auto'
     },

package/src/pages/Theme/buttonTitlesGrid.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { ButtonTitle, Flex } from '@symbo.ls/components'
+
+export const columnTitleButton = {
+  extend: ButtonTitle,
+  props: {
+    flow: 'column',
+    align: 'flex-start flex-start',
+    gap: 'Z2',
+    title: {
+      color: 'gray8',
+      textTransform: 'capitalize'
+    },
+    iconBox: {
+      background: 'gray2',
+      icon: { icon: 'plus' }
+    }
+  }
+}
+
+export const buttonTitlesGrid = {
+  extend: Flex,
+  props: {
+    justifyContent: 'space-between',
+    padding: 'B2 E1 - -'
+  },
+
+  childExtend: {
+    extend: columnTitleButton,
+    title: {},
+    iconBox: {}
+  },
+  ...[
+    { props: { title: { text: 'shadow' } } },
+    { props: { title: { text: 'Opacity' } } },
+    { props: { title: { text: 'Background Blur' } } },
+    { props: { title: { text: 'Blend mode' } } }
+  ]
+}

package/src/pages/Theme/buttonsHeader.js

@@ -0,0 +1,33 @@
+'use strict'
+
+import { Flex, IconButton } from '@symbo.ls/components'
+
+const props = {
+  gap: 'A2',
+  margin: '- - - auto',
+  childProps: {
+    theme: 'none',
+    background: 'transparent',
+    color: 'gray7',
+    ':hover': {
+      background: 'gray3',
+      color: 'white'
+    }
+  }
+}
+
+export const buttonsHeader = {
+  extend: Flex,
+  props,
+
+  childExtend: { extend: IconButton },
+  ...[
+    { props: { icon: 'cursorOutline' } },
+    { props: { icon: 'clickOutline' } },
+    { props: { icon: 'clickOutline' } },
+    { props: { icon: 'focusOutline' } },
+    { props: { icon: 'selection' } },
+    { props: { icon: 'colorInvert' } },
+    { props: { icon: 'accessibilityOutline' } }
+  ]
+}

package/src/pages/Theme/index.js

@@ -12,6 +12,10 @@ import {
 } from '@symbo.ls/components'
 
 import preview from './preview'
+
+import { buttonsHeader } from './buttonsHeader'
+import { selectsGrid } from './selectsGrid'
+import { buttonTitlesGrid, columnTitleButton } from './buttonTitlesGrid'
 // import { themingTools } from './themingTools'
 // import { interactivity } from './interactivity'
 // import { friendTheme } from './friendTheme'
@@ -27,7 +31,8 @@ const ThemeNameField = {
     gap: '0',
 
     title: {
-      text: 'Name the theme'
+      text: 'Name the theme',
+      fontSize: 'Z'
     },
 
     element: {
@@ -35,7 +40,9 @@ const ThemeNameField = {
       minWidth: 'C1',
       maxWidth: 'fit-content',
       outline: 'none',
-      fontSize: 'E',
+      fontSize: 'C2',
+      round: '0',
+      textTransform: 'capitalize',
 
       border: 'dashed, gray5',
       borderWidth: '0 0 1px',
@@ -165,11 +172,13 @@ export const Theme = {
   header: {
     extend: SectionHeader,
     props: {
-      margin: '0 0 B2'
+      margin: '0 0 B2',
+      justifyContent: 'space-between'
     },
     heading: null,
     ThemeNameField,
-    nav: { extend: SceneThemingBar }
+    nav: null,
+    buttons: { extend: buttonsHeader }
   },
 
   cnt: {
@@ -179,8 +188,68 @@ export const Theme = {
     preview,
 
     colorEdit: {
-      props: { gap: 'C2', flexFlow: 'column' }
-      // themingTools,
+      props: {
+        gap: '',
+        flexFlow: 'column'
+      },
+
+      colors: {
+        props: {
+          padding: '- - C1 -',
+          style: { borderBottom: '.5px solid rgba(255, 255, 255, .3)' }
+        },
+        selectsGrid,
+        buttonTitlesGrid
+      },
+
+      onHover: {
+        extend: CommonField,
+        props: {
+          style: { borderBottom: '.5px solid rgba(255, 255, 255, .3)' },
+          gap: 'B2',
+          padding: 'B - C1 -',
+          title: {
+            text: ':hover',
+            color: 'white'
+          }
+        },
+        title: {},
+        element: {
+          extend: selectsGrid
+        }
+      },
+
+      onHover2: {
+        extend: CommonField,
+        props: {
+          gap: 'B2',
+          padding: 'B - - -',
+          title: {
+            text: ':hover',
+            color: 'white'
+          }
+        },
+        title: {},
+        element: {
+          extend: selectsGrid
+        }
+      },
+
+      friendThemes: {
+        extend: columnTitleButton,
+        props: {
+          padding: 'C2 - - -',
+          title: {
+            text: 'Friend themes',
+            fontSize: 'A1',
+            color: 'gray9'
+          }
+        },
+        title: {},
+        iconBox: {}
+      }
+
+      // themingTools
       // interactivity,
       // friendTheme
     }

package/src/pages/Theme/selectsGrid.js

@@ -0,0 +1,59 @@
+'use strict'
+
+import { CommonField, ColorSelect, Grid } from '@symbo.ls/components'
+
+export const selectsGrid = {
+  extend: Grid,
+  props: {
+    columns: 'repeat(4, 1fr)',
+    gap: 'C'
+  },
+
+  childExtend: {
+    extend: CommonField,
+    props: (el, s) => ({
+      width: 'fit-content',
+      title: {
+        text: s.title,
+        fontSize: 'Z'
+      },
+      element: {
+        width: 'F+Z1',
+        title: {
+          box: {
+            background: s.color,
+            display: s.colorDisplay
+          },
+          value: {
+            text: s.name,
+            fontSize: 'Z1'
+          }
+        }
+      }
+    }),
+
+    title: {},
+    element: {
+      extend: ColorSelect
+    }
+  },
+
+  $setStateCollection: () => [{
+    title: 'Background color',
+    color: 'red',
+    name: 'red'
+
+  }, {
+    title: 'Border color',
+    name: 'none',
+    colorDisplay: 'none'
+  }, {
+    title: 'Border color',
+    name: 'none',
+    colorDisplay: 'none'
+  }, {
+    title: 'Text color',
+    color: 'white',
+    name: 'white'
+  }]
+}

package/src/pages/Theme/style.js

@@ -32,7 +32,6 @@ export default {
 
   '> section': {
     display: 'flex',
-    gap: '6.6em',
-    border: '2px solid red'
+    gap: '6.6em'
   }
 }

package/src/pages/Theme/themingTools.js

@@ -2,7 +2,6 @@
 
 import { Grid, ColorSwitcher, CommonField, SelectField, ButtonSet, ClickableItem } from '@symbo.ls/components'
 
-
 ColorSwitcher.props = (el, s) => {
   if (!s.value) return
   const value = s.value[el.props.type] || s.value[el.props.type + 'Color']