shell: add support for light theme variant in backend

    * improve colors in themes generated with light variant

data/shell/templates/43/colors.template

@@ -7,13 +7,14 @@ $is_highcontrast: "false";
 
 $_dark_base_color: darken(desaturate({{window_bg_color}}, 2%), 2%); // UPDT: Modified from original
 
-$base_color: if($variant == 'light', #fff, $_dark_base_color);
-$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
+$base_color: $_dark_base_color; // UPDT: Modified from original
+$bg_color: if($variant == 'light', darken($base_color, 5%), lighten($base_color, 5%)); // UPDT: Modified from original
 $fg_color: if($variant == 'light', transparentize(black, .2), {{window_fg_color}}); // UPDT: Modified from original
 
-$selected_fg_color: {{accent_fg_color}}; // UPDT: Modified from original
+$accent_fg_color = {{accent_fg_color}};
+$selected_fg_color: if($variant == 'light', $accent_fg_color, {{window_fg_color}}); // UPDT: Modified from original
 $selected_bg_color: {{accent_bg_color}}; // UPDT: Modified from original
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); // NOTE: Unused in GNOME Shell
+$selected_borders_color: if($variant == 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); // NOTE: Unused in GNOME Shell
 
 $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%));
@@ -27,7 +28,7 @@ $success_color: if($variant == 'light', $green_4, {{success_color}}); // NOTE: U
 $destructive_color: {{destructive_color}}; // UPDT: Modified from original
 
 // NOTE: Used also in overview for folder colors, in search results, partially in text and for indicators below app icons
-$osd_fg_color: {{accent_fg_color}}; // UPDT: Modified from original
+$osd_fg_color: {{window_fg_color}}; // UPDT: Modified from original
 $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
 $osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%));

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

@@ -1,6 +1,8 @@
-$variant: 'dark';
+$variant: {{theme_variant}};
 
 @import "gnome-shell-sass/_colors"; //use gtk colors
 @import "gnome-shell-sass/_drawing";
 @import "gnome-shell-sass/_common";
 @import "gnome-shell-sass/_widgets";
+
+// TODO: Add import for custom CSS here

data/shell/templates/43/panel.template

@@ -0,0 +1,233 @@
+/* Top Bar */
+// a.k.a. the panel
+
+$panel_bg_color: #000; // TODO: Allow to modify this value
+$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%)); // TODO: Allow to modify this value
+$panel_height: 2.2em; // TODO: Allow to modify this value
+$panel_transition_duration: 250ms; // same as the overview transition duration
+
+#panel {
+  background-color: $panel_bg_color;
+  font-weight: bold;
+  height: $panel_height;
+  @extend %numeric;
+  transition-duration: $panel_transition_duration;
+
+  // transparent panel on lock & login screens
+  &.unlock-screen,
+  &.login-screen,
+  &:overview {
+    background-color: transparent;
+  }
+
+  // panel menus
+  .panel-button {
+    font-weight: bold;
+    color: $panel_fg_color;
+    -natural-hpadding: $base_padding * 2;
+    -minimum-hpadding: $base_padding;
+    transition-duration: 150ms;
+    border: 3px solid transparent;
+    border-radius: 99px;
+
+    &.clock-display {
+      .clock {
+        transition-duration: 150ms;
+        border: 3px solid transparent;
+        border-radius: 99px;
+      }
+    }
+
+    &.screen-recording-indicator {
+      box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
+    }
+    &.screen-sharing-indicator {
+      box-shadow: inset 0 0 0 100px $warning_color;
+      StBoxLayout { margin: 0 $base_padding; }
+    }
+
+    &.screen-recording-indicator,
+    &.screen-sharing-indicator {
+      StBoxLayout {
+        spacing: $base_padding;
+      }
+
+      StIcon {
+        icon-size: $base_icon_size;
+      }
+    }
+
+    &:active, &:overview, &:focus, &:checked {
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
+
+      // The clock display needs to have the background on .clock because
+      // we want to exclude the do-not-disturb indicator from the background
+      &.clock-display {
+        box-shadow: none;
+
+        .clock {
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
+        }
+      }
+
+      &.screen-recording-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
+      }
+      &.screen-sharing-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
+      }
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
+      &.clock-display {
+        box-shadow: none;
+        .clock {
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
+        }
+      }
+
+      &.screen-recording-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
+      }
+      &.screen-sharing-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
+      }
+    }
+
+    &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
+      &.clock-display {
+        box-shadow: none;
+        .clock {
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
+        }
+      }
+
+      &.screen-recording-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
+      }
+      &.screen-sharing-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
+      }
+    }
+
+    // status area icons
+    .system-status-icon {
+      icon-size: $base_icon_size;
+      padding: $base_padding - 1px;
+      margin: 0 $base_margin;
+    }
+
+    .panel-status-indicators-box .system-status-icon,
+    .panel-status-menu-box .system-status-icon {
+      margin: 0;
+    }
+
+    // app menu icon
+    .app-menu-icon {
+      -st-icon-style: symbolic;
+      // dimensions of the icon are hardcoded
+    }
+
+    &#panelActivities {
+      -natural-hpadding: $base_padding * 3;
+    }
+  }
+
+  &.unlock-screen,
+  &.login-screen,
+  &:overview {
+    .panel-button {
+      &:active, &:overview, &:focus, &:checked {
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
+
+        &.clock-display {
+          box-shadow: none;
+
+          .clock {
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
+          }
+        }
+
+        &.screen-recording-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
+        }
+        &.screen-sharing-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
+        }
+      }
+
+      &:hover {
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+        &.clock-display {
+          box-shadow: none;
+          .clock {
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+          }
+        }
+
+        &.screen-recording-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
+        }
+        &.screen-sharing-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
+        }
+      }
+
+      &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
+        &.clock-display {
+          box-shadow: none;
+          .clock {
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
+          }
+        }
+
+        &.screen-recording-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
+        }
+        &.screen-sharing-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
+        }
+      }
+    }
+  }
+
+  .panel-status-indicators-box,
+  .panel-status-menu-box {
+    spacing: 2px;
+  }
+
+  // spacing between power icon and (optional) percentage label
+  .power-status.panel-status-indicators-box {
+    spacing: 0;
+  }
+
+  // indicator for active
+  .screencast-indicator,
+  .remote-access-indicator { color: $warning_color; }
+}
+
+// App Menu
+#appMenu {
+  spacing: $base_padding;
+  .label-shadow { color: transparent; }
+}
+
+#appMenu .panel-status-menu-box {
+  padding: 0 $base_padding;
+  spacing: $base_padding;
+}
+
+
+// Clock
+
+.clock-display-box {
+  spacing: 2px;
+
+  .clock {
+    padding-left: $base_padding * 2;
+    padding-right: $base_padding * 2;
+  }
+}

data/shell/templates/43/switches.template

@@ -9,8 +9,9 @@ $switch_width: 48px;
   height: $switch_height;
   width: $switch_width;
   background-size: contain;
-  background-image: if($variant == 'light', url("assets/toggle-off-light.svg"),url("assets/toggle-off.svg"));
+  // TODO: Recolor light theme toggles
+  background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("assets/toggle-off.svg"));
   &:checked {
-    background-image: if($variant == 'light', url("assets/toggle-on-light.svg"),url("assets/toggle-on.svg"));
+    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("assets/toggle-on.svg"));
   }
 }