@symbo.ls/uikit 2.10.253 → 2.10.267

package/ButtonSet/node_modules/@symbo.ls/scratch/src/system/font.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { isObject } from '@domql/utils'
+import { arrayzeValue } from '@symbo.ls/utils'
+import { getActiveConfig } from '../factory.js'
+
+import {
+  getDefaultOrFirstKey,
+  getFontFaceEach,
+  setCustomFontMedia
+} from '../utils'
+
+// const ENV = process.env.NODE_ENV
+
+export const setFont = (val, key) => {
+  const CSSvar = `--font-${key}`
+  const fontFace = val[0]
+    ? getFontFaceEach(key, val)
+    : setCustomFontMedia(key, val.url)
+  return { var: CSSvar, value: val, fontFace }
+}
+
+export const getFontFamily = (key, factory) => {
+  const CONFIG = getActiveConfig()
+  const { FONT_FAMILY } = CONFIG
+  return getDefaultOrFirstKey(factory || FONT_FAMILY, key)
+}
+
+export const setFontFamily = (val, key) => {
+  const CONFIG = getActiveConfig()
+  const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG
+  let { value, type } = val
+  if (val.isDefault) FONT_FAMILY.default = key
+
+  if (isObject(value)) value = arrayzeValue(value)
+
+  const CSSvar = `--font-family-${key}`
+  const str = `${value.join(', ')}, ${FONT_FAMILY_TYPES[type]}`
+  return { var: CSSvar, value: str, arr: value, type }
+}

package/ButtonSet/node_modules/@symbo.ls/scratch/src/system/index.js

@@ -0,0 +1,11 @@
+'use strict'
+
+export * from './color.js'
+export * from './theme.js'
+export * from './font.js'
+export * from './typography.js'
+export * from './spacing.js'
+export * from './timing.js'
+export * from './document.js'
+export * from './svg.js'
+export * from './reset.js'

package/ButtonSet/node_modules/@symbo.ls/scratch/src/system/reset.js

@@ -0,0 +1,73 @@
+'use strict'
+
+import { deepMerge, merge } from '@domql/utils'
+import { getActiveConfig } from '../factory.js'
+import { getMediaTheme } from '.'
+
+export const applyReset = (reset = {}) => {
+  const CONFIG = getActiveConfig()
+  const { RESET, TYPOGRAPHY, DOCUMENT } = CONFIG
+  if (RESET) {
+    if (RESET[':root']) {
+      const configReset = RESET
+      const configTemplates = TYPOGRAPHY.templates
+
+      configReset.body = {
+        ...getMediaTheme('document', `@${CONFIG.globalTheme}`),
+        ...configTemplates.body
+      }
+      configReset.h1 = configTemplates.h1
+      configReset.h2 = configTemplates.h2
+      configReset.h3 = configTemplates.h3
+      configReset.h4 = configTemplates.h4
+      configReset.h5 = configTemplates.h5
+      configReset.h6 = configTemplates.h6
+    }
+
+    const { body, ...templates } = TYPOGRAPHY.templates
+
+    return deepMerge(merge(RESET, reset), {
+      html: {
+        position: 'absolute',
+        // overflow: 'hidden',
+        width: '100%',
+        height: '100%',
+        top: '0',
+        left: '0',
+        margin: '0',
+        WebkitFontSmoothing: 'antialiased',
+        scrollBehavior: 'smooth',
+
+        fontSize: TYPOGRAPHY.browserDefault + 'px',
+
+        ...(CONFIG.useDocumentTheme ? getMediaTheme('document', `@${CONFIG.globalTheme}`) : {}),
+
+        fontFamily: DOCUMENT.fontFamily,
+        lineHeight: DOCUMENT.lineHeight
+      },
+
+      body: {
+        boxSizing: 'border-box',
+        height: '100%',
+        margin: 0,
+        fontFamily: DOCUMENT.fontFamily,
+
+        fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
+
+        ...templates,
+        ...body
+      },
+
+      // form elements
+      fieldset: {
+        border: 0,
+        padding: 0,
+        margin: 0
+      },
+
+      'select, input': {
+        fontFamily: DOCUMENT.fontFamily
+      }
+    })
+  }
+}

package/ButtonSet/node_modules/@symbo.ls/scratch/src/system/spacing.js

