@symbo.ls/scratch 3.8.0 → 3.8.1

package/README.md

@@ -29,7 +29,8 @@ set({
   font: {},
   font_family: {},
   timing: {},
-  reset: {}
+  reset: {},
+  vars: {}
 }, {
   // options
 })
@@ -86,6 +87,54 @@ Generated CSS:
 
 When `true`, also generates suffixed variables like `--theme-document-dark-background` alongside the non-suffixed `--theme-document-background`. Disabled by default to reduce CSS variable count.
 
+## CSS Custom Properties (vars)
+
+Define initial CSS custom properties in the design system:
+
+```javascript
+set({
+  vars: {
+    '--header-height': '60px',
+    'sidebar-width': '280px',   // auto-prefixed to --sidebar-width
+    'gap': '1rem'               // becomes --gap
+  }
+})
+```
+
+Each entry is written to `:root` CSS custom properties. Keys without `--` prefix get it added automatically. Values can be referenced in component props: `padding: '--gap'` → `var(--gap)`.
+
+## Font — Array URL Support
+
+Font definitions support array URLs for multiple format fallbacks:
+
+```javascript
+set({
+  font: {
+    Exo2: [
+      {
+        url: ['Exo2-Medium.woff2', 'Exo2-Medium.woff'],
+        fontWeight: '500',
+        fontStyle: 'normal',
+        fontDisplay: 'swap'
+      }
+    ]
+  }
+})
+```
+
+Generates comma-separated `src` with auto-detected formats:
+
+```css
+@font-face {
+  font-family: 'Exo2';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('Exo2-Medium.woff2') format('woff2'),
+       url('Exo2-Medium.woff') format('woff');
+}
+```
+
 Read more at [docs](https://www.symbols.app/developersdesign-system)
 
 ### TODO:

package/dist/cjs/defaultConfig/index.js

@@ -19,7 +19,8 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var defaultConfig_exports = {};
 __export(defaultConfig_exports, {
-  reset: () => reset
+  reset: () => reset,
+  vars: () => vars
 });
 module.exports = __toCommonJS(defaultConfig_exports);
 __reExport(defaultConfig_exports, require("./sequence.js"), module.exports);
@@ -36,10 +37,10 @@ __reExport(defaultConfig_exports, require("./icons.js"), module.exports);
 __reExport(defaultConfig_exports, require("./timing.js"), module.exports);
 __reExport(defaultConfig_exports, require("./document.js"), module.exports);
 __reExport(defaultConfig_exports, require("./responsive.js"), module.exports);
-__reExport(defaultConfig_exports, require("./cases.js"), module.exports);
 __reExport(defaultConfig_exports, require("./animation.js"), module.exports);
 __reExport(defaultConfig_exports, require("./svg.js"), module.exports);
 __reExport(defaultConfig_exports, require("./templates.js"), module.exports);
 __reExport(defaultConfig_exports, require("./grid.js"), module.exports);
 __reExport(defaultConfig_exports, require("./class.js"), module.exports);
 const reset = {};
+const vars = {};

package/dist/cjs/set.js

@@ -28,11 +28,14 @@ module.exports = __toCommonJS(set_exports);
 var import_factory = require("./factory.js");
 var import_system = require("./system");
 var import_utils = require("@domql/utils");
-const setCases = (val, key) => {
-  if ((0, import_utils.isFunction)(val)) return val();
+const setVars = (val, key) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { CSS_VARS } = CONFIG;
+  const varName = key.startsWith("--") ? key : `--${key}`;
+  CSS_VARS[varName] = val;
   return val;
 };
-const setSameValue = (val, key) => val;
+const asIs = (val) => val;
 const VALUE_TRANSFORMERS = {
   color: import_system.setColor,
   gradient: import_system.setGradient,
@@ -41,21 +44,21 @@ const VALUE_TRANSFORMERS = {
   fontfamily: import_system.setFontFamily,
   theme: import_system.setTheme,
   icons: import_system.setSvgIcon,
-  semantic_icons: setSameValue,
-  semanticicons: setSameValue,
+  semantic_icons: asIs,
+  semanticicons: asIs,
   svg: import_system.setSVG,
-  svg_data: setSameValue,
-  typography: setSameValue,
-  cases: setCases,
+  svg_data: asIs,
+  typography: asIs,
   shadow: import_system.setShadow,
-  spacing: setSameValue,
-  media: setSameValue,
-  grid: setSameValue,
-  class: setSameValue,
-  timing: setSameValue,
-  reset: setSameValue,
-  unit: setSameValue,
-  animation: setSameValue
+  spacing: asIs,
+  media: asIs,
+  grid: asIs,
+  class: asIs,
+  timing: asIs,
+  reset: asIs,
+  unit: asIs,
+  animation: asIs,
+  vars: setVars
 };
 const setValue = (factoryName, value, key) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
@@ -67,10 +70,12 @@ const setValue = (factoryName, value, key) => {
       FACTORY2[key] = result;
       return FACTORY2;
     } catch (error) {
-      if (CONFIG.verbose) console.warn("Error setting", lowerName, "value", value, key, error);
+      if (CONFIG.verbose)
+        console.warn("Error setting", lowerName, "value", value, key, error);
     }
   }
-  if (CONFIG.verbose) console.warn("Can not find", lowerName, "method in scratch");
+  if (CONFIG.verbose)
+    console.warn("Can not find", lowerName, "method in scratch");
 };
 const setEach = (factoryName, props) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
