@symbo.ls/preview 2.7.25 → 2.11.269

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 symbo.ls
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/articles/Colors.js

@@ -0,0 +1,75 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+import { Banner } from '@symbo.ls/banner'
+import { ColorBlock } from '../blocks'
+
+export const Colors = {
+  tag: 'article',
+  extend: Flex,
+  props: {
+    margin: 'auto',
+    minWidth: '100%'
+  },
+
+  Header: {
+    tag: 'header',
+    extend: Banner,
+    Title: { text: 'Colors' },
+    Paragraph: {
+      P: {},
+      Flex: {
+        Title: {},
+        Paragraph: [{
+          props: { text: 'Brand color pallete' }
+        }, {
+          props: { text: 'Semantic colors' }
+        }, {
+          props: { text: 'Theming' }
+        }]
+      }
+    }
+  },
+
+  Flex: {
+    props: {
+      flow: 'column',
+      overflow: 'auto',
+      padding: '- D E D',
+      '@mobileM': { padding: '- C' },
+      '@mobileS': { padding: '- B' }
+    },
+
+    childExtend: ColorBlock,
+
+    pallete: {
+      Title: { text: 'Color pallete' },
+      Paragraph: {
+        $collection: ({ context }) => {
+          const { COLOR } = context.designSystem
+          return Object.keys(COLOR).filter(v => COLOR[v].value)
+            .map(v => ({
+              Color: { background: v },
+              Description: {
+                Title: { text: v },
+                Value: { text: COLOR[v].value },
+                Var: { text: COLOR[v].var }
+              }
+            }))
+        }
+      }
+    },
+
+    semantics: {
+      Title: { props: { text: 'Themes' } },
+      Paragraph: {
+        props: {
+          childProps: { theme: 'dialog' }
+        },
+        ...[
+          {}, {}, {}, {}, {}, {}, {}, {}
+        ]
+      }
+    }
+  }
+}

package/articles/Icons.js

@@ -0,0 +1,29 @@
+'use strict'
+
+import { icon } from '../blocks'
+
+export const Icons = {
+  tag: 'article',
+  extend: 'Flex',
+
+  Header: {
+    tag: 'header',
+    extend: 'Banner',
+    Title: { text: 'Icons' },
+    Paragraph: {
+      P: {},
+      Flex: {
+        Title: {},
+        Paragraph: {
+          ...[{
+            props: { text: 'Brand font' }
+          }, {
+            props: { text: 'Functional font' }
+          }]
+        }
+      }
+    }
+  },
+
+  Section: { extend: icon }
+}

package/articles/Shadows.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+import { Banner } from '@symbo.ls/banner'
+import { shadow } from '../blocks'
+
+export const Shadows = {
+  tag: 'article',
+  extend: Flex,
+
+  Header: {
+    tag: 'header',
+    extend: Banner,
+
+    Title: { text: 'Shadow' },
+    Paragraph: {
+      P: {},
+      Flex: {
+        Title: {},
+        Paragraph: {
+          ...[{
+            props: { text: 'Brand font' }
+          }, {
+            props: { text: 'Functional font' }
+          }]
+        }
+      }
+    }
+  },
+
+  Section: {
+    extend: shadow
+  }
+}

package/articles/Shapes.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+
+import { Banner } from '@symbo.ls/banner'
+import { shape } from '../blocks'
+
+export const Shapes = {
+  tag: 'article',
+  extend: Flex,
+
+  Header: {
+    tag: 'header',
+    extend: Banner,
+
+    Title: {
+      props: {
+        text: 'Shapes',
+        lineHeight: '1.15em'
+      }
+    },
+    Paragraph: {
+      P: {},
+      Flex: {
+        Title: {},
+        Paragraph: {
+          ...[{
+            props: { text: 'Brand font' }
+          }, {
+            props: { text: 'Functional font' }
+          }]
+        }
+      }
+    }
+  },
+
+  Section: {
+    extend: shape
+  }
+}

package/articles/Spacing.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+
+import { Banner } from '@symbo.ls/banner'
+
+export const Spacing = {
+  tag: 'article',
+  extend: Flex,
+
+  Header: {
+    tag: 'header',
+    extend: Banner,
+
+    Title: {
+      props: {
+        text: 'Spacing',
+        lineHeight: '1.15em'
+      }
+    },
+    Paragraph: {
+      P: {},
+      Flex: {
+        Title: {},
+        Paragraph: {
+          ...[{
+            props: { text: 'Brand font' }
+          }, {
+            props: { text: 'Functional font' }
+          }]
+        }
+      }
+    }
+  }
+}

package/articles/Themes.js

@@ -0,0 +1,92 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+import { Icon } from '@symbo.ls/icon'
+import { ColorBlock } from '../blocks'
+
+export const Themes = {
+  tag: 'article',
+  extend: Flex,
+
+  Banner: {
+    Title: { props: { text: 'Themes' } },
+    Paragraph: {
+      props: {
+        alignItems: 'flex-end'
+      },
+      list: {
+        Title: { text: 'What you’ll find' },
+        Paragraph: {
+          ...[
+            { text: 'Dark theme' },
+            { text: 'Light theme' }
+          ]
+        }
+      },
+      P: {
+        text: 'Our color palette is led by a bold, distinct primary color and rounded out by a select set of secondary colors that give depth and diversity to our designs.'
+      }
+    }
+  },
+
+  Flex: {
+    props: {
+      flow: 'column',
+      padding: 'E C1 - C1',
+      gap: 'E'
+    },
+    childExtend: {
+      extend: ColorBlock,
+      Hgroup: {},
+      Grid: {
+        props: {
+          columns: 'repeat(5, 1fr)',
+          childProps: {
+            theme: 'primary',
+            border: 'none !important'
+          }
+        },
+        childExtend: {
+          extend: Flex,
+          props: {
+            flow: 'column',
+            align: 'flex-start space-between',
+            padding: 'Z1 Z2'
+          },
+          icons: {
+            extend: Flex,
+            props: {
+              gap: 'B',
+              align: 'center space-between',
+              minWidth: '100%'
+            },
+            childExtend: Icon,
+            ...[
+              { props: { icon: 'sun' } },
+              { props: { icon: 'moon' } }
+            ]
+          },
+          title: {
+            tag: 'h6',
+            props: {
+              text: 'primary',
+              textTransform: 'capitalize',
+              fontWeight: '500'
+            }
+          }
+        },
+        ...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
+      }
+
+    },
+    ...[
+      {
+        Hgroup: {
+          Title: { props: { text: 'Dark Theme' } }
+        },
+        Grid: {
+        }
+      }
+    ]
+  }
+}

package/articles/Typography.js

