@symbo.ls/scratch 2.11.212 → 2.11.216

package/dist/cjs/utils/var.js

@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../../domql/packages/utils/dist/cjs/key.js
+// ../../node_modules/@domql/utils/dist/cjs/key.js
 var require_key = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/key.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -69,9 +69,9 @@ var require_key = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/env.js
+// ../../node_modules/@domql/utils/dist/cjs/env.js
 var require_env = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/env.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -107,9 +107,9 @@ var require_env = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/globals.js
+// ../../node_modules/@domql/utils/dist/cjs/globals.js
 var require_globals = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/globals.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -143,9 +143,9 @@ var require_globals = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/node.js
+// ../../node_modules/@domql/utils/dist/cjs/node.js
 var require_node = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/node.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -180,9 +180,9 @@ var require_node = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/types.js
+// ../../node_modules/@domql/utils/dist/cjs/types.js
 var require_types = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/types.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -267,9 +267,9 @@ var require_types = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/array.js
+// ../../node_modules/@domql/utils/dist/cjs/array.js
 var require_array = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/array.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -366,9 +366,9 @@ var require_array = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/string.js
+// ../../node_modules/@domql/utils/dist/cjs/string.js
 var require_string = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/string.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -426,9 +426,9 @@ var require_string = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/object.js
+// ../../node_modules/@domql/utils/dist/cjs/object.js
 var require_object = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/object.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -878,9 +878,9 @@ var require_object = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/function.js
+// ../../node_modules/@domql/utils/dist/cjs/function.js
 var require_function = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/function.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -953,9 +953,9 @@ var require_function = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/log.js
+// ../../node_modules/@domql/utils/dist/cjs/log.js
 var require_log = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/log.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -994,9 +994,9 @@ var require_log = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/cookie.js
+// ../../node_modules/@domql/utils/dist/cjs/cookie.js
 var require_cookie = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/cookie.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1050,9 +1050,9 @@ var require_cookie = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/tags.js
+// ../../node_modules/@domql/utils/dist/cjs/tags.js
 var require_tags = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/tags.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1215,9 +1215,9 @@ var require_tags = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/index.js
+// ../../node_modules/@domql/utils/dist/cjs/index.js
 var require_cjs = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1280,6 +1280,7 @@ __export(defaultConfig_exports, {
   MEDIA: () => MEDIA,
   RESET: () => RESET,
   SEQUENCE: () => SEQUENCE,
+  SHADOW: () => SHADOW,
   SPACING: () => SPACING,
   SVG: () => SVG,
   SVG_DATA: () => SVG_DATA,
@@ -1402,6 +1403,9 @@ var GRADIENT = {};
 // src/defaultConfig/theme.js
 var THEME = {};
 
+// src/defaultConfig/shadow.js
+var SHADOW = {};
+
 // src/defaultConfig/icons.js
 var ICONS = {};
 
@@ -1508,14 +1512,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
       let underMediaQuery = CSS_VARS2[`@media ${query}`];
       if (!underMediaQuery)
         underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
-      underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
-      CSS_VARS2[item.variable + "-" + mediaName] = value;
+      underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
+      CSS_VARS2[item.variable + "_" + mediaName] = value;
     } else {
       if (options.useDefault === false) {
         CSS_VARS2[item.variable] = value;
       } else {
-        CSS_VARS2[item.variable + "-default"] = value;
-        CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
+        CSS_VARS2[item.variable + "_default"] = value;
+        CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
       }
     }
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.11.212",
+  "version": "2.11.216",
   "files": [
     "src",
     "dist"
@@ -29,5 +29,5 @@
     "@symbo.ls/utils": "latest",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "12914eac8527ac1df36183098bbf3dfcfaa2e027"
+  "gitHead": "23694218fd8511bd183cb4ca1ed0493e3dbcc704"
 }

package/src/defaultConfig/color.js

@@ -2,8 +2,7 @@
 
 var proto = { // eslint-disable-line
   name: '',
-  value: '',
-  themes: {}
+  value: ''
 }
 
 export const COLOR = {}

package/src/defaultConfig/index.js

@@ -9,6 +9,7 @@ export * from './media.js'
 export * from './spacing.js'
 export * from './color.js'
 export * from './theme.js'
+export * from './shadow.js'
 export * from './icons.js'
 export * from './timing.js'
 export * from './document.js'

package/src/defaultConfig/shadow.js

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

package/src/set.js

@@ -13,7 +13,8 @@ import {
   applySpacingSequence,
   applyReset,
   applyTimingSequence,
-  applyDocument
+  applyDocument,
+  setShadow
 } from './system'
 
 import { isFunction } from '@domql/utils'
@@ -36,6 +37,7 @@ export const VALUE_TRANSFORMERS = {
   svg_data: setSameValue,
   typography: setSameValue,
   cases: setCases,
+  shadow: setShadow,
   spacing: setSameValue,
   media: setSameValue,
   timing: setSameValue,

package/src/system/color.js

@@ -98,7 +98,13 @@ export const setColor = (val, key, suffix) => {
 
   if (isObject(val)) {
     const obj = {}
-    for (const variant in val) obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === '@' ? variant.slice(1) : variant)
+    for (const variant in val) {
+      obj[variant] = setColor(
+        val[variant],
+        key,
+        variant.slice(0, 1) === '@' ? variant.slice(1) : variant
+      )
+    }
     return obj
   }
 

package/src/system/index.js

@@ -5,6 +5,7 @@ export * from './theme.js'
 export * from './font.js'
 export * from './typography.js'
 export * from './spacing.js'
+export * from './shadow.js'
 export * from './timing.js'
 export * from './document.js'
 export * from './svg.js'

package/src/system/shadow.js

@@ -0,0 +1,99 @@
+'use strict'
+
+import { getActiveConfig } from '../factory.js'
+import { getColor } from './color.js'
+import { getSpacingByKey } from './spacing.js'
+
+import {
+  isObject,
+  isString,
+  isArray
+} from '@domql/utils'
+
+export const setShadow = (value, key, suffix, prefers) => {
+  const CONFIG = getActiveConfig()
+  // const { CSS_VARS } = CONFIG
+  // const theme = { valueue: value }
+
+  if (isArray(value)) {
+    return {
+      '@light': setShadow(value[0], key, 'light'),
+      '@dark': setShadow(value[1], key, 'dark')
+    }
+  }
+
+  if (isObject(value)) {
+    const obj = {}
+    for (const variant in value) {
+      obj[variant] = setShadow(
+        value[variant],
+        key,
+        variant.startsWith('@') ? variant.slice(1) : variant
+      )
+    }
+    return obj
+  }
+
+  if (isString(value) && value.includes(',')) {
+    value = value.split(',').map(v => {
+      v = v.trim()
+      if (v.startsWith('--')) return `var(${v})`
+      if (getColor(v).length > 2) return getColor(v)
+      if (v.includes('px') || v.slice(-2) === 'em') return v
+      const arr = v.split(' ')
+      if (!arr.length) return v
+      return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
+    }).join(' ')
+  }
+
+  const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : '')
+
+  if (CONFIG.useVariable) { CONFIG.CSS_VARS[CSSVar] = value }
+
+  return {
+    var: CSSVar,
+    value
+  }
+}
+
+export const getShadow = (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 { SHADOW } = CONFIG
+  const val = SHADOW[name]
+  const isObj = isObject(val)
+
+  if (!val) {
+    if (CONFIG.verbose) console.warn('Can\'t find color ', name)
+    return value
+  }
+
+  if (globalTheme) {
+    if (val[globalTheme]) return val[globalTheme].value
+    else if (CONFIG.verbose) console.warn(value, ' - does not have ', globalTheme)
+  }
+
+  if (isObj && val.value) return val.value
+
+  if (isObj) {
+    const obj = {}
+    for (const mediaName in val) {
+      const query = CONFIG.MEDIA[mediaName.slice(1)]
+      const media = `@media screen and ${query}`
+      obj[media] = val.value
+    }
+    return obj
+  }
+
+  if (CONFIG.verbose) console.warn('Can\'t find color', value)
+  return value
+}

package/src/transforms/index.js

@@ -5,6 +5,7 @@ import { getActiveConfig } from '../factory'
 import {
   getSpacingByKey,
   getColor,
+  getShadow,
   getMediaColor,
   getTimingByKey,
   getTimingFunction
@@ -45,17 +46,11 @@ export const transformTextStroke = stroke => {
   }).join(' ')
 }
 
