@symbo.ls/preview 0.0.11 → 0.0.12

package/package.json

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

package/src/pages/Color/colors.js

@@ -6,9 +6,6 @@ const mapColors = (el, s) => {
   if (!el.context.SYSTEM) return
   const { COLOR } = el.context.SYSTEM
   const colorKeys = Object.keys(COLOR)
-  Object.keys(COLOR).map(v => {
-  })
-
   return colorKeys.map(v => COLOR[v])
 }
 

package/src/pages/Color/index.js

@@ -14,6 +14,7 @@ export const Color = {
 
   documentThemes,
   line: { extend: Line },
-  palette
-  // themes
+  palette,
+  line2: { extend: Line },
+  themes
 }

package/src/pages/Color/themes.js

@@ -1,19 +1,9 @@
 'use strict'
 
-import { COLOR, opacify } from '@symbo.ls/scratch'
-import { Block, IconText, Link, Shape, Text, Flex, SectionHeader } from '@symbo.ls/components'
+import { IconText, Link, Flex, SectionHeader, Grid } from '@symbo.ls/components'
 
 const style = {
-  width: '100%',
-  maxWidth: '25%',
-  flex: '.25 .3333 25%',
   cursor: 'pointer',
-  color: 'white',
-  textDecoration: 'none',
-  boxSizing: 'border-box',
-  caption: {
-    marginTop: `${12 / 13}em`
-  },
 
   '> *': {
     transition: '350ms',
@@ -28,104 +18,103 @@ const style = {
 }
 
 export const ThemeTemplate = {
-  extend: [Link, Block],
-  style,
+  extend: [Link, Flex],
 
-  props: (el) => ({
-    href: `/theme/${el.key}`,
-    padding: 'A Z1'
-  }),
+  props: (el, s) => ({
+    flow: 'column',
+    href: `/theme/${s.key}`,
+    padding: 'A Z1',
+    fontWeight: '400',
+    color: 'white',
 
-  theme: {
     colors: {
-      extend: [Block, Text, Shape, Flex],
+      margin: '0 -Z',
+      round: 'A2',
+      overflow: 'hidden'
+    },
+
+    title: {
+      size: 'Y',
+      margin: 'Z 0 0 0'
+    },
+
+    style
+  }),
+
+  colors: {
+    extend: Flex,
+
+    childExtend: {
+      extend: [IconText, Flex],
       props: {
-        round: 'Z1'
-      },
-
-      style: {
-        boxShadow: `${COLOR.blue && opacify(COLOR.blue.value, 0.2)} 0 2px 35px`,
-        overflow: 'hidden',
-        div: {
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center'
-        }
-      },
-      _icon: '',
-      sun: {
-        extend: [Shape, Block, IconText, Flex],
-        props: {
-          icon: 'sun',
-          size: 'Z',
-          padding: 'Z1 0 Z1 A',
-          round: 'Z1 0 0 Z1'
-        },
-        style: (element, state) => ({
-          background: state.background,
-          color: state.color,
-          borderBottomLeftRadius: '12px',
-          '&:only-child': {
-            borderRadius: 12
-          }
-        })
-      },
-      moon: {
-        if: (el, state) => state.themes,
-        extend: [Shape, Block, IconText, Flex],
-        props: {
-          theme: 'secondary',
-          padding: 'Z1 0 Z1 A',
-          icon: 'moon',
-          round: '0 Z1 Z1 0'
-        },
-        style: (element, state) => ({
-          background: '', // state.themes.dark.backgroundColor,
-          color: '' // state.themes.dark.color
-        })
+        align: 'center flex-start',
+        flex: 1,
+        padding: 'Z1 A'
       }
+    },
+
+    just: {
+      if: (el, s) => !s['@dark'] && !s['@light'],
+      props: (el, s) => ({
+        theme: s.key,
+        height: 'A',
+        boxSizing: 'content-box',
+        padding: 'Z1 A'
+      })
+    },
+
+    sun: {
+      if: (el, s) => s['@light'],
+      props: (el, s) => ({
+        icon: { name: 'sun' },
+        theme: `${s.key} @light`
+      })
+    },
+
+    moon: {
+      if: (el, s) => s['@dark'],
+      props: (el, s) => ({
+        theme: `${s.key} @dark`,
+        icon: { name: 'moon' }
+      })
     }
   },
-  caption: {
-    extend: [Block, Text],
-    props: {
-      size: 'Y',
-      padding: 'Z 0 0 0'
-    },
-    text: (el, state) => el.parent.key
-  }
+  title: { text: (el, state) => state.key }
+}
+
+const mapThemes = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { THEME } = el.context.SYSTEM
+  const themeKeys = Object.keys(THEME)
+  return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }
 
 export default {
-  tag: 'section',
   header: {
     extend: SectionHeader,
-    props: { padding: 'C 0 0 0' },
-    heading: {
-      caption: 'Theme',
-      p: { text: 'Themes are used to prepare color setting abstractly and apply it to any component' }
+    state: {
+      title: 'Themes',
+      p: 'Themes are used to prepare color setting abstractly and apply it to any component',
+      nav: [{
+        icon: 'plus',
+        href: '/colors/add-color'
+      }]
     }
   },
-  colors: {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      margin: '0 -16px'
-    },
-
-    content: (el, s) => {
-      if (!el.context.SYSTEM) return
-      const { THEME } = el.context.SYSTEM
-
-      const Themes = {}
-      Object.keys(THEME).map(v => (Themes[v] = { state: THEME[v].value }))
 
-      return {
-        childExtend: ThemeTemplate,
-        tag: 'fragment',
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(6, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
+    },
 
-        ...Themes
-      }
+    childExtend: ThemeTemplate,
+    $setCollection: (el, s) => {
+      const c = mapThemes(el, s)
+      console.log(c)
+      return c
     }
   }
 }