@@ -0,0 +1,90 @@
+'use strict'
+
+// import { font } from '../Sections'
+import { FontsBlock } from '../blocks'
+
+export const Typography = {
+  tag: 'article',
+  extend: 'Flex',
+
+  Header: {
+    tag: 'header',
+    extend: 'Banner',
+    Title: {
+      props: {
+        text: 'type',
+        lineHeight: '1.15em'
+      }
+    },
+    Paragraph: {
+      P: {},
+      Flex: {
+        Title: {},
+        Paragraph: {
+          ...[{
+            props: { text: 'Brand font' }
+          }, {
+            props: { text: 'Functional font' }
+          }]
+        }
+      }
+    }
+  },
+
+  Flex: {
+    props: {
+      flow: 'column',
+      padding: 'B - C -',
+      childProps: {
+        ':not(:last-child)': {
+          border: 'solid, white .15',
+          borderWidth: '0 0 1px 0'
+        }
+      }
+    },
+    childExtend: FontsBlock,
+    ...[{}, {}]
+  }
+  // Section: {
+
+  //   // Title: {},
+  //   // Paragraph: {
+  //   //   props: ({ state }) => ({
+  //   //     font: `"${state.name}", sans-serif`,
+  //   //     theme: 'dialog',
+  //   //     padding: 'B2 -',
+  //   //     wordWrap: 'break-word',
+  //   //     flex: 5,
+  //   //     overflow: 'hidden',
+  //   //     color: 'white',
+  //   //     flow: 'column',
+  //   //     text: 'ABCDEFGHIJKLMNToday is a big day for our tribe. The year ends.abcdefghijklmnopqrstuvwxyz',
+  //   //     fontSize: 'G2',
+  //   //     fontWeight: '900',
+  //   //     lineHeight: '1em',
+  //   //     maxWidth: 'F2'
+  //   //   })
+  //   // }
+  // }
+
+  // Section: {
+  //   extend: font,
+  //   Title: {
+  //     props: { text: 'Sans Serif' }
+  //   },
+  //   Paragraph: {
+  //     letters: {
+  //       H1: { text: 'ABCDEFGHIJKLMNToday is a big day for our tribe. The year ends.' },
+  //       H3: { text: 'abcdefghijklmopqrstuvwxyz' },
+  //       P: { text: 'Quick brown fox jumps over lazy frog' }
+  //     }
+  //   }
+  // },
+
+  // $setStateCollection: ({ context }) => {
+  //   const { FONT } = context.designSystem
+  //   return Object.keys(FONT).map(v => ({
+  //     name: v
+  //   }))
+  // }
+}

package/articles/index.js

@@ -0,0 +1,9 @@
+'use strict'
+
+export * from './Typography'
+export * from './Colors'
+export * from './Icons'
+export * from './Shapes'
+export * from './Themes'
+export * from './Shadows'
+export * from './Spacing'

package/blocks/Default.js

@@ -0,0 +1,41 @@
+'use strict'
+
+import { Hgroup } from '@symbo.ls/hgroup'
+
+export const DefaultBlock = {
+  tag: 'section',
+  extend: Hgroup,
+  props: {
+    flow: 'row',
+    boxSizing: 'border-box',
+    // padding: 'E D2 F1 D1',
+    gap: 'B'
+    // border: '2px solid red'
+    // minWidth: '100%'
+  },
+
+  Title: {
+    tag: 'h5',
+    props: {
+      fontSize: 'B2',
+      margin: '- - - B',
+      padding: 'X - - -',
+      // padding: '- - - X',
+      // letterSpacing: '-0.02em',
+      // padding: 'Z2 C X -',
+      // padding: 'A - A C1+X',
+      fontWeight: '900',
+      '@tabletS<': { alignItems: 'flex-end' },
+      letterSpacing: '0.07em',
+      style: {
+        writingMode: 'vertical-rl',
+        textOrientation: 'mixed',
+        transform: 'rotate(180deg)'
+      }
+    }
+
+  },
+  Paragraph: {
+    props: { flex: '1' }
+  }
+}

package/blocks/color.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import { Grid } from '@symbo.ls/atoms'
+import { DefaultBlock } from './section'
+
+const ColorTemplate = {
+  extend: 'Flex',
+  props: {
+    gap: 'A'
+  },
+
+  Color: {
+    boxSize: 'D1',
+    aspectRatio: '1 / 1',
+    theme: 'dialog',
+    round: 'W'
+  },
+
+  Description: {
+    extend: 'Flex',
+    props: { gap: 'X', flow: 'column' },
+    Title: { color: 'title' },
+    Value: { margin: 'X - -', color: 'paragraph' },
+    Var: { color: 'paragraph' }
+  }
+}
+
+export const ColorBlock = {
+  extend: DefaultBlock,
+
+  Title: {
+    props: {
+      text: 'Primary color',
+      padding: 'C1 - B1 -'
+    }
+  },
+
+  Paragraph: {
+    extend: Grid,
+
+    props: {
+      columns: 'repeat(4, 1fr)',
+      gap: 'D',
+      '@tabletS': { columns: 'repeat(3, 1fr)' },
+      '@mobileL': { columns: 'repeat(2, 1fr)' },
+      '@mobileS': { columns: 'repeat(1, 1fr)' },
+      '@mobileXS': { gap: 'A2' }
+    },
+
+    childExtend: ColorTemplate
+  }
+}

