Adw.PreferencesWindow

src/gtk-4.0/_typography.scss

@@ -155,3 +155,8 @@ label:disabled {
 .monospace {
     font-family: monospace;
 }
+
+.subtitle {
+    @extend .small-label;
+    @extend .dim-label;
+}

src/gtk-4.0/widgets/Adwaita/List.scss

@@ -0,0 +1,72 @@
+list.boxed-list {
+    @extend .frame;
+
+    border-radius: rem(6px);
+    box-shadow: 0 1px 3px rgba(black, 0.1);
+
+    > row {
+        // Rounded top
+        &:first-child {
+            &, &.expander row.header {
+                border-top-left-radius: rem(6px);
+                border-top-right-radius: rem(6px);
+            }
+        }
+
+        // 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: rem(6px);
+                border-bottom-right-radius: rem(6px);
+                border-bottom-width: 0;
+            }
+        }
+
+        .icon,
+        .prefixes {
+            &:dir(ltr) { margin-right: rem(3px); }
+            &:dir(rtl) { margin-left: rem(3px); }
+        }
+
+        > box {
+            padding: rem(6px);
+            min-height: rem(32px); //Try to force homogeneous row height
+        }
+    }
+
+    > row:not(.separator) + row:not(.separator) {
+        border-top: 1px solid #{'@menu_separator'};
+    }
+
+    row.entry {
+
+    }
+
+    row.expander {
+        image.expander-row-arrow {
+            transition: all duration("in-place") $easing;
+
+            &:dir(ltr) {
+              -gtk-icon-transform: rotate(0.25turn);
+            }
+
+            &:dir(rtl) {
+              -gtk-icon-transform: rotate(-0.25turn);
+            }
+        }
+
+        &:checked image.expander-row-arrow {
+            &:dir(ltr) {
+              -gtk-icon-transform: rotate(0.5turn);
+            }
+
+            &:dir(rtl) {
+              -gtk-icon-transform: rotate(-0.5turn);
+            }
+        }
+    }
+}

src/gtk-4.0/widgets/Adwaita/PreferencesWindow.scss

@@ -0,0 +1,56 @@
+window.preferences.csd {
+    @extend .dialog;
+
+    headerbar {
+        @extend .flat;
+
+        viewswitcher button.toggle {
+            border-radius: rem(3px);
+
+            image {
+                opacity: 0;
+                -gtk-icon-size: 0;
+            }
+        }
+    }
+
+    preferencespage > scrolledwindow {
+        undershoot.top {
+            background:
+                linear-gradient(
+                    $toplevel-border-color,
+                    rgba(black, 0.05) 1px,
+                    rgba(black, 0.0) 0.444rem
+                );
+        }
+
+        > viewport > clamp > box {
+            padding-left: rem(12px);
+            padding-right: rem(12px);
+        }
+    }
+
+    preferencesgroup {
+        margin-bottom: rem(12px);
+    }
+}
+
+
+// preferencespage > scrolledwindow > viewport > clamp > box {
+//   margin: 24px 12px;
+//   border-spacing: 24px;
+// }
+
+// preferencesgroup > box {
+//   &, .labels {
+//     border-spacing: 6px;
+//   }
+
+//   > box.header:not(.single-line) {
+//     margin-bottom: 6px;
+//   }
+
+//   > box.single-line {
+//     min-height: 34px;
+//   }
+// }

src/gtk-4.0/widgets/Adwaita/_index.scss

@@ -0,0 +1,2 @@
+@import 'List.scss';
+@import 'PreferencesWindow.scss';

src/gtk-4.0/widgets/_index.scss

@@ -95,3 +95,4 @@ selection {
 @import '_viewswitcher.scss';
 @import '_windowcontrols.scss';
 @import '_windows.scss';
+@import 'Adwaita/_index.scss';

src/gtk-4.0/widgets/_lists.scss

@@ -48,83 +48,4 @@ listview {
     &.separators:not(.horizontal) > row:not(.separator) + row:not(.separator) {
         border-top: 1px solid #{'@menu_separator'};
     }
-
-    // Hdy.List
-    &.content {
-        &,
-        list {
-            background-color: transparent;
-        }
-
-        // Nested rows background
-        list.nested > row:not(:active) {
-            &:not(:hover):not(:selected),
-            &:hover:not(.activatable):not(:selected) {
-                background-color: mix(bg-color(1), bg-color(2), $weight: 50%);
-            }
-        }
-
-        > row {
-            // Regular rows and expander header rows background
-            &:not(.expander):not(:active):not(:hover):not(:selected),
-            &:not(.expander):not(:active):hover:not(.activatable):not(:selected),
-            &.expander row.header:not(:active):not(:hover):not(:selected),
-            &.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
-                background-color: bg-color(1);
-            }
-
-            &:not(.expander):not(:active):hover.activatable:not(:selected),
-            &.expander row.header:not(:active):hover.activatable:not(:selected) {
-                background-color: mix(bg-color(1), bg-color(2), $weight: 50%);
-            }
-
-            &,
-            list > row {
-                border-color: $border-color;
-                border-style: solid;
-                transition: duration("open") $easing;
-            }
-
-            // Top border
-            &:not(:last-child) {
-                border-width: 1px 1px 0 1px;
-            }
-
-            // Rounded top
-            &:first-child,
-            &.expander:first-child row.header,
-            &.expander:checked,
-            &.expander:checked row.header,
-            &.expander:checked + row,
-            &.expander:checked + row.expander row.header {
-                border-top-right-radius: rem(3px);
-                border-top-left-radius: rem(3px);
-            }
-
-            // Bottom border
-            &:last-child,
-            &.checked-expander-row-previous-sibling,
-            &.expander:checked {
-                border-width: 1px;
-            }
-
-            // Rounded bottom
-            &:last-child,
-            &.checked-expander-row-previous-sibling,
-            &.expander:checked,
-            &.expander:not(:checked):last-child row.header,
-            &.expander:not(:checked).checked-expander-row-previous-sibling row.header,
-            &.expander.empty:checked row.header,
-            &.expander list.nested > row:last-child {
-                border-bottom-right-radius: rem(3px);
-                border-bottom-left-radius: rem(3px);
-            }
-
-            // Add space around expanded rows
-            &.expander:checked:not(:first-child),
-            &.expander:checked + row {
-                margin-top: rem(12px);
-            }
-        }
-    }
 }

