Colors cleanup

- removed mOutlineVariant, using mOutline everywhere
- reworked all predefined color schemes (dark mode only, light mode
incoming)

Assets/ColorScheme/Catppuccin.json

@@ -6,35 +6,29 @@
         "mOnSecondary": "#11111b",
         "mTertiary": "#a6e3a1",
         "mOnTertiary": "#11111b",
-
         "mError": "#f38ba8",
         "mOnError": "#11111b",
-
         "mSurface": "#1e1e2e",
         "mOnSurface": "#cdd6f4",
         "mSurfaceVariant": "#313244",
         "mOnSurfaceVariant": "#a3b4eb",
-        "mOutline": "#45475a",
+        "mOutline": "#4c4f69",
-        "mOutlineVariant": "#2f303d",
         "mShadow": "#11111b"
     },
     "light": {
-        "mPrimary": "#8839ef",
+        "mPrimary": "#cba6f7",
         "mOnPrimary": "#eff1f5",
-        "mSecondary": "#fe640b",
+        "mSecondary": "#fab387",
         "mOnSecondary": "#eff1f5",
-        "mTertiary": "#40a02b",
+        "mTertiary": "#a6e3a1",
         "mOnTertiary": "#eff1f5",
-
+        "mError": "#f38ba8",
-        "mError": "#d20f39",
         "mOnError": "#eff1f5",
-
         "mSurface": "#eff1f5",
         "mOnSurface": "#4c4f69",
         "mSurfaceVariant": "#ccd0da",
         "mOnSurfaceVariant": "#6c6f85",
-        "mOutline": "#9ca0b0",
+        "mOutline": "#bcc0cc",
-        "mOutlineVariant": "#bcc0cc",
         "mShadow": "#dce0e8"
     }
 }

Assets/ColorScheme/Dracula.json

@@ -6,40 +6,29 @@
         "mOnSecondary": "#4e1d32",
         "mTertiary": "#8be9fd",
         "mOnTertiary": "#003543",
-
         "mError": "#FF5555",
         "mOnError": "#282A36",
-
         "mSurface": "#282A36",
         "mOnSurface": "#F8F8F2",
         "mSurfaceVariant": "#44475A",
         "mOnSurfaceVariant": "#d6d8e0",
-        "mOutline": "#4d5c86",
+        "mOutline": "#5a5e77",
-        "mOutlineVariant": "#3a4666",
         "mShadow": "#282A36"
     },
     "light": {
-        "mPrimary": "#7b5cd6",
+        "mPrimary": "#bd93f9",
         "mOnPrimary": "#ffffff",
-
+        "mSecondary": "#ff79c6",
-        "mSecondary": "#e64590",
         "mOnSecondary": "#ffffff",
-
+        "mTertiary": "#8be9fd",
-        "mTertiary": "#26b5d6",
         "mOnTertiary": "#ffffff",
-
+        "mError": "#FF5555",
-        "mError": "#cc0000",
         "mOnError": "#ffffff",
-
         "mSurface": "#f8f8f2",
         "mOnSurface": "#282a36",
-
         "mSurfaceVariant": "#e6e6ea",
         "mOnSurfaceVariant": "#44475a",
-
+        "mOutline": "#d6d8e0",
-        "mOutline": "#b3b3c6",
-        "mOutlineVariant": "#d6d8e0",
-
         "mShadow": "#00000026"
     }
 }

Assets/ColorScheme/Gruvbox.json

@@ -6,16 +6,13 @@
         "mOnSecondary": "#282828",
         "mTertiary": "#83a598",
         "mOnTertiary": "#282828",
-
         "mError": "#fb4934",
         "mOnError": "#282828",
-
         "mSurface": "#282828",
         "mOnSurface": "#fbf1c7",
         "mSurfaceVariant": "#3c3836",
         "mOnSurfaceVariant": "#ebdbb2",
-        "mOutline": "#665c54",
+        "mOutline": "#504945",
-        "mOutlineVariant": "#3c3836",
         "mShadow": "#282828"
     },
     "light": {
@@ -25,16 +22,13 @@
         "mOnSecondary": "#fbf1c7",
         "mTertiary": "#458588",
         "mOnTertiary": "#fbf1c7",
-
         "mError": "#cc241d",
         "mOnError": "#fbf1c7",
-
         "mSurface": "#fbf1c7",
         "mOnSurface": "#3c3836",
         "mSurfaceVariant": "#ebdbb2",
         "mOnSurfaceVariant": "#7c6f64",
-        "mOutline": "#928374",
+        "mOutline": "#bdae93",
-        "mOutlineVariant": "#bdae93",
         "mShadow": "#d5c4a1"
     }
 }

