Refactored for better colour and font expose and cleaned up unused code

8 files changed, 47 insertions, 198 deletions

diff --git a/config/quickshell/modules/common/Appearance.qml b/config/quickshell/modules/common/Appearance.qml
index 29eca00c..675f1d1e 100644
--- a/config/quickshell/modules/common/Appearance.qml
+++ b/config/quickshell/modules/common/Appearance.qml
@@ -18,53 +18,47 @@ Singleton {
     property real transparency: 0.5
     property real contentTransparency: 0.1
     property real workpaceTransparency: 0.8
-    // property real transparency: 0.15
-    // property real contentTransparency: 0.5
     property string background_image: Directories.config + "/rofi/.current_wallpaper"
     
     m3colors: QtObject {
         property bool darkmode: true
         property bool transparent: true
 
-        property color m3background: "#161217"
-        property color m3onBackground: "#EAE0E7"
-        property color m3surfaceContainerLow: "#1F1A1F"
-        property color m3surfaceContainer: "#231E23"
-        property color m3surfaceContainerHigh: "#2D282E"
-        property color m3surfaceContainerHighest: "#383339"
-        property color m3onSurface: "#EAE0E7"
-        property color m3onSurfaceVariant: "#CFC3CD"
-        property color m3outline: "#cba6f7"
-        property color m3scrim: "#000000"
-        property color m3shadow: "#000000"
-        property color m3primary: "#E5B6F2"
-        property color m3primaryContainer: "#5D386A"
-        property color m3secondary: "#D5C0D7"
-        property color m3secondaryContainer: "#534457"
-        property color m3onPrimary: "#452152"
-        property color m3onPrimaryContainer: "#F9D8FF"
-        property color m3onSecondaryContainer: "#F2DCF3"
-        property color m3outlineVariant: "#4C444D"
+        property color m3windowBackground: "#161217"
+        property color m3primaryText: "#EAE0E7"
+        property color m3layerBackground1: "#1F1A1F"
+        property color m3layerBackground2: "#231E23"
+        property color m3layerBackground3: "#2D282E"
+        property color m3surfaceText: "#EAE0E7"
+        property color m3secondaryText: "#CFC3CD"
+        property color m3borderPrimary: "#cba6f7"
+        property color m3shadowColor: "#000000"
+        property color m3accentPrimary: "#E5B6F2"
+        property color m3accentSecondary: "#D5C0D7"
+        property color m3selectionBackground: "#534457"
+        property color m3accentPrimaryText: "#452152"
+        property color m3selectionText: "#F2DCF3"
+        property color m3borderSecondary: "#4C444D"
 
         property color colTooltip: "#1e1e2e"
         property color colOnTooltip: "#F8F9FA"
     }
 
     colors: QtObject {
-        property color colSubtext: m3colors.m3outline
-        property color colLayer0: ColorUtils.transparentize(m3colors.m3background, root.transparency)
-        property color colLayer1: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainerLow, m3colors.m3background, 0.7), root.contentTransparency);
-        property color colOnLayer1: m3colors.m3onSurfaceVariant;
-        property color colLayer2: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainer, m3colors.m3surfaceContainerHigh, 0.55), root.contentTransparency)
-        property color colOnLayer2: m3colors.m3onSurface;
+        property color colSubtext: m3colors.m3borderPrimary
+        property color colLayer0: ColorUtils.transparentize(m3colors.m3windowBackground, root.transparency)
+        property color colLayer1: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3layerBackground1, m3colors.m3windowBackground, 0.7), root.contentTransparency);
+        property color colOnLayer1: m3colors.m3secondaryText;
+        property color colLayer2: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3layerBackground2, m3colors.m3layerBackground3, 0.55), root.contentTransparency)
+        property color colOnLayer2: m3colors.m3surfaceText;
         property color colLayer1Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer1, colOnLayer1, 0.92), root.contentTransparency)
         property color colLayer1Active: ColorUtils.transparentize(ColorUtils.mix(colLayer1, colOnLayer1, 0.85), root.contentTransparency);
         property color colLayer2Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer2, colOnLayer2, 0.90), root.contentTransparency)
         property color colLayer2Active: ColorUtils.transparentize(ColorUtils.mix(colLayer2, colOnLayer2, 0.80), root.contentTransparency);
-        property color colPrimary: m3colors.m3primary
+        property color colPrimary: m3colors.m3accentPrimary
         property color colPrimaryHover: ColorUtils.mix(colors.colPrimary, colLayer1Hover, 0.87)
         property color colPrimaryActive: ColorUtils.mix(colors.colPrimary, colLayer1Active, 0.7)
