@symbo.ls/preview 0.0.39 → 0.0.41

package/src/pages/ColorEditor/colorTone.js

@@ -1,163 +0,0 @@
-'use strict'
-
-import { Block, Text, opacify, Shape, Grid, Overflow } from '@symbo.ls/components'
-
-const classOpacify = (el, opacity) => {
-  if (!el.state.value) return
-  const { background, backgroundColor, color } = el.state.value
-  const bg = background || backgroundColor || color
-  if (!bg) return
-  return { background: opacify(bg, opacity) }
-}
-
-const TONES_AMOUNT = 13
-const TONES_ARR = new Array(TONES_AMOUNT).fill(0).map((_, i) => i)
-
-export const Tones = {
-  extend: [Shape, Block, Grid, Overflow],
-  props: {
-    columns: `repeat(${TONES_AMOUNT}, 1fr)`,
-    height: 'B',
-    round: 'Z'
-  },
-  childExtend: {
-    tag: 'span',
-    extend: Shape,
-    props: { round: 0 },
-    class: {
-      transition: {
-        transition: '165ms cubic-bezier(.29,.67,.51,.97)',
-        transitionProperty: 'color, background'
-      }
-    }
-  },
-  ...TONES_ARR.map(v => ({
-    class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
-  }))
-}
-
-export const colorTones = {
-  tag: 'aside',
-  // extend: Block,
-  // style: styleColorTones,
-  props: { flexFlow: 'column' },
-  span: {
-    extend: [Text, Block],
-    props: {
-      text: 'Preview',
-      size: 'Z'
-    },
-    style: {
-      display: 'block',
-      marginBottom: '8px',
-      opacity: '.65'
-    }
-  },
-
-  preview: {
-    extend: [Shape, Block],
-    style: {
-      background: 'rgba(255, 255, 255, .06)',
-      '&, & *': { transition: '165ms cubic-bezier(.29,.67,.51,.97)', transitionProperty: 'color, background' }
-    },
-    props: (el, s) => ({
-      padding: 'X1',
-      round: 'Z2',
-      theme: `${s.sceneTheme || 'dark'}Scene`
-    }),
-    scene: {
-      extend: [Block],
-      props: { padding: 'A' },
-      style: {
-        boxSizing: 'border-box',
-        backgroundPosition: `center`,
-        backgroundRepeat: `repeat`,
-        backgroundSize: '100px 100px'
-      },
-      circle: {
-        extend: [Block, Shape],
-        props: (el, s) => ({
-          theme: s.value,
-          flexFlow: 'column',
-          flexAlign: 'center center',
-          width: 'G',
-          aspectRatio: '1 / 1',
-          round: '100%'
-        }),
-        style: { position: 'relative', borderWidth: '1px', borderStyle: 'solid' },
-        h6: {
-          extend: Text,
-          style: { fontSize: `${26 / 16}em`, fontWeight: 'Bold' },
-          span: {
-            text: 'The',
-            style: {
-              fontWeight: 'normal',
-              marginRight: '6px'
-            }
-          },
-          text: 'Text Color'
-        },
-        span: {
-          extend: Text,
-          props: { text: (el, s) => s.value },
-          style: {
-            position: 'absolute',
-            top: '86%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            fontWeight: '600'
-          }
-        }
-      }
-    }
-  },
-
-  opacity: {
-    extend: Block,
-    props: {
-      padding: 'B1 0 0 0'
-    },
-    caption: {
-      extend: [Text, Block],
-      props: {
-        text: 'Opacity',
-        size: 'Z',
-        padding: '0 0 Z1 0'
-      },
-      style: { opacity: '.65' }
-    },
-    tones: { extend: Tones }
-  },
-
-  shades: {
-    extend: [Block],
-    props: { padding: 'B 0 0 0' },
-    caption: {
-      extend: [Text, Block],
-      props: {
-        text: 'Shades',
-        size: 'Z',
-        padding: '0 0 Z1 0'
-      },
-      style: { opacity: '.65' }
-    },
-
-    generate: {
-      extend: [Block, Shape, Overflow],
-      props: { flexFlow: 'column', round: 'Z', gap: '2px' },
-
-      childExtend: {
-        extend: [Tones],
-        props: { round: 'X' },
-        ...TONES_ARR.map(v => ({
-          class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
-        }))
-      },
-
-      dark: {},
-      light: {
-        props: { theme: 'lightScene' }
-      }
-    }
-  }
-}

package/src/pages/ColorEditor/friendTheme.js

@@ -1,30 +0,0 @@
-'use strict'
-
-import { CommonField, SelectField } from '@symbo.ls/components'
-
-export const friendTheme = {
-  extend: CommonField,
-  style: { paddingBlock: 0 },
-  caption: {
-    tag: 'h6',
-    props: { text: 'Friend themes', size: 'B' },
-    style: { opacity: 1, fontWeight: 'normal', margin: 0 }
-  },
-  element: {
-    extend: SelectField,
-    style: {
-      background: 'transparent',
-      paddingLeft: 0,
-      '&:hover': { background: 'transparent' }
-    },
-    title: null,
-    buttons: {
-      ...[
-        {
-          props: { icon: 'plus' },
-          style: { padding: `${10 / 16}em` }
-        }
-      ]
-    }
-  }
-}

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' } }
-
-            ]
-          }
-        }
-      }
-    ]
-  }
-
-}