@@ -80,7 +85,15 @@ const setEach = (factoryName, props) => {
     try {
       return setValue(lowerName, props[key], key);
     } catch (error) {
-      if (CONFIG.verbose) console.warn("Error setting", lowerName, "value", props[key], key, error);
+      if (CONFIG.verbose)
+        console.warn(
+          "Error setting",
+          lowerName,
+          "value",
+          props[key],
+          key,
+          error
+        );
     }
   });
   return CONFIG[lowerName] || CONFIG[factoryName];
@@ -115,6 +128,7 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     useDefaultConfig,
     semanticIcons,
     SEMANTIC_ICONS,
+    // deprecated
     semantic_icons,
     files,
     ...config
@@ -131,7 +145,8 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useIconSprite !== void 0) CONFIG.useIconSprite = useIconSprite;
   if (useDocumentTheme !== void 0) CONFIG.useDocumentTheme = useDocumentTheme;
   if (globalTheme !== void 0) CONFIG.globalTheme = globalTheme;
-  if (recivedConfig.useThemeSuffixedVars !== void 0) CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
+  if (recivedConfig.useThemeSuffixedVars !== void 0)
+    CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
   if (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
   const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons;
   if (_semanticIcons !== void 0) {

package/dist/cjs/system/color.js

@@ -40,7 +40,12 @@ const getColor = (value, key, config) => {
     [name, alpha, tone] = value;
   } else {
     const parsed = (0, import_utils2.parseColorToken)(value);
-    if (!parsed) return value;
+    if (!parsed) {
+      const { color: COLOR2, gradient: GRADIENT2 } = CONFIG;
+      const directVal = GRADIENT2[value] || COLOR2[value];
+      if (directVal) return CONFIG.useVariable ? `var(${directVal.var})` : directVal.value;
+      return value;
+    }
     if (parsed.passthrough) return parsed.passthrough;
     if (parsed.cssVar) return `var(${parsed.cssVar})`;
     name = parsed.name;

package/dist/cjs/system/font.js

@@ -45,8 +45,12 @@ const setFont = (val, key) => {
   } else if (val[0]) {
     fontFace = (0, import_utils2.getFontFaceEach)(key, val, CONFIG.files);
   } else {
-    const url = (0, import_utils2.resolveFileUrl)(val.url, CONFIG.files) || val.url;
-    fontFace = (0, import_utils2.setCustomFontMedia)(key, url);
+    const url = Array.isArray(val.url) ? val.url.map((u) => (0, import_utils2.resolveFileUrl)(u, CONFIG.files) || u) : (0, import_utils2.resolveFileUrl)(val.url, CONFIG.files) || val.url;
+    fontFace = (0, import_utils2.setCustomFontMedia)(key, url, val.fontWeight, {
+      fontStyle: val.fontStyle,
+      fontDisplay: val.fontDisplay,
+      fontStretch: val.fontStretch
+    });
   }
   return { var: CSSvar, value: val, fontFace };
 };

package/dist/cjs/system/theme.js

@@ -268,6 +268,8 @@ const recursiveTheme = (val) => {
         continue;
       } else if (symb === ":") {
         obj[`&${param}`] = recursiveTheme(val[param]);
+      } else if (symb === ".") {
+        obj[`&${param}`] = recursiveTheme(val[param]);
       }
     } else obj[param] = val[param];
   }

package/dist/cjs/utils/font.js

