Gnome 46 support and Panel theming

data/shell/templates/45/colors.template

@@ -82,3 +82,6 @@ $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color,
 // derived active colors
 $active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 12%));
 $active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%));
+
+// $panel_bg_color: {{panel_bg_color}};
+$panel_bg_color: darken(desaturate({{panel_bg_color}}, 2%), 2%);

data/shell/templates/46/check-box.template

@@ -0,0 +1,18 @@
+/* Check Boxes */
+
+// these are equal to the size of the SVG assets
+$check_height: 24px;
+$check_width: 24px;
+
+
+.check-box {
+  StBoxLayout { spacing: .8em; }
+  StBin {
+    width: $check_width;
+    height: $check_height;
+    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off.svg"));
+  }
+  &:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; }
+  &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
+  &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
+}

data/shell/templates/46/colors.template

@@ -0,0 +1,94 @@
+// When color definition differs for dark and light variant,
+// it gets @if-ed depending on $variant
+
+@import '_palette.scss';
+
+$is_highcontrast: false;
+
+$_dark_base_color: darken(desaturate({{bg_color}}, 2%), 2%);
+
+$base_color: $_dark_base_color;
+$bg_color: if($variant == 'light', darken($base_color, 5%), lighten($base_color, 5%));
+$fg_color: if($variant == 'light', transparentize(black, .2), {{fg_color}});
+
+$accent_fg_color: {{accent_fg_color}};
+$selected_fg_color: if($variant == 'light', $accent_fg_color, {{selected_fg_color}});
+$selected_bg_color: {{selected_bg_color}};
+$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));
+$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
+
+$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
+$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); // NOTE: Unused in GNOME Shell 44
+
+$warning_color: {{warning_bg_color}};
+$error_color: {{error_bg_color}};
+$success_color: {{success_bg_color}}; // NOTE: Unused in GNOME Shell 44
+$destructive_color: {{destructive_bg_color}};
+
+// NOTE: Used also in overview for folder colors, in search results, partially in text and for indicators below app icons
+$osd_fg_color: {{osd_fg_color}};
+$osd_bg_color: $_dark_base_color; // hardcoded for both light & dark
+$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); // NOTE: Unused in GNOME Shell 44
+$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%));
+$osd_borders_color: transparentize(black, 0.3);
+$osd_outer_borders_color: transparentize($osd_fg_color, 0.9);
+
+$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
+
+// button
+$button_mix_factor: 9%;
+
+// notifications
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
+
+// color definitions for system elements (e.g. the overview)
+$system_base_color: $_dark_base_color; // always dark
+$system_fg_color: $light_2;
+
+// derived system colors
+$system_bg_color: lighten($system_base_color, 5%);
+$system_borders_color: transparentize($system_fg_color, .9);
+$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
+$system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash
+
+// overview background color
+$system_bg_color: darken(desaturate({{system_bg_color}}, 2%), 2%);
+$system_fg_color: $light_2; // ADDED
+
+//insensitive state derived colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: mix($borders_color, $base_color, 60%); // NOTE: Unused in GNOME Shell 44
+
+//colors for the backdrop state, derived from the main colors.
+// NOTE: This entire section doesn't seem to be used anywhere in GNOME Shell 44
+$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%));
+$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%)); // NOTE: Unused in GNOME Shell 44
+
+// derived hover colors
+$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($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%));
+$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%));
+
+// panel colors
+// TODO: both of these open to discussion
+$panel_bg_color: darken(desaturate({{panel_bg_color}}, 2%), 2%);
+$panel_fg_color: $fg_color;
+
+// card elements
+$card_bg_color: if($variant == 'light', $light_1, lighten($bg_color, 7%));
+$card_shadow_color: if($variant == 'light', transparentize($dark_5, .97), transparent);
+$card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91), transparent);

data/shell/templates/46/gnome-shell.template

@@ -0,0 +1,16 @@
+$variant: {{theme_variant}};
+$contrast: 'normal';
+
+/* Generated with Gradience
+ *
+ * Issues caused by theming should be reported to Gradience repository, and not to upstream
+ *
+ * https://github.com/GradienceTeam/Gradience
+ */
+
+@import "gnome-shell-sass/_colors"; //use gtk colors
+@import "gnome-shell-sass/_drawing";
+@import "gnome-shell-sass/_common";
+@import "gnome-shell-sass/_widgets";
+
+{{custom_css}}

data/shell/templates/46/palette.template

@@ -0,0 +1,46 @@
+//GNOME Color Palette
+$blue_1: {{blue_1}};
+$blue_2: {{blue_2}};
+$blue_3: {{blue_3}};
+$blue_4: {{blue_4}};
+$blue_5: {{blue_5}};
+$green_1: {{green_1}};
+$green_2: {{green_2}};
+$green_3: {{green_3}};
+$green_4: {{green_4}};
+$green_5: {{green_5}};
+$yellow_1: {{yellow_1}};
+$yellow_2: {{yellow_2}};
+$yellow_3: {{yellow_3}};
+$yellow_4: {{yellow_4}};
+$yellow_5: {{yellow_5}};
+$orange_1: {{orange_1}};
+$orange_2: {{orange_2}};
+$orange_3: {{orange_3}};
+$orange_4: {{orange_4}};
+$orange_5: {{orange_5}};
+$red_1: {{red_1}};
+$red_2: {{red_2}};
+$red_3: {{red_3}};
+$red_4: {{red_4}};
+$red_5: {{red_5}};
+$purple_1: {{purple_1}};
+$purple_2: {{purple_2}};
+$purple_3: {{purple_3}};
+$purple_4: {{purple_4}};
+$purple_5: {{purple_5}};
+$brown_1: {{brown_1}};
+$brown_2: {{brown_2}};
+$brown_3: {{brown_3}};
+$brown_4: {{brown_4}};
+$brown_5: {{brown_5}};
+$light_1: {{light_1}};
+$light_2: {{light_2}};
+$light_3: {{light_3}};
+$light_4: {{light_4}};
+$light_5: {{light_5}};
+$dark_1: {{dark_1}};
+$dark_2: {{dark_2}};
+$dark_3: {{dark_3}};
+$dark_4: {{dark_4}};
+$dark_5: {{dark_5}};