@symbo.ls/preview 0.0.57 → 0.0.59

package/src/pages/Color/index.js

@@ -6,12 +6,23 @@ import globalThemes from './globalThemes'
 import palette from './palette'
 import themes from './themes'
 
+// import { ThemeButtons } from '../../components'
+// import { themeLightDark } from './themeLightDark'
+// import { CreatePallete } from './CreatePalette'
+// import { fontText } from './FontText'
+
 export const Color = {
   key: 'colors',
+
   props: {
     gap: 'A'
+    // style: { border: '4px solid red' }
   },
 
+  // createPallete: CreatePallete,
+  // themeLightDark,
+  // fontText
+
   globalThemes,
   line: { extend: Line },
   palette,

package/src/pages/Color/palette.js

@@ -3,10 +3,10 @@
 import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
 
 const mapColors = (el, s) => {
-  if (!el.context.SYSTEM) return
-  const { COLOR } = el.context.SYSTEM
+  if (!s.__system) return
+  const { COLOR } = s.__system
   const colorKeys = Object.keys(COLOR)
-  return colorKeys.map(v => ({ key: v, ...COLOR[v] }))
+  return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
 }
 
 export default {
@@ -25,18 +25,11 @@ export default {
   content: {
     extend: Flex,
     props: {
-      gap: 'A1',
-      alignItems: 'center'
+      flow: 'row wrap',
+      gap: 'Z2'
     },
-    colors: {
-      extend: Flex,
-      props: {
-        flow: 'row wrap',
-        gap: 'Z2'
-      },
 
-      childExtend: ColorTemplate,
-      $setStateCollection: mapColors
-    }
+    childExtend: ColorTemplate,
+    $setStateCollection: mapColors
   }
 }

package/src/pages/Color/themeLightDark.js

@@ -0,0 +1,121 @@
+'use strict'
+
+import { Flex, GlobalThemeTemplate, Hoverable } from '@symbo.ls/components'
+
+import { ContinueButton, HeaderHeading } from '../../components'
+
+const header = {
+  extend: HeaderHeading
+}
+
+const paragraphs = {
+  extend: Flex,
+  childExtend: { tag: 'p' },
+  ...[{ text: 'To personalize your Symbols experience, we need to get started with themes' },
+    { text: 'Please fill in the document dark and light themes' }]
+}
+
+const modes = {
+  extend: Flex,
+  props: {
+    gap: 'C',
+    margin: '- - E2 -'
+  },
+  childExtend: {
+    extend: [Hoverable, GlobalThemeTemplate],
+    props: ({ state }) => ({
+      minWidth: 'G3',
+      maxWidth: '406px',
+      position: 'relative',
+      maxHeight: 'F',
+      boxSizing: 'content-box',
+      align: 'flex-start flex-start',
+      padding: 'A2 A X X1',
+      overflow: 'hidden',
+      round: 'A1',
+      background: state.background,
+      wrap: 'wrap',
+      icon: {
+        padding: '0',
+        boxSize: 'C C',
+        margin: '- - - Z2',
+        background: 'yellow .3',
+        style: {
+          pointerEvents: 'none',
+          '> svg': { fontSize: `${22 / 16}em` }
+        }
+      },
+      article: {
+        padding: 'X2 - - -',
+        title: { fontSize: 'D2' }
+      },
+      span: { text: 'hover to change' },
+
+      ':hover': {
+        style: {
+          '[buttons]': {
+            opacity: '1',
+            transform: 'translate3d(0, 0, 0)'
+          }
+        }
+      }
+    }),
+
+    icon: {},
+    article: {},
+
+    ThemeButtons: {
+      transform: 'translate3d(0, 150%, 0)',
+      transition: 'B default-bezier',
+      transitionProperty: 'transform, opacity',
+      opacity: '0',
+      margin: 'C1 0 0 0',
+      alignSelf: 'flex-end'
+    },
+
+    span: {
+      props: {
+        position: 'absolute',
+        bottom: 'A2',
+        left: 'B',
+        fontSize: 'Z',
+        color: 'gray7',
+        style: { fontStyle: 'italic' }
+      }
+    }
+  },
+
+  $setStateCollection: () => [{
+    title: 'Night',
+    key: 'dark',
+    icon: 'moon',
+    background: 'gray3'
+  }, {
+    title: 'Dark',
+    key: 'light',
+    icon: 'sun',
+    background: 'white'
+  }]
+}
+
+const props = {
+  header: { margin: '- - C2 -' },
+  paragraphs: {
+    gap: 'E',
+    margin: '- - D1 -',
+    childProps: {
+      fontSize: 'Z1',
+      color: 'gray6',
+      maxWidth: `${272 / 14}em`
+    }
+  }
+}
+
+export const themeLightDark = {
+  props,
+
+  header,
+  paragraphs,
+  modes,
+  ContinueButton
+}

package/src/pages/Color/themes.js

@@ -3,8 +3,8 @@
 import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 
 const mapThemes = (el, s) => {
-  if (!el.context.SYSTEM) return
-  const { THEME } = el.context.SYSTEM
+  if (!s.__system) return
+  const { THEME } = s.__system
   const themeKeys = Object.keys(THEME)
   return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }

package/src/pages/DesignSystem/Dashboard/banners.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+import { TutorialBanner } from '../../../components'
+
+import DARK_PNG from '../../../assets/dark.png'
+import TYPE_PNG from '../../../assets/type.png'
+import SPACE_PNG from '../../../assets/space.png'
+
+export default {
+  extend: Flex,
+
+  props: {
+    align: 'stretch space-between',
+    margin: 'C1 -Z1',
+    gap: 'B1'
+  },
+
+  childExtend: TutorialBanner,
+
+  $setStateCollection: ({ state }) => [{
+    title: 'Setting up a dark theme',
+    p: '1 min tutorial',
+    background: DARK_PNG,
+    href: ''
+  }, {
+    title: 'Learn typography scaling',
+    p: '2 mins tutorial',
+    background: TYPE_PNG,
+    href: ''
+  }, {
+    title: 'How scaling of space works',
+    p: '5 mins tutorial',
+    background: SPACE_PNG,
+    href: ''
+  }]
+}

package/src/pages/DesignSystem/Dashboard/index.js

@@ -1,74 +1,8 @@
 'use strict'
 
-import { Flex, ArticleMedium, QuickStart } from '@symbo.ls/components'
-import { TutorialBanner } from '../../../components'
-
-import DARK_PNG from '../../../assets/dark.png'
-import TYPE_PNG from '../../../assets/type.png'
-import SPACE_PNG from '../../../assets/space.png'
-
-const banners = {
-  extend: Flex,
-  props: {
-    align: 'stretch space-between',
-    margin: 'C1 -Z1',
-    gap: 'B1'
-  },
-
-  childExtend: TutorialBanner,
-
-  $setStateCollection: ({ state }) => [{
-    title: 'Setting up a dark theme',
-    p: '1 min tutorial',
-    background: DARK_PNG,
-    href: ''
-  }, {
-    title: 'Learn typography scaling',
-    p: '2 mins tutorial',
-    background: TYPE_PNG,
-    href: ''
-  }, {
-    title: 'How scaling of space works',
-    p: '5 mins tutorial',
-    background: SPACE_PNG,
-    href: ''
-  }]
-}
-
-const header = {
-  extend: ArticleMedium,
-  props: {
-    '@mobileS': { padding: '- - - A' },
-    title: {
-      fontWeight: '600',
-      text: 'Design System takeaways'
-    },
-
-    p: { text: `Your tokens in the system`
-    },
-
-    p2: {
-      display: 'none',
-      color: 'gray6',
-      margin: '0'
-    }
-  },
-
-  title: {},
-  p: {},
-  p2: {
-    tag: 'p',
-    ...[
-      'Welcome to the Symbols documentation page.',
-      { text: `Here you'll learn everything…` }
-    ]
-  }
-}
-
-const summary = {
-  header
-
-}
+import summary from './summary'
+import quickstart from './quickstart'
+import banners from './banners'
 
 export const DesignSystemDashboard = {
   ArticleBig: {
@@ -77,6 +11,6 @@ export const DesignSystemDashboard = {
   },
 
   banners,
-  quickStart: { extend: QuickStart },
+  quickstart,
   summary
 }

package/src/pages/DesignSystem/Dashboard/quickstart.js

@@ -0,0 +1,61 @@
+'use strict'
+
+export default {
+  props: {
+    margin: 'C1 - E1'
+  },
+
+  SectionHeader: {
+    margin: '- - B2',
+    title: 'Setting up',
+    p: 'This is how you initialize Symbols Design System to your local app.'
+  },
+
+  Flex: {
+    props: {
+      gap: 'C1',
+      align: 'flex-start space-between',
+      childProps: {
+        flex: '1',
+        maxWidth: 'H2'
+      }
+    },
+
+    step1: {
+      extend: 'QuickStartTerminal',
+      QuickStartNumber: { width: '.87ch', text: '1' },
+      Terminal: {
+        command: { text: 'yarn add smbls@^1.1.1' }
+      }
+    },
+
+    step2: {
+      extend: 'QuickStartCode',
+      QuickStartNumber: { text: '2' },
+      Code: {
+        code: {
+          text: {
+            react: `import { SymbolsProvider } from 'smbls/react'
+<SymbolsProvider config={{ color… }} />`,
+            domql: `import { init } from 'smbls'
+init({ color, theme, typography… })`
+          }
+        }
+      }
+    },
+
+    step3: {
+      extend: 'QuickStartCode',
+      QuickStartNumber: { text: '3' },
+      Code: {
+        code: {
+          text: {
+            react: `import { Box } from 'smbls/react'
+<Box color='primary' />`,
+            domql: `{ props: { color: 'primary' } }`
+          }
+        }
+      }
+    }
+  }
+}

package/src/pages/DesignSystem/Dashboard/summary.js

@@ -0,0 +1,9 @@
+'use strict'
+
+export default {
+  SectionHeader: {
+    margin: '- - C1',
+    title: 'Design System takeaways',
+    p: 'Your tokens in the system at a glance'
+  }
+}

package/src/pages/Fonts/fontFaces.js

@@ -4,8 +4,8 @@ import { Grid, Hoverable, FontObject } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 const mapFonts = (el, s) => {
-  if (!el.context.SYSTEM) return
-  const { FONT } = el.context.SYSTEM
+  if (!s.__system) return
+  const { FONT } = s.__system
   const fontKeys = Object.keys(FONT)
 
   return fontKeys.map(v => {

package/src/pages/Fonts/fontFamilies.js

@@ -4,8 +4,8 @@ import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 const mapFontFamilies = (el, s) => {
-  if (!el.context.SYSTEM) return
-  const { FONT_FAMILY } = el.context.SYSTEM
+  if (!s.__system) return
+  const { FONT_FAMILY } = s.__system
   const fontFamilyKeys = Object.keys(FONT_FAMILY)
 
   return fontFamilyKeys.map(v => {

package/src/pages/Shapes/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex, Line } from '@symbo.ls/components'
+import { Flex } from '@symbo.ls/components'
 
 import {
   rectangle,
@@ -63,7 +63,7 @@ export const Shapes = {
       }
     },
 
-    line: { extend: Line },
+    Line: {},
 
     svgShapes: {
       SectionHeader: {

package/src/pages/Spaces/index.js

@@ -1,21 +1,20 @@
 'use strict'
 
-import { TypeSection } from '../Typography/shared'
-import { SpacingScale } from './SpacingScale'
+import sequence from './sequence'
 import { state } from './state'
 
 export const Spaces = {
   state,
 
-  spaces: {
-    extend: TypeSection,
-    state: {
-      title: 'Spacing',
-      p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
-    }
+  SectionHeader: {
+    margin: '0 0 C',
+    title: 'Spacing',
+    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
   },
 
+  SlidersWithResponsive: {},
+
   Line: {},
 
-  scale: SpacingScale
+  sequence
 }

package/src/pages/Spaces/{SpacingScale.js → sequence.js}

@@ -3,7 +3,7 @@
 import { Flex } from '@symbo.ls/components'
 import { Table } from './Table'
 
-export const SpacingScale = {
+export default {
   extend: [Flex],
 
   props: {
@@ -13,30 +13,17 @@ export const SpacingScale = {
   },
 
   SectionHeader: {
-    title: 'The Sequence',
+    title: 'Sequence',
     p: 'Spacing scale is a set of values that are used to define the padding, margin, gap and width of components.',
     margin: '0'
   },
 
-  SequenceSliders: {
-    // position: 'sticky',
-    // top: 'C2',
-    // background: 'black .5',
-    // zIndex: '9999',
-    // margin: '-B2 -B -B',
-    // padding: 'B2 B B',
-    // style: {
-    //   backdropFilter: 'blur(15px)'
-    // }
-  },
-
   scale: {
     extend: Flex,
     props: {
       lazyLoad: true,
       flow: 'column',
       gap: 'B1',
-      margin: '0 0 C2',
 
       table: { flex: 1 },
       preview: { flex: 1 }

package/src/pages/Theme/index.js

@@ -26,7 +26,7 @@ const ThemeNameField = {
   props: ({ state }) => ({
     gap: '0',
 
-    caption: {
+    title: {
       text: 'Name the theme'
     },
 
@@ -49,7 +49,7 @@ const ThemeNameField = {
     }
   }),
 
-  caption: {},
+  title: {},
   element: {
     extend: Pseudo,
     attr: { contentEditable: true, id: 'name-it' }
@@ -145,11 +145,11 @@ export const Theme = {
 
   on: {
     init: (el, s) => {
-      if (!el.context.SYSTEM) return
+      if (!s.__system) return
       const path = window.location.pathname
       const pathArray = path.split('theme/')
-      if (!el.context.SYSTEM) return
-      const { THEME } = el.context.SYSTEM
+      if (!s.__system) return
+      const { THEME } = s.__system
       const themeName = pathArray[1]
       var value = THEME[themeName]
 

package/src/pages/Typography/documentStyles.js

@@ -4,21 +4,15 @@ import { findHeadingLetter, getFontFamily } from '@symbo.ls/scratch'
 import {
   DocumentStylesSequence,
   Flex,
-  SectionHeader,
-  SelectField,
-  SequenceSliders,
-  DeviceButtonSet
+  SelectField
 } from '@symbo.ls/components'
 
 import { HTML_TAGS } from '@domql/tags' // eslint-disable-line no-unused-vars
 
 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'
-    }
+  SectionHeader: {
+    title: 'Document Styles',
+    p: 'Document styling and theming provides global themes of the entire app, imagine it as a :root styling'
   },
 
   styles: {
@@ -40,12 +34,6 @@ export default {
       }
     },
 
-    header: {
-      extend: Flex,
-      SequenceSliders,
-      DeviceButtonSet
-    },
-
     headings: {
       extend: DocumentStylesSequence,
 
@@ -225,7 +213,7 @@ export default {
 
   on: {
     init: (el, s) => {
-      if (!el.context.SYSTEM) return
+      if (!s.__system) return
       const { context } = el // eslint-disable-line no-unused-vars
       const { TYPOGRAPHY } = context.SYSTEM
       const { styles } = TYPOGRAPHY

package/src/pages/Typography/index.js

@@ -11,10 +11,13 @@ export const Typography = {
   state,
 
   SectionHeader: {
+    margin: '0 0 C',
     title: 'Typography',
     p: 'A general configuration of type properties on the document.'
   },
 
+  SlidersWithResponsive: {},
+
   line: { extend: 'Line' },
 
   documentStyles,
@@ -28,6 +31,10 @@ export const Typography = {
   on: {
     init: (el, s) => {
       mapSequence(s, sortSequence)
+    },
+    stateUpdated: (el, s, changes) => {
+      console.log(changes)
+      s.systemUpdate({ TYPOGRAPHY: changes })
     }
   }
 }

package/src/pages/Typography/state.js

@@ -1,8 +1,8 @@
 'use strict'
 
-export default {
-  base: 16,
-  ratio: 1.2,
+export default ({ parent }) => ({
+  base: parent.state.__system.TYPOGRAPHY.base,
+  ratio: parent.state.__system.TYPOGRAPHY.ratio,
   range: [-3, +8],
   h1Matches: +6,
   scales: {},
@@ -13,4 +13,4 @@ export default {
 
   sampleText: 'Today is a big day for our tribe. The year ends.',
   activeTab: ''
-}
+})

package/src/state.js

@@ -1,15 +1,16 @@
 'use strict'
 
-import SYMBOLS_CONF from '@symbo.ls/config'
 import SYSTEM from './config'
 import { LIBRARY, COMPONENTS } from '../.symbols'
+import BYLD from '../user_data/byld'
 
 export const state = {
-  globalTheme: 'dark'
+  globalTheme: 'dark',
+  SYSTEM: BYLD
 }
 
 export const context = {
-  CONFIG: SYMBOLS_CONF,
+  CONFIG: BYLD,
   LIBRARY,
   SYSTEM,
   COMPONENTS