From ee83bf9919d2337de7a93c441f6090134c1a62aa Mon Sep 17 00:00:00 2001
From: Joonas Henriksson <joonas.henriksson@gmail.com>
Date: Sat, 19 Feb 2022 14:55:43 +0200
Subject: [PATCH] gtk4: Add initial styling for libadwaita widgets

---
 common/gtk-4.0/sass/_common.scss     |    2 +
 common/gtk-4.0/sass/_libadwaita.scss | 1121 ++++++++++++++++++++++++++
 common/gtk-4.0/sass/gtk.scss.in      |    1 +
 3 files changed, 1124 insertions(+)
 create mode 100644 common/gtk-4.0/sass/_libadwaita.scss

diff --git a/common/gtk-4.0/sass/_common.scss b/common/gtk-4.0/sass/_common.scss
index c1e1ef4dd..a0e14b306 100644
--- a/common/gtk-4.0/sass/_common.scss
+++ b/common/gtk-4.0/sass/_common.scss
@@ -496,6 +496,7 @@ button {
       padding-right: 12px;
     }
 
+    %image_text_button,
     &.text-button.image-button {
       padding-left: 5px;
       padding-right: 5px;
@@ -688,6 +689,7 @@ button {
 
   .linked.vertical > & { @extend %linked_vertical; }
 
+  %circular_button,
   menubutton.circular &,
   &.circular { // force circular button shape
     min-width: 24px;
diff --git a/common/gtk-4.0/sass/_libadwaita.scss b/common/gtk-4.0/sass/_libadwaita.scss
new file mode 100644
index 000000000..1552e26a6
--- /dev/null
+++ b/common/gtk-4.0/sass/_libadwaita.scss
@@ -0,0 +1,1121 @@
+@function gtkalpha($c,$a) {
+  @return unquote("alpha(#{$c},#{$a})");
+}
+
+/***********
+ * Palette *
+ ***********/
+
+$blue_1: #99c1f1;
+$blue_2: #62a0ea;
+$blue_3: #3584e4;
+$blue_4: #1c71d8;
+$blue_5: #1a5fb4;
+$green_1: #8ff0a4;
+$green_2: #57e389;
+$green_3: #33d17a;
+$green_4: #2ec27e;
+$green_5: #26a269;
+$yellow_1: #f9f06b;
+$yellow_2: #f8e45c;
+$yellow_3: #f6d32d;
+$yellow_4: #f5c211;
+$yellow_5: #e5a50a;
+$orange_1: #ffbe6f;
+$orange_2: #ffa348;
+$orange_3: #ff7800;
+$orange_4: #e66100;
+$orange_5: #c64600;
+$red_1: #f66151;
+$red_2: #ed333b;
+$red_3: #e01b24;
+$red_4: #c01c28;
+$red_5: #a51d2d;
+$purple_1: #dc8add;
+$purple_2: #c061cb;
+$purple_3: #9141ac;
+$purple_4: #813d9c;
+$purple_5: #613583;
+$brown_1: #cdab8f;
+$brown_2: #b5835a;
+$brown_3: #986a44;
+$brown_4: #865e3c;
+$brown_5: #63452c;
+$light_1: #ffffff;
+$light_2: #f6f5f4;
+$light_3: #deddda;
+$light_4: #c0bfbc;
+$light_5: #9a9996;
+$dark_1: #77767b;
+$dark_2: #5e5c64;
+$dark_3: #3d3846;
+$dark_4: #241f31;
+$dark_5: #000000;
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using #{$var}.
+
+@define-color blue_1 #{$blue_1};
+@define-color blue_2 #{$blue_2};
+@define-color blue_3 #{$blue_3};
+@define-color blue_4 #{$blue_4};
+@define-color blue_5 #{$blue_5};
+@define-color green_1 #{$green_1};
+@define-color green_2 #{$green_2};
+@define-color green_3 #{$green_3};
+@define-color green_4 #{$green_4};
+@define-color green_5 #{$green_5};
+@define-color yellow_1 #{$yellow_1};
+@define-color yellow_2 #{$yellow_2};
+@define-color yellow_3 #{$yellow_3};
+@define-color yellow_4 #{$yellow_4};
+@define-color yellow_5 #{$yellow_5};
+@define-color orange_1 #{$orange_1};
+@define-color orange_2 #{$orange_2};
+@define-color orange_3 #{$orange_3};
+@define-color orange_4 #{$orange_4};
+@define-color orange_5 #{$orange_5};
+@define-color red_1 #{$red_1};
+@define-color red_2 #{$red_2};
+@define-color red_3 #{$red_3};
+@define-color red_4 #{$red_4};
+@define-color red_5 #{$red_5};
+@define-color purple_1 #{$purple_1};
+@define-color purple_2 #{$purple_2};
+@define-color purple_3 #{$purple_3};
+@define-color purple_4 #{$purple_4};
+@define-color purple_5 #{$purple_5};
+@define-color brown_1 #{$brown_1};
+@define-color brown_2 #{$brown_2};
+@define-color brown_3 #{$brown_3};
+@define-color brown_4 #{$brown_4};
+@define-color brown_5 #{$brown_5};
+@define-color light_1 #{$light_1};
+@define-color light_2 #{$light_2};
+@define-color light_3 #{$light_3};
+@define-color light_4 #{$light_4};
+@define-color light_5 #{$light_5};
+@define-color dark_1 #{$dark_1};
+@define-color dark_2 #{$dark_2};
+@define-color dark_3 #{$dark_3};
+@define-color dark_4 #{$dark_4};
+@define-color dark_5 #{$dark_5};
+
+/**********
+ * Avatar *
+ **********/
+
+avatar {
+  border-radius: 9999px;
+  font-weight: bold;
+
+  // The list of colors to generate avatars.
+  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
+  // There are 8 different colors for avtars in the list if you change the number of them you
+  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
+  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
+  $avatarcolorlist: (
+   (#cfe1f5, #83b6ec, #337fdc), // blue
+   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
+   (#cef8d8, #8de6b1, #29ae74), // green
+   (#e6f9d7, #b5e98a, #6ab85b), // lime
+   (#f9f4e1, #f8e359, #d29d09), // yellow
+   (#ffead1, #ffcb62, #d68400), // gold
+   (#ffe5c5, #ffa95a, #ed5b00), // orange
+   (#f8d2ce, #f78773, #e62d42), // raspberry
+   (#fac7de, #e973ab, #e33b6a), // magenta
+   (#e7c2e8, #cb78d4, #9945b5), // purple
+   (#d5d2f5, #9e91e8, #7a59ca), // violet
+   (#f2eade, #e3cf9c, #b08952), // beige
+   (#e5d6ca, #be916d, #785336), // brown
+   (#d8d7d3, #c0bfbc, #6e6d71), // gray
+  );
+
+  @for $i from 1 through length($avatarcolorlist) {
+    &.color#{$i} {
+      $avatarcolor: nth($avatarcolorlist, $i);
+      background-color: nth($avatarcolor, 3);
+      color: white;
+    }
+  }
+
+  &.contrasted { color: white; }
+
+  &.image { background: none; }
+}
+
+/***********
+ * Buttons *
+ ***********/
+
+button {
+  &.image-text-button {
+    @extend %image_text_button;
+  }
+
+  %opaque_button,
+  &.opaque {
+    @include button(suggested_destructive, $button_bg, $fg_color);
+    @include focus-ring();
+
+    // opaque buttons don't have border
+    // workaround by extending background to border area
+    border: 1px solid transparent;
+    background-clip: border-box;
+
+    &.flat {
+      @include button(undecorated);
+
+      color: $fg_color;
+    }
+
+    &:hover {
+      background-image: image(gtkalpha(currentColor, .25));
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image(transparentize(black, .9));
+    }
+
+    &:checked {
+      background-image: image(transparentize(black, .9));
+
+      &:hover {
+        background-image: image(transparentize(black, .95));
+      }
+
+      &.keyboard-activating,
+      &:active {
+        background-image: image(transparentize(black, .8));
+      }
+    }
+
+
+    &.flat {
+      &:disabled {
+        @include button(undecorated);
+
+        color: $insensitive_fg_color;
+      }
+    }
+
+    &:disabled {
+      @include button(insensitive);
+
+      &:active,
+      &:checked { @include button(insensitive-active); }
+    }
+
+    .osd & {
+      @include button(osd);
+
+      &:hover { @include button(osd-hover); }
+
+      &:active,
+      &:checked { @include button(osd-active); }
+
+      &:disabled { @include button(osd-insensitive); }
+    }
+  }
+
+  @at-root %pill_button,
+  &.pill {
+    border-radius: 9999px;
+  }
+}
+
+menubutton {
+  &.circular > button { @extend %circular_button; }
+  &.flat > button { @extend %button_basic_flat; }
+  &.pill > button { @extend %pill_button; }
+
+  &.opaque {
+    background-color: $button_bg;
+    color: $fg_color;
+
+    &.circular, &.pill {
+      border-radius: 9999px;
+    }
+
+    > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+}
+
+splitbutton {
+  > separator {
+    min-height: 0;
+    min-width: 0;
+  }
+
+  // Since the inner button doesn't have any style classes on it,
+  // we have to add them manually
+  &.image-button > button {
+    min-width: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  &.text-button.image-button > button,
+  &.image-text-button > button {
+    padding-left: 5px;
+    padding-right: 5px;
+
+    > box {
+      border-spacing: 5px;
+    }
+  }
+
+  > button:dir(ltr),
+  > menubutton > button:dir(rtl) {
+    border-right-style: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > button:dir(rtl),
+  > menubutton > button:dir(ltr) {
+    border-left-style: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  > menubutton > button:hover:not(:active):dir(ltr),
+  > button:hover:not(:active):dir(ltr) + separator + menubutton > button { box-shadow: inset 1px 0 $button_border; }
+
+  > menubutton > button:hover:not(:active):dir(rtl),
+  > button:hover:not(:active):dir(rtl) + separator + menubutton > button { box-shadow: inset -1px 0 $button_border; }
+
+  &.flat {
+    > button,
+    > menubutton > button {
+      @include button(undecorated);
+    }
+
+    &:hover,
+    &:active,
+    &:checked {
+      > button,
+      > menubutton > button {
+        @include button(normal);
+        transition: $button_transition;
+
+        &:hover {
+          @include button(hover);
+          transition: $button_transition;
+          transition-duration: 500ms;
+        }
+
+        &:active,
+        &:checked {
+          @include button(active);
+          transition: $button_transition;
+        }
+      }
+    }
+  }
+
+  &.suggested-action {
+    @include button(suggested_destructive, $suggested_color, $suggested_fg_color);
+  }
+
+  &.destructive-action {
+    @include button(suggested_destructive, $destructive_color, $destructive_fg_color);
+  }
+
+  &.opaque {
+    @include button(suggested_destructive, $button_bg, $fg_color);
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    > button, > menubutton > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        color: inherit;
+        background-color: transparent;
+      }
+    }
+
+    $_separator_color: gtkalpha(currentColor, 0.55);
+    > menubutton > button {
+      &:dir(ltr) { box-shadow: inset 1px 0 $_separator_color; }
+      &:dir(rtl) { box-shadow: inset -1px 0 $_separator_color; }
+    }
+  }
+
+  > menubutton > button > arrow.none {
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+  }
+}
+
+buttoncontent {
+  border-spacing: 5px;
+
+  > label {
+    &:dir(ltr) { padding-right: 7px; }
+    &:dir(rtl) { padding-left: 7px; }
+  }
+
+  .arrow-button > box > &,
+  splitbutton > button > & {
+    > label {
+      &:dir(ltr) { padding-right: 0; }
+      &:dir(rtl) { padding-left: 0; }
+    }
+  }
+}
+
+/***************************
+ * Selection mode checkbox *
+ ***************************/
+
+checkbutton.selection-mode check {
+  -gtk-icon-size: 40px;
+  -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode#{$asset_suffix}.png"),
+                                url("assets/checkbox-selectionmode#{$asset_suffix}@2.png"));
+
+  &:checked {
+    -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode#{$asset_suffix}.png"),
+                                url("assets/checkbox-checked-selectionmode#{$asset_suffix}@2.png"));
+  }
+}
+
+/******************
+ * Flat headerbar *
+ ******************/
+
+//FIXME Needs full restyle for headerbar widgets
+headerbar.flat {
+  background: none;
+  box-shadow: none;
+  border-bottom-width: 0;
+  color: inherit;
+}
+
+/******************
+ * AdwWindowTitle *
+ ******************/
+
+headerbar,
+windowtitle {
+  .title {
+    padding-left: 12px;
+    padding-right: 12px;
+    font-weight: normal;
+  }
+
+  .subtitle {
+    font-size: smaller;
+    padding-left: 12px;
+    padding-right: 12px;
+    @extend .dim-label;
+  }
+}
+
+/**********
+ * Labels *
+ **********/
+
+.accent {
+  color: $suggested_color;
+}
+
+.success {
+  color: $success_color;
+}
+
+.warning {
+  color: $warning_color;
+}
+
+.error {
+  color: $error_color;
+}
+
+/****************
+ * AdwActionRow *
+ ****************/
+
+row {
+  label.subtitle {
+    font-size: smaller;
+    @extend .dim-label;
+  }
+
+  > box.header {
+    margin-left: 10px;
+    margin-right: 10px;
+    min-height: 50px;
+
+    > .icon:disabled {
+      color: $insensitive_fg_color;
+    }
+
+    > box.title {
+      margin-top: 5px;
+      margin-bottom: 5px;
+      border-spacing: 3px;
+    }
+  }
+}
+
+/***************
+ * AdwComboRow *
+ ***************/
+
+row.combo {
+  image.dropdown-arrow:disabled {
+    color: $insensitive_fg_color;
+  }
+
+  listview.inline {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: inherit;
+
+    &, &:disabled {
+      background: none;
+      color: inherit;
+    }
+  }
+
+  popover > contents {
+    min-width: 120px;
+  }
+}
+
+/******************
+ * AdwExpanderRow *
+ ******************/
+
+@mixin margin-start($margin) {
+  &:dir(ltr) {
+    margin-left: $margin;
+  }
+
+  &:dir(rtl) {
+    margin-right: $margin;
+  }
+}
+
+%boxed_list_row {
+  @include focus-ring();
+
+  border: 1px solid $borders_color;
+  border-bottom-width: 0;
+  transition: 200ms $ease-out-quad;
+
+  &:not(:selected).activatable {
+    &:hover {
+      background-color: if($variant != 'dark', mix($base_color, black, 95%), mix($base_color, white, 97%));
+    }
+
+    &:active {
+      background-color: mix($bg_color, $base_color);
+    }
+  }
+}
+
+row.expander {
+  // Drop transparent background on expander rows to let nested rows handle it,
+  // avoiding double highlights.
+  background: none;
+  padding: 0px;
+
+  > box > list {
+    background: none;
+    color: inherit;
+  }
+
+  list.nested {
+    background-color: mix($bg_color, $base_color);
+    color: inherit;
+  }
+
+  list.nested > row {
+    @extend %boxed_list_row;
+  }
+
+  // AdwExpanderRow arrow rotation
+
+  image.expander-row-arrow {
+    transition: 200ms $ease-out-quad;
+    @include margin-start(5px);
+  }
+
+  &:checked image.expander-row-arrow {
+    -gtk-icon-transform: rotate(0turn);
+  }
+
+  &:not(:checked) image.expander-row-arrow {
+    @extend .dim-label;
+
+    &:dir(ltr) {
+      -gtk-icon-transform: rotate(-0.25turn);
+    }
+
+    &:dir(rtl) {
+      -gtk-icon-transform: rotate(0.25turn);
+    }
+  }
+
+  &:checked image.expander-row-arrow:not(:disabled) {
+    color: $selected_bg_color;
+  }
+
+  .osd &:checked image.expander-row-arrow:not(:disabled) {
+    color: inherit;
+  }
+
+  image.expander-row-arrow:disabled {
+    color: $insensitive_fg_color;
+  }
+}
+
+/*****************
+ * Boxed Lists *
+ *****************/
+
+// Deprecated: use .boxed-list instead
+list.content,
+list.boxed-list {
+  > row {
+    // Regular rows and expander header rows background
+    &, &.expander row.header {
+      @extend %boxed_list_row;
+    }
+
+    &.expander {
+      border: none;
+    }
+
+    // Rounded top
+    &:first-child {
+      &, &.expander row.header {
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+      }
+    }
+
+    // Rounded bottom
+    &:last-child {
+      &,
+      &.expander:not(:checked),
+      &.expander:not(:checked) row.header,
+      &.expander:checked list.nested,
+      &.expander:checked list.nested > row:last-child {
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+        border-bottom-width: 1px;
+      }
+    }
+  }
+}
+
+/*****************
+ * Popover lists *
+ *****************/
+
+popover.menu {
+  list, listview {
+    background: none;
+    color: inherit;
+
+    > row {
+      border-radius: 2px;
+      padding: 5px $_menu_padding;
+      min-height: 16px;
+      min-width: 40px;
+
+      &:hover, &:active, &.has-open-popup {
+        &, &:selected.activatable {
+          @extend %selected_items;
+        }
+      }
+
+      > box {
+        border-spacing: 6px;
+      }
+    }
+  }
+}
+
+/**********
+ * Toasts *
+ **********/
+
+toast {
+  @extend %osd;
+
+  margin: 12px;
+  margin-bottom: 24px;
+
+  border-radius: 3px;
+  border-spacing: 6px;
+  padding: 5px;
+
+  &:dir(ltr) { padding-left: 10px; }
+  &:dir(rtl) { padding-right: 10px; }
+
+  > label {
+    margin: 0 6px;
+  }
+
+  button {
+    @extend %osd_button;
+  }
+
+  @if $variant == 'lighter' {
+    box-shadow: 0 0 0 1px $osd_borders_color;
+  }
+}
+
+/*****************
+ * AdwStatusPage *
+ *****************/
+
+statuspage {
+  > scrolledwindow > viewport > box {
+    margin: 30px 10px;
+    border-spacing: 30px;
+
+    > clamp > box {
+      border-spacing: 10px;
+
+      > .icon {
+        -gtk-icon-size: 128px;
+
+        color: gtkalpha(currentColor, 0.55);
+
+        &:disabled {
+          opacity: if($variant !='dark', 0.45, 0.55);
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 20px;
+        }
+      }
+    }
+  }
+
+  &.compact > scrolledwindow > viewport > box {
+    margin: 20px 10px;
+    border-spacing: 20px;
+
+    > clamp > box {
+      > .icon {
+        -gtk-icon-size: 96px;
+
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+      }
+
+      > .title {
+        font-size: 18pt;
+      }
+    }
+  }
+}
+
+/*********
+ * Cards *
+ *********/
+
+.card {
+  @at-root %card, & {
+    background-color: $base_color;
+    color: $fg_color;
+    border-style: solid;
+    border-width: 1px;
+    border-color: $borders_color;
+    border-radius: 3px;
+
+    .osd &, &.osd {
+      background-color: gtkalpha(currentColor, .1);
+      color: $osd_fg_color;
+
+      @if $variant == 'lighter' {
+        box-shadow: 0 0 0 1px $osd_borders_color;
+      } @else {
+        box-shadow: none;
+      }
+    }
+  }
+
+  @include focus-ring();
+
+  .osd &, &.osd {
+    &:focus:focus-visible {
+      outline-color: $selected_bg_color;
+    }
+  }
+
+  &.activatable {
+    transition: $button_transition;
+
+    &:hover {
+      background-color: if($variant != 'dark', mix($base_color, black, 95%), mix($base_color, white, 97%));
+    }
+
+    &:active {
+      background-color: mix($bg_color, $base_color);
+    }
+  }
+}
+
+/***************
+ * Preferences *
+ ***************/
+
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: 20px 10px;
+  border-spacing: 20px;
+}
+
+preferencesgroup > box {
+  &, .labels {
+    border-spacing: 6px;
+  }
+
+  > box.header:not(.single-line) {
+    margin-bottom: 6px;
+  }
+
+  > box.single-line {
+    min-height: 30px;
+  }
+}
+
+/****************
+ * Progress bar *
+ ****************/
+
+progressbar {
+  &.osd {
+    &.horizontal {
+      > trough, > trough > progress { min-height: 3px; }
+    }
+
+    &.vertical {
+      > trough, > trough > progress { min-width: 3px; }
+    }
+  }
+
+  .osd & > trough > progress {
+    background-color: $selected_bg_color;
+  }
+}
+
+/***********
+ * Tab bar *
+ ***********/
+
+$tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
+                                               transparentize(white, .2),
+                                               gtkalpha($selected_bg_color, .4) 10%,
+                                               gtkalpha($selected_bg_color, 0) 30%);
+
+@mixin undershoot-gradient($dir) {
+  background: linear-gradient(to #{$dir},
+                              $bg_color,
+                              transparentize($bg_color, 1) 20px);
+}
+
+@mixin need-attention-gradient($dir) {
+  background: linear-gradient(to #{$dir},
+                              transparentize($selected_bg_color, .3),
+                              transparentize($selected_bg_color, .5) 1px,
+                              transparentize($selected_bg_color, 1) 20px);
+}
+
+tabbar {
+  .box {
+    min-height: 20px;
+    background: $bg_color;
+  }
+
+  scrolledwindow.pinned {
+    undershoot {
+      border: 0 solid $borders_color;
+    }
+
+    &:dir(rtl) undershoot.left {
+      border-left-width: 1px;
+    }
+
+    &:dir(ltr) undershoot.right {
+      border-right-width: 1px;
+    }
+
+    tabbox > background {
+      &:dir(ltr) {
+        box-shadow: inset -1px 0 $borders_color;
+      }
+
+      &:dir(rtl) {
+        box-shadow: inset 1px 0 $borders_color;
+      }
+    }
+  }
+
+  undershoot {
+    transition: none;
+
+    &.left {
+      @include undershoot-gradient("right");
+    }
+
+    &.right {
+      @include undershoot-gradient("left");
+    }
+  }
+
+  .needs-attention-left undershoot.left {
+    @include need-attention-gradient("right");
+  }
+
+  .needs-attention-right undershoot.right {
+    @include need-attention-gradient("left");
+  }
+
+  tabbox {
+    > background {
+      background-color: $bg_color;
+    }
+
+    > widget {
+      @include focus-ring();
+    }
+  }
+
+  tab {
+    border-style: solid;
+    border-style: solid;
+    border-color: $borders_color;
+    border-width: 0 1px 0 1px;
+    transition: background 150ms ease-in-out;
+    background-color: transparentize($base_color, 1);
+    background-clip: padding-box;
+    color: $insensitive_fg_color;
+
+    &:checked, &:checked:hover {
+      background-color: $base_color;
+      color: $fg_color;
+    }
+
+    &:hover {
+      background-color: transparentize($base_color, 0.5);
+      color: mix($fg_color, $insensitive_fg_color, 50%);
+    }
+
+    &.needs-attention {
+      background-image: $tab_needs_attention_gradient;
+
+      &:hover {
+        background-image: image(gtkalpha(currentColor, .03)), $tab_needs_attention_gradient;
+      }
+    }
+  }
+
+  .start-action,
+  .end-action {
+    background-color: transparentize($base_color, 1);
+    background-clip: padding-box;
+    border-color: $borders_color;
+    border-style: solid;
+    transition: background 150ms ease-in-out;
+
+    button {
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .start-action:dir(ltr),
+  .end-action:dir(rtl) {
+    border-right-width: 1px;
+  }
+
+  .start-action:dir(rtl),
+  .end-action:dir(ltr) {
+    border-left-width: 1px;
+  }
+
+  &:not(.inline) {
+    .box {
+      border-bottom: 1px solid $borders_color;
+    }
+  }
+}
+
+dnd tab {
+  min-height: 20px;
+  background-color: $base_color;
+
+  &.needs-attention {
+    background-image: $tab_needs_attention_gradient;
+  }
+
+    box-shadow: 0 2px 6px 1px if($variant!='dark', transparentize(black, 0.93), transparentize(black, 0.65)),
+                0 0 0 1px darken($borders_color, 5%);
+
+  margin: 25px;
+}
+
+tabbar,
+dnd {
+  tab {
+    padding: 6px;
+
+    button.image-button {
+      padding: 0;
+      margin: 0;
+      min-width: 22px;
+      min-height: 22px;
+      border-radius: 99px;
+    }
+  }
+}
+
+tabview:drop(active),
+tabbox:drop(active) {
+  box-shadow: none;
+}
+
+/*****************
+ * View switcher *
+ *****************/
+
+viewswitcher {
+  margin: 0;
+  border-spacing: 0;
+
+  button.toggle {
+    font-weight: normal;
+    border-radius: 0;
+    border-style: none;
+    margin: 0;
+    padding: 0;
+
+    > stack > box {
+      &.narrow {
+        font-size: 0.75rem;
+        padding-top: 7px;
+        padding-bottom: 5px;
+        border-spacing: 4px;
+
+        > stack > label {
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+      }
+
+      &.wide {
+        padding: 8px 10px;
+        border-spacing: 6px;
+      }
+    }
+  }
+}
+
+/**********************
+ * AdwViewSwitcherBar *
+ **********************/
+
+viewswitcherbar actionbar > revealer > box {
+  padding: 0;
+}
+
+viewswitcherbar viewswitcher {
+  & button.toggle {
+    color: $fg_color;
+    background-color: transparent;
+
+    &:hover {
+      color: $fg_color;
+      background-color: $button_bg;
+      box-shadow: inset  1px 0 $button_border,
+                  inset -1px 0 $button_border;
+    }
+
+    &.keyboard-activating,
+    &:active,
+    &:checked {
+      @include button(active);
+    }
+  }
+}
+
+/************************
+ * AdwViewSwitcherTitle *
+ ************************/
+
+viewswitchertitle viewswitcher {
+  margin-left: 12px;
+  margin-right: 12px;
+
+  & button.toggle {
+    color: $header_fg;
+    background-color: transparentize($header_bg, 1);
+
+    &:hover {
+      color: $header_fg;
+      background-color: $header_button_bg;
+      box-shadow: inset  1px 0 $header_button_border,
+                  inset -1px 0 $header_button_border;
+    }
+
+    &.keyboard-activating,
+    &:active,
+    &:checked {
+      @include button(header-active);
+    }
+  }
+}
+
+/*******************
+ * AdwIndicatorBin *
+ *******************/
+
+indicatorbin {
+  > indicator, > mask {
+    min-width: 6px;
+    min-height: 6px;
+    border-radius: 100px;
+  }
+
+  > indicator {
+    margin: 1px;
+    background: gtkalpha(currentColor, .4);
+
+    > label {
+      font-size: 0.6rem;
+      font-weight: bold;
+      padding: 1px 4px;
+      color: white;
+    }
+  }
+
+  > mask {
+    padding: 1px;
+    background: black;
+  }
+
+  &.needs-attention > indicator {
+    background: $selected_bg_color;
+
+    > label { color: $selected_fg_color; }
+  }
+}
diff --git a/common/gtk-4.0/sass/gtk.scss.in b/common/gtk-4.0/sass/gtk.scss.in
index 7c2c81b87..363410f09 100644
--- a/common/gtk-4.0/sass/gtk.scss.in
+++ b/common/gtk-4.0/sass/gtk.scss.in
@@ -5,3 +5,4 @@ $transparency: '@transparency@';
 @import "@sass_path@/_drawing";
 @import "@sass_path@/_common";
 @import "@sass_path@/_colors-public";
+@import "@sass_path@/_libadwaita";