@symbo.ls/uikit 2.10.253 → 2.10.267

package/Input/node_modules/@symbo.ls/scratch/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@symbo.ls/scratch",
+  "description": "Φ / CSS framework and methodology.",
+  "author": "symbo.ls",
+  "version": "2.10.261",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "repository": "https://github.com/symbo-ls/scratch",
+  "type": "module",
+  "module": "src/index.js",
+  "unpkg": "dist/iife/index.js",
+  "jsdelivr": "dist/iife/index.js",
+  "main": "src/index.js",
+  "exports": "./dist/cjs/index.js",
+  "source": "src/index.js",
+  "publishConfig": {},
+  "scripts": {
+    "copy:package:cjs": "cp ../../.build/package-cjs.json dist/cjs/package.json",
+    "build:esm": "npx esbuild ./src/*.js ./src/**/*.js --target=es2020 --format=esm --outdir=dist/esm",
+    "build:cjs": "npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
+    "build:iife": "npx esbuild ./src/index.js --target=es2020 --format=iife --outdir=dist/iife --bundle --minify",
+    "build": "yarn build:cjs",
+    "prepublish": "rimraf -I dist && yarn build && yarn copy:package:cjs"
+  },
+  "dependencies": {
+    "@domql/utils": "latest",
+    "@symbo.ls/utils": "latest",
+    "color-contrast-checker": "^1.5.0"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.5.0"
+  },
+  "gitHead": "39a07b63363c6c6547fe25b904fc3e713ee84284"
+}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/animation.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const ANIMATION = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/cases.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const CASES = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/color.js

@@ -0,0 +1,10 @@
+'use strict'
+
+var proto = { // eslint-disable-line
+  name: '',
+  value: '',
+  themes: {}
+}
+
+export const COLOR = {}
+export const GRADIENT = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/document.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const DOCUMENT = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/font-family.js

@@ -0,0 +1,15 @@
+'use strict'
+
+var defaultFont = { // eslint-disable-line
+  name: '',
+  family: '',
+  type: ''
+}
+
+export const FONT_FAMILY = {}
+export const FONT_FAMILY_TYPES = {
+  'sans-serif': 'Helvetica, Arial, sans-serif, --system-default',
+  serif: 'Times New Roman, Georgia, serif, --system-default',
+  monospace: 'Courier New, monospace, --system-default'
+}
+export const FONT_FACE = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/font.js

@@ -0,0 +1,12 @@
+'use strict'
+
+var defFont = { // eslint-disable-line
+  name: '',
+  url: '',
+  fontStyle: '',
+  fontWeight: 500,
+  fontStretch: 'normal',
+  fontOpticalSizing: 'auto'
+}
+
+export const FONT = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/icons.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const ICONS = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/index.js

@@ -0,0 +1,20 @@
+'use strict'
+
+export * from './sequence.js'
+export * from './unit.js'
+export * from './typography.js'
+export * from './font.js'
+export * from './font-family.js'
+export * from './media.js'
+export * from './spacing.js'
+export * from './color.js'
+export * from './theme.js'
+export * from './icons.js'
+export * from './timing.js'
+export * from './document.js'
+export * from './responsive.js'
+export * from './cases.js'
+export * from './animation.js'
+export * from './svg.js'
+
+export const RESET = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/media.js

