bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add theme store and input, update some components to use theme

Browse source
This commit is contained in:
Casey 2025-12-12 14:21:42 -06:00
parent 43c205e577
commit 0c55c9996f
12 changed files with 459 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/stores/company.js Normal file
View file

@ -0,0 +1,27 @@
import { defineStore } from "pinia";
export const useCompanyStore = defineStore("company", {
state: () => ({
companies: ["SprinklersNW", "Nuco Yard Care", "Lowe Fencing", "Veritas Stone", "Daniel's Landscape Supplies"],
selectedCompany: "SprinklersNW",
}),
getters: {
currentCompany: (state) => state.selectedCompany,
},
actions: {
setSelectedCompany(companyName) {
if (this.companies.includes(companyName)) {
this.selectedCompany = companyName;
}
},
setCompanies(companies = []) {
this.companies = [...companies];
if (!this.companies.includes(this.selectedCompany)) {
this.selectedCompany = this.companies[0] || null;
}
},
},
});

131
frontend/src/stores/theme.js Normal file
View file

@ -0,0 +1,131 @@
import { defineStore } from "pinia";
const themeMap = {
SprinklersNW: {
primary: "#0f7ac7",
primaryStrong: "#0c639f",
secondary: "#2ca66f",
accent: "#8fd9a8",
primaryGradientStart: "#0c639f",
primaryGradientEnd: "#1390e0",
secondaryGradientStart: "#2c9b64",
secondaryGradientEnd: "#38c487",
surface: "#cadcf1ff",
surfaceAlt: "#dbfdefff",
border: "#cfe5f7",
hover: "#dcedf9",
text: "#0f172a",
textMuted: "#8798afff",
textDark: "#0b1220",
textLight: "#ffffff",
},
"Nuco Yard Care": {
primary: "#3b7f2f",
primaryStrong: "#2f6425",
secondary: "#f0c419",
accent: "#f7de6d",
primaryGradientStart: "#2f6425",
primaryGradientEnd: "#4a9f3a",
secondaryGradientStart: "#d2a106",
secondaryGradientEnd: "#f7de6d",
surface: "#f7fbe9",
surfaceAlt: "#f1f4d6",
border: "#dfe8b5",
hover: "#e6efc7",
text: "#1f2a1c",
textMuted: "#4b5b35",
textDark: "#192016",
textLight: "#ffffff",
},
"Lowe Fencing": {
primary: "#2f3b52",
primaryStrong: "#232d3f",
secondary: "#5fa4ff",
accent: "#9cc6ff",
primaryGradientStart: "#232d3f",
primaryGradientEnd: "#375073",
secondaryGradientStart: "#4f8ee5",
secondaryGradientEnd: "#5fa4ff",
surface: "#f5f7fb",
surfaceAlt: "#e7ecf5",
border: "#ced6e5",
hover: "#d8e1f0",
text: "#0f172a",
textMuted: "#42506a",
textDark: "#0b1220",
textLight: "#ffffff",
},
"Veritas Stone": {
primary: "#7a6f63",
primaryStrong: "#5e564d",
secondary: "#c3b9ab",
accent: "#d8d0c5",
primaryGradientStart: "#5e564d",
primaryGradientEnd: "#8a8073",
secondaryGradientStart: "#b2a89c",
secondaryGradientEnd: "#cfc6b8",
surface: "#f7f5f2",
surfaceAlt: "#ebe6df",
border: "#d8d0c5",
hover: "#e6dfd7",
text: "#2d2620",
textMuted: "#5a5047",
textDark: "#231c16",
textLight: "#ffffff",
},
"Daniel's Landscape Supplies": {
primary: "#2f6b2f",
primaryStrong: "#245224",
secondary: "#f28c28",
accent: "#ffc174",
primaryGradientStart: "#245224",
primaryGradientEnd: "#3a8a3a",
secondaryGradientStart: "#f28c28",
secondaryGradientEnd: "#ffc174",
surface: "#f8fbf4",
surfaceAlt: "#f2f1e9",
border: "#d9e5cc",
hover: "#e7f0d8",
text: "#1f2a1f",
textMuted: "#4f5b3f",
textDark: "#162016",
textLight: "#ffffff",
},
};
export const useThemeStore = defineStore("theme", {
state: () => ({
currentTheme: themeMap.SprinklersNW,
}),
actions: {
applyTheme(companyName) {
const theme = themeMap[companyName] || themeMap.SprinklersNW;
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-secondary-gradient-start", theme.secondaryGradientStart);
root.style.setProperty("--theme-secondary-gradient-end", theme.secondaryGradientEnd);
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);
},
},
});