@marvalt/dstyler 0.1.3 → 0.1.6

package/README.md

@@ -9,6 +9,7 @@ Design system package for styling WordPress content with zero-config templates.
 - Maps parsed WordPress sections → React templates
 - Ensures consistent responsive styling across the site
 - Renders blocks (text, images, buttons, forms) inside sections
+- Provides utilities to bridge design tokens with WordPress color mapping
 
 ## Installation
 
@@ -18,6 +19,8 @@ npm install @marvalt/dstyler
 
 ## Usage
 
+### Basic Usage
+
 ```tsx
 import { ThemeProvider, StyledPage } from '@marvalt/dstyler';
 import { getThemeStyles } from '@marvalt/wadapter';
@@ -27,8 +30,47 @@ import { getThemeStyles } from '@marvalt/wadapter';
 </ThemeProvider>
 ```
 
+### Creating Color Mapper from Design Tokens
+
+Bridge dstyler design tokens with wparser's color mapping system:
+
+```tsx
+import { createColorMapperFromTokens } from '@marvalt/dstyler';
+import { createEnhancedRegistry } from '@marvalt/wparser';
+import { loadTheme } from '@/config/themes';
+
+// Get your design tokens
+const tokens = await loadTheme();
+
+// Generate colorMapper from tokens
+const colorMapper = createColorMapperFromTokens(tokens, {
+  // Optional overrides for specific WordPress color names
+  'accent-6': 'bg-[#4a90a4] text-white',
+});
+
+// Use with wparser registry
+const registry = createEnhancedRegistry(mappings, undefined, colorMapper);
+```
+
+### Using Semantic Tailwind Classes
+
+If your Tailwind config has semantic colors defined (primary, secondary, etc.):
+
+```tsx
+import { createColorMapperWithSemanticClasses } from '@marvalt/dstyler';
+
+const colorMapper = createColorMapperWithSemanticClasses(tokens, {
+  'accent-1': 'bg-primary text-primary-foreground',
+  'accent-2': 'bg-secondary text-secondary-foreground',
+});
+```
+
 ## License
 
 GPL-3.0-or-later
 
 
+
+
+
+

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ComponentType } from 'react';
-import { WordPressBlock, ComponentRegistry } from '@marvalt/wparser';
+import { WordPressBlock, ComponentRegistry, ColorMapper } from '@marvalt/wparser';
 
 /**
  * @license GPL-3.0-or-later
@@ -67,9 +67,18 @@ interface ThemeStyles {
  */
 
 interface ThemeProviderProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     wpStyles?: ThemeStyles;
+    customTokens?: DesignTokens;
 }
+/**
+ * ThemeProvider - Provides design tokens to the application
+ *
+ * Priority order:
+ * 1. customTokens (highest priority - overrides everything)
+ * 2. WordPress styles (converted to tokens)
+ * 3. Default tokens (fallback)
+ */
 declare const ThemeProvider: React.FC<ThemeProviderProps>;
 
 /**
@@ -284,5 +293,66 @@ interface FooterMinimalProps {
 }
 declare const FooterMinimal: React.FC<FooterMinimalProps>;
 
-export { AutoBlock, AutoSection, FooterMinimal, HeroDefault, SectionBase, SectionWave, StyledPage, ThemeProvider, convertWordPressToTokens, defaultTokens, detectSections, determineSectionStyle, injectCSSVariables, selectBlockRenderer, selectTemplate };
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+/**
+ * Responsive utility functions
+ */
+declare function getResponsiveValue(mobile: string | number, tablet?: string | number, desktop?: string | number): string;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+/**
+ * Create a colorMapper from design tokens
+ *
+ * This utility helps bridge dstyler design tokens with wparser's color mapping system.
+ * It generates a ColorMapper function that maps WordPress theme color names to CSS classes
+ * based on your design tokens.
+ *
+ * @param tokens - Design tokens containing color definitions
+ * @param overrides - Optional overrides for specific WordPress color names
+ * @returns A ColorMapper function compatible with wparser
+ *
+ * @example
+ * ```typescript
+ * import { createColorMapperFromTokens } from '@marvalt/dstyler';
+ * import { loadTheme } from '@/config/themes';
+ *
+ * const tokens = await loadTheme();
+ * const colorMapper = createColorMapperFromTokens(tokens, {
+ *   'accent-6': 'bg-[#4a90a4] text-white', // Custom override
+ * });
+ * ```
+ */
+declare function createColorMapperFromTokens(tokens: DesignTokens, overrides?: Record<string, string>): ColorMapper;
+/**
+ * Create a colorMapper with semantic Tailwind classes
+ *
+ * Alternative version that uses semantic Tailwind classes (bg-primary, bg-secondary, etc.)
+ * instead of arbitrary values. Use this if your Tailwind config has these colors defined.
+ *
+ * @param tokens - Design tokens (used for reference, but classes are semantic)
+ * @param overrides - Optional overrides for specific WordPress color names
+ * @returns A ColorMapper function compatible with wparser
+ *
+ * @example
+ * ```typescript
+ * const colorMapper = createColorMapperWithSemanticClasses(tokens, {
+ *   'accent-1': 'bg-primary text-primary-foreground',
+ *   'accent-2': 'bg-secondary text-secondary-foreground',
+ * });
+ * ```
+ */
+declare function createColorMapperWithSemanticClasses(tokens: DesignTokens, overrides?: Record<string, string>): ColorMapper;
+
+export { AutoBlock, AutoSection, FooterMinimal, HeroDefault, SectionBase, SectionWave, StyledPage, ThemeProvider, convertWordPressToTokens, createColorMapperFromTokens, createColorMapperWithSemanticClasses, defaultTokens, detectSections, determineSectionStyle, getResponsiveValue, injectCSSVariables, selectBlockRenderer, selectTemplate };
 export type { AutoBlockProps, AutoSectionProps, BlockRenderer, BlockRendererProps, DesignTokens, FooterMinimalProps, HeroDefaultProps, Section, SectionBaseProps, SectionStyle, SectionWaveProps, StyledPageProps, TemplateComponent, ThemeProviderProps, ThemeStyles, WordPressPage };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.esm.js

