hey-pharmacist-ecommerce 1.1.40 → 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.
Files changed (7) hide show
  1. package/dist/index.js +18 -18
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +18 -18
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/providers/ThemeProvider.tsx +23 -23
  7. 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.40",
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",
package/src/providers/ThemeProvider.tsx CHANGED
@@ -27,7 +27,7 @@ interface ThemeProviderProps {
27
27
  const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
28
28
 
29
29
  export function ThemeProvider({ config, children }: ThemeProviderProps) {
30
- // Generate CSS variables string for inline style injection
30
+ // Generate CSS variables string for inline style injection (namespaced with --hp-)
31
31
  const cssVariables = React.useMemo(() => {
32
32
  const primaryShades = generateColorShades(config.colors.primary);
33
33
  const secondaryShades = generateColorShades(config.colors.secondary);
@@ -35,23 +35,23 @@ export function ThemeProvider({ config, children }: ThemeProviderProps) {
35
35
 
36
36
  const vars: string[] = [];
37
37
 
38
- // Base colors
39
- vars.push(`--color-primary: ${config.colors.primary}`);
40
- vars.push(`--color-primary-dark: ${config.colors.primaryDark}`);
41
- vars.push(`--color-secondary: ${config.colors.secondary}`);
42
- vars.push(`--color-accent: ${config.colors.accent}`);
43
- vars.push(`--color-accent-dark: ${config.colors.accentDark}`);
44
- vars.push(`--color-text-muted: ${config.colors.textMuted}`);
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}`);
45
45
 
46
- // Shaded colors
46
+ // Shaded colors (namespaced)
47
47
  Object.entries(primaryShades).forEach(([shade, rgb]) => {
48
- vars.push(`--color-primary-${shade}: ${rgb}`);
48
+ vars.push(`--hp-primary-${shade}: ${rgb}`);
49
49
  });
50
50
  Object.entries(secondaryShades).forEach(([shade, rgb]) => {
51
- vars.push(`--color-secondary-${shade}: ${rgb}`);
51
+ vars.push(`--hp-secondary-${shade}: ${rgb}`);
52
52
  });
53
53
  Object.entries(accentShades).forEach(([shade, rgb]) => {
54
- vars.push(`--color-accent-${shade}: ${rgb}`);
54
+ vars.push(`--hp-accent-${shade}: ${rgb}`);
55
55
  });
56
56
 
57
57
  return vars.join('; ');
@@ -64,23 +64,23 @@ export function ThemeProvider({ config, children }: ThemeProviderProps) {
64
64
  const secondaryShades = generateColorShades(config.colors.secondary);
65
65
  const accentShades = generateColorShades(config.colors.accent);
66
66
 
67
- // Set base color variables
68
- root.style.setProperty('--color-primary', config.colors.primary);
69
- root.style.setProperty('--color-primary-dark', config.colors.primaryDark);
70
- root.style.setProperty('--color-secondary', config.colors.secondary);
71
- root.style.setProperty('--color-accent', config.colors.accent);
72
- root.style.setProperty('--color-accent-dark', config.colors.accentDark);
73
- root.style.setProperty('--color-text-muted', config.colors.textMuted);
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);
74
74
 
75
- // Set shaded color variables
75
+ // Set shaded color variables (namespaced)
76
76
  Object.entries(primaryShades).forEach(([shade, rgb]) => {
77
- root.style.setProperty(`--color-primary-${shade}`, rgb);
77
+ root.style.setProperty(`--hp-primary-${shade}`, rgb);
78
78
  });
79
79
  Object.entries(secondaryShades).forEach(([shade, rgb]) => {
80
- root.style.setProperty(`--color-secondary-${shade}`, rgb);
80
+ root.style.setProperty(`--hp-secondary-${shade}`, rgb);
81
81
  });
82
82
  Object.entries(accentShades).forEach(([shade, rgb]) => {
83
- root.style.setProperty(`--color-accent-${shade}`, rgb);
83
+ root.style.setProperty(`--hp-accent-${shade}`, rgb);
84
84
  });
85
85
  }, [config]);
86
86
 
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(--color-primary-50));
8
- --color-primary-100: rgb(var(--color-primary-100));
9
- --color-primary-200: rgb(var(--color-primary-200));
10
- --color-primary-300: rgb(var(--color-primary-300));
11
- --color-primary-400: rgb(var(--color-primary-400));
12
- --color-primary-500: rgb(var(--color-primary-500));
13
- --color-primary-600: var(--color-primary-600, #E67E50);
14
- ;
15
- --color-primary-700: rgb(var(--color-primary-700));
16
- --color-primary-800: rgb(var(--color-primary-800));
17
- --color-primary-900: rgb(var(--color-primary-900));
18
- --color-primary-950: rgb(var(--color-primary-950));
19
- --color-primary: var(--color-primary, #5b9bd5);
20
- --color-primary-dark: var(--color-primary-dark, #4a8ac4);
21
- --color-primary-bg: var(--color-primary-bg, #e6ebf0);
22
-
23
- --color-secondary-50: rgb(var(--color-secondary-50));
24
- --color-secondary-100: rgb(var(--color-secondary-100));
25
- --color-secondary-200: rgb(var(--color-secondary-200));
26
- --color-secondary-300: rgb(var(--color-secondary-300));
27
- --color-secondary-400: rgb(var(--color-secondary-400));
28
- --color-secondary-500: rgb(var(--color-secondary-500));
29
- --color-secondary-600: rgb(var(--color-secondary-600));
30
- --color-secondary-700: rgb(var(--color-secondary-700));
31
- --color-secondary-800: rgb(var(--color-secondary-800));
32
- --color-secondary-900: rgb(var(--color-secondary-900));
33
- --color-secondary-950: rgb(var(--color-secondary-950));
34
- --color-secondary: var(--color-secondary, #2b4b7c);
35
-
36
- --color-accent-50: rgb(var(--color-accent-50));
37
- --color-accent-100: rgb(var(--color-accent-100));
38
- --color-accent-200: rgb(var(--color-accent-200));
39
- --color-accent-300: rgb(var(--color-accent-300));
40
- --color-accent-400: rgb(var(--color-accent-400));
41
- --color-accent-500: rgb(var(--color-accent-500));
42
- --color-accent-600: rgb(var(--color-accent-600));
43
- --color-accent-700: rgb(var(--color-accent-700));
44
- --color-accent-800: rgb(var(--color-accent-800));
45
- --color-accent-900: rgb(var(--color-accent-900));
46
- --color-accent-950: rgb(var(--color-accent-950));
47
- --color-accent: var(--color-accent, #e67e50);
48
- --color-accent-dark: var(--color-accent-dark, #d66f45);
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;