@@ -0,0 +1,135 @@
+'use strict'
+
+import { arrayzeValue } from '@symbo.ls/utils'
+import { isString, merge } from '@domql/utils'
+
+import { getActiveConfig } from '../factory.js'
+import {
+  applySequenceVars,
+  generateSequence,
+  getSequenceValuePropertyPair
+} from '../utils'
+
+const runThroughMedia = sequenceProps => {
+  for (const prop in sequenceProps) {
+    const mediaProps = sequenceProps[prop]
+    if (prop.slice(0, 1) === '@') {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps
+
+      merge(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        templates: {},
+        vars: {}
+      })
+
+      generateSequence(mediaProps)
+
+      const mediaName = prop.slice(1)
+      applySequenceVars(mediaProps, mediaName)
+    }
+  }
+}
+
+export const applySpacingSequence = () => {
+  const CONFIG = getActiveConfig()
+  const { SPACING } = CONFIG
+  generateSequence(SPACING)
+  applySequenceVars(SPACING)
+  runThroughMedia(SPACING)
+}
+
+const getSequence = (sequenceProps) => {
+  const CONFIG = getActiveConfig()
+  const { SPACING } = CONFIG
+  if (!sequenceProps) return SPACING
+  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0
+  return hasGenerated ? sequenceProps : generateSequence(sequenceProps)
+}
+
+export const getSpacingByKey = (
+  value,
+  propertyName = 'padding',
+  sequenceProps
+) => {
+  const sequence = getSequence(sequenceProps)
+
+  const stack = arrayzeValue(value)
+  if (!stack) return
+
+  if (isString(value) && value.includes('calc')) {
+    return { [propertyName]: value }
+  }
+
+  if (stack.length > 1) {
+    let suffix = ''
+    if (propertyName === 'borderWidth') {
+      propertyName = 'border'
+      suffix = 'Width'
+    }
+
+    const directions = {
+      2: ['Block', 'Inline'],
+      3: ['BlockStart', 'Inline', 'BlockEnd'],
+      4: ['BlockStart', 'InlineEnd', 'BlockEnd', 'InlineStart']
+    }
+
+    const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
+      stack[i],
+      propertyName + direction + suffix,
+      sequence
+    )
+
+    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key))
+  }
+
+  return getSequenceValuePropertyPair(
+    value,
+    propertyName,
+    sequence
+  )
+}
+
+export const getSpacingBasedOnRatio = (props, propertyName, val) => {
+  const CONFIG = getActiveConfig()
+  const { SPACING } = CONFIG
+
+  const { spacingRatio, unit } = props
+  const value = val || props[propertyName]
+
+  if (spacingRatio) {
+    let sequenceProps = SPACING[spacingRatio]
+
+    if (!sequenceProps) {
+      const { type, base, range, subSequence } = SPACING
+
+      sequenceProps = SPACING[spacingRatio] = merge({
+        ratio: spacingRatio,
+        type: type + '-' + spacingRatio,
+        unit,
+        sequence: {},
+        scales: {},
+        templates: {},
+        vars: {}
+      }, {
+        base,
+        range,
+        subSequence,
+        ratio: SPACING.ratio,
+        unit: SPACING.unit
+      })
+    }
+
+    applySequenceVars(sequenceProps, null, { useDefault: false })
+
+    return getSpacingByKey(value, propertyName, sequenceProps)
+  }
+  return getSpacingByKey(value, propertyName)
+}

package/ButtonSet/node_modules/@symbo.ls/scratch/src/system/svg.js

