feat: complete Phase 3 — advanced features for Casera web app
Adds sharing (residence share codes, join, user management, .casera file export/import), subscription status with feature comparison, notification preferences with bell icon, profile settings (edit info, change password, theme picker, delete account), onboarding wizard with create/join paths, enhanced dashboard with stats cards, Recharts completion chart, recent activity feed, and task report PDF download. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Trey t
@@ -0,0 +1,331 @@
|
||||
export interface ThemeColors {
|
||||
primary: string;
|
||||
secondary: string;
|
||||
accent: string;
|
||||
error: string;
|
||||
bgPrimary: string;
|
||||
bgSecondary: string;
|
||||
textPrimary: string;
|
||||
textSecondary: string;
|
||||
textOnPrimary: string;
|
||||
}
|
||||
|
||||
export interface ThemeDefinition {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
light: ThemeColors;
|
||||
dark: ThemeColors;
|
||||
}
|
||||
|
||||
/**
|
||||
* All 11 themes matching the KMM/iOS theme system.
|
||||
* Hex values are taken directly from ThemeColors.kt.
|
||||
*/
|
||||
export const themes: ThemeDefinition[] = [
|
||||
{
|
||||
id: "default",
|
||||
name: "Default",
|
||||
description: "Vibrant iOS system colors",
|
||||
light: {
|
||||
primary: "#0079FF",
|
||||
secondary: "#5AC7F9",
|
||||
accent: "#FF9400",
|
||||
error: "#FF3A2F",
|
||||
bgPrimary: "#FFFFFF",
|
||||
bgSecondary: "#F1F7F7",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#3C3C3C",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#0984FF",
|
||||
secondary: "#63D2FF",
|
||||
accent: "#FF9F09",
|
||||
error: "#FF4539",
|
||||
bgPrimary: "#1C1C1C",
|
||||
bgSecondary: "#2C2C2C",
|
||||
textPrimary: "#FFFFFF",
|
||||
textSecondary: "#EBEBEB",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "teal",
|
||||
name: "Teal",
|
||||
description: "Blue-green with warm accents",
|
||||
light: {
|
||||
primary: "#069FC3",
|
||||
secondary: "#0054A4",
|
||||
accent: "#EFC707",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#FFF0D0",
|
||||
bgSecondary: "#FFFFFF",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#60CCE2",
|
||||
secondary: "#60A5D8",
|
||||
accent: "#EFC707",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#091829",
|
||||
bgSecondary: "#1A2E3E",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "ocean",
|
||||
name: "Ocean",
|
||||
description: "Deep blues and coral tones",
|
||||
light: {
|
||||
primary: "#006B8F",
|
||||
secondary: "#008A8A",
|
||||
accent: "#FF7E50",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#E4EBF1",
|
||||
bgSecondary: "#BCCAD5",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#49B5D1",
|
||||
secondary: "#60D1C6",
|
||||
accent: "#FF7E50",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#161B22",
|
||||
bgSecondary: "#313A4B",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "forest",
|
||||
name: "Forest",
|
||||
description: "Earth greens and golden hues",
|
||||
light: {
|
||||
primary: "#2C5015",
|
||||
secondary: "#6B8E22",
|
||||
accent: "#FFD600",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#EBEEE2",
|
||||
bgSecondary: "#C1C8AD",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#93C66B",
|
||||
secondary: "#AFD182",
|
||||
accent: "#FFD600",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#181E17",
|
||||
bgSecondary: "#384436",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "sunset",
|
||||
name: "Sunset",
|
||||
description: "Warm oranges and reds",
|
||||
light: {
|
||||
primary: "#FF4500",
|
||||
secondary: "#FF6246",
|
||||
accent: "#FFD600",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#F7F0E8",
|
||||
bgSecondary: "#DCD0BA",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#FF9E60",
|
||||
secondary: "#FFAD7C",
|
||||
accent: "#FFD600",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#201813",
|
||||
bgSecondary: "#433329",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "monochrome",
|
||||
name: "Monochrome",
|
||||
description: "Elegant grayscale",
|
||||
light: {
|
||||
primary: "#333333",
|
||||
secondary: "#666666",
|
||||
accent: "#999999",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#F0F0F0",
|
||||
bgSecondary: "#D4D4D4",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#E5E5E5",
|
||||
secondary: "#BFBFBF",
|
||||
accent: "#D1D1D1",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#161616",
|
||||
bgSecondary: "#3B3B3B",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "lavender",
|
||||
name: "Lavender",
|
||||
description: "Soft purple with pink accents",
|
||||
light: {
|
||||
primary: "#6B418A",
|
||||
secondary: "#8A60AF",
|
||||
accent: "#E24982",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#F1EFF5",
|
||||
bgSecondary: "#D9D1DF",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#D1AFE2",
|
||||
secondary: "#DDBFEA",
|
||||
accent: "#FF9EC6",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#17131E",
|
||||
bgSecondary: "#393042",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "crimson",
|
||||
name: "Crimson",
|
||||
description: "Bold red with warm highlights",
|
||||
light: {
|
||||
primary: "#B51E28",
|
||||
secondary: "#992D38",
|
||||
accent: "#E26000",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#F6EDEB",
|
||||
bgSecondary: "#DECFCC",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#FF827C",
|
||||
secondary: "#F99993",
|
||||
accent: "#FFB56B",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#1B1215",
|
||||
bgSecondary: "#412E39",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "midnight",
|
||||
name: "Midnight",
|
||||
description: "Deep navy with sky blue",
|
||||
light: {
|
||||
primary: "#1E4993",
|
||||
secondary: "#2D60AF",
|
||||
accent: "#4993E2",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#EDF0F7",
|
||||
bgSecondary: "#CCD5E2",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#82B5EA",
|
||||
secondary: "#93C6F2",
|
||||
accent: "#9ED8FF",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#12161F",
|
||||
bgSecondary: "#2F3848",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "desert",
|
||||
name: "Desert",
|
||||
description: "Warm terracotta and sand tones",
|
||||
light: {
|
||||
primary: "#AF6049",
|
||||
secondary: "#9E7C60",
|
||||
accent: "#D1932D",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#F6F0EA",
|
||||
bgSecondary: "#E5D8C6",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#F2B593",
|
||||
secondary: "#EAD1AF",
|
||||
accent: "#FFD86B",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#1F1C16",
|
||||
bgSecondary: "#494138",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "mint",
|
||||
name: "Mint",
|
||||
description: "Fresh green with turquoise",
|
||||
light: {
|
||||
primary: "#38AF93",
|
||||
secondary: "#60C6AF",
|
||||
accent: "#2D9EAF",
|
||||
error: "#DD1C1A",
|
||||
bgPrimary: "#EDF6F0",
|
||||
bgSecondary: "#D1E2D8",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#444444",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
dark: {
|
||||
primary: "#93F2D8",
|
||||
secondary: "#BFF9EA",
|
||||
accent: "#6BEAF2",
|
||||
error: "#FF5244",
|
||||
bgPrimary: "#161F1F",
|
||||
bgSecondary: "#384949",
|
||||
textPrimary: "#F5F5F5",
|
||||
textSecondary: "#C6C6C6",
|
||||
textOnPrimary: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/** Default theme ID */
|
||||
export const DEFAULT_THEME_ID = "default";
|
||||
|
||||
/** Get a theme definition by ID, falls back to Default */
|
||||
export function getThemeById(id: string): ThemeDefinition {
|
||||
return themes.find((t) => t.id === id) ?? themes[0];
|
||||
}
|
||||
Reference in New Issue
Block a user