@@ -1,4 +1,170 @@
-import require$$0, { useEffect } from 'react';
+import React, { useEffect } from 'react';
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+const defaultTokens = {
+    colors: {
+        primary: '#1a73e8',
+        secondary: '#34a853',
+        background: '#ffffff',
+        text: '#222222',
+        default: '#ffffff',
+        alternate: '#f5f5f5',
+        highlight: '#e8f0fe',
+    },
+    spacing: {
+        sm: 8,
+        md: 16,
+        lg: 32,
+        xl: 64,
+    },
+    typography: {
+        body: 'Inter, sans-serif',
+        heading: 'Inter, sans-serif',
+        scale: 1.2,
+    },
+};
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+/**
+ * Convert WordPress theme styles to design tokens
+ */
+function convertWordPressToTokens(wpStyles) {
+    if (!wpStyles) {
+        return defaultTokens;
+    }
+    const tokens = {
+        ...defaultTokens,
+        colors: {
+            ...defaultTokens.colors,
+            ...(wpStyles.colors?.primary && { primary: wpStyles.colors.primary }),
+            ...(wpStyles.colors?.secondary && { secondary: wpStyles.colors.secondary }),
+            ...(wpStyles.colors?.text && { text: wpStyles.colors.text }),
+            ...(wpStyles.colors?.background && {
+                background: wpStyles.colors.background,
+                default: wpStyles.colors.background,
+            }),
+        },
+        typography: {
+            ...defaultTokens.typography,
+            ...(wpStyles.typography?.heading_font_family && {
+                heading: wpStyles.typography.heading_font_family
+            }),
+            ...(wpStyles.typography?.body_font_family && {
+                body: wpStyles.typography.body_font_family
+            }),
+        },
+    };
+    // Generate alternate and highlight colors from primary/background
+    if (tokens.colors.primary && tokens.colors.background) {
+        // Alternate: slightly darker/lighter than background
+        tokens.colors.alternate = adjustBrightness(tokens.colors.background, -0.05);
+        // Highlight: tinted with primary color
+        tokens.colors.highlight = blendColors(tokens.colors.background, tokens.colors.primary, 0.1);
+    }
+    return tokens;
+}
+/**
+ * Adjust brightness of a hex color
+ */
+function adjustBrightness(hex, amount) {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, Math.min(255, ((num >> 16) & 0xff) + (amount * 255)));
+    const g = Math.max(0, Math.min(255, ((num >> 8) & 0xff) + (amount * 255)));
+    const b = Math.max(0, Math.min(255, (num & 0xff) + (amount * 255)));
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+}
+/**
+ * Blend two colors
+ */
+function blendColors(color1, color2, ratio) {
+    const c1 = hexToRgb(color1);
+    const c2 = hexToRgb(color2);
+    if (!c1 || !c2)
+        return color1;
+    const r = Math.round(c1.r + (c2.r - c1.r) * ratio);
+    const g = Math.round(c1.g + (c2.g - c1.g) * ratio);
+    const b = Math.round(c1.b + (c2.b - c1.b) * ratio);
+    return `rgb(${r}, ${g}, ${b})`;
+}
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+/**
+ * Inject CSS variables from design tokens into the document
+ */
+function injectCSSVariables(tokens) {
+    if (typeof document === 'undefined')
+        return;
+    const root = document.documentElement;
+    // Colors
+    root.style.setProperty('--dstyler-color-primary', tokens.colors.primary);
+    root.style.setProperty('--dstyler-color-secondary', tokens.colors.secondary);
+    root.style.setProperty('--dstyler-color-background', tokens.colors.background);
+    root.style.setProperty('--dstyler-color-text', tokens.colors.text);
+    root.style.setProperty('--dstyler-color-default', tokens.colors.default);
+    root.style.setProperty('--dstyler-color-alternate', tokens.colors.alternate);
+    root.style.setProperty('--dstyler-color-highlight', tokens.colors.highlight);
+    // Spacing
+    root.style.setProperty('--dstyler-spacing-sm', `${tokens.spacing.sm}px`);
+    root.style.setProperty('--dstyler-spacing-md', `${tokens.spacing.md}px`);
+    root.style.setProperty('--dstyler-spacing-lg', `${tokens.spacing.lg}px`);
+    root.style.setProperty('--dstyler-spacing-xl', `${tokens.spacing.xl}px`);
+    // Typography
+    root.style.setProperty('--dstyler-font-body', tokens.typography.body);
+    root.style.setProperty('--dstyler-font-heading', tokens.typography.heading);
+    root.style.setProperty('--dstyler-font-scale', tokens.typography.scale.toString());
+}
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+/**
+ * ThemeProvider - Provides design tokens to the application
+ *
+ * Priority order:
+ * 1. customTokens (highest priority - overrides everything)
+ * 2. WordPress styles (converted to tokens)
+ * 3. Default tokens (fallback)
+ */
+const ThemeProvider = ({ children, wpStyles, customTokens }) => {
+    useEffect(() => {
+        // Use custom tokens if provided, otherwise convert WordPress styles
+        const tokens = customTokens || convertWordPressToTokens(wpStyles);
+        injectCSSVariables(tokens);
+    }, [wpStyles, customTokens]);
+    // Return children if provided, otherwise return null (theme still applies via useEffect)
+    if (children === undefined || children === null) {
+        return null;
+    }
+    return React.createElement(React.Fragment, null, children);
+};
 
 var jsxRuntime = {exports: {}};
 