package/blocks/font.js

@@ -0,0 +1,60 @@
+'use stric'
+
+import { DefaultBlock } from './section'
+
+export const FontsBlock = {
+  extend: DefaultBlock,
+  props: {
+    flex: '1',
+    padding: 'D D D1 D',
+    '@mobileL': { padding: 'C C' },
+    '@mobileS': { padding: 'C B' }
+  },
+
+  Title: {
+    props: { text: 'Sans-Serif' }
+  },
+  Paragraph: {
+    tag: 'p',
+    props: {
+      theme: 'dialog',
+      fontSize: 'G2',
+      maxWidth: '100%',
+      boxSizing: 'border-box',
+      padding: 'A',
+      flow: 'column',
+      gap: '0',
+      round: 'V2',
+      lineHeight: '1.1em',
+      '@mobileL': {
+        fontSize: 'G',
+        padding: 'Z1 Z1'
+      },
+      '@mobileS': {
+        fontSize: 'F2',
+        padding: 'Z1 Z'
+      },
+
+      childProps: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        maxWidth: '100%',
+        whiteSpace: 'nowrap',
+        minWidth: '0',
+        text: 'Today is a big day for our tribe. The year ends.',
+        ':first-child': { fontWeight: '900' },
+        ':nth-child(2)': { fontWeight: '700' },
+        ':nth-child(3)': { fontWeight: '500' },
+        ':nth-child(4)': { fontWeight: '400' },
+        ':last-child': { fontWeight: '100' }
+      }
+    },
+    ...[
+      { },
+      {},
+      {},
+      {},
+      {}
+    ]
+  }
+}

package/blocks/icon.js

@@ -0,0 +1,54 @@
+'use strict'
+
+import { Grid } from '@symbo.ls/atoms'
+import { DefaultBlock } from './section'
+
+export const icon = {
+  extend: DefaultBlock,
+  props: {
+    padding: 'E D E1 D',
+    '@mobileL': { padding: 'D C' },
+    '@mobileS': { padding: 'D B' }
+  },
+
+  Title: null,
+  Paragraph: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(7, 1fr)',
+      gap: 'C',
+      '@tabletS': { gap: 'B1' },
+      '@mobileL': { gap: 'A2' },
+      '@mobileM': { gap: 'A' },
+      '@mobileS': { gap: 'Z' }
+      // padding: 'E D E2 D'
+    },
+    childExtend: {
+      extend: 'Flex',
+      props: {
+        align: 'center',
+        aspectRatio: '1/1',
+        theme: 'dialog',
+        round: 'Z'
+        // padding: 'D B'
+      },
+      Icon: {
+        margin: 'auto',
+        fontSize: 'D',
+        '@mobileM': { fontSize: 'C' },
+        '@mobileS': {
+          fontSize: 'B1',
+          round: 'X'
+        }
+      }
+    },
+
+    $collection: ({ context }) => {
+      const { ICONS } = context.designSystem
+      return Object.keys(ICONS).map(name => ({
+        Icon: { name }
+      }))
+    }
+
+  }
+}

package/blocks/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export * from './font'
+export * from './color'
+export * from './shadow'
+export * from './icon'
+export * from './shape'

package/blocks/section.js

@@ -0,0 +1,22 @@
+'use strict'
+
+import { Hgroup } from '@symbo.ls/hgroup'
+
+export const DefaultBlock = {
+  tag: 'section',
+  extend: Hgroup,
+
+  props: { gap: 'A' },
+
+  Title: {
+    tag: 'h5',
+    props: {
+      fontSize: 'A',
+      fontWeight: '500',
+      '@tabletS<': { alignItems: 'flex-end' },
+      letterSpacing: '.2em',
+      padding: '- Z1',
+      textTransform: 'uppercase'
+    }
+  }
+}