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.

1 files changed, 268 insertions, 0 deletions

diff --git a/desktop-themes/YaruGreen/gtk-3.0/_headerbar.scss b/desktop-themes/YaruGreen/gtk-3.0/_headerbar.scss
new file mode 100644
index 00000000..09599aec
--- /dev/null
+++ b/desktop-themes/YaruGreen/gtk-3.0/_headerbar.scss
@@ -0,0 +1,268 @@
+// Color variables dependant on $headerbar_bg_color defined in _colors.scss
+$_button_bg_color: lighten($headerbar_bg_color, 7.5%);
+$_button_border_color: darken($headerbar_bg_color, 9%);
+// deducted from the color used in common which is $backdrop_borders_color: mix($borders_color, $bg_color, 80%);
+$_backdrop_button_border_color: darken($inkstone, 9%);
+
+// overwriting the headerbar styling from common, for the inverted look in the ambiance theme
+headerbar,
+.titlebar {
+  @include headerbar_fill($headerbar_bg_color, $hc: $headerbar_border_color);
+  color: $headerbar_fg_color;
+  border-color: $borders_color;
+
+  .title,
+  label.title {
+    color: darken($borders_color, 25%); text-shadow:none; 
+    &:backdrop { color: darken($borders_color, 15%); text-shadow:none; }
+  }
+
+  &.backdrop {
+  }
+
+  .maximized &,
+  .fullscreen & {
+    box-shadow: none;
+  }
+
+  entry {
+    &,
+    &:backdrop {
+      border-color: darken($headerbar_bg_color, 8%);
+    }
+
+    &:focus { @include entry(focus); }
+  }
+
+ 
+
+  separator {
+    background: image(lighten($_button_border_color, 5%));
+    &:backdrop {
+      background: image($_backdrop_button_border_color);
+    }
+  }
+
+  // Re-style switches because they are drawn on a dark headerbar
+  switch {
+    border-color: $_button_border_color;
+    color: $headerbar_fg_color;
+    background-color: $_button_bg_color;
+
+    &:hover { background-color: lighten($_button_bg_color, 2%); }
+
+    &:backdrop {
+      background-color: lighten($backdrop_headerbar_bg_color, 2%);
+
+      &,
+      &:checked { border-color: darken($_backdrop_button_border_color, 4%); }
+
+      &:disabled {
+        background-color: $backdrop_headerbar_bg_color;
+        border-color: $_backdrop_button_border_color;
+      }
+    }
+
+    &:disabled {
+      background-color: $headerbar_bg_color;
+      border-color: $_button_border_color;
+    }
+
+    &:checked {
+      color: $selected_fg_color;
+      border-color: $_button_border_color;
+      background-color: $checkradio_bg_color;
+    }
+  }
+
+  // Re-style sliders for switches and scales do make them look sharp on the dark headerbar
+  switch, scale {
+    slider {
+      &:checked {
+        border-color: $checkradio_borders_color;
+      }
+      &:backdrop {
+        @include button(backdrop-alt, $_button_bg_color);
+
+        &,
+        &:checked,
+        &:disabled,
+        &:checked:disabled {
+          border-color: darken($_backdrop_button_border_color, 4%); box-shadow: none;
+        }
+      }
+
+      &:not(:checked) {
+        border-color: $_button_border_color;
+      }
+      &:disabled {
+        @include button(insensitive, darken($headerbar_bg_color, 8%));
+      }
+    }
+  }
+
+  // re-insert the full selection mode section from common ...
+  .selection-mode &,
+  &.selection-mode {
+    $_hc: mix($top_hilight, $suggested_bg_color, 50%); // hilight color
+
+    color: $selected_fg_color;
+    border-color: $suggested_border_color;
+
+    @include headerbar_fill($suggested_bg_color, $_hc);
+
+    separator {
+      background: image(lighten($suggested_bg_color, 5%));
+    }
+
+    &:backdrop {
+      background-color: $suggested_bg_color;
+      background-image: none;
+      box-shadow: inset 0 1px mix($top_hilight, $suggested_bg_color, 60%);
+
+      label {
+        text-shadow: none;
+        color: $selected_fg_color;
+      }
+    }
+
+    .subtitle:link { @extend %link_selected; }
+
+    button,
+    button.image-button,
+    button.image-button.toggle,
+    button.text.button,
+    button.toggle,
+    box button.toggle,
+    buttonbox.toggle,
+    stackswitcher button,
+    filechooser .path-bar.linked>button,
+    .path-bar button {
+      @include button(normal, $suggested_bg_color, $selected_fg_color);
+      &.flat {
+        @include button(undecorated);
+      }
+
+      &:hover {
+        @include button(hover, $suggested_bg_color, $selected_fg_color);
+      }
+
+      &:active,
+      &:checked,
+      &.toggle:checked,
+      &.toggle:active {
+        @include button(active, $suggested_bg_color, $selected_fg_color);
+      }
+
+      &:backdrop {
+
+        &.flat,
+        & {
+          @include button(backdrop, $suggested_bg_color, $selected_fg_color);
+
+          //-gtk-icon-effect: none;
+          border-color: lighten($suggested_bg_color, 5%);
+
+          &:active,
+          &:checked {
+            @include button(backdrop-active, $suggested_bg_color, $selected_fg_color);
+
+            border-color: $suggested_border_color;
+          }
+
+          &:disabled {
+            @include button(backdrop-insensitive, $suggested_bg_color, $selected_fg_color);
+
+            border-color: $suggested_border_color;
+
+            &:active,
+            &:checked {
+              @include button(backdrop-insensitive-active, $suggested_bg_color, $selected_fg_color);
+
+              border-color: $suggested_border_color;
+            }
+          }
+        }
+      }
+
+      &.flat {
+
+        &:backdrop,
+        &:disabled,
+        &:backdrop:disabled {
+          @include button(undecorated);
+        }
+      }
+
+      &:disabled {
+        @include button(insensitive, $suggested_bg_color, $selected_fg_color);
+
+        &:active,
+        &:checked {
+          @include button(insensitive-active, $suggested_bg_color, $selected_fg_color);
+        }
+      }
+
+      &.suggested-action {
+        @include button(normal);
+
+        border-color: $suggested_border_color;
+
+        &:hover {
+          @include button(hover);
+
+          border-color: $suggested_border_color;
+        }
+
+        &:active {
+          @include button(active);
+
+          border-color: darken($suggested_border_color, 10%);
+        }
+
+        &:disabled {
+          @include button(insensitive);
+
+          border-color: $suggested_border_color;
+        }
+
+        &:backdrop {
+          @include button(backdrop);
+
+          border-color: $suggested_border_color;
+        }
+
+        &:backdrop:disabled {
+          @include button(backdrop-insensitive);
+
+          border-color: $suggested_border_color;
+        }
+      }
+    }
+
+    .selection-menu {
+
+      &:backdrop,
+      & {
+        border-color: transparentize($suggested_bg_color, 1);
+        background-color: transparentize($suggested_bg_color, 1);
+        background-image: none;
+        box-shadow: none;
+        min-height: 20px;
+        padding: $_sel_menu_pad;
+
+        arrow {
+          -GtkArrow-arrow-scaling: 1;
+        }
+
+        .arrow {
+          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+          color: transparentize($selected_fg_color, 0.5);
+          -gtk-icon-shadow: none;
+        }
+      }
+    }
+  }
+}
+
+