Fixed libadwaita issues

src/sass/gnome-shell/common/_message-list.scss

@@ -25,6 +25,7 @@
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
   padding: $base_margin;
   spacing: $base_spacing * 2;
+  font-weight: normal;
 }
 
 // .message-list-clear-button.button {

src/sass/gnome-shell/common/_popovers.scss

@@ -106,48 +106,50 @@ $popop_menuitem_radius: $wm_radius - 4px;
   font-weight: normal;
   transition: none;
 
-  &:ltr { padding-right: 2em; padding-left: 0; }
+  &:ltr { padding-right: 1.5em; padding-left: 0; }
-  &:rtl { padding-right: 0; padding-left: 2em; }
+  &:rtl { padding-right: 0; padding-left: 1.5em; }
+  // &:ltr { padding-right: $base_padding * 2 !important; padding-left: 0 !important; }
+  // &:rtl { padding-left: $base_padding * 2 !important; padding-right: 0 !important; }
 
   &:checked {
     font-weight: normal;
     border-radius: $popop_menuitem_radius $popop_menuitem_radius 0 0;
     border: none;
     box-shadow: none;
-    color: $alt_fg_color;
+    color: $alt_fg_color !important;
-    background-color: $submenu_bg_color;
+    background-color: $submenu_bg_color !important;
     background-gradient-direction: none !important;
 
     &:hover, &.selected {
-      color: $selected_fg_color;
+      color: $selected_fg_color !important;
-      background-color: $selected_bg_color;
+      background-color: $selected_bg_color !important;
       background-gradient-direction: none !important;
     }
 
     &:active {
-      color: $selected_fg_color;
+      color: $selected_fg_color !important;
-      background-color: mix($fg_color, $selected_bg_color, 5%);
+      background-color: mix($fg_color, $selected_bg_color, 5%) !important;
     }
 
-    &:insensitive { color: $disabled_fg_color; }
+    &:insensitive { color: $disabled_fg_color !important; }
   }
 
   &.selected {
-    color: $selected_fg_color;
+    color: $selected_fg_color !important;
-    background-color: $selected_bg_color;
+    background-color: $selected_bg_color !important;
     transition-duration: 0ms !important;
   }
 
   &:active, &.selected:active {
-    color: $selected_fg_color;
+    color: $selected_fg_color !important;
-    background-color: mix($fg_color, $selected_bg_color, 5%);
+    background-color: mix($fg_color, $selected_bg_color, 5%) !important;
   }
 
-  &:insensitive { color: $disabled_fg_color; }
+  &:insensitive { color: $disabled_fg_color !important; }
 }
 
 .popup-sub-menu {
-  background-color: $submenu_bg_color;
+  background-color: $submenu_bg_color !important;
   border-radius: 0 0 $popop_menuitem_radius $popop_menuitem_radius;
   border: none;
   box-shadow: none;
@@ -157,14 +159,14 @@ $popop_menuitem_radius: $wm_radius - 4px;
     margin: 0;
     border-radius: $popop_menuitem_radius;
 
-    &:hover {
+    &:focus, &:hover {
-      color: $selected_fg_color;
+      color: $selected_fg_color !important;
-      background-color: $selected_bg_color;
+      background-color: $selected_bg_color !important;
     }
 
     &:active {
-      color: $selected_fg_color;
+      color: $selected_fg_color !important;
-      background-color: mix($fg_color, $selected_bg_color, 5%);
+      background-color: mix($fg_color, $selected_bg_color, 5%) !important;
     }
   }
 }
