@symbo.ls/preview 0.0.23 → 0.0.24

package/src/pages/Theme/style.js

@@ -0,0 +1,49 @@
+'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/Theme/themingTools.js

@@ -0,0 +1,107 @@
+'use strict'
+
+import { Grid, ColorSwitcher, CommonField, SelectTool, 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: SelectTool,
+      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/documentStyles.js

@@ -0,0 +1,90 @@
+'use strict'
+
+import { Flex, SectionHeader, SelectField, IconButton } from '@symbo.ls/components'
+import stylesHelpers from './stylesHelpers'
+
+export default {
+  header: {
+    extend: SectionHeader,
+    state: {
+      title: 'Document Styles',
+      p: 'Document styling and theming provides global themes of the entire app, imagine it as a :root styling'
+    }
+  },
+
+  fields: {
+    extend: Flex,
+    props: { gap: 'A' },
+
+    interactivities: {
+      extend: Flex,
+      props: {
+        gap: 'A'
+      },
+      childExtend: {
+        extend: SelectField,
+        props: {
+          justifyContent: 'space-between',
+          svg: { color: 'rgba(255, 255, 255, .35)' },
+          icon: { name: 'plus' }
+        },
+
+        title: {},
+        buttons: {
+          ...[{ props: { icon: 'plus' } }]
+        }
+      },
+
+      ...[{
+        props: {
+          title: {
+            text: '<p>'
+          }
+        }
+      }, {
+        props: {
+          title: {
+            text: '<code>'
+          }
+        }
+      }, {
+        props: {
+          title: {
+            text: '<pre>'
+          }
+        }
+      }]
+    },
+
+    plus: {
+      extend: IconButton,
+      props: {
+        theme: 'quaternary',
+        position: 'relative',
+        icon: 'plus'
+      }
+    },
+
+    addsomething: {
+      extend: SelectField,
+      props: {
+        position: 'relative',
+        title: {
+          text: 'Choose element'
+        }
+      },
+      title: {},
+      buttons: {
+        ...[{
+          props: { icon: 'plus' }
+        }, {
+          props: { icon: 'arrowAngleDown' }
+        }]
+      }
+    }
+  },
+
+  Line: {},
+
+  stylesHelpers
+}

package/src/pages/Typography/index.js

@@ -1,27 +1,19 @@
 'use strict'
 
-import { SectionHeader } from '@symbo.ls/components' // eslint-disable-line no-unused-vars
-
 import state from './state'
 
-import documentStyle from './docStyles'
-import { TypeScale } from './typeScale'
+import documentStyles from './documentStyles'
+import typeScale from './typeScale'
 
 export const Typography = {
-  define: { routes: param => param },
-
   state,
 
-  routes: {
-    '/': TypeScale,
-    '/document-styles': documentStyle
+  SectionHeader: {
+    title: 'Typography',
+    p: 'A general configuration of type properties on the document.'
   },
 
-  // header: {
-  //   extend: SectionHeader
-  // },
-
-  page: {
-    TypeScale
-  }
+  // typeScale,
+  Line: {},
+  documentStyles
 }

package/src/pages/Typography/rangeButtons.js

@@ -2,7 +2,7 @@
 
 import { IncDecButtons } from '@symbo.ls/components'
 
-export const Range0Buttons = {
+export const range0Buttons = {
   extend: IncDecButtons,
 
   ...[{
@@ -10,11 +10,10 @@ export const Range0Buttons = {
       click: (ev, el) => {
         const { state } = el
         const { range } = state
-        if (range[0] + 1 < 0) {
+        if (range[0] < 0) {
           ++range[0]
           state.update()
         }
-        console.log(range)
       }
     }
   }, {
@@ -31,7 +30,7 @@ export const Range0Buttons = {
   }]
 }
 
-export const Range1Buttons = {
+export const range1Buttons = {
   extend: IncDecButtons,
   ...[{
     on: {

package/src/pages/Typography/state.js

@@ -11,9 +11,6 @@ export default {
   // subSequence: true,
   type: 'demo-font-size',
 
-  title: 'Typography',
-  p: 'A general configuration of type properties on the document.',
-
   sampleText: 'Today is a big day for our tribe. The year ends.',
   activeTab: ''
 }

package/src/pages/Typography/stylesHelpers.js

@@ -0,0 +1,54 @@
+'use strict'
+
+import {
+  Grid,
+  SectionHeader,
+  TypeHelperObject
+} from '@symbo.ls/components'
+
+export default {
+  header: {
+    extend: SectionHeader,
+    state: {
+      title: 'Helpers',
+      p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling',
+      nav: [{
+        href: '/typography/document-style',
+        icon: 'plus'
+      }]
+    }
+  },
+
+  content: {
+    extend: Grid,
+    props: { columns: 'repeat(3, 1fr)' },
+
+    childProto: TypeHelperObject,
+
+    $setCollection: () => [{
+      p: {
+        text: 'Headline',
+        style: { fontSize: `${48 / 16}em` }
+      }
+    }, {
+      p: {
+        text: 'Headline 2',
+        style: { fontSize: `${40 / 16}em` }
+
+      }
+    }, {
+      p: '',
+      span: {
+        props: {
+          fontSize: 'Y',
+          padding: 'B 0 0 0'
+        },
+        text: 'Fontnote'
+      }
+      // p: {
+      //   text: 'Footnote',
+      //   style: { fontSize: `${12 / 16}em` }
+      // }
+    }]
+  }
+}

package/src/pages/Typography/typeScale.js

@@ -2,96 +2,81 @@
 
 import {
   TypeScaleSequence,
-  SequenceSliders,
   Grid,
-  Flex,
-  TestText
+  TestText,
+  Flex
 } from '@symbo.ls/components'
 
 import { mapSequence, sortSequence } from '@symbo.ls/utils'
+import { range0Buttons, range1Buttons } from './rangeButtons'
 
-import { TypeSection } from './shared'
-import { Range0Buttons, Range1Buttons } from './rangeButtons'
+export default {
+  extend: Grid,
 
-export const TypeScale = {
-  extend: TypeSection,
+  props: {
+    gap: 'D',
+    columns: '16em auto',
+    align: 'flex-start flex-start',
 
-  header: {
-    state: {
-      title: 'TypeScale',
-      p: 'Generate text sequence by a base size and ratio'
-    }
-  },
-
-  grid: {
-    extend: Grid,
+    sidebar: {
+      padding: 'B 0 0',
+      position: 'sticky',
+      top: 'E2'
+    },
 
-    props: {
-      gap: 'D',
-      columns: '16em auto',
-      align: 'flex-start flex-start',
+    content: {
+      overflow: 'hidden',
+      flow: 'column',
+      gap: 'C',
 
-      sidebar: {
-        padding: 'B 0 0',
-        position: 'sticky',
-        top: 'E2'
+      header: {
+        align: 'flex-end space-between',
+        padding: '0 0 0 C',
+        gap: 'C1'
       },
 
-      content: {
-        overflow: 'hidden',
-        flow: 'column',
-        gap: 'C',
-
-        header: {
-          align: 'flex-end space-between',
-          padding: '0 0 0 C',
-          gap: 'C1'
-        },
-
-        footer: {
-          padding: '0 0 0 C'
-        }
+      footer: {
+        padding: '0 0 0 C'
       }
-    },
+    }
+  },
 
-    sidebar: {
-      sliders: {
-        extend: SequenceSliders,
-        props: { flow: 'column' }
-      },
+  sidebar: {
+    SectionHeader: {
+      title: 'TypeScale',
+      p: 'Generate text sequence by a base size and ratio'
+    },
 
-      p: {
-        extend: 'Paragraph',
-        props: {
-          margin: '0',
-          fontSize: 'Z2',
-          padding: 'B2 0',
-          text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
-        }
-      }
+    SequenceSliders: {
+      flow: 'column'
     },
 
-    content: {
-      extend: Flex,
+    Paragraph: {
+      margin: '0',
+      fontSize: 'Z2',
+      padding: 'B2 0',
+      text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
+    }
+  },
 
-      header: {
-        extend: Flex,
-        Range0Buttons,
-        TestText
-      },
+  content: {
+    extend: Flex,
 
-      sequence: {
-        extend: TypeScaleSequence,
-        $setCollection: (el) => {
-          const { state } = el
-          el.removeContent()
-          return mapSequence(state, sortSequence)
-        }
-      },
+    header: {
+      extend: Flex,
+      range0Buttons,
+      TestText
+    },
 
-      footer: {
-        Range1Buttons
+    sequence: {
+      extend: TypeScaleSequence,
+      $setCollection: (el) => {
+        const { state } = el
+        state.sequence = {}
+        return mapSequence(state, sortSequence)
       }
-    }
+    },
+
+    footer: { range1Buttons }
   }
 }

package/src/pages/index.js

@@ -7,7 +7,7 @@ export * from './Fonts'
 export * from './Icons'
 export * from './Library'
 export * from './Color'
-export * from './ColorEditor'
+export * from './Theme'
 export * from './Shapes'
 export * from './Spaces'
 export * from './Typography'

package/src/pages/Typography/docStyles.js

@@ -1,100 +0,0 @@
-'use strict'
-
-import {
-  Icon, Link,
-  TypeHelpers,
-  DocumentStylesSequence
-} from '@symbo.ls/components'
-import { TypeSection } from './shared'
-
-import { interactivityButton } from '../ColorEditor'
-
-export default {
-  extend: TypeSection,
-
-  header: {
-    state: {
-      p: 'Document styling and theming provides global themes of the entire app, imagine it as a :root styling'
-    },
-    heading: {
-      title: null
-    },
-    nav: {
-      add: {
-        extend: Link,
-        props: {
-          href: '/typography/document-styles/html-tags',
-          icon: 'plus'
-        }
-      }
-    }
-  },
-
-  wrapper: {
-    bodyTags: {
-
-      cnt: {
-        style: { flex: 1 },
-
-        fonts: DocumentStylesSequence,
-
-        interactivities: {
-          style: {
-            paddingLeft: '8em',
-            display: 'flex',
-            gap: '1em',
-            marginTop: '1em'
-          },
-          childExtend: {
-            extend: interactivityButton,
-            style: {
-              display: 'flex',
-              justifyContent: 'space-Between',
-              svg: { color: 'rgba(255, 255, 255, .35)' }
-            },
-            props: {
-              icon: 'plus'
-            }
-          },
-          ...[{
-            style: { width: '145px' },
-            props: { text: '<p>' }
-          }, {
-            style: { width: '145px' },
-            props: { text: '<code>' }
-          }, {
-            style: { width: '145px' },
-            props: { text: '<pre>' }
-          }, {
-            props: {
-              padding: 'Z',
-              text: ''
-            }
-          }, {
-            style: {
-              position: 'relative',
-              width: '207px'
-            },
-            props: {
-              text: 'Choose element'
-            },
-            icon2: {
-              extend: Icon,
-              props: { icon: 'arrowAngleDown' },
-              style: {
-                paddingRight: `${12.5 / 16}em`,
-                marginRight: `${12.5 / 16}em`,
-                borderRight: '1px solid rgba(255, 255, 255, .1)',
-                position: 'absolute',
-                right: `${25 / 16}em`,
-                height: '80%'
-              }
-            }
-          }]
-        }
-      }
-    },
-
-    TypeHelpers
-  }
-}