@webmate-studio/builder 0.2.115 → 0.2.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.115",
+  "version": "0.2.117",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [
@@ -24,6 +24,8 @@
     "./build-service.js": "./build-service.js",
     "./src/css-deduplicator.js": "./src/css-deduplicator.js",
     "./src/design-tokens.js": "./src/design-tokens.js",
+    "./src/template-processor.js": "./src/template-processor.js",
+    "./src/markdown.js": "./src/markdown.js",
     "./dist/motion-runtime.min.js": "./dist/motion-runtime.min.js"
   },
   "bin": {

package/src/design-tokens.js

@@ -54,7 +54,12 @@ function generateSemanticColorUtilities(tokens) {
 		'textAccentMuted': 'text-accent-muted',
 		'borderAccentBase': 'border-accent-default',
 		'borderAccentSubtle': 'border-accent-subtle',
-		'borderAccentMuted': 'border-accent-muted'
+		'borderAccentMuted': 'border-accent-muted',
+
+		// Text-on-background colors
+		'textOnPrimary': 'text-on-primary',
+		'textOnSecondary': 'text-on-secondary',
+		'textOnAccent': 'text-on-accent'
 	};
 
 	// Collect unique class names (deduplicate)
@@ -242,7 +247,12 @@ export const defaultDesignTokens = {
 		// Border Colors (Accent)
 		borderAccentBase: '#8b5cf6',     // violet-500
 		borderAccentSubtle: '#a78bfa',   // violet-400
-		borderAccentMuted: '#c4b5fd'     // violet-300
+		borderAccentMuted: '#c4b5fd',    // violet-300
+
+		// Text-on-Background Colors (for text on colored backgrounds)
+		textOnPrimary: '#ffffff',        // Text on bg-primary
+		textOnSecondary: '#ffffff',      // Text on bg-secondary
+		textOnAccent: '#ffffff'          // Text on bg-accent
 	},
 
 	typography: {
@@ -671,6 +681,11 @@ export function generateTailwindV4Theme(tokens) {
 		if (tokens.colors.borderSubtle) lines.push(`  --color-border-subtle: ${tokens.colors.borderSubtle};`);
 		if (tokens.colors.borderMuted) lines.push(`  --color-border-muted: ${tokens.colors.borderMuted};`);
 
+		// Text-on-background colors
+		if (tokens.colors.textOnPrimary) lines.push(`  --color-text-on-primary: ${tokens.colors.textOnPrimary};`);
+		if (tokens.colors.textOnSecondary) lines.push(`  --color-text-on-secondary: ${tokens.colors.textOnSecondary};`);
+		if (tokens.colors.textOnAccent) lines.push(`  --color-text-on-accent: ${tokens.colors.textOnAccent};`);
+
 		// Basic colors
 		if (tokens.colors.white) lines.push(`  --color-white: ${tokens.colors.white};`);
 		if (tokens.colors.black) lines.push(`  --color-black: ${tokens.colors.black};`);
@@ -1145,6 +1160,37 @@ export function generateTailwindConfig(tokens) {
 	};
 }
 
+/**
+ * Generate @import rules for Fontsource/Bunny Fonts used in the design tokens.
+ * Works in both browser (preview) and build contexts.
+ * Returns a CSS string with @import statements (or empty string if no web fonts).
+ */
+export function generateFontImports(tokens) {
+	const imports = [];
+	const processedFonts = new Set();
+
+	function processFontId(fontId) {
+		if (!fontId || processedFonts.has(fontId)) return;
+		processedFonts.add(fontId);
+
+		if (fontId.startsWith('fontsource:')) {
+			const fontsourceName = fontId.replace('fontsource:', '');
+			const fontFamily = fontsourceName
+				.split('-')
+				.map(word => word.charAt(0).toUpperCase() + word.slice(1))
+				.join(' ');
+			imports.push(`@import url('https://fonts.bunny.net/css?family=${fontFamily.replace(/\s+/g, '+')}:100,200,300,400,500,600,700,800,900&display=swap');`);
+		}
+	}
+
+	if (tokens?.typography?.fontHeadingId) processFontId(tokens.typography.fontHeadingId);
+	if (tokens?.typography?.fontBodyId) processFontId(tokens.typography.fontBodyId);
+	if (tokens?.typography?.fontMonoId) processFontId(tokens.typography.fontMonoId);
+	if (tokens?.typography?.fontAccentId) processFontId(tokens.typography.fontAccentId);
+
+	return imports.length > 0 ? imports.join('\n') + '\n\n' : '';
+}
+
 /**
  * Generate CSS Variables from Design Tokens
  */

package/src/index.js

@@ -6,7 +6,7 @@ import { deduplicateCSS } from './css-deduplicator.js';
 import { markdownToHtml, processMarkdownProps } from './markdown.js';
 import TemplateProcessor, { templateProcessor } from './template-processor.js';
 import { SafeHtml } from './safe-html.js';
-import { defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens } from './design-tokens.js';
+import { defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports } from './design-tokens.js';
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
@@ -19,4 +19,4 @@ function getMotionRuntime() {
 	return readFileSync(join(__dirname, '../dist/motion-runtime.min.js'), 'utf-8');
 }
 
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports };