diff --git a/quickshell/Common/Theme.qml b/quickshell/Common/Theme.qml
index 16c0ad4b..354d70aa 100644
--- a/quickshell/Common/Theme.qml
+++ b/quickshell/Common/Theme.qml
@@ -581,6 +581,45 @@ Singleton {
     readonly property int layerOutlineWidth: BlurService.enabled && layerOutlineOpacity > 0 ? 1 : 0
     property color surfaceTextHover: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.08)
     property color surfaceTextAlpha: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.3)
+
+    function roleColor(mode) {
+        switch (mode) {
+        case "primary":
+        case "pri":
+            return primary;
+        case "primaryContainer":
+            return primaryContainer;
+        case "secondary":
+        case "sec":
+            return secondary;
+        case "secondaryContainer":
+            return secondaryContainer;
+        case "tertiary":
+        case "ter":
+            return tertiary;
+        case "tertiaryContainer":
+            return tertiaryContainer;
+        case "surfaceText":
+            return surfaceText;
+        case "surfaceVariant":
+            return surfaceVariant;
+        case "s":
+            return surface;
+        case "sc":
+            return surfaceContainer;
+        case "sch":
+            return surfaceContainerHigh;
+        case "schh":
+            return surfaceContainerHighest;
+        case "sth":
+            return surfaceTextHover;
+        case "error":
+        case "err":
+            return error;
+        default:
+            return "transparent";
+        }
+    }
     property color surfaceTextLight: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.06)
     property color surfaceTextMedium: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.7)
 
diff --git a/quickshell/Modules/Settings/WorkspaceColorRow.qml b/quickshell/Modules/Settings/ColorDropdownRow.qml
similarity index 85%
rename from quickshell/Modules/Settings/WorkspaceColorRow.qml
rename to quickshell/Modules/Settings/ColorDropdownRow.qml
index 8f802560..7b3bce55 100644
--- a/quickshell/Modules/Settings/WorkspaceColorRow.qml
+++ b/quickshell/Modules/Settings/ColorDropdownRow.qml
@@ -30,42 +30,14 @@ Column {
 
     function colorForValue(value) {
         switch (value) {
-        case "primary":
-        case "pri":
-            return Theme.primary;
-        case "primaryContainer":
-            return Theme.primaryContainer;
-        case "secondary":
-        case "sec":
-            return Theme.secondary;
-        case "secondaryContainer":
-            return Theme.secondaryContainer;
-        case "tertiary":
-        case "ter":
-            return Theme.tertiary;
-        case "tertiaryContainer":
-            return Theme.tertiaryContainer;
-        case "surfaceText":
-            return Theme.surfaceText;
-        case "s":
-            return Theme.surface;
-        case "sc":
-            return Theme.surfaceContainer;
-        case "sch":
-            return Theme.surfaceContainerHigh;
-        case "schh":
-            return Theme.surfaceContainerHighest;
-        case "sth":
-            return Theme.surfaceTextHover;
-        case "error":
-        case "err":
-            return Theme.error;
         case "custom":
             return root.customColor;
         case "none":
             return "transparent";
-        default:
+        case "default":
             return root.defaultColor;
+        default:
+            return Theme.roleColor(value);
         }
     }
 
diff --git a/quickshell/Modules/Settings/DankBarTab.qml b/quickshell/Modules/Settings/DankBarTab.qml
index 633e2f7f..578c3d83 100644
--- a/quickshell/Modules/Settings/DankBarTab.qml
+++ b/quickshell/Modules/Settings/DankBarTab.qml
@@ -858,13 +858,6 @@ Item {
                 }
             }
 
-            SettingsControlledByFrame {
-                visible: dankBarTab.appearanceOnly && SettingsData.frameEnabled
-                parentModal: dankBarTab.parentModal
-                settingLabel: I18n.tr("Bar spacing and size")
-                reason: I18n.tr("Managed by Frame")
-            }
-
             SettingsCard {
                 tab: "appearance"
                 iconName: "space_bar"
diff --git a/quickshell/Modules/Settings/ThemeColorsTab.qml b/quickshell/Modules/Settings/ThemeColorsTab.qml
index 7e5fb0d5..556c0d4b 100644
--- a/quickshell/Modules/Settings/ThemeColorsTab.qml
+++ b/quickshell/Modules/Settings/ThemeColorsTab.qml
@@ -1562,7 +1562,7 @@ Item {
                     }
                 }
 
