@symbo.ls/preview 0.0.39 → 0.0.40

package/src/pages/ColorEditor/style.js

@@ -1,49 +0,0 @@
-'use strict'
-
-export const styleLabel = {
-  caption: { whiteSpace: 'nowrap', opacity: 0.65 },
-  span: {
-    display: 'block',
-    whiteSpace: 'nowrap',
-    minWidth: `1.618em`,
-    maxWidth: 'fit-content',
-    borderBottom: '1px dashed rgba(255, 255, 255, .35)',
-    outline: 'none'
-  }
-}
-
-export const styleTool = {
-  caption: { opacity: '.65' },
-  '> div span': { opacity: '.5' },
-  '> div > div': { gap: '1px' }
-}
-export const styleColorTones = {
-  width: '22em',
-  display: 'flex',
-  flexDirection: 'column',
-  '> div > button': {
-    padding: `${123 / 16}em`,
-    position: 'absolute'
-  },
-  caption: {
-    textTransform: 'capitalize',
-    opacity: '.65',
-    marginBottom: `${10 / 13}em`
-  }
-}
-
-export default {
-  display: 'flex',
-  flexFlow: 'column',
-  'header > nav a:hover': {
-    background: 'rgba(255, 255, 255, .08)',
-    opacity: 1,
-    color: '#EDCB38'
-  },
-
-  '> section': {
-    display: 'flex',
-    gap: '6.6em',
-    border: '2px solid red'
-  }
-}

package/src/pages/ColorEditor/themingTools.js

@@ -1,107 +0,0 @@
-'use strict'
-
-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']
-  const key = filterByValue(value).key || value
-  return {
-    key: key,
-    value: value
-  }
-}
-
-export const themingTools = {
-  extend: Grid,
-  style: {
-    width: 'fit-content'
-  },
-  props: {
-    columns: 'repeat(4, 1fr)',
-    columnGap: 'C',
-    rowGap: 'C'
-  },
-  childExtend: {
-    extend: CommonField,
-    props: { padding: 0 },
-    caption: { text: el => el.parent.props.caption },
-    element: {}
-  },
-  ...[{
-    props: { caption: 'Background color' },
-    caption: {},
-    element: {
-      extend: ColorSwitcher,
-      props: { type: 'background' },
-
-      title: {},
-      buttons: { ...[
-        { props: { icon: 'plus' } },
-        { props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }
-      ] }
-    }
-  }, {
-    props: { caption: 'Text color' },
-    caption: {},
-    element: {
-      extend: ColorSwitcher,
-      props: { type: 'color' },
-
-      title: {},
-      buttons: { ...[
-        { props: { icon: 'colorInvert' } },
-        { props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }
-      ] }
-    }
-  }, {
-    props: { caption: 'Border color' },
-    caption: {},
-    element: {
-      extend: ColorSwitcher,
-      props: { type: 'border' },
-
-      title: {},
-      buttons: { ...[
-        { props: { icon: 'colorInvert' } },
-        { props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }
-      ] }
-    }
-  }, {
-    props: { caption: 'Use as' },
-    caption: {},
-    element: {
-      extend: SelectField,
-      title: { props: { text: 'Background color' } },
-      buttons: { ...[{ props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }] }
-    }
-  },
-
-  {
-    props: { caption: 'Border' },
-    caption: {},
-    element: {
-      extend: ButtonSet,
-      childExtend: { extend: [ClickableItem] },
-      props: { gap: 'Z' },
-      ...[
-        { props: { icon: 'colorsColored' } },
-        { props: { icon: 'borderOpacity' } },
-        { props: { icon: 'borderWeight' } },
-        { props: { icon: 'borderProps' } }
-      ]
-    }
-  },
-
-  {
-    props: { caption: 'Shadow' },
-    caption: {},
-    element: {
-      extend: ButtonSet,
-      childExtend: { extend: [ClickableItem] },
-      ...[{ props: { icon: 'plus' } }]
-    }
-  }
-  ]
-}

package/src/pages/Theme/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' }
-      }
-    }
-  }
-}