diff --git a/flake.nix b/flake.nix index 103dcc27..5ecf4036 100644 --- a/flake.nix +++ b/flake.nix @@ -66,7 +66,7 @@ ./modules/feh.nix ./modules/fish.nix ./modules/gedit - ./modules/gnome.nix + ./modules/gnome ./modules/grub.nix ./modules/gtk ./modules/helix.nix diff --git a/modules/gnome.nix b/modules/gnome.nix deleted file mode 100644 index cea34747..00000000 --- a/modules/gnome.nix +++ /dev/null @@ -1,31 +0,0 @@ -{ pkgs, config, lib, ... }: - -with lib; - -{ - options.stylix.targets.gnome.enable = - config.lib.stylix.mkEnableTarget "GNOME" true; - - config = mkIf config.stylix.targets.gnome.enable { - home-manager.sharedModules = [{ - dconf.settings."org/gnome/desktop/background" = { - color-shading-type = "solid"; - picture-options = "zoom"; - picture-uri = "file://${config.stylix.image}"; - picture-uri-dark = "file://${config.stylix.image}"; - }; - - dconf.settings."org/gnome/desktop/interface".color-scheme = - if config.stylix.polarity == "dark" - then "prefer-dark" - else "default"; - }]; - - # As Stylix is controlling the wallpaper, there is no need for this - # pack of default wallpapers to be installed. - # If you want to use one, you can set stylix.image to something like - # "${pkgs.gnome.gnome-backgrounds}/path/to/your/preferred/background" - # which will then download the pack regardless of its exclusion below. - environment.gnome.excludePackages = [ pkgs.gnome.gnome-backgrounds ]; - }; -} diff --git a/modules/gnome/colors.mustache b/modules/gnome/colors.mustache new file mode 100644 index 00000000..b3ea7b66 --- /dev/null +++ b/modules/gnome/colors.mustache @@ -0,0 +1,71 @@ +$is_highcontrast: "false"; + +$base_color: #{{base00-hex}}; +$bg_color: #{{base00-hex}}; +$fg_color: #{{base05-hex}}; + +$selected_fg_color: #{{base00-hex}}; +$selected_bg_color: #{{base03-hex}}; +$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); + +$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9)); +$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%)); + +$link_color: #{{base0D-hex}}; +$link_visited_color: #{{base0D-hex}}; + +$warning_color: #{{base0E-hex}}; +$error_color: #{{base08-hex}}; +$success_color: #{{base0B-hex}}; +$destructive_color: $error_color; + +$osd_fg_color: #{{base05-hex}}; +$osd_bg_color: #{{base01-hex}}; +$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); +$osd_insensitive_fg_color: $fg_color; +$osd_borders_color: transparentize(black, 0.3); +$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); + +$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); + +// button +$button_mix_factor: 5%; + +// cards +$card_bg_color: #{{base01-hex}}; +$card_outer_borders_color: transparentize($fg_color, 0.98); + +// notifications +$bubble_buttons_color: $card_bg_color; + +// overview background color +$system_bg_color: $base_color; + +//insensitive state derived colors +$insensitive_fg_color: $fg_color; +$insensitive_bg_color: mix($bg_color, $base_color, 60%); +$insensitive_borders_color: mix($borders_color, $base_color, 60%); + +//colors for the backdrop state, derived from the main colors. +$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%)); +$backdrop_bg_color: $bg_color; +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%); +$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%)); +$backdrop_borders_color: mix($borders_color, $bg_color, 90%); +$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); + + +// derived checked colors +$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%)); +$card_checked_bg_color: if($variant=='light', darken($card_bg_color, 7%), lighten($card_bg_color, 7%)); +$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%)); + +// derived hover colors +$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 10%)); +$card_hover_bg_color: if($variant=='light', darken($card_bg_color, 3%), lighten($card_bg_color, 10%)); +$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 10%)); + +// derived active colors +$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 12%)); +$card_active_bg_color: if($variant=='light', darken($card_bg_color, 5%), lighten($card_bg_color, 12%)); +$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%)); diff --git a/modules/gnome/default.nix b/modules/gnome/default.nix new file mode 100644 index 00000000..2a0d6123 --- /dev/null +++ b/modules/gnome/default.nix @@ -0,0 +1,72 @@ +{ pkgs, config, lib, ... }: + +with lib; + +let + colors = config.lib.stylix.colors { + template = builtins.readFile ./colors.mustache; + extension = "scss"; + }; + + theme = pkgs.stdenv.mkDerivation { + name = "stylix-gnome-shell.css"; + + src = pkgs.fetchurl { + url = "mirror://gnome/sources/gnome-shell/43/gnome-shell-43.2.tar.xz"; + sha256 = "52/UvpNCQQ7p+9zday2Bxv8GDnyMxaDxyuanq6JdGGA="; + }; + sourceRoot = "gnome-shell-43.2/data/theme"; + + patches = [ ./shell.patch ]; + postPatch = '' + rm gnome-shell-sass/{_colors.scss,_palette.scss} + cp ${colors} gnome-shell-sass/_colors.scss + ''; + + nativeBuildInputs = with pkgs; [ sass ]; + buildPhase = '' + sass gnome-shell.scss >$out + ''; + + installPhase = "true"; + }; + +in { + options.stylix.targets.gnome.enable = + config.lib.stylix.mkEnableTarget "GNOME" config.services.xserver.desktopManager.gnome.enable; + + config = mkIf config.stylix.targets.gnome.enable { + home-manager.sharedModules = [({ lib, ... }: { + dconf.settings = { + "org/gnome/desktop/background" = { + color-shading-type = "solid"; + picture-options = "zoom"; + picture-uri = "file://${config.stylix.image}"; + picture-uri-dark = "file://${config.stylix.image}"; + }; + + "org/gnome/desktop/interface".color-scheme = + if config.stylix.polarity == "dark" + then "prefer-dark" + else "default"; + + "org/gnome/shell/extensions/user-theme".name = "Stylix"; + }; + + xdg.dataFile."themes/Stylix/gnome-shell/gnome-shell.css" = { + source = theme; + onChange = '' + gnome-extensions disable user-theme@gnome-shell-extensions.gcampax.github.com + gnome-extensions enable user-theme@gnome-shell-extensions.gcampax.github.com + ''; + }; + })]; + + # As Stylix is controlling the wallpaper, there is no need for this + # pack of default wallpapers to be installed. + # If you want to use one, you can set stylix.image to something like + # "${pkgs.gnome.gnome-backgrounds}/path/to/your/preferred/background" + # which will then download the pack regardless of its exclusion below. + environment.gnome.excludePackages = [ pkgs.gnome.gnome-backgrounds ]; + }; +} diff --git a/modules/gnome/shell.patch b/modules/gnome/shell.patch new file mode 100644 index 00000000..b80f656a --- /dev/null +++ b/modules/gnome/shell.patch @@ -0,0 +1,161 @@ +diff --git a/gnome-shell-sass/_drawing.scss b/gnome-shell-sass/_drawing.scss +index 7c8959e2c..6066def91 100644 +--- a/gnome-shell-sass/_drawing.scss ++++ b/gnome-shell-sass/_drawing.scss +@@ -248,7 +248,7 @@ + &:insensitive { + @include button(insensitive); + background-color: transparent; +- color: transparentize($selected_fg_color, .5); ++ color: $insensitive_fg_color; + } + } + } +diff --git a/gnome-shell-sass/widgets/_dash.scss b/gnome-shell-sass/widgets/_dash.scss +index 8f5d5f939..f3a7e1029 100644 +--- a/gnome-shell-sass/widgets/_dash.scss ++++ b/gnome-shell-sass/widgets/_dash.scss +@@ -1,6 +1,6 @@ + /* Dash */ + +-$dash_background_color: lighten($system_bg_color, 5%); ++$dash_background_color: $card_bg_color; + $dash_placeholder_size: 32px; + $dash_padding: $base_padding*2; // 12px + $dash_border_radius: $modal_radius + $dash_padding; +diff --git a/gnome-shell-sass/widgets/_message-list.scss b/gnome-shell-sass/widgets/_message-list.scss +index 5196661c1..663e754bd 100644 +--- a/gnome-shell-sass/widgets/_message-list.scss ++++ b/gnome-shell-sass/widgets/_message-list.scss +@@ -128,7 +128,7 @@ + } + + // body +- .message-body {color: darken($fg_color, 10%);} ++ .message-body {color: $fg_color;} + } + + // URLs in messages +@@ -143,18 +143,17 @@ + border-radius: $base_border_radius; + color: $fg_color; + +- // colors are lightened since the media controls are in a card + &:hover { +- background-color: lighten($hover_bg_color, 5%); ++ background-color: $card_hover_bg_color; + color: $fg_color; + } + + &:active { +- background-color: lighten($active_bg_color, 5%); ++ background-color: $card_active_bg_color; + color: $fg_color; + } + +- &:insensitive { color: lighten($insensitive_fg_color, 5%); } ++ &:insensitive { color: $insensitive_fg_color; } + + // fix margin for last button + &:last-child:ltr { margin-right: $base_margin*3; } +@@ -171,7 +170,7 @@ + // when there is no artwork + &.fallback { + color: darken($fg_color, 17%); +- background-color: $bg_color; ++ background-color: $card_bg_color; + border: 1px solid transparent; + border-radius: $base_border_radius; + icon-size: $large_icon_size !important; // 32px +diff --git a/gnome-shell-sass/widgets/_panel.scss b/gnome-shell-sass/widgets/_panel.scss +index fd3e7d2da..051eefbfe 100644 +--- a/gnome-shell-sass/widgets/_panel.scss ++++ b/gnome-shell-sass/widgets/_panel.scss +@@ -1,7 +1,7 @@ + /* Top Bar */ + // a.k.a. the panel + +-$panel_bg_color: #000; ++$panel_bg_color: $osd_bg_color; + $panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%)); + $panel_height: 2.2em; + $panel_transition_duration: 250ms; // same as the overview transition duration +diff --git a/gnome-shell-sass/widgets/_popovers.scss b/gnome-shell-sass/widgets/_popovers.scss +index 138a4fc0f..ccd020a0f 100644 +--- a/gnome-shell-sass/widgets/_popovers.scss ++++ b/gnome-shell-sass/widgets/_popovers.scss +@@ -37,22 +37,22 @@ + &:rtl {padding-right: $base_padding;} + + &:focus, &:hover { +- background-color: $hover_bg_color !important; +- &:active { background-color: $active_bg_color !important;} ++ background-color: $card_hover_bg_color !important; ++ &:active { background-color: $card_active_bg_color !important;} + } + +- &:checked {background-color: $checked_bg_color !important;} ++ &:checked {background-color: $card_checked_bg_color !important;} + + &:checked { + margin-bottom: 0; +- box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%); ++ box-shadow: inset 0 -1px 0 0 darken($card_checked_bg_color, 5%); + border-radius: $base_border_radius $base_border_radius 0 0; +- &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;} +- &:active { background-color: lighten($checked_bg_color, 5%) !important;} ++ &:focus,&:hover { background-color: lighten($card_checked_bg_color, 3%) !important;} ++ &:active { background-color: lighten($card_checked_bg_color, 5%) !important;} + } + + &:active { +- background-color: lighten($active_bg_color, 5%); ++ background-color: lighten($card_active_bg_color, 5%); + color: $active_fg_color; + } + +@@ -84,7 +84,7 @@ + + // popover submenus + .popup-sub-menu { +- background-color: $checked_bg_color; ++ background-color: $card_checked_bg_color; + border-radius: 0 0 $base_border_radius $base_border_radius; + + .popup-menu-ornament { +@@ -100,12 +100,12 @@ + border-radius: 0 0 $base_border_radius $base_border_radius; + } + +- &:focus,&:hover { background-color: $hover_bg_color !important;} ++ &:focus,&:hover { background-color: $card_hover_bg_color !important;} + &:checked { +- background-color: $checked_bg_color !important; +- &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;} ++ background-color: $card_checked_bg_color !important; ++ &:focus,&:hover { background-color: lighten($card_checked_bg_color, 8%) !important;} + } +- &:active { background-color: $active_bg_color !important;} ++ &:active { background-color: $card_active_bg_color !important;} + } + + .popup-menu-section { +diff --git a/gnome-shell-sass/widgets/_quick-settings.scss b/gnome-shell-sass/widgets/_quick-settings.scss +index b429a2dc5..858f286a2 100644 +--- a/gnome-shell-sass/widgets/_quick-settings.scss ++++ b/gnome-shell-sass/widgets/_quick-settings.scss +@@ -81,9 +81,12 @@ + icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok + border-radius: 999px; + padding: 1.5 * $base_padding; +- background-color: lighten($bg_color, 10%); ++ background-color: $card_bg_color; + +- &.active { background-color: $selected_bg_color; } ++ &.active { ++ color: $selected_fg_color; ++ background-color: $selected_bg_color; ++ } + } + + & .title {