diff --git a/Assets/ColorScheme/Catppuccin.json b/Assets/ColorScheme/Catppuccin.json index d02708c..7182d98 100644 --- a/Assets/ColorScheme/Catppuccin.json +++ b/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", - "mOutlineVariant": "#2f303d", + "mOutline": "#4c4f69", "mShadow": "#11111b" }, "light": { - "mPrimary": "#8839ef", + "mPrimary": "#cba6f7", "mOnPrimary": "#eff1f5", - "mSecondary": "#fe640b", + "mSecondary": "#fab387", "mOnSecondary": "#eff1f5", - "mTertiary": "#40a02b", + "mTertiary": "#a6e3a1", "mOnTertiary": "#eff1f5", - - "mError": "#d20f39", + "mError": "#f38ba8", "mOnError": "#eff1f5", - "mSurface": "#eff1f5", "mOnSurface": "#4c4f69", "mSurfaceVariant": "#ccd0da", "mOnSurfaceVariant": "#6c6f85", - "mOutline": "#9ca0b0", - "mOutlineVariant": "#bcc0cc", + "mOutline": "#bcc0cc", "mShadow": "#dce0e8" } } diff --git a/Assets/ColorScheme/Dracula.json b/Assets/ColorScheme/Dracula.json index d4cea09..4b691ea 100644 --- a/Assets/ColorScheme/Dracula.json +++ b/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", - "mOutlineVariant": "#3a4666", + "mOutline": "#5a5e77", "mShadow": "#282A36" }, "light": { - "mPrimary": "#7b5cd6", + "mPrimary": "#bd93f9", "mOnPrimary": "#ffffff", - - "mSecondary": "#e64590", + "mSecondary": "#ff79c6", "mOnSecondary": "#ffffff", - - "mTertiary": "#26b5d6", + "mTertiary": "#8be9fd", "mOnTertiary": "#ffffff", - - "mError": "#cc0000", + "mError": "#FF5555", "mOnError": "#ffffff", - "mSurface": "#f8f8f2", "mOnSurface": "#282a36", - "mSurfaceVariant": "#e6e6ea", "mOnSurfaceVariant": "#44475a", - - "mOutline": "#b3b3c6", - "mOutlineVariant": "#d6d8e0", - + "mOutline": "#d6d8e0", "mShadow": "#00000026" } } diff --git a/Assets/ColorScheme/Gruvbox.json b/Assets/ColorScheme/Gruvbox.json index 077b5e8..4dd33db 100644 --- a/Assets/ColorScheme/Gruvbox.json +++ b/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", - "mOutlineVariant": "#3c3836", + "mOutline": "#504945", "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", - "mOutlineVariant": "#bdae93", + "mOutline": "#bdae93", "mShadow": "#d5c4a1" } } diff --git a/Assets/ColorScheme/Noctalia (default).json b/Assets/ColorScheme/Noctalia (default).json index f72d025..900ee31 100644 --- a/Assets/ColorScheme/Noctalia (default).json +++ b/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", - "mOutlineVariant": "#342c42", + "mOutline": "#3e364e", "mShadow": "#120f18" }, "light": { - "mPrimary": "#8b4ea8", + "mPrimary": "#c7a1d8", "mOnPrimary": "#ffffff", - - "mSecondary": "#7a4d99", + "mSecondary": "#a984c4", "mOnSecondary": "#ffffff", - - "mTertiary": "#c47a94", + "mTertiary": "#e0b7c9", "mOnTertiary": "#ffffff", - - "mError": "#c03d5a", + "mError": "#e9899d", "mOnError": "#ffffff", - "mSurface": "#f5f1fa", "mOnSurface": "#1c1822", - "mSurfaceVariant": "#e7dfee", "mOnSurfaceVariant": "#4a3d59", - - "mOutline": "#b8a9c9", - "mOutlineVariant": "#d8cfe2", - + "mOutline": "#d8cfe2", "mShadow": "#00000026" } } diff --git a/Assets/ColorScheme/Nord.json b/Assets/ColorScheme/Nord.json index ed67760..1e7b084 100644 --- a/Assets/ColorScheme/Nord.json +++ b/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", - "mOutlineVariant": "#2e3440", + "mOutline": "#505a70", "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", - "mOutlineVariant": "#e5e9f0", + "mOutline": "#e5e9f0", "mShadow": "#d8dee9" } } diff --git a/Assets/ColorScheme/Rosepine.json b/Assets/ColorScheme/Rosepine.json index 7a606cf..53df9bc 100644 --- a/Assets/ColorScheme/Rosepine.json +++ b/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", - "mOutlineVariant": "#2e2c3c", + "mOutline": "#403d52", "mShadow": "#191724" }, "light": { - "mPrimary": "#286983", + "mPrimary": "#31748f", "mOnPrimary": "#faf4ed", "mSecondary": "#56949f", "mOnSecondary": "#faf4ed", "mTertiary": "#d7827e", "mOnTertiary": "#faf4ed", - - "mError": "#b4637a", + "mError": "#eb6f92", "mOnError": "#faf4ed", - "mSurface": "#faf4ed", "mOnSurface": "#575279", "mSurfaceVariant": "#f2e9e1", "mOnSurfaceVariant": "#797593", - "mOutline": "#9893a5", - "mOutlineVariant": "#cecacd", + "mOutline": "#cecacd", "mShadow": "#f2e9e1" } } diff --git a/Assets/ColorScheme/Solarized.json b/Assets/ColorScheme/Solarized.json index 667cad7..687a849 100644 --- a/Assets/ColorScheme/Solarized.json +++ b/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", - "mOutlineVariant": "#073642", + "mOutline": "#0c5c70", "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", - "mOutlineVariant": "#eee8d5", + "mOutline": "#eee8d5", "mShadow": "#eee8d5" } } diff --git a/Assets/ColorScheme/Tokyo Night.json b/Assets/ColorScheme/Tokyo Night.json index 6b37c4e..95b20de 100644 --- a/Assets/ColorScheme/Tokyo Night.json +++ b/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", - "mOutlineVariant": "#282c41", + "mOutline": "#3d4462", "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", - "mOutlineVariant": "#9699a3", + "mOutline": "#9699a3", "mShadow": "#c0caf5" } } diff --git a/Assets/Matugen/templates/noctalia.json b/Assets/Matugen/templates/noctalia.json index c0e3711..db4735e 100644 --- a/Assets/Matugen/templates/noctalia.json +++ b/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}}" } \ No newline at end of file diff --git a/Commons/Color.qml b/Commons/Color.qml index ce3f994..773d488 100644 --- a/Commons/Color.qml +++ b/Commons/Color.qml @@ -6,10 +6,17 @@ import Quickshell.Io import qs.Commons import qs.Services -// -------------------------------- -// Noctalia Colors - Material Design 3 -// We only use a very small subset of all available m3 colors to avoid complexity -// All color names start with a 'm' to avoid QML assuming some of them are signals (ex: onPrimary) +/* + Although Noctalia is not strictly a Material Design project, it supports both a predefined + color scheme and dynamic color generation from the wallpaper (using Matugen). + + 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 } } diff --git a/Modules/Bar/BluetoothMenu.qml b/Modules/Bar/BluetoothMenu.qml index 6cc4abb..ff0959d 100644 --- a/Modules/Bar/BluetoothMenu.qml +++ b/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 diff --git a/Modules/Bar/WiFiMenu.qml b/Modules/Bar/WiFiMenu.qml index 52ee45c..28fb35a 100644 --- a/Modules/Bar/WiFiMenu.qml +++ b/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 diff --git a/Modules/DemoPanel/DemoPanel.qml b/Modules/DemoPanel/DemoPanel.qml index a56c9bb..7bfa7bb 100644 --- a/Modules/DemoPanel/DemoPanel.qml +++ b/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 diff --git a/Modules/Notification/NotificationHistoryPanel.qml b/Modules/Notification/NotificationHistoryPanel.qml index 075cc89..a52950e 100644 --- a/Modules/Notification/NotificationHistoryPanel.qml +++ b/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 diff --git a/Modules/SettingsPanel/SettingsPanel.qml b/Modules/SettingsPanel/SettingsPanel.qml index 719dacf..7012838 100644 --- a/Modules/SettingsPanel/SettingsPanel.qml +++ b/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 diff --git a/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml b/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml index 94452a9..cfdd801 100644 --- a/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml +++ b/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml @@ -109,8 +109,8 @@ ColumnLayout { // Use Matugen NToggle { - label: "Use Matugen" - description: "Automatically generate colors based on your active wallpaper using Matugen." + label: "Enable 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 => { diff --git a/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml b/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml index 530b850..b8cdbe6 100644 --- a/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml +++ b/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 - height: 20 * scaling + width: 28 * 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 } diff --git a/Modules/SidePanel/SidePanel.qml b/Modules/SidePanel/SidePanel.qml index f323462..1d9d2ae 100644 --- a/Modules/SidePanel/SidePanel.qml +++ b/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 diff --git a/Services/ColorSchemeService.qml b/Services/ColorSchemeService.qml index c65edd9..debb298 100644 --- a/Services/ColorSchemeService.qml +++ b/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 mOutlineVariant: "#444444" + property color mOutline: "#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() } diff --git a/Widgets/NBox.qml b/Widgets/NBox.qml index 61d1a8c..7e1420b 100644 --- a/Widgets/NBox.qml +++ b/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 }