154 lines
5.5 KiB
JavaScript
154 lines
5.5 KiB
JavaScript
import { defineStore } from "pinia";
|
|
|
|
const themeMap = {
|
|
"Sprinklers Northwest": {
|
|
primary: "#75bdf1ff",
|
|
primaryStrong: "#068ee9ff",
|
|
secondary: "#2ca66f",
|
|
accent: "#8fd9a8",
|
|
primaryGradientStart: "#70b9e9ff",
|
|
primaryGradientEnd: "#1390e0",
|
|
primaryGradient: "linear-gradient(90deg, #a6d2f0ff 0%, #a1d7f8ff 100%)",
|
|
secondaryGradientStart: "#2c9b64",
|
|
secondaryGradientEnd: "#38c487",
|
|
secondaryGradient: "linear-gradient(90deg, #2c9b64 0%, #38c487 100%)",
|
|
backgroundGradient: "linear-gradient(90deg, #f0f8ff 0%, #e6f3ff 100%)",
|
|
surface: "#cadcf1ff",
|
|
surfaceAlt: "#dbfdefff",
|
|
border: "#cfe5f7",
|
|
hover: "#dcedf9",
|
|
text: "#0f172a",
|
|
textMuted: "#8798afff",
|
|
textDark: "#0b1220",
|
|
textLight: "#ffffff",
|
|
textAlt: "#06274aff",
|
|
},
|
|
"Nuco Yard Care": {
|
|
primary: "#3b7f2f",
|
|
primaryStrong: "#2f6425",
|
|
secondary: "#f0c419",
|
|
accent: "#f7de6d",
|
|
primaryGradientStart: "#2f6425",
|
|
primaryGradientEnd: "#4a9f3a",
|
|
primaryGradient: "linear-gradient(90deg, #2f6425 0%, #4a9f3a 100%)",
|
|
secondaryGradientStart: "#d2a106",
|
|
secondaryGradientEnd: "#f7de6d",
|
|
secondaryGradient: "linear-gradient(90deg, #d2a106 0%, #f7de6d 100%)",
|
|
backgroundGradient: "linear-gradient(90deg, #f8fff0 0%, #f0f8e6 100%)",
|
|
surface: "#f7fbe9",
|
|
surfaceAlt: "#f1f4d6",
|
|
border: "#dfe8b5",
|
|
hover: "#e6efc7",
|
|
text: "#1f2a1c",
|
|
textMuted: "#4b5b35",
|
|
textDark: "#192016",
|
|
textLight: "#ffffff",
|
|
textAlt: "#172519ff",
|
|
},
|
|
"Lowe Fencing": {
|
|
primary: "#2f3b52",
|
|
primaryStrong: "#232d3f",
|
|
secondary: "#5fa4ff",
|
|
accent: "#9cc6ff",
|
|
primaryGradientStart: "#232d3f",
|
|
primaryGradientEnd: "#375073",
|
|
primaryGradient: "linear-gradient(90deg, #232d3f 0%, #375073 100%)",
|
|
secondaryGradientStart: "#4f8ee5",
|
|
secondaryGradientEnd: "#5fa4ff",
|
|
secondaryGradient: "linear-gradient(90deg, #4f8ee5 0%, #5fa4ff 100%)",
|
|
backgroundGradient: "linear-gradient(90deg, #f5f7fb 0%, #e7ecf5 100%)",
|
|
surface: "#f5f7fb",
|
|
surfaceAlt: "#e7ecf5",
|
|
border: "#ced6e5",
|
|
hover: "#d8e1f0",
|
|
text: "#0f172a",
|
|
textMuted: "#42506a",
|
|
textDark: "#0b1220",
|
|
textLight: "#ffffff",
|
|
textAlt: "#291d3aff",
|
|
},
|
|
"Veritas Stone": {
|
|
primary: "#7a6f63",
|
|
primaryStrong: "#5e564d",
|
|
secondary: "#c3b9ab",
|
|
accent: "#d8d0c5",
|
|
primaryGradientStart: "#5e564d",
|
|
primaryGradientEnd: "#8a8073",
|
|
primaryGradient: "linear-gradient(90deg, #5e564d 0%, #8a8073 100%)",
|
|
secondaryGradientStart: "#b2a89c",
|
|
secondaryGradientEnd: "#cfc6b8",
|
|
secondaryGradient: "linear-gradient(90deg, #b2a89c 0%, #cfc6b8 100%)",
|
|
backgroundGradient: "linear-gradient(90deg, #f7f5f2 0%, #ebe6df 100%)",
|
|
surface: "#f7f5f2",
|
|
surfaceAlt: "#ebe6df",
|
|
border: "#d8d0c5",
|
|
hover: "#e6dfd7",
|
|
text: "#2d2620",
|
|
textMuted: "#5a5047",
|
|
textDark: "#231c16",
|
|
textLight: "#ffffff",
|
|
textAlt: "#25201bff",
|
|
},
|
|
"Daniels Landscape Supplies": {
|
|
primary: "#2f6b2f",
|
|
primaryStrong: "#245224",
|
|
secondary: "#f28c28",
|
|
accent: "#ffc174",
|
|
primaryGradientStart: "#245224",
|
|
primaryGradientEnd: "#3a8a3a",
|
|
primaryGradient: "linear-gradient(90deg, #245224 0%, #3a8a3a 100%)",
|
|
secondaryGradientStart: "#f28c28",
|
|
secondaryGradientEnd: "#ffc174",
|
|
secondaryGradient: "linear-gradient(90deg, #f28c28 0%, #ffc174 100%)",
|
|
backgroundGradient: "linear-gradient(90deg, #f8fbf4 0%, #f2f1e9 100%)",
|
|
surface: "#f8fbf4",
|
|
surfaceAlt: "#f2f1e9",
|
|
border: "#d9e5cc",
|
|
hover: "#e7f0d8",
|
|
text: "#1f2a1f",
|
|
textMuted: "#4f5b3f",
|
|
textDark: "#162016",
|
|
textLight: "#ffffff",
|
|
textAlt: "#172519ff",
|
|
},
|
|
};
|
|
|
|
export const useThemeStore = defineStore("theme", {
|
|
state: () => ({
|
|
currentTheme: themeMap["Sprinklers Northwest"],
|
|
}),
|
|
actions: {
|
|
applyTheme(companyName) {
|
|
const theme = themeMap[companyName] || themeMap["Sprinklers Northwest"];
|
|
this.currentTheme = theme;
|
|
if (typeof document === "undefined") return;
|
|
const root = document.documentElement;
|
|
root.style.setProperty("--theme-primary", theme.primary);
|
|
root.style.setProperty("--theme-primary-strong", theme.primaryStrong);
|
|
root.style.setProperty("--theme-secondary", theme.secondary);
|
|
root.style.setProperty("--theme-accent", theme.accent);
|
|
root.style.setProperty("--theme-gradient-start", theme.primaryGradientStart);
|
|
root.style.setProperty("--theme-gradient-end", theme.primaryGradientEnd);
|
|
root.style.setProperty("--theme-gradient", theme.primaryGradient);
|
|
root.style.setProperty("--theme-secondary-gradient-start", theme.secondaryGradientStart);
|
|
root.style.setProperty("--theme-secondary-gradient-end", theme.secondaryGradientEnd);
|
|
root.style.setProperty("--theme-secondary-gradient", theme.secondaryGradient);
|
|
root.style.setProperty("--theme-background-gradient", theme.backgroundGradient);
|
|
root.style.setProperty("--theme-surface", theme.surface);
|
|
root.style.setProperty("--theme-surface-alt", theme.surfaceAlt);
|
|
root.style.setProperty("--theme-border", theme.border);
|
|
root.style.setProperty("--theme-hover", theme.hover);
|
|
root.style.setProperty("--theme-text", theme.text);
|
|
root.style.setProperty("--theme-text-muted", theme.textMuted);
|
|
root.style.setProperty("--theme-text-dark", theme.textDark);
|
|
root.style.setProperty("--theme-text-light", theme.textLight);
|
|
// Backwards-compatible overrides for existing CSS variables
|
|
root.style.setProperty("--primary-color", theme.primary);
|
|
root.style.setProperty("--primary-600", theme.primaryStrong);
|
|
root.style.setProperty("--surface-card", theme.surface);
|
|
root.style.setProperty("--surface-border", theme.border);
|
|
root.style.setProperty("--surface-hover", theme.hover);
|
|
root.style.setProperty("--text-color", theme.text);
|
|
},
|
|
},
|
|
});
|