@symbo.ls/scratch 3.8.0 → 3.8.6

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

@@ -28,6 +28,163 @@ var import_color = require("./color");
 var import_factory = require("../factory.js");
 var import_color2 = require("../utils/color.js");
 var import_utils = require("@domql/utils");
+const CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
+  "black",
+  "white",
+  "red",
+  "green",
+  "blue",
+  "yellow",
+  "orange",
+  "purple",
+  "pink",
+  "brown",
+  "gray",
+  "grey",
+  "cyan",
+  "magenta",
+  "lime",
+  "olive",
+  "navy",
+  "teal",
+  "aqua",
+  "maroon",
+  "silver",
+  "fuchsia",
+  "transparent",
+  "currentColor",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "none",
+  "aliceblue",
+  "antiquewhite",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "blanchedalmond",
+  "blueviolet",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "greenyellow",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "limegreen",
+  "linen",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "oldlace",
+  "olivedrab",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "plum",
+  "powderblue",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "whitesmoke",
+  "yellowgreen",
+  "rebeccapurple"
+]);
 const setThemeValue = (theme) => {
   const value = {};
   const { state, media, helpers, ...rest } = theme;
@@ -151,6 +308,23 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
   for (const scheme in schemes) {
     if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
   }
+  const brokenSchemes = /* @__PURE__ */ new Set();
+  if (globalTheme === "auto") {
+    for (const param of allKeys) {
+      const symb = param.slice(0, 1);
+      if (symb === "@" || symb === "." || symb === ":") continue;
+      for (const scheme in schemes) {
+        if (brokenSchemes.has(scheme)) continue;
+        const val = schemes[scheme]?.[param];
+        if (val === void 0) continue;
+        const color = (0, import_color.getColor)(val, `@${scheme}`);
+        if (color === void 0) continue;
+        if ((0, import_utils.isString)(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
+          brokenSchemes.add(scheme);
+        }
+      }
+    }
+  }
   for (const param of allKeys) {
     const symb = param.slice(0, 1);
     const hasObject = Object.values(schemes).some((s) => (0, import_utils.isObjectLike)(s?.[param]));
@@ -171,11 +345,16 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
     } else if (symb !== "@" && symb !== "." && symb !== ":") {
       const autoVar = `--theme-${varPrefix}-${param}`;
       if (globalTheme === "auto") {
+        let fallbackColor;
         for (const scheme in schemes) {
+          if (brokenSchemes.has(scheme)) continue;
           const val = schemes[scheme]?.[param];
           if (val === void 0) continue;
           const color = (0, import_color.getColor)(val, `@${scheme}`);
           if (color === void 0) continue;
+          if (scheme === "light" || fallbackColor === void 0) {
+            fallbackColor = color;
+          }
           const selector = `[data-theme="${scheme}"]`;
           if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
           MEDIA_VARS[selector][autoVar] = color;
@@ -185,6 +364,9 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
             MEDIA_VARS[mq][autoVar] = color;
           }
         }
+        if (fallbackColor !== void 0) {
+          CSS_VARS[autoVar] = fallbackColor;
+        }
       } else {
         const forced = String(globalTheme).replace(/^'|'$/g, "");
         const source = schemes[forced]?.[param];
@@ -268,6 +450,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 };
 };