@uniweb/theming 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/theming",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Theming utilities for the Uniweb platform — shade generation, CSS generation, theme processing",
   "type": "module",
   "exports": {
@@ -27,7 +27,7 @@
     "node": ">=20.19"
   },
   "devDependencies": {
-    "vitest": "^3.2.1"
+    "vitest": "^4.1.7"
   },
   "scripts": {
     "test": "vitest run"

package/src/css-generator.js

@@ -396,13 +396,29 @@ function generateFontCSS(fonts = {}) {
   }
 }
 
+// Theme token names reserved by the theming engine — foundation vars must not use these
+const RESERVED_VAR_NAMES = new Set([
+  // Semantic color tokens
+  'section', 'card', 'muted', 'body', 'heading', 'subtle',
+  'border', 'ring', 'link', 'link-hover', 'accent',
+  // Action tokens
+  'primary', 'primary-foreground', 'primary-hover', 'primary-border',
+  'secondary', 'secondary-foreground', 'secondary-hover', 'secondary-border',
+  // Status tokens
+  'success', 'success-subtle', 'warning', 'warning-subtle',
+  'error', 'error-subtle', 'info', 'info-subtle',
+])
+
+// Palette shade pattern: primary-50, neutral-950, accent-300, etc.
+const PALETTE_SHADE_RE = /^(primary|secondary|accent|neutral)-\d+$/
+
 /**
  * Generate foundation-specific CSS variables
  *
  * @param {Object} vars - Foundation variables from vars.js
  * @returns {string} CSS variable declarations
  */
-function generateFoundationVars(vars = {}) {
+export function generateFoundationVars(vars = {}) {
   if (!vars || Object.keys(vars).length === 0) {
     return ''
   }
@@ -410,9 +426,15 @@ function generateFoundationVars(vars = {}) {
   const declarations = []
 
   for (const [name, config] of Object.entries(vars)) {
+    if (RESERVED_VAR_NAMES.has(name) || PALETTE_SHADE_RE.test(name)) {
+      console.warn(
+        `Warning: Foundation var '${name}' collides with a theme token. ` +
+        `Rename it to avoid unexpected behavior (e.g., '${name}-value' or '${name}-size').`
+      )
+    }
     const value = typeof config === 'object' ? config.default : config
     if (value !== undefined) {
-      declarations.push(`  --foundation-${name}: ${value};`)
+      declarations.push(`  --${name}: ${value};`)
     }
   }
 

package/src/index.js

@@ -22,6 +22,7 @@ export {
   generateThemeCSS,
   generateContextCSS,
   generatePaletteVars,
+  generateFoundationVars,
   getDefaultContextTokens,
   getDefaultColors,
   extractUsedFamilies,

package/src/section-overrides.js

@@ -86,7 +86,7 @@ function buildFoundationVars(styles) {
   const vars = []
   for (const [name, value] of Object.entries(styles)) {
     if (value === '' || value == null || typeof value === 'object') continue
-    vars.push(`  --foundation-${name}: ${value};`)
+    vars.push(`  --${name}: ${value};`)
   }
   return vars
 }