@vibes.diy/use-vibes-base 0.19.8-dev → 0.19.14-dev-cli

package/utils/vibe-control-styles.js

@@ -1,7 +1,7 @@
-if (typeof document !== 'undefined') {
-    const styleId = 'vibe-control-vars';
+if (typeof document !== "undefined") {
+    const styleId = "vibe-control-vars";
     if (!document.getElementById(styleId)) {
-        const style = document.createElement('style');
+        const style = document.createElement("style");
         style.id = styleId;
         style.textContent = `
       :root {
@@ -41,49 +41,49 @@ if (typeof document !== 'undefined') {
 }
 export const vibeControlTheme = {
     colors: {
-        buttonBg: 'var(--vc-button-bg, var(--vibes-red-bright))',
-        buttonBgHover: 'var(--vc-button-bg-hover, var(--vibes-red-dark))',
-        buttonText: 'var(--vc-button-text, var(--vibes-white))',
-        buttonBorder: 'var(--vc-button-border, var(--vibes-red-bright))',
-        overlayBackdrop: 'var(--vc-overlay-backdrop, rgba(0, 0, 0, 0.5))',
-        overlayBg: 'var(--vc-overlay-bg, var(--vibes-white))',
-        overlayText: 'var(--vc-overlay-text, var(--vibes-gray-dark))',
-        overlayBorder: 'var(--vc-overlay-border, var(--vibes-gray-ultralight))',
-        closeButtonBg: 'var(--vc-close-bg, var(--vibes-gray-whisper))',
-        closeButtonBgHover: 'var(--vc-close-bg-hover, var(--vibes-gray-ultralight))',
-        closeButtonText: 'var(--vc-close-text, var(--vibes-gray-medium))',
-        accent: 'var(--vc-accent, var(--vibes-blue-accent))',
-        shadow: 'var(--vc-shadow, rgba(0, 0, 0, 0.15))',
+        buttonBg: "var(--vc-button-bg, var(--vibes-red-bright))",
+        buttonBgHover: "var(--vc-button-bg-hover, var(--vibes-red-dark))",
+        buttonText: "var(--vc-button-text, var(--vibes-white))",
+        buttonBorder: "var(--vc-button-border, var(--vibes-red-bright))",
+        overlayBackdrop: "var(--vc-overlay-backdrop, rgba(0, 0, 0, 0.5))",
+        overlayBg: "var(--vc-overlay-bg, var(--vibes-white))",
+        overlayText: "var(--vc-overlay-text, var(--vibes-gray-dark))",
+        overlayBorder: "var(--vc-overlay-border, var(--vibes-gray-ultralight))",
+        closeButtonBg: "var(--vc-close-bg, var(--vibes-gray-whisper))",
+        closeButtonBgHover: "var(--vc-close-bg-hover, var(--vibes-gray-ultralight))",
+        closeButtonText: "var(--vc-close-text, var(--vibes-gray-medium))",
+        accent: "var(--vc-accent, var(--vibes-blue-accent))",
+        shadow: "var(--vc-shadow, rgba(0, 0, 0, 0.15))",
     },
     dimensions: {
-        buttonWidth: '120px',
-        buttonHeight: '40px',
-        buttonPadding: '8px 16px',
-        buttonBorderRadius: '20px',
-        buttonPosition: '20px', // Distance from edge
-        overlayPadding: '24px',
-        overlayBorderRadius: '12px',
-        overlayMaxWidth: '800px',
-        overlayMaxHeight: '90vh',
-        closeButtonSize: '32px',
-        closeButtonBorderRadius: '16px',
+        buttonWidth: "120px",
+        buttonHeight: "40px",
+        buttonPadding: "8px 16px",
+        buttonBorderRadius: "20px",
+        buttonPosition: "20px", // Distance from edge
+        overlayPadding: "24px",
+        overlayBorderRadius: "12px",
+        overlayMaxWidth: "800px",
+        overlayMaxHeight: "90vh",
+        closeButtonSize: "32px",
+        closeButtonBorderRadius: "16px",
     },
     typography: {
-        buttonFontSize: '14px',
-        buttonFontWeight: '600',
-        buttonLineHeight: '1.2',
-        overlayTitleFontSize: '24px',
-        overlayTitleFontWeight: '700',
-        overlayTitleLineHeight: '1.3',
-        overlayBodyFontSize: '16px',
-        overlayBodyLineHeight: '1.5',
+        buttonFontSize: "14px",
+        buttonFontWeight: "600",
+        buttonLineHeight: "1.2",
+        overlayTitleFontSize: "24px",
+        overlayTitleFontWeight: "700",
+        overlayTitleLineHeight: "1.3",
+        overlayBodyFontSize: "16px",
+        overlayBodyLineHeight: "1.5",
     },
     effects: {
-        buttonShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-        buttonShadowHover: '0 4px 12px rgba(0, 0, 0, 0.2)',
-        overlayShadow: '0 8px 32px rgba(0, 0, 0, 0.2)',
-        transition: '0.2s ease-in-out',
-        backdropFilter: 'blur(4px)',
+        buttonShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+        buttonShadowHover: "0 4px 12px rgba(0, 0, 0, 0.2)",
+        overlayShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+        transition: "0.2s ease-in-out",
+        backdropFilter: "blur(4px)",
     },
     zIndex: {
         button: 1000,
@@ -91,30 +91,30 @@ export const vibeControlTheme = {
         backdrop: 1050,
     },
 };
-export const createVibeControlStyles = (position = 'bottom-right') => {
+export const createVibeControlStyles = (position = "bottom-right") => {
     const pos = vibeControlTheme.dimensions.buttonPosition;
     const anchor = {};
     switch (position) {
-        case 'bottom-right':
+        case "bottom-right":
             anchor.bottom = pos;
             anchor.right = pos;
             break;
-        case 'bottom-left':
+        case "bottom-left":
             anchor.bottom = pos;
             anchor.left = pos;
             break;
-        case 'top-right':
+        case "top-right":
             anchor.top = pos;
             anchor.right = pos;
             break;
-        case 'top-left':
+        case "top-left":
             anchor.top = pos;
             anchor.left = pos;
             break;
     }
     return {
         button: {
-            position: 'fixed',
+            position: "fixed",
             ...anchor,
             width: vibeControlTheme.dimensions.buttonWidth,
             height: vibeControlTheme.dimensions.buttonHeight,
@@ -126,22 +126,22 @@ export const createVibeControlStyles = (position = 'bottom-right') => {
             fontSize: vibeControlTheme.typography.buttonFontSize,
             fontWeight: vibeControlTheme.typography.buttonFontWeight,
             lineHeight: vibeControlTheme.typography.buttonLineHeight,
-            cursor: 'pointer',
+            cursor: "pointer",
             boxShadow: vibeControlTheme.effects.buttonShadow,
             transition: `background-color ${vibeControlTheme.effects.transition}, box-shadow ${vibeControlTheme.effects.transition}, transform ${vibeControlTheme.effects.transition}`,
             zIndex: vibeControlTheme.zIndex.button,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            userSelect: 'none',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            userSelect: "none",
         },
         buttonHover: {
             backgroundColor: vibeControlTheme.colors.buttonBgHover,
             boxShadow: vibeControlTheme.effects.buttonShadowHover,
-            transform: 'translateY(-2px)',
+            transform: "translateY(-2px)",
         },
         backdrop: {
-            position: 'fixed',
+            position: "fixed",
             top: 0,
             left: 0,
             right: 0,
@@ -149,9 +149,9 @@ export const createVibeControlStyles = (position = 'bottom-right') => {
             backgroundColor: vibeControlTheme.colors.overlayBackdrop,
             backdropFilter: vibeControlTheme.effects.backdropFilter,
             zIndex: vibeControlTheme.zIndex.backdrop,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
         },
         overlay: {
             backgroundColor: vibeControlTheme.colors.overlayBg,
@@ -161,34 +161,34 @@ export const createVibeControlStyles = (position = 'bottom-right') => {
             padding: vibeControlTheme.dimensions.overlayPadding,
             maxWidth: vibeControlTheme.dimensions.overlayMaxWidth,
             maxHeight: vibeControlTheme.dimensions.overlayMaxHeight,
-            width: '90%',
+            width: "90%",
             boxShadow: vibeControlTheme.effects.overlayShadow,
-            position: 'relative',
-            overflow: 'auto',
+            position: "relative",
+            overflow: "auto",
         },
         overlayTitle: {
             fontSize: vibeControlTheme.typography.overlayTitleFontSize,
             fontWeight: vibeControlTheme.typography.overlayTitleFontWeight,
             lineHeight: vibeControlTheme.typography.overlayTitleLineHeight,
-            margin: '0 0 16px 0',
-            paddingRight: '40px',
+            margin: "0 0 16px 0",
+            paddingRight: "40px",
         },
         closeButton: {
-            position: 'absolute',
+            position: "absolute",
             top: vibeControlTheme.dimensions.overlayPadding,
             right: vibeControlTheme.dimensions.overlayPadding,
             width: vibeControlTheme.dimensions.closeButtonSize,
             height: vibeControlTheme.dimensions.closeButtonSize,
             backgroundColor: vibeControlTheme.colors.closeButtonBg,
             color: vibeControlTheme.colors.closeButtonText,
-            border: 'none',
+            border: "none",
             borderRadius: vibeControlTheme.dimensions.closeButtonBorderRadius,
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '18px',
-            fontWeight: 'bold',
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "18px",
+            fontWeight: "bold",
             transition: `background-color ${vibeControlTheme.effects.transition}`,
         },
         closeButtonHover: {
@@ -201,11 +201,11 @@ export const createVibeControlStyles = (position = 'bottom-right') => {
     };
 };
 export const defaultVibeControlClasses = {
-    button: '',
-    backdrop: '',
-    overlay: '',
-    overlayTitle: '',
-    closeButton: '',
-    content: '',
+    button: "",
+    backdrop: "",
+    overlay: "",
+    overlayTitle: "",
+    closeButton: "",
+    content: "",
 };
 //# sourceMappingURL=vibe-control-styles.js.map