@@ -0,0 +1,31 @@
+'use strict'
+
+export const MEDIA = {
+  tv: '(min-width: 2780px)',
+
+  screenL: '(max-width: 1920px)',
+  'screenL<': '(min-width: 1920px)',
+  screenM: '(max-width: 1680px)',
+  'screenM<': '(min-width: 1680px)',
+  screenS: '(max-width: 1440px)',
+  'screenS<': '(min-width: 1440px)',
+  tabletL: '(max-width: 1366px)',
+  'tabletL<': '(min-width: 1366px)',
+  tabletM: '(max-width: 1280px)',
+  'tabletM<': '(min-width: 1280px)',
+  tabletS: '(max-width: 1024px)',
+  'tabletS<': '(min-width: 1024px)',
+  mobileL: '(max-width: 768px)',
+  'mobileL<': '(min-width: 768px)',
+  mobileM: '(max-width: 560px)',
+  'mobileM<': '(min-width: 560px)',
+  mobileS: '(max-width: 480px)',
+  'mobileS<': '(min-width: 480px)',
+  mobileXS: '(max-width: 375px)',
+  'mobileXS<': '(min-width: 375px)',
+
+  light: '(prefers-color-scheme: light)',
+  dark: '(prefers-color-scheme: dark)',
+
+  print: 'print'
+}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/responsive.js

@@ -0,0 +1,27 @@
+'use strict'
+
+export const BREAKPOINTS = {
+  screenL: 1920,
+  screenM: 1680,
+  screenS: 1440,
+  tabletL: 1366,
+  tabletM: 1280,
+  tabletS: 1024,
+  mobileL: 768,
+  mobileM: 560,
+  mobileS: 480,
+  mobileXS: 375
+}
+
+export const DEVICES = {
+  screenL: [1920, 1024],
+  screenM: [1680, 1024],
+  screenS: [1440, 978],
+  tabletL: [1366, 926],
+  tabletM: [1280, 768],
+  tabletS: [1024, 768],
+  mobileL: [768, 375],
+  mobileM: [560, 768],
+  mobileS: [480, 768],
+  mobileXS: [375, 768]
+}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/sequence.js

@@ -0,0 +1,24 @@
+'use strict'
+
+export const SEQUENCE = {
+  'minor-second': 1.067,
+  'major-second': 1.125,
+  'minor-third': 1.2,
+  'major-third': 1.25,
+  'perfect-fourth': 1.333,
+  'augmented-fourth': 1.414,
+  'perfect-fifth': 1.5,
+  'minor-sixth': 1.6,
+  phi: 1.618, // golden-ratio
+  'major-sixth': 1.667,
+  'square-root-3': 1.732, // theodorus
+  'minor-seventh': 1.778,
+  'major-seventh': 1.875,
+  octave: 2,
+  'square-root-5': 2.23, // pythagoras
+  'major-tenth': 2.5,
+  'major-eleventh': 2.667,
+  'major-twelfth': 3,
+  pi: 3.14, // archimedes
+  'double-octave': 4
+}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/spacing.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { SEQUENCE } from './sequence.js'
+import { TYPOGRAPHY } from './typography.js'
+
+const defaultProps = {
+  base: TYPOGRAPHY.base,
+  type: 'spacing',
+  ratio: SEQUENCE.phi,
+  range: [-5, +15],
+  subSequence: true,
+  unit: 'em',
+  sequence: {},
+  scales: {},
+  vars: {}
+}
+
+export const SPACING = defaultProps

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/svg.js

@@ -0,0 +1,4 @@
+'use strict'
+
+export const SVG = {}
+export const SVG_DATA = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/theme.js

@@ -0,0 +1,13 @@
+'use strict'
+
+const themeA = { // eslint-disable-line no-unused-vars
+  text: 'blue',
+  background: 'white',
+  border: 'black', // .opacity(0.2),
+  active: {},
+  helpers: [],
+  themes: {},
+  inverse: {} // schemeAInverse
+}
+
+export const THEME = {}

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/timing.js

@@ -0,0 +1,17 @@
+'use strict'
+
+import { SEQUENCE } from './sequence'
+
+const defaultProps = {
+  default: 150,
+  base: 150,
+  type: 'timing',
+  ratio: SEQUENCE['perfect-fourth'],
+  range: [-3, +12],
+  unit: 'ms',
+  sequence: {},
+  scales: {},
+  vars: {}
+}
+
+export const TIMING = defaultProps

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/typography.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { SEQUENCE } from './sequence.js'
+
+const defaultProps = {
+  browserDefault: 16,
+  base: 16,
+  type: 'font-size',
+  ratio: SEQUENCE['minor-third'],
+  range: [-3, +12],
+  h1Matches: +6,
+  lineHeight: 1.5,
+  unit: 'em',
+  templates: {},
+  sequence: {},
+  scales: {},
+  vars: {}
+}
+
+export const TYPOGRAPHY = defaultProps

