@symbo.ls/scratch 3.5.1 → 3.6.3

package/README.md

@@ -11,6 +11,8 @@ Recevies a configuration and outputs the system of design related properties. It
 | `verbose` | `false` | Output the warning logs in console (only in `dev`, `test` enviroment) |
 | `useReset` | `true` | Apply CSS reset to the document |
 | `useVariable` | `true` | Output CSS variables in properties |
+| `globalTheme` | `'auto'` | Theme mode: `'auto'` (system preference), `'dark'`, `'light'`, or any custom theme name |
+| `useThemeSuffixedVars` | `false` | Also generate suffixed vars like `--theme-document-dark-background` |
 
 A design system configuration of the following systems:
 
@@ -28,11 +30,62 @@ set({
   font_family: {},
   timing: {},
   reset: {}
-}, { 
+}, {
   // options
 })
 ```
 
+## Theme System
+
+Themes with `@dark`/`@light` (or custom `@ocean`, `@sunset`, etc.) variants automatically generate non-suffixed CSS variables that switch via CSS — no JavaScript re-renders needed.
+
+```javascript
+set({
+  theme: {
+    document: {
+      '@dark': { color: 'white', background: 'black' },
+      '@light': { color: 'black', background: 'white' },
+      '@ocean': { color: 'white', background: '#0a2e4e' }
+    }
+  }
+})
+```
+
+Generated CSS:
+
+```css
+/* System theme auto-switching (when no data-theme attribute is set) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) { --theme-document-background: #000; --theme-document-color: #fff; }
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) { --theme-document-background: #fff; --theme-document-color: #000; }
+}
+
+/* Explicit theme forcing via data-theme attribute */
+[data-theme="dark"]  { --theme-document-background: #000; --theme-document-color: #fff; }
+[data-theme="light"] { --theme-document-background: #fff; --theme-document-color: #000; }
+[data-theme="ocean"] { --theme-document-background: #0a2e4e; --theme-document-color: #fff; }
+```
+
+### Theme switching
+
+- **Auto** (default): system `prefers-color-scheme` drives dark/light switching
+- **Force a theme**: set `data-theme` attribute on the root element — instant CSS switch, zero re-renders
+- **Custom themes**: add any `@name` variant to your theme config, activate with `data-theme="name"`
+- **Per-component override**: use `themeModifier` prop to force a specific scheme on individual components
+
+### `globalTheme` option
+
+| Value | Behavior |
+| --- | --- |
+| `'auto'` (default) | `@dark`/`@light` use `prefers-color-scheme` media queries. Custom themes use `[data-theme]` selectors. |
+| `'dark'` / `'light'` / `'custom'` | Non-suffixed vars are set directly in `:root` with the forced theme's values. |
+
+### `useThemeSuffixedVars` option
+
+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.
+
 Read more at [docs](https://www.symbols.app/developersdesign-system)
 
 ### TODO:

package/dist/cjs/factory.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var factory_exports = {};
 __export(factory_exports, {
   CONFIG: () => CONFIG,
+  CSS_MEDIA_VARS: () => CSS_MEDIA_VARS,
   CSS_VARS: () => CSS_VARS,
   FACTORY: () => FACTORY,
   activateConfig: () => activateConfig,
@@ -39,7 +40,8 @@ module.exports = __toCommonJS(factory_exports);
 var import_utils = require("@domql/utils");
 var CONF = __toESM(require("./defaultConfig"), 1);
 const CSS_VARS = {};
-const _CONF = CONF.default || CONF;
+const CSS_MEDIA_VARS = {};
+const _CONF = CONF;
 const _confLower = {};
 for (const key in _CONF) {
   const lower = key.toLowerCase();
@@ -50,7 +52,9 @@ const CONFIG = {
   verbose: false,
   useVariable: true,
   useReset: true,
+  globalTheme: "auto",
   CSS_VARS,
+  CSS_MEDIA_VARS,
   ..._confLower
 };
 const cachedConfig = (0, import_utils.deepClone)(CONFIG);

package/dist/cjs/set.js

@@ -98,11 +98,13 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     useDefaultConfig,
     SEMANTIC_ICONS,
     semantic_icons,
+    files,
     ...config
   } = recivedConfig;
   if (options.newConfig) {
     CONFIG = (0, import_factory.setActiveConfig)(options.newConfig);
   }
+  if (files !== void 0) CONFIG.files = files;
   if (verbose !== void 0) CONFIG.verbose = verbose;
   if (useVariable !== void 0) CONFIG.useVariable = useVariable;
   if (useReset !== void 0) CONFIG.useReset = useReset;
@@ -111,6 +113,7 @@ 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 (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
   const _semanticIcons = SEMANTIC_ICONS || semantic_icons;
   if (_semanticIcons !== void 0) {

package/dist/cjs/system/font.js

@@ -28,22 +28,25 @@ var import_smbls_utils = require("@symbo.ls/smbls-utils");
 var import_factory = require("../factory.js");
 var import_utils2 = require("../utils");
 const setFont = (val, key) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
   const CSSvar = `--font-${key}`;
   if (!val || (0, import_utils.isArray)(val) && !val[0]) return;
   let fontFace;
   if (val.isVariable) {
-    if ((0, import_utils2.isGoogleFontsUrl)(val.url)) {
-      fontFace = (0, import_utils2.setFontImport)(val.url);
+    const url = (0, import_utils2.resolveFileUrl)(val.url, CONFIG.files) || val.url;
+    if ((0, import_utils2.isGoogleFontsUrl)(url)) {
+      fontFace = (0, import_utils2.setFontImport)(url);
     } else {
-      fontFace = (0, import_utils2.setCustomFontMedia)(key, val.url, val.fontWeight, {
+      fontFace = (0, import_utils2.setCustomFontMedia)(key, url, val.fontWeight, {
         fontStretch: val.fontStretch,
         fontDisplay: val.fontDisplay || "swap"
       });
     }
   } else if (val[0]) {
-    fontFace = (0, import_utils2.getFontFaceEach)(key, val);
+    fontFace = (0, import_utils2.getFontFaceEach)(key, val, CONFIG.files);
   } else {
-    fontFace = (0, import_utils2.setCustomFontMedia)(key, val.url);
+    const url = (0, import_utils2.resolveFileUrl)(val.url, CONFIG.files) || val.url;
+    fontFace = (0, import_utils2.setCustomFontMedia)(key, url);
   }
   return { var: CSSvar, value: val, fontFace };
 };

package/dist/cjs/system/reset.js

@@ -32,7 +32,7 @@ const applyReset = (reset = {}) => {
       const configReset = RESET;
       const configTemplates = TYPOGRAPHY.templates;
       configReset.body = {
-        ...CONFIG.useDocumentTheme ? (0, import_theme.getMediaTheme)("document", `@${CONFIG.globalTheme}`) : {},
+        ...CONFIG.useDocumentTheme ? (0, import_theme.getMediaTheme)("document") : {},
         ...configTemplates.body
       };
       configReset.h1 = configTemplates.h1;
@@ -43,7 +43,7 @@ const applyReset = (reset = {}) => {
       configReset.h6 = configTemplates.h6;
     }
     const { body, ...templates } = TYPOGRAPHY.templates;
-    const globalTheme = CONFIG.useDocumentTheme ? (0, import_theme.getMediaTheme)("document", `@${CONFIG.globalTheme}`) : {};
+    const globalTheme = CONFIG.useDocumentTheme ? (0, import_theme.getMediaTheme)("document") : {};
     if (RESET.html) (0, import_utils.overwriteDeep)(RESET.html, globalTheme);
     return (0, import_utils.deepMerge)((0, import_utils.merge)(RESET, reset), {
       html: {

package/dist/cjs/system/theme.js

@@ -141,24 +141,101 @@ const keySetters = {
   ":": (theme, value) => setSelectors(theme, value),
   ".": (theme, value) => setHelpers(theme, value)
 };
+const generateAutoVars = (schemes, varPrefix, CONFIG) => {
+  const { CSS_VARS } = CONFIG;
+  if (!CONFIG.CSS_MEDIA_VARS) CONFIG.CSS_MEDIA_VARS = {};
+  const MEDIA_VARS = CONFIG.CSS_MEDIA_VARS;
+  const globalTheme = CONFIG.globalTheme !== void 0 ? CONFIG.globalTheme : "auto";
+  const result = {};
+  const allKeys = /* @__PURE__ */ new Set();
+  for (const scheme in schemes) {
+    if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
+  }
+  for (const param of allKeys) {
+    const symb = param.slice(0, 1);
+    const hasObject = Object.values(schemes).some((s) => (0, import_utils.isObjectLike)(s?.[param]));
+    if (symb === "." && hasObject) {
+      const helperName = param.slice(1);
+      const subSchemes = {};
+      for (const scheme in schemes) {
+        if ((0, import_utils.isObjectLike)(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
+      }
+      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${helperName}`, CONFIG);
+    } else if (symb === ":" && hasObject) {
+      const pseudoName = param.replace(/^:+/, "");
+      const subSchemes = {};
+      for (const scheme in schemes) {
+        if ((0, import_utils.isObjectLike)(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
+      }
+      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG);
+    } else if (symb !== "@" && symb !== "." && symb !== ":") {
+      const autoVar = `--theme-${varPrefix}-${param}`;
+      if (globalTheme === "auto") {
+        for (const scheme in schemes) {
+          const val = schemes[scheme]?.[param];
+          if (val === void 0) continue;
+          const color = (0, import_color.getColor)(val, `@${scheme}`);
+          if (color === void 0) continue;
+          const selector = `[data-theme="${scheme}"]`;
+          if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
+          MEDIA_VARS[selector][autoVar] = color;
+          if (scheme === "dark" || scheme === "light") {
+            const mq = `@media (prefers-color-scheme: ${scheme})`;
+            if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
+            MEDIA_VARS[mq][autoVar] = color;
+          }
+        }
+      } else {
+        const forced = String(globalTheme).replace(/^'|'$/g, "");
+        const source = schemes[forced]?.[param];
+        if (source !== void 0) {
+          const color = (0, import_color.getColor)(source, `@${forced}`);
+          if (color !== void 0) CSS_VARS[autoVar] = color;
+        }
+      }
+      result[param] = `var(${autoVar})`;
+      result[`.${param}`] = { [param]: result[param] };
+    }
+  }
+  if (result.background || result.color || result.backgroundColor) {
+    result[".inversed"] = {
+      color: result.background || result.backgroundColor,
+      background: result.color
+    };
+  }
+  return result;
+};
 const setMediaTheme = (val, key, suffix, prefers) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const { CSS_VARS } = CONFIG;
   const theme = { value: val };
