@symbo.ls/preview 2.7.24 → 2.11.265

package/Section.js

@@ -0,0 +1,41 @@
+'use strict'
+
+import { Hgroup } from '@symbo.ls/hgroup'
+
+export const DemoSection = {
+  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/articles/Colors.js

@@ -0,0 +1,75 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+import { Banner } from '@symbo.ls/banner'
+import { ColorSection } from '../_Sections'
+
+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: ColorSection,
+
+    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,95 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+
+import { Banner } from '@symbo.ls/banner'
+
+import { icon } from '../_Sections'
+
+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
+  }
+
+  // Flex: {
+  //   props: {
+  //     flow: 'column',
+  //     padding: 'E C1 - C1',
+  //     gap: 'A1'
+  //   },
+
+  //   Hgroup: {
+  //     props: {
+  //       flow: 'row'
+  //     },
+  //     Title: {
+  //       props: {
+  //         text: 'Library',
+  //         fontSize: 'C',
+  //         gap: 'Z2',
+  //         padding: '- C - Y',
+  //         fontWeight: '900',
+  //         ':after': {
+  //           content: '""',
+  //           height: '1px',
+  //           flex: '1',
+  //           display: 'block',
+  //           background: 'white .2',
+  //           round: 'C'
+  //         }
+
+  //       }
+  //     }
+  //   },
+
+  //   Grid: {
+  //     props: {
+  //       columns: 'repeat(12, 1fr)',
+  //       gap: 'Z'
+  //     },
+
+  //     childExtend: {
+  //       extend: 'Flex',
+  //       props: {
+  //         align: 'center',
+  //         aspectRatio: '1/1',
+  //         theme: 'dialog',
+  //         round: 'Z'
+  //       },
+  //       Icon: {
+  //         margin: 'auto',
+  //         fontSize: 'D'
+  //       }
+  //     },
+
+  //     $collection: ({ context }) => {
+  //       const { ICONS } = context.designSystem
+  //       return Object.keys(ICONS).map(name => ({
+  //         Icon: { name }
+  //       }))
+  //     }
+  //   }
+  // }
+}

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 '../_Sections'
+
+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 '../_Sections'
+
+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 { ColorSection } from '../_Sections'
+
+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: ColorSection,
+      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,95 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+// import { font } from '../Sections'
+import { Banner } from '@symbo.ls/banner'
+import { font } from '../_Sections'
+
+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: font,
+    ...[
+      {},
+      {}
+    ]
+  }
+  // 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'