diff --git a/modules/gnome/colors.mustache b/modules/gnome/colors.mustache index b3ea7b66..6d2ff8f0 100644 --- a/modules/gnome/colors.mustache +++ b/modules/gnome/colors.mustache @@ -1,71 +1,51 @@ -$is_highcontrast: "false"; +$is_highcontrast: false; -$base_color: #{{base00-hex}}; +$base_color: #{{base01-hex}}; $bg_color: #{{base00-hex}}; $fg_color: #{{base05-hex}}; +$borders_color: transparentize($bg_color, 0.9); +$outer_borders_color: transparentize($bg_color, 0.98); $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%)); +$selected_bg_color: #{{base0D-hex}}; +$selected_borders_color: transparentize($selected_bg_color, 0.9); $link_color: #{{base0D-hex}}; $link_visited_color: #{{base0D-hex}}; -$warning_color: #{{base0E-hex}}; +$warning_color: #{{base0A-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); +$osd_fg_color: #{{base05-hex}}; +$osd_insensitive_bg_color: #{{base01-hex}}; +$osd_insensitive_fg_color: #{{base05-hex}}; +$osd_borders_color: transparentize($osd_bg_color, 0.9); +$osd_outer_borders_color: transparentize($osd_bg_color, 0.98); -$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); +$shadow_color: rgba(0,0,0,0.1); -// button -$button_mix_factor: 5%; +$button_mix_factor: 0%; +$bubble_buttons_color: #{{base01-hex}}; -// cards -$card_bg_color: #{{base01-hex}}; -$card_outer_borders_color: transparentize($fg_color, 0.98); +$system_base_color: #{{base00-hex}}; +$system_fg_color: #{{base05-hex}}; +$system_bg_color: #{{base00-hex}}; +$system_borders_color: transparentize($system_bg_color, .9); +$system_insensitive_fg_color: #{{base05-hex}}; +$system_overlay_bg_color: #{{base01-hex}}; // for non-transparent items, e.g. dash -// notifications -$bubble_buttons_color: $card_bg_color; +$insensitive_fg_color: #{{base05-hex}}; +$insensitive_bg_color: #{{base01-hex}}; +$insensitive_borders_color: transparentize($insensitive_bg_color, 0.9); -// overview background color -$system_bg_color: $base_color; +$checked_bg_color: #{{base01-hex}}; +$checked_fg_color: #{{base05-hex}}; -//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%); +$hover_bg_color: #{{base01-hex}}; +$hover_fg_color: #{{base05-hex}}; -//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%)); +$active_bg_color: #{{base01-hex}}; +$active_fg_color: #{{base05-hex}}; diff --git a/modules/gnome/shell_colors.patch b/modules/gnome/shell_colors.patch index 22c91414..c107efcb 100644 --- a/modules/gnome/shell_colors.patch +++ b/modules/gnome/shell_colors.patch @@ -1,161 +1,103 @@ +diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml +index 24b3be8db..3ec37da33 100644 +--- a/data/gnome-shell-theme.gresource.xml ++++ b/data/gnome-shell-theme.gresource.xml +@@ -10,7 +10,6 @@ + checkbox-off-light.svg + checkbox-off.svg + gnome-shell.css +- gnome-shell-high-contrast.css + gnome-shell-start.svg + pad-osd.css + process-working.svg +diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss +index 953bee598..36ce19a4d 100644 +--- a/data/theme/gnome-shell-sass/_common.scss ++++ b/data/theme/gnome-shell-sass/_common.scss +@@ -166,8 +166,8 @@ stage { + + // tooltip + %tooltip { +- background-color: transparentize(black, 0.1); +- color: $light_1; ++ background-color: transparentize($bg_color, 0.1); ++ color: $fg_color; + + border-radius: 99px; + padding: $base_padding $base_padding * 2; diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss -index 7c8959e2c..6066def91 100644 +index a69d38175..e79dc0c28 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/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/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss -index 8f5d5f939..f3a7e1029 100644 ---- a/data/theme/gnome-shell-sass/widgets/_dash.scss -+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss -@@ -1,6 +1,6 @@ - /* Dash */ +@@ -143,7 +143,7 @@ + // + // since buttons are all flat an borderless now the mixin is simpler --$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/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss -index 5196661c1..663e754bd 100644 ---- a/data/theme/gnome-shell-sass/widgets/_message-list.scss -+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss -@@ -128,7 +128,7 @@ - } +-@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) { ++@mixin button($t, $tc:$fg_color, $c:$base_color, $flat: false) { - // body -- .message-body {color: darken($fg_color, 10%);} -+ .message-body {color: $fg_color;} + $button_bg_color: mix($tc, $c, $button_mix_factor); + transition-duration: 100ms; +diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss +index 393221627..0bc93111a 100644 +--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss ++++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss +@@ -27,6 +27,8 @@ + .date-label { + @extend %title_2; + } ++ ++ color: $fg_color !important; } - // 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; + /* Calendar */ +@@ -250,7 +252,7 @@ + .weather-forecast-time { + @extend %numeric; + @extend %caption; +- color: darken($fg_color,30%); ++ color: transparentize($insensitive_fg_color, 0.5); + padding-top: 0.2em; + padding-bottom: 0.4em; } - - &: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/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss -index fd3e7d2da..051eefbfe 100644 +index 650d4fa83..63ac5df8f 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss -@@ -1,7 +1,7 @@ +@@ -1,9 +1,9 @@ /* 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_bg_color: if($variant == 'light', $light_3, $dark_5); +-$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%)); +-$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color); ++$panel_bg_color: $base_color; ++$panel_fg_color: $fg_color; ++$panel_border_color: transparentize($panel_bg_color, 0.9); + + $panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels $panel_height: 2.2em; - $panel_transition_duration: 250ms; // same as the overview transition duration -diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss -index 138a4fc0f..ccd020a0f 100644 ---- a/data/theme/gnome-shell-sass/widgets/_popovers.scss -+++ b/data/theme/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/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss -index b429a2dc5..858f286a2 100644 +index 82a5e11aa..681d73e33 100644 --- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss +++ b/data/theme/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; +@@ -108,15 +108,10 @@ + padding-bottom: 2 * $base_padding; -- &.active { background-color: $selected_bg_color; } -+ &.active { -+ color: $selected_fg_color; -+ background-color: $selected_bg_color; -+ } + & .icon { +- icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok +- border-radius: 999px; +- padding: 1.5 * $base_padding; +- background-color: transparentize($fg_color, 0.8); +- +- &.active { +- background-color: $selected_bg_color; +- color: $selected_fg_color; +- } ++ icon-size: $base_icon_size * 1.5; ++ padding: $base_padding; ++ background-color: $bg_color; ++ color: $fg_color; } & .title { diff --git a/modules/gnome/theme.nix b/modules/gnome/theme.nix index 0c0b97d9..e6acfac3 100644 --- a/modules/gnome/theme.nix +++ b/modules/gnome/theme.nix @@ -9,9 +9,12 @@ let in pkgs.stdenv.mkDerivation { name = "stylix-gnome-shell-theme"; - src = pkgs.fetchurl { - url = "mirror://gnome/sources/gnome-shell/43/gnome-shell-43.2.tar.xz"; - sha256 = "52/UvpNCQQ7p+9zday2Bxv8GDnyMxaDxyuanq6JdGGA="; + src = pkgs.fetchFromGitLab { + domain = "gitlab.gnome.org"; + owner = "GNOME"; + repo = "gnome-shell"; + rev = "beb77f58243265a6cc62b720a5b0ecd66efd50a1"; + sha256 = "7BKvv4j4YbfjXwCUeT7lZmXNljFhwoXO/Z9pqB091w0="; }; patches = [ ./shell_colors.patch ];