Assets/ColorScheme/Noctalia (default).json

@@ -6,40 +6,29 @@
     "mOnSecondary": "#f3edf7",
     "mTertiary": "#e0b7c9",
     "mOnTertiary": "#20161f",
-
     "mError": "#e9899d",
     "mOnError": "#1e1418",
-
     "mSurface": "#1c1822",
     "mOnSurface": "#e9e4f0",
     "mSurfaceVariant": "#262130",
     "mOnSurfaceVariant": "#a79ab0",
-    "mOutline": "#4d445a",
+    "mOutline": "#3e364e",
-    "mOutlineVariant": "#342c42",
     "mShadow": "#120f18"
   },
   "light": {
-    "mPrimary": "#8b4ea8",
+    "mPrimary": "#c7a1d8",
     "mOnPrimary": "#ffffff",
-
+    "mSecondary": "#a984c4",
-    "mSecondary": "#7a4d99",
     "mOnSecondary": "#ffffff",
-
+    "mTertiary": "#e0b7c9",
-    "mTertiary": "#c47a94",
     "mOnTertiary": "#ffffff",
-
+    "mError": "#e9899d",
-    "mError": "#c03d5a",
     "mOnError": "#ffffff",
-
     "mSurface": "#f5f1fa",
     "mOnSurface": "#1c1822",
-
     "mSurfaceVariant": "#e7dfee",
     "mOnSurfaceVariant": "#4a3d59",
-
+    "mOutline": "#d8cfe2",
-    "mOutline": "#b8a9c9",
-    "mOutlineVariant": "#d8cfe2",
-
     "mShadow": "#00000026"
   }
 }

Assets/ColorScheme/Nord.json

@@ -6,16 +6,13 @@
         "mOnSecondary": "#2e3440",
         "mTertiary": "#5e81ac",
         "mOnTertiary": "#2e3440",
-
         "mError": "#bf616a",
         "mOnError": "#2e3440",
-
         "mSurface": "#2e3440",
         "mOnSurface": "#d8dee9",
         "mSurfaceVariant": "#3b4252",
         "mOnSurfaceVariant": "#e5e9f0",
-        "mOutline": "#434c5e",
+        "mOutline": "#505a70",
-        "mOutlineVariant": "#2e3440",
         "mShadow": "#2e3440"
     },
     "light": {
@@ -25,16 +22,13 @@
         "mOnSecondary": "#eceff4",
         "mTertiary": "#8fbcbb",
         "mOnTertiary": "#eceff4",
-
         "mError": "#bf616a",
         "mOnError": "#eceff4",
-
         "mSurface": "#eceff4",
         "mOnSurface": "#2e3440",
         "mSurfaceVariant": "#e5e9f0",
         "mOnSurfaceVariant": "#4c566a",
-        "mOutline": "#d8dee9",
+        "mOutline": "#e5e9f0",
-        "mOutlineVariant": "#e5e9f0",
         "mShadow": "#d8dee9"
     }
 }

Assets/ColorScheme/Rosepine.json

@@ -6,35 +6,29 @@
         "mOnSecondary": "#191724",
         "mTertiary": "#f6c177",
         "mOnTertiary": "#191724",
-
         "mError": "#eb6f92",
         "mOnError": "#1f1d2e",
-
         "mSurface": "#191724",
         "mOnSurface": "#e0def4",
         "mSurfaceVariant": "#26233a",
         "mOnSurfaceVariant": "#908caa",
-        "mOutline": "#44415a",
+        "mOutline": "#403d52",
-        "mOutlineVariant": "#2e2c3c",
         "mShadow": "#191724"
     },
     "light": {
-        "mPrimary": "#286983",
+        "mPrimary": "#31748f",
         "mOnPrimary": "#faf4ed",
         "mSecondary": "#56949f",
         "mOnSecondary": "#faf4ed",
         "mTertiary": "#d7827e",
         "mOnTertiary": "#faf4ed",
-
+        "mError": "#eb6f92",
-        "mError": "#b4637a",
         "mOnError": "#faf4ed",
-
         "mSurface": "#faf4ed",
         "mOnSurface": "#575279",
         "mSurfaceVariant": "#f2e9e1",
         "mOnSurfaceVariant": "#797593",
-        "mOutline": "#9893a5",
+        "mOutline": "#cecacd",
-        "mOutlineVariant": "#cecacd",
         "mShadow": "#f2e9e1"
     }
 }

Assets/ColorScheme/Solarized.json