package/Input/node_modules/@symbo.ls/scratch/src/defaultConfig/unit.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export const UNIT = {
+  default: 'em'
+}

package/Input/node_modules/@symbo.ls/scratch/src/factory.js

@@ -0,0 +1,38 @@
+'use strict'
+
+import { deepClone, isDefined } from '@domql/utils'
+import * as CONF from './defaultConfig'
+
+export const CSS_VARS = {}
+export const CONFIG = {
+  verbose: false,
+  useVariable: true,
+  useReset: true,
+  CSS_VARS,
+  ...CONF
+}
+
+const cachedConfig = deepClone(CONFIG)
+
+export const FACTORY = {
+  active: '0',
+  0: CONFIG
+}
+
+export const activateConfig = (def) => {
+  if (isDefined(def)) { FACTORY.active = def }
+  return FACTORY[def || FACTORY.active]
+}
+
+export const getActiveConfig = (def) => {
+  if (isDefined(def) && !FACTORY[def]) {
+    FACTORY[def] = deepClone(cachedConfig)
+    return FACTORY[def]
+  }
+  return FACTORY[def || FACTORY.active]
+}
+
+export const setActiveConfig = (def) => {
+  FACTORY.active = FACTORY[def]
+  return FACTORY.active
+}

package/Input/node_modules/@symbo.ls/scratch/src/index.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import * as scratchUtils from './utils/index.js'
+import * as scratchSystem from './system/index.js'
+
+export * from './factory.js'
+export * from './defaultConfig'
+export * from './system'
+export * from './utils'
+export * from './transforms'
+export * from './set.js'
+
+export { scratchUtils, scratchSystem }

package/Input/node_modules/@symbo.ls/scratch/src/set.js