-export const transformShadow = shadows => shadows.split('|').map(shadow => {
-  return shadow.split(', ').map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (getColor(v).length > 2) return getColor(v)
-    if (v.includes('px') || v.slice(-2) === 'em') return v
-    const arr = v.split(' ')
-    if (!arr.length) return v
-    return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
-  }).join(' ')
-}).join(',')
+export const transformShadow = (sh, globalTheme) => {
+  return sh.split(',').map(shadow => getShadow(shadow, globalTheme)).join(',')
+}
+
+export const transformBoxShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
 
 export const transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG = getActiveConfig()

package/src/utils/sequence.js

@@ -158,20 +158,24 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
   let absValue = isNegative ? letterVal.slice(1) : letterVal
 
   let mediaName = ''
-  if (absValue.includes('-')) {
-    mediaName = '-' + absValue.split('-')[1].toLowerCase()
-    absValue = absValue.split('-')[0]
+  if (absValue.includes('_')) {
+    mediaName = '_' + absValue.split('_')[1].toLowerCase()
+    absValue = absValue.split('_')[0]
   }
 
-  const varValue = v => `var(${prefix}${v}${mediaName})`
+  const varValue = v => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v
   if (absValue.includes('+')) {
-    const args = absValue.split('+')
-    const [first, second] = args
+    const [first, second] = absValue.split('+')
     const joint = `${varValue(first)} + ${varValue(second)}`
     return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
+  } else if (absValue.includes('*')) {
+    const [first, second] = absValue.split('*')
+    const joint = `${varValue(first)} * ${varValue(second)}`
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
   } else if (absValue.includes('-')) {
-    const args = absValue.split('-')
-    const [first, second] = args
+    // TODO: check this
+    // check for the first char
+    const [first, second] = absValue.split('-')
     const joint = `${varValue(first)} - ${varValue(second)}`
     return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
   }

package/src/utils/var.js

@@ -32,14 +32,14 @@ export const applySequenceVars = (props, mediaName, options = {}) => {
       }
       let underMediaQuery = CSS_VARS[`@media ${query}`]
       if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
-      underMediaQuery[item.variable] = `var(${item.variable + '-' + mediaName})`
-      CSS_VARS[item.variable + '-' + mediaName] = value
+      underMediaQuery[item.variable] = `var(${item.variable + '_' + mediaName})`
+      CSS_VARS[item.variable + '_' + mediaName] = value
     } else {
       if (options.useDefault === false) {
         CSS_VARS[item.variable] = value
       } else {
-        CSS_VARS[item.variable + '-default'] = value
-        CSS_VARS[item.variable] = `var(${item.variable + '-default'})`
+        CSS_VARS[item.variable + '_default'] = value
+        CSS_VARS[item.variable] = `var(${item.variable + '_default'})`
       }
     }
   }