Matugen: addded 'container' derivatives

Helpers/ColorVariants.js

@@ -13,7 +13,9 @@ function hexToHSL(hex) {
 
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
-  let h, s, l = (max + min) / 2;
+  let h,
+    s,
+    l = (max + min) / 2;
 
   if (max === min) {
     h = s = 0;
@@ -21,9 +23,15 @@ function hexToHSL(hex) {
     const d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
     switch (max) {
-      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
-      case g: h = ((b - r) / d + 2) / 6; break;
-      case b: h = ((r - g) / d + 4) / 6; break;
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
     }
   }
 
@@ -38,25 +46,51 @@ function hslToHex(h, s, l) {
   l /= 100;
 
   const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
   const m = l - c / 2;
-  let r = 0, g = 0, b = 0;
+  let r = 0,
+    g = 0,
+    b = 0;
 
-  if (0 <= h && h < 60) { r = c; g = x; b = 0; }
-  else if (60 <= h && h < 120) { r = x; g = c; b = 0; }
-  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
-  else if (180 <= h && h < 240) { r = 0; g = x; b = c; }
-  else if (240 <= h && h < 300) { r = x; g = 0; b = c; }
-  else if (300 <= h && h < 360) { r = c; g = 0; b = x; }
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
 
   r = Math.round((r + m) * 255);
   g = Math.round((g + m) * 255);
   b = Math.round((b + m) * 255);
 
-  return "#" + [r, g, b].map(x => {
-    const hex = x.toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  }).join('');
+  return (
+    "#" +
+    [r, g, b]
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+      })
+      .join("")
+  );
 }
 
 /**
@@ -66,11 +100,11 @@ function hslToHex(h, s, l) {
 function generateFixedDim(hexColor) {
   const hsl = hexToHSL(hexColor);
   if (!hsl) return hexColor;
-  
+
   // Reduce lightness by 25-30% and slightly reduce saturation
   const newL = Math.max(hsl.l * 0.7, 10);
   const newS = Math.max(hsl.s * 0.85, 5);
-  
+
   return hslToHex(hsl.h, newS, newL);
 }
 
@@ -81,10 +115,25 @@ function generateFixedDim(hexColor) {
 function generateBright(hexColor) {
   const hsl = hexToHSL(hexColor);
   if (!hsl) return hexColor;
-  
+
   // Increase lightness by 20-25% and boost saturation
   const newL = Math.min(hsl.l * 1.25, 90);
   const newS = Math.min(hsl.s * 1.1, 100);
-  
+
+  return hslToHex(hsl.h, newS, newL);
+}
+
+/**
+ * Generate container variant (much lighter, desaturated version)
+ * Material 3 container is typically used for backgrounds, much lighter with reduced saturation
+ */
+function generateContainer(hexColor) {
+  const hsl = hexToHSL(hexColor);
+  if (!hsl) return hexColor;
+
+  // Significantly increase lightness (aim for 85-90) and reduce saturation
+  const newL = Math.min(hsl.l + (90 - hsl.l) * 0.85, 90);
+  const newS = Math.max(hsl.s * 0.4, 10);
+
   return hslToHex(hsl.h, newS, newL);
 }

Services/MatugenService.qml

@@ -253,6 +253,94 @@ Singleton {
           "dark": {
             "color": ColorVariants.generateBright(variant.mSurfaceVariant)
           }
+        },
+        "primary_container": {
+          "light": {
+            "color": ColorVariants.generateContainer(variant.mPrimary)
+          },
+          "default": {
+            "color": ColorVariants.generateContainer(variant.mPrimary)
+          },
+          "dark": {
+            "color": ColorVariants.generateContainer(variant.mPrimary)
+          }
+        },
+        "secondary_container": {
+          "light": {
+            "color": ColorVariants.generateContainer(variant.mSecondary)
+          },
+          "default": {
+            "color": ColorVariants.generateContainer(variant.mSecondary)
+          },
+          "dark": {
+            "color": ColorVariants.generateContainer(variant.mSecondary)
+          }
+        },
+        "tertiary_container": {
+          "light": {
+            "color": ColorVariants.generateContainer(variant.mTertiary)
+          },
+          "default": {
+            "color": ColorVariants.generateContainer(variant.mTertiary)
+          },
+          "dark": {
+            "color": ColorVariants.generateContainer(variant.mTertiary)
+          }
+        },
+        "on_primary_container": {
+          "light": {
+            "color": ColorVariants.generateContainer(variant.mOnPrimary)
+          },
+          "default": {
+            "color": ColorVariants.generateContainer(variant.mOnPrimary)
+          },
+          "dark": {
+            "color": ColorVariants.generateContainer(variant.mOnPrimary)
+          }
+        },
+        "on_secondary_container": {
+          "light": {
+            "color": ColorVariants.generateContainer(variant.mOnSecondary)
+          },
+          "default": {
+            "color": ColorVariants.generateContainer(variant.mOnSecondary)
+          },
+          "dark": {
+            "color": ColorVariants.generateContainer(variant.mOnSecondary)
+          }
+        },
+        "on_tertiary_container": {
+          "light": {
+            "color": ColorVariants.generateContainer(variant.mOnTertiary)
+          },
+          "default": {
+            "color": ColorVariants.generateContainer(variant.mOnTertiary)
+          },
+          "dark": {
+            "color": ColorVariants.generateContainer(variant.mOnTertiary)
+          }
+        },
+        "surface_container": {
+          "light": {
+            "color": ColorVariants.generateContainer(variant.mSurface)
+          },
+          "default": {
+            "color": ColorVariants.generateContainer(variant.mSurface)
+          },
+          "dark": {
+            "color": ColorVariants.generateContainer(variant.mSurface)
+          }
+        },
+        "surface_variant_container": {
+          "light": {
+            "color": ColorVariants.generateContainer(variant.mSurfaceVariant)
+          },
+          "default": {
+            "color": ColorVariants.generateContainer(variant.mSurfaceVariant)
+          },
+          "dark": {
+            "color": ColorVariants.generateContainer(variant.mSurfaceVariant)
+          }
         }
       }
     }