@@ -0,0 +1,122 @@
+'use strict'
+
+import { FACTORY, getActiveConfig } from './factory.js' // eslint-disable-line no-unused-vars
+import {
+  setColor,
+  setGradient,
+  setFont,
+  setFontFamily,
+  setTheme,
+  setIcon,
+  setSVG,
+  applyTypographySequence,
+  applySpacingSequence,
+  applyReset,
+  applyTimingSequence,
+  applyDocument
+} from './system'
+
+import { isFunction } from '@domql/utils'
+
+const ENV = process.env.NODE_ENV // eslint-disable-line no-unused-vars
+
+const setCases = (val, key) => {
+  if (isFunction(val)) return val()
+  return val
+}
+
+const setSameValue = (val, key) => val
+
+export const VALUE_TRANSFORMERS = {
+  color: setColor,
+  gradient: setGradient,
+  font: setFont,
+  font_family: setFontFamily,
+  theme: setTheme,
+  icons: setIcon,
+  svg: setSVG,
+  svg_data: setSameValue,
+  typography: setSameValue,
+  cases: setCases,
+  spacing: setSameValue,
+  media: setSameValue,
+  timing: setSameValue,
+  reset: setSameValue,
+  unit: setSameValue,
+  animation: setSameValue
+}
+
+/**
+ *
+ * @param {Object} FACTORY_NAME Defines which factory it goes to
+ * @param {*} value Value of the property
+ * @param {String} key Key, or the name of the property
+ * @returns {Object} Factory
+ */
+export const setValue = (FACTORY_NAME, value, key) => {
+  const CONFIG = getActiveConfig()
+  const factoryName = FACTORY_NAME.toLowerCase()
+  const FACTORY = CONFIG[FACTORY_NAME]
+
+  if (VALUE_TRANSFORMERS[factoryName]) {
+    const result = VALUE_TRANSFORMERS[factoryName](value, key)
+    FACTORY[key] = result
+    return FACTORY
+  }
+
+  if (CONFIG.verbose) console.warn('Can not find', factoryName, 'method in scratch')
+}
+
+export const setEach = (factoryName, props) => {
+  const CONFIG = getActiveConfig()
+  const FACTORY_NAME = factoryName.toUpperCase()
+  const keys = Object.keys(props)
+  keys.map(key => setValue(FACTORY_NAME, props[key], key))
+
+  return CONFIG[FACTORY_NAME]
+}
+
+const SET_OPTIONS = {}
+
+export const set = (recivedConfig, options = SET_OPTIONS) => {
+  let CONFIG = getActiveConfig()
+  const {
+    version,
+    verbose,
+    useVariable,
+    useReset,
+    useSvgSprite,
+    useFontImport,
+    useIconSprite,
+    globalTheme,
+    useDocumentTheme,
+    ...config
+  } = recivedConfig
+
+  if (options.newConfig) {
+    FACTORY.active = options.newConfig
+    CONFIG = getActiveConfig(options.newConfig)
+  }
+
+  if (verbose !== undefined) CONFIG.verbose = verbose
+  if (useVariable !== undefined) CONFIG.useVariable = useVariable
+  if (useReset !== undefined) CONFIG.useReset = useReset
+  if (useFontImport !== undefined) CONFIG.useFontImport = useFontImport
+  if (useSvgSprite !== undefined) CONFIG.useSvgSprite = useSvgSprite
+  if (useIconSprite !== undefined) CONFIG.useIconSprite = useIconSprite
+  if (useDocumentTheme !== undefined) CONFIG.useDocumentTheme = useDocumentTheme
+  if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
+  if (CONFIG.verbose) console.log(CONFIG)
+
+  const keys = Object.keys(config)
+  keys.map(key => setEach(key, config[key]))
+
+  // apply generic configs
+  applyTypographySequence()
+  applySpacingSequence()
+  applyTimingSequence()
+  applyDocument()
+  applyReset()
+
+  return CONFIG
+}

package/Input/node_modules/@symbo.ls/scratch/src/system/color.js

