@symbo.ls/preview 0.0.38 → 0.0.40

package/src/pages/ColorEditor/index.js

@@ -1,178 +0,0 @@
-'use strict'
-
-import { Block, Text, Button, Flex, SectionHeader, AccessibilityCheck, SceneThemingBar } from '@symbo.ls/components'
-
-import { PageExtend } from '..'
-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: {
-    extend: [Block, Text],
-    props: {
-      text: 'Name the theme',
-      padding: '0 0 Y1 0',
-      size: 'Z'
-    }
-  },
-  span: {
-    tag: 'span',
-    extend: Text,
-    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, Block],
-  props: {
-    height: 'C2',
-    padding: '0 A'
-  },
-  style: {
-    margin: 'auto -80px 0',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  nav: {
-    extend: [Flex, Block],
-    props: { gap: 'A' },
-    childExtend: {
-      extend: [Button, Text],
-      props: {
-        size: 'Z',
-        width: 'B2',
-        height: 'B2',
-        theme: 'transparent'
-      }
-    },
-    ...[
-      { props: { icon: 'starOutline' } },
-      { props: { icon: 'copyOutline' } },
-      { props: { icon: 'share' } }
-    ]
-  },
-  span: {
-    extend: Text,
-    props: {
-      text: 'Autosaved 1 second ago',
-      size: 'Y'
-    },
-    style: { opacity: '.35' }
-  },
-
-  export: {
-    extend: Flex,
-    style: {
-      alignItems: 'center'
-    },
-    span: {
-      extend: [Text, Block],
-      props: {
-        text: 'Export:',
-        size: 'Y',
-        padding: '0 B1 0 0'
-      },
-      style: { opacity: '.35' }
-    },
-    nav: {
-      extend: [Flex, Block],
-      props: { gap: 'Y2' },
-      childExtend: {
-        extend: [Button, Text],
-        props: {
-          size: 'Z',
-          width: 'B2',
-          height: 'B2',
-          theme: 'transparent'
-        },
-        style: {
-          color: 'white'
-        }
-      },
-      ...[
-        { props: { icon: 'themeOutline' } },
-        { props: { icon: 'sketch' } },
-        { props: { icon: 'arrowAngleMirroringHorizontal' } }
-      ]
-    }
-  }
-}
-
-export const ColorEditor = {
-  key: 'ColorEditor',
-
-  extend: PageExtend,
-
-  style,
-
-  state: {
-    sceneTheme: 'dark'
-  },
-
-  on: {
-    init: (el, s) => {
-      if (!el.context.SYSTEM) return
-
-      var route = window.location.pathname
-      var routes = route.slice(1).split('/')
-      var param = routes[1]
-
-      const { THEME } = el.context.SYSTEM
-      var content = THEME[`${param}`].value
-      content.title = param
-      el.state.value = content
-    }
-  },
-
-  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: {
-      extend: Block,
-      props: { gap: 'C2', flexFlow: 'column' },
-      themingTools,
-      interactivity,
-      friendTheme
-    }
-  },
-
-  check: {
-    extend: AccessibilityCheck,
-    props: {
-      padding: 'E 0 F'
-    }
-  }
-
-  // footer
-}

package/src/pages/ColorEditor/interactivity.js

@@ -1,116 +0,0 @@
-'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' } }
-
-            ]
-          }
-        }
-      }
-    ]
-  }
-
-}