@@ -6,16 +6,13 @@
         "mOnSecondary": "#002b36",
         "mTertiary": "#cb4b16",
         "mOnTertiary": "#002b36",
-
         "mError": "#dc322f",
         "mOnError": "#002b36",
-
         "mSurface": "#002b36",
         "mOnSurface": "#839496",
         "mSurfaceVariant": "#073642",
         "mOnSurfaceVariant": "#657b83",
-        "mOutline": "#586e75",
+        "mOutline": "#0c5c70",
-        "mOutlineVariant": "#073642",
         "mShadow": "#002b36"
     },
     "light": {
@@ -25,16 +22,13 @@
         "mOnSecondary": "#fdf6e3",
         "mTertiary": "#cb4b16",
         "mOnTertiary": "#fdf6e3",
-
         "mError": "#dc322f",
         "mOnError": "#fdf6e3",
-
         "mSurface": "#fdf6e3",
         "mOnSurface": "#657b83",
         "mSurfaceVariant": "#eee8d5",
         "mOnSurfaceVariant": "#839496",
-        "mOutline": "#93a1a1",
+        "mOutline": "#eee8d5",
-        "mOutlineVariant": "#eee8d5",
         "mShadow": "#eee8d5"
     }
 }

Assets/ColorScheme/Tokyo Night.json

@@ -6,16 +6,13 @@
         "mOnSecondary": "#1a1b26",
         "mTertiary": "#7aa2f7",
         "mOnTertiary": "#1a1b26",
-
         "mError": "#f7768e",
         "mOnError": "#1a1b26",
-
         "mSurface": "#1a1b26",
         "mOnSurface": "#a9b1d6",
         "mSurfaceVariant": "#292e42",
         "mOnSurfaceVariant": "#787c99",
-        "mOutline": "#3b4261",
+        "mOutline": "#3d4462",
-        "mOutlineVariant": "#282c41",
         "mShadow": "#1a1b26"
     },
     "light": {
@@ -25,16 +22,13 @@
         "mOnSecondary": "#e6e7ed",
         "mTertiary": "#34548a",
         "mOnTertiary": "#e6e7ed",
-
         "mError": "#965027",
         "mOnError": "#e6e7ed",
-
         "mSurface": "#e6e7ed",
         "mOnSurface": "#343b58",
         "mSurfaceVariant": "#d5d6db",
         "mOnSurfaceVariant": "#40434f",
-        "mOutline": "#6c6e75",
+        "mOutline": "#9699a3",
-        "mOutlineVariant": "#9699a3",
         "mShadow": "#c0caf5"
     }
 }

Assets/Matugen/templates/noctalia.json

@@ -13,9 +13,10 @@
 
   "mSurface": "{{colors.surface.default.hex}}",
   "mOnSurface": "{{colors.on_surface.default.hex}}",
+
   "mSurfaceVariant": "{{colors.surface_container.default.hex}}",
   "mOnSurfaceVariant": "{{colors.on_surface_variant.default.hex}}",
-  "mOutline": "{{colors.outline.default.hex}}",
+  
-  "mOutlineVariant": "{{colors.outline_variant.default.hex}}",
+  "mOutline": "{{colors.outline_variant.default.hex}}",
   "mShadow": "{{colors.shadow.default.hex}}"
 } 

Commons/Color.qml

@@ -6,10 +6,17 @@ import Quickshell.Io
 import qs.Commons
 import qs.Services
 