@@ -0,0 +1,63 @@
+'use strict'
+
+import { document } from '@domql/globals'
+import { generateSprite, convertSvgToSymbol } from '../utils'
+import { getActiveConfig } from '../factory.js'
+
+const DEF_OPTIONS = {
+  document
+}
+
+export const setSVG = (val, key) => {
+  const CONFIG = getActiveConfig()
+  if (!val) {
+    if (CONFIG.verbose) console.warn('setSVG: val is not defined', key)
+    return
+  }
+  if (CONFIG.useSvgSprite) {
+    return convertSvgToSymbol(key, val)
+  } return val
+}
+
+export const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
+  const CONFIG = getActiveConfig()
+  const doc = options.document || document
+
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG
+  for (const key in LIBRARY) lib[key] = CONFIG.SVG[key]
+
+  const SVGsprite = generateSprite(lib)
+  if (!doc) {
+    console.warn('To append SVG sprites it should be run in browser environment')
+    return SVGsprite
+  }
+
+  const svgSpriteDOM = doc.createElement('template')
+  svgSpriteDOM.innerHTML = SVGsprite
+  doc.body.appendChild(svgSpriteDOM.content)
+}
+
+export const setIcon = (val, key) => {
+  const CONFIG = getActiveConfig()
+  if (CONFIG.useIconSprite) {
+    return setSVG(val, key)
+  } return val
+}
+
+export const appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
+  const CONFIG = getActiveConfig()
+  const doc = options.document || document
+
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS
+  for (const key in LIBRARY) lib[key] = CONFIG.ICONS[key]
+
+  const SVGsprite = generateSprite(lib)
+  if (!doc) {
+    console.warn('To append SVG Icon sprites it should be run in browser environment')
+    return SVGsprite
+  }
+
+  const iconsSpriteDOM = doc.createElement('template')
+  iconsSpriteDOM.innerHTML = SVGsprite
+  doc.body.appendChild(iconsSpriteDOM.content)
+}

package/ButtonSet/node_modules/@symbo.ls/scratch/src/system/theme.js

