@symbo.ls/default-config 3.8.9 → 3.14.0

package/README.md

@@ -1,2 +1,5 @@
 # Default Config
-This is a default repository for Symbols Design Systems. It shows how it works and provides some default propoerties. Check out the [docs page](http://symbols.app/developersintro#configuration) to learn more.
+
+Default design system configuration for Symbols v4. Provides baseline color, typography, spacing, media query, and theme definitions used when no custom config is supplied. The atomic CSS engine (`@symbo.ls/css`) and `@symbo.ls/scratch` consume this config to generate design tokens.
+
+Check out the [docs page](http://symbols.app/developersintro#configuration) to learn more.

package/blank/font.js

@@ -2,7 +2,7 @@
 
 export const font = {}
 
-export const font_family = {
+export const fontFamily = {
   system: {
     value: ['"Helvetica Neue"', 'Helvetica', 'Arial'],
     type: 'sans-serif'

package/blank/index.js

@@ -1,12 +1,12 @@
 'use strict'
 
-import { color, gradient } from './color'
-import { theme } from './theme'
-import { typography } from './typography'
-import { spacing } from './spacing'
-import { font, font_family } from './font'
-import { media } from './media'
-import { timing } from './timing'
+import { color, gradient } from './color.js'
+import { theme } from './theme.js'
+import { typography } from './typography.js'
+import { spacing } from './spacing.js'
+import { font, fontFamily } from './font.js'
+import { media } from './media.js'
+import { timing } from './timing.js'
 
 export const DEFAULT_CONFIG = {
   version: '0.0.1',
@@ -16,7 +16,7 @@ export const DEFAULT_CONFIG = {
   typography,
   spacing,
   font,
-  font_family,
+  fontFamily,
   timing,
   media,
   reset: {

package/components/Atoms/Block.js

@@ -0,0 +1,29 @@
+'use strict'
+
+export const Block = {
+  display: 'block'
+}
+
+export const Inline = {
+  display: 'inline'
+}
+
+export const Flex = {
+  display: 'flex'
+}
+
+export const InlineFlex = {
+  display: 'inline-flex'
+}
+
+export const Grid = {
+  display: 'grid'
+}
+
+export const InlineGrid = {
+  display: 'inline-grid'
+}
+
+export const Gutter = {
+  boxSize: 'C1'
+}

package/components/Atoms/Box.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { useCssInProps } from 'css-in-props'
+
+// Main class assignment handler
+const onBeforeClassAssign = (element) => {
+  if (!element.context) return
+  const { props, __ref: ref } = element
+  const result = useCssInProps(props, element, { unpack: false })
+  ref.__class = result
+}
+
+export const Box = {
+  extends: [
+    'Shape',
+    'Theme'
+  ],
+
+  boxSizing: 'border-box',
+
+  onBeforeClassAssign
+}
+
+export const Hr = {
+  tag: 'hr',
+  margin: 'C1 0'
+}
+export const Br = { tag: 'br' }
+export const Li = { tag: 'li' }
+export const Ul = {
+  tag: 'ul',
+  childExtends: { extends: 'Li' }
+}
+export const Ol = {
+  tag: 'ol',
+  childExtends: { extends: 'Li' }
+}

package/components/Atoms/Form.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export const Form = {
+  tag: 'form',
+}

package/components/Atoms/Grid.js

@@ -0,0 +1,37 @@
+'use strict'
+
+export const Grid = {
+  display: 'grid',
+
+  class: {
+    area: (el) => (el.area ? { gridArea: el.area } : null),
+    template: (el) =>
+      el.template ? { gridTemplate: el.template } : null,
+    templateAreas: (el) =>
+      el.templateAreas ? { gridTemplateAreas: el.templateAreas } : null,
+
+    column: (el) => (el.column ? { gridColumn: el.column } : null),
+    columns: (el) =>
+      el.columns ? { gridTemplateColumns: el.columns } : null,
+    templateColumns: (el) =>
+      el.templateColumns
+        ? { gridTemplateColumns: el.templateColumns }
+        : null,
+    autoColumns: (el) =>
+      el.autoColumns ? { gridAutoColumns: el.autoColumns } : null,
+    columnStart: (el) =>
+      el.columnStart ? { gridColumnStart: el.columnStart } : null,
+
+    row: (el) => (el.row ? { gridRow: el.row } : null),
+    rows: (el) => (el.rows ? { gridTemplateRows: el.rows } : null),
+    templateRows: (el) =>
+      el.templateRows ? { gridTemplateRows: el.templateRows } : null,
+    autoRows: (el) =>
+      el.autoRows ? { gridAutoRows: el.autoRows } : null,
+    rowStart: (el) =>
+      el.rowStart ? { gridRowStart: el.rowStart } : null,
+
+    autoFlow: (el) =>
+      el.autoFlow ? { gridAutoFlow: el.autoFlow } : null
+  }
+}

package/components/Atoms/Hgroup.js

@@ -0,0 +1,57 @@
+'use strict'
+
+export const Hgroup = {
+  display: 'flex',
+  tag: 'hgroup',
+
+  flow: 'y',
+  gap: 'Y2',
+
+  H: {
+    color: 'title',
+    tag: 'h3',
+    lineHeight: '1em',
+    margin: '0'
+  },
+  P: {
+    margin: '0',
+    color: 'paragraph'
+  }
+}
+
+export const HgroupRows = {
+  extends: 'Hgroup',
+
+  H: {
+    display: 'flex',
+    color: 'title',
+    align: 'center space-between'
+  },
+
+  P: {
+    color: 'paragraph',
+    align: 'center space-between'
+  }
+}
+
+export const HgroupButton = {
+  extends: 'HgroupRows',
+
+  H: {
+    justifyContent: 'space-between',
+
+    Span: {},
+
+    Button: {
+      background: 'transparent',
+      color: 'currentColor',
+      padding: '0',
+      Icon: {
+        name: 'x',
+        fontSize: 'C'
+      }
+    }
+  },
+
+  P: {}
+}

package/components/Atoms/Iframe.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export const Iframe = {
+  tag: 'iframe',
+  position: 'relative',
+  minWidth: 'H',
+  minHeight: 'H'
+}

package/components/Atoms/Img.js

@@ -0,0 +1,9 @@
+'use strict'
+
+export const Img = {
+  tag: 'img',
+
+  attr: {
+    title: (el) => el.title || el.alt
+  }
+}

package/components/Atoms/InteractiveComponent.js

@@ -0,0 +1,65 @@
+'use strict'
+
+const style = {
+  appearance: 'none',
+  cursor: 'pointer',
+  fontFamily: 'inherit'
+}
+
+export const Hoverable = {
+  transition: 'C defaultBezier',
+  transitionProperty: 'opacity, transform',
+  opacity: 0.85,
+
+  ':hover': {
+    opacity: 0.9,
+    transform: 'scale(1.015)'
+  },
+  ':active': {
+    opacity: 1,
+    transform: 'scale(1.015)'
+  },
+  '.active': {
+    opacity: 1,
+    transform: 'scale(1.015)',
+
+    ':hover': { opacity: 1 }
+  }
+}
+
+export const Clickable = {
+  extends: 'Hoverable',
+  ':active': {
+    opacity: 1,
+    transform: 'scale(1.015)'
+  },
+  '.active': {
+    opacity: 1
+  }
+}
+
+export const Focusable = {
+  border: 'none',
+  outline: 'solid 0 blue.3',
+  ':focus-visible': {
+    opacity: 1,
+    outline: 'solid X blue.3'
+  },
+
+  attr: {
+    tabIndex: (el) => el.tabIndex
+  }
+}
+
+export const FocusableComponent = {
+  extends: 'Focusable',
+  tag: 'button',
+  fontSize: 'A',
+  type: 'button',
+  border: 'none',
+  textDecoration: 'none',
+  lineHeight: '1',
+  whiteSpace: 'nowrap',
+  fontFamily: 'inherit',
+  style
+}

package/components/Atoms/Picture.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { getSystemGlobalTheme } from './Theme.js'
+
+export const Picture = {
+  deps: { getSystemGlobalTheme },
+  tag: 'picture',
+
+  childExtends: {
+    deps: { getSystemGlobalTheme },
+    tag: 'source',
+    attr: {
+      media: (element) => {
+        const { key, context, deps } = element
+        const { media } = context.designSystem
+        const globalTheme = deps.getSystemGlobalTheme(element)
+        const mediaName = (element.media || key).slice(1)
+
+        if (mediaName === globalTheme) return '(min-width: 0px)'
+        else if (mediaName === 'dark' || mediaName === 'light')
+          return '(max-width: 0px)'
+
+        return media[mediaName]
+      }
+    }
+  },
+
+  Img: {
+    width: 'inherit',
+    ignoreChildExtends: true,
+    height: 'inherit',
+    src: (element, state) => element.parent?.src || state.src
+  }
+}

package/components/Atoms/Shape/index.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export * from '../Shape.js'

package/components/Atoms/Shape.js

@@ -0,0 +1,249 @@
+'use strict'
+
+import { exec } from '@symbo.ls/utils'
+import { getActiveConfig, getColor, getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
+import { TIMING_PROPS } from 'css-in-props/src/props'
+
+const CONFIG = getActiveConfig()
+
+export const depth = {
+  4: {
+    boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.unit.default} 4${CONFIG.unit.default}`
+  },
+  6: {
+    boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG.unit.default} 6${CONFIG.unit.default}`
+  },
+  10: {
+    boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG.unit.default} 10${CONFIG.unit.default}`
+  },
+  16: {
+    boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG.unit.default} 16${CONFIG.unit.default}`
+  },
+  26: {
+    boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.unit.default} 26${CONFIG.unit.default}`
+  },
+  42: {
+    boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.unit.default} 42${CONFIG.unit.default}`
+  }
+}
+
+const getComputedBackgroundColor = (el) => {
+  return (
+    getColor(el.shapeDirectionColor) ||
+    getColor(el.borderColor) ||
+    getColor(el.backgroundColor) ||
+    getColor(el.background)
+  )
+}
+
+const inheritTransition = (el) => {
+  const result = TIMING_PROPS.transition(el.transition, el)
+  return result && result.transition
+}
+
+export const SHAPES = {
+  rectangle: {},
+  circle: { borderRadius: '100%' },
+  bubble: {},
+  tv: {
+    borderRadius: '1.15em/2.5em'
+  },
+
+  tooltip: (el) => ({
+    position: el.position || 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0px',
+      height: '0px',
+      border: '.35em solid',
+      borderColor: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'border-color',
+      position: 'absolute',
+      borderRadius: '.15em'
+    }
+  }),
+
+  tooltipDirection: {
+    top: {
+      '&:before': {
+        top: '0',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        right: '0',
+        transform: 'translate(50%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        bottom: '0',
+        left: '50%',
+        transform: 'translate(-50%, 50%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        left: '0',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+
+  tag: (el) => ({
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      background: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'background',
+      borderRadius: '.25em',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      height: '73%'
+    }
+  }),
+
+  tagDirection: {
+    top: {
+      '&:before': {
+        bottom: '100%',
+        left: '50%',
+        transform: 'translate(-50%, 50%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        left: '100%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        top: '100%',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        right: '100%',
+        transform: 'translate(50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+
+  hexagon: (el) => ({
+    position: 'relative',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      borderRadius: '.25em',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      height: '73%',
+      background: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      left: '0',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    },
+    '&:after': {
+      left: '100%',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    }
+  }),
+
+  chevron: (el) => ({
+    position: 'relative',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      transition: inheritTransition(el),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%)`
+    },
+    '&:after': {
+      background: getComputedBackgroundColor(el),
+      borderRadius: '.25em'
+    }
+  }),
+
+  chevronDirection: {
+    left: {
+      '&:before': {
+        height: '100%',
+        left: '100%',
+        transform: 'translate3d(-1%, -50%, 1px) scale(-1, 1)'
+      },
+      '&:after': {
+        height: '73%',
+        left: '0',
+        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        height: '100%',
+        left: '0',
+        transform: 'translate3d(-99%, -50%, 1px)'
+      },
+      '&:after': {
+        height: '73%',
+        left: '100%',
+        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+      }
+    }
+  }
+}
+
+export const Shape = {
+  deps: { exec, getSpacingBasedOnRatio, getMediaColor },
+
+  classlist: {
+    shape: (el) => {
+      return el.deps.exec(SHAPES[el.shape], el)
+    },
+    shapeDirection: (el) => {
+      if (!el.shape || !el.shapeDirection) return
+      const shapeDir = SHAPES[el.shape + 'Direction']
+      return el.shape && shapeDir ? shapeDir[el.shapeDirection || 'left'] : null
+    },
+    shapeDirectionColor: (el) => {
+      const borderColor = {
+        borderColor: el.deps.getMediaColor(el.background || el.backgroundColor)
+      }
+      return el.shapeDirection ? borderColor : null
+    }
+  }
+}
+
+export const Circle = {
+  round: '100%'
+}
+
+export default Shape

package/components/Atoms/Svg.js

@@ -0,0 +1,45 @@
+'use strict'
+
+// create SVG symbol
+export const Svg = {
+  tag: 'svg',
+  attr: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+  },
+  html: (el) => {
+    const { context } = el
+    if (el.semanticIcons) return
+    if (el.html && typeof el.html !== 'function') return el.call('exec', el.html, el)
+
+    const { designSystem, utils } = context
+    const SVG = designSystem && designSystem.svg
+    const useSvgSprite = el.spriteId || (designSystem && designSystem.useSvgSprite)
+
+    const src = el.call('exec', el.src, el)
+    if (!useSvgSprite && src) return src
+
+    const useSVGSymbol = icon => `<use xlink:href="#${icon}" />`
+
+    const spriteId = el.spriteId
+    if (spriteId) return useSVGSymbol(spriteId)
+
+    if (SVG && SVG[src]) return useSVGSymbol(src)
+
+    const symbolId = Symbol.for(src)
+    let SVGKey = SVG[symbolId]
+    if (SVGKey && SVG[SVGKey]) return useSVGSymbol(SVGKey)
+
+    SVGKey = SVG[symbolId] = Math.random()
+    if (src) {
+      utils.init({
+        svg: { [SVGKey]: src }
+      }, {
+        document: context.document,
+        emotion: context.emotion
+      })
+    }
+
+    return useSVGSymbol(SVGKey)
+  }
+}

package/components/Atoms/Text.js

@@ -0,0 +1,43 @@
+'use strict'
+
+export const Text = {}
+
+export const H1 = { tag: 'h1' }
+export const H2 = { tag: 'h2' }
+export const H3 = { tag: 'h3' }
+export const H4 = { tag: 'h4' }
+export const H5 = { tag: 'h5' }
+export const H6 = { tag: 'h6' }
+export const P = { tag: 'p' }
+export const Caption = { tag: 'caption' }
+export const Strong = {
+  tag: 'strong',
+  fontWeight: '700'
+}
+export const U = { tag: 'u' }
+export const Underline = { tag: 'u' }
+export const Italic = { tag: 'i' }
+
+export const Title = {}
+
+export const Headline = {
+  tag: 'h6',
+  fontSize: 'B',
+  fontWeight: 500
+}
+
+export const Subhead = {
+  tag: 'span',
+  fontSize: 'Z1'
+}
+
+export const Footnote = {
+  tag: 'span',
+  fontSize: 'Z'
+}
+
+export const B = { tag: 'b' }
+
+export const I = { tag: 'i' }
+
+export const Data = { tag: 'data' }

package/components/Atoms/Theme.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { depth } from './Shape.js'
+import { isUndefined } from '@symbo.ls/utils'
+
+export const getSystemGlobalTheme = ({ context, state }) => {
+  const rootState = state && state.root
+  const theme = (rootState && rootState.globalTheme) || (context.designSystem && context.designSystem.globalTheme)
+  return theme === 'auto' ? null : theme
+}
+
+export const Theme = {
+  deps: {
+    depth
+  },
+
+  classlist: {
+    depth: (el) => !isUndefined(el.depth) && el.deps.depth[el.depth]
+  }
+}