-                WorkspaceColorRow {
+                ColorDropdownRow {
                     tab: "theme"
                     tags: ["widget", "background", "color", "surface", "material"]
                     settingKey: "widgetBackgroundColor"
@@ -1607,6 +1607,12 @@ Item {
                     text: I18n.tr("Control Center Tile Color")
                     description: I18n.tr("Active tile background and icon color", "control center tile color setting description")
                     options: [I18n.tr("Primary", "tile color option"), I18n.tr("Primary Container", "tile color option"), I18n.tr("Secondary", "tile color option"), I18n.tr("Surface Variant", "tile color option")]
+                    optionColorMap: ({
+                            [I18n.tr("Primary", "tile color option")]: Theme.roleColor("primary"),
+                            [I18n.tr("Primary Container", "tile color option")]: Theme.roleColor("primaryContainer"),
+                            [I18n.tr("Secondary", "tile color option")]: Theme.roleColor("secondary"),
+                            [I18n.tr("Surface Variant", "tile color option")]: Theme.roleColor("surfaceVariant")
+                        })
                     currentValue: {
                         switch (SettingsData.controlCenterTileColorMode) {
                         case "primaryContainer":
@@ -1639,6 +1645,12 @@ Item {
                     text: I18n.tr("Button Color")
                     description: I18n.tr("Color for primary action buttons")
                     options: [I18n.tr("Primary", "button color option"), I18n.tr("Primary Container", "button color option"), I18n.tr("Secondary", "button color option"), I18n.tr("Surface Variant", "button color option")]
+                    optionColorMap: ({
+                            [I18n.tr("Primary", "button color option")]: Theme.roleColor("primary"),
+                            [I18n.tr("Primary Container", "button color option")]: Theme.roleColor("primaryContainer"),
+                            [I18n.tr("Secondary", "button color option")]: Theme.roleColor("secondary"),
+                            [I18n.tr("Surface Variant", "button color option")]: Theme.roleColor("surfaceVariant")
+                        })
                     currentValue: {
                         switch (SettingsData.buttonColorMode) {
                         case "primaryContainer":
diff --git a/quickshell/Modules/Settings/WorkspaceAppearanceCard.qml b/quickshell/Modules/Settings/WorkspaceAppearanceCard.qml
index ed44040c..3b478382 100644
--- a/quickshell/Modules/Settings/WorkspaceAppearanceCard.qml
+++ b/quickshell/Modules/Settings/WorkspaceAppearanceCard.qml
@@ -184,7 +184,7 @@ SettingsCard {
     readonly property bool workspaceStateColorsVisible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isMango
     readonly property bool urgentWorkspaceColorsVisible: workspaceStateColorsVisible || CompositorService.isSway || CompositorService.isScroll || CompositorService.isMiracle
 
-    WorkspaceColorRow {
+    ColorDropdownRow {
         text: I18n.tr("Focused Color")
         settingKey: "workspaceColorMode"
         tags: ["workspace", "focused", "color", "custom"]
@@ -202,7 +202,7 @@ SettingsCard {
         opacity: 0.15
     }
 
-    WorkspaceColorRow {
+    ColorDropdownRow {
         text: I18n.tr("Occupied Color")
         settingKey: "workspaceOccupiedColorMode"
         tags: ["workspace", "occupied", "color", "custom"]
@@ -222,7 +222,7 @@ SettingsCard {
         visible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isMango
     }
 
-    WorkspaceColorRow {
+    ColorDropdownRow {
         text: I18n.tr("Unfocused Color")
         settingKey: "workspaceUnfocusedColorMode"
         tags: ["workspace", "unfocused", "color", "custom"]
@@ -242,7 +242,7 @@ SettingsCard {
         visible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isMango || CompositorService.isSway || CompositorService.isScroll || CompositorService.isMiracle
     }
 
-    WorkspaceColorRow {
+    ColorDropdownRow {
         text: I18n.tr("Urgent Color")
         settingKey: "workspaceUrgentColorMode"
         tags: ["workspace", "urgent", "color", "custom"]
@@ -277,7 +277,7 @@ SettingsCard {
         visible: SettingsData.workspaceFocusedBorderEnabled
         leftPadding: Theme.spacingM
 
-        WorkspaceColorRow {
+        ColorDropdownRow {
             width: parent.width - parent.leftPadding
             text: I18n.tr("Border Color")
             settingKey: "workspaceFocusedBorderColor"