hey-pharmacist-ecommerce 1.1.39 → 1.1.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +37 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +38 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/providers/ThemeProvider.tsx +48 -20
- package/src/styles/globals.css +43 -44
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hey-pharmacist-ecommerce",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.41",
|
|
4
4
|
"description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import React, { createContext, useContext, useEffect } from 'react';
|
|
3
|
+
import React, { createContext, useContext, useLayoutEffect, useEffect } from 'react';
|
|
4
4
|
import { EcommerceConfig } from '@/lib/types';
|
|
5
5
|
import { generateColorShades } from '@/lib/utils/colors';
|
|
6
6
|
|
|
@@ -23,44 +23,72 @@ interface ThemeProviderProps {
|
|
|
23
23
|
children: React.ReactNode;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
// Use useLayoutEffect on client, useEffect on server (SSR safe)
|
|
27
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
28
|
+
|
|
26
29
|
export function ThemeProvider({ config, children }: ThemeProviderProps) {
|
|
27
|
-
|
|
28
|
-
|
|
30
|
+
// Generate CSS variables string for inline style injection (namespaced with --hp-)
|
|
31
|
+
const cssVariables = React.useMemo(() => {
|
|
29
32
|
const primaryShades = generateColorShades(config.colors.primary);
|
|
30
33
|
const secondaryShades = generateColorShades(config.colors.secondary);
|
|
31
34
|
const accentShades = generateColorShades(config.colors.accent);
|
|
32
35
|
|
|
33
|
-
const
|
|
36
|
+
const vars: string[] = [];
|
|
37
|
+
|
|
38
|
+
// Base colors (namespaced)
|
|
39
|
+
vars.push(`--hp-primary: ${config.colors.primary}`);
|
|
40
|
+
vars.push(`--hp-primary-dark: ${config.colors.primaryDark}`);
|
|
41
|
+
vars.push(`--hp-secondary: ${config.colors.secondary}`);
|
|
42
|
+
vars.push(`--hp-accent: ${config.colors.accent}`);
|
|
43
|
+
vars.push(`--hp-accent-dark: ${config.colors.accentDark}`);
|
|
44
|
+
vars.push(`--hp-text-muted: ${config.colors.textMuted}`);
|
|
34
45
|
|
|
35
|
-
//
|
|
46
|
+
// Shaded colors (namespaced)
|
|
36
47
|
Object.entries(primaryShades).forEach(([shade, rgb]) => {
|
|
37
|
-
|
|
48
|
+
vars.push(`--hp-primary-${shade}: ${rgb}`);
|
|
38
49
|
});
|
|
39
|
-
|
|
40
|
-
// Set secondary color variables
|
|
41
50
|
Object.entries(secondaryShades).forEach(([shade, rgb]) => {
|
|
42
|
-
|
|
51
|
+
vars.push(`--hp-secondary-${shade}: ${rgb}`);
|
|
43
52
|
});
|
|
44
|
-
|
|
45
|
-
// Set accent color variables
|
|
46
53
|
Object.entries(accentShades).forEach(([shade, rgb]) => {
|
|
47
|
-
|
|
54
|
+
vars.push(`--hp-accent-${shade}: ${rgb}`);
|
|
48
55
|
});
|
|
49
56
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
root
|
|
56
|
-
|
|
57
|
+
return vars.join('; ');
|
|
58
|
+
}, [config.colors]);
|
|
59
|
+
|
|
60
|
+
// Apply CSS variables to document root on client (fires before paint)
|
|
61
|
+
useIsomorphicLayoutEffect(() => {
|
|
62
|
+
const root = document.documentElement;
|
|
63
|
+
const primaryShades = generateColorShades(config.colors.primary);
|
|
64
|
+
const secondaryShades = generateColorShades(config.colors.secondary);
|
|
65
|
+
const accentShades = generateColorShades(config.colors.accent);
|
|
66
|
+
|
|
67
|
+
// Set base color variables (namespaced)
|
|
68
|
+
root.style.setProperty('--hp-primary', config.colors.primary);
|
|
69
|
+
root.style.setProperty('--hp-primary-dark', config.colors.primaryDark);
|
|
70
|
+
root.style.setProperty('--hp-secondary', config.colors.secondary);
|
|
71
|
+
root.style.setProperty('--hp-accent', config.colors.accent);
|
|
72
|
+
root.style.setProperty('--hp-accent-dark', config.colors.accentDark);
|
|
73
|
+
root.style.setProperty('--hp-text-muted', config.colors.textMuted);
|
|
57
74
|
|
|
75
|
+
// Set shaded color variables (namespaced)
|
|
76
|
+
Object.entries(primaryShades).forEach(([shade, rgb]) => {
|
|
77
|
+
root.style.setProperty(`--hp-primary-${shade}`, rgb);
|
|
78
|
+
});
|
|
79
|
+
Object.entries(secondaryShades).forEach(([shade, rgb]) => {
|
|
80
|
+
root.style.setProperty(`--hp-secondary-${shade}`, rgb);
|
|
81
|
+
});
|
|
82
|
+
Object.entries(accentShades).forEach(([shade, rgb]) => {
|
|
83
|
+
root.style.setProperty(`--hp-accent-${shade}`, rgb);
|
|
84
|
+
});
|
|
58
85
|
}, [config]);
|
|
59
86
|
|
|
60
87
|
return (
|
|
61
88
|
<ThemeContext.Provider value={{ config }}>
|
|
89
|
+
{/* Inject CSS variables via style tag for SSR - ensures colors are available immediately */}
|
|
90
|
+
<style dangerouslySetInnerHTML={{ __html: `:root { ${cssVariables} }` }} />
|
|
62
91
|
{children}
|
|
63
92
|
</ThemeContext.Provider>
|
|
64
93
|
);
|
|
65
94
|
}
|
|
66
|
-
|
package/src/styles/globals.css
CHANGED
|
@@ -4,50 +4,49 @@
|
|
|
4
4
|
@source "../**/*.{js,jsx,ts,tsx,mdx}";
|
|
5
5
|
|
|
6
6
|
@theme {
|
|
7
|
-
--color-primary-50: rgb(var(--
|
|
8
|
-
--color-primary-100: rgb(var(--
|
|
9
|
-
--color-primary-200: rgb(var(--
|
|
10
|
-
--color-primary-300: rgb(var(--
|
|
11
|
-
--color-primary-400: rgb(var(--
|
|
12
|
-
--color-primary-500: rgb(var(--
|
|
13
|
-
--color-primary-600: var(--
|
|
14
|
-
;
|
|
15
|
-
--color-primary-
|
|
16
|
-
--color-primary-
|
|
17
|
-
--color-primary-
|
|
18
|
-
--color-primary
|
|
19
|
-
--color-primary: var(--
|
|
20
|
-
--color-primary-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
--color-secondary-
|
|
24
|
-
--color-secondary-
|
|
25
|
-
--color-secondary-
|
|
26
|
-
--color-secondary-
|
|
27
|
-
--color-secondary-
|
|
28
|
-
--color-secondary-
|
|
29
|
-
--color-secondary-
|
|
30
|
-
--color-secondary-
|
|
31
|
-
--color-secondary-
|
|
32
|
-
--color-secondary-
|
|
33
|
-
--color-secondary
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
--color-accent-
|
|
37
|
-
--color-accent-
|
|
38
|
-
--color-accent-
|
|
39
|
-
--color-accent-
|
|
40
|
-
--color-accent-
|
|
41
|
-
--color-accent-
|
|
42
|
-
--color-accent-
|
|
43
|
-
--color-accent-
|
|
44
|
-
--color-accent-
|
|
45
|
-
--color-accent-
|
|
46
|
-
--color-accent
|
|
47
|
-
--color-accent: var(--
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
--color-muted: var(--color-text-muted, #676c80);
|
|
7
|
+
--color-primary-50: rgb(var(--hp-primary-50));
|
|
8
|
+
--color-primary-100: rgb(var(--hp-primary-100));
|
|
9
|
+
--color-primary-200: rgb(var(--hp-primary-200));
|
|
10
|
+
--color-primary-300: rgb(var(--hp-primary-300));
|
|
11
|
+
--color-primary-400: rgb(var(--hp-primary-400));
|
|
12
|
+
--color-primary-500: rgb(var(--hp-primary-500));
|
|
13
|
+
--color-primary-600: var(--hp-primary-600, #E67E50);
|
|
14
|
+
--color-primary-700: rgb(var(--hp-primary-700));
|
|
15
|
+
--color-primary-800: rgb(var(--hp-primary-800));
|
|
16
|
+
--color-primary-900: rgb(var(--hp-primary-900));
|
|
17
|
+
--color-primary-950: rgb(var(--hp-primary-950));
|
|
18
|
+
--color-primary: var(--hp-primary, #5b9bd5);
|
|
19
|
+
--color-primary-dark: var(--hp-primary-dark, #4a8ac4);
|
|
20
|
+
--color-primary-bg: var(--hp-primary-bg, #e6ebf0);
|
|
21
|
+
|
|
22
|
+
--color-secondary-50: rgb(var(--hp-secondary-50));
|
|
23
|
+
--color-secondary-100: rgb(var(--hp-secondary-100));
|
|
24
|
+
--color-secondary-200: rgb(var(--hp-secondary-200));
|
|
25
|
+
--color-secondary-300: rgb(var(--hp-secondary-300));
|
|
26
|
+
--color-secondary-400: rgb(var(--hp-secondary-400));
|
|
27
|
+
--color-secondary-500: rgb(var(--hp-secondary-500));
|
|
28
|
+
--color-secondary-600: rgb(var(--hp-secondary-600));
|
|
29
|
+
--color-secondary-700: rgb(var(--hp-secondary-700));
|
|
30
|
+
--color-secondary-800: rgb(var(--hp-secondary-800));
|
|
31
|
+
--color-secondary-900: rgb(var(--hp-secondary-900));
|
|
32
|
+
--color-secondary-950: rgb(var(--hp-secondary-950));
|
|
33
|
+
--color-secondary: var(--hp-secondary, #2b4b7c);
|
|
34
|
+
|
|
35
|
+
--color-accent-50: rgb(var(--hp-accent-50));
|
|
36
|
+
--color-accent-100: rgb(var(--hp-accent-100));
|
|
37
|
+
--color-accent-200: rgb(var(--hp-accent-200));
|
|
38
|
+
--color-accent-300: rgb(var(--hp-accent-300));
|
|
39
|
+
--color-accent-400: rgb(var(--hp-accent-400));
|
|
40
|
+
--color-accent-500: rgb(var(--hp-accent-500));
|
|
41
|
+
--color-accent-600: rgb(var(--hp-accent-600));
|
|
42
|
+
--color-accent-700: rgb(var(--hp-accent-700));
|
|
43
|
+
--color-accent-800: rgb(var(--hp-accent-800));
|
|
44
|
+
--color-accent-900: rgb(var(--hp-accent-900));
|
|
45
|
+
--color-accent-950: rgb(var(--hp-accent-950));
|
|
46
|
+
--color-accent: var(--hp-accent, #e67e50);
|
|
47
|
+
--color-accent-dark: var(--hp-accent-dark, #d66f45);
|
|
48
|
+
|
|
49
|
+
--color-muted: var(--hp-text-muted, #676c80);
|
|
51
50
|
|
|
52
51
|
--animate-fade-in: fadeIn 0.3s ease-in-out;
|
|
53
52
|
--animate-slide-up: slideUp 0.3s ease-out;
|