+  const isTopLevel = !suffix && !prefers;
   if ((0, import_utils.isObjectLike)(val)) {
+    if (isTopLevel && CONFIG.useVariable) {
+      const schemes = {};
+      for (const param in val) {
+        if (param.startsWith("@") && (0, import_utils.isObjectLike)(val[param])) {
+          schemes[param.slice(1)] = val[param];
+        }
+      }
+      if (Object.keys(schemes).length) {
+        const autoResult = generateAutoVars(schemes, key, CONFIG);
+        Object.assign(theme, autoResult);
+      }
+    }
     for (const param in val) {
       const symb = param.slice(0, 1);
       const value = val[param];
       if (symb === "@" || symb === ":" || symb === ".") {
         const hasPrefers = symb === "@" && param;
         theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
-      } else {
+      } else if (!isTopLevel) {
         const color = (0, import_color.getColor)(value, prefers);
         const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
         const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
         const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
         if (CONFIG.useVariable) {
-          CSS_VARS[CSSVar] = color;
+          if (CONFIG.useThemeSuffixedVars) CSS_VARS[CSSVar] = color;
           theme[param] = `var(${CSSVar})`;
         } else {
           theme[param] = color;
@@ -166,7 +243,7 @@ const setMediaTheme = (val, key, suffix, prefers) => {
         theme[`.${param}`] = { [param]: theme[param] };
       }
     }
-    if (theme.background || theme.color || theme.backgroundColor) {
+    if (!theme[".inversed"] && (theme.background || theme.color || theme.backgroundColor)) {
       theme[".inversed"] = {
         color: theme.background || theme.backgroundColor,
         background: theme.color
@@ -188,9 +265,7 @@ const recursiveTheme = (val) => {
     const symb = param.slice(0, 1);
     if ((0, import_utils.isObjectLike)(val[param])) {
       if (symb === "@") {
-        const query = CONFIG.MEDIA[param.slice(1)];
-        const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-        obj[media] = recursiveTheme(val[param]);
+        continue;
       } else if (symb === ":") {
         obj[`&${param}`] = recursiveTheme(val[param]);
       }
@@ -226,8 +301,10 @@ const getMediaTheme = (value, modifier) => {
   }
   const [themeName, ...themeModifiers] = (0, import_utils.isArray)(value) ? value : value.split(" ");
   let themeValue = activeConfig.THEME[themeName];
-  if (themeValue && (themeModifiers || modifier)) {
-    themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier);
+  if (themeValue && themeModifiers.length) {
+    themeValue = findModifier(themeValue, themeModifiers);
+  } else if (themeValue && modifier) {
+    themeValue = findModifier(themeValue, modifier);
   }
   const resolvedTheme = recursiveTheme(themeValue);
   return resolvedTheme;

package/dist/cjs/transforms/index.js

@@ -200,7 +200,7 @@ function transformSize(propertyName, val, props = {}, opts = {}) {
     }
     const shouldScaleBoxSize = props.scaleBoxSize;
     const isBoxSize = (0, import_system.checkIfBoxSize)(propertyName);
-    if (!shouldScaleBoxSize && isBoxSize) {
+    if (!shouldScaleBoxSize && isBoxSize && !opts.ratio) {
       value = (0, import_system.splitSpacedValue)(value);
     }
   }

package/dist/cjs/utils/font.js

@@ -25,12 +25,24 @@ __export(font_exports, {
   getFontFaceString: () => getFontFaceString,
   getFontFormat: () => getFontFormat,
   isGoogleFontsUrl: () => isGoogleFontsUrl,
+  resolveFileUrl: () => resolveFileUrl,
   setCustomFont: () => setCustomFont,
   setCustomFontMedia: () => setCustomFontMedia,
   setFontImport: () => setFontImport,
   setInCustomFontMedia: () => setInCustomFontMedia
 });
 module.exports = __toCommonJS(font_exports);
+const resolveFileUrl = (url, files) => {
+  if (!url || !files) return null;
+  try {
+    new URL(url);
+    return null;
+  } catch (e) {
+  }
+  const file = files[url];
+  if (file) return file.content && file.content.src;
+  return null;
+};
 const getDefaultOrFirstKey = (LIBRARY, key) => {
   if (LIBRARY[key]) return LIBRARY[key].value;
   if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
@@ -58,32 +70,35 @@ const setCustomFont = (name, url, weight, options = {}) => {
 };
 const setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
-const getFontFaceEach = (name, weights) => {
+const getFontFaceEach = (name, weights, files) => {
   const keys = Object.keys(weights);
   return keys.map((key) => {
     const { url, fontWeight } = weights[key];
-    return setCustomFont(name, url, fontWeight);
+    const resolvedUrl = resolveFileUrl(url, files) || url;
+    return setCustomFont(name, resolvedUrl, fontWeight);
   });
 };
 const getFontFace = (LIBRARY) => {
   const keys = Object.keys(LIBRARY);
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
 };
-const getFontFaceEachString = (name, weights) => {
+const getFontFaceEachString = (name, weights, files) => {
   if (weights && weights.isVariable) {
-    if (isGoogleFontsUrl(weights.url)) {
-      return setFontImport(weights.url);
+    const url2 = resolveFileUrl(weights.url, files) || weights.url;
+    if (isGoogleFontsUrl(url2)) {
+      return setFontImport(url2);
     }
-    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+    return setCustomFontMedia(name, url2, weights.fontWeight, {
       fontStretch: weights.fontStretch,
       fontDisplay: weights.fontDisplay || "swap"
     });
   }
   const isArr = weights[0];
-  if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
-  return setCustomFontMedia(name, weights.url);
+  if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
+  const url = resolveFileUrl(weights.url, files) || weights.url;
+  return setCustomFontMedia(name, url);
 };
-const getFontFaceString = (LIBRARY) => {
+const getFontFaceString = (LIBRARY, files) => {
   const keys = Object.keys(LIBRARY);
-  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
+  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value, files));
 };

package/dist/esm/factory.js

@@ -6,7 +6,8 @@ import {
 } from "@domql/utils";
 import * as CONF from "./defaultConfig";
 const CSS_VARS = {};
-const _CONF = CONF.default || CONF;
+const CSS_MEDIA_VARS = {};
+const _CONF = CONF;
 const _confLower = {};
 for (const key in _CONF) {
   const lower = key.toLowerCase();
@@ -17,7 +18,9 @@ const CONFIG = {
   verbose: false,
   useVariable: true,
   useReset: true,
+  globalTheme: "auto",
   CSS_VARS,
+  CSS_MEDIA_VARS,
   ..._confLower
 };
 const cachedConfig = deepClone(CONFIG);
@@ -42,6 +45,7 @@ const setActiveConfig = (newConfig) => {
 };
 export {
   CONFIG,
+  CSS_MEDIA_VARS,
   CSS_VARS,
   FACTORY,
   activateConfig,

package/dist/esm/set.js

@@ -86,11 +86,13 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     useDefaultConfig,
     SEMANTIC_ICONS,
     semantic_icons,
+    files,
     ...config
   } = recivedConfig;
   if (options.newConfig) {
     CONFIG = setActiveConfig(options.newConfig);
   }
+  if (files !== void 0) CONFIG.files = files;
   if (verbose !== void 0) CONFIG.verbose = verbose;
   if (useVariable !== void 0) CONFIG.useVariable = useVariable;
   if (useReset !== void 0) CONFIG.useReset = useReset;
@@ -99,6 +101,7 @@ 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 (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
   const _semanticIcons = SEMANTIC_ICONS || semantic_icons;
   if (_semanticIcons !== void 0) {

package/dist/esm/system/font.js

@@ -6,25 +6,29 @@ import {
   getFontFaceEach,
   isGoogleFontsUrl,
   setCustomFontMedia,
-  setFontImport
+  setFontImport,
+  resolveFileUrl
 } from "../utils";
 const setFont = (val, key) => {
+  const CONFIG = getActiveConfig();
   const CSSvar = `--font-${key}`;
   if (!val || isArray(val) && !val[0]) return;
   let fontFace;
   if (val.isVariable) {
-    if (isGoogleFontsUrl(val.url)) {
-      fontFace = setFontImport(val.url);
+    const url = resolveFileUrl(val.url, CONFIG.files) || val.url;
+    if (isGoogleFontsUrl(url)) {
+      fontFace = setFontImport(url);
     } else {
-      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+      fontFace = setCustomFontMedia(key, url, val.fontWeight, {
         fontStretch: val.fontStretch,
         fontDisplay: val.fontDisplay || "swap"
       });
     }
   } else if (val[0]) {
-    fontFace = getFontFaceEach(key, val);
+    fontFace = getFontFaceEach(key, val, CONFIG.files);
   } else {
-    fontFace = setCustomFontMedia(key, val.url);
+    const url = resolveFileUrl(val.url, CONFIG.files) || val.url;
+    fontFace = setCustomFontMedia(key, url);
   }
   return { var: CSSvar, value: val, fontFace };
 };

package/dist/esm/system/reset.js

@@ -9,7 +9,7 @@ const applyReset = (reset = {}) => {
       const configReset = RESET;
       const configTemplates = TYPOGRAPHY.templates;
       configReset.body = {
-        ...CONFIG.useDocumentTheme ? getMediaTheme("document", `@${CONFIG.globalTheme}`) : {},
+        ...CONFIG.useDocumentTheme ? getMediaTheme("document") : {},
         ...configTemplates.body
       };
       configReset.h1 = configTemplates.h1;
@@ -20,7 +20,7 @@ const applyReset = (reset = {}) => {
       configReset.h6 = configTemplates.h6;
     }
     const { body, ...templates } = TYPOGRAPHY.templates;
-    const globalTheme = CONFIG.useDocumentTheme ? getMediaTheme("document", `@${CONFIG.globalTheme}`) : {};
+    const globalTheme = CONFIG.useDocumentTheme ? getMediaTheme("document") : {};
     if (RESET.html) overwriteDeep(RESET.html, globalTheme);
     return deepMerge(merge(RESET, reset), {
       html: {

package/dist/esm/system/theme.js

@@ -120,24 +120,101 @@ const keySetters = {
   ":": (theme, value) => setSelectors(theme, value),
   ".": (theme, value) => setHelpers(theme, value)
 };
+const generateAutoVars = (schemes, varPrefix, CONFIG) => {
+  const { CSS_VARS } = CONFIG;
+  if (!CONFIG.CSS_MEDIA_VARS) CONFIG.CSS_MEDIA_VARS = {};
+  const MEDIA_VARS = CONFIG.CSS_MEDIA_VARS;
+  const globalTheme = CONFIG.globalTheme !== void 0 ? CONFIG.globalTheme : "auto";
+  const result = {};
+  const allKeys = /* @__PURE__ */ new Set();
+  for (const scheme in schemes) {
+    if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
+  }
+  for (const param of allKeys) {
+    const symb = param.slice(0, 1);
+    const hasObject = Object.values(schemes).some((s) => isObjectLike(s?.[param]));
+    if (symb === "." && hasObject) {
+      const helperName = param.slice(1);
+      const subSchemes = {};
+      for (const scheme in schemes) {
+        if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
+      }
+      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${helperName}`, CONFIG);
+    } else if (symb === ":" && hasObject) {
+      const pseudoName = param.replace(/^:+/, "");
+      const subSchemes = {};
+      for (const scheme in schemes) {
+        if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
+      }
+      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG);
+    } else if (symb !== "@" && symb !== "." && symb !== ":") {
+      const autoVar = `--theme-${varPrefix}-${param}`;
+      if (globalTheme === "auto") {
+        for (const scheme in schemes) {
+          const val = schemes[scheme]?.[param];
+          if (val === void 0) continue;
+          const color = getColor(val, `@${scheme}`);
+          if (color === void 0) continue;
+          const selector = `[data-theme="${scheme}"]`;
+          if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
+          MEDIA_VARS[selector][autoVar] = color;
+          if (scheme === "dark" || scheme === "light") {
+            const mq = `@media (prefers-color-scheme: ${scheme})`;
+            if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
+            MEDIA_VARS[mq][autoVar] = color;
+          }
+        }
+      } else {
+        const forced = String(globalTheme).replace(/^'|'$/g, "");
+        const source = schemes[forced]?.[param];
+        if (source !== void 0) {
+          const color = getColor(source, `@${forced}`);
+          if (color !== void 0) CSS_VARS[autoVar] = color;
+        }
+      }
+      result[param] = `var(${autoVar})`;
+      result[`.${param}`] = { [param]: result[param] };
+    }
+  }
+  if (result.background || result.color || result.backgroundColor) {
+    result[".inversed"] = {
+      color: result.background || result.backgroundColor,
+      background: result.color
+    };
+  }
+  return result;
+};
 const setMediaTheme = (val, key, suffix, prefers) => {
   const CONFIG = getActiveConfig();
   const { CSS_VARS } = CONFIG;
   const theme = { value: val };
+  const isTopLevel = !suffix && !prefers;
   if (isObjectLike(val)) {
+    if (isTopLevel && CONFIG.useVariable) {
+      const schemes = {};
+      for (const param in val) {
+        if (param.startsWith("@") && isObjectLike(val[param])) {
+          schemes[param.slice(1)] = val[param];
+        }
+      }
+      if (Object.keys(schemes).length) {
+        const autoResult = generateAutoVars(schemes, key, CONFIG);
+        Object.assign(theme, autoResult);
+      }
+    }
     for (const param in val) {
       const symb = param.slice(0, 1);
       const value = val[param];
       if (symb === "@" || symb === ":" || symb === ".") {
         const hasPrefers = symb === "@" && param;
         theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
-      } else {
+      } else if (!isTopLevel) {
         const color = getColor(value, prefers);
         const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
         const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
         const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
         if (CONFIG.useVariable) {
-          CSS_VARS[CSSVar] = color;
+          if (CONFIG.useThemeSuffixedVars) CSS_VARS[CSSVar] = color;
           theme[param] = `var(${CSSVar})`;
         } else {
           theme[param] = color;
@@ -145,7 +222,7 @@ const setMediaTheme = (val, key, suffix, prefers) => {
         theme[`.${param}`] = { [param]: theme[param] };
       }
     }
-    if (theme.background || theme.color || theme.backgroundColor) {
+    if (!theme[".inversed"] && (theme.background || theme.color || theme.backgroundColor)) {
       theme[".inversed"] = {
         color: theme.background || theme.backgroundColor,
         background: theme.color
@@ -167,9 +244,7 @@ const recursiveTheme = (val) => {
     const symb = param.slice(0, 1);
     if (isObjectLike(val[param])) {
       if (symb === "@") {
-        const query = CONFIG.MEDIA[param.slice(1)];
-        const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-        obj[media] = recursiveTheme(val[param]);
+        continue;
       } else if (symb === ":") {
         obj[`&${param}`] = recursiveTheme(val[param]);
       }
@@ -205,8 +280,10 @@ const getMediaTheme = (value, modifier) => {
   }
   const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
   let themeValue = activeConfig.THEME[themeName];
-  if (themeValue && (themeModifiers || modifier)) {
-    themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier);
+  if (themeValue && themeModifiers.length) {
+    themeValue = findModifier(themeValue, themeModifiers);
+  } else if (themeValue && modifier) {
+    themeValue = findModifier(themeValue, modifier);
   }
   const resolvedTheme = recursiveTheme(themeValue);
   return resolvedTheme;

package/dist/esm/transforms/index.js

@@ -182,7 +182,7 @@ function transformSize(propertyName, val, props = {}, opts = {}) {
     }
     const shouldScaleBoxSize = props.scaleBoxSize;
     const isBoxSize = checkIfBoxSize(propertyName);
-    if (!shouldScaleBoxSize && isBoxSize) {
+    if (!shouldScaleBoxSize && isBoxSize && !opts.ratio) {
       value = splitSpacedValue(value);
     }
   }