@symbo.ls/preview 0.0.22 → 0.0.24

package/src/pages/Theme/index.js

@@ -0,0 +1,185 @@
+'use strict'
+
+import {
+  PageTemplate,
+  Button,
+  Flex,
+  SectionHeader,
+  AccessibilityCheck,
+  SceneThemingBar
+} from '@symbo.ls/components'
+
+import { colorTones } from './colorTone'
+import { themingTools } from './themingTools'
+import { interactivity } from './interactivity'
+import { friendTheme } from './friendTheme'
+
+import style, { styleLabel } from './style'
+
+// import ntc from './ntc'
+
+// const returnColor = element => element.lookup('ColorEditor').state.color
+// const setBackground = (element, opacity = 1) => `background: ${opacify(returnColor(element), opacity)}`
+
+const nameTheTheme = {
+  tag: 'label',
+  style: styleLabel,
+  attr: { for: 'name-it' },
+  caption: {
+    props: {
+      text: 'Name the theme',
+      padding: '0 0 Y1 0',
+      size: 'Z'
+    }
+  },
+  span: {
+    tag: 'span',
+    props: {
+      text: (el, s) => s.value,
+      size: 'E'
+    },
+    attr: { contentEditable: true, placeholder: 'you name it', id: 'name-it' }
+  }
+}
+
+const footer = { //eslint-disable-line
+  extend: [Flex],
+  props: {
+    height: 'C2',
+    padding: '0 A'
+  },
+  style: {
+    margin: 'auto -80px 0',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  nav: {
+    extend: [Flex],
+    props: { gap: 'A' },
+    childExtend: {
+      extend: [Button],
+      props: {
+        size: 'Z',
+        width: 'B2',
+        height: 'B2',
+        theme: 'transparent'
+      }
+    },
+    ...[
+      { props: { icon: 'starOutline' } },
+      { props: { icon: 'copyOutline' } },
+      { props: { icon: 'share' } }
+    ]
+  },
+  span: {
+    props: {
+      text: 'Autosaved 1 second ago',
+      size: 'Y'
+    },
+    style: { opacity: '.35' }
+  },
+
+  export: {
+    extend: Flex,
+    style: {
+      alignItems: 'center'
+    },
+    span: {
+      props: {
+        text: 'Export:',
+        size: 'Y',
+        padding: '0 B1 0 0'
+      },
+      style: { opacity: '.35' }
+    },
+    nav: {
+      extend: [Flex],
+      props: { gap: 'Y2' },
+      childExtend: {
+        extend: [Button],
+        props: {
+          size: 'Z',
+          width: 'B2',
+          height: 'B2',
+          theme: 'transparent'
+        },
+        style: {
+          color: 'white'
+        }
+      },
+      ...[
+        { props: { icon: 'themeOutline' } },
+        { props: { icon: 'sketch' } },
+        { props: { icon: 'arrowAngleMirroringHorizontal' } }
+      ]
+    }
+  }
+}
+
+export const Theme = {
+  key: 'ColorEditor',
+
+  extend: PageTemplate,
+
+  style,
+
+  state: {
+    sceneTheme: 'dark',
+    title: 'Typography',
+    p: 'A general configuration of type properties on the document.'
+  },
+
+  on: {
+    init: (el, s) => {
+      if (!el.context.SYSTEM) return
+      const path = window.location.pathname
+      const pathArray = path.split('edit-icon/')
+      if (!el.context.SYSTEM) return
+      const { THEME } = el.context.SYSTEM
+      const themeName = pathArray[1]
+      var theme = THEME[themeName]
+
+      if (themeName && theme) {
+        s.update({
+          themeName: themeName,
+          value: theme
+        }, { preventUpdate: true })
+      }
+    }
+  },
+
+  header: {
+    extend: SectionHeader,
+    props: {
+      padding: 'C 0 B2 0',
+      margin: '0'
+    },
+    heading: '',
+    label: nameTheTheme,
+    nav: { extend: SceneThemingBar }
+  },
+
+  cnt: {
+    extend: [Flex],
+    props: {
+      gap: 'D'
+    },
+
+    aside: colorTones,
+    colorEdit: {
+      props: { gap: 'C2', flexFlow: 'column' },
+      themingTools,
+      interactivity,
+      friendTheme
+    }
+  },
+
+  check: {
+    extend: AccessibilityCheck,
+    props: {
+      padding: 'E 0 F'
+    }
+  }
+
+  // footer
+}

package/src/pages/Theme/interactivity.js

@@ -0,0 +1,115 @@
+'use strict'
+
+import { Block, Grid, Text, SelectField, CommonField } from '@symbo.ls/components'
+
+export const interactivity = {
+  h6: {
+    extend: [Text, Block],
+    props: { text: 'Interactivity', padding: '0 0 Z2 0', size: 'B' },
+    style: { fontWeight: 'normal', margin: 0 }
+  },
+  interactivitySet: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(4, 1fr)',
+      rows: 'repear(2, 1fr)',
+      columnGap: 'C',
+      rowGap: 'A2'
+    },
+    style: { width: 'fit-content' },
+    childExtend: {
+      extend: CommonField,
+      props: { padding: 0 },
+      element: {
+        extend: SelectField,
+        buttons: { ...[{ props: { icon: 'plus' } }] }
+      }
+    },
+    ...[
+      {
+        caption: { props: { text: ':hover' } },
+        element: {
+          title: {
+            props: { icon: 'hoverOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':focus' } },
+        element: {
+          title: {
+            props: { icon: 'focusOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':active' } },
+        element: {
+          title: {
+            props: { icon: 'clickOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':selection' } },
+        element: {
+          title: {
+            props: { icon: 'selection', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':link' } },
+        element: {
+          title: {
+            props: { icon: 'clickOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':visited' } },
+        element: {
+          title: {
+            props: { icon: 'focusOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':disabled' } },
+        element: {
+          title: {
+            props: { icon: 'disabled', text: 'none' }
+          }
+        }
+      },
+
+      {
+        caption: null,
+        style: {
+          display: 'flex',
+          alignItems: 'flex-end'
+        },
+        element: {
+          title: {
+            props: { text: 'Add :pseudo' }
+          },
+          buttons: {
+            style: {
+              button: {
+                background: 'transparent',
+                borderRadius: 0,
+                '&:first-child': { borderRight: '.1px solid rgba(255, 255, 255, .1)' },
+                '&:hover': { background: 'transparent' }
+              }
+            },
+            ...[
+              { props: { icon: 'arrowAngleDown' } },
+              { props: { icon: 'plus' } }
+
+            ]
+          }
+        }
+      }
+    ]
+  }
+}