hey-pharmacist-ecommerce 1.1.39 → 1.1.40
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 +32 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +33 -7
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/providers/ThemeProvider.tsx +42 -14
package/dist/index.js
CHANGED
|
@@ -236,29 +236,55 @@ function useTheme() {
|
|
|
236
236
|
}
|
|
237
237
|
return context;
|
|
238
238
|
}
|
|
239
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React10.useLayoutEffect : React10.useEffect;
|
|
239
240
|
function ThemeProvider({ config, children }) {
|
|
240
|
-
|
|
241
|
+
const cssVariables = React10__default.default.useMemo(() => {
|
|
241
242
|
const primaryShades = generateColorShades(config.colors.primary);
|
|
242
243
|
const secondaryShades = generateColorShades(config.colors.secondary);
|
|
243
244
|
const accentShades = generateColorShades(config.colors.accent);
|
|
244
|
-
const
|
|
245
|
+
const vars = [];
|
|
246
|
+
vars.push(`--color-primary: ${config.colors.primary}`);
|
|
247
|
+
vars.push(`--color-primary-dark: ${config.colors.primaryDark}`);
|
|
248
|
+
vars.push(`--color-secondary: ${config.colors.secondary}`);
|
|
249
|
+
vars.push(`--color-accent: ${config.colors.accent}`);
|
|
250
|
+
vars.push(`--color-accent-dark: ${config.colors.accentDark}`);
|
|
251
|
+
vars.push(`--color-text-muted: ${config.colors.textMuted}`);
|
|
245
252
|
Object.entries(primaryShades).forEach(([shade, rgb]) => {
|
|
246
|
-
|
|
253
|
+
vars.push(`--color-primary-${shade}: ${rgb}`);
|
|
247
254
|
});
|
|
248
255
|
Object.entries(secondaryShades).forEach(([shade, rgb]) => {
|
|
249
|
-
|
|
256
|
+
vars.push(`--color-secondary-${shade}: ${rgb}`);
|
|
250
257
|
});
|
|
251
258
|
Object.entries(accentShades).forEach(([shade, rgb]) => {
|
|
252
|
-
|
|
259
|
+
vars.push(`--color-accent-${shade}: ${rgb}`);
|
|
253
260
|
});
|
|
261
|
+
return vars.join("; ");
|
|
262
|
+
}, [config.colors]);
|
|
263
|
+
useIsomorphicLayoutEffect(() => {
|
|
264
|
+
const root = document.documentElement;
|
|
265
|
+
const primaryShades = generateColorShades(config.colors.primary);
|
|
266
|
+
const secondaryShades = generateColorShades(config.colors.secondary);
|
|
267
|
+
const accentShades = generateColorShades(config.colors.accent);
|
|
254
268
|
root.style.setProperty("--color-primary", config.colors.primary);
|
|
255
269
|
root.style.setProperty("--color-primary-dark", config.colors.primaryDark);
|
|
256
270
|
root.style.setProperty("--color-secondary", config.colors.secondary);
|
|
257
271
|
root.style.setProperty("--color-accent", config.colors.accent);
|
|
258
272
|
root.style.setProperty("--color-accent-dark", config.colors.accentDark);
|
|
259
273
|
root.style.setProperty("--color-text-muted", config.colors.textMuted);
|
|
274
|
+
Object.entries(primaryShades).forEach(([shade, rgb]) => {
|
|
275
|
+
root.style.setProperty(`--color-primary-${shade}`, rgb);
|
|
276
|
+
});
|
|
277
|
+
Object.entries(secondaryShades).forEach(([shade, rgb]) => {
|
|
278
|
+
root.style.setProperty(`--color-secondary-${shade}`, rgb);
|
|
279
|
+
});
|
|
280
|
+
Object.entries(accentShades).forEach(([shade, rgb]) => {
|
|
281
|
+
root.style.setProperty(`--color-accent-${shade}`, rgb);
|
|
282
|
+
});
|
|
260
283
|
}, [config]);
|
|
261
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
284
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ThemeContext.Provider, { value: { config }, children: [
|
|
285
|
+
/* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `:root { ${cssVariables} }` } }),
|
|
286
|
+
children
|
|
287
|
+
] });
|
|
262
288
|
}
|
|
263
289
|
|
|
264
290
|
// src/providers/AuthProvider.tsx
|