@@ -0,0 +1,164 @@
+'use strict'
+
+import { getActiveConfig } from '../factory.js'
+import { isObject, isArray, isString } from '@domql/utils'
+
+import {
+  colorStringToRgbaArray,
+  rgbToHSL,
+  hexToRgbArray,
+  rgbArrayToHex,
+  hslToRgb,
+  getColorShade
+} from '../utils'
+
+export const getColor = (value, key) => {
+  const CONFIG = getActiveConfig()
+  if (!isString(value)) {
+    if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
+    return
+  }
+
+  if (value.slice(0, 2) === '--') return `var(${value})`
+
+  if (key && value[key]) value = value[key]
+  const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
+  const { COLOR, GRADIENT } = CONFIG
+
+  let val = (COLOR[name] || GRADIENT[name])
+
+  if (!val) {
+    if (CONFIG.verbose) console.warn('Can\'t find color ', name)
+    return value
+  }
+
+  if (key) {
+    if (val[key]) val = val[key]
+    else if (CONFIG.verbose) console.warn(value, ' - does not have ', key)
+  }
+
+  // TODO: support variables
+  // if (alpha) return `rgba(var(${val[shade || ''].var}), ${modifier})`
+
+  let rgb = val.rgb
+  if (rgb) {
+    if (tone) {
+      if (!val[tone]) {
+        const toHex = rgbArrayToHex(rgb.split(', ').map(v => parseFloat(v)))
+        const abs = tone.slice(0, 1)
+        if (abs === '-' || abs === '+') {
+          rgb = hexToRgbArray(
+            getColorShade(toHex, parseFloat(tone))
+          ).join(', ')
+        } else {
+          const [r, g, b] = [...rgb.split(', ').map(v => parseInt(v))]
+          const hsl = rgbToHSL(r, g, b)
+          const [h, s, l] = hsl // eslint-disable-line
+          const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
+          rgb = newRgb
+        }
+        val[tone] = { rgb, var: `${val.var}-${tone}` }
+      } else rgb = val[tone].rgb
+    }
+
+    if (alpha) return `rgba(${rgb}, ${alpha})`
+    return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`
+  } else return CONFIG.useVariable ? `var(${val.var})` : val.value
+}
+
+export const getMediaColor = (value, globalTheme) => {
+  const CONFIG = getActiveConfig()
+  if (!globalTheme) globalTheme = CONFIG.globalTheme
+  if (!isString(value)) {
+    if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
+    return
+  }
+
+  if (value.slice(0, 2) === '--') return `var(${value})`
+
+  const [name] = isArray(value) ? value : value.split(' ')
+
+  const { COLOR, GRADIENT } = CONFIG
+  const val = COLOR[name] || GRADIENT[name]
+  const isObj = isObject(val)
+
+  if (isObj && val.value) return getColor(value, `@${globalTheme}`)
+  else if (isObj) {
+    if (globalTheme) return getColor(value, `@${globalTheme}`)
+    else {
+      const obj = {}
+      for (const mediaName in val) {
+        const query = CONFIG.MEDIA[mediaName.slice(1)]
+        const media = `@media screen and ${query}`
+        obj[media] = getColor(value, mediaName)
+      }
+      return obj
+    }
+  } else {
+    if (CONFIG.verbose) console.warn('Can\'t find color', value)
+    return value
+  }
+}
+
+export const setColor = (val, key, suffix) => {
+  const CONFIG = getActiveConfig()
+
+  if (isString(val) && val.slice(0, 2) === '--') val = getColor(val.slice(2))
+
+  if (isArray(val)) {
+    return {
+      '@light': setColor(val[0], key, 'light'),
+      '@dark': setColor(val[1], key, 'dark')
+    }
+  }
+
+  if (isObject(val)) {
+    const obj = {}
+    for (const variant in val) obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === '@' ? variant.slice(1) : variant)
+    return obj
+  }
+
+  const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : '')
+  const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val)
+  const alpha = parseFloat(a.toFixed(2))
+  const rgb = `${r}, ${g}, ${b}`
+  const value = `rgba(${rgb}, ${alpha})`
+
+  if (CONFIG.useVariable) { CONFIG.CSS_VARS[CSSVar] = value }
+
+  return {
+    var: CSSVar,
+    rgb,
+    alpha,
+    value
+  }
+}
+
+export const setGradient = (val, key, suffix) => {
+  const CONFIG = getActiveConfig()
+  if (isString(val) && val.slice(0, 2) === '--') val = getColor(val.slice(2))
+
+  if (isArray(val)) {
+    return {
+      '@light': setGradient(val[0], key, 'light'),
+      '@dark': setGradient(val[0], key, 'dark')
+    }
+  }
+
+  if (isObject(val)) {
+    const obj = {}
+    for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === '@' ? variant.slice(1) : variant)
+    return obj
+  }
+
+  const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : '')
+
+  if (CONFIG.useVariable) {
+    CONFIG.CSS_VARS[CSSVar] = val.value || val
+  }
+
+  return {
+    var: CSSVar,
+    value: val.value || val
+  }
+}

package/Input/node_modules/@symbo.ls/scratch/src/system/document.js

@@ -0,0 +1,16 @@
+'use strict'
+
+import { merge } from '@domql/utils'
+import { getActiveConfig } from '../factory.js'
+import { getDefaultOrFirstKey } from '../utils'
+
+export const applyDocument = () => {
+  const CONFIG = getActiveConfig()
+  const { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } = CONFIG
+  return merge(DOCUMENT, {
+    theme: THEME.document,
+    fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
+    fontSize: TYPOGRAPHY.base,
+    lineHeight: TYPOGRAPHY.lineHeight
+  })
+}

package/Input/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 }
+}