From 9bf6f4ec2f77fd09a12ba2b68416e81a13b4ca3d Mon Sep 17 00:00:00 2001
From: blue-devil-93 <59343188+blue-devil-93@users.noreply.github.com>
Date: Thu, 24 Jun 2021 10:32:21 +0200
Subject: Propose a different traditional ok implentation (#290)

* tr

* Propose another Traditonal Ok implementation based on Yaru

* Makefile

* fix makefile

* remove whitespace+

* remove trailing whitespaces

* rename it to traditionalok

* move Theme to yaruok

* Fix regression in mate appearance yaruok

* Sync with official branch

* readd traditionalokf

* fix YaruOK case mismatch

* improve tabs on gtk4

* fix Makefile.am

* Add YaruGreen

* Fix YaruGreen GTK3

* Fix Build - first try

* Fix Build - second try

* Fix Build - third try

* improve colors of yaru green, decrease tab size

* import scrollbar code from traditional green to yaru green

* fix build

* Tab_alignment_fix_for_yaru_green

* add panel grip

* decrease_tab_size fix_panel fix_link_color

* sync_yru_ok_with_green

* addpanel_gripper_to yaru

* darken yarugreen scrollbar as requested

* decrease border radius for popover on yaru grren and ok

* decrease border radius for popover on yaru grren and ok .

* fiy overlay - first try

* fix osd colors

* improve tabs and panel grabber

* decrease popover and menu radius to 2px

* fix mate-calc

* fix mate-calc.
---
 desktop-themes/YaruGreen/gtk-3.0/_tweaks.scss | 462 ++++++++++++++++++++++++++
 1 file changed, 462 insertions(+)
 create mode 100644 desktop-themes/YaruGreen/gtk-3.0/_tweaks.scss

(limited to 'desktop-themes/YaruGreen/gtk-3.0/_tweaks.scss')

diff --git a/desktop-themes/YaruGreen/gtk-3.0/_tweaks.scss b/desktop-themes/YaruGreen/gtk-3.0/_tweaks.scss
new file mode 100644
index 00000000..4cbdb537
--- /dev/null
+++ b/desktop-themes/YaruGreen/gtk-3.0/_tweaks.scss
@@ -0,0 +1,462 @@
+$_base_hover_color: transparentize($fg_color, 0.85);
+$_base_active_color: transparentize($fg_color, 0.75);
+$_titlebutton_height: 24px;
+
+@mixin draw_circle($c, $size:$_titlebutton_height) {
+  $button_size: $size + 2px * 2;
+  $circle_size: 20px / $button_size / 2;
+
+  background-image: -gtk-gradient(radial,
+                                  center center, 0,
+                                  center center, $circle_size,
+                                  to($c),
+                                  to(transparent));
+}
+
+@mixin undershoot($p) {
+  //
+  // undershoot
+  //
+  // $p: position
+  //
+  // possible $p values:
+  // top, bottom, right, left
+  //
+
+  $_us_shadow_color: if($variant=='light', $silk, $jet);
+  $_us_shadow_alpha: 0.8;
+
+  $_gradient_dir: left;
+  $_dash_bg_size: 10px 1px;
+  $_gradient_repeat: repeat-x;
+  $_bg_pos: center $p;
+
+  background-color: transparent; // shouldn't be needed, but better to be sure;
+
+  @if ($p == left) or ($p == right) {
+    $_gradient_dir: top;
+    $_dash_bg_size: 1px 10px;
+    $_gradient_repeat: repeat-y;
+    $_bg_pos: $p center;
+  }
+
+  padding-#{$p}: 1px;
+  background-size: $_dash_bg_size;
+  background-repeat: $_gradient_repeat;
+  background-origin: content-box;
+  background-position: $_bg_pos;
+  border: none;
+
+  @if ($p == left) {
+    box-shadow: inset 2px 0 0 transparentize($_us_shadow_color, $_us_shadow_alpha),
+                inset 1px 0 0 transparentize(darken($_us_shadow_color, 20%), $_us_shadow_alpha);
+  }
+  @else if ($p == right) {
+    box-shadow: inset -2px 0 0 transparentize($_us_shadow_color, $_us_shadow_alpha),
+                inset -1px 0 0 transparentize(darken($_us_shadow_color, 20%), $_us_shadow_alpha);
+  }
+  @else if ($p == top) {
+    box-shadow: inset 0 2px 0 0 transparentize($_us_shadow_color, $_us_shadow_alpha),
+                inset 0 1px 0 0 transparentize(darken($_us_shadow_color, 20%), $_us_shadow_alpha);
+  }
+  @else if ($p == bottom) {
+      box-shadow: inset 0 -2px 0 0 transparentize($_us_shadow_color, $_us_shadow_alpha),
+                  inset 0 -1px 0 0 transparentize(darken($_us_shadow_color, 20%), $_us_shadow_alpha);
+  }
+}
+
+// with a flatter headerbar and buttons, we dont need that heavy shadows, remove this when upstream agrees
+headerbar *, button * {
+  text-shadow: none;
+//  -gtk-icon-shadow: none;
+}
+
+// blue spinner, white spinner for colored buttons
+spinner {
+  &:not(:backdrop) {
+    color: $blue;
+  }
+  button.suggested-action &, button.destructive-action & {
+    color: $selected_fg_color;
+    &:backdrop { color: $backdrop_selected_fg_color; }
+  }
+}
+
+// titlebutton
+button.titlebutton:not(.appmenu) {
+
+  &,
+  &:hover,
+  &:active {
+
+    headerbar &,
+    .titlebar &,
+    headerbar.selection-mode & {
+
+      // spec bump otherwise :backdrop  will still have a bg
+      &,
+      &:backdrop {
+      //  @extend %undecorated_button;
+      }
+    }
+  }
+
+  // Important - otherwise the circle size is wrong
+  min-height: $_titlebutton_height;
+  min-width: $_titlebutton_height;
+  padding: 2px;
+
+  headerbar &,
+  .titlebar &,
+  headerbar.selection-mode &,
+  & {
+    &.maximize, &.minimize, &.close {
+      color: white;
+      -gtk-icon-shadow: 0 -1px black,  0 1px black,  -1px 0px black,  1px 0px black;
+      background-image: linear-gradient(to bottom,
+                      $menubar_menuitem_hover_gradient_a,
+                      $menubar_menuitem_hover_gradient_b 50%,
+                      $menubar_menuitem_hover_gradient_c 50%,
+                      $menubar_menuitem_hover_gradient_d );
+      box-shadow: inset 0px 1px rgba(255,255,255, 0.1),inset 0px -1px rgba(255,255,255, 0.1), inset 1px 0px rgba(255,255,255, 0.1), inset -1px 0px rgba(255,255,255, 0.1);
+
+      &:backdrop {
+         background-image: none;
+          box-shadow: inset 0px 1px rgba(255,255,255, 0.5),inset 0px -1px rgba(255,255,255, 0.5), inset 1px 0px rgba(255,255,255, 0.5), inset -1px 0px rgba(255,255,255, 0.5);
+         border-color: $borders_color; 
+      }
+
+      border-color: gtkshade(#86abd9, 0.6);
+      &, &:backdrop {
+        &:hover {
+          background-image: linear-gradient(to bottom,
+                      $menubar_menuitem_hover_gradient_a,
+                      $menubar_menuitem_hover_gradient_b)
+        //  @include draw_circle(if($ambiance==true, lighten($inkstone, 7%), $_base_hover_color));
+        }
+
+        &:active {
+           background-image: linear-gradient(to bottom,
+                      darken($core_color_a, 14%),
+                       darken($core_color_a, 15%))
+         // @include draw_circle(if($ambiance==true, lighten($inkstone, 12%), $_base_active_color));
+        }
+      }
+    }
+
+    &.close{
+             -gtk-icon-shadow: 0 -2px black,0 2px black, 2px  0px black, -2px 0px black, 0 -1px white,  0 1px white,  -1px 0px white,  1px 0px white,;
+
+    }
+  }
+}
+
+// we prefered our gray hover for menus and popovers, orange is a very strong color
+menu,
+.menu,
+.context-menu {
+  menuitem {
+
+    &:hover {
+    color: $selected_fg_color;
+     background-color: $selected_bg_color;
+    }
+  }
+}
+
+// We don't want menuitems to look like links, we should propose this upstream
+menubar,
+.menubar {
+  > menuitem {
+    &:hover {
+      color: $selected_fg_color;
+      background-color: $selected_bg_color;
+    }
+  }
+}
+
+// We don't want the app notifications to look like OSD because they are interactive
+.app-notification,
+.app-notification.frame {
+  padding: 10px;
+  margin: 12px;
+  color: $text_color;
+  border-radius: $menu_radius;
+  background: none;
+  background-color: $menu_color;
+  border: 1px solid $borders_color;
+  box-shadow: 0 2px 5px transparentize(black, 0.8);
+  text-shadow: none;
+
+  button {
+    &, &:dir(ltr), &:dir(rtl) {
+      &.text-button, &.image-button, & {
+        @include button(normal);
+        &.flat { @include button(undecorated); }
+        &:hover { @include button(hover); }
+        &:active { @include button(active); }
+        &:backdrop {
+          @include button(backdrop);
+          &.flat { @include button(undecorated); }
+        }
+        &:disabled { @include button(insensitive); }
+      }
+    }
+  }
+
+  &:backdrop {
+    background-color: $backdrop_bg_color;
+    color: $backdrop_text_color;
+    box-shadow: none;
+    transition: $backdrop_transition;
+  }
+
+  border { border: none; }
+}
+
+// 2 pixel transparentized focus rings
+// upstream is also interested in this
+
+*:not(button) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: -2px;
+  outline-width: 2px;
+  -gtk-outline-radius: $button-radius;
+  :selected & { outline-color: $coloured_focus_border_color; }
+}
+
+button {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: -2px;
+  outline-width: 2px;
+  -gtk-outline-radius: $button-radius;
+  &.suggested-action, &.destructive-action{ &, &:hover, &:active { outline-color: $coloured_focus_border_color; } }
+}
+
+switch {
+  &, &:hover { slider { outline-color: transparent; } }
+  &:focus {
+    box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color);
+  }
+}
+
+checkbutton,
+radiobutton {
+  outline-color: $focus_border_color;
+  outline-offset: 1px;
+  outline-width: 2px;
+  row:selected & , treeview:selected & { outline-color: $coloured_focus_border_color; }
+}
+
+treeview {
+  outline-color: $focus_border_color;
+  -gtk-outline-radius: 0px;
+
+  &:selected {
+    outline-color: $coloured_focus_border_color;
+  }
+}
+
+notebook > header {
+  &, &:backdrop { background: transparent; }
+  tabs {
+    &, &:hover, &:backdrop {
+      &, &.right, &.left, &.top, &.bottom {
+        background-color: transparent;
+        tab {
+          outline-width: 1px;
+          outline-offset: -2px;
+          &, &:dir(ltr), &:dir(rtl) {
+            &, &:backdrop {
+              &, &:checked {
+                &, &:hover, &:active {
+                  background-color: transparent;
+                  border-color: transparent;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// With the conservative tab styling scrolled windows need the undershoots
+
+scrolledwindow {
+  undershoot {
+    &.top { @include undershoot(top); }
+
+    &.bottom { @include undershoot(bottom); }
+
+    &.left { @include undershoot(left); }
+
+    &.right { @include undershoot(right); }
+  }
+}
+
+// Check/radios in menus do not need a border
+
+check,
+radio {
+  menu menuitem & {
+    &, &:checked, &:indeterminate {
+      &, &:hover, &:disabled {
+        border-color: transparent;
+      }
+    }
+  }
+}
+// Fixes selected disabled check/radios leaking selected_bg_color, should move to upstream
+treeview.view check,
+treeview.view radio {
+    &:selected {
+      &:focus, & {
+        &:disabled { color: $insensitive_fg_color; }
+    }
+  }
+}
+
+// Reducing the amount of the palette's background colors to two
+
+.sidebar { background-color: $bg_color; }
+
+// Treeview items misses a hover, port to upstream
+
+treeview:hover { background: $selected_bg_color; }
+
+scale {
+  slider {
+    .osd & {
+      @include button(osd);
+      background-image: image(darken($osd_fg_color, 2%));
+
+      &:hover {
+        background-image: image(darken($osd_fg_color, 10%));
+      }
+
+      &:active {
+        background-image: image(darken($osd_fg_color, 25%));
+      }
+    }
+  }
+}
+
+// Rubberband selection shall match with shell's tile-preview
+.rubberband,
+rubberband {
+  background-color: transparentize($ash, 0.8);
+  border: 1px solid if($variant == 'light', transparentize($silk, 0.2), transparentize(darken($silk, 10%), 0.4));
+}
+// Fix for color chose buttons, should be moved to upstream as it is variable
+// If the min-height is not set, it stretches compact headerbars
+button.color { min-height: $_headerbar_height / 2; }
+
+// Entries drown if drawn on widgets with $base_color
+// Fixing this at least for notebooks, since entries on tabs is a common pattern
+@if $variant=='dark' {
+  notebook entry { background-color: darken($base_color, 2%); }
+}
+
+// Make all :not:(.empty) level bars green - should be moved to upstream
+levelbar {
+  block {
+    &.high,
+    &:not(.empty) {
+      border-color: if($variant == 'light', darken($success_color, 20%), $success_color);
+      background-color: $success_color;
+      &:backdrop { border-color: $success_color; }
+    }
+  }
+}
+
+// Strengthen the menu shadows
+// And lighten up the dark shell menu/popover border to increase visibility
+$_dark_theme_outer_menu_border: lighten(desaturate($base_color, 100%), 14%);
+decoration {
+  .csd.popup & {
+    box-shadow: 0 1px 2px 1px transparentize(black, if($variant=='light', 0.7, 0.6)),
+                0 0 0 1px if($variant=='light', transparentize(black, 0.77), $_dark_theme_outer_menu_border);
+  }
+}
+@if $variant=='dark' {
+  menu separator {
+    background-color: $_dark_theme_outer_menu_border;
+  }
+}
+popover.background {
+  .csd &, & {
+    border-color: if($variant=='light', transparentize(black, 0.77), $_dark_theme_outer_menu_border);
+    &:backdrop { border-color: $backdrop_borders_color; }
+  }
+  @if $variant=='dark' {
+    separator {
+      background-color: $_dark_theme_outer_menu_border;
+    }
+  }  
+}
+// Adapt dark gtk3 scale and levelbar troughs to the shell
+@if $variant=='dark' {
+  scale, progressbar {
+    trough {
+      border-color: $_dark_theme_outer_menu_border;
+      background-color: $_dark_theme_outer_menu_border;
+    }
+    &:backdrop {
+      trough {
+        border-color: darken($_dark_theme_outer_menu_border, 5%);
+        background-color: darken($_dark_theme_outer_menu_border, 5%);
+      }
+    }
+  }
+  levelbar block.empty {
+    border-color: $_dark_theme_outer_menu_border;
+    background-color: $_dark_theme_outer_menu_border;
+    &:backdrop {
+      border-color: darken($_dark_theme_outer_menu_border, 5%);
+      background-color: darken($_dark_theme_outer_menu_border, 5%);
+    }
+  }
+}
+
+// Reduce hyper prominent dark theme check switch border in backdrop
+switch {
+  @if $variant=='dark' {
+    &:not(:checked):not(:backdrop):not(:disabled) { background-color: lighten($bg_color, 5%); }
+  }
+  &:backdrop {
+    &:checked:not(:disabled) {
+      &, slider { border-color: if($variant=='light', $checkradio_borders_color, $backdrop_borders_color); }
+    }
+  }
+}
+
+// Due to the ubuntu orange beeing quiet bright
+// we change the sidebar selection from a full orange
+// row to a thin orange stripe plus a soft gray selection
+$_selection_bg: if($variant=='light', darken($bg_color, 5%), lighten($base_color, 5%));
+list row, placessidebar row, sidebar row, .sidebar row {
+  &:selected {
+    &.activatable, & {
+      &, &:hover {
+        color: $selected_fg_color;
+        background-color: $_selection_bg;
+        &, button { &, & image { color: $text_color; } }
+        box-shadow: inset 4px 0 0 $selected_bg_color;
+        &:backdrop {
+          &, button { &, & image { color: $backdrop_fg_color; } }
+          background-color: if($variant=='light', $_selection_bg, lighten($_selection_bg, 2%));
+        }      
+      }
+    }
+  }
+}
+
+
+check:checked, radio:checked  {border-color:$borders_color;color: $fg_color;};
+check:selected, radio:selected { color: $fg_color;};
+
+
-- 
cgit v1.2.1