-// --------------------------------
+/*
-// Noctalia Colors - Material Design 3
+  Although Noctalia is not strictly a Material Design project, it supports both a predefined
-// We only use a very small subset of all available m3 colors to avoid complexity
+  color scheme and dynamic color generation from the wallpaper (using Matugen).
-// All color names start with a 'm' to avoid QML assuming some of them are signals (ex: onPrimary)
+
+  We ultimately decided to use a restricted set of colors that follows the
+  Material Design 3 naming convention.
+
+  NOTE: All color names are prefixed with 'm' (e.g., mPrimary) to prevent QML from
+  misinterpreting them as signals (e.g., the 'onPrimary' property name).
+*/
+
 Singleton {
   id: root
 
@@ -28,11 +35,11 @@ Singleton {
   // --- Surface and Variant Colors: These provide additional options for surfaces and their contents, creating visual hierarchy
   property color mSurface: customColors.mSurface
   property color mOnSurface: customColors.mOnSurface
+
   property color mSurfaceVariant: customColors.mSurfaceVariant
   property color mOnSurfaceVariant: customColors.mOnSurfaceVariant
-  property color mSurfaceContainer: customColors.mSurfaceContainer
+
   property color mOutline: customColors.mOutline
-  property color mOutlineVariant: customColors.mOutlineVariant
   property color mShadow: customColors.mShadow
 
   property color transparent: "transparent"
@@ -50,8 +57,10 @@ Singleton {
 
     property color mPrimary: "#c7a1d8"
     property color mOnPrimary: "#1a151f"
+
     property color mSecondary: "#a984c4"
     property color mOnSecondary: "#f3edf7"
+
     property color mTertiary: "#e0b7c9"
     property color mOnTertiary: "#20161f"
 
@@ -60,10 +69,11 @@ Singleton {
 
     property color mSurface: "#1c1822"
     property color mOnSurface: "#e9e4f0"
+
     property color mSurfaceVariant: "#262130"
     property color mOnSurfaceVariant: "#a79ab0"
-    property color mOutline: "#4d445a"
+
-    property color mOutlineVariant: "#342c42"
+    property color mOutline: "#342c42"
     property color mShadow: "#120f18"
   }
 
@@ -75,8 +85,10 @@ Singleton {
 
     property color mPrimary: customColorsData.mPrimary
     property color mOnPrimary: customColorsData.mOnPrimary
+
     property color mSecondary: customColorsData.mSecondary
     property color mOnSecondary: customColorsData.mOnSecondary
+    
     property color mTertiary: customColorsData.mTertiary
     property color mOnTertiary: customColorsData.mOnTertiary
 
@@ -85,10 +97,11 @@ Singleton {
 
     property color mSurface: customColorsData.mSurface
     property color mOnSurface: customColorsData.mOnSurface
+    
     property color mSurfaceVariant: customColorsData.mSurfaceVariant
     property color mOnSurfaceVariant: customColorsData.mOnSurfaceVariant
+
     property color mOutline: customColorsData.mOutline
-    property color mOutlineVariant: customColorsData.mOutlineVariant
     property color mShadow: customColorsData.mShadow
   }
 
@@ -116,8 +129,10 @@ Singleton {
 
       property color mPrimary: defaultColors.mPrimary
       property color mOnPrimary: defaultColors.mOnPrimary
+
       property color mSecondary: defaultColors.mSecondary
       property color mOnSecondary: defaultColors.mOnSecondary
+
       property color mTertiary: defaultColors.mTertiary
       property color mOnTertiary: defaultColors.mOnTertiary
 
@@ -126,10 +141,11 @@ Singleton {
 
       property color mSurface: defaultColors.mSurface
       property color mOnSurface: defaultColors.mOnSurface
+
       property color mSurfaceVariant: defaultColors.mSurfaceVariant
       property color mOnSurfaceVariant: defaultColors.mOnSurfaceVariant
+
       property color mOutline: defaultColors.mOutline
-      property color mOutlineVariant: defaultColors.mOutlineVariant
       property color mShadow: defaultColors.mShadow
     }
   }

Modules/Bar/BluetoothMenu.qml

@@ -69,7 +69,7 @@ NLoader {
 
         color: Color.mSurface
         radius: Style.radiusL * scaling
-        border.color: Color.mOutlineVariant
+        border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
         width: 380 * scaling
         height: 500 * scaling

Modules/Bar/WiFiMenu.qml

@@ -84,7 +84,7 @@ NLoader {
         id: wifiMenuRect
         color: Color.mSurface
         radius: Style.radiusL * scaling
-        border.color: Color.mOutlineVariant
+        border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
         width: 340 * scaling
         height: 500 * scaling

Modules/DemoPanel/DemoPanel.qml

@@ -69,7 +69,7 @@ NLoader {
         id: bgRect
         color: Color.mSurfaceVariant
         radius: Style.radiusM * scaling
-        border.color: Color.mOutlineVariant
+        border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
         width: 500 * scaling
         height: 900 * scaling

Modules/Notification/NotificationHistoryPanel.qml

@@ -68,7 +68,7 @@ NLoader {
         id: notificationRect
         color: Color.mSurface
         radius: Style.radiusL * scaling
-        border.color: Color.mOutlineVariant
+        border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
         width: 400 * scaling
         height: 500 * scaling

Modules/SettingsPanel/SettingsPanel.qml

@@ -202,7 +202,7 @@ NLoader {
         id: bgRect
         color: Color.mSurface
         radius: Style.radiusL * scaling
-        border.color: Color.mOutlineVariant
+        border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
         layer.enabled: true
         width: Math.max(screen.width * 0.5, 1280) * scaling
@@ -249,7 +249,7 @@ NLoader {
             Layout.preferredWidth: Style.sliderWidth * 1.3 * scaling
             Layout.fillHeight: true
             color: Color.mSurfaceVariant
-            border.color: Color.mOutlineVariant
+            border.color: Color.mOutline
             border.width: Math.max(1, Style.borderS * scaling)
             radius: Style.radiusM * scaling
 
@@ -311,7 +311,7 @@ NLoader {
             Layout.fillHeight: true
             radius: Style.radiusM * scaling
             color: Color.mSurfaceVariant
-            border.color: Color.mOutlineVariant
+            border.color: Color.mOutline
             border.width: Math.max(1, Style.borderS * scaling)
             clip: true
 

Modules/SettingsPanel/Tabs/ColorSchemeTab.qml

@@ -109,8 +109,8 @@ ColumnLayout {
 
         // Use Matugen
         NToggle {
-          label: "Use Matugen"
+          label: "Enable Matugen"
-          description: "Automatically generate colors based on your active wallpaper using Matugen."
+          description: "Automatically generate colors based on your active wallpaper."
           checked: Settings.data.colorSchemes.useWallpaperColors
           onToggled: checked => {
                        Settings.data.colorSchemes.useWallpaperColors = checked
@@ -123,7 +123,7 @@ ColumnLayout {
         // Dark Mode Toggle (affects both Matugen and predefined schemes that provide variants)
         NToggle {
           label: "Dark Mode"
-          description: Settings.data.colorSchemes.useWallpaperColors ? "Generate dark theme colors when using Matugen. Disable for light theme." : "If the selected predefined scheme has light/dark variants, this chooses which one."
+          description: Settings.data.colorSchemes.useWallpaperColors ? "Generate dark theme colors when using Matugen." : "Use a dark variant if available."
           checked: Settings.data.colorSchemes.darkMode
           enabled: true
           onToggled: checked => {

Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml

@@ -156,7 +156,7 @@ Item {
               Rectangle {
                 anchors.fill: parent
                 color: Color.transparent
-                border.color: isSelected ? Color.mPrimary : Color.mOutline
+                border.color: isSelected ? Color.mPrimary : Color.mSurface
                 border.width: Math.max(1, Style.borderL * scaling)
               }
 
@@ -165,8 +165,8 @@ Item {
                 anchors.top: parent.top
                 anchors.right: parent.right
                 anchors.margins: Style.marginXS * scaling
-                width: 20 * scaling
+                width: 28 * scaling
-                height: 20 * scaling
+                height: 28 * scaling
                 radius: width / 2
                 color: Color.mPrimary
                 border.color: Color.mOutline
@@ -175,7 +175,8 @@ Item {
 
                 NIcon {
                   text: "check"
-                  font.pointSize: Style.fontSizeXS * scaling
+                  font.pointSize: Style.fontSizeM * scaling
+                  font.weight: Style.fontWeightBold
                   color: Color.mOnPrimary
                   anchors.centerIn: parent
                 }

Modules/SidePanel/SidePanel.qml

@@ -83,7 +83,7 @@ NLoader {
         id: panelBackground
         color: Color.mSurface
         radius: Style.radiusL * scaling
-        border.color: Color.mOutlineVariant
+        border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
         layer.enabled: true
         width: 460 * scaling

Services/ColorSchemeService.qml

@@ -106,8 +106,7 @@ Singleton {
       property color mOnSurface: "#000000"
       property color mSurfaceVariant: "#cccccc"
       property color mOnSurfaceVariant: "#333333"
-      property color mOutline: "#666666"
+      property color mOutline: "#444444"
-      property color mOutlineVariant: "#444444"
       property color mShadow: "#000000"
     }
   }
@@ -129,7 +128,6 @@ Singleton {
     out.mSurfaceVariant = pick(obj, "mSurfaceVariant", "surfaceVariant", out.mSurfaceVariant)
     out.mOnSurfaceVariant = pick(obj, "mOnSurfaceVariant", "onSurfaceVariant", out.mOnSurfaceVariant)
     out.mOutline = pick(obj, "mOutline", "outline", out.mOutline)
-    out.mOutlineVariant = pick(obj, "mOutlineVariant", "outlineVariant", out.mOutlineVariant)
     out.mShadow = pick(obj, "mShadow", "shadow", out.mShadow)
     colorsWriter.writeAdapter()
   }

Widgets/NBox.qml

@@ -13,7 +13,7 @@ Rectangle {
 
   color: Color.mSurfaceVariant
   radius: Style.radiusM * scaling
-  border.color: Color.mOutlineVariant
+  border.color: Color.mOutline
   border.width: Math.max(1, Style.borderS * scaling)
   clip: true
 }