@@ -336,7 +502,7 @@ function requireReactJsxRuntime_development () {
 	        object.$$typeof === REACT_ELEMENT_TYPE
 	      );
 	    }
-	    var React = require$$0,
+	    var React$1 = React,
 	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
 	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -352,7 +518,7 @@ function requireReactJsxRuntime_development () {
 	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
 	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
 	      ReactSharedInternals =
-	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	        React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
 	      hasOwnProperty = Object.prototype.hasOwnProperty,
 	      isArrayImpl = Array.isArray,
 	      createTask = console.createTask
@@ -360,15 +526,15 @@ function requireReactJsxRuntime_development () {
 	        : function () {
 	            return null;
 	          };
-	    React = {
+	    React$1 = {
 	      react_stack_bottom_frame: function (callStackForError) {
 	        return callStackForError();
 	      }
 	    };
 	    var specialPropKeyWarningShown;
 	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
-	      React,
+	    var unknownOwnerDebugStack = React$1.react_stack_bottom_frame.bind(
+	      React$1,
 	      UnknownOwner
 	    )();
 	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -414,153 +580,6 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-/**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
-const defaultTokens = {
-    colors: {
-        primary: '#1a73e8',
-        secondary: '#34a853',
-        background: '#ffffff',
-        text: '#222222',
-        default: '#ffffff',
-        alternate: '#f5f5f5',
-        highlight: '#e8f0fe',
-    },
-    spacing: {
-        sm: 8,
-        md: 16,
-        lg: 32,
-        xl: 64,
-    },
-    typography: {
-        body: 'Inter, sans-serif',
-        heading: 'Inter, sans-serif',
-        scale: 1.2,
-    },
-};
-
-/**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
-/**
- * Convert WordPress theme styles to design tokens
- */
-function convertWordPressToTokens(wpStyles) {
-    if (!wpStyles) {
-        return defaultTokens;
-    }
-    const tokens = {
-        ...defaultTokens,
-        colors: {
-            ...defaultTokens.colors,
-            ...(wpStyles.colors?.primary && { primary: wpStyles.colors.primary }),
-            ...(wpStyles.colors?.secondary && { secondary: wpStyles.colors.secondary }),
-            ...(wpStyles.colors?.text && { text: wpStyles.colors.text }),
-            ...(wpStyles.colors?.background && {
-                background: wpStyles.colors.background,
-                default: wpStyles.colors.background,
-            }),
-        },
-        typography: {
-            ...defaultTokens.typography,
-            ...(wpStyles.typography?.heading_font_family && {
-                heading: wpStyles.typography.heading_font_family
-            }),
-            ...(wpStyles.typography?.body_font_family && {
-                body: wpStyles.typography.body_font_family
-            }),
-        },
-    };
-    // Generate alternate and highlight colors from primary/background
-    if (tokens.colors.primary && tokens.colors.background) {
-        // Alternate: slightly darker/lighter than background
-        tokens.colors.alternate = adjustBrightness(tokens.colors.background, -0.05);
-        // Highlight: tinted with primary color
-        tokens.colors.highlight = blendColors(tokens.colors.background, tokens.colors.primary, 0.1);
-    }
-    return tokens;
-}
-/**
- * Adjust brightness of a hex color
- */
-function adjustBrightness(hex, amount) {
-    const num = parseInt(hex.replace('#', ''), 16);
-    const r = Math.max(0, Math.min(255, ((num >> 16) & 0xff) + (amount * 255)));
-    const g = Math.max(0, Math.min(255, ((num >> 8) & 0xff) + (amount * 255)));
-    const b = Math.max(0, Math.min(255, (num & 0xff) + (amount * 255)));
-    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
-}
-/**
- * Blend two colors
- */
-function blendColors(color1, color2, ratio) {
-    const c1 = hexToRgb(color1);
-    const c2 = hexToRgb(color2);
-    if (!c1 || !c2)
-        return color1;
-    const r = Math.round(c1.r + (c2.r - c1.r) * ratio);
-    const g = Math.round(c1.g + (c2.g - c1.g) * ratio);
-    const b = Math.round(c1.b + (c2.b - c1.b) * ratio);
-    return `rgb(${r}, ${g}, ${b})`;
-}
-function hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16),
-        }
-        : null;
-}
-
-/**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
-/**
- * Inject CSS variables from design tokens into the document
- */
-function injectCSSVariables(tokens) {
-    if (typeof document === 'undefined')
-        return;
-    const root = document.documentElement;
-    // Colors
-    root.style.setProperty('--dstyler-color-primary', tokens.colors.primary);
-    root.style.setProperty('--dstyler-color-secondary', tokens.colors.secondary);
-    root.style.setProperty('--dstyler-color-background', tokens.colors.background);
-    root.style.setProperty('--dstyler-color-text', tokens.colors.text);
-    root.style.setProperty('--dstyler-color-default', tokens.colors.default);
-    root.style.setProperty('--dstyler-color-alternate', tokens.colors.alternate);
-    root.style.setProperty('--dstyler-color-highlight', tokens.colors.highlight);
-    // Spacing
-    root.style.setProperty('--dstyler-spacing-sm', `${tokens.spacing.sm}px`);
-    root.style.setProperty('--dstyler-spacing-md', `${tokens.spacing.md}px`);
-    root.style.setProperty('--dstyler-spacing-lg', `${tokens.spacing.lg}px`);
-    root.style.setProperty('--dstyler-spacing-xl', `${tokens.spacing.xl}px`);
-    // Typography
-    root.style.setProperty('--dstyler-font-body', tokens.typography.body);
-    root.style.setProperty('--dstyler-font-heading', tokens.typography.heading);
-    root.style.setProperty('--dstyler-font-scale', tokens.typography.scale.toString());
-}
-
-const ThemeProvider = ({ children, wpStyles }) => {
-    useEffect(() => {
-        const tokens = convertWordPressToTokens(wpStyles);
-        injectCSSVariables(tokens);
-    }, [wpStyles]);
-    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
-};
-
 /**
  * @license GPL-3.0-or-later
  *
@@ -927,5 +946,114 @@ const StyledPage = ({ page, registry }) => {
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: styledSections.map((section) => (jsxRuntimeExports.jsx(AutoSection, { section: section, registry: registry }, section.id))) }));
 };
 
-export { AutoBlock, AutoSection, FooterMinimal, HeroDefault, SectionBase, SectionWave, StyledPage, ThemeProvider, convertWordPressToTokens, defaultTokens, detectSections, determineSectionStyle, injectCSSVariables, selectBlockRenderer, selectTemplate };
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+/**
+ * Responsive utility functions
+ */
+function getResponsiveValue(mobile, tablet, desktop) {
+    if (!tablet && !desktop) {
+        return typeof mobile === 'number' ? `${mobile}px` : mobile;
+    }
+    // For now, return mobile value
+    // In the future, this could use CSS custom properties with media queries
+    return typeof mobile === 'number' ? `${mobile}px` : mobile;
+}
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+/**
+ * Create a colorMapper from design tokens
+ *
+ * This utility helps bridge dstyler design tokens with wparser's color mapping system.
+ * It generates a ColorMapper function that maps WordPress theme color names to CSS classes
+ * based on your design tokens.
+ *
+ * @param tokens - Design tokens containing color definitions
+ * @param overrides - Optional overrides for specific WordPress color names
+ * @returns A ColorMapper function compatible with wparser
+ *
+ * @example
+ * ```typescript
+ * import { createColorMapperFromTokens } from '@marvalt/dstyler';
+ * import { loadTheme } from '@/config/themes';
+ *
+ * const tokens = await loadTheme();
+ * const colorMapper = createColorMapperFromTokens(tokens, {
+ *   'accent-6': 'bg-[#4a90a4] text-white', // Custom override
+ * });
+ * ```
+ */
+function createColorMapperFromTokens(tokens, overrides) {
+    return (wpColorName) => {
+        // Use overrides first if provided
+        if (wpColorName && overrides?.[wpColorName]) {
+            return overrides[wpColorName];
+        }
+        // Map WordPress theme colors to design tokens
+        // Using Tailwind's arbitrary value syntax for hex colors
+        const defaultMap = {
+            'base': `bg-[${tokens.colors.background}]`,
+            'contrast': `bg-[${tokens.colors.text}] text-[${tokens.colors.background}]`,
+            'transparent': 'bg-transparent',
+            'accent-1': `bg-[${tokens.colors.primary}] text-white`,
+            'accent-2': `bg-[${tokens.colors.secondary}] text-white`,
+            'accent-3': `bg-[${tokens.colors.highlight}] text-[${tokens.colors.text}]`,
+            'accent-4': `bg-[${tokens.colors.alternate}] text-[${tokens.colors.text}]`,
+            'accent-5': `bg-[${tokens.colors.default}] text-[${tokens.colors.text}]`,
+            'accent-6': `bg-[${tokens.colors.primary}] text-white`, // Fallback to primary if accent-6 not defined
+        };
+        return wpColorName ? defaultMap[wpColorName] || null : null;
+    };
+}
+/**
+ * Create a colorMapper with semantic Tailwind classes
+ *
+ * Alternative version that uses semantic Tailwind classes (bg-primary, bg-secondary, etc.)
+ * instead of arbitrary values. Use this if your Tailwind config has these colors defined.
+ *
+ * @param tokens - Design tokens (used for reference, but classes are semantic)
+ * @param overrides - Optional overrides for specific WordPress color names
+ * @returns A ColorMapper function compatible with wparser
+ *
+ * @example
+ * ```typescript
+ * const colorMapper = createColorMapperWithSemanticClasses(tokens, {
+ *   'accent-1': 'bg-primary text-primary-foreground',
+ *   'accent-2': 'bg-secondary text-secondary-foreground',
+ * });
+ * ```
+ */
+function createColorMapperWithSemanticClasses(tokens, overrides) {
+    return (wpColorName) => {
+        // Use overrides first if provided
+        if (wpColorName && overrides?.[wpColorName]) {
+            return overrides[wpColorName];
+        }
+        // Map WordPress theme colors to semantic Tailwind classes
+        // Assumes your Tailwind config has primary, secondary, muted, etc. defined
+        const defaultMap = {
+            'base': 'bg-white',
+            'contrast': 'bg-gray-900 text-white',
+            'transparent': 'bg-transparent',
+            'accent-1': 'bg-primary text-primary-foreground',
+            'accent-2': 'bg-secondary text-secondary-foreground',
+            'accent-3': 'bg-muted text-muted-foreground',
+            'accent-4': 'bg-gray-200 text-gray-900',
+            'accent-5': 'bg-gray-100 text-gray-900',
+            'accent-6': 'bg-primary text-primary-foreground', // Fallback
+        };
+        return wpColorName ? defaultMap[wpColorName] || null : null;
+    };
+}
+
+export { AutoBlock, AutoSection, FooterMinimal, HeroDefault, SectionBase, SectionWave, StyledPage, ThemeProvider, convertWordPressToTokens, createColorMapperFromTokens, createColorMapperWithSemanticClasses, defaultTokens, detectSections, determineSectionStyle, getResponsiveValue, injectCSSVariables, selectBlockRenderer, selectTemplate };
 //# sourceMappingURL=index.esm.js.map