@@ -0,0 +1,243 @@
+'use strict'
+
+import { getColor } from './color'
+import { getActiveConfig } from '../factory.js'
+
+import {
+  isObject,
+  isString,
+  isObjectLike,
+  isArray
+} from '@domql/utils'
+
+const ENV = process.env.NODE_ENV // eslint-disable-line
+
+const setThemeValue = theme => {
+  const value = {}
+  const { state, media, helpers, ...rest } = theme
+  const keys = Object.keys(rest)
+  keys.map(key => {
+    const conditions = ['color', 'Color', 'background', 'border']
+    const isColor = conditions.some(k => key.includes(k))
+    return (value[key] = isColor ? getColor(theme[key]) : theme[key])
+  })
+  return value
+}
+
+const getThemeValue = theme => {
+  if (theme.value) return theme.value
+  theme.value = setThemeValue(theme)
+  return theme.value
+}
+
+export const getTheme = (value, modifier) => {
+  const CONFIG = getActiveConfig()
+  if (CONFIG.useVariable) return getMediaTheme(value, modifier)
+  const { THEME } = CONFIG
+
+  if (isString(value)) {
+    const [theme, subtheme] = value.split(' ')
+    const isOurTheme = THEME[theme]
+    if (isOurTheme) {
+      if (!subtheme && !modifier) return getThemeValue(isOurTheme)
+      value = [theme, subtheme || modifier]
+    }
+  }
+
+  if (isObjectLike(value) && value[1]) {
+    const themeName = value[0]
+    const subThemeName = value[1]
+    const { helpers, media, state } = THEME[themeName]
+
+    if (media && media[subThemeName]) return getThemeValue(media[subThemeName])
+    if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName])
+    if (state && state[subThemeName]) return getThemeValue(state[subThemeName])
+  } else if (isObject(value)) return setThemeValue(value)
+}
+
+const setInverseTheme = (theme, variant, value) => {
+  if (isObject(variant)) {
+    theme.variants.inverse.value = setThemeValue(variant)
+  } else if (variant === true) {
+    const { color, background } = value
+    theme.variants.inverse = {
+      value: {
+        color: background,
+        background: color
+      }
+    }
+  }
+}
+
+const setPseudo = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant)
+  themeValue[`&:${key}`] = result
+  if (isObject(variant) && !variant.value) variant.value = result
+}
+
+const setSelectors = (theme, value) => {
+  const { state } = theme
+  if (!state) return
+  const keys = Object.keys(state)
+  keys.map(key => {
+    const variant = state[key]
+    setPseudo(theme, key, variant, value)
+    return theme
+  })
+  return theme
+}
+
+const setPrefersScheme = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant)
+  themeValue[`@media (prefers-color-scheme: ${key})`] = result
+  if (isObject(variant) && !variant.value) variant.value = result
+}
+
+const setMedia = (theme, value) => {
+  const { media } = theme
+  if (!media) return
+  const keys = Object.keys(media)
+  keys.map(key => {
+    const variant = media[key]
+    if (key === 'dark' || key === 'light') setPrefersScheme(theme, key, variant, value)
+    if (key === 'inverse') setInverseTheme(theme, variant, value)
+    return theme
+  })
+  return theme
+}
+
+const setHelpers = (theme, value) => {
+  const CONFIG = getActiveConfig()
+  const { helpers } = theme
+  if (!helpers) return
+  const keys = Object.keys(helpers)
+  keys.map(key => {
+    const helper = helpers[key]
+    if (isString(helper)) helpers[key] = CONFIG.THEME[helper]
+    else getThemeValue(helpers[key])
+    return theme
+  })
+  return theme
+}
+
+export const setTheme = (val, key) => {
+  const CONFIG = getActiveConfig()
+  if (CONFIG.useVariable) return setMediaTheme(val, key)
+
+  const { state, media, helpers } = val
+  const value = setThemeValue(val, key)
+  const CSSvar = `--theme-${key}`
+
+  setSelectors(val, value)
+  setMedia(val, value)
+  setHelpers(val, value)
+
+  return { var: CSSvar, value, state, media, helpers }
+}
+
+const keySetters = { // eslint-disable-line
+  '@': (theme, value) => setMedia(theme, value),
+  ':': (theme, value) => setSelectors(theme, value),
+  '.': (theme, value) => setHelpers(theme, value)
+}
+
+export const setMediaTheme = (val, key, suffix, prefers) => {
+  const CONFIG = getActiveConfig()
+  const { CSS_VARS } = CONFIG
+  const theme = { value: val }
+
+  if (isObjectLike(val)) {
+    for (const param in val) {
+      const symb = param.slice(0, 1)
+      const value = val[param]
+      if (symb === '@' || symb === ':' || symb === '.') {
+        const hasPrefers = symb === '@' && param
+        theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers)
+      } else {
+        const color = getColor(value, prefers)
+        const metaSuffixes = [...new Set([prefers, suffix].filter(v => v).map(v => v.slice(1)))]
+        const varmetaSuffixName = metaSuffixes.length ? '-' + metaSuffixes.join('-') : ''
+        const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`
+        if (CONFIG.useVariable) {
+          CSS_VARS[CSSVar] = color
+          theme[param] = `var(${CSSVar})`
+        } else {
+          theme[param] = color
+        }
+        theme[`.${param}`] = { [param]: theme[param] }
+      }
+    }
+
+    if (theme.background || theme.color || theme.backgroundColor) {
+      theme['.inversed'] = {
+        color: theme.background || theme.backgroundColor,
+        background: theme.color
+      }
+    }
+  }
+
+  if (isString(val) && val.slice(0, 2) === '--') {
+    const { THEME } = CONFIG
+    const value = THEME[val.slice(2)]
+    const getReferenced = getMediaTheme(value, prefers)
+    return getReferenced
+  }
+
+  return theme
+}
+
+const recursiveTheme = val => {
+  const CONFIG = getActiveConfig()
+  const obj = {}
+  for (const param in val) {
+    const symb = param.slice(0, 1)
+    if (isObjectLike(val[param])) {
+      if (symb === '@') {
+        const query = CONFIG.MEDIA[param.slice(1)]
+        const media = `@media screen and ${query}`
+        obj[media] = recursiveTheme(val[param])
+      } else if (symb === ':') {
+        obj[`&${param}`] = recursiveTheme(val[param])
+      }
+    } else obj[param] = val[param]
+  }
+  return obj
+}
+
+const findModifierFromArray = (val, modifierArray) => {
+  const currentMod = modifierArray.shift()
+  if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray)
+  return val
+}
+
+const findModifier = (val, modifier) => {
+  if (isArray(modifier)) return findModifierFromArray(val, modifier)
+  else if (isString(modifier) && val[modifier]) return val[modifier]
+  else return val
+}
+
+const checkForReference = (val, callback) => {
+  if (isString(val) && val.slice(0, 2) === '--') return getMediaTheme(val.slice(2))
+  return val
+}
+
+const checkThemeReference = (val) => checkForReference(val, checkThemeReference) // eslint-disable-line
+
+export const getMediaTheme = (val, mod) => {
+  const CONFIG = getActiveConfig()
+  if (isString(val) && val.slice(0, 2) === '--') val = getMediaTheme(val.slice(2))
+
+  if (!val || !isString(val)) {
+    if (CONFIG.verbose) console.warn(val, '- theme is not string')
+    return
+  }
+
+  const [name, ...modifier] = isArray(val) ? val : val.split(' ')
+  let value = CONFIG.THEME[name]
+  if (value && (modifier || mod)) {
+    value = findModifier(value, modifier.length ? modifier : mod)
+  }
+
+  const r = recursiveTheme(value)
+  return r
+}

package/ButtonSet/node_modules/@symbo.ls/scratch/src/system/timing.js

@@ -0,0 +1,32 @@
+'use strict'
+
+import { toCamelCase } from '@symbo.ls/utils'
+import { getActiveConfig } from '../factory.js'
+import {
+  applySequenceVars,
+  generateSequence,
+  getSequenceValuePropertyPair
+} from '../utils'
+
+export const applyTimingSequence = () => {
+  const CONFIG = getActiveConfig()
+  const { TIMING } = CONFIG
+  generateSequence(TIMING)
+  applySequenceVars(TIMING)
+}
+
+export const getTimingFunction = value => {
+  const CONFIG = getActiveConfig()
+  const { TIMING } = CONFIG
+  return TIMING[value] || TIMING[toCamelCase(value)] || value
+}
+
+export const getTimingByKey = (value, property = 'timing') => {
+  const CONFIG = getActiveConfig()
+  const { TIMING } = CONFIG
+  return getSequenceValuePropertyPair(
+    value,
+    property,
+    TIMING
+  )
+}

package/ButtonSet/node_modules/@symbo.ls/scratch/src/system/typography.js

@@ -0,0 +1,87 @@
+'use strict'
+
+import { merge } from '@domql/utils'
+import { getActiveConfig } from '../factory.js'
+
+import {
+  applySequenceVars,
+  findHeadings,
+  generateSequence,
+  getSequenceValuePropertyPair
+} from '../utils'
+
+export const runThroughMedia = props => {
+  const CONFIG = getActiveConfig()
+  const { TYPOGRAPHY, MEDIA } = CONFIG
+
+  for (const prop in props) {
+    const mediaProps = props[prop]
+    if (prop.slice(0, 1) === '@') {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
+
+      merge(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        templates: {},
+        vars: {}
+      })
+
+      generateSequence(mediaProps)
+
+      const mediaName = prop.slice(1)
+      applySequenceVars(mediaProps, mediaName)
+
+      const query = MEDIA[mediaName]
+      TYPOGRAPHY.templates[`@media screen and ${query}`] = {
+        fontSize: mediaProps.base / TYPOGRAPHY.browserDefault + unit
+      }
+    }
+  }
+}
+
+export const applyHeadings = (props) => {
+  const CONFIG = getActiveConfig()
+  if (props.h1Matches) {
+    const unit = props.unit
+    const HEADINGS = findHeadings(props)
+    const { templates } = props
+    for (const k in HEADINGS) {
+      const headerName = `h${parseInt(k) + 1}`
+      const headerStyle = templates[headerName]
+      templates[headerName] = {
+        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+        margin: headerStyle ? headerStyle.margin : 0,
+        lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
+        letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
+        fontWeight: headerStyle ? headerStyle.fontWeight : 900 - (k * 100)
+      }
+    }
+  }
+}
+
+export const applyTypographySequence = () => {
+  const CONFIG = getActiveConfig()
+  const { TYPOGRAPHY } = CONFIG
+
+  generateSequence(TYPOGRAPHY)
+  applyHeadings(TYPOGRAPHY)
+  applySequenceVars(TYPOGRAPHY)
+  runThroughMedia(TYPOGRAPHY)
+}
+
+export const getFontSizeByKey = value => {
+  const CONFIG = getActiveConfig()
+  const { TYPOGRAPHY } = CONFIG
+  return getSequenceValuePropertyPair(
+    value,
+    'fontSize',
+    TYPOGRAPHY
+  )
+}

package/ButtonSet/node_modules/@symbo.ls/scratch/src/tests/index.js

@@ -0,0 +1,4 @@
+'use strict'
+
+export const testWCAGAA = (colorA, colorB) => {}
+export const testWCAGAAA = (colorA, colorB) => {}