@marvalt/dstyler 0.1.3 → 0.1.6

package/dist/index.js

@@ -1,6 +1,172 @@
 'use strict';
 
-var require$$0 = require('react');
+var React = require('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 }) => {
+    React.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: {}};
 
@@ -338,7 +504,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"),
@@ -354,7 +520,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
@@ -362,15 +528,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));
@@ -416,153 +582,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 }) => {
-    require$$0.useEffect(() => {
-        const tokens = convertWordPressToTokens(wpStyles);
-        injectCSSVariables(tokens);
-    }, [wpStyles]);
-    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
-};
-
 /**
  * @license GPL-3.0-or-later
  *
@@ -929,6 +948,115 @@ const StyledPage = ({ page, registry }) => {
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: styledSections.map((section) => (jsxRuntimeExports.jsx(AutoSection, { section: section, registry: registry }, section.id))) }));
 };
 
+/**
+ * @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;
+    };
+}
+
 exports.AutoBlock = AutoBlock;
 exports.AutoSection = AutoSection;
 exports.FooterMinimal = FooterMinimal;
@@ -938,9 +1066,12 @@ exports.SectionWave = SectionWave;
 exports.StyledPage = StyledPage;
 exports.ThemeProvider = ThemeProvider;
 exports.convertWordPressToTokens = convertWordPressToTokens;
+exports.createColorMapperFromTokens = createColorMapperFromTokens;
+exports.createColorMapperWithSemanticClasses = createColorMapperWithSemanticClasses;
 exports.defaultTokens = defaultTokens;
 exports.detectSections = detectSections;
 exports.determineSectionStyle = determineSectionStyle;
+exports.getResponsiveValue = getResponsiveValue;
 exports.injectCSSVariables = injectCSSVariables;
 exports.selectBlockRenderer = selectBlockRenderer;
 exports.selectTemplate = selectTemplate;