Add catpuccin theme + material 3 components

- Update DankToggle to be more representative of m3 design
- Add DankButtonGroup to represent a m3 button group

Common/StockThemes.js

@@ -1,12 +1,121 @@
 // Stock theme definitions for DankMaterialShell
 // Separated from Theme.qml to keep that file clean
 
+const CatppuccinMocha = {
+    surface: "#45475a",
+    surfaceText: "#cdd6f4",
+    surfaceVariant: "#45475a",
+    surfaceVariantText: "#a6adc8",
+    background: "#1e1e2e",
+    backgroundText: "#cdd6f4",
+    outline: "#6c7086",
+    surfaceContainer: "#313244",
+    surfaceContainerHigh: "#585b70"
+}
+
+const CatppuccinLatte = {
+    surface: "#bcc0cc",
+    surfaceText: "#4c4f69",
+    surfaceVariant: "#bcc0cc",
+    surfaceVariantText: "#6c6f85",
+    background: "#eff1f5",
+    backgroundText: "#4c4f69",
+    outline: "#9ca0b0",
+    surfaceContainer: "#ccd0da",
+    surfaceContainerHigh: "#acb0be"
+}
+
+const CatppuccinVariants = {
+    "cat-rosewater": {
+        name: "Rosewater",
+        dark: { primary: "#f5e0dc", secondary: "#f2cdcd", primaryText: "#1e1e2e", primaryContainer: "#8b6b5e", surfaceTint: "#f5e0dc" },
+        light: { primary: "#dc8a78", secondary: "#dd7878", primaryText: "#ffffff", primaryContainer: "#f4d2ca", surfaceTint: "#dc8a78" }
+    },
+    "cat-flamingo": {
+        name: "Flamingo",
+        dark: { primary: "#f2cdcd", secondary: "#f5e0dc", primaryText: "#1e1e2e", primaryContainer: "#885d62", surfaceTint: "#f2cdcd" },
+        light: { primary: "#dd7878", secondary: "#dc8a78", primaryText: "#ffffff", primaryContainer: "#f4caca", surfaceTint: "#dd7878" }
+    },
+    "cat-pink": {
+        name: "Pink",
+        dark: { primary: "#f5c2e7", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#8b537a", surfaceTint: "#f5c2e7" },
+        light: { primary: "#ea76cb", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#f7c9e7", surfaceTint: "#ea76cb" }
+    },
+    "cat-mauve": {
+        name: "Mauve",
+        dark: { primary: "#cba6f7", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#61378a", surfaceTint: "#cba6f7" },
+        light: { primary: "#8839ef", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#e4d3ff", surfaceTint: "#8839ef" }
+    },
+    "cat-red": {
+        name: "Red",
+        dark: { primary: "#f38ba8", secondary: "#eba0ac", primaryText: "#1e1e2e", primaryContainer: "#891c3b", surfaceTint: "#f38ba8" },
+        light: { primary: "#d20f39", secondary: "#e64553", primaryText: "#ffffff", primaryContainer: "#f1b8c4", surfaceTint: "#d20f39" }
+    },
+    "cat-maroon": {
+        name: "Maroon",
+        dark: { primary: "#eba0ac", secondary: "#f38ba8", primaryText: "#1e1e2e", primaryContainer: "#81313f", surfaceTint: "#eba0ac" },
+        light: { primary: "#e64553", secondary: "#d20f39", primaryText: "#ffffff", primaryContainer: "#f4c3c8", surfaceTint: "#e64553" }
+    },
+    "cat-peach": {
+        name: "Peach",
+        dark: { primary: "#fab387", secondary: "#f9e2af", primaryText: "#1e1e2e", primaryContainer: "#90441a", surfaceTint: "#fab387" },
+        light: { primary: "#fe640b", secondary: "#df8e1d", primaryText: "#ffffff", primaryContainer: "#ffddcc", surfaceTint: "#fe640b" }
+    },
+    "cat-yellow": {
+        name: "Yellow",
+        dark: { primary: "#f9e2af", secondary: "#a6e3a1", primaryText: "#1e1e2e", primaryContainer: "#8f7342", surfaceTint: "#f9e2af" },
+        light: { primary: "#df8e1d", secondary: "#40a02b", primaryText: "#ffffff", primaryContainer: "#fff3cc", surfaceTint: "#df8e1d" }
+    },
+    "cat-green": {
+        name: "Green",
+        dark: { primary: "#a6e3a1", secondary: "#94e2d5", primaryText: "#1e1e2e", primaryContainer: "#3c7534", surfaceTint: "#a6e3a1" },
+        light: { primary: "#40a02b", secondary: "#179299", primaryText: "#ffffff", primaryContainer: "#d4f5d4", surfaceTint: "#40a02b" }
+    },
+    "cat-teal": {
+        name: "Teal",
+        dark: { primary: "#94e2d5", secondary: "#89dceb", primaryText: "#1e1e2e", primaryContainer: "#2a7468", surfaceTint: "#94e2d5" },
+        light: { primary: "#179299", secondary: "#04a5e5", primaryText: "#ffffff", primaryContainer: "#ccf2f2", surfaceTint: "#179299" }
+    },
+    "cat-sky": {
+        name: "Sky",
+        dark: { primary: "#89dceb", secondary: "#74c7ec", primaryText: "#1e1e2e", primaryContainer: "#196e7e", surfaceTint: "#89dceb" },
+        light: { primary: "#04a5e5", secondary: "#209fb5", primaryText: "#ffffff", primaryContainer: "#ccebff", surfaceTint: "#04a5e5" }
+    },
+    "cat-sapphire": {
+        name: "Sapphire",
+        dark: { primary: "#74c7ec", secondary: "#89b4fa", primaryText: "#1e1e2e", primaryContainer: "#0a597f", surfaceTint: "#74c7ec" },
+        light: { primary: "#209fb5", secondary: "#1e66f5", primaryText: "#ffffff", primaryContainer: "#d0f0f5", surfaceTint: "#209fb5" }
+    },
+    "cat-blue": {
+        name: "Blue",
+        dark: { primary: "#89b4fa", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#19468d", surfaceTint: "#89b4fa" },
+        light: { primary: "#1e66f5", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#ccd9ff", surfaceTint: "#1e66f5" }
+    },
+    "cat-lavender": {
+        name: "Lavender",
+        dark: { primary: "#b4befe", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#4a5091", surfaceTint: "#b4befe" },
+        light: { primary: "#7287fd", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#dde1ff", surfaceTint: "#7287fd" }
+    }
+}
+
+function getCatppuccinTheme(variant, isLight = false) {
+    const variantData = CatppuccinVariants[variant]
+    if (!variantData) return null
+
+    const baseColors = isLight ? CatppuccinLatte : CatppuccinMocha
+    const accentColors = isLight ? variantData.light : variantData.dark
+
+    return Object.assign({
+        name: `${variantData.name}${isLight ? ' Light' : ''}`
+    }, baseColors, accentColors)
+}
+
 const StockThemes = {
     DARK: {
         blue: {
             name: "Blue",
             primary: "#42a5f5",
-            primaryText: "#ffffff",
+            primaryText: "#000000",
             primaryContainer: "#1976d2",
             secondary: "#8ab4f8",
             surface: "#1a1c1e",
@@ -23,7 +132,7 @@ const StockThemes = {
         deepBlue: {
             name: "Deep Blue",
             primary: "#0061a4",
-            primaryText: "#ffffff",
+            primaryText: "#000000",
             primaryContainer: "#004881",
             secondary: "#42a5f5",
             surface: "#1a1c1e",
@@ -57,7 +166,7 @@ const StockThemes = {
         green: {
             name: "Green",
             primary: "#4caf50",
-            primaryText: "#ffffff",
+            primaryText: "#000000",
             primaryContainer: "#388e3c",
             secondary: "#81c995",
             surface: "#0f1411",
@@ -74,7 +183,7 @@ const StockThemes = {
         orange: {
             name: "Orange",
             primary: "#ff6d00",
-            primaryText: "#ffffff",
+            primaryText: "#000000",
             primaryContainer: "#e65100",
             secondary: "#ffb74d",
             surface: "#1c1410",
@@ -91,7 +200,7 @@ const StockThemes = {
         red: {
             name: "Red",
             primary: "#f44336",
-            primaryText: "#ffffff",
+            primaryText: "#000000",
             primaryContainer: "#d32f2f",
             secondary: "#f28b82",
             surface: "#1c1011",
@@ -108,7 +217,7 @@ const StockThemes = {
         cyan: {
             name: "Cyan",
             primary: "#00bcd4",
-            primaryText: "#ffffff",
+            primaryText: "#000000",
             primaryContainer: "#0097a7",
             secondary: "#4dd0e1",
             surface: "#0f1617",
@@ -125,7 +234,7 @@ const StockThemes = {
         pink: {
             name: "Pink",
             primary: "#e91e63",
-            primaryText: "#ffffff",
+            primaryText: "#000000",
             primaryContainer: "#c2185b",
             secondary: "#f8bbd9",
             surface: "#1a1014",
@@ -159,7 +268,7 @@ const StockThemes = {
         coral: {
             name: "Coral",
             primary: "#ffb4ab",
-            primaryText: "#5f1412",
+            primaryText: "#000000",
             primaryContainer: "#8c1d18",
             secondary: "#f9dedc",
             surface: "#1a1110",
@@ -348,6 +457,17 @@ const StockThemes = {
     }
 }
 
+const ThemeCategories = {
+    GENERIC: {
+        name: "Generic",
+        variants: ["blue", "deepBlue", "purple", "green", "orange", "red", "cyan", "pink", "amber", "coral"]
+    },
+    CATPPUCCIN: {
+        name: "Catppuccin",
+        variants: Object.keys(CatppuccinVariants)
+    }
+}
+
 const ThemeNames = {
     BLUE: "blue",
     DEEP_BLUE: "deepBlue",
@@ -366,15 +486,30 @@ function isStockTheme(themeName) {
     return Object.keys(StockThemes.DARK).includes(themeName)
 }
 
+function isCatppuccinVariant(themeName) {
+    return Object.keys(CatppuccinVariants).includes(themeName)
+}
+
 function getAvailableThemes(isLight = false) {
     return isLight ? StockThemes.LIGHT : StockThemes.DARK
 }
 
 function getThemeByName(themeName, isLight = false) {
+    if (isCatppuccinVariant(themeName)) {
+        return getCatppuccinTheme(themeName, isLight)
+    }
     const themes = getAvailableThemes(isLight)
     return themes[themeName] || themes.blue
 }
 
 function getAllThemeNames() {
     return Object.keys(StockThemes.DARK)
+}
+
+function getCatppuccinVariantNames() {
+    return Object.keys(CatppuccinVariants)
+}
+
+function getThemeCategories() {
+    return ThemeCategories
 }