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

12 files changed, 75 insertions, 226 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
diff --git a/config/quickshell/modules/overview/OverviewWidget.qml b/config/quickshell/modules/overview/OverviewWidget.qml
index 63633602..2ea8d58a 100644
--- a/config/quickshell/modules/overview/OverviewWidget.qml
+++ b/config/quickshell/modules/overview/OverviewWidget.qml
@@ -25,7 +25,7 @@ Item {
     property var windowAddresses: HyprlandData.addresses
     property var monitorData: HyprlandData.monitors.find(m => m.id === root.monitor.id)
     property real scale: ConfigOptions.overview.scale
-    property color activeBorderColor: Appearance.m3colors.m3secondary
+    property color activeBorderColor: Appearance.m3colors.m3accentSecondary
 
     property real workspaceImplicitWidth: Math.max(100, (monitorData?.transform % 2 === 1) ? 
         ((monitor.height - monitorData?.reserved[0] - monitorData?.reserved[2]) * root.scale / monitor.scale) :
@@ -71,7 +71,7 @@ Item {
         property real padding: 10
         anchors.fill: parent
         anchors.margins: Appearance.sizes.elevationMargin
-        border.color : ColorUtils.transparentize(Appearance.m3colors.m3outline, 0.2)
+        border.color : ColorUtils.transparentize(Appearance.m3colors.m3borderPrimary, 0.2)
         border.width : 2
 
         implicitWidth: workspaceColumnLayout.implicitWidth + padding * 2
@@ -170,7 +170,7 @@ Item {
                                 color: "transparent"
                                 radius: parent.radius
                                 border.width: 1
-                                border.color: hoveredWhileDragging ? hoveredBorderColor : ColorUtils.transparentize(Appearance.m3colors.m3outline, 0.6)
+                                border.color: hoveredWhileDragging ? hoveredBorderColor : ColorUtils.transparentize(Appearance.m3colors.m3borderPrimary, 0.6)
                                 z: 10 // Ensure it's on top
                             }
 
diff --git a/config/quickshell/modules/overview/OverviewWindow.qml b/config/quickshell/modules/overview/OverviewWindow.qml
index 273eff7e..449a98c4 100644
--- a/config/quickshell/modules/overview/OverviewWindow.qml
+++ b/config/quickshell/modules/overview/OverviewWindow.qml
@@ -32,7 +32,7 @@ Rectangle { // Window
     property var xwaylandIndicatorToIconRatio: 0.35
     property var iconToWindowRatioCompact: 0.6
     property var iconPath: Quickshell.iconPath(AppSearch.guessIcon(windowData?.class), "image-missing")
-    property bool compactMode: Appearance.font.pixelSize.smaller * 4 > targetWindowHeight || Appearance.font.pixelSize.smaller * 4 > targetWindowWidth
+    property bool compactMode: Appearance.font.pixelSize.textSmall * 4 > targetWindowHeight || Appearance.font.pixelSize.textSmall * 4 > targetWindowWidth
 
     property bool indicateXWayland: (ConfigOptions.overview.showXwaylandIndicator && windowData?.xwayland) ?? false
     
@@ -44,7 +44,7 @@ Rectangle { // Window
     radius: Appearance.rounding.windowRounding * root.scale
     color: pressed ? Appearance.colors.colLayer2Active : hovered ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2
     // border.color : ColorUtils.transparentize(Appearance.m3colors.m3outline, 0.9)
-    border.color : ColorUtils.transparentize(Appearance.m3colors.m3outline, 0.4)
+    border.color : ColorUtils.transparentize(Appearance.m3colors.m3borderPrimary, 0.4)
     border.pixelAligned : false
     border.width : 2
 
@@ -65,7 +65,7 @@ Rectangle { // Window
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.right: parent.right
-        spacing: Appearance.font.pixelSize.smaller * 0.5
+        spacing: Appearance.font.pixelSize.textSmall * 0.5
 
         IconImage {
             id: windowIcon
@@ -85,7 +85,7 @@ Rectangle { // Window
             Layout.fillWidth: true
             Layout.fillHeight: true
             horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: Appearance.font.pixelSize.smaller
+            font.pixelSize: Appearance.font.pixelSize.textSmall
             font.italic: indicateXWayland ? true : false
             elide: Text.ElideRight
             text: windowData?.title ?? ""
diff --git a/config/quickshell/modules/overview/SearchItem.qml b/config/quickshell/modules/overview/SearchItem.qml
index 1363b88d..1357d03c 100644
--- a/config/quickshell/modules/overview/SearchItem.qml
+++ b/config/quickshell/modules/overview/SearchItem.qml
@@ -22,7 +22,7 @@ RippleButton {
     property string itemName: entry?.name
     property string itemIcon: entry?.icon ?? ""
     property var itemExecute: entry?.execute
-    property string fontType: entry?.fontType ?? "main"
+    property string fontType: entry?.fontType ?? "uiFont"
     property string itemClickActionName: entry?.clickActionName
     property string bigText: entry?.bigText ?? ""
     property string materialSymbol: entry?.materialSymbol ?? ""
@@ -31,7 +31,7 @@ RippleButton {
     property string highlightPrefix: `<u><font color="${Appearance.colors.colPrimary}">`
     property string highlightSuffix: `</font></u>`
     function highlightContent(content, query) {
-        if (!query || query.length === 0 || content == query || fontType === "monospace")
+        if (!query || query.length === 0 || content == query || fontType === "codeFont")
             return StringUtils.escapeHtml(content);
 
         let contentLower = content.toLowerCase();
@@ -80,7 +80,7 @@ RippleButton {
     buttonRadius: Appearance.rounding.normal
     colBackground: (root.down || root.keyboardDown) ? Appearance.colors.colLayer1Active : 
         ((root.hovered || root.focus) ? Appearance.colors.colLayer1Hover : 
-        ColorUtils.transparentize(Appearance.m3colors.m3surfaceContainerHigh, 1))
+        ColorUtils.transparentize(Appearance.m3colors.m3layerBackground3, 1))
     colBackgroundHover: Appearance.colors.colLayer1Hover
     colRipple: Appearance.colors.colLayer1Active
 
@@ -140,7 +140,7 @@ RippleButton {
             MaterialSymbol {
                 text: root.materialSymbol
                 iconSize: 30
-                color: Appearance.m3colors.m3onSurface
+                color: Appearance.m3colors.m3surfaceText
             }
         }
 
@@ -148,8 +148,8 @@ RippleButton {
             id: bigTextComponent
             StyledText {
                 text: root.bigText
-                font.pixelSize: Appearance.font.pixelSize.larger
-                color: Appearance.m3colors.m3onSurface
+                font.pixelSize: Appearance.font.pixelSize.textLarge
+                color: Appearance.m3colors.m3surfaceText
             }
         }
 
@@ -160,7 +160,7 @@ RippleButton {
             Layout.alignment: Qt.AlignVCenter
             spacing: 0
             StyledText {
-                font.pixelSize: Appearance.font.pixelSize.smaller
+                font.pixelSize: Appearance.font.pixelSize.textSmall
                 color: Appearance.colors.colSubtext
                 visible: root.itemType && root.itemType != qsTr("App")
                 text: root.itemType
@@ -178,8 +178,8 @@ RippleButton {
                             id: activeText
                             anchors.centerIn: parent
                             text: "check"
-                            font.pixelSize: Appearance.font.pixelSize.normal
-                            color: Appearance.m3colors.m3onPrimary
+                            font.pixelSize: Appearance.font.pixelSize.textMedium
+                            color: Appearance.m3colors.m3accentPrimaryText
                         }
                     }
                 }
@@ -187,9 +187,9 @@ RippleButton {
                     Layout.fillWidth: true
                     id: nameText
                     textFormat: Text.StyledText // RichText also works, but StyledText ensures elide work
-                    font.pixelSize: Appearance.font.pixelSize.small
+                    font.pixelSize: Appearance.font.pixelSize.textBase
                     font.family: Appearance.font.family[root.fontType]
-                    color: Appearance.m3colors.m3onSurface
+                    color: Appearance.m3colors.m3surfaceText
                     horizontalAlignment: Text.AlignLeft
                     elide: Text.ElideRight
                     text: `${root.displayContent}`
@@ -211,7 +211,7 @@ RippleButton {
             Layout.fillWidth: false
             visible: (root.hovered || root.focus)
             id: clickAction
-            font.pixelSize: Appearance.font.pixelSize.normal
+            font.pixelSize: Appearance.font.pixelSize.textMedium
             color: Appearance.colors.colSubtext
             horizontalAlignment: Text.AlignRight
             text: root.itemClickActionName
diff --git a/config/quickshell/modules/overview/SearchWidget.qml b/config/quickshell/modules/overview/SearchWidget.qml
index fed710ec..f84aa558 100644
--- a/config/quickshell/modules/overview/SearchWidget.qml
+++ b/config/quickshell/modules/overview/SearchWidget.qml
@@ -201,8 +201,8 @@ Item { // Wrapper
                 MaterialSymbol {
                     id: searchIcon
                     Layout.leftMargin: 15
-                    iconSize: Appearance.font.pixelSize.huge
-                    color: Appearance.m3colors.m3onSurface
+                    iconSize: Appearance.font.pixelSize.iconLarge
+                    color: Appearance.m3colors.m3surfaceText
                     text: root.searchingText.startsWith(ConfigOptions.search.prefix.clipboard) ? 'content_paste_search' : ''
                 }
                 TextField { // Search box
@@ -213,15 +213,15 @@ Item { // Wrapper
                     padding: 15
                     renderType: Text.NativeRendering
                     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
                     }
-                    color: activeFocus ? Appearance.m3colors.m3onSurface : Appearance.m3colors.m3onSurfaceVariant
-                    selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
-                    selectionColor: Appearance.m3colors.m3secondaryContainer
+                    color: activeFocus ? Appearance.m3colors.m3surfaceText : Appearance.m3colors.m3secondaryText
+                    selectedTextColor: Appearance.m3colors.m3selectionText
+                    selectionColor: Appearance.m3colors.m3selectionBackground
                     placeholderText: qsTr("Search, calculate or run")
-                    placeholderTextColor: Appearance.m3colors.m3outline
+                    placeholderTextColor: Appearance.m3colors.m3borderPrimary
                     implicitWidth: root.searchingText == "" ? Appearance.sizes.searchWidthCollapsed : Appearance.sizes.searchWidth
 
                     Behavior on implicitWidth {
@@ -260,7 +260,7 @@ Item { // Wrapper
                 visible: root.showResults
                 Layout.fillWidth: true
                 height: 1
-                color: Appearance.m3colors.m3outlineVariant
+                color: Appearance.m3colors.m3borderSecondary
             }
 
             ListView { // App results