-        property color colShadow: ColorUtils.transparentize(m3colors.m3shadow, 0.7)
+        property color colShadow: ColorUtils.transparentize(m3colors.m3shadowColor, 0.7)
     }
 
     rounding: QtObject {
@@ -82,23 +76,16 @@ Singleton {
 
     font: QtObject {
         property QtObject family: QtObject {
-            property string main: "Open Sans"
-            property string title: "JetBrains Mono NF"
-            property string iconMaterial: "FiraConde Nerd Font"
-            property string iconNerd: "SpaceMono NF"
-            property string monospace: "JetBrains Mono NF"
-            property string reading: "Readex Pro"
+            property string uiFont: "Open Sans"
+            property string iconFont: "FiraConde Nerd Font"
+            property string codeFont: "JetBrains Mono NF"
         }
         property QtObject pixelSize: QtObject {
-            property int smallest: 10
-            property int smaller: 13
-            property int small: 15
-            property int normal: 16
-            property int large: 17
-            property int larger: 19
-            property int huge: 22
-            property int hugeass: 23
-            property int title: 28
+            property int textSmall: 13
+            property int textBase: 15
+            property int textMedium: 16
+            property int textLarge: 19
+            property int iconLarge: 22
         }
     }
 
diff --git a/config/quickshell/modules/common/Directories.qml b/config/quickshell/modules/common/Directories.qml
index 9ddf43bd..694c73df 100644
--- a/config/quickshell/modules/common/Directories.qml
+++ b/config/quickshell/modules/common/Directories.qml
@@ -11,9 +11,10 @@ Singleton {
     // XDG Dirs, with "file://"
     readonly property string config: StandardPaths.standardLocations(StandardPaths.ConfigLocation)[0]
     readonly property string state: StandardPaths.standardLocations(StandardPaths.StateLocation)[0]
+    readonly property string gen_cache: StandardPaths.standardLocations(StandardPaths.GenericCacheLocation)[0]
     
     // Other dirs used by the shell, without "file://"
     property string shellConfig: FileUtils.trimFileProtocol(`${Directories.config}/quickshell`)
     property string shellConfigPath: `${Directories.shellConfig}/config.json`
-    property string generatedMaterialThemePath: `${Directories.shellConfig}/qml_color.json`
+    property string generatedMaterialThemePath: `${Directories.gen_cache}/hellwal/qml_color.json`
 }
diff --git a/config/quickshell/modules/common/functions/string_utils.js b/config/quickshell/modules/common/functions/string_utils.js
index c22671eb..c31edf49 100644
--- a/config/quickshell/modules/common/functions/string_utils.js
+++ b/config/quickshell/modules/common/functions/string_utils.js
@@ -42,141 +42,6 @@ function shellSingleQuoteEscape(str) {
         .replace(/'/g, "'\\''");
 }
 
-/**
- * Splits markdown blocks into three different types: text, think, and code.
- * @param { string } markdown 
- */
-function splitMarkdownBlocks(markdown) {
-    const regex = /```(\w+)?\n([\s\S]*?)```|<think>([\s\S]*?)<\/think>/g;
-    /**
-     * @type {{type: "text" | "think" | "code"; content: string; lang: string | undefined; completed: boolean | undefined}[]}
-     */
-    let result = [];
-    let lastIndex = 0;
-    let match;
-    while ((match = regex.exec(markdown)) !== null) {
-        if (match.index > lastIndex) {
-            const text = markdown.slice(lastIndex, match.index);
-            if (text.trim()) {
-                result.push({ type: "text", content: text });
-            }
-        }
-        if (match[0].startsWith('```')) {
-            if (match[2] && match[2].trim()) {
-                result.push({ type: "code", lang: match[1] || "", content: match[2], completed: true });
-            }
-        } else if (match[0].startsWith('<think>')) {
-            if (match[3] && match[3].trim()) {
-                result.push({ type: "think", content: match[3], completed: true });
-            }
-        }
-        lastIndex = regex.lastIndex;
-    }
-    // Handle any remaining text after the last match
-    if (lastIndex < markdown.length) {
-        const text = markdown.slice(lastIndex);
-        // Check for unfinished <think> block
-        const thinkStart = text.indexOf('<think>');
-        const codeStart = text.indexOf('```');
-        if (
-            thinkStart !== -1 &&
-            (codeStart === -1 || thinkStart < codeStart)
-        ) {
-            const beforeThink = text.slice(0, thinkStart);
-            if (beforeThink.trim()) {
-                result.push({ type: "text", content: beforeThink });
-            }
-            const thinkContent = text.slice(thinkStart + 7);
-            if (thinkContent.trim()) {
-                result.push({ type: "think", content: thinkContent, completed: false });
-            }
-        } else if (codeStart !== -1) {
-            const beforeCode = text.slice(0, codeStart);
-            if (beforeCode.trim()) {
-                result.push({ type: "text", content: beforeCode });
-            }
-            // Try to detect language after ```
-            const codeLangMatch = text.slice(codeStart + 3).match(/^(\w+)?\n/);
-            let lang = "";
-            let codeContentStart = codeStart + 3;
-            if (codeLangMatch) {
-                lang = codeLangMatch[1] || "";
-                codeContentStart += codeLangMatch[0].length;
-            } else if (text[codeStart + 3] === '\n') {
-                codeContentStart += 1;
-            }
-            const codeContent = text.slice(codeContentStart);
-            if (codeContent.trim()) {
-                result.push({ type: "code", lang, content: codeContent, completed: false });
-            }
-        } else if (text.trim()) {
-            result.push({ type: "text", content: text });
-        }
-    }
-    // console.log(JSON.stringify(result, null, 2));
-    return result;
-}
-
-/**
- * Returns the original string with backslashes escaped
- * @param { string } str 
- * @returns { string }
- */
-function escapeBackslashes(str) {
-    return str.replace(/\\/g, '\\\\');
-}
-
-/**
- * Wraps words to supplied maximum length
- * @param { string | null } str 
- * @param { number } maxLen 
- * @returns { string }
- */
-function wordWrap(str, maxLen) {
-    if (!str) return "";
-    let words = str.split(" ");
-    let lines = [];
-    let current = "";
-    for (let i = 0; i < words.length; ++i) {
-        if ((current + (current.length > 0 ? " " : "") + words[i]).length > maxLen) {
-            if (current.length > 0) lines.push(current);
-            current = words[i];
-        } else {
-            current += (current.length > 0 ? " " : "") + words[i];
-        }
-    }
-    if (current.length > 0) lines.push(current);
-    return lines.join("\n");
-}
-
-function cleanMusicTitle(title) {
-    if (!title) return "";
-    // Brackets
-    title = title.replace(/^ *\([^)]*\) */g, " "); // Round brackets
-    title = title.replace(/^ *\[[^\]]*\] */g, " "); // Square brackets
-    title = title.replace(/^ *\{[^\}]*\} */g, " "); // Curly brackets
-    // Japenis brackets
-    title = title.replace(/^ *【[^】]*】/, "") // Touhou
-    title = title.replace(/^ *《[^》]*》/, "") // ??
-    title = title.replace(/^ *「[^」]*」/, "") // OP/ED
-    title = title.replace(/^ *『[^』]*』/, "") // OP/ED
-
-    return title;
-}
-
-function friendlyTimeForSeconds(seconds) {
-    if (isNaN(seconds) || seconds < 0) return "0:00";
-    seconds = Math.floor(seconds);
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = seconds % 60;
-    if (h > 0) {
-        return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
-    } else {
-        return `${m}:${s.toString().padStart(2, '0')}`;
-    }
-}
-
 function escapeHtml(str) {
     if (typeof str !== 'string') return str;
     return str
diff --git a/config/quickshell/modules/common/widgets/DialogButton.qml b/config/quickshell/modules/common/widgets/DialogButton.qml
index 9e19a507..b799336a 100644
--- a/config/quickshell/modules/common/widgets/DialogButton.qml
+++ b/config/quickshell/modules/common/widgets/DialogButton.qml
@@ -18,7 +18,7 @@ RippleButton {
     buttonRadius: Appearance?.rounding.full ?? 9999
 
     property color colEnabled: Appearance?.colors.colPrimary
-    property color colDisabled: Appearance?.m3colors.m3outline
+    property color colDisabled: Appearance?.m3colors.m3borderPrimary
 
     contentItem: StyledText {
         id: buttonTextWidget
@@ -27,7 +27,7 @@ RippleButton {
         anchors.rightMargin: 15
         text: buttonText
         horizontalAlignment: Text.AlignHCenter
-        font.pixelSize: Appearance?.font.pixelSize.small ?? 12
+        font.pixelSize: Appearance?.font.pixelSize.textBase ?? 12
         color: button.enabled ? button.colEnabled : button.colDisabled
 
         Behavior on color {
diff --git a/config/quickshell/modules/common/widgets/MaterialSymbol.qml b/config/quickshell/modules/common/widgets/MaterialSymbol.qml
index dbbfff00..214f838e 100644
--- a/config/quickshell/modules/common/widgets/MaterialSymbol.qml
+++ b/config/quickshell/modules/common/widgets/MaterialSymbol.qml
@@ -1,17 +1,16 @@
 import "root:/modules/common/"
 import QtQuick
-import QtQuick.Layouts
 
 Text {
     id: root
-    property real iconSize: Appearance?.font.pixelSize.small ?? 16
+    property real iconSize: Appearance?.font.pixelSize.textBase ?? 16
     property real fill: 0
     renderType: Text.NativeRendering
     font.hintingPreference: Font.PreferFullHinting
     verticalAlignment: Text.AlignVCenter
-    font.family: Appearance?.font.family.iconMaterial ?? "Material Symbols Rounded"
+    font.family: Appearance?.font.family.iconFont ?? "Material Symbols Rounded"
     font.pixelSize: iconSize
-    color: Appearance.m3colors.m3onBackground
+    color: Appearance.m3colors.m3primaryText
 
     Behavior on fill {
         NumberAnimation {
@@ -23,8 +22,6 @@ Text {
 
     font.variableAxes: { 
         "FILL": fill,
-        // "wght": font.weight,
-        // "GRAD": 0,
         "opsz": iconSize,
     }
 }
diff --git a/config/quickshell/modules/common/widgets/StyledText.qml b/config/quickshell/modules/common/widgets/StyledText.qml
index 6eef5785..988c136d 100644
--- a/config/quickshell/modules/common/widgets/StyledText.qml
+++ b/config/quickshell/modules/common/widgets/StyledText.qml
@@ -1,14 +1,13 @@
 import "root:/modules/common"
 import QtQuick
-import QtQuick.Layouts
 
 Text {
     renderType: Text.NativeRendering
     verticalAlignment: Text.AlignVCenter
     font {
         hintingPreference: Font.PreferFullHinting
-        family: Appearance?.font.family.main ?? "sans-serif"
-        pixelSize: Appearance?.font.pixelSize.small ?? 15
+        family: Appearance?.font.family.uiFont ?? "sans-serif"
+        pixelSize: Appearance?.font.pixelSize.textBase ?? 15
     }
-    color: Appearance?.m3colors.m3onBackground ?? "black"
+    color: Appearance?.m3colors.m3primaryText ?? "black"
 }
diff --git a/config/quickshell/modules/common/widgets/StyledTextArea.qml b/config/quickshell/modules/common/widgets/StyledTextArea.qml
index 1ea9a349..af3cf34d 100644
--- a/config/quickshell/modules/common/widgets/StyledTextArea.qml
+++ b/config/quickshell/modules/common/widgets/StyledTextArea.qml
@@ -4,12 +4,12 @@ import QtQuick.Controls
 
 TextArea {
     renderType: Text.NativeRendering
-    selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
-    selectionColor: Appearance.m3colors.m3secondaryContainer
-    placeholderTextColor: Appearance.m3colors.m3outline
+    selectedTextColor: Appearance.m3colors.m3selectionText
+    selectionColor: Appearance.m3colors.m3selectionBackground
+    placeholderTextColor: Appearance.m3colors.m3borderPrimary
     font {
-        family: Appearance?.font.family.main ?? "sans-serif"
-        pixelSize: Appearance?.font.pixelSize.small ?? 15
+        family: Appearance?.font.family.uiFont ?? "sans-serif"
+        pixelSize: Appearance?.font.pixelSize.textBase ?? 15
         hintingPreference: Font.PreferFullHinting
     }
 }
diff --git a/config/quickshell/modules/common/widgets/StyledToolTip.qml b/config/quickshell/modules/common/widgets/StyledToolTip.qml
index 2ca16df1..aaaad813 100644
--- a/config/quickshell/modules/common/widgets/StyledToolTip.qml
+++ b/config/quickshell/modules/common/widgets/StyledToolTip.qml
@@ -50,7 +50,7 @@ ToolTip {
                 id: tooltipTextObject
                 anchors.centerIn: parent
                 text: content
-                font.pixelSize: Appearance?.font.pixelSize.smaller ?? 14
+                font.pixelSize: Appearance?.font.pixelSize.textSmall ?? 14
                 font.hintingPreference: Font.PreferNoHinting // Prevent shaky text
                 color: Appearance?.m3colors.colOnTooltip ?? "#FFFFFF"
                 wrapMode: Text.Wrap