@uniweb/theming 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/theming",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Theming utilities for the Uniweb platform — shade generation, CSS generation, theme processing",
   "type": "module",
   "exports": {

package/src/processor.js

@@ -115,36 +115,6 @@ function normalizeApplyTo(applyTo) {
   return cleaned.length ? cleaned : null
 }
 
-/**
- * Default code block theme configuration
- * Uses Shiki CSS variable names for compatibility
- * These values are NOT converted to CSS here - the kit's Code component
- * injects them at runtime only when code blocks are used (tree-shaking)
- */
-const DEFAULT_CODE_THEME = {
-  // Background and foreground
-  background: '#1e1e2e',      // Dark editor background
-  foreground: '#cdd6f4',      // Default text color
-
-  // Syntax highlighting colors (Shiki token variables)
-  keyword: '#cba6f7',         // Purple - keywords (if, else, function)
-  string: '#a6e3a1',          // Green - strings
-  number: '#fab387',          // Orange - numbers
-  comment: '#6c7086',         // Gray - comments
-  function: '#89b4fa',        // Blue - function names
-  variable: '#f5e0dc',        // Light pink - variables
-  operator: '#89dceb',        // Cyan - operators
-  punctuation: '#9399b2',     // Gray - punctuation
-  type: '#f9e2af',            // Yellow - types
-  constant: '#f38ba8',        // Red - constants
-  property: '#94e2d5',        // Teal - properties
-  tag: '#89b4fa',             // Blue - HTML/JSX tags
-  attribute: '#f9e2af',       // Yellow - attributes
-
-  // UI elements
-  lineNumber: '#6c7086',      // Line number color
-  selection: '#45475a',       // Selection background
-}
 
 /**
  * Validate color configuration
@@ -378,6 +348,49 @@ export function validateThemeConfig(config) {
   }
 }
 
+/**
+ * Merge inline text styles over the framework defaults, property by property.
+ *
+ * Everything else in theme.yml merges at the granularity of the leaf value —
+ * `contexts[name]` merges your tokens into the default context object, `colors`
+ * and `appearance` merge per key. This does the same one level down, so a site
+ * declares only the deltas:
+ *
+ *   inline:
+ *     accent:
+ *       font-weight: inherit    # keeps the default colour
+ *
+ * A shallow merge replaced the whole style object instead, so the example above
+ * silently produced `span[accent] { font-weight: inherit }` with no colour at
+ * all, and accented text rendered in the surrounding heading colour. The failure
+ * was subtractive and invisible in the config — you had to know what the default
+ * contained to notice it was gone. Three of the shipped templates carried a
+ * verbatim restatement of the default `accent` style purely to work around this.
+ *
+ * To *drop* a default property rather than change it, give it a neutral CSS
+ * value — `font-weight: inherit` to follow the surrounding text, or `initial` /
+ * `unset` / `revert`. Setting a whole style to null still removes it entirely
+ * (the CSS generator skips non-object entries).
+ *
+ * @param {Object} defaults - DEFAULT_INLINE
+ * @param {Object} [overrides] - rawConfig.inline
+ * @returns {Object} merged style map
+ */
+function mergeInlineStyles(defaults, overrides) {
+  const merged = { ...defaults }
+
+  for (const [name, style] of Object.entries(overrides || {})) {
+    // Non-objects (null/false) pass through so a site can delete a default
+    // style outright; anything else layers over the default of the same name.
+    merged[name] =
+      style && typeof style === 'object' && !Array.isArray(style)
+        ? { ...(defaults[name] || {}), ...style }
+        : style
+  }
+
+  return merged
+}
+
 /**
  * Normalize appearance configuration
  *
@@ -650,17 +663,20 @@ export function processTheme(rawConfig = {}, options = {}) {
   // Process code block theme
   // These values are stored for runtime injection by kit's Code component
   // (not converted to CSS here - enables tree-shaking when code blocks aren't used)
-  const code = {
-    ...DEFAULT_CODE_THEME,
-    ...(rawConfig.code || {}),
-  }
+  // Passed through exactly as declared — no defaults filled in.
+  //
+  // A default palette here would defeat the point of the setting downstream: a
+  // site naming a bundled theme and overriding one colour would arrive carrying
+  // fifteen, and the theme it named would be overridden in full by values it
+  // never asked for. Whoever renders code owns the default; this only carries
+  // what the site said.
+  const code = rawConfig.code ?? null
 
   // Site background (pass through as CSS value)
   const background = rawConfig.background || null
 
   // Inline text styles (semantic names → CSS declarations)
-  // Merge framework defaults with user overrides (user values win)
-  const inline = { ...DEFAULT_INLINE, ...(rawConfig.inline || {}) }
+  const inline = mergeInlineStyles(DEFAULT_INLINE, rawConfig.inline)
 
   const config = {
     colors,      // Raw colors for CSS generator