1 files changed, 133 insertions, 0 deletions
diff --git a/desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss b/desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss
new file mode 100644
index 00000000..dd27bc9e
--- /dev/null
+++ b/desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss
@@ -0,0 +1,133 @@
+// 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
+
+%titlebar,
+headerbar {
+  @include headerbar_fill($headerbar_bg_color);
+
+  color: $headerbar_fg_color;
+  border-color: $borders_color;
+
+  .title,
+  label.title {
+    color: $headerbar_fg_color;
+    &:backdrop { color: $backdrop_headerbar_fg_color; }
+  }
+
+  &.backdrop {
+  }
+
+  .maximized &,
+  .fullscreen & {
+    box-shadow: none;
+  }
+
+  entry {
+    &,
+    &:backdrop {
+      border-color: darken($headerbar_bg_color, 8%);
+    }
+
+    &:focus { @include entry(focus); }
+  }
+
+
+
+
+
+  switch {
+    border-color: $_button_border_color;
+    color: $headerbar_fg_color;
+    background-color: $_button_bg_color;
+
+    &:checked {
+      color: $selected_fg_color;
+      border-color: $_button_border_color;
+      background-color: $checkradio_bg_color;
+    }
+
+    &:disabled {
+      color: $insensitive_fg_color;
+      background-color: $headerbar_bg_color;
+      border-color: $_button_border_color;
+    }
+
+    &:backdrop {
+      color: $backdrop_fg_color;
+      border-color: $backdrop_borders_color;
+      background-color: lighten($backdrop_headerbar_bg_color, 2%);
+
+      &:checked {
+        color: $selected_fg_color;
+        border-color: $_button_border_color;
+        background-color: $checkradio_bg_color;
+      }
+
+      &:disabled {
+        color: $backdrop_insensitive_color;
+        background-color: $backdrop_headerbar_bg_color;
+        border-color: $_backdrop_button_border_color;
+      }
+    }
+  }
+
+  switch, scale {
+    &:checked {
+      border-color: $checkradio_borders_color;
+    }
+    slider {
+      @include button(normal, $_button_bg_color);
+    }
+
+    &:hover slider {
+      @include button(hover, $_button_bg_color);
+    }
+
+    &:checked > slider { border-color: $_button_border_color; }
+
+    &:disabled slider { @include button(insensitive, darken($headerbar_bg_color, 8%)); }
+
+    &:backdrop {
+      slider {
+        @include button(backdrop, $_button_bg_color);
+      }
+
+      &, &:checked, &:disabled, &:checked:disabled {
+        > slider { border-color: darken($_backdrop_button_border_color, 4%); box-shadow: none; }
+      }
+
+      &:checked > slider { border-color: $_button_border_color; }
+
+      &:disabled slider { @include button(backdrop-insensitive, $_button_bg_color); }
+    }
+  }
+
+  // TODO: Test separator
+  // TODO: Test switches
+}
+
+windowcontrols button image {
+  color: $headerbar_fg_color;
+}
+
+window.devel {
+  headerbar.titlebar {
+    $c: darken($bg_color, 10%);
+
+    $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+    linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
+    linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
+
+    background: $bg_color $gradient;
+
+    &:backdrop {
+      background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+      image($bg_color); /* background-color would flash */
+    }
+  }
+}