@product7/product7-js 0.1.0

package/src/styles/messenger.js

@@ -0,0 +1,17 @@
+import { messengerComponentsStyles } from './messenger-components.js';
+import { messengerCoreStyles } from './messenger-core.js';
+import { messengerFeaturesStyles } from './messenger-features.js';
+import { messengerViewsStyles } from './messenger-views.js';
+
+export const messengerStyles =
+	messengerCoreStyles +
+	messengerViewsStyles +
+	messengerComponentsStyles +
+	messengerFeaturesStyles;
+
+export {
+	messengerComponentsStyles,
+	messengerCoreStyles,
+	messengerFeaturesStyles,
+	messengerViewsStyles,
+};

package/src/styles/messengerCustomStyles.js

@@ -0,0 +1,114 @@
+export function applyMessengerCustomStyles(options = {}) {
+	const {
+		primaryColor = '#155EEF',
+		textColor = '#1d1d1f',
+		backgroundColor = '#ffffff',
+		theme = 'light',
+	} = options;
+
+	let styleElement = document.getElementById(
+		'product7-messenger-custom-styles'
+	);
+
+	if (!styleElement) {
+		styleElement = document.createElement('style');
+		styleElement.id = 'product7-messenger-custom-styles';
+		document.head.appendChild(styleElement);
+	}
+
+	const adjustColor = (hex, percent, alpha = 1) => {
+		const normalized = String(hex || '').trim();
+		if (!/^#?[0-9a-fA-F]{6}$/.test(normalized)) {
+			return normalized || '#000000';
+		}
+
+		const num = parseInt(normalized.replace('#', ''), 16);
+		const r = Math.max(0, Math.min(255, (num >> 16) + percent));
+		const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00ff) + percent));
+		const b = Math.max(0, Math.min(255, (num & 0x0000ff) + percent));
+
+		if (alpha < 1) {
+			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+		}
+
+		return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
+	};
+
+	const darkSurface = adjustColor(backgroundColor, 12);
+	const darkSurfaceAlt = adjustColor(backgroundColor, 20);
+	const darkBorder = adjustColor(backgroundColor, 34);
+
+	styleElement.textContent = `
+		#product7-messenger-widget {
+			--color-primary: ${primaryColor} !important;
+			--color-primary-hover: ${adjustColor(primaryColor, -10)} !important;
+		}
+
+		.messenger-launcher-btn {
+			background: ${primaryColor} !important;
+		}
+
+		.messenger-launcher-btn:hover {
+			box-shadow: 0 8px 24px ${adjustColor(primaryColor, 0, 0.3)} !important;
+		}
+
+		.sdk-btn-primary {
+			background: ${primaryColor} !important;
+			border-color: ${primaryColor} !important;
+		}
+
+		.sdk-btn-primary:hover {
+			background: ${adjustColor(primaryColor, -10)} !important;
+			border-color: ${adjustColor(primaryColor, -10)} !important;
+		}
+
+		.messenger-compose-send:hover:not(:disabled) {
+			background: ${primaryColor} !important;
+			border-color: ${primaryColor} !important;
+			color: #FFFFFF !important;
+		}
+
+		.messenger-nav-tab.active .messenger-nav-icon,
+		.messenger-nav-tab.active .messenger-nav-label {
+			color: ${primaryColor} !important;
+		}
+
+		.messenger-home-view::before {
+			background: radial-gradient(circle, ${adjustColor(primaryColor, 0, 0.08)} 0%, transparent 70%) !important;
+		}
+
+		${
+			backgroundColor !== '#ffffff'
+				? `
+		.messenger-panel-content {
+			background: ${backgroundColor} !important;
+		}
+		`
+				: ''
+		}
+
+		${
+			textColor !== '#1d1d1f'
+				? `
+		.messenger-panel-content,
+		.messenger-view {
+			color: ${textColor} !important;
+		}
+		`
+				: ''
+		}
+
+		/* Dark theme is now handled by CSS custom properties in messenger-core.js */
+	`;
+
+	console.log('✅ Custom messenger styles applied:', { primaryColor, theme });
+}
+
+export function removeMessengerCustomStyles() {
+	const styleElement = document.getElementById(
+		'product7-messenger-custom-styles'
+	);
+	if (styleElement && styleElement.parentNode) {
+		styleElement.parentNode.removeChild(styleElement);
+	}
+}

package/src/styles/styles.js

@@ -0,0 +1,26 @@
+import { baseStyles } from './base.js';
+import { changelogStyles } from './changelog.js';
+import { componentsStyles } from './components.js';
+import { designTokens } from './design-tokens.js';
+import { feedbackStyles } from './feedback.js';
+import { messengerStyles } from './messenger.js';
+import { surveyStyles } from './survey.js';
+
+export const CSS_STYLES =
+	designTokens +
+	baseStyles +
+	componentsStyles +
+	feedbackStyles +
+	changelogStyles +
+	surveyStyles +
+	messengerStyles;
+
+export {
+	baseStyles,
+	changelogStyles,
+	componentsStyles,
+	designTokens,
+	feedbackStyles,
+	messengerStyles,
+	surveyStyles,
+};