@@ -183,14 +185,17 @@ $popop_menuitem_radius: $wm_radius - 4px;
 .popup-menu-ornament {
   width: 1.2em;
 
-  &:ltr { text-align: right };
+  &:ltr { text-align: right; }
-  &:rtl { text-align: left };
+  &:rtl { text-align: left; }
 }
 
 // separator
 .popup-separator-menu-item {
   background: none;
   border: none;
+  // margin: 6px 32px;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
 
   .popup-separator-menu-item-separator {
     height: 1px; //not really the whole box
@@ -222,6 +227,9 @@ $popop_menuitem_radius: $wm_radius - 4px;
   }
 
   .popup-sub-menu .popup-menu-item > :first-child {
+    // &:ltr { padding-left: $base_padding * 2 !important; margin-left: $base_padding / 2 !important; }
+    // &:rtl { padding-right: $base_padding * 2 !important; margin-right: $base_padding / 2 !important; }
+
     &:ltr { /* 12px spacing + 2*4px padding */
             padding-left: $base_padding * 2 + 4px; margin-left: 1em; }
     &:rtl { /* 12px spacing + 2*4px padding */

src/sass/gtk/_apps-4.0.scss

@@ -1,48 +1,2 @@
-//
+@import 'apps/gnome-40.0';
-// Extensions
+@import 'apps/libadwaita';
-//
-window.background.csd {
-  > stack, // GameMode setting
-  > stack > scrolledwindow > viewport > box, // User Themes (Workspace) setting
-  > box > stack > scrolledwindow > viewport > box {
-    > list {
-      @extend %circular_list;
-
-      row.activatable { @extend %circular_row; }
-    }
-  }
-
-  stack stack stack frame, // ArcMenu setting
-  > stack > stack > box > frame, // Night Theme Switcher setting
-  > stack > stack > box > box > frame, // Night Theme Switcher setting bottom lists
-  > stack > box > stack > box > frame, // ArcMenu setting
-  > stack > box > stack > scrolledwindow > viewport frame, // ArcMenu setting
-  > stack > box > stack > box > scrolledwindow > viewport > frame, // ArcMenu setting
-  > stack > grid > scrolledwindow > viewport > box > frame { // GSConnect setting
-    > border { border: none; }
-    border: none;
-
-    > list {
-      @extend %circular_list;
-
-      row.activatable { @extend %circular_row; }
-    }
-  }
-
-  > stack > box > box > list,
-  > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
-    border-bottom-left-radius: $wm_radius;
-  }
-
-  &.maximized, &.tiled, &.fullscreen {
-    > stack > box > box > list,
-    > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
-      border-bottom-left-radius: $maximized_radius;
-    }
-  }
-}
-
-window.nightthemeswitcher headerbar {
-  background: $header_bg;
-  color: $header_fg;
-}

src/sass/gtk/_common-3.0.scss

@@ -1967,12 +1967,12 @@ $pathbar_button_checked_bg: if($variant == 'light', #808080, #b8b8b8);
 }
 
 .background .path-bar button {
-  min-width: 12px;
+  min-width: $container_padding * 2;
   min-height: if($variant == 'light', 24px, 26px);
 
   &.text-button, &.image-button, & {
-    padding-left: 6px;
+    padding-left: $container_padding;
-    padding-right: 6px;
+    padding-right: $container_padding;
   }
 
   &:hover { box-shadow: none; }

src/sass/gtk/_common-4.0.scss

@@ -347,6 +347,22 @@ label {
   }
 }
 
+.accent {
+  color: $selected_bg_color;
+}
+
+.success {
+  color: $success_color;
+}
+
+.warning {
+  color: $warning_color;
+}
+
+.error {
+  color: $error_color;
+}
+
 window.assistant {
   // min-height: 38px;
   .sidebar {
@@ -451,6 +467,14 @@ spinner {
   }
 }
 
+.monospace {
+  font-family: monospace;
+}
+
+.numeric {
+  font-feature-settings: "tnum";
+}
+
 //
 // Text Entries
 //
@@ -706,6 +730,37 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   &:disabled { @include button(flat-insensitive); }
 }
 
+%opaque_button {
+  box-shadow: none;
+  transition: $button_transition;
+
+  .osd &:focus:focus-visible {
+    outline-color: rgba(white, 0.15)
+  }
+
+  &:hover {
+    background-image: image(gtkalpha(currentColor, .1));
+  }
+
+  &.keyboard-activating,
+  &:active {
+    background-image: image(transparentize(black, .8));
+  }
+
+  &:checked {
+    background-image: image(transparentize(black, .85));
+
+    &:hover {
+      background-image: image(transparentize(black, .95));
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image(transparentize(black, .7));
+    }
+  }
+}
+
 %button,
 button {
   min-height: $menuitem_size - 4px;
@@ -738,13 +793,20 @@ button {
     }
   }
 
+  &.opaque {
+    @extend %opaque_button;
+
+    background-color: mix($bg_color, $fg_color, 80%);
+    color: $fg_color;
+  }
+
   &:hover {
     @include button(hover);
     background-clip: if($variant=='light', border-box, padding-box);
     -gtk-icon-filter: brightness(1.2);
   }
 
-  &:active, &:checked {
+  &.keyboard-activating, &:active, &:checked {
     @include button(active);
 
     background-clip: if($variant=='light', border-box, padding-box);
@@ -775,11 +837,22 @@ button {
     padding-right: $container_padding * 2;
   }
 
-  &.text-button.image-button {
+  &.text-button.image-button,
+  &.image-text-button {
     min-height: $menuitem_size - 4px;
     padding-left: $container_padding;
     padding-right: $container_padding;
 
+    > box,
+    > box > box {
+      border-spacing: $container_padding - 2px;
+
+      > label {
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+    }
+
     label {
       &:first-child {
         padding-left: $container_padding + 2;
@@ -800,12 +873,32 @@ button {
     &.popup { padding-right: $container_padding; padding-left: $container_padding; }
   }
 
-  @at-root %circular_button, &.close { // The Bloody Circul Button
+  &.arrow-button {
+    padding-left: $container_padding * 1.5;
+    padding-right: $container_padding * 1.5;
+
+    > box { border-spacing: $container_padding - 2px; }
+
+    &.text-button {
+      > box { border-spacing: $container_padding - 2px; }
+    }
+  }
+
+  // hide separators
+  &.font {
+    separator { background-color: transparent; background-image: none; }
+    > box { border-spacing: $container_padding; }
+    > box > box > label { font-weight: bold; }
+  }
+
+  @at-root %circular_button, &.circular, &.close { // The Bloody Circul Button
     border-radius: $circular_radius;
-    padding: 0 0 0 0;
+    padding: 0;
     min-height: $menuitem_size;
     min-width: $menuitem_size;
 
+    label { padding: 0; }
+
     &:active, &:checked {
       @if $variant=='light' {
         @include button(flat-active);
@@ -814,6 +907,46 @@ button {
     }
   }
 
+  @at-root %pill_button,
+  &.pill {
+    padding: $container_padding * 1.5 $container_padding * 5;
+    border-radius: $circular_radius;
+  }
+
+  &.card {
+    background-color: $fill_color;
+    background-clip: padding-box;
+    font-weight: inherit;
+    padding: 0;
+    transition: $button_transition;
+
+    &:hover {
+      background-image: image(gtkalpha(currentColor, 0.03));
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image(gtkalpha(currentColor, 0.08));
+    }
+
+    &:checked {
+      background-color: $fill_color;
+      background-image: image(gtkalpha(currentColor, 0.1));
+
+      &:hover { background-image: image(gtkalpha(currentColor, 0.13)); }
+
+      &.keyboard-activating,
+      &:active { background-image: image(gtkalpha(currentColor, 0.19)); }
+
+      &.has-open-popup { background-image: image(gtkalpha(currentColor, 0.13)); }
+    }
+
+    &:drop(active) {
+      color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+  }
+
   @at-root %button_basic_drop_active,
   &:drop(active) {
     color: $drop_target_color;
@@ -839,7 +972,7 @@ button {
       background-color: $osd_button_bg;
     }
 
-    &:active, &:checked {@include button(osd-active); }
+    &.keyboard-activating, &:active, &:checked {@include button(osd-active); }
     &:disabled { @include button(osd-insensitive); }
   }
 
@@ -849,7 +982,7 @@ button {
     @include button(osd);
 
     &:hover { @include button(osd-hover); }
-    &:active, &:checked { @include button(osd-active); }
+    &.keyboard-activating, &:active, &:checked { @include button(osd-active); }
     &:disabled { @include button(osd-insensitive); }
 
     &.flat {
@@ -944,6 +1077,216 @@ button {
   .linked.vertical > & { @extend %linked_vertical; }
 }
 
+menubutton {
+  &.osd {
+    background: none;
+    color: inherit;
+
+    > button { @extend %osd_button; }
+  }
+
+  &.circular > button { @extend %circular_button; }
+  &.flat > button { @extend %flat_button; }
+  &.pill > button { @extend %pill_button; }
+
+  &.suggested-action {
+    background-color: $suggested_color;
+    color: white;
+  }
+
+  &.destructive-action {
+    background-color: $destructive_color;
+    color: white;
+  }
+
+  &.opaque {
+    background-color: mix($bg_color, $fg_color, 80%);
+    color: $fg_color;
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    border-radius: $bt_radius;
+
+    &.circular, &.pill {
+      border-radius: $circular_radius;
+    }
+
+    > button {
+      @extend %flat_button;
+
+      &, &:checked {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+
+  &.image-button > button {
+    min-width: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  arrow {
+    min-height: 16px;
+    min-width: 16px;
+    &.none {
+      -gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
+    }
+    &.down {
+      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+    &.up {
+      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+    }
+    &.left {
+      -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
+    }
+    &.right {
+      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+    }
+  }
+}
+
+splitbutton {
+  border-radius: $bt_radius;
+
+  &, & > separator {
+    transition: $button_transition;
+    transition-property: background;
+  }
+
+  > separator {
+    margin-top: $container_padding;
+    margin-bottom: $container_padding;
+    background: none;
+  }
+
+  > menubutton > button {
+    padding-left: $container_padding - 2px;
+    padding-right: $container_padding - 2px;
+  }
+
+  // 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: $container_padding;
+    padding-right: $container_padding;
+  }
+
+  &.text-button.image-button > button,
+  &.image-text-button > button {
+    padding-left: $container_padding * 1.5;
+    padding-right: $container_padding * 1.5;
+
+    > box {
+      border-spacing: $container_padding;
+    }
+  }
+
+  // Reimplementing linked so we don't blow up css
+  > button:dir(ltr),
+  > menubutton > button:dir(rtl) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: -1px;
+  }
+
+  > button:dir(rtl),
+  > menubutton > button:dir(ltr) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+  }
+
+  @at-root %flat_split_button,
+  &.flat {
+    > separator {
+      background: $borders_color;
+    }
+
+    &:hover,
+    &:active,
+    &:checked {
+      background: gtkalpha(currentColor, 0.07);
+
+      > separator {
+        background: none;
+      }
+    }
+
+    &:focus-within:focus-visible > separator {
+      background: none;
+    }
+
+    > button,
+    > menubutton > button {
+      @extend %flat_button;
+
+      border-radius: $bt_radius;
+    }
+  }
+
+  &.suggested-action {
+    background-color: $suggested_color;
+    color: white;
+  }
+
+  &.destructive-action {
+    background-color: $destructive_color;
+    color: white;
+  }
+
+  &.opaque {
+    background-color: mix($bg_color, $fg_color, 80%);
+    color: $fg_color;
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    > button, > menubutton > button {
+      @extend %flat_button;
+
+      &, &:checked {
+        color: inherit;
+        background-color: transparent;
+      }
+    }
+
+    > menubutton > button {
+      &:dir(ltr) { box-shadow: inset 1px 0 $borders_color; }
+      &:dir(rtl) { box-shadow: inset -1px 0 $borders_color; }
+    }
+  }
+
+  > menubutton > button > arrow.none {
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+  }
+}
+
+buttoncontent {
+  border-spacing: $container_padding;
+
+  > label {
+    font-weight: bold;
+
+    &:dir(ltr) { padding-right: 2px; }
+    &:dir(rtl) { padding-left: 2px; }
+  }
+
+  .arrow-button > box > &,
+  splitbutton > button > & {
+    > label {
+      &:dir(ltr) { padding-right: 0; }
+      &:dir(rtl) { padding-left: 0; }
+    }
+  }
+}
+
 // Some crazy linking stuff
 @mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true',
                      $e_border:$entry_border, $b_border:$button_border) {
@@ -1241,7 +1584,7 @@ spinbutton {
 dropdown > popover.menu.background > contents { padding: 0; }
 
 dropdown > button > box {
-  border-spacing: 6px;
+  border-spacing: $container_padding;
 }
 
 dropdown,
@@ -1863,19 +2206,23 @@ headerbar {
 //
 // Pathbars
 //
-.path-bar > button {
+
-  min-width: 12px;
+$pathbar_button_checked_bg: if($variant == 'light', #808080, #b8b8b8);
+
+pathbar > button {
+  min-width: $container_padding * 2;
   min-height: if($variant == 'light', 24px, 26px);
 
   &.text-button, &.image-button, & {
-    padding-left: 6px;
+    padding-left: $container_padding;
-    padding-right: 6px;
+    padding-right: $container_padding;
   }
 
   &:hover { box-shadow: none; }
 
   &:active, &:checked {
-    @include button(header-checked);
+    background-color: $pathbar_button_checked_bg;
+    color: if($variant == 'light', rgba(white, 1), rgba(black, 0.75));
     border-color: $button_borders;
   }
 
@@ -1886,8 +2233,8 @@ headerbar {
   &.text-button.image-button label { padding-left: 0; padding-right: 0; }
 
   &.text-button.image-button, & {
-    label:last-child { padding-right: 10px; }
+    label:last-child { padding-right: $container_padding + 4px; }
-    label:first-child { padding-left: 10px; }
+    label:first-child { padding-left: $container_padding + 4px; }
   }
 
   &.slider-button,
@@ -3462,13 +3809,29 @@ separator {
 //
 // Lists
 //
+listview,
 list {
   background-color: $base_color;
   border-color: $borders_color;
+  background-clip: padding-box;
   color: $fg_color;
 
   > row {
     padding: 2px;
+    background-clip: padding-box;
+
+    &.expander { padding: 0; }
+    &.expander .row-header { padding: 2px; }
+  }
+
+  &.horizontal row.separator,
+  &.separators.horizontal > row:not(.separator) {
+    border-left: 1px solid $borders_color;
+  }
+
+  &:not(.horizontal) row.separator,
+  &.separators:not(.horizontal) > row:not(.separator) {
+    border-bottom: 1px solid $borders_color;
   }
 
   &.content:not(.conversation-listbox) {
@@ -3498,9 +3861,6 @@ list {
       }
     }
   }
-
-  > row.expander { padding: 0px; }
-  > row.expander .row-header { padding: 2px; }
 }
 
 listview.view {
@@ -3539,6 +3899,29 @@ listview.view {
 }
 
 row {
+  background-clip: padding-box;
+
+  label.subtitle {
+    font-size: smaller;
+    @extend .dim-label;
+  }
+
+  > box.header {
+    margin-left: $container_padding * 2;
+    margin-right: $container_padding * 2;
+    min-height: $large_size;
+
+    > .icon:disabled {
+      filter: opacity($disabled_opacity);
+    }
+
+    > box.title {
+      margin-top: $container_padding;
+      margin-bottom: $container_padding;
+      border-spacing: $container_padding / 2;
+    }
+  }
+
   &:not(:hover) { transition: all 300ms $ease-out-quad; }
 
   button.circular { @extend %circular_button; }
@@ -3555,6 +3938,28 @@ row {
   &.activatable {
     @extend %row_activatable;
   }
+
+  &.combo {
+    image.dropdown-arrow:disabled {
+      filter: opacity($disabled_opacity);
+    }
+
+    listview.inline {
+      background: none;
+      border: none;
+      box-shadow: none;
+      color: inherit;
+
+      &, &:disabled {
+        background: none;
+        color: inherit;
+      }
+    }
+
+    popover > contents {
+      min-width: 120px;
+    }
+  }
 }
 
 columnview {
@@ -3655,14 +4060,19 @@ expander {
   &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
   &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
   &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+  &:disabled { filter: opacity($disabled_opacity); }
 }
 
 expander-widget {
   > box > title {
     border-radius: $bt_radius;
 
+    > expander {
+      opacity: .7;
+    }
+
     &:hover > expander {
-      color: lighten($fg_color, 30%); //only lightens the icon
+      opacity: 1;
     }
   }
 }
@@ -3802,6 +4212,10 @@ window.dialog.message { // Message Dialog styling
   }
 }
 
+window.aboutdialog image.large-icons {
+  -gtk-icon-size: 128px;
+}
+
 //
 // Filechooser
 //
@@ -4322,10 +4736,27 @@ colorswatch {
 button.color {
   padding: 0;
 
+  > colorswatch:only-child {
+    border-radius: 3px;
+
+    > overlay {
+      border-radius: 2px;
+    }
+
+    &:disabled {
+      filter: none;
+    }
+
+    &.light > overlay {
+      border-color: $borders_color;
+    }
+  }
+
   colorswatch:first-child:last-child {
-    &, overlay {
+    margin: $container_padding / 2;
-      margin: 4px;
+
-      border-radius: 0;
+    &, > overlay {
+      border-radius: 3px;
     }
   }
 }
@@ -4376,11 +4807,6 @@ colorchooser .popover.osd { border-radius: $bt_radius; }
 //
 // Shortcuts Help
 //
-button.circular {
-  @extend %circular_button;
-
-  // label { padding: 0; }
-}
 
 .keycap {
   min-width: $small_size - 4px;

src/sass/gtk/apps/_gnome-40.0.scss

@@ -0,0 +1,48 @@
+//
+// Extensions
+//
+window.background.csd {
+  > stack, // GameMode setting
+  > stack > scrolledwindow > viewport > box, // User Themes (Workspace) setting
+  > box > stack > scrolledwindow > viewport > box {
+    > list {
+      @extend %circular_list;
+
+      row.activatable { @extend %circular_row; }
+    }
+  }
+
+  stack stack stack frame, // ArcMenu setting
+  > stack > stack > box > frame, // Night Theme Switcher setting
+  > stack > stack > box > box > frame, // Night Theme Switcher setting bottom lists
+  > stack > box > stack > box > frame, // ArcMenu setting
+  > stack > box > stack > scrolledwindow > viewport frame, // ArcMenu setting
+  > stack > box > stack > box > scrolledwindow > viewport > frame, // ArcMenu setting
+  > stack > grid > scrolledwindow > viewport > box > frame { // GSConnect setting
+    > border { border: none; }
+    border: none;
+
+    > list {
+      @extend %circular_list;
+
+      row.activatable { @extend %circular_row; }
+    }
+  }
+
+  > stack > box > box > list,
+  > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
+    border-bottom-left-radius: $wm_radius;
+  }
+
+  &.maximized, &.tiled, &.fullscreen {
+    > stack > box > box > list,
+    > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
+      border-bottom-left-radius: $maximized_radius;
+    }
+  }
+}
+
+window.nightthemeswitcher headerbar {
+  background: $header_bg;
+  color: $header_fg;
+}

src/sass/gtk/apps/_libadwaita.scss

@@ -0,0 +1,114 @@
+
+//
+// avatar
+//
+
+avatar {
+  border-radius: $circular_radius;
+  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-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
+      color: nth($avatarcolor, 1);
+    }
+  }
+
+  &.contrasted { color: white; }
+
+  &.image { background: none; }
+}
+
+//
+// preferencespage
+//
+
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+preferencesgroup > box {
+  &, .labels {
+    border-spacing: $container_padding;
+  }
+
+  > box.header:not(.single-line) {
+    margin-bottom: $container_padding;
+  }
+
+  > box.single-line {
+    min-height: 34px;
+  }
+}
+
+//
+// AdwStatusPage
+//
+
+statuspage {
+  > scrolledwindow > viewport > box {
+    margin: 36px $container_padding * 2;
+    border-spacing: 36px;
+
+    > clamp > box {
+      border-spacing: $container_padding * 2;
+
+      > .icon {
+        -gtk-icon-size: 128px;
+
+        color: gtkalpha(currentColor, 0.55);
+
+        &:disabled {
+          opacity: $disabled_opacity;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 24px;
+        }
+      }
+    }
+  }
+
+  &.compact > scrolledwindow > viewport > box {
+    margin: 24px 12px;
+    border-spacing: 24px;
+
+    > clamp > box {
+      > .icon {
+        -gtk-icon-size: 96px;
+
+        &:not(:last-child) {
+          margin-bottom: $container_padding * 2;
+        }
+      }
+
+      > .title {
+        font-size: 18pt;
+      }
+    }
+  }
+}