better --better-pale gradient logic

src/SEQTA.js

@@ -472,7 +472,7 @@ function CheckNoticeTextColour(notice) {
           DarkMode = result.DarkMode;
           if (added_node.classList.contains("notice")) {
             var hex = added_node.style.cssText.split(" ")[1];
-            var threshold = GetThresholdofHex(hex);
+            var threshold = GetThresholdOfColor(hex);
             if (DarkMode && threshold < 100) {
               added_node.style.cssText = "--color: undefined;";
             }
@@ -1131,7 +1131,7 @@ function AddBetterSEQTAElements(toggle) {
                 if (students[index]?.house) {
                   houseelement.style.background = students[index].house_colour;
                   try {
-                    let colorresult = GetThresholdofHex(
+                    let colorresult = GetThresholdOfColor(
                       students[index]?.house_colour,
                     );
 
@@ -1449,34 +1449,36 @@ function CheckCurrentLesson(lesson, num) {
   }
 }
 
-export function GetThresholdofHex(color) {
-  // Regular expression for matching RGBA colors
-  const rgbaRegex = /rgba?\(([^)]+)\)/g;
+export function GetThresholdOfColor(color) {
+  // Case-insensitive regular expression for matching RGBA colors
+  const rgbaRegex = /rgba?\(([^)]+)\)/gi;
 
   // Check if the color string is a gradient (linear or radial)
   if (color.includes("gradient")) {
-    let gradient = color;
+    let gradientThresholds = [];
 
     // Find and replace all instances of RGBA in the gradient
     let match;
     while ((match = rgbaRegex.exec(color)) !== null) {
       // Extract the individual components (r, g, b, a)
       const rgbaString = match[1];
-      const [r, g, b, a] = rgbaString.split(",").map(str => str.trim());
+      const [r, g, b] = rgbaString.split(",").map(str => str.trim());
 
       // Compute the threshold using your existing algorithm
       const threshold = Math.sqrt(r ** 2 + g ** 2 + b ** 2);
 
-      // Replace the original RGBA string with the computed threshold
-      // Note: You can modify this part based on what you actually want to do with the threshold
-      gradient = gradient.replace(`rgba(${rgbaString})`, `rgba(${threshold}, ${threshold}, ${threshold}, ${a})`);
+      // Store the computed threshold
+      gradientThresholds.push(threshold);
     }
 
-    return gradient;
+    // Calculate the average threshold
+    const averageThreshold = gradientThresholds.reduce((acc, val) => acc + val, 0) / gradientThresholds.length;
+    
+    return averageThreshold;
 
   } else {
     // Handle the color as a simple RGBA (or hex, or whatever the Color library supports)
-    const rgb = Color.rgb(color).string();
+    const rgb = Color.rgb(color).object();
     return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2);
   }
 }
@@ -1568,7 +1570,7 @@ function callHomeTimetable(date, change) {
                 lessonArray[i].colour = "--item-colour: #8e8e8e;";
               } else {
                 lessonArray[i].colour = `--item-colour: ${subject.value};`;
-                let result = GetThresholdofHex(subject.value);
+                let result = GetThresholdOfColor(subject.value);
 
                 if (result > 300) {
                   lessonArray[i].invert = true;
@@ -1894,7 +1896,7 @@ function CreateUpcomingSection(assessments) {
         assessments[i].colour = "--item-colour: #8e8e8e;";
       } else {
         assessments[i].colour = `--item-colour: ${subject.value};`;
-        GetThresholdofHex(subject.value); // result (originally) result = GetThresholdofHex
+        GetThresholdOfColor(subject.value); // result (originally) result = GetThresholdOfColor
       }
     }
 
@@ -1907,7 +1909,7 @@ function CreateUpcomingSection(assessments) {
         element.colour = "--item-colour: #8e8e8e;";
       } else {
         element.colour = `--item-colour: ${colour.value};`;
-        let result = GetThresholdofHex(colour.value);
+        let result = GetThresholdOfColor(colour.value);
         if (result > 300) {
           element.invert = true;
         }
@@ -2340,7 +2342,7 @@ function SendHomePage() {
 
                 var colour = NoticesPayload.payload[i].colour;
                 if (typeof colour == "string") {
-                  let rgb = GetThresholdofHex(colour);
+                  let rgb = GetThresholdOfColor(colour);
                   if (rgb < 100 && result.DarkMode) {
                     colour = undefined;
                   }

src/seqta/ui/Animation.js

@@ -25,8 +25,8 @@ export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) {
   // Iterate through each class name to update its animation duration
   bgClasses.forEach((className, index) => {
     const elements = document.getElementsByClassName(className);
+
     if (elements.length === 0) {
-      console.error(`No elements found with class name: ${className}`);
       return;
     }
     

src/seqta/ui/colors/Manager.js

@@ -1,5 +1,5 @@
 /* global chrome */
-import { GetThresholdofHex } from "../../../SEQTA.js";
+import { GetThresholdOfColor } from "../../../SEQTA.js";
 import { lightenAndPaleColor } from "./lightenAndPaleColor.js";
 import ColorLuminance from "./ColorLuminance.js";
 
@@ -36,10 +36,8 @@ export function updateAllColors(storedSetting, newColor = null) {
     };
   }
 
-  console.log("modeProps:", modeProps);
-
   // Dynamic properties, always applied
-  const rgbThreshold = GetThresholdofHex(selectedColor);
+  const rgbThreshold = GetThresholdOfColor(selectedColor);
   const isBright = rgbThreshold > 210;
   const dynamicProps = {
     "--text-color": isBright ? "black" : "white",

src/seqta/ui/colors/lightenAndPaleColor.js

@@ -2,11 +2,14 @@ import Color from "color";
 
 
 export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55) {
-  console.log(`Input color: ${inputColor}`);
-  if (inputColor.includes("gradient")) return findMatchingColor(inputColor);
+  if (inputColor.includes("gradient")) {
+    const baseColor = findMatchingColor(inputColor);
 
-  // Step 1: Convert the input RGB color to a 'color' object
-  const colorObj = Color(`rgb(${inputColor.match(/\d+/g).join(",")})`);
+    return lightenAndPaleColor(baseColor, lightenFactor, paleFactor);
+  }
+
+  // Step 1: Convert the input color to a 'color' object
+  const colorObj = Color(inputColor);
 
   // Step 2: Convert to HSL and get the object
   const hslObj = colorObj.hsl().object();
@@ -21,8 +24,6 @@ export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor
   // Step 5: Convert back to RGB
   const result = newColorObj.rgb().string();
 
-  console.log(`Input color: ${inputColor} | Output color: ${result}`);
-
   return result;
 }
 // Utility function to average an array of Color objects
@@ -55,11 +56,9 @@ function findMatchingColor(cssGradient) {
     // Step 2: Average the color stops
     const baseColor = averageColors(colorObjects);
 
-    // Step 3: Lighten and desaturate the base color
-    const matchingColor = baseColor.lighten(0.7).desaturate(0.5);
 
     // Step 4: Return the matching color in HEX format
-    return matchingColor.hex();
+    return baseColor.hex();
   } catch (err) {
     console.error(`Error: ${err.message}`);
     return null;