@@ -58,24 +58,28 @@ const isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") |
 const setFontImport = (url) => `@import url('${url}');`;
 const setInCustomFontMedia = (str) => `@font-face { ${str} }`;
 const setCustomFont = (name, url, weight, options = {}) => {
-  const format = getFontFormat(url);
-  const formatStr = format ? ` format('${format}')` : "";
+  const urls = Array.isArray(url) ? url : [url];
+  const srcList = urls.map((u) => {
+    const format = getFontFormat(u);
+    const formatStr = format ? ` format('${format}')` : "";
+    return `url('${u}')${formatStr}`;
+  }).join(",\n       ");
   return `
   font-family: '${name}';
-  font-style: normal;${weight ? `
+  font-style: ${options.fontStyle || "normal"};${weight ? `
   font-weight: ${weight};` : ""}${options.fontStretch ? `
   font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
   font-display: ${options.fontDisplay};` : ""}
-  src: url('${url}')${formatStr};`;
+  src: ${srcList};`;
 };
 const setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 const getFontFaceEach = (name, weights, files) => {
   const keys = Object.keys(weights);
   return keys.map((key) => {
-    const { url, fontWeight } = weights[key];
-    const resolvedUrl = resolveFileUrl(url, files) || url;
-    return setCustomFont(name, resolvedUrl, fontWeight);
+    const { url, fontWeight, fontStyle, fontDisplay, fontStretch } = weights[key];
+    const resolvedUrl = Array.isArray(url) ? url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(url, files) || url;
+    return setCustomFont(name, resolvedUrl, fontWeight, { fontStyle, fontDisplay, fontStretch });
   });
 };
 const getFontFace = (LIBRARY) => {
@@ -95,8 +99,12 @@ const getFontFaceEachString = (name, weights, files) => {
   }
   const isArr = weights[0];
   if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
-  const url = resolveFileUrl(weights.url, files) || weights.url;
-  return setCustomFontMedia(name, url);
+  const url = Array.isArray(weights.url) ? weights.url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(weights.url, files) || weights.url;
+  return setCustomFontMedia(name, url, weights.fontWeight, {
+    fontStyle: weights.fontStyle,
+    fontDisplay: weights.fontDisplay,
+    fontStretch: weights.fontStretch
+  });
 };
 const getFontFaceString = (LIBRARY, files) => {
   const keys = Object.keys(LIBRARY);

package/dist/esm/defaultConfig/index.js

@@ -12,13 +12,14 @@ 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 * from "./templates.js";
 export * from "./grid.js";
 export * from "./class.js";
 const reset = {};
+const vars = {};
 export {
-  reset
+  reset,
+  vars
 };

package/dist/esm/set.js

@@ -14,12 +14,15 @@ import {
   applyDocument,
   setShadow
 } from "./system";
-import { isFunction, deepMerge } from "@domql/utils";
-const setCases = (val, key) => {
-  if (isFunction(val)) return val();
+import { deepMerge } from "@domql/utils";
+const setVars = (val, key) => {
+  const CONFIG = getActiveConfig();
+  const { CSS_VARS } = CONFIG;
+  const varName = key.startsWith("--") ? key : `--${key}`;
+  CSS_VARS[varName] = val;
   return val;
 };
-const setSameValue = (val, key) => val;
+const asIs = (val) => val;
 const VALUE_TRANSFORMERS = {
   color: setColor,
   gradient: setGradient,
@@ -28,21 +31,21 @@ const VALUE_TRANSFORMERS = {
   fontfamily: setFontFamily,
   theme: setTheme,
   icons: setSvgIcon,
-  semantic_icons: setSameValue,
-  semanticicons: setSameValue,
+  semantic_icons: asIs,
+  semanticicons: asIs,
   svg: setSVG,
-  svg_data: setSameValue,
-  typography: setSameValue,
-  cases: setCases,
+  svg_data: asIs,
+  typography: asIs,
   shadow: setShadow,
-  spacing: setSameValue,
-  media: setSameValue,
-  grid: setSameValue,
-  class: setSameValue,
-  timing: setSameValue,
-  reset: setSameValue,
-  unit: setSameValue,
-  animation: setSameValue
+  spacing: asIs,
+  media: asIs,
+  grid: asIs,
+  class: asIs,
+  timing: asIs,
+  reset: asIs,
+  unit: asIs,
+  animation: asIs,
+  vars: setVars
 };
 const setValue = (factoryName, value, key) => {
   const CONFIG = getActiveConfig();
@@ -54,10 +57,12 @@ const setValue = (factoryName, value, key) => {
       FACTORY2[key] = result;
       return FACTORY2;
     } catch (error) {
-      if (CONFIG.verbose) console.warn("Error setting", lowerName, "value", value, key, error);
+      if (CONFIG.verbose)
+        console.warn("Error setting", lowerName, "value", value, key, error);
     }
   }
-  if (CONFIG.verbose) console.warn("Can not find", lowerName, "method in scratch");
+  if (CONFIG.verbose)
+    console.warn("Can not find", lowerName, "method in scratch");
 };
 const setEach = (factoryName, props) => {
   const CONFIG = getActiveConfig();
@@ -67,7 +72,15 @@ const setEach = (factoryName, props) => {
     try {
       return setValue(lowerName, props[key], key);
     } catch (error) {
-      if (CONFIG.verbose) console.warn("Error setting", lowerName, "value", props[key], key, error);
+      if (CONFIG.verbose)
+        console.warn(
+          "Error setting",
+          lowerName,
+          "value",
+          props[key],
+          key,
+          error
+        );
     }
   });
   return CONFIG[lowerName] || CONFIG[factoryName];
@@ -102,6 +115,7 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     useDefaultConfig,
     semanticIcons,
     SEMANTIC_ICONS,
+    // deprecated
     semantic_icons,
     files,
     ...config
@@ -118,7 +132,8 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useIconSprite !== void 0) CONFIG.useIconSprite = useIconSprite;
   if (useDocumentTheme !== void 0) CONFIG.useDocumentTheme = useDocumentTheme;
   if (globalTheme !== void 0) CONFIG.globalTheme = globalTheme;
-  if (recivedConfig.useThemeSuffixedVars !== void 0) CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
+  if (recivedConfig.useThemeSuffixedVars !== void 0)
+    CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
   if (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
   const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons;
   if (_semanticIcons !== void 0) {

package/dist/esm/system/color.js

@@ -19,7 +19,12 @@ const getColor = (value, key, config) => {
     [name, alpha, tone] = value;
   } else {
     const parsed = parseColorToken(value);
-    if (!parsed) return value;
+    if (!parsed) {
+      const { color: COLOR2, gradient: GRADIENT2 } = CONFIG;
+      const directVal = GRADIENT2[value] || COLOR2[value];
+      if (directVal) return CONFIG.useVariable ? `var(${directVal.var})` : directVal.value;
+      return value;
+    }
     if (parsed.passthrough) return parsed.passthrough;
     if (parsed.cssVar) return `var(${parsed.cssVar})`;
     name = parsed.name;

package/dist/esm/system/font.js

@@ -27,8 +27,12 @@ const setFont = (val, key) => {
   } else if (val[0]) {
     fontFace = getFontFaceEach(key, val, CONFIG.files);
   } else {
-    const url = resolveFileUrl(val.url, CONFIG.files) || val.url;
-    fontFace = setCustomFontMedia(key, url);
+    const url = Array.isArray(val.url) ? val.url.map((u) => resolveFileUrl(u, CONFIG.files) || u) : resolveFileUrl(val.url, CONFIG.files) || val.url;
+    fontFace = setCustomFontMedia(key, url, val.fontWeight, {
+      fontStyle: val.fontStyle,
+      fontDisplay: val.fontDisplay,
+      fontStretch: val.fontStretch
+    });
   }
   return { var: CSSvar, value: val, fontFace };
 };

package/dist/esm/system/theme.js

@@ -247,6 +247,8 @@ const recursiveTheme = (val) => {
         continue;
       } else if (symb === ":") {
         obj[`&${param}`] = recursiveTheme(val[param]);
+      } else if (symb === ".") {
+        obj[`&${param}`] = recursiveTheme(val[param]);
       }
     } else obj[param] = val[param];
   }

package/dist/esm/utils/font.js

@@ -24,24 +24,28 @@ const isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") |
 const setFontImport = (url) => `@import url('${url}');`;
 const setInCustomFontMedia = (str) => `@font-face { ${str} }`;
 const setCustomFont = (name, url, weight, options = {}) => {
-  const format = getFontFormat(url);
-  const formatStr = format ? ` format('${format}')` : "";
+  const urls = Array.isArray(url) ? url : [url];
+  const srcList = urls.map((u) => {
+    const format = getFontFormat(u);
+    const formatStr = format ? ` format('${format}')` : "";
+    return `url('${u}')${formatStr}`;
+  }).join(",\n       ");
   return `
   font-family: '${name}';
-  font-style: normal;${weight ? `
+  font-style: ${options.fontStyle || "normal"};${weight ? `
   font-weight: ${weight};` : ""}${options.fontStretch ? `
   font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
   font-display: ${options.fontDisplay};` : ""}
-  src: url('${url}')${formatStr};`;
+  src: ${srcList};`;
 };
 const setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 const getFontFaceEach = (name, weights, files) => {
   const keys = Object.keys(weights);
   return keys.map((key) => {
-    const { url, fontWeight } = weights[key];
-    const resolvedUrl = resolveFileUrl(url, files) || url;
-    return setCustomFont(name, resolvedUrl, fontWeight);
+    const { url, fontWeight, fontStyle, fontDisplay, fontStretch } = weights[key];
+    const resolvedUrl = Array.isArray(url) ? url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(url, files) || url;
+    return setCustomFont(name, resolvedUrl, fontWeight, { fontStyle, fontDisplay, fontStretch });
   });
 };
 const getFontFace = (LIBRARY) => {
@@ -61,8 +65,12 @@ const getFontFaceEachString = (name, weights, files) => {
   }
   const isArr = weights[0];
   if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
-  const url = resolveFileUrl(weights.url, files) || weights.url;
-  return setCustomFontMedia(name, url);
+  const url = Array.isArray(weights.url) ? weights.url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(weights.url, files) || weights.url;
+  return setCustomFontMedia(name, url, weights.fontWeight, {
+    fontStyle: weights.fontStyle,
+    fontDisplay: weights.fontDisplay,
+    fontStretch: weights.fontStretch
+  });
 };
 const getFontFaceString = (LIBRARY, files) => {
   const keys = Object.keys(LIBRARY);

package/dist/iife/index.js

@@ -467,7 +467,6 @@ var SmblsScratch = (() => {
     applyTimingSequence: () => applyTimingSequence,
     applyTypographySequence: () => applyTypographySequence,
     breakpoints: () => breakpoints,
-    cases: () => cases,
     changeGlobalTheme: () => changeGlobalTheme,
     changeLightness: () => changeLightness,
     checkIfBoxSize: () => checkIfBoxSize,
@@ -584,7 +583,8 @@ var SmblsScratch = (() => {
     transformTransition: () => transformTransition,
     transfromGap: () => transfromGap,
     typography: () => typography,
-    unit: () => unit
+    unit: () => unit,
+    vars: () => vars
   });
 
   // src/utils/index.js
@@ -905,24 +905,28 @@ var SmblsScratch = (() => {
   var setFontImport = (url) => `@import url('${url}');`;
   var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
   var setCustomFont = (name, url, weight, options = {}) => {
-    const format = getFontFormat(url);
-    const formatStr = format ? ` format('${format}')` : "";
+    const urls = Array.isArray(url) ? url : [url];
+    const srcList = urls.map((u) => {
+      const format = getFontFormat(u);
+      const formatStr = format ? ` format('${format}')` : "";
+      return `url('${u}')${formatStr}`;
+    }).join(",\n       ");
     return `
   font-family: '${name}';
-  font-style: normal;${weight ? `
+  font-style: ${options.fontStyle || "normal"};${weight ? `
   font-weight: ${weight};` : ""}${options.fontStretch ? `
   font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
   font-display: ${options.fontDisplay};` : ""}
-  src: url('${url}')${formatStr};`;
+  src: ${srcList};`;
   };
   var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
   var getFontFaceEach = (name, weights, files) => {
     const keys = Object.keys(weights);
     return keys.map((key) => {
-      const { url, fontWeight } = weights[key];
-      const resolvedUrl = resolveFileUrl(url, files) || url;
-      return setCustomFont(name, resolvedUrl, fontWeight);
+      const { url, fontWeight, fontStyle, fontDisplay, fontStretch } = weights[key];
+      const resolvedUrl = Array.isArray(url) ? url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(url, files) || url;
+      return setCustomFont(name, resolvedUrl, fontWeight, { fontStyle, fontDisplay, fontStretch });
     });
   };
   var getFontFace = (LIBRARY) => {
@@ -942,8 +946,12 @@ var SmblsScratch = (() => {
     }
     const isArr = weights[0];
     if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
-    const url = resolveFileUrl(weights.url, files) || weights.url;
-    return setCustomFontMedia(name, url);
+    const url = Array.isArray(weights.url) ? weights.url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(weights.url, files) || weights.url;
+    return setCustomFontMedia(name, url, weights.fontWeight, {
+      fontStyle: weights.fontStyle,
+      fontDisplay: weights.fontDisplay,
+      fontStretch: weights.fontStretch
+    });
   };
   var getFontFaceString = (LIBRARY, files) => {
     const keys = Object.keys(LIBRARY);
@@ -977,7 +985,6 @@ var SmblsScratch = (() => {
     CLASS: () => CLASS,
     animation: () => animation,
     breakpoints: () => breakpoints,
-    cases: () => cases,
     color: () => color,
     devices: () => devices,
     document: () => document3,
@@ -1000,7 +1007,8 @@ var SmblsScratch = (() => {
     theme: () => theme,
     timing: () => timing,
     typography: () => typography,
-    unit: () => unit
+    unit: () => unit,
+    vars: () => vars
   });
 
   // src/defaultConfig/sequence.js
@@ -1150,9 +1158,6 @@ var SmblsScratch = (() => {
     mobileXS: [375, 768]
   };
 
-  // src/defaultConfig/cases.js
-  var cases = {};
-
   // src/defaultConfig/animation.js
   var animation = {};
 
@@ -1173,6 +1178,7 @@ var SmblsScratch = (() => {
 
   // src/defaultConfig/index.js
   var reset = {};
+  var vars = {};
 
   // src/factory.js
   var CSS_VARS = {};
@@ -1514,20 +1520,20 @@ var SmblsScratch = (() => {
       CSS_VARS2[result.var] = result.value;
     }
   };
-  var applySequenceGlobalVars = (vars, obj, options) => {
+  var applySequenceGlobalVars = (vars2, obj, options) => {
     const CONFIG2 = getActiveConfig();
     const { unit: UNIT } = CONFIG2;
     const unit2 = obj.unit || UNIT.default;
     const { base, ratio, type } = obj;
     const prefix = "--" + (type && type.replace(".", "-"));
-    vars[`${prefix}-base`] = base;
-    vars[`${prefix}-unit`] = unit2;
+    vars2[`${prefix}-base`] = base;
+    vars2[`${prefix}-unit`] = unit2;
     const ratioVar = `${prefix}-ratio`;
-    vars[ratioVar] = ratio;
+    vars2[ratioVar] = ratio;
     const [first, middle, second] = getSubratio(base, ratio);
-    vars[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
-    vars[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
-    vars[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
+    vars2[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
+    vars2[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
+    vars2[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
   };
   var applySequenceVars = (FACTORY2, options = {}) => {
     const CONFIG2 = getActiveConfig();
@@ -1692,7 +1698,12 @@ var SmblsScratch = (() => {
       [name, alpha, tone] = value;
     } else {
       const parsed = parseColorToken(value);
-      if (!parsed) return value;
+      if (!parsed) {
+        const { color: COLOR2, gradient: GRADIENT2 } = CONFIG2;
+        const directVal = GRADIENT2[value] || COLOR2[value];
+        if (directVal) return CONFIG2.useVariable ? `var(${directVal.var})` : directVal.value;
+        return value;
+      }
       if (parsed.passthrough) return parsed.passthrough;
       if (parsed.cssVar) return `var(${parsed.cssVar})`;
       name = parsed.name;
@@ -2090,6 +2101,8 @@ var SmblsScratch = (() => {
           continue;
         } else if (symb === ":") {
           obj[`&${param}`] = recursiveTheme(val[param]);
+        } else if (symb === ".") {
+          obj[`&${param}`] = recursiveTheme(val[param]);
         }
       } else obj[param] = val[param];
     }
@@ -2147,8 +2160,12 @@ var SmblsScratch = (() => {
     } else if (val[0]) {
       fontFace = getFontFaceEach(key, val, CONFIG2.files);
     } else {
-      const url = resolveFileUrl(val.url, CONFIG2.files) || val.url;
-      fontFace = setCustomFontMedia(key, url);
+      const url = Array.isArray(val.url) ? val.url.map((u) => resolveFileUrl(u, CONFIG2.files) || u) : resolveFileUrl(val.url, CONFIG2.files) || val.url;
+      fontFace = setCustomFontMedia(key, url, val.fontWeight, {
+        fontStyle: val.fontStyle,
+        fontDisplay: val.fontDisplay,
+        fontStretch: val.fontStretch
+      });
     }
     return { var: CSSvar, value: val, fontFace };
   };
@@ -2783,11 +2800,14 @@ var SmblsScratch = (() => {
 
   // src/set.js
   init_esm();
-  var setCases = (val, key) => {
-    if (isFunction(val)) return val();
+  var setVars = (val, key) => {
+    const CONFIG2 = getActiveConfig();
+    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const varName = key.startsWith("--") ? key : `--${key}`;
+    CSS_VARS2[varName] = val;
     return val;
   };
-  var setSameValue = (val, key) => val;
+  var asIs = (val) => val;
   var VALUE_TRANSFORMERS = {
     color: setColor,
     gradient: setGradient,
@@ -2796,21 +2816,21 @@ var SmblsScratch = (() => {
     fontfamily: setFontFamily,
     theme: setTheme,
     icons: setSvgIcon,
-    semantic_icons: setSameValue,
-    semanticicons: setSameValue,
+    semantic_icons: asIs,
+    semanticicons: asIs,
     svg: setSVG,
-    svg_data: setSameValue,
-    typography: setSameValue,
-    cases: setCases,
+    svg_data: asIs,
+    typography: asIs,
     shadow: setShadow,
-    spacing: setSameValue,
-    media: setSameValue,
-    grid: setSameValue,
-    class: setSameValue,
-    timing: setSameValue,
-    reset: setSameValue,
-    unit: setSameValue,
-    animation: setSameValue
+    spacing: asIs,
+    media: asIs,
+    grid: asIs,
+    class: asIs,
+    timing: asIs,
+    reset: asIs,
+    unit: asIs,
+    animation: asIs,
+    vars: setVars
   };
   var setValue = (factoryName, value, key) => {
     const CONFIG2 = getActiveConfig();
@@ -2822,10 +2842,12 @@ var SmblsScratch = (() => {
         FACTORY2[key] = result;
         return FACTORY2;
       } catch (error) {
-        if (CONFIG2.verbose) console.warn("Error setting", lowerName, "value", value, key, error);
+        if (CONFIG2.verbose)
+          console.warn("Error setting", lowerName, "value", value, key, error);
       }
     }
-    if (CONFIG2.verbose) console.warn("Can not find", lowerName, "method in scratch");
+    if (CONFIG2.verbose)
+      console.warn("Can not find", lowerName, "method in scratch");
   };
   var setEach = (factoryName, props) => {
     const CONFIG2 = getActiveConfig();
@@ -2835,7 +2857,15 @@ var SmblsScratch = (() => {
       try {
         return setValue(lowerName, props[key], key);
       } catch (error) {
-        if (CONFIG2.verbose) console.warn("Error setting", lowerName, "value", props[key], key, error);
+        if (CONFIG2.verbose)
+          console.warn(
+            "Error setting",
+            lowerName,
+            "value",
+            props[key],
+            key,
+            error
+          );
       }
     });
     return CONFIG2[lowerName] || CONFIG2[factoryName];
@@ -2870,6 +2900,7 @@ var SmblsScratch = (() => {
       useDefaultConfig,
       semanticIcons,
       SEMANTIC_ICONS,
+      // deprecated
       semantic_icons: semantic_icons2,
       files,
       ...config
@@ -2886,7 +2917,8 @@ var SmblsScratch = (() => {
     if (useIconSprite !== void 0) CONFIG2.useIconSprite = useIconSprite;
     if (useDocumentTheme !== void 0) CONFIG2.useDocumentTheme = useDocumentTheme;
     if (globalTheme !== void 0) CONFIG2.globalTheme = globalTheme;
-    if (recivedConfig.useThemeSuffixedVars !== void 0) CONFIG2.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
+    if (recivedConfig.useThemeSuffixedVars !== void 0)
+      CONFIG2.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
     if (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
     const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons2;
     if (_semanticIcons !== void 0) {

package/package.json

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

package/src/defaultConfig/index.js

@@ -14,7 +14,6 @@ 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 * from './templates.js'
@@ -22,3 +21,4 @@ export * from './grid.js'
 export * from './class.js'
 
 export const reset = {}
+export const vars = {}

package/src/set.js

@@ -17,14 +17,17 @@ import {
   setShadow
 } from './system'
 
-import { isFunction, deepMerge } from '@domql/utils'
+import { deepMerge } from '@domql/utils'
 
-const setCases = (val, key) => {
-  if (isFunction(val)) return val()
+const setVars = (val, key) => {
+  const CONFIG = getActiveConfig()
+  const { CSS_VARS } = CONFIG
+  const varName = key.startsWith('--') ? key : `--${key}`
+  CSS_VARS[varName] = val
   return val
 }
 
-const setSameValue = (val, key) => val
+const asIs = (val) => val
 
 export const VALUE_TRANSFORMERS = {
   color: setColor,
@@ -34,21 +37,21 @@ export const VALUE_TRANSFORMERS = {
   fontfamily: setFontFamily,
   theme: setTheme,
   icons: setSvgIcon,
-  semantic_icons: setSameValue,
-  semanticicons: setSameValue,
+  semantic_icons: asIs,
+  semanticicons: asIs,
   svg: setSVG,
-  svg_data: setSameValue,
-  typography: setSameValue,
-  cases: setCases,
+  svg_data: asIs,
+  typography: asIs,
   shadow: setShadow,
-  spacing: setSameValue,
-  media: setSameValue,
-  grid: setSameValue,
-  class: setSameValue,
-  timing: setSameValue,
-  reset: setSameValue,
-  unit: setSameValue,
-  animation: setSameValue
+  spacing: asIs,
+  media: asIs,
+  grid: asIs,
+  class: asIs,
+  timing: asIs,
+  reset: asIs,
+  unit: asIs,
+  animation: asIs,
+  vars: setVars
 }
 
 /**
@@ -69,11 +72,13 @@ export const setValue = (factoryName, value, key) => {
       FACTORY[key] = result
       return FACTORY
     } catch (error) {
-      if (CONFIG.verbose) console.warn('Error setting', lowerName, 'value', value, key, error)
+      if (CONFIG.verbose)
+        console.warn('Error setting', lowerName, 'value', value, key, error)
     }
   }
 
-  if (CONFIG.verbose) console.warn('Can not find', lowerName, 'method in scratch')
+  if (CONFIG.verbose)
+    console.warn('Can not find', lowerName, 'method in scratch')
 }
 
 export const setEach = (factoryName, props) => {
@@ -85,7 +90,15 @@ export const setEach = (factoryName, props) => {
     try {
       return setValue(lowerName, props[key], key)
     } catch (error) {
-      if (CONFIG.verbose) console.warn('Error setting', lowerName, 'value', props[key], key, error)
+      if (CONFIG.verbose)
+        console.warn(
+          'Error setting',
+          lowerName,
+          'value',
+          props[key],
+          key,
+          error
+        )
     }
   })
 
@@ -131,7 +144,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     useDocumentTheme,
     useDefaultConfig,
     semanticIcons,
-    SEMANTIC_ICONS,
+    SEMANTIC_ICONS, // deprecated
     semantic_icons,
     files,
     ...config
@@ -150,7 +163,8 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useIconSprite !== undefined) CONFIG.useIconSprite = useIconSprite
   if (useDocumentTheme !== undefined) CONFIG.useDocumentTheme = useDocumentTheme
   if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
-  if (recivedConfig.useThemeSuffixedVars !== undefined) CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars
+  if (recivedConfig.useThemeSuffixedVars !== undefined)
+    CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars
   if (useDefaultConfig !== undefined) CONFIG.useDefaultConfig = useDefaultConfig
   const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons
   if (_semanticIcons !== undefined) {
@@ -166,7 +180,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   const keySet = new Set(keys)
 
   // Pre-merge: fold UPPERCASE default keys into lowercase project keys
-  keys.forEach(key => {
+  keys.forEach((key) => {
     const lower = key.toLowerCase()
     if (lower !== key && keySet.has(lower)) {
       deepMerge(config[lower], config[key])
@@ -174,25 +188,31 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   })
 
   // Process only lowercase keys (skip UPPERCASE when lowercase equivalent exists)
-  keys.map(key => {
+  keys.map((key) => {
     const lower = key.toLowerCase()
     if (lower !== key && keySet.has(lower)) return
     return setEach(key, config[key])
   })
 
   // apply generic configs
-  if (config.typography || config.TYPOGRAPHY) {
-    try { applyTypographySequence() } catch (e) {
+  if (config.typography || config.TYPOGRAPHY) { // UPPERCASE deprecated
+    try {
+      applyTypographySequence()
+    } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying typography sequence', e)
     }
   }
-  if (config.spacing || config.SPACING) {
-    try { applySpacingSequence() } catch (e) {
+  if (config.spacing || config.SPACING) { // UPPERCASE deprecated
+    try {
+      applySpacingSequence()
+    } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying spacing sequence', e)
     }
   }
-  if (config.timing || config.TIMING) {
-    try { applyTimingSequence() } catch (e) {
+  if (config.timing || config.TIMING) { // UPPERCASE deprecated
+    try {
+      applyTimingSequence()
+    } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying timing sequence', e)
     }
   }

package/src/system/color.js

@@ -26,7 +26,13 @@ export const getColor = (value, key, config) => {
     [name, alpha, tone] = value
   } else {
     const parsed = parseColorToken(value)
-    if (!parsed) return value
+    if (!parsed) {
+      // Direct lookup for hyphenated names (e.g. 'gradient-light', 'gradient-dark-active')
+      const { color: COLOR, gradient: GRADIENT } = CONFIG
+      const directVal = GRADIENT[value] || COLOR[value]
+      if (directVal) return CONFIG.useVariable ? `var(${directVal.var})` : directVal.value
+      return value
+    }
     if (parsed.passthrough) return parsed.passthrough
     if (parsed.cssVar) return `var(${parsed.cssVar})`
     name = parsed.name

package/src/system/font.js

@@ -33,8 +33,14 @@ export const setFont = (val, key) => {
   } else if (val[0]) {
     fontFace = getFontFaceEach(key, val, CONFIG.files)
   } else {
-    const url = resolveFileUrl(val.url, CONFIG.files) || val.url
-    fontFace = setCustomFontMedia(key, url)
+    const url = Array.isArray(val.url)
+      ? val.url.map((u) => resolveFileUrl(u, CONFIG.files) || u)
+      : resolveFileUrl(val.url, CONFIG.files) || val.url
+    fontFace = setCustomFontMedia(key, url, val.fontWeight, {
+      fontStyle: val.fontStyle,
+      fontDisplay: val.fontDisplay,
+      fontStretch: val.fontStretch
+    })
   }
 
   return { var: CSSvar, value: val, fontFace }

package/src/system/theme.js

@@ -310,6 +310,8 @@ const recursiveTheme = val => {
         continue
       } else if (symb === ':') {
         obj[`&${param}`] = recursiveTheme(val[param])
+      } else if (symb === '.') {
+        obj[`&${param}`] = recursiveTheme(val[param])
       }
     } else obj[param] = val[param]
   }

package/src/utils/font.js

@@ -2,7 +2,7 @@
 
 export const resolveFileUrl = (url, files) => {
   if (!url || !files) return null
-  try { new URL(url); return null } catch (e) { }
+  try { new URL(url); return null } catch (e) { } // expected: src is not an absolute URL, treating as relative path
   const file = files[url]
   if (file) return file.content && file.content.src
   return null
@@ -30,11 +30,15 @@ export const setFontImport = (url) => `@import url('${url}');`
 export const setInCustomFontMedia = (str) => `@font-face { ${str} }`
 
 export const setCustomFont = (name, url, weight, options = {}) => {
-  const format = getFontFormat(url)
-  const formatStr = format ? ` format('${format}')` : ''
+  const urls = Array.isArray(url) ? url : [url]
+  const srcList = urls.map((u) => {
+    const format = getFontFormat(u)
+    const formatStr = format ? ` format('${format}')` : ''
+    return `url('${u}')${formatStr}`
+  }).join(',\n       ')
   return `
   font-family: '${name}';
-  font-style: normal;${
+  font-style: ${options.fontStyle || 'normal'};${
     weight
       ? `
   font-weight: ${weight};`
@@ -50,7 +54,7 @@ export const setCustomFont = (name, url, weight, options = {}) => {
   font-display: ${options.fontDisplay};`
       : ''
   }
-  src: url('${url}')${formatStr};`
+  src: ${srcList};`
 }
 
 export const setCustomFontMedia = (
@@ -64,9 +68,11 @@ export const setCustomFontMedia = (
 export const getFontFaceEach = (name, weights, files) => {
   const keys = Object.keys(weights)
   return keys.map((key) => {
-    const { url, fontWeight } = weights[key]
-    const resolvedUrl = resolveFileUrl(url, files) || url
-    return setCustomFont(name, resolvedUrl, fontWeight)
+    const { url, fontWeight, fontStyle, fontDisplay, fontStretch } = weights[key]
+    const resolvedUrl = Array.isArray(url)
+      ? url.map((u) => resolveFileUrl(u, files) || u)
+      : resolveFileUrl(url, files) || url
+    return setCustomFont(name, resolvedUrl, fontWeight, { fontStyle, fontDisplay, fontStretch })
   })
 }
 
@@ -88,8 +94,14 @@ export const getFontFaceEachString = (name, weights, files) => {
   }
   const isArr = weights[0]
   if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia)
-  const url = resolveFileUrl(weights.url, files) || weights.url
-  return setCustomFontMedia(name, url)
+  const url = Array.isArray(weights.url)
+    ? weights.url.map((u) => resolveFileUrl(u, files) || u)
+    : resolveFileUrl(weights.url, files) || weights.url
+  return setCustomFontMedia(name, url, weights.fontWeight, {
+    fontStyle: weights.fontStyle,
+    fontDisplay: weights.fontDisplay,
+    fontStretch: weights.fontStretch
+  })
 }
 
 export const getFontFaceString = (LIBRARY, files) => {