@symbo.ls/preview 2.7.20 → 2.7.23

package/src/pages/Theme/preview.js

@@ -1,153 +0,0 @@
-'use strict'
-
-import { opacify } from '@symbo.ls/scratch'
-import { Flex, Grid } from '@symbo.ls/components'
-
-const classOpacify = (value, opacity) => {
-  const { background, backgroundColor, color } = 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)
-
-const getThemeProperty = (property, value, mod) => {
-  const modifier = `@${mod}`
-  return value[modifier] && value[modifier][property] ? value[modifier][property] : value[property]
-}
-
-export const Tones = {
-  extend: Grid,
-  props: {
-    columns: `repeat(${TONES_AMOUNT}, 1fr)`,
-    height: 'B',
-    round: 'Z',
-    overflow: 'hidden'
-  },
-  childExtend: {
-    tag: 'span',
-    text: null,
-    props: ({ key, state }) => ({
-      round: '0',
-      transition: 'B defaultBezier',
-      transitionProperty: 'color, background',
-      background: getThemeProperty('background', state.value, state.sceneTheme),
-      opacity: '' + (100 / TONES_AMOUNT * parseInt(key)) / 100
-    })
-  },
-  $setCollection: () => TONES_ARR
-}
-
-export default {
-  tag: 'aside',
-  extend: Flex,
-  props: {
-    flow: 'column'
-  },
-
-  preview: {
-    props: (el, s) => ({
-      padding: 'X1',
-      round: 'Z2',
-      theme: `scene @${s.sceneTheme}`,
-      style: {
-        '&, & *': {
-          transition: '165ms cubic-bezier(.29,.67,.51,.97)',
-          transitionProperty: 'color, background'
-        }
-      }
-    }),
-    scene: {
-      props: {
-        padding: 'A',
-        backgroundPosition: `center`,
-        backgroundRepeat: `repeat`,
-        backgroundSize: '100px 100px'
-      },
-      circle: {
-        props: (el, s) => ({
-          theme: `${s.themeName} @${s.sceneTheme}`,
-          flexFlow: 'column',
-          flexAlign: 'center center',
-          width: 'G',
-          aspectRatio: '1 / 1',
-          round: '100%',
-          position: 'relative',
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          borderColor: 'transparent',
-
-          h6: {
-            fontSize: 'D',
-            fontWeight: 'bold',
-            gap: 'X'
-          }
-        }),
-        h6: {
-          extend: Flex,
-          Span: {
-            text: 'The',
-            fontWeight: 'normal',
-            marginRight: '6px'
-          },
-          text: 'Text Color'
-        },
-        Span: {
-          text: (el, s) => s.themeName,
-          position: 'absolute',
-          top: '86%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          fontWeight: '600'
-        }
-      }
-    }
-  },
-
-  opacity: {
-    props: {
-      padding: 'B1 0 0 0'
-    },
-    caption: {
-      props: {
-        text: 'Opacity',
-        size: 'Z',
-        padding: '0 0 Z1 0',
-        opacity: '.65'
-      }
-    },
-    tones: { extend: Tones }
-  },
-
-  shades: {
-    if: () => false,
-    props: { padding: 'B 0 0 0' },
-    caption: {
-      props: {
-        text: 'Shades',
-        size: 'Z',
-        padding: '0 0 Z1 0'
-      },
-      style: { opacity: '.65' }
-    },
-
-    generate: {
-      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/Theme/selectsGrid.js

@@ -1,73 +0,0 @@
-'use strict'
-
-import { CommonField, ColorSelect, Grid } from '@symbo.ls/components'
-
-export const selectsGrid = {
-  extend: Grid,
-  props: {
-    columns: 'repeat(4, auto)',
-    style: { width: 'fit-content' },
-    gap: 'B2+W1',
-    justifyItems: 'start',
-    '@tabletL': { columns: 'repeat(3, auto)' },
-    '@tabletM': { columns: 'repeat(2, auto)' }
-  },
-
-  childExtend: {
-    extend: CommonField,
-    tag: 'div',
-    props: (el, s) => ({
-      width: 'F+Z',
-      title: {
-        text: s.title,
-        fontSize: 'Z'
-      },
-      element: {
-        width: '100%',
-        height: 'B2+W',
-        padding: '0 W1 0 Z1',
-        title: {
-          box: {
-            background: s.color,
-            display: s.colorDisplay
-          },
-          value: {
-            text: s.name,
-            fontSize: 'Z1'
-          }
-        },
-        buttons: {
-          gap: 'W',
-          childProps: {
-            boxSize: 'fit-content',
-            padding: 'W1+W1'
-          }
-        }
-      }
-    }),
-
-    title: {},
-    element: {
-      extend: ColorSelect
-    }
-  },
-
-  $setStateCollection: () => [{
-    title: 'Background color',
-    color: 'red',
-    name: 'red'
-
-  }, {
-    title: 'Border color',
-    name: 'none',
-    colorDisplay: 'none'
-  }, {
-    title: 'Border color',
-    name: 'none',
-    colorDisplay: 'none'
-  }, {
-    title: 'Text color',
-    color: 'white',
-    name: 'white'
-  }]
-}

package/src/pages/Theme/style.js

@@ -1,38 +0,0 @@
-'use strict'
-
-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'
-  }
-}

package/src/pages/Theme/themingTools.js

@@ -1,106 +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/Typography/collection.js

@@ -1,115 +0,0 @@
-'use strict'
-
-import {
-  findHeadingLetter,
-  getFontFamily
-} from '@symbo.ls/scratch'
-import { HTML_TAGS } from '@domql/tags'
-
-const propertyDefaults = {
-  fontSize: 'A',
-  fontWeight: '400',
-  lineHeight: '1.4',
-  letterSpacing: '0',
-  italic: '0',
-  letterWidth: '0'
-}
-
-const iconMap = {
-  font: 'fontFace',
-  fontWeight: 'fontVariable',
-  lineHeight: 'textLineHeight',
-  letterSpacing: 'textLetterSpacing',
-  italic: 'fontStyleItalic',
-  letterWidth: 'textLetterWidth'
-}
-
-const getTypeProp = (key, prop, library, defaultValue) => {
-  const { TYPOGRAPHY } = library
-  if (!TYPOGRAPHY) return
-  let styles = TYPOGRAPHY.styles
-  if (!styles) styles = TYPOGRAPHY.styles = {}
-  if (!styles[key]) styles[key] = {}
-  return styles[key][prop] ||
-    styles[prop] ||
-    TYPOGRAPHY[prop] ||
-    defaultValue ||
-    propertyDefaults[prop]
-}
-
-const getTypeStyle = (key, library) => ({
-  font: getFontFamily(key, library.FONT_FAMILY)[0],
-  fontSize: getTypeProp(key, 'fontSize', library),
-  fontWeight: getTypeProp(key, 'fontWeight', library),
-  lineHeight: getTypeProp(key, 'lineHeight', library),
-  letterSpacing: getTypeProp(key, 'letterSpacing', library),
-  italic: getTypeProp(key, 'italic', library),
-  letterWidth: getTypeProp(key, 'letterWidth', library)
-})
-
-const isHeading = v => v.length === 2 && v[0] === 'h'
-const isTag = v => HTML_TAGS.root.indexOf(v) > -1 || HTML_TAGS.body.indexOf(v) > -1
-const isHelper = v => v.slice(0, 1) === '.'
-
-const getCollectionFromArray = (arr, s) => {
-  const TYPOGRAPHY = s.parse()
-  const styles = TYPOGRAPHY.styles || {}
-
-  if (!s.sequence) return {}
-
-  return arr.map((v, k) => {
-    const result = getTypeStyle(v, s.parent.parse())
-    return {
-      key: v,
-      value: {
-        ...result,
-        ...styles[v]
-      },
-      labels: Object.keys(result)
-        .filter(key => key !== 'fontSize' && result[key] && result[key] !== '0')
-        .map(key => ({
-          icon: iconMap[key],
-          text: result[key]
-        })
-        ),
-      sequenceValue: s.sequence[
-        isHeading(v) ? findHeadingLetter(s.h1Matches, k) : result.fontSize
-      ]
-    }
-  })
-}
-
-export const headingsCollection = (el, s) => {
-  el.removeContent()
-  const HEADINGS = new Array(6).fill(null).map((_, i) => 'h' + (i + 1))
-  return getCollectionFromArray(HEADINGS, s)
-}
-
-export const tagsCollection = (el, s) => {
-  const { __projectSystem } = s
-  const { TYPOGRAPHY } = __projectSystem
-  if (!TYPOGRAPHY) return
-  let styles = TYPOGRAPHY.styles
-  if (!styles) styles = TYPOGRAPHY.styles = {}
-  if (!styles.body) styles.body = {}
-  el.removeContent()
-
-  const TAGS = Object.keys(styles)
-    .filter(v => {
-      return isTag(v) && !isHeading(v) && !isHelper(v)
-    })
-
-  return getCollectionFromArray(TAGS, s)
-}
-
-export const helpersCollection = (el, s) => {
-  const TYPOGRAPHY = s.parse()
-  const styles = TYPOGRAPHY.styles || {}
-
-  const HELPERS = Object.keys(styles)
-    .filter(v => v.slice(0, 1) === '.')
-
-  el.removeContent()
-
-  return getCollectionFromArray(HELPERS, s)
-}

package/src/pages/Typography/documentStyles.js

@@ -1,113 +0,0 @@
-'use strict'
-
-import {
-  DocumentStylesSequence,
-  Flex,
-  SelectField,
-  HTMLTagTypeObject
-} from '@symbo.ls/components'
-
-import { headingsCollection, tagsCollection } from './collection'
-
-export default {
-  SectionHeader: {
-    title: 'Document Styles',
-    p: 'Document styling and theming provides global themes of the entire app, imagine it as a :root styling'
-  },
-
-  styles: {
-    extend: Flex,
-
-    props: {
-      flow: 'column',
-      gap: 'C',
-      align: 'flex-start flex-start',
-      header: {
-        width: '100%',
-        align: 'center space-between'
-      },
-      headings: {
-        width: '100%'
-      },
-      doc: {
-        width: '100%'
-      }
-    },
-
-    headings: {
-      extend: DocumentStylesSequence,
-      $setStateCollection: headingsCollection
-    },
-
-    doc: {
-      extend: DocumentStylesSequence,
-      $setStateCollection: tagsCollection
-    },
-
-    footer: {}
-  },
-
-  fields: {
-    extend: Flex,
-    props: {
-      gap: 'A',
-      margin: '0 0 0 E2+B',
-      align: 'center flex-start'
-    },
-
-    tags: {
-      extend: Flex,
-      props: { gap: 'A' },
-      childExtend: HTMLTagTypeObject,
-
-      p: {
-        props: {
-          title: {
-            text: '<p>'
-          }
-        }
-      },
-      code: {
-        props: {
-          title: {
-            text: '<code>'
-          }
-        }
-      },
-      pre: {
-        props: {
-          title: {
-            text: '<pre>'
-          }
-        }
-      }
-    },
-
-    VerticalLine: {
-      height: 'B',
-      margin: '0 Z1'
-    },
-
-    IconButton: {
-      theme: 'quinary',
-      position: 'relative',
-      icon: 'plus'
-    },
-
-    addsomething: {
-      extend: SelectField,
-      props: {
-        position: 'relative',
-        title: {
-          text: 'Choose element'
-        }
-      },
-      title: {},
-      buttons: [{
-        props: { icon: 'plus' }
-      }, {
-        props: { icon: 'arrowAngleMirroringVertical' }
-      }]
-    }
-  }
-}

package/src/pages/Typography/index.js

@@ -1,69 +0,0 @@
-'use strict'
-
-import typeScale from './typeScale'
-import documentStyles from './documentStyles'
-import stylesHelpers from './stylesHelpers'
-import { mapSequence, sortSequence } from '@symbo.ls/components'
-
-export const Typography = {
-  state: 'PROJECT_SYSTEM',
-
-  SectionHeader: {
-    margin: '0 0 C',
-    title: 'Typography',
-    p: 'A general configuration of type properties on the document.'
-  },
-
-  cnt: {
-    state: 'TYPOGRAPHY',
-
-    SlidersWithResponsive: {},
-
-    line: { extend: 'Line' },
-
-    documentStyles,
-    line1: { extend: 'Line' },
-
-    stylesHelpers,
-    line2: { extend: 'Line' },
-
-    typeScale,
-
-    on: {
-      stateCreated: (el, s) => {
-        s.update({
-          base: s.base || 16,
-          ratio: s.ratio || 1.125,
-          range: s.range || [-3, +8],
-          subsequence: s.subsequence || true,
-          styles: s.styles || {},
-          h1Matches: s.h1Matches || +6,
-          scales: {},
-          sequence: {},
-          vars: {},
-          type: 'demo-font-size',
-          sampleText: 'Today is a big day for our tribe. The year ends.'
-        }, {
-          preventUpdate: true,
-          preventUpdateListener: true
-        })
-
-        if (s.base && s.range) mapSequence(s, sortSequence)
-      },
-      stateUpdated: (el, s, changes) => {
-        const { base, ratio, range, subsequence, h1Matches } = changes
-
-        s.update({
-          base,
-          ratio,
-          range,
-          subsequence,
-          h1Matches
-        }, {
-          preventUpdate: true,
-          preventUpdateListener: true
-        })
-      }
-    }
-  }
-}