@uniweb/build 0.7.6 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {

package/src/theme/css-generator.js

@@ -16,64 +16,82 @@ import { generatePalettes, formatOklch } from './shade-generator.js'
 // These map abstract concepts to specific palette values
 const DEFAULT_CONTEXT_TOKENS = {
   light: {
-    'bg': 'var(--neutral-50)',
-    'bg-subtle': 'var(--neutral-100)',
-    'bg-muted': 'var(--neutral-200)',
-    'text': 'var(--neutral-950)',
-    'text-muted': 'var(--neutral-600)',
-    'text-subtle': 'var(--neutral-500)',
+    'section': 'var(--neutral-50)',
+    'card': 'var(--neutral-100)',
+    'muted': 'var(--neutral-200)',
+    'body': 'var(--neutral-950)',
     'heading': 'var(--neutral-900)',
-    'link': 'var(--primary-600)',
-    'link-hover': 'var(--primary-700)',
+    'subtle': 'var(--neutral-600)',
     'border': 'var(--neutral-200)',
-    'border-muted': 'var(--neutral-100)',
     'ring': 'var(--primary-500)',
-    'btn-primary-bg': 'var(--primary-600)',
-    'btn-primary-text': 'white',
-    'btn-primary-hover': 'var(--primary-700)',
-    'btn-secondary-bg': 'var(--neutral-100)',
-    'btn-secondary-text': 'var(--neutral-900)',
-    'btn-secondary-hover': 'var(--neutral-200)',
+    'link': 'var(--primary-600)',
+    'link-hover': 'var(--primary-700)',
+    'primary': 'var(--primary-600)',
+    'primary-foreground': 'white',
+    'primary-hover': 'var(--primary-700)',
+    'secondary': 'var(--neutral-100)',
+    'secondary-foreground': 'var(--neutral-900)',
+    'secondary-hover': 'var(--neutral-200)',
+    'success': '#16a34a',
+    'success-subtle': '#f0fdf4',
+    'warning': '#d97706',
+    'warning-subtle': '#fffbeb',
+    'error': '#dc2626',
+    'error-subtle': '#fef2f2',
+    'info': '#2563eb',
+    'info-subtle': '#eff6ff',
   },
   medium: {
-    'bg': 'var(--neutral-100)',
-    'bg-subtle': 'var(--neutral-200)',
-    'bg-muted': 'var(--neutral-300)',
-    'text': 'var(--neutral-950)',
-    'text-muted': 'var(--neutral-700)',
-    'text-subtle': 'var(--neutral-600)',
+    'section': 'var(--neutral-100)',
+    'card': 'var(--neutral-200)',
+    'muted': 'var(--neutral-300)',
+    'body': 'var(--neutral-950)',
     'heading': 'var(--neutral-900)',
-    'link': 'var(--primary-600)',
-    'link-hover': 'var(--primary-700)',
+    'subtle': 'var(--neutral-700)',
     'border': 'var(--neutral-300)',
-    'border-muted': 'var(--neutral-200)',
     'ring': 'var(--primary-500)',
-    'btn-primary-bg': 'var(--primary-600)',
-    'btn-primary-text': 'white',
-    'btn-primary-hover': 'var(--primary-700)',
-    'btn-secondary-bg': 'var(--neutral-200)',
-    'btn-secondary-text': 'var(--neutral-900)',
-    'btn-secondary-hover': 'var(--neutral-300)',
+    'link': 'var(--primary-600)',
+    'link-hover': 'var(--primary-700)',
+    'primary': 'var(--primary-600)',
+    'primary-foreground': 'white',
+    'primary-hover': 'var(--primary-700)',
+    'secondary': 'var(--neutral-200)',
+    'secondary-foreground': 'var(--neutral-900)',
+    'secondary-hover': 'var(--neutral-300)',
+    'success': '#16a34a',
+    'success-subtle': '#f0fdf4',
+    'warning': '#d97706',
+    'warning-subtle': '#fffbeb',
+    'error': '#dc2626',
+    'error-subtle': '#fef2f2',
+    'info': '#2563eb',
+    'info-subtle': '#eff6ff',
   },
   dark: {
-    'bg': 'var(--neutral-900)',
-    'bg-subtle': 'var(--neutral-800)',
-    'bg-muted': 'var(--neutral-700)',
-    'text': 'var(--neutral-50)',
-    'text-muted': 'var(--neutral-300)',
-    'text-subtle': 'var(--neutral-400)',
+    'section': 'var(--neutral-900)',
+    'card': 'var(--neutral-800)',
+    'muted': 'var(--neutral-700)',
+    'body': 'var(--neutral-50)',
     'heading': 'white',
-    'link': 'var(--primary-400)',
-    'link-hover': 'var(--primary-300)',
+    'subtle': 'var(--neutral-400)',
     'border': 'var(--neutral-700)',
-    'border-muted': 'var(--neutral-800)',
     'ring': 'var(--primary-500)',
-    'btn-primary-bg': 'var(--primary-500)',
-    'btn-primary-text': 'white',
-    'btn-primary-hover': 'var(--primary-400)',
-    'btn-secondary-bg': 'var(--neutral-800)',
-    'btn-secondary-text': 'var(--neutral-100)',
-    'btn-secondary-hover': 'var(--neutral-700)',
+    'link': 'var(--primary-400)',
+    'link-hover': 'var(--primary-300)',
+    'primary': 'var(--primary-500)',
+    'primary-foreground': 'white',
+    'primary-hover': 'var(--primary-400)',
+    'secondary': 'var(--neutral-800)',
+    'secondary-foreground': 'var(--neutral-100)',
+    'secondary-hover': 'var(--neutral-700)',
+    'success': '#4ade80',
+    'success-subtle': '#052e16',
+    'warning': '#fbbf24',
+    'warning-subtle': '#451a03',
+    'error': '#f87171',
+    'error-subtle': '#450a0a',
+    'info': '#60a5fa',
+    'info-subtle': '#172554',
   },
 }
 
@@ -82,7 +100,7 @@ const DEFAULT_COLORS = {
   primary: '#3b82f6',   // Blue
   secondary: '#64748b', // Slate
   accent: '#8b5cf6',    // Purple
-  neutral: '#71717a',   // Zinc
+  neutral: '#78716c',   // Stone
 }
 
 // Shade levels for CSS variable generation
@@ -134,7 +152,7 @@ function generateContextCSS(context, tokens = {}) {
 
   const vars = generateVarDeclarations(mergedTokens)
 
-  return `.context-${context} {\n${vars}\n  background-color: var(--bg);\n}`
+  return `.context-${context} {\n${vars}\n  background-color: var(--section);\n}`
 }
 
 /**
@@ -148,17 +166,30 @@ function generateDarkSchemeCSS(config = {}) {
 
   // Dark scheme tokens - similar to dark context but at root level
   const darkTokens = {
-    'bg': 'var(--neutral-950)',
-    'bg-subtle': 'var(--neutral-900)',
-    'bg-muted': 'var(--neutral-800)',
-    'text': 'var(--neutral-50)',
-    'text-muted': 'var(--neutral-300)',
-    'text-subtle': 'var(--neutral-400)',
+    'section': 'var(--neutral-950)',
+    'card': 'var(--neutral-900)',
+    'muted': 'var(--neutral-800)',
+    'body': 'var(--neutral-50)',
     'heading': 'white',
+    'subtle': 'var(--neutral-400)',
+    'border': 'var(--neutral-800)',
+    'ring': 'var(--primary-500)',
     'link': 'var(--primary-400)',
     'link-hover': 'var(--primary-300)',
-    'border': 'var(--neutral-800)',
-    'border-muted': 'var(--neutral-900)',
+    'primary': 'var(--primary-500)',
+    'primary-foreground': 'white',
+    'primary-hover': 'var(--primary-400)',
+    'secondary': 'var(--neutral-800)',
+    'secondary-foreground': 'var(--neutral-100)',
+    'secondary-hover': 'var(--neutral-700)',
+    'success': '#4ade80',
+    'success-subtle': '#052e16',
+    'warning': '#fbbf24',
+    'warning-subtle': '#451a03',
+    'error': '#f87171',
+    'error-subtle': '#450a0a',
+    'info': '#60a5fa',
+    'info-subtle': '#172554',
   }
 
   const vars = generateVarDeclarations(darkTokens)

package/src/theme/processor.js

@@ -11,6 +11,31 @@
 import { isValidColor, generatePalettes } from './shade-generator.js'
 import { getDefaultColors, getDefaultContextTokens } from './css-generator.js'
 
+/**
+ * Named neutral presets mapping to Tailwind gray families
+ */
+const NEUTRAL_PRESETS = {
+  stone: '#78716c',
+  zinc: '#71717a',
+  gray: '#6b7280',
+  slate: '#64748b',
+  neutral: '#737373',
+}
+
+/**
+ * Default inline text styles (content-author markdown: [text]{emphasis})
+ * These reference semantic tokens so they adapt to context automatically
+ */
+const DEFAULT_INLINE = {
+  emphasis: {
+    color: 'var(--link)',
+    'font-weight': '600',
+  },
+  muted: {
+    color: 'var(--subtle)',
+  },
+}
+
 /**
  * Default appearance configuration
  */
@@ -84,6 +109,11 @@ function validateColors(colors) {
       continue
     }
 
+    // Accept neutral preset names (stone, zinc, gray, slate, neutral)
+    if (name === 'neutral' && NEUTRAL_PRESETS[value]) {
+      continue
+    }
+
     if (!isValidColor(value)) {
       errors.push(`Color "${name}" has invalid value: ${value}`)
     }
@@ -357,7 +387,12 @@ export function processTheme(rawConfig = {}, options = {}) {
 
   // Process colors
   const defaultColors = getDefaultColors()
-  const rawColors = rawConfig.colors || {}
+  const rawColors = { ...(rawConfig.colors || {}) }
+
+  // Resolve named neutral presets to hex values
+  if (typeof rawColors.neutral === 'string' && NEUTRAL_PRESETS[rawColors.neutral]) {
+    rawColors.neutral = NEUTRAL_PRESETS[rawColors.neutral]
+  }
 
   // Filter to only valid colors (skip invalid ones in non-strict mode)
   const validColors = {}
@@ -382,7 +417,7 @@ export function processTheme(rawConfig = {}, options = {}) {
     warnings.push('No primary color specified, using default blue (#3b82f6)')
   }
   if (!rawConfig.colors?.neutral) {
-    warnings.push('No neutral color specified, using default zinc (#71717a)')
+    warnings.push('No neutral color specified, using default stone (#78716c)')
   }
 
   // Process contexts
@@ -426,7 +461,8 @@ export function processTheme(rawConfig = {}, options = {}) {
   const background = rawConfig.background || null
 
   // Inline text styles (semantic names → CSS declarations)
-  const inline = rawConfig.inline || null
+  // Merge framework defaults with user overrides (user values win)
+  const inline = { ...DEFAULT_INLINE, ...(rawConfig.inline || {}) }
 
   const config = {
     colors,      // Raw colors for CSS generator