@symbo.ls/scratch 3.6.7 → 3.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "3.6.7",
+  "version": "3.7.0",
   "files": [
     "dist",
     "*.js",
@@ -33,8 +33,8 @@
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^3.6.7",
-    "@symbo.ls/smbls-utils": "^3.6.7",
+    "@domql/utils": "^3.7.0",
+    "@symbo.ls/smbls-utils": "^3.7.0",
     "color-contrast-checker": "^1.5.0"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",

package/src/defaultConfig/animation.js

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

package/src/defaultConfig/cases.js

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

package/src/defaultConfig/color.js

@@ -5,5 +5,5 @@ var proto = { // eslint-disable-line
   value: ''
 }
 
-export const COLOR = {}
-export const GRADIENT = {}
+export const color = {}
+export const gradient = {}

package/src/defaultConfig/document.js

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

package/src/defaultConfig/font-family.js

@@ -6,10 +6,10 @@ var defaultFont = { // eslint-disable-line
   type: ''
 }
 
-export const FONT_FAMILY = {}
-export const FONT_FAMILY_TYPES = {
+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 = {}
+export const font_face = {}

package/src/defaultConfig/font.js

@@ -9,4 +9,4 @@ var defFont = { // eslint-disable-line
   fontOpticalSizing: 'auto'
 }
 
-export const FONT = {}
+export const font = {}

package/src/defaultConfig/grid.js

@@ -2,4 +2,4 @@
 
 const defaultProps = {}
 
-export const GRID = defaultProps
+export const grid = defaultProps

package/src/defaultConfig/icons.js

@@ -1,4 +1,4 @@
 'use strict'
 
-export const ICONS = {}
-export const SEMANTIC_ICONS = {}
+export const icons = {}
+export const semantic_icons = {}

package/src/defaultConfig/index.js

@@ -21,4 +21,4 @@ export * from './templates.js'
 export * from './grid.js'
 export * from './class.js'
 
-export const RESET = {}
+export const reset = {}

package/src/defaultConfig/media.js

@@ -1,6 +1,6 @@
 'use strict'
 
-export const MEDIA = {
+export const media = {
   tv: '(min-width: 2780px)',
 
   light: '(prefers-color-scheme: light)',

package/src/defaultConfig/responsive.js

@@ -1,6 +1,6 @@
 'use strict'
 
-export const BREAKPOINTS = {
+export const breakpoints = {
   screenL: 1920,
   screenM: 1680,
   screenS: 1440,
@@ -13,7 +13,7 @@ export const BREAKPOINTS = {
   mobileXS: 375
 }
 
-export const DEVICES = {
+export const devices = {
   screenXXL: [2560, 1440],
   screenXL: [2240, 1260],
   screenL: [1920, 1024],

package/src/defaultConfig/sequence.js

@@ -1,6 +1,6 @@
 'use strict'
 
-export const SEQUENCE = {
+export const sequence = {
   'minor-second': 1.067,
   'major-second': 1.125,
   'minor-third': 1.2,

package/src/defaultConfig/shadow.js

@@ -1,8 +1,3 @@
 'use strict'
 
-const shadow = { // eslint-disable-line
-  name: 'primaryShadow',
-  boxShadow: 'gray12, 0 0px 50px 50px'
-}
-
-export const SHADOW = {}
+export const shadow = {}

package/src/defaultConfig/spacing.js

@@ -1,12 +1,12 @@
 'use strict'
 
-import { SEQUENCE } from './sequence.js'
-import { TYPOGRAPHY } from './typography.js'
+import { sequence } from './sequence.js'
+import { typography } from './typography.js'
 
 const defaultProps = {
-  base: TYPOGRAPHY.base,
+  base: typography.base,
   type: 'spacing',
-  ratio: SEQUENCE.phi,
+  ratio: sequence.phi,
   range: [-5, +15],
   subSequence: true,
   mediaRegenerate: false,
@@ -16,4 +16,4 @@ const defaultProps = {
   vars: {}
 }
 
-export const SPACING = defaultProps
+export const spacing = defaultProps

package/src/defaultConfig/svg.js

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

package/src/defaultConfig/templates.js

@@ -1,3 +1,3 @@
 'use strict'
 
-export const TEMPLATES = {}
+export const templates = {}

package/src/defaultConfig/theme.js

@@ -10,4 +10,4 @@ const themeA = { // eslint-disable-line no-unused-vars
   inverse: {} // schemeAInverse
 }
 
-export const THEME = {}
+export const theme = {}

package/src/defaultConfig/timing.js

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

package/src/defaultConfig/typography.js

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

package/src/defaultConfig/unit.js

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

package/src/factory.js

@@ -11,14 +11,22 @@ import * as CONF from './defaultConfig'
 export const CSS_VARS = {}
 export const CSS_MEDIA_VARS = {}
 
-// Build CONFIG with lowercase keys as canonical
+// Build CONFIG with lowercase/camelCase keys as canonical + UPPERCASE backward compat aliases
 const _CONF = CONF
 const _confLower = {}
+const toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase())
+const toUpper = (s) => s.replace(/([A-Z])/g, '_$1').toUpperCase()
 for (const key in _CONF) {
   const lower = key.toLowerCase()
   _confLower[lower] = _CONF[key]
-  // backward compat: keep UPPERCASE alias pointing to same object
+  // camelCase alias (e.g. font_family -> fontFamily, semantic_icons -> semanticIcons)
+  const camel = toCamel(lower)
+  if (camel !== lower) _confLower[camel] = _CONF[key]
+  // keep original key if different from lower
   if (lower !== key) _confLower[key] = _CONF[key]
+  // backward compat: add UPPERCASE alias (e.g. typography -> TYPOGRAPHY, fontFamily -> FONT_FAMILY)
+  const upper = toUpper(key)
+  if (upper !== key) _confLower[upper] = _CONF[key]
 }
 
 export const CONFIG = {

package/src/set.js

@@ -31,9 +31,11 @@ export const VALUE_TRANSFORMERS = {
   gradient: setGradient,
   font: setFont,
   font_family: setFontFamily,
+  fontfamily: setFontFamily,
   theme: setTheme,
   icons: setSvgIcon,
   semantic_icons: setSameValue,
+  semanticicons: setSameValue,
   svg: setSVG,
   svg_data: setSameValue,
   typography: setSameValue,
@@ -106,6 +108,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     globalTheme,
     useDocumentTheme,
     useDefaultConfig,
+    semanticIcons,
     SEMANTIC_ICONS,
     semantic_icons,
     files,
@@ -127,9 +130,10 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
   if (recivedConfig.useThemeSuffixedVars !== undefined) CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars
   if (useDefaultConfig !== undefined) CONFIG.useDefaultConfig = useDefaultConfig
-  const _semanticIcons = SEMANTIC_ICONS || semantic_icons
+  const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons
   if (_semanticIcons !== undefined) {
     CONFIG.semantic_icons = _semanticIcons
+    CONFIG.semanticIcons = CONFIG.semantic_icons
     CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons // backward compat alias
   }
   if (CONFIG.verbose) console.log(CONFIG)
@@ -155,17 +159,17 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   })
 
   // apply generic configs
-  if (config.TYPOGRAPHY || config.typography) {
+  if (config.typography || config.TYPOGRAPHY) {
     try { applyTypographySequence() } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying typography sequence', e)
     }
   }
-  if (config.SPACING || config.spacing) {
+  if (config.spacing || config.SPACING) {
     try { applySpacingSequence() } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying spacing sequence', e)
     }
   }
-  if (config.TIMING || config.timing) {
+  if (config.timing || config.TIMING) {
     try { applyTimingSequence() } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying timing sequence', e)
     }

package/src/system/color.js

@@ -34,7 +34,7 @@ export const getColor = (value, key, config) => {
     tone = parsed.tone
   }
 
-  const { COLOR, GRADIENT } = CONFIG
+  const { color: COLOR, gradient: GRADIENT } = CONFIG
 
   let val = (COLOR[name] || GRADIENT[name])
 
@@ -87,7 +87,7 @@ export const getMediaColor = (value, globalTheme, config) => {
     name = parsed.name
   }
 
-  const { COLOR, GRADIENT } = CONFIG
+  const { color: COLOR, gradient: GRADIENT } = CONFIG
   const val = COLOR[name] || GRADIENT[name]
   const isObj = isObject(val)
 
@@ -97,7 +97,7 @@ export const getMediaColor = (value, globalTheme, config) => {
     else {
       const obj = {}
       for (const mediaName in val) {
-        const query = CONFIG.MEDIA[mediaName.slice(1)]
+        const query = CONFIG.media[mediaName.slice(1)]
         const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
         obj[media] = getColor(value, mediaName, config)
       }
@@ -122,7 +122,7 @@ export const setColor = (val, key, suffix) => {
     )) {
       // Handle space-separated format: '--colorName alpha' (e.g. '--gray1 1')
       const parts = rawRef.split(' ')
-      const refColor = CONFIG.COLOR[parts[0]]
+      const refColor = CONFIG.color[parts[0]]
       if (refColor && refColor.value) {
         let rgb = refColor.rgb
         const alpha = parts[1] !== undefined ? parts[1] : '1'

package/src/system/document.js

@@ -6,7 +6,7 @@ import { getDefaultOrFirstKey } from '../utils'
 
 export const applyDocument = () => {
   const CONFIG = getActiveConfig()
-  const { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } = CONFIG
+  const { document: DOCUMENT, font_family: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG
   return merge(DOCUMENT, {
     theme: THEME.document,
     fontFamily: getDefaultOrFirstKey(FONT_FAMILY),

package/src/system/font.js

@@ -42,13 +42,13 @@ export const setFont = (val, key) => {
 
 export const getFontFamily = (key, factory) => {
   const CONFIG = getActiveConfig()
-  const { FONT_FAMILY } = CONFIG
+  const { font_family: FONT_FAMILY } = CONFIG
   return getDefaultOrFirstKey(factory || FONT_FAMILY, key)
 }
 
 export const setFontFamily = (val, key) => {
   const CONFIG = getActiveConfig()
-  const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG
+  const { font_family: FONT_FAMILY, font_family_types: FONT_FAMILY_TYPES } = CONFIG
   let { value, type } = val
   if (val.isDefault) FONT_FAMILY.default = key
 

package/src/system/reset.js

@@ -7,7 +7,7 @@ import { getMediaTheme } from './theme.js'
 export const applyReset = (reset = {}) => {
   const CONFIG = getActiveConfig()
 
-  const { RESET, TYPOGRAPHY, DOCUMENT } = CONFIG
+  const { reset: RESET, typography: TYPOGRAPHY, document: DOCUMENT } = CONFIG
 
   if (RESET) {
     if (RESET[':root']) {
@@ -61,7 +61,7 @@ export const applyReset = (reset = {}) => {
         fontFamily: DOCUMENT.fontFamily,
 
         fontSize:
-          TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
+          TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.unit.default,
 
         ...templates,
         ...body

package/src/system/shadow.js

@@ -75,7 +75,7 @@ export const getShadow = (value, globalTheme) => {
 
   const [name] = isArray(value) ? value : value.split(' ')
 
-  const { SHADOW } = CONFIG
+  const SHADOW = CONFIG.shadow
   const val = SHADOW[name]
   const isObj = isObject(val)
 
@@ -94,7 +94,7 @@ export const getShadow = (value, globalTheme) => {
   if (isObj) {
     const obj = {}
     for (const mediaName in val) {
-      const query = CONFIG.MEDIA[mediaName.slice(1)]
+      const query = CONFIG.media[mediaName.slice(1)]
       const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
       obj[media] = val.value
     }

package/src/system/spacing.js

@@ -50,7 +50,7 @@ export const checkIfBoxSize = (propertyName) => {
 
 export const applySpacingSequence = () => {
   const CONFIG = getActiveConfig()
-  const { SPACING } = CONFIG
+  const { spacing: SPACING } = CONFIG
   generateSequence(SPACING)
   applySequenceVars(SPACING)
   runThroughMedia(SPACING)
@@ -58,7 +58,7 @@ export const applySpacingSequence = () => {
 
 const getSequence = (sequenceProps) => {
   const CONFIG = getActiveConfig()
-  const { SPACING } = CONFIG
+  const { spacing: SPACING } = CONFIG
   if (!sequenceProps || !sequenceProps.sequence) return SPACING
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0
   return hasGenerated ? sequenceProps : generateSequence(sequenceProps)
@@ -114,7 +114,7 @@ export const getSpacingByKey = (
 
 export const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
   const CONFIG = getActiveConfig()
-  const { SPACING } = CONFIG
+  const { spacing: SPACING } = CONFIG
 
   let value = val || props[propertyName]
 

package/src/system/svg.js

@@ -22,15 +22,15 @@ export const setSVG = (val, key) => {
 export const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
 
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG
-  for (const key in LIBRARY) lib[key] = CONFIG.SVG[key]
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.svg
+  for (const key in LIBRARY) lib[key] = CONFIG.svg[key]
 
   appendSVG(lib, options)
 }
 
 export const setSvgIcon = (val, key) => {
   const CONFIG = getActiveConfig()
-  if (CONFIG.useIconSprite && !CONFIG.SEMANTIC_ICONS?.[key]) {
+  if (CONFIG.useIconSprite && !CONFIG.semantic_icons?.[key]) {
     return setSVG(val, key)
   } return val
 }
@@ -38,8 +38,8 @@ export const setSvgIcon = (val, key) => {
 export const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
 
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS
-  for (const key in LIBRARY) lib[key] = CONFIG.ICONS[key]
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.icons
+  for (const key in LIBRARY) lib[key] = CONFIG.icons[key]
 
   appendSVG(lib, options)
 }

package/src/system/theme.js

@@ -32,7 +32,7 @@ const getThemeValue = theme => {
 export const getTheme = (value, modifier) => {
   const CONFIG = getActiveConfig()
   if (CONFIG.useVariable) return getMediaTheme(value, modifier)
-  const { THEME } = CONFIG
+  const THEME = CONFIG.theme
 
   if (isString(value)) {
     const [theme, subtheme] = value.split(' ')
@@ -112,13 +112,15 @@ const setHelpers = (theme, value) => {
   const keys = Object.keys(helpers)
   keys.map(key => {
     const helper = helpers[key]
-    if (isString(helper)) helpers[key] = CONFIG.THEME[helper]
+    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)
@@ -288,7 +290,7 @@ export const setMediaTheme = (val, key, suffix, prefers) => {
   }
 
   if (isString(val) && isCSSVar(val)) {
-    const { THEME } = CONFIG
+    const THEME = CONFIG.theme
     const value = THEME[val.slice(2)]
     const getReferenced = getMediaTheme(value, prefers)
     return getReferenced
@@ -348,7 +350,7 @@ export const getMediaTheme = (value, modifier) => {
   }
 
   const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(' ')
-  let themeValue = activeConfig.THEME[themeName]
+  let themeValue = activeConfig.theme[themeName]
 
   if (themeValue && themeModifiers.length) {
     themeValue = findModifier(themeValue, themeModifiers)

package/src/system/timing.js

@@ -10,20 +10,20 @@ import {
 
 export const applyTimingSequence = () => {
   const CONFIG = getActiveConfig()
-  const { TIMING } = CONFIG
+  const { timing: TIMING } = CONFIG
   generateSequence(TIMING)
   applySequenceVars(TIMING)
 }
 
 export const getTimingFunction = value => {
   const CONFIG = getActiveConfig()
-  const { TIMING } = CONFIG
+  const { timing: TIMING } = CONFIG
   return TIMING[value] || TIMING[toCamelCase(value)] || value
 }
 
 export const getTimingByKey = (value, property = 'timing') => {
   const CONFIG = getActiveConfig()
-  const { TIMING } = CONFIG
+  const { timing: TIMING } = CONFIG
   return getSequenceValuePropertyPair(
     value,
     property,

package/src/system/typography.js

@@ -13,7 +13,7 @@ import {
 
 export const runThroughMedia = FACTORY => {
   const CONFIG = getActiveConfig()
-  const { TYPOGRAPHY, MEDIA } = CONFIG
+  const { typography: TYPOGRAPHY, media: MEDIA } = CONFIG
 
   for (const prop in FACTORY) {
     const isPropMedia = prop.slice(0, 1) === '@'
@@ -86,7 +86,7 @@ export const applyHeadings = props => {
 
 export const applyTypographySequence = () => {
   const CONFIG = getActiveConfig()
-  const { TYPOGRAPHY } = CONFIG
+  const { typography: TYPOGRAPHY } = CONFIG
 
   generateSequence(TYPOGRAPHY)
   applyHeadings(TYPOGRAPHY)
@@ -96,6 +96,6 @@ export const applyTypographySequence = () => {
 
 export const getFontSizeByKey = value => {
   const CONFIG = getActiveConfig()
-  const { TYPOGRAPHY } = CONFIG
+  const { typography: TYPOGRAPHY } = CONFIG
   return getSequenceValuePropertyPair(value, 'fontSize', TYPOGRAPHY)
 }

package/src/transforms/index.js

@@ -177,7 +177,7 @@ export const transformBackgroundImage = (backgroundImage, globalTheme) => {
       if (isCSSVar(v)) return `var(${v})`
       if (v.includes('url')) return v
       if (v.includes('gradient')) return resolveColorsInGradient(v, globalTheme)
-      else if (CONFIG.GRADIENT[backgroundImage]) {
+      else if (CONFIG.gradient[backgroundImage]) {
         return {
           backgroundImage: getMediaColor(
             backgroundImage,

package/src/utils/sequence.js

@@ -230,7 +230,7 @@ export const generateSequencePosition = (sequenceProps, position = 0) => {
 
 export const getSequenceValue = (value = 'A', sequenceProps) => {
   const CONFIG = getActiveConfig()
-  const { UNIT } = CONFIG
+  const { unit: UNIT } = CONFIG
 
   if (isString(value) && isCSSVar(value)) return `var(${value})`
 

package/src/utils/var.js

@@ -17,7 +17,7 @@ export const setVariables = (result, key) => {
 
 export const applySequenceGlobalVars = (vars, obj, options) => {
   const CONFIG = getActiveConfig()
-  const { UNIT } = CONFIG
+  const { unit: UNIT } = CONFIG
   const unit = obj.unit || UNIT.default
   const { base, ratio, type } = obj
   const prefix = '--' + (type && type.replace('.', '-'))
@@ -38,7 +38,7 @@ export const applySequenceGlobalVars = (vars, obj, options) => {
 
 export const applySequenceVars = (FACTORY, options = {}) => {
   const CONFIG = getActiveConfig()
-  const { UNIT, TIMING, CSS_VARS } = CONFIG
+  const { unit: UNIT, timing: TIMING, CSS_VARS } = CONFIG
 
   const unit = FACTORY.unit || UNIT.default
   const { mediaRegenerate, sequence, scales } = FACTORY
@@ -72,7 +72,7 @@ export const applySequenceVars = (FACTORY, options = {}) => {
 
 export const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
   const CONFIG = getActiveConfig()
-  const { UNIT, MEDIA, CSS_VARS } = CONFIG
+  const { unit: UNIT, media: MEDIA, CSS_VARS } = CONFIG
 
   const mediaName = media.slice(1)