fix: add G45 shell

GradienceTeam · Sep 4, 2023 · 74c59f8 · 74c59f8
1 parent e73f32e
commit 74c59f8
Show file tree

Hide file tree

Showing 8 changed files with 413 additions and 2 deletions.
diff --git a/data/shell/templates/45/check-box.template b/data/shell/templates/45/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"); }
+}
diff --git a/data/shell/templates/45/colors.template b/data/shell/templates/45/colors.template
@@ -0,0 +1,84 @@
+// 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%));
diff --git a/data/shell/templates/45/gnome-shell.template b/data/shell/templates/45/gnome-shell.template
@@ -0,0 +1,15 @@
+$variant: {{theme_variant}};
+
+/* 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}}
diff --git a/data/shell/templates/45/palette.template b/data/shell/templates/45/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}};
diff --git a/data/shell/templates/45/panel.template b/data/shell/templates/45/panel.template
@@ -0,0 +1,232 @@
+/* Top Bar */
+// a.k.a. the panel
+
+$panel_height: 2.2em;
+$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;
+  }
+}