src/gtk-4.0/widgets/_viewswitcher.scss

@@ -1,53 +1,6 @@
 viewswitcher button {
-    margin: 0;
-    padding: 0;
-    border-radius: 0;
-    border-top: 0;
-    border-bottom: 0;
-    box-shadow: none;
-
-    image {
-        -gtk-icon-palette: error #{'@text_color'}, success #{'@text_color'}, warning #{'@text_color'};
-    }
-
-    &:not(:checked):not(:hover) {
-        background: transparent;
-    }
-
-    &:not(:only-child):not(:last-child) {
-        border-right-width: 0;
-    }
-
-    &:not(only-child):first-child:not(:checked):not(:hover),
-    &:not(:checked):not(:hover) + &:not(:checked):not(:hover) {
-        border-left-color: transparent;
-    }
-
-    &:not(only-child):last-child:not(:checked):not(:hover) {
-        border-right-color: transparent;
-    }
-
-    &:not(:checked):hover:not(:backdrop) {
-        background-image: #{'image(lighter(@color_primary))'};
-    }
-
-    &:not(only-child):first-child:not(:checked):hover,
-    &:not(:checked):hover + &:not(:checked):not(:hover),
-    &:not(:checked):not(:hover) + &:not(:checked):hover {
-        border-left-color: #{'shade(@color_primary, 1.15)'};
-    }
-
-    &:not(only-child):last-child:not(:checked):hover {
-        border-right-color: #{'shade(@color_primary, 1.15)'};
-    }
-
-    &:not(:checked):hover:backdrop {
-        background-image: #{'image(@color_primary)'};
-    }
-
     stack > box {
-
-        & label.active {
+        label.active {
             font-weight: bold;
         }
 
@@ -67,8 +20,54 @@ viewswitcher button {
             padding: 0 9px;
         }
     }
+}
+
+headerbar viewswitcher button {
+    border-radius: rem(3px);
+
+    image {
+        opacity: 0;
+        -gtk-icon-size: 0;
+    }
+}
+
+viewswitcherbar revealer > box {
+    border-top: 1px solid $toplevel-border-color;
+
+    viewswitcher button {
+        margin: 0;
+        border-radius: 0;
+        border-top: 0;
+        border-bottom: 0;
+        box-shadow: none;
+
+        &:not(:checked):not(:hover) {
+            background: transparent;
+        }
+
+        &:not(:only-child):not(:last-child) {
+            border-right-width: 0;
+        }
+
+        &:not(only-child):first-child:not(:checked):not(:hover),
+        &:not(:checked):not(:hover) + &:not(:checked):not(:hover) {
+            border-left-color: transparent;
+        }
+
+        &:not(only-child):last-child:not(:checked):not(:hover) {
+            border-right-color: transparent;
+        }
+
+        &:not(only-child):first-child:not(:checked):hover,
+        &:not(:checked):hover + &:not(:checked):not(:hover),
+        &:not(:checked):not(:hover) + &:not(:checked):hover {
+            border-left-color: #{'shade(@color_primary, 1.15)'};
+        }
+
+        &:not(only-child):last-child:not(:checked):hover {
+            border-right-color: #{'shade(@color_primary, 1.15)'};
+        }
 
-    headerbar & {
         &:not(:checked):hover:not(:backdrop) {
             background-image: linear-gradient(
                 to top,
@@ -90,5 +89,9 @@ viewswitcher button {
         &:not(:checked):hover:backdrop {
             background-image: #{'image(@color_primary)'};
         }
+
+        image {
+            -gtk-icon-palette: error #{'@text_color'}, success #{'@text_color'}, warning #{'@text_color'};
+        }
     }
 }