update

fix missing titlebar color on GTK2

README.md

@@ -40,10 +40,11 @@ Run the following commands in the terminal:
 -c, --color VARIANT...  Specify color variant(s) [standard|light|dark] (Default: All variants)
 -s, --size VARIANT...   Specify size variant [standard|compact] (Default: standard variant)
 
--l, --libadwaita        Link installed gtk-4.0 theme to config folder for all libadwaita app use this theme
-
--r, --remove,
--u, --uninstall         Uninstall/Remove installed themes or links
+-l, --libadwaita        Install specify gtk-4.0 theme into config folder (~/.config/gtk-4.0) for all gtk4 apps use this theme
+                        Default ColorSchemes theme will follow the system style (light/dark mode switch), nord|dracula|gruvbox|everforest|black ColorSchemes not support this
+                        Options for default ColorSchemes:
+                        1. system                      Default option (using system colors for light/dark mode switching)
+                        2. fixed                       Using fixed theme colors (that will break light/dark mode switch)
 
 --tweaks                Specify versions for tweaks
                         1. [nord|dracula|gruvbox|all]  (Nord/Dracula/gruvbox/all) ColorSchemes version
@@ -52,11 +53,24 @@ Run the following commands in the terminal:
                         4. normal                      Normal windows button style like gnome default theme (titlebuttons: max/min/close)
                         5. float                       Floating gnome-shell panel style
 
+-r, --remove,
+-u, --uninstall         Uninstall/Remove installed themes or links
+
 -h, --help              Show help
 ```
 
 > For more information, run: `./install.sh --help`
 
+### Fix for Libadwaita
+
+```sh
+./install.sh -l
+```
+
+Default ColorSchemes themes will follow the system style now ! (switch [light/dark] mode)
+
+https://github.com/vinceliuice/Colloid-gtk-theme/assets/7604295/d5c24086-08bc-45a4-b4d9-124c02249216
+
 ![tweaks](tweaks.png?raw=true)
 
 ### Flatpak Installation

assets.sh

@@ -51,7 +51,7 @@ make_assets() {
       ;;
   esac
 
-    if [[ "$scheme" == '-Nord' ]]; then
+  if [[ "$scheme" == '-Nord' ]]; then
       case "$theme" in
         '')
           theme_color_dark='#5e81ac'
@@ -90,9 +90,9 @@ make_assets() {
           theme_color_light='#d9dce3'
           ;;
       esac
-    fi
+  fi
 
-    if [[ "$scheme" == '-Dracula' ]]; then
+  if [[ "$scheme" == '-Dracula' ]]; then
       case "$theme" in
         '')
           theme_color_dark='#a679ec'
@@ -131,9 +131,9 @@ make_assets() {
           theme_color_light='#d9dae3'
           ;;
       esac
-    fi
+  fi
 
-    if [[ "$scheme" == '-Gruvbox' ]]; then
+  if [[ "$scheme" == '-Gruvbox' ]]; then
       case "$theme" in
         '')
           theme_color_dark='#458588'
@@ -172,9 +172,9 @@ make_assets() {
           theme_color_light='#a89984'
           ;;
       esac
-    fi
+  fi
 
-    if [[ "$scheme" == '-Everforest' ]]; then
+  if [[ "$scheme" == '-Everforest' ]]; then
       case "$theme" in
         '')
           theme_color_dark='#458588'
@@ -213,10 +213,10 @@ make_assets() {
           theme_color_light='#a89984'
           ;;
       esac 
-    fi
+  fi
 
   if [[ "$blackness" == 'true' ]]; then
-    case "$ctype" in
+    case "$scheme" in
       '')
         background_light='#FFFFFF'
         background_dark='#0F0F0F'
@@ -238,6 +238,13 @@ make_assets() {
         titlebar_light='#f0f1f4'
         titlebar_dark='#020203'
         ;;
+      -Gruvbox)
+        background_light='#f9f5d7'
+        background_dark='#0f0e0e'
+        background_dark_alt='#121110'
+        titlebar_light='#fbf1c7'
+        titlebar_dark='#0d0907'
+        ;;
       -Everforest)
         background_light='#fffbef'
         background_dark='#1e2326'
@@ -247,7 +254,7 @@ make_assets() {
         ;;
     esac
   else
-    case "$ctype" in
+    case "$scheme" in
       '')
         background_light='#ffffff'
         background_dark='#2c2c2c'
@@ -269,6 +276,13 @@ make_assets() {
         titlebar_light='#f0f1f4'
         titlebar_dark='#1f2029'
         ;;
+      -Gruvbox)
+        background_light='#f9f5d7'
+        background_dark='#282524'
+        background_dark_alt='#3c3836'
+        titlebar_light='#fbf1c7'
+        titlebar_dark='#242220'
+        ;;
       -Everforest)
         background_light='#fffbef'
         background_dark='#232A2E'

gtkrc.sh

@@ -13,256 +13,207 @@ make_gtkrc() {
   local GTKRC_DIR="${SRC_DIR}/main/gtk-2.0"
   local THEME_DIR="${1}/${2}${3}${4}${5}${6}"
 
-  if [[ "${color}" != '-Dark' ]]; then
-    case "$theme" in
-      '')
-        theme_color='#3c84f7'
-        ;;
-      -Purple)
-        theme_color='#AB47BC'
-        ;;
-      -Pink)
-        theme_color='#EC407A'
-        ;;
-      -Red)
-        theme_color='#E53935'
-        ;;
-      -Orange)
-        theme_color='#F57C00'
-        ;;
-      -Yellow)
-        theme_color='#FBC02D'
-        ;;
-      -Green)
-        theme_color='#4CAF50'
-        ;;
-      -Teal)
-        theme_color='#009688'
-        ;;
-      -Grey)
-        theme_color='#464646'
-        ;;
-    esac
+  case "$theme" in
+    '')
+      theme_color_dark='#3c84f7'
+      theme_color_light='#5b9bf8'
+      ;;
+    -Purple)
+      theme_color_dark='#AB47BC'
+      theme_color_light='#BA68C8'
+      ;;
+    -Pink)
+      theme_color_dark='#EC407A'
+      theme_color_light='#F06292'
+      ;;
+    -Red)
+      theme_color_dark='#E53935'
+      theme_color_light='#F44336'
+      ;;
+    -Orange)
+      theme_color_dark='#F57C00'
+      theme_color_light='#FB8C00'
+      ;;
+    -Yellow)
+      theme_color_dark='#FBC02D'
+      theme_color_light='#FFD600'
+      ;;
+    -Green)
+      theme_color_dark='#4CAF50'
+      theme_color_light='#66BB6A'
+      ;;
+    -Teal)
+      theme_color_dark='#009688'
+      theme_color_light='#4DB6AC'
+      ;;
+    -Grey)
+      theme_color_dark='#464646'
+      theme_color_light='#DDDDDD'
+      ;;
+  esac
 
-    if [[ "$scheme" == '-Nord' ]]; then
+  if [[ "$scheme" == '-Nord' ]]; then
       case "$theme" in
         '')
-          theme_color='#5e81ac'
+          theme_color_dark='#5e81ac'
+          theme_color_light='#89a3c2'
           ;;
         -Purple)
-          theme_color='#b57daa'
+          theme_color_dark='#b57daa'
+          theme_color_light='#c89dbf'
           ;;
         -Pink)
-          theme_color='#cd7092'
+          theme_color_dark='#cd7092'
+          theme_color_light='#dc98b1'
           ;;
         -Red)
-          theme_color='#c35b65'
+          theme_color_dark='#c35b65'
+          theme_color_light='#d4878f'
           ;;
         -Orange)
-          theme_color='#d0846c'
+          theme_color_dark='#d0846c'
+          theme_color_light='#dca493'
           ;;
         -Yellow)
-          theme_color='#e4b558'
+          theme_color_dark='#e4b558'
+          theme_color_light='#eac985'
           ;;
         -Green)
-          theme_color='#82ac5d'
+          theme_color_dark='#82ac5d'
+          theme_color_light='#a0c082'
           ;;
         -Teal)
-          theme_color='#83b9b8'
+          theme_color_dark='#63a6a5'
+          theme_color_light='#83b9b8'
           ;;
         -Grey)
-          theme_color='#3a4150'
+          theme_color_dark='#3a4150'
+          theme_color_light='#d9dce3'
           ;;
       esac
-    fi
+  fi
 
-    if [[ "$scheme" == '-Dracula' ]]; then
+  if [[ "$scheme" == '-Dracula' ]]; then
       case "$theme" in
         '')
-          theme_color='#a679ec'
+          theme_color_dark='#a679ec'
+          theme_color_light='#bd93f9'
           ;;
         -Purple)
-          theme_color='#a679ec'
+          theme_color_dark='#a679ec'
+          theme_color_light='#bd93f9'
           ;;
         -Pink)
-          theme_color='#f04cab'
+          theme_color_dark='#f04cab'
+          theme_color_light='#ff79c6'
           ;;
         -Red)
-          theme_color='#f44d4d'
+          theme_color_dark='#f44d4d'
+          theme_color_light='#ff5555'
           ;;
         -Orange)
-          theme_color='#f8a854'
+          theme_color_dark='#f8a854'
+          theme_color_light='#ffb86c'
           ;;
         -Yellow)
-          theme_color='#e8f467'
+          theme_color_dark='#e8f467'
+          theme_color_light='#f1fa8c'
           ;;
         -Green)
-          theme_color='#4be772'
+          theme_color_dark='#4be772'
+          theme_color_light='#50fa7b'
           ;;
         -Teal)
-          theme_color='#20eed9'
+          theme_color_dark='#20eed9'
+          theme_color_light='#50fae9'
           ;;
         -Grey)
-          theme_color='#3c3f51'
+          theme_color_dark='#3c3f51'
+          theme_color_light='#d9dae3'
           ;;
       esac
-    fi
-    if [[ "$scheme" == "-Everforest" ]]; then
-      case "$theme" in
-        '')
-          theme_color='#7fbbb3'
-          ;;
-        -Purple)
-          theme_color='#cb8eab'
-          ;;
-        -Pink)
-          theme_color='#b16286'
-          ;;
-        -Red)
-          theme_color='#db7375'
-          ;;
-        -Orange)
-          theme_color='#db8d6a'
-          ;;
-        -Yellow)
-          theme_color='#d0b174'
-          ;;
-        -Green)
-          theme_color='#9cb575'
-          ;;
-        -Teal)
-          theme_color='#78b587'
-          ;;
-        -Grey)
-          theme_color='#7A8478'
-      esac
-    fi
-  else
-    case "$theme" in
-      '')
-        theme_color='#5b9bf8'
-        ;;
-      -Purple)
-        theme_color='#BA68C8'
-        ;;
-      -Pink)
-        theme_color='#F06292'
-        ;;
-      -Red)
-        theme_color='#F44336'
-        ;;
-      -Orange)
-        theme_color='#FB8C00'
-        ;;
-      -Yellow)
-        theme_color='#FFD600'
-        ;;
-      -Green)
-        theme_color='#66BB6A'
-        ;;
-      -Teal)
-        theme_color='#4DB6AC'
-        ;;
-      -Grey)
-        theme_color='#DDDDDD'
-        ;;
-    esac
+  fi
 
-    if [[ "$scheme" == '-Nord' ]]; then
+  if [[ "$scheme" == '-Gruvbox' ]]; then
       case "$theme" in
         '')
-          theme_color='#89a3c2'
+          theme_color_dark='#458588'
+          theme_color_light='#83a598'
           ;;
         -Purple)
-          theme_color='#c89dbf'
+          theme_color_dark='#ab62b1'
+          theme_color_light='#d386cd'
           ;;
         -Pink)
-          theme_color='#dc98b1'
+          theme_color_dark='#b16286'
+          theme_color_light='#d3869b'
           ;;
         -Red)
-          theme_color='#d4878f'
+          theme_color_dark='#cc241d'
+          theme_color_light='#fb4934'
           ;;
         -Orange)
-          theme_color='#dca493'
+          theme_color_dark='#d65d0e'
+          theme_color_light='#fe8019'
           ;;
         -Yellow)
-          theme_color='#eac985'
+          theme_color_dark='#d79921'
+          theme_color_light='#fabd2f'
           ;;
         -Green)
-          theme_color='#a0c082'
+          theme_color_dark='#98971a'
+          theme_color_light='#b8bb26'
           ;;
         -Teal)
-          theme_color='#83b9b8'
+          theme_color_dark='#689d6a'
+          theme_color_light='#8ec07c'
           ;;
         -Grey)
-          theme_color='#d9dce3'
+          theme_color_dark='#3c3836'
+          theme_color_light='#a89984'
           ;;
       esac
-    fi
+  fi
 
-    if [[ "$scheme" == '-Dracula' ]]; then
+  if [[ "$scheme" == '-Everforest' ]]; then
       case "$theme" in
         '')
-          theme_color='#bd93f9'
+          theme_color_dark='#458588'
+          theme_color_light='#83a598'
           ;;
         -Purple)
-          theme_color='#bd93f9'
+          theme_color_dark='#ab62b1'
+          theme_color_light='#d386cd'
           ;;
         -Pink)
-          theme_color='#ff79c6'
+          theme_color_dark='#b16286'
+          theme_color_light='#d3869b'
           ;;
         -Red)
-          theme_color='#ff5555'
+          theme_color_dark='#cc241d'
+          theme_color_light='#fb4934'
           ;;
         -Orange)
-          theme_color='#ffb86c'
+          theme_color_dark='#d65d0e'
+          theme_color_light='#fe8019'
           ;;
         -Yellow)
-          theme_color='#f1fa8c'
+          theme_color_dark='#d79921'
+          theme_color_light='#fabd2f'
           ;;
         -Green)
-          theme_color='#50fa7b'
+          theme_color_dark='#98971a'
+          theme_color_light='#b8bb26'
           ;;
         -Teal)
-          theme_color='#50fae9'
+          theme_color_dark='#689d6a'
+          theme_color_light='#8ec07c'
           ;;
         -Grey)
-          theme_color='#d9dae3'
+          theme_color_dark='#3c3836'
+          theme_color_light='#a89984'
           ;;
       esac 
-    fi
-
-    if [[ "$scheme" == '-Everforest' ]]; then
-      case "$theme" in 
-        '')
-          theme_color='#3A94c5'
-          ;;
-        -Purple)
-          theme_color='#bd93f9'
-          ;;
-        -Pink)
-          theme_color='#DF69ba'
-          ;;
-        -Red)
-          theme_color='#f85552'
-          ;;
-        -Orange)
-          theme_color='#F57D26'
-          ;;
-        -Yellow)
-          theme_color='#DFA000'
-          ;;
-        -Green)
-          theme_color='#8da101'
-          ;;
-        -Teal)
-          theme_color='#35a77c'
-          ;;
-        -Grey)
-          theme_color='#708089'
-          ;;
-      esac
-    fi
   fi
 
   if [[ "$blackness" == 'true' ]]; then
@@ -291,6 +242,14 @@ make_gtkrc() {
         titlebar_light='#f0f1f4'
         titlebar_dark='#020203'
         ;;
+      -Gruvbox)
+        background_light='#f9f5d7'
+        background_dark='#0f0e0e'
+        background_darker='#121110'
+        background_alt='#211f1e'
+        titlebar_light='#fbf1c7'
+        titlebar_dark='#0d0907'
+        ;;
       -Everforest)
         background_light='#fffbef'
         background_dark='#1e2326'
@@ -326,13 +285,21 @@ make_gtkrc() {
         titlebar_light='#f0f1f4'
         titlebar_dark='#1f2029'
         ;;
+      -Gruvbox)
+        background_light='#f9f5d7'
+        background_dark='#282524'
+        background_darker='#3c3836'
+        background_alt='#504945'
+        titlebar_light='#fbf1c7'
+        titlebar_dark='#242220'
+        ;;
       -Everforest)
         background_light='#fffbef'
         background_dark='#232A2E'
         background_darker='#343F44'
         background_alt='#3D484D'
-        background_light='#edeada'
-        background_dark='#1e2326'
+        titlebar_light='#edeada'
+        titlebar_dark='#1e2326'
         ;;
     esac
   fi
@@ -343,11 +310,11 @@ make_gtkrc() {
   sed -i "s/#464646/${background_alt}/g"                                        "${THEME_DIR}/gtk-2.0/gtkrc"
 
   if [[ "${color}" == '-Dark' ]]; then
-    sed -i "s/#5b9bf8/${theme_color}/g"                                         "${THEME_DIR}/gtk-2.0/gtkrc"
+    sed -i "s/#5b9bf8/${theme_color_light}/g"                                   "${THEME_DIR}/gtk-2.0/gtkrc"
     sed -i "s/#3C3C3C/${background_darker}/g"                                   "${THEME_DIR}/gtk-2.0/gtkrc"
     sed -i "s/#242424/${titlebar_dark}/g"                                       "${THEME_DIR}/gtk-2.0/gtkrc"
   else
-    sed -i "s/#3c84f7/${theme_color}/g"                                         "${THEME_DIR}/gtk-2.0/gtkrc"
+    sed -i "s/#3c84f7/${theme_color_dark}/g"                                    "${THEME_DIR}/gtk-2.0/gtkrc"
     sed -i "s/#F2F2F2/${titlebar_light}/g"                                      "${THEME_DIR}/gtk-2.0/gtkrc"
   fi
 }

install.sh

@@ -30,7 +30,7 @@ COLOR_VARIANTS=('' '-Light' '-Dark')
 SIZE_VARIANTS=('' '-Compact')
 
 if [[ "$(command -v gnome-shell)" ]]; then
-  gnome-shell --version
+  echo && gnome-shell --version
   SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)"
   if [[ "${SHELL_VERSION:-}" -ge "46" ]]; then
     GS_VERSION="46-0"
@@ -63,10 +63,11 @@ OPTIONS:
 
   -s, --size VARIANT      Specify size variant [standard|compact] (Default: standard variant)
 
-  -l, --libadwaita        Link installed gtk-4.0 theme to config folder for all libadwaita app use this theme
-
-  -r, --remove,
-  -u, --uninstall         Uninstall/Remove installed themes or links
+  -l, --libadwaita        Install specify gtk-4.0 theme into config folder ($HOME/.config/gtk-4.0) for all gtk4 apps use this theme
+                          Default ColorSchemes theme will follow the system style (light/dark mode switch), nord|dracula|gruvbox|everforest|black ColorSchemes not support this
+                          Options for default ColorSchemes:
+                          1. system                      Default option (using system colors for light/dark mode switching)
+                          2. fixed                       Using fixed theme colors (that will break light/dark mode switch)
 
   --tweaks                Specify versions for tweaks
                           1. [nord|dracula|gruvbox|everforest|all]  Nord|Dracula|gruvbox|everforet|all ColorSchemes version
@@ -75,6 +76,9 @@ OPTIONS:
                           4. normal                      Normal windows button style like gnome default theme (titlebuttons: max/min/close)
                           5. float                       Floating gnome-shell panel style
 
+  -r, --remove,
+  -u, --uninstall         Uninstall/Remove installed themes or links
+
   -h, --help              Show help
 EOF
 }
@@ -165,7 +169,7 @@ while [[ $# -gt 0 ]]; do
     -d|--dest)
       dest="${2}"
       if [[ ! -d "${dest}" ]]; then
-        echo "Destination directory does not exist. Let's make a new one..."
+        echo -e "\nDestination directory does not exist. Let's make a new one..."
         mkdir -p ${dest}
       fi
       shift 2
@@ -181,6 +185,27 @@ while [[ $# -gt 0 ]]; do
     -l|--libadwaita)
       libadwaita="true"
       shift
+      for type in "${@}"; do
+        case "${type}" in
+          system)
+            echo -e "\nUse system default colors for light/dark mode switch."
+            shift
+            ;;
+          fixed)
+            colortype='fixed'
+            echo -e "\nUse fixed theme colors but that will break light/dark mode switch."
+            shift
+            ;;
+          -*|--*)
+            break
+            ;;
+          *)
+            echo -e "\nERROR: Unrecognized type variant '$1'."
+            echo -e "\nTry '$0 --help' for more information."
+            exit 1
+            ;;
+        esac
+      done
       ;;
     -c|--color)
       shift
@@ -205,8 +230,8 @@ while [[ $# -gt 0 ]]; do
             break
             ;;
           *)
-            echo "ERROR: Unrecognized color variant '$1'."
-            echo "Try '$0 --help' for more information."
+            echo -e "\nERROR: Unrecognized color variant '$1'."
+            echo -e "\nTry '$0 --help' for more information."
             exit 1
             ;;
         esac
@@ -261,8 +286,8 @@ while [[ $# -gt 0 ]]; do
             break
             ;;
           *)
-            echo "ERROR: Unrecognized theme variant '$1'."
-            echo "Try '$0 --help' for more information."
+            echo -e "\nERROR: Unrecognized theme variant '$1'."
+            echo -e "\nTry '$0 --help' for more information."
             exit 1
             ;;
         esac
@@ -285,8 +310,8 @@ while [[ $# -gt 0 ]]; do
             break
             ;;
           *)
-            echo "ERROR: Unrecognized size variant '${1:-}'."
-            echo "Try '$0 --help' for more information."
+            echo -e "\nERROR: Unrecognized size variant '${1:-}'."
+            echo -e "\nTry '$0 --help' for more information."
             exit 1
             ;;
         esac
@@ -299,25 +324,25 @@ while [[ $# -gt 0 ]]; do
           nord)
             colorscheme='true'
             schemes+=("${SCHEME_VARIANTS[1]}")
-            echo -e "Nord ColorScheme version! ..."
+            echo -e "\nNord ColorScheme version! ..."
             shift
             ;;
           dracula)
             colorscheme='true'
             schemes+=("${SCHEME_VARIANTS[2]}")
-            echo -e "Dracula ColorScheme version! ..."
+            echo -e "\nDracula ColorScheme version! ..."
             shift
             ;;
           gruvbox)
             colorscheme='true'
             schemes+=("${SCHEME_VARIANTS[3]}")
-            echo -e "Gruvbox ColorScheme version! ..."
+            echo -e "\nGruvbox ColorScheme version! ..."
             shift
             ;;
           everforest)
             colorscheme='true'
             schemes+=("${SCHEME_VARIANTS[4]}")
-            echo -e "Everforest ColorScheme version! ..."
+            echo -e "\nEverforest ColorScheme version! ..."
             shift
             ;;
           all)
@@ -327,31 +352,31 @@ while [[ $# -gt 0 ]]; do
             ;;
           black)
             blackness="true"
-            echo -e "Blackness version! ..."
+            echo -e "\nBlackness version! ..."
             shift
             ;;
           rimless)
             rimless="true"
-            echo -e "Rimless version! ..."
+            echo -e "\nRimless version! ..."
             shift
             ;;
           normal)
             normal="true"
             window="-Normal"
-            echo -e "Normal window button version! ..."
+            echo -e "\nNormal window button version! ..."
             shift
             ;;
           float)
             float="true"
-            echo -e "Install Floating Gnome-Shell Panel version! ..."
+            echo -e "\nInstall Floating Gnome-Shell Panel version! ..."
             shift
             ;;
           -*)
             break
             ;;
           *)
-            echo "ERROR: Unrecognized tweaks variant '$1'."
-            echo "Try '$0 --help' for more information."
+            echo -e "\nERROR: Unrecognized tweaks variant '$1'."
+            echo -e "\nTry '$0 --help' for more information."
             exit 1
             ;;
         esac
@@ -362,8 +387,8 @@ while [[ $# -gt 0 ]]; do
       exit 0
       ;;
     *)
-      echo "ERROR: Unrecognized installation option '$1'."
-      echo "Try '$0 --help' for more information."
+      echo -e "\nERROR: Unrecognized installation option '$1'."
+      echo -e "\nTry '$0 --help' for more information."
       exit 1
       ;;
   esac
@@ -400,12 +425,14 @@ install_package() {
     echo sassc needs to be installed to generate the css.
     if has_command zypper; then
       sudo zypper in sassc
+    elif has_command apt; then
+      sudo apt install sassc
     elif has_command apt-get; then
       sudo apt-get install sassc
     elif has_command dnf; then
       sudo dnf install sassc
-    elif has_command dnf; then
-      sudo dnf install sassc
+    elif has_command yum; then
+      sudo yum install sassc
     elif has_command pacman; then
       sudo pacman -S --noconfirm sassc
     fi
@@ -441,6 +468,10 @@ color_schemes() {
   fi
 }
 
+color_type() {
+  sed -i "/\$colortype:/s/system/fixed/" "${SRC_DIR}/sass/_tweaks-temp.scss"
+}
+
 blackness_color() {
   sed -i "/\$blackness:/s/false/true/" "${SRC_DIR}/sass/_tweaks-temp.scss"
 }
@@ -462,7 +493,7 @@ gnome_shell_version() {
 
   sed -i "/\widgets/s/40-0/${GS_VERSION}/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss"
 
-  if [[ "${GS_VERSION}" == '3-28' ]]; then
+  if [[ "${GS_VERSION}" != '40-0' && "${GS_VERSION}" != '42-0' && "${GS_VERSION}" != '44-0' ]]; then
     sed -i "/\extensions/s/40-0/${GS_VERSION}/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss"
   fi
 }
@@ -512,6 +543,10 @@ theme_tweaks() {
     compact_size
   fi
 
+  if [[ "$colortype" = "fixed" ]] ; then
+    color_type
+  fi
+
   if [[ "$colorscheme" = "true" ]] ; then
     color_schemes
   fi
@@ -533,8 +568,8 @@ theme_tweaks() {
   fi
 }
 
-uninstall_link() {
-  rm -rf "${HOME}/.config/gtk-4.0/"{assets,windows-assets,gtk.css,gtk-dark.css}
+uninstall_libadwaita() {
+  rm -rf "${HOME}/.config/gtk-4.0/"{assets,windows-assets,gtk.css,gtk-dark.css,gtk-Light.css,gtk-Dark.css}
 }
 
 link_libadwaita() {
@@ -549,7 +584,7 @@ link_libadwaita() {
 
   rm -rf "${HOME}/.config/gtk-4.0/"{assets,gtk.css,gtk-dark.css}
 
-  echo -e "\nLink '$THEME_DIR/gtk-4.0' to '${HOME}/.config/gtk-4.0' for libadwaita..."
+  echo -e "\nLink '${THEME_DIR}/gtk-4.0' to '${HOME}/.config/gtk-4.0' for libadwaita...\n"
 
   mkdir -p                                                                      "${HOME}/.config/gtk-4.0"
   ln -sf "${THEME_DIR}/gtk-4.0/assets"                                          "${HOME}/.config/gtk-4.0/assets"
@@ -557,6 +592,31 @@ link_libadwaita() {
   ln -sf "${THEME_DIR}/gtk-4.0/gtk-dark.css"                                    "${HOME}/.config/gtk-4.0/gtk-dark.css"
 }
 
+libadwaita_theme() {
+  local dest="${1}"
+  local name="${2}"
+  local theme="${3}"
+  local color="${4}"
+  local size="${5}"
+  local scheme="${6}"
+
+  theme_tweaks
+
+  rm -rf "${HOME}/.config/gtk-4.0/"{assets,gtk.css,gtk-dark.css}
+
+  echo -e "\nInstalling ${2}${3}${4}${5}${6} theme into '${HOME}/.config/gtk-4.0' for libadwaita..."
+
+  mkdir -p                                                                      "${HOME}/.config/gtk-4.0"
+  cp -r "${SRC_DIR}/assets/gtk/assets"                                          "${HOME}/.config/gtk-4.0"
+  cp -r "${SRC_DIR}/assets/gtk/symbolics/"*'.svg'                               "${HOME}/.config/gtk-4.0/assets"
+
+  if [[ "$colorscheme" = "true" || "$blackness" = "true" || "$colortype" = "fixed" ]] ; then
+    sassc $SASSC_OPT "${SRC_DIR}/main/libadwaita/libadwaita${color}.scss"       "${HOME}/.config/gtk-4.0/gtk.css"
+  else
+    sassc $SASSC_OPT "${SRC_DIR}/main/libadwaita/libadwaita-Light.scss"         "${HOME}/.config/gtk-4.0/gtk.css"
+  fi
+}
+
 link_theme() {
   for theme in "${themes[@]}"; do
     for color in "${lcolors[@]}"; do
@@ -569,33 +629,12 @@ link_theme() {
   done
 }
 
-clean() {
-  local dest="${1}"
-  local name="${2}"
-  local theme="${3}"
-  local color="${4}"
-  local size="${5}"
-  local scheme="${6}"
-  local screen="${7}"
-
-  local THEME_DIR="${1}/${2}${3}${4}${5}${6}${7}"
-
-  if [[ ${theme} == '' && ${color} == '' && ${size} == '' && ${scheme} == '' ]]; then
-    cleantheme='none'
-  elif [[ -d ${THEME_DIR} ]]; then
-    rm -rf ${THEME_DIR}
-    echo -e "Find: ${THEME_DIR} ! removing it ..."
-  fi
-}
-
-clean_theme() {
-  for theme in '' '-purple' '-pink' '-red' '-orange' '-yellow' '-green' '-teal' '-grey'; do
-    for color in '' '-light' '-dark'; do
-      for size in '' '-compact'; do
-        for scheme in '' '-nord' '-dracula' '-gruvbox' '-everforest'; do
-          for screen in '' '-hdpi' '-xhdpi'; do
-            clean "${dest:-${DEST_DIR}}" "${name:-${THEME_NAME}}" "${theme}" "${color}" "${size}" "${scheme}" "${screen}"
-          done
+install_libadwaita() {
+  for theme in "${themes[@]}"; do
+    for color in "${lcolors[@]}"; do
+      for size in "${sizes[@]}"; do
+        for scheme in "${schemes[@]}"; do
+          libadwaita_theme "${dest:-$DEST_DIR}" "${name:-$THEME_NAME}" "$theme" "$color" "$size" "$scheme"
         done
       done
     done
@@ -652,15 +691,17 @@ uninstall_theme() {
 
 if [[ "$uninstall" == 'true' ]]; then
   if [[ "$libadwaita" == 'true' ]]; then
-    echo -e "\nUninstall ${HOME}/.config/gtk-4.0 links ..."
-    uninstall_link
+    echo -e "\nUninstall libadwaita theme from ${HOME}/.config/gtk-4.0 ..."
+    uninstall_libadwaita
   else
-    echo && uninstall_theme && uninstall_link
+    echo && uninstall_theme && uninstall_libadwaita
   fi
 else
-  install_package && tweaks_temp && gnome_shell_version && install_theme
+  install_package && tweaks_temp
+  gnome_shell_version && echo && install_theme
+
   if [[ "$libadwaita" == 'true' ]]; then
-    uninstall_link && link_theme
+    uninstall_libadwaita && install_libadwaita
   fi
 fi
 

src/assets/gtk/symbolics/menu-radio-symbolic.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" version="1.1" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+ <path d="m7 4c1.6569 0 3 1.3431 3 3s-1.3431 3-3 3-3-1.3431-3-3 1.3431-3 3-3z"/>
+</svg>

src/assets/gtk/symbolics/menu-radio-symbolic@2.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" version="1.1" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+ <path d="m14 8c3.3137 0 6 2.6863 6 6s-2.6863 6-6 6-6-2.6863-6-6 2.6863-6 6-6z"/>
+</svg>

src/main/libadwaita/libadwaita-Dark.scss

@@ -0,0 +1,12 @@
+$variant: 'dark';
+$topbar: 'dark';
+
+@import '../../sass/colors';
+@import '../../sass/libadwaita/palette';
+@import '../../sass/libadwaita/functions';
+@import '../../sass/libadwaita/variables';
+@import '../../sass/libadwaita/colors';
+@import '../../sass/libadwaita/drawing';
+@import '../../sass/libadwaita/common';
+@import '../../sass/libadwaita/defaults';
+@import '../../sass/libadwaita/compat-colors';

src/main/libadwaita/libadwaita-Light.scss

@@ -0,0 +1,12 @@
+$variant: 'light';
+$topbar: 'light';
+
+@import '../../sass/colors';
+@import '../../sass/libadwaita/palette';
+@import '../../sass/libadwaita/functions';
+@import '../../sass/libadwaita/variables';
+@import '../../sass/libadwaita/colors';
+@import '../../sass/libadwaita/drawing';
+@import '../../sass/libadwaita/common';
+@import '../../sass/libadwaita/defaults';
+@import '../../sass/libadwaita/compat-colors';

src/main/libadwaita/libadwaita.scss

@@ -0,0 +1,12 @@
+$variant: 'light';
+$topbar: 'dark';
+
+@import '../../sass/colors';
+@import '../../sass/libadwaita/palette';
+@import '../../sass/libadwaita/functions';
+@import '../../sass/libadwaita/variables';
+@import '../../sass/libadwaita/colors';
+@import '../../sass/libadwaita/drawing';
+@import '../../sass/libadwaita/common';
+@import '../../sass/libadwaita/defaults';
+@import '../../sass/libadwaita/compat-colors';

src/sass/_colors.scss

@@ -7,6 +7,19 @@
   @return unquote("alpha(#{$c}, #{$a})");
 }
 
+@function gtkmix($c1,$c2,$r) {
+  $ratio: 1 -  $r / 100%; // match SCSS mix()
+  @return unquote("mix(#{$c1},#{$c2},#{$ratio})");
+}
+
+@function gtkshade($c,$s) {
+  @return unquote("shade(#{$c},#{$s})");
+}
+
+@function gtkcolor($c) {
+  @return unquote("@#{$c}");
+}
+
 @function on($color, $state: 'primary') {
   // Allow 'light' or 'dark' to $color
   @if ($color == 'light') { $color: $white; }
@@ -120,6 +133,8 @@ $scrim-inverse:                         rgba($white, 0.1);
 $titlebar:                              if($topbar == 'dark', background(f), background(c));
 $titlebar-backdrop:                     if($topbar == 'dark', background(g), background(b));
 $titlebar-primary:                      if($topbar == 'dark' and $theme == 'grey' and $variant == 'light', lighten($primary, 15%), $primary);
+$sidebar:                               if($topbar == 'dark' and $variant == 'light', $titlebar, $base-alt);
+$sidebar-backdrop:                      if($topbar == 'dark' and $variant == 'light', $titlebar-backdrop, $background);
 $popover:                               if($variant == 'light', background(a), background(g));
 $panel-solid:                           if($topbar == 'dark', background(e), background(c)); // for Unity panel which doesn't allow translucent colors
 $panel:                                 rgba($panel-solid, $panel_opacity);

src/sass/_tweaks.scss

@@ -4,6 +4,9 @@
 
 $colorscheme: 'default';
 
+// Color type
+$colortype: 'system'; // system/fixed : use system colors / use theme colors
+
 // transparent opacity
 $opacity: 'default';
 

src/sass/cinnamon/_common.scss

@@ -245,7 +245,7 @@ StScrollBar {
 // Tooltip
 //
 #Tooltip {
-  border-radius: $circular-radius;
+  border-radius: $window-radius;
   padding: $space-size $space-size * 2;
   background-color: $tooltip;
   color: on($tooltip);
@@ -886,11 +886,10 @@ $menu_item_radius: $corner-radius;
 .calendar-event-button {
   margin: $space-size 0 $space-size 0;
   border-radius: $corner-radius;
+  background-color: $fill;
 
   &:hover {
-    background-gradient-direction: vertical;
-    background-gradient-start: $fill;
-    background-gradient-end: $fill;
+    background-color: $divider;
     box-shadow: none;
   }
 }
@@ -961,8 +960,8 @@ $menu_item_radius: $corner-radius;
   spacing-columns: $space-size*1.5;
   margin-from-right-edge-of-screen: $space-size*3;
   width: 28em;
-  color: $text;
-  background-color: rgba($base, 0.8);
+  color: on($tooltip);
+  background-color: $tooltip;
   box-shadow: 0 5px 12px rgba(black, 0.35);
   margin: 7px 12px 17px 12px;
 
@@ -977,12 +976,12 @@ $menu_item_radius: $corner-radius;
   .popup-menu & {
     border: none;
     border-radius: $corner-radius;
-    background-color: rgba($text, 0.05);
+    background-color: $fill;
     box-shadow: none;
     margin: 0;
 
     &:hover {
-      background-color: rgba($text, 0.1);
+      background-color: $divider;
       box-shadow: 0 3px 8px rgba(black, 0.15);
     }
 
@@ -998,7 +997,7 @@ $menu_item_radius: $corner-radius;
 
   &.multi-line-notification {
     padding-bottom: $space-size*2;
-    color: $text;
+    color: on($tooltip);
   }
 
   &-scrollview {
@@ -1017,7 +1016,7 @@ $menu_item_radius: $corner-radius;
 .notification {
   &-with-image {
     min-height: 159px;
-    color: $text;
+    color: on($tooltip);
   }
 
   &-button, &-icon-button {
@@ -1689,7 +1688,7 @@ $menu_item_radius: $corner-radius;
     z-index: 120;
     text-shadow: none;
     color: on($primary);
-    padding: 0;
+    padding: 0 1px;
   }
 
   &-button-label {

src/sass/gnome-shell/_extensions-46-0.scss

@@ -0,0 +1,2 @@
+@import 'extensions-46-0/dash-to-dock';
+@import 'extensions-46-0/misc';

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

@@ -5,7 +5,6 @@
   width: 34em;
   min-height: 64px;
   margin: 12px 5px 8px;
-  border-radius: $base_radius;
   color: $text-secondary;
   background-color: $popover;
   text-shadow: none;

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

@@ -183,6 +183,16 @@
     StLabel, StIcon { color: on(dark, secondary); }
 
     .panel-button {
+      @if $float == 'true' {
+        box-shadow: inset 0 0 0 1000px overlay(dark, normal);
+      }
+
+      &.clock-display {
+        .clock {
+          box-shadow: inset 0 0 0 1000px overlay(dark, normal);
+        }
+      }
+
       &:hover {
         color: on(dark);
         background-color: transparent;

src/sass/gnome-shell/extensions-46-0/_dash-to-dock.scss

@@ -0,0 +1,371 @@
+// Scrollview style
+.bottom #dashtodockDashScrollview,
+.top #dashtodockDashScrollview {
+  -st-hfade-offset: 24px;
+}
+
+.left #dashtodockDashScrollview,
+.right #dashtodockDashScrollview {
+  -st-vfade-offset: 24px;
+}
+
+#dashtodockContainer {
+  background: transparent;
+
+  .number-overlay {
+    min-width: 1.2em;
+    min-height: 1.2em;
+    color: white;
+    background-color: rgba(black, 0.75);
+    text-align: center;
+    padding: 0.4em 0.5em;
+  }
+
+  .notification-badge {
+    min-width: 16px;
+    min-height: 16px;
+    color: on($primary);
+    background-color: $primary;
+    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
+    border-radius: $circular-radius;
+    margin: 2px 3px 5px;
+    padding: 3px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  @each $_pos, $b_pos in (top, bottom),
+                         (bottom, top),
+                         (left, right),
+                         (right, left) {
+    &.#{$_pos} #dash .dash-background {
+      border-radius: $dash_border_radius !important;
+    }
+
+    &.#{$_pos}.shrink {
+      #dash .dash-background {
+        border-radius: $modal_radius + $base_margin !important;
+      }
+    }
+
+    &.#{$_pos}.straight-corner,
+    &.#{$_pos}.shrink.straight-corner,
+    &.#{$_pos}.extended,
+    &.#{$_pos}.shrink.extended {
+      #dash {
+        margin: 0 !important;
+        margin-top: 0 !important;
+        padding: 0 !important;
+
+        .dash-background {
+          margin: 0 !important;
+          margin-bottom: 0 !important;
+          border-radius: 0 !important;
+        }
+
+        .show-apps,
+        .overview-tile {
+          margin: 0 !important;
+        }
+      }
+    }
+  }
+
+  &.extended,
+  &.straight-corner {
+    .dash-background {
+      border-radius: 0 !important;
+    }
+  }
+
+  #dash,
+  &:overview #dash {
+    background: transparent;
+  }
+
+  &.left,
+  &.right {
+    #dash {
+      margin-top: 0 !important;
+      padding: $dash_padding !important;
+
+      #dashtodockDashContainer {
+        padding: $dash_padding - $dash_spacing 0 !important;
+      }
+    }
+
+    .show-apps,
+    .overview-tile {
+      padding: $dash_spacing $base_padding !important;
+    }
+
+    .dash-background {
+      margin-bottom: 0 !important;
+    }
+
+    &.shrink {
+      #dash {
+        #dashtodockDashContainer {
+          padding: $base_margin 0 !important;
+        }
+      }
+
+      .dash-background {
+        padding: $base_margin !important;
+      }
+
+      .show-apps,
+      .overview-tile {
+        margin: 0 !important;
+        padding: 0 !important;
+      }
+    }
+
+    &.extended,
+    &.straight-corner {
+      #dash {
+        #dashtodockDashContainer {
+          padding: 0 !important;
+
+          #dashtodockDashScrollview:first-child {
+            padding-top: 0 !important;
+          }
+
+          #dashtodockDashScrollview:last-child {
+            padding-bottom: 0 !important;
+          }
+
+          & > :first-child {
+            .show-apps {
+              padding-bottom: $base_padding !important;
+            }
+          }
+
+          & > :last-child {
+            .show-apps {
+              padding-bottom: $dash_padding + $base_padding * 2 !important;
+            }
+          }
+        }
+      }
+
+      &.shrink {
+        #dash {
+          #dashtodockDashContainer {
+            & > :last-child {
+              .show-apps {
+                padding-bottom: 0 !important;
+              }
+            }
+          }
+        }
+
+        .dash-background {
+          padding: 0 !important;
+        }
+  
+        .show-apps,
+        .overview-tile {
+          margin: 0 !important;
+          padding: 0 !important;
+        }
+      }
+
+      .overview-tile {
+        padding: $dash_spacing $dash_padding !important;
+      }
+
+      .show-apps {
+        padding: $dash_spacing $dash_padding $dash_padding * 2 !important;
+      }
+    }
+  }
+
+  &.top,
+  &.bottom {
+    .dash-background {
+      padding: $dash_padding ($dash_padding - $dash_spacing) !important;;
+    }
+
+    .show-apps,
+    .overview-tile {
+      margin: 0 $dash_spacing !important;
+      padding-bottom: $dash_edge_offset !important;
+
+      .overview-icon {
+        padding: $base_padding !important;
+        spacing: $base_padding !important;
+      }
+    }
+
+    &.shrink {
+      .dash-background {
+        padding: $base_margin $base_margin / 2 !important;
+      }
+
+      .show-apps,
+      .overview-tile {
+        margin: 0 !important;
+        padding: 0 $base_margin / 2 $dash_padding !important;
+      }
+    }
+
+    &.extended,
+    &.straight-corner {
+      #dash {
+        #dashtodockDashContainer {
+          padding: 0 !important;
+
+          #dashtodockDashScrollview:first-child {
+            padding-left: 0 !important;
+          }
+
+          #dashtodockDashScrollview:last-child {
+            padding-right: 0 !important;
+          }
+
+          & > :first-child {
+            .show-apps {
+              padding-left: 0 !important;
+            }
+          }
+
+          & > :last-child {
+            .show-apps {
+              padding-right: $dash_padding + $base_padding !important;
+            }
+          }
+        }
+      }
+
+      &.shrink {
+        .dash-background {
+          padding: 0 !important;
+        }
+  
+        .show-apps,
+        .overview-tile {
+          margin: 0 !important;
+          padding: 0 !important;
+        }
+
+        #dash {
+          #dashtodockDashContainer {
+            & > :last-child {
+              .show-apps {
+                padding-right: 0 !important;
+              }
+            }
+          }
+        }
+      }
+
+      .dash-separator {
+        margin: 0 ($dash_spacing + ($dash_padding / 2)) !important;
+      }
+
+      .show-apps,
+      .overview-tile {
+        padding: $dash_padding $dash_spacing !important;
+      }
+    }
+  }
+
+  #dash {
+    .dash-background {
+      background-color: $panel;
+    }
+
+    .app-grid-running-dot {
+      margin-bottom: 6px !important;
+      margin-top: 0 !important;
+    }
+
+    StWidget.focused .app-grid-running-dot {
+      background-color: $primary;
+    }
+  }
+
+  &.opaque #dash .dash-background { // solid-mode
+    background-color: $panel-solid;
+  }
+
+  &.transparent #dash .dash-background { // translucent-mode
+    background-color: $panel; // does not work
+  }
+
+  &:overview #dash { // overview-mode #1
+    background: none;
+
+    .dash-background {
+      background-color: on(dark, divider);
+    }
+
+    StWidget.focused .app-grid-running-dot {
+      background-color: $primary;
+    }
+  }
+
+  &.opaque:overview,
+  &.transparent:overview { // overview-mode #2
+    #dash {
+      background-color: transparent !important;
+      box-shadow: none !important;
+    }
+
+    .dash-background {
+      background-color: transparent !important;
+    }
+  }
+
+  &.opaque.extended:overview, // overview-mode #3
+  &.transparent.extended:overview {
+    #dash {
+      background: none;
+    }
+  }
+
+  &.running-dots,
+  &.dashtodock {
+    .dash-item-container > StButton {
+      transition-duration: 250ms;
+      background-size: contain;
+    }
+  }
+
+  &.shrink,
+  &.dashtodock {
+    .dash-item-container > StButton {
+      padding: 1px 2px;
+    }
+  }
+
+  &.extended,
+  &.extended:overview {
+    .overview-tile,
+    .show-apps {
+      .overview-icon {
+        border-radius: $base_radius;
+      }
+    }
+  }
+
+  .metro .overview-icon {
+    border-radius: 0;
+  }
+}
+
+.dashtodock-app-well-preview-menu-item {
+  padding: 1em 1em 0.5em 1em;
+}
+
+#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal {
+  width: 1px;
+  height: auto;
+  border-right-width: 1px;
+  margin: 32px 0;
+}
+
+.dash-label.bottom {
+  margin-bottom: $dash_padding !important;
+}

src/sass/gnome-shell/extensions-46-0/_misc.scss

@@ -0,0 +1,235 @@
+
+//  OpenWeather Extension
+.openweather {
+  &-button,
+  &-button-action,
+  &-menu-button-container,
+  &-button-box {
+    border: 1px solid transparent;
+  }
+
+  &-provider {
+    // generic text buttons are allocated with y-expand-ed
+    padding: 0 16px;
+    font-weight: 500;
+    border: 1px solid transparent;
+  }
+
+  &-current {
+    &-icon,
+    &-summary,
+    &-summarybox {
+      background: none;
+      color: $text;
+    }
+
+    &-databox-values {
+      background: none;
+      color: $text-disabled;
+    }
+
+    &-databox-captions {
+      background: none;
+      color: $text-disabled;
+    }
+  }
+
+  &-forecast {
+    &-icon,
+    &-summary {
+      background: none;
+      color: $text-secondary;
+    }
+
+    &-day,
+    &-temperature {
+      background: none;
+      color: $text-disabled;
+    }
+  }
+
+  &-sunrise-icon,
+  &-sunset-icon,
+  &-build-icon { color: $text-secondary; }
+}
+
+//
+// Cosmic desktop (Pop_OS)
+//
+
+.cosmic-dock {
+  #dock {
+    border-radius: $icon_radius !important;
+    border: none !important;
+    margin: 6px !important;
+    background-color: $dash_background_color !important;
+    box-shadow: inset 0 1px rgba(white, 0.08) !important;
+
+    .dash-background {
+      background-color: transparent !important;
+      margin-bottom: 0 !important;
+      padding: 0;
+      box-shadow: none !important;
+    }
+  }
+}
+
+.cosmic-application-dialog {
+  border-radius: $menu_radius;
+  box-shadow: 0 3px 6px rgba(black, 0.08);
+  background-color: $popover;
+  color: $text;
+
+  .overview-icon {
+    color: $text;
+  }
+}
+
+.cosmic-applications-separator {
+	background: $border;
+}
+
+.cosmic-folder-edit-button {
+	box-shadow: none;
+	border-radius: $base_radius;
+	border-width: 0;
+  color: $text;
+  background: $fill;
+
+  .cosmic-folder-edit-button:hover {
+    background: $divider;
+  }
+}
+
+.cosmic-applications-icon {
+	color: $text-secondary;
+}
+
+.cosmic-applications-folder-title {
+	color: $text-secondary;
+}
+
+.cosmic-applications-available {
+	color: $text;
+}
+
+// pop-shell
+.pop-shell-active-hint {
+  border-style: solid;
+  border-color: $warning;
+  border-radius: $base_radius;
+  box-shadow: none;
+}
+
+.pop-shell-overlay {
+  background-color: rgba($primary, 0.3);
+}
+
+.pop-shell-search-element:select{
+  background: $divider;
+  border-radius: $base_radius;
+  color: $text;
+}
+
+.pop-shell-tab {
+  border: 1px solid $border;
+  color: $text;
+}
+
+.pop-shell-tab-active {
+  background: $warning;
+}
+
+.pop-shell-tab-inactive {
+  background: rgba($warning, 0.35);
+}
+
+.pop-shell-tab-urgent {
+  background: $error;
+}
+
+//
+// Blur my shell
+//
+
+#panel.light-panel,
+#panel.dark-panel,
+#panel.transparent-panel {
+  .panel-button {
+    color: on(dark, secondary) !important;
+
+    &.clock-display {
+      .clock {
+        color: on(dark, secondary) !important;
+      }
+    }
+
+    &:hover {
+      color: on(dark, secondary) !important;
+      background-color: on(dark, divider) !important;
+
+      &.clock-display {
+        .clock {
+          background-color: on(dark, divider) !important;
+        }
+      }
+    }
+
+    &:active, &:checked, &:focus {
+      color: on(dark) !important;
+      background-color: on(dark, track) !important;
+
+      &.clock-display {
+        .clock {
+          background-color: on(dark, track) !important;
+        }
+      }
+    }
+
+    &:hover, &:active, &:overview, &:focus, &:checked {
+      &.clock-display {
+        background-color: transparent !important;
+
+        .clock {
+          color: on(dark) !important;
+        }
+      }
+    }
+  }
+}
+
+.overview-components-transparent,
+.overview-components-light,
+.overview-components-dark {
+  .search-entry {
+    caret-color: on(dark) !important;
+
+    .search-entry-icon {
+      color: on(dark, secondary) !important;
+    }
+
+    StLabel.hint-text {
+      color: on(dark, track) !important;
+    }
+  }
+
+  .search-section-content {
+    border-radius: $icon_radius;
+  }
+
+  .search-section-separator {
+    height: 0 !important;
+    background-color: transparent !important;
+  }
+}
+
+// Dash to panel
+.dashtopanelMainPanel {
+  .show-apps .overview-icon {
+    color: $panel-text !important;
+  }
+
+  &:overview, #panel, .dash-background {
+    background-color: transparent !important;
+  }
+}

src/sass/gnome-shell/widgets-46-0/_calendar.scss

@@ -26,6 +26,10 @@
   padding: $base_padding / 2;
 }
 
+.datemenu-popover {
+  border-radius: $base_radius + $base_padding * 2 !important;
+}
+
 // Calendar menu side column
 .datemenu-calendar-column {
   spacing: $base_spacing;

src/sass/gnome-shell/widgets-46-0/_dash.scss

@@ -94,9 +94,10 @@ $dash_spacing: $base_margin * 0.5;
   background-color: rgba(black, 0.75);
   border-radius: $circular_radius;
   padding: $base_padding $base_padding * 2;
+  margin: $base_margin * 2;
   box-shadow: none;
   border: none;
   text-align: center;
-  -y-offset: $base_margin * 3; // distance from the dash edge
+  -y-offset: $base_margin; // distance from the dash edge
   -x-offset: 8px;
 }

src/sass/gtk/_common-3.0.scss

@@ -283,69 +283,86 @@ spinner {
 /****************
  * Text Entries *
  ****************/
-%entry,
+
+%entry_basic {
+  min-height: $medium-size;
+  padding: 0 8px;
+  border-radius: $corner-radius;
+  caret-color: currentColor; // this shouldn't be needed.
+
+  @include entry(normal);
+
+  &:focus { @include entry(checked); }
+
+  &:drop(active) { @include entry(hover); }
+
+  &:disabled { @include entry(disabled); }
+}
+
 entry {
-  %entry_basic, & {
-    min-height: $medium-size;
-    padding: 0 8px;
-    border-radius: $corner-radius;
-    caret-color: currentColor; // this shouldn't be needed.
+  @extend %entry_basic;
 
-    @include entry(normal);
+  .background:not(.csd) & {
+    @include entry(solid);
 
-    &:focus { @include entry(checked); }
+    &:focus { @include entry(solid-checked); }
 
-    &:drop(active) { @include entry(hover); }
+    &:drop(active) { @include entry(solid-hover); }
 
-    &:disabled { @include entry(disabled); }
+    &:disabled { @include entry(solid-disabled); }
+  }
 
-    &.flat {
-      min-height: 0;
-      padding: 2px;
-      border-radius: 0;
-      background-color: transparent;
+  &.flat {
+    min-height: 0;
+    padding: 2px;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  image { // icons inside the entry
+    color: $text-secondary;
+
+    &:hover, &:active { color: $text; }
+
+    &:disabled { color: $text-disabled; }
+
+    &.left {
+      margin-left: ($medium-size - 16px) / 2 - 8px;
+      margin-right: 6px;
     }
 
-    image { // icons inside the entry
-      color: $text-secondary;
+    &.right {
+      margin-left: 6px;
+      margin-right: ($medium-size - 16px) / 2 - 8px;
+    }
+  }
 
-      &:hover, &:active { color: $text; }
+  undershoot {
+    &.left { @include undershoot(left); }
 
-      &:disabled { color: $text-disabled; }
+    &.right { @include undershoot(right); }
+  }
 
-      &.left {
-        margin-left: ($medium-size - 16px) / 2 - 8px;
-        margin-right: 6px;
-      }
+  selection { @extend %selected_items_primary; }
 
-      &.right {
-        margin-left: 6px;
-        margin-right: ($medium-size - 16px) / 2 - 8px;
+  // entry error and warning style
+  @each $e_type, $e_color in (error, $error),
+                             (warning, $warning) {
+    &.#{$e_type} {
+      @include entry(normal, $e_color);
+
+      &:focus { @include entry(checked, $e_color); }
+
+      &:disabled { @include entry(disabled, $e_color); }
+
+      image {
+        color: on($e_color, secondary);
+
+        &:hover, &:active { color: on($e_color); }
+
+        &:disabled { color: on($e_color, disabled); }
       }
     }
-
-    undershoot {
-      &.left { @include undershoot(left); }
-
-      &.right { @include undershoot(right); }
-    }
-
-    selection { @extend %selected_items_primary; }
-
-    // entry error and warning style
-    @each $e_type, $e_color in (error, $error),
-                               (warning, $warning) {
-      &.#{$e_type} {
-        @include entry(normal, $e_color);
-
-        &:focus { @include entry(checked, $e_color); }
-
-        &:disabled { @include entry(disabled, $e_color); }
-      }
-    }
-
-    // .osd & {
-    // }
   }
 
   progress {
@@ -717,25 +734,6 @@ button {
   &:dir(rtl) { background-position: left 3px; }
 }
 
-// menu buttons
-modelbutton.flat,
-.menuitem.button.flat {
-  min-height: $menuitem-size;
-  padding: 0 8px;
-  border-radius: $corner-radius;
-  color: $text;
-
-  @extend %button-flat-simple;
-
-  &:selected { @extend %selected_items; }
-}
-
-modelbutton.flat arrow {
-  &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
-
-  &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
-}
-
 button.color {
   min-height: $small-size;
   min-width: $small-size;
@@ -770,43 +768,44 @@ button.link {
  * GtkSpinButton *
  *****************/
 spinbutton {
-  &:not(.vertical) {
-    // in this horizontal configuration, the whole spinbutton
-    // behaves as the entry, so we extend the entry styling
-    // and nuke the style on the internal entry
-    @extend %entry;
+  // in this horizontal configuration, the whole spinbutton
+  // behaves as the entry, so we extend the entry styling
+  // and nuke the style on the internal entry
+  @extend %entry_basic;
+  padding: 0;
 
-    padding: 0;
+  > entry, .background:not(.csd) & > entry {
+    min-width: $large-size - 8px * 2;
+    // reset all the other props since the spinbutton node is styled here
+    margin: 0;
+    border-radius: 0;
+    border-image: none;
 
-    entry {
-      min-width: $large-size - 8px * 2;
-      // reset all the other props since the spinbutton node is styled here
-      margin: 0;
-      border-image: none;
-      border-radius: 0;
+    &, &:focus, &:disabled {
+      border: none;
       box-shadow: none;
       background-color: transparent;
     }
+  }
 
-    button {
-      @extend %button-flat-simple;
-      @extend %small-button;
+  > button {
+    @extend %button-flat-simple;
+    @extend %small-button;
 
-      // margin: $space-size;
-      border: solid $space-size transparent;
+    // margin: $space-size;
+    border: solid $space-size transparent;
 
-      // Remove unwanted focus indicator
-      &:focus:not(:hover):not(:active):not(:disabled) {
-        box-shadow: inset 0 0 0 9999px transparent;
-        color: $text-secondary;
-      }
-
-      &.up:dir(ltr),
-      &.down:dir(rtl) { margin-left: -$space-size / 2; }
-
-      &.up:dir(rtl),
-      &.down:dir(ltr) { margin-right: -$space-size / 2; }
+    // Remove unwanted focus indicator
+    &:focus:not(:hover):not(:active):not(:disabled) {
+      box-shadow: inset 0 0 0 9999px transparent;
+      color: $text-secondary;
     }
+
+    &.up:dir(ltr),
+    &.down:dir(rtl) { margin-left: -$space-size / 2; }
+
+    &.up:dir(rtl),
+    &.down:dir(ltr) { margin-right: -$space-size / 2; }
   }
 
   // OSD horizontal
@@ -820,40 +819,18 @@ spinbutton {
 
     // FIXME: this should not be set at all, but otherwise it gets the wrong
     // color
-    @extend %entry;
+    padding: $space-size / 2;
 
-    padding: 0;
-
-    &:disabled { color: $text-disabled; }
-
-    entry {
+    > entry {
       margin: 0;
-      border-image: none;
-      border-radius: 0;
-      box-shadow: none;
-      background-color: transparent;
-
-      min-height: $medium-size;
-      min-width: $large-size - $space-size;
       padding: 0;
+      min-height: $medium-size;
+      min-width: 0;
     }
 
-    button {
-      @extend %button-flat-simple;
-      @extend %small-button;
-      padding: 0;
-
-      border: solid $space-size transparent;
-
-      // Remove unwanted focus indicator
-      &:focus:not(:hover):not(:active) {
-        box-shadow: inset 0 0 0 9999px transparent;
-        color: $text-secondary;
-      }
-
-      &.up { margin: 0 $space-size/2; }
-
-      &.down { margin: 0 $space-size/2; }
+    > button {
+      &.up { margin: 0; }
+      &.down { margin: 0; }
     }
   }
 
@@ -1828,7 +1805,7 @@ popover.background {
     }
   }
 
-  > stack { margin: 0; } // remove extra padding from menu style popovers
+  > stack { margin: -4px; } // remove extra padding from menu style popovers
 
   > toolbar { margin: 0; }
 
@@ -1873,6 +1850,28 @@ popover.background {
     // &:checked { color: $primary; }
   }
 
+  // menu buttons
+  modelbutton.flat,
+  .menuitem.button.flat {
+    min-height: $menuitem-size;
+    padding: 0 8px;
+    border-radius: $corner-radius;
+    color: $text;
+    @extend %button-flat-simple;
+
+    &:selected { @extend %selected_items; }
+  }
+
+  modelbutton.flat + modelbutton.flat,
+  modelbutton.flat + box.vertical,
+  .menuitem.button.flat + .menuitem.button.flat { margin-top: 2px; }
+
+  modelbutton.flat arrow {
+    &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+
+    &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
+  }
+
   separator { margin: $space-size / 2 0; }
 
   list separator { margin: 0; }
@@ -3278,6 +3277,8 @@ stacksidebar.sidebar {
     padding: 0 $space-size / 2;
     border-radius: $corner-radius;
 
+    + row { margin-top: $space-size / 2; }
+
     &:selected {
       background-color: $primary;
       color: on($primary);
@@ -3288,8 +3289,6 @@ stacksidebar.sidebar {
       }
     }
 
-    + row { margin-top: $space-size / 2; }
-
     > label {
       padding-left: $space-size;
       padding-right: $space-size;
@@ -3332,6 +3331,8 @@ placessidebar.sidebar {
     padding: 0;
     border-radius: $corner-radius;
 
+    + row { margin-top: $space-size / 2; }
+
     // Using margins/padding directly in the SidebarRow
     // will make the animation of the new bookmark row jump
     > revealer { padding: 0 8px 0 16px; }

src/sass/gtk/_common-4.0.scss

@@ -1384,6 +1384,8 @@ button.combo:only-child {
 
   button { @extend %button-flat; }
 
+  .linked button { @extend %button-basic; }
+
   // on OSD
   .osd & { background-color: transparent; }
 
@@ -1543,27 +1545,37 @@ searchbar > revealer > box {
 
 headerbar {
   transition: background-color $duration $ease-out, color $duration $ease-out;
-  box-shadow: inset 0 -1px $border;
   background-color: $titlebar;
   color: $titlebar-text;
   min-height: $large-size;
   padding: 0;
   margin: 0;
 
+  @if $rimless == 'false' {
+    box-shadow: inset 0 -1px $border;
+  } @else {
+    border-radius: $window-radius $window-radius 0 0;
+    box-shadow: inset 0 -1px $border, inset 0 1px highlight($titlebar);
+  }
+
   &:disabled { color: $titlebar-text-disabled; }
 
   &:backdrop {
     background-color: $titlebar-backdrop;
     color: $titlebar-text-secondary;
-    box-shadow: inset 0 -1px $border;
 
     &:disabled { color: $titlebar-text-secondary-disabled; }
   }
 
   &.flat, &.flat:backdrop {
     background: none;
-    box-shadow: none;
     transition: none;
+
+    @if $rimless == 'false' {
+      box-shadow: none;
+    } @else {
+      box-shadow: inset 0 1px highlight($titlebar);
+    }
   }
 
   .title {
@@ -1735,22 +1747,28 @@ headerbar {
     min-height: $medium-size;
     padding: 0;
     margin: 0;
-    box-shadow: none;
     border: none;
     outline: none;
-    background-image: image($titlebar);
 
-    &:backdrop {
-      background-image: image($titlebar-backdrop);
+    @if $rimless == 'false' {
+      box-shadow: none;
+    } @else {
+      box-shadow: inset 0 1px highlight($titlebar);
     }
 
     windowcontrols {
-      button,
-      menubutton {
-        min-width: 16px;
-        min-height: 16px;
-        margin: 0;
-        padding: 0;
+      > button {
+        @if $window_button == 'mac' {
+          min-width: 16px;
+          min-height: 16px;
+          margin: 0 $space-size - 2px;
+          padding: 0;
+        } @else {
+          min-width: 22px;
+          min-height: 22px;
+          margin: 0 $space-size - 2px;
+          padding: 0;
+        }
       }
 
       menubutton button {
@@ -1762,10 +1780,20 @@ headerbar {
     }
   }
 
+  .maximized &,
+  .fullscreen &,
+  .tiled &,
+  .tiled-top &,
+  .tiled-right &,
+  .tiled-bottom &,
+  .tiled-left & {
+    box-shadow: inset 0 -1px $border;
+  }
+
   .solid-csd & {
     &:dir(rtl), &:dir(ltr) { // specificity bump
       border-radius: 0;
-      box-shadow: none; // just remove the highlight
+      box-shadow: inset 0 -1px $border; // just remove the highlight
     }
   }
 }
@@ -2950,11 +2978,6 @@ switch {
 
   &:disabled { opacity: 0.5; }
 
-  // hide on/off icons for >=3.24.5
-  image {
-    margin: -8px;
-  }
-
   > slider {
     transition: all $duration $ease-out;
     min-width: $small-size - 6px;
@@ -3227,7 +3250,7 @@ scale {
       border-radius: $circular-radius;
       color: $primary;
       background-color: $base;
-      box-shadow: inset 0 0 0 2px $primary;
+      box-shadow: inset 0 0 0 2px $primary, 0 0 0 8px transparent;
 
       &:hover {
         box-shadow: inset 0 0 0 2px $primary, 0 0 0 8px $divider;
@@ -3543,19 +3566,33 @@ frame {
   statusbar & > border { border: none; } // for backward compatibility
 }
 
-actionbar > revealer > box {
-  padding: $space-size;
-  border-spacing: 0;
-  box-shadow: inset 0 1px $border;
-  background-color: $base;
-  background-clip: border-box;
-  border: none;
+actionbar {
+  &.toolbar { // reset
+    background-color: transparent;
+    padding: 0;
+    border-spacing: 0;
+    border: none;
+    box-shadow: none;
 
-  button, entry,
-  menubutton, menubutton > button,
-  splitbutton, splitbutton > button,
-  spinbutton {
-    margin: 0;
+    > revealer > box {
+      background-color: $base-alt;
+    }
+  }
+
+  > revealer > box {
+    padding: $space-size;
+    border-spacing: 0;
+    box-shadow: inset 0 1px $border;
+    background-color: $base;
+    background-clip: border-box;
+    border: none;
+  
+    button, entry,
+    menubutton, menubutton > button,
+    splitbutton, splitbutton > button,
+    spinbutton {
+      margin: 0;
+    }
   }
 }
 
@@ -3731,7 +3768,6 @@ row {
     background-repeat: no-repeat;
     background-position: center;
     background-size: 1000% 1000%;
-    outline: none;
 
     &:focus {
       color: $text;
@@ -4973,15 +5009,16 @@ window {
 
   &.csd {
     border-radius: $window-radius;
-    outline-offset: -1px;
-    outline: 1px solid highlight($background);
     margin: 0;
     transition: none;
 
     @if $rimless == 'true' {
+      outline: 0 none transparent;
       box-shadow: $shadow-z16,
       0 0 36px transparent;
     } @else {
+      outline-offset: -1px;
+      outline: 1px solid highlight($background);
       box-shadow: $shadow-z16,
       0 0 36px transparent,
       0 0 0 1px $window-border;

src/sass/gtk/_drawing-3.0.scss

@@ -58,6 +58,34 @@
     color: $text-disabled;
   }
   
+  @if $t == solid {
+    transition: $transition, box-shadow $ripple-fade-out-duration $ease-out;
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: mix($text, $base, 5%);
+    color: $text;
+  }
+
+  @if $t == solid-hover {
+    background-color: mix($text, $base, 10%);
+    box-shadow: inset 0 0 0 2px $overlay-hover;
+  }
+
+  @if $t == solid-focus {
+    background-color: mix($text, $base, 8%);
+    box-shadow: inset 0 0 0 2px if($fc == $primary, $track, $fc);
+  }
+
+  @if $t == solid-checked {
+    background-color: mix($text, $base, 5%);
+    box-shadow: inset 0 0 0 2px if($fc == $primary, $primary, $fc);
+  }
+
+  @if $t == solid-disabled {
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: mix($text, $base, 3%);
+    color: $text-disabled;
+  }
+
   @if $t == raised-normal {
     transition: $transition, box-shadow $ripple-fade-out-duration $ease-out;
     border-image: none;

src/sass/gtk/apps/_budgie.scss

@@ -874,7 +874,6 @@ image.raven-mpris {
   flowbox {
     color: $text;
     padding: 0;
-    border-spacing: 0;
   }
 
   flowboxchild {

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

@@ -461,6 +461,8 @@ frame.gedit-map-frame > border {
 
   separator { @extend %hide_separators; }
 
+  > row + row { margin-top: $space-size / 2; }
+
   .csd & {
     border-bottom-left-radius: $window-radius;
   }
@@ -469,6 +471,8 @@ frame.gedit-map-frame > border {
 leaflet list.navigation-sidebar {
   background-color: $base-alt;
 
+  > row + row { margin-top: $space-size / 2; }
+
   window.background.csd:not(.maximized) & {
     border-bottom-left-radius: $window-radius;
   }
@@ -588,11 +592,13 @@ window.background.csd {
 
         list { // left-pane
           background-color: transparent;
-          padding: $space-size / 2;
+          padding: $space-size;
 
-          row.activatable {
+          > row.activatable {
             border-radius: $corner-radius;
 
+            + row { margin-top: $space-size / 2; }
+
             &:not(:hover):not(:active):not(:selected) {
               background-color: transparent;
             }
@@ -1761,6 +1767,18 @@ window#GearyMainWindow.background.csd {
   }
 }
 
+.geary-main-window {
+  @if $variant == 'light' and $topbar == 'dark' {
+    leaflet > separator {
+      background-repeat: no-repeat;
+      background-image: linear-gradient(to bottom, $titlebar 0,
+                                                   $titlebar $large-size,
+                                                   transparent $large-size,
+                                                   transparent 100%);
+    }
+  }
+}
+
 preferencesgroup, .geary-accounts-editor-pane {
   list {
     @extend %circular_list;

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

@@ -119,7 +119,7 @@ window.dialog {
 //
 
 .display-container {
-  &.card {
+  .small &.card {
     border-radius: 0;
     box-shadow: none;
     border-width: 0 0 1px 0;

src/sass/gtk/apps/_libadwaita.scss

@@ -380,9 +380,6 @@ toolbarview.undershoot-bottom scrolledwindow {
 // Sidebar
 .unfolded stacksidebar.sidebar { border: none; }
 
-$sidebar: if($topbar == 'dark' and $variant == 'light', $titlebar, $base-alt);
-$sidebar-backdrop: if($topbar == 'dark' and $variant == 'light', $titlebar-backdrop, $background);
-
 .sidebar-pane {
   background-color: $sidebar;
   color: on($sidebar);

src/sass/libadwaita/_apps.scss

@@ -0,0 +1,4 @@
+@import 'apps/nautilus';
+@import 'apps/editor';
+@import 'apps/builder';
+@import 'apps/other';

src/sass/libadwaita/_colors.scss

@@ -0,0 +1,133 @@
+$border_opacity: 0.12;
+$thin_border_opacity: 0.05;
+$focus_border_opacity: 0.45;
+
+// Colors from _drawing.scss
+
+$text_color: currentColor;
+$secondary_text_color: gtkalpha(currentColor, 0.75);
+$disabled_text_color: gtkalpha(currentColor, 0.45);
+$secondary_disabled_text_color: gtkalpha(currentColor, 0.35);
+
+$button_color: gtkalpha(currentColor, 0.05);
+$button_hover_color: gtkalpha(currentColor, 0.12);
+$button_active_color: gtkalpha(currentColor, 0.2);
+$button_checked_color: gtkalpha(currentColor, 0.1);
+$button_checked_hover_color: gtkalpha(currentColor, 0.15);
+$button_checked_active_color: gtkalpha(currentColor, 0.2);
+
+// Colors from _defaults.scss
+
+$accent_bg_color: gtkcolor(accent_bg_color);
+$accent_fg_color: gtkcolor(accent_fg_color);
+$accent_color: gtkcolor(accent_color);
+
+$destructive_bg_color: gtkcolor(destructive_bg_color);
+$destructive_fg_color: gtkcolor(destructive_fg_color);
+$destructive_color: gtkcolor(destructive_color);
+
+$success_bg_color: gtkcolor(success_bg_color);
+$success_fg_color: gtkcolor(success_fg_color);
+$success_color: gtkcolor(success_color);
+
+$warning_bg_color: gtkcolor(warning_bg_color);
+$warning_fg_color: gtkcolor(warning_fg_color);
+$warning_color: gtkcolor(warning_color);
+
+$error_bg_color: gtkcolor(error_bg_color);
+$error_fg_color: gtkcolor(error_fg_color);
+$error_color: gtkcolor(error_color);
+
+$window_bg_color: gtkcolor(window_bg_color);
+$window_fg_color: gtkcolor(window_fg_color);
+
+$view_bg_color: gtkcolor(view_bg_color);
+$view_fg_color: gtkcolor(view_fg_color);
+
+$headerbar_bg_color: gtkcolor(headerbar_bg_color);
+$headerbar_fg_color: gtkcolor(headerbar_fg_color);
+$headerbar_border_color: gtkalpha(gtkcolor(headerbar_border_color), $border_opacity);
+$headerbar_backdrop_color: gtkcolor(headerbar_backdrop_color);
+$headerbar_shade_color: gtkcolor(headerbar_shade_color);
+$headerbar_darker_shade_color: gtkcolor(headerbar_darker_shade_color);
+
+$sidebar_bg_color: gtkcolor(sidebar_bg_color);
+$sidebar_fg_color: gtkcolor(sidebar_fg_color);
+$sidebar_backdrop_color: gtkcolor(sidebar_backdrop_color);
+$sidebar_border_color: gtkalpha(currentColor, 0.1);
+$sidebar_shade_color: gtkcolor(sidebar_shade_color);
+
+$secondary_sidebar_bg_color: gtkcolor(secondary_sidebar_bg_color);
+$secondary_sidebar_fg_color: gtkcolor(secondary_sidebar_fg_color);
+$secondary_sidebar_backdrop_color: gtkcolor(secondary_sidebar_backdrop_color);
+$secondary_sidebar_border_color: gtkcolor(secondary_sidebar_border_color);
+$secondary_sidebar_shade_color: gtkcolor(secondary_sidebar_shade_color);
+
+$card_bg_color: gtkcolor(card_bg_color);
+$card_fg_color: gtkcolor(card_fg_color);
+$card_shade_color: gtkcolor(card_shade_color);
+
+$dialog_bg_color: gtkcolor(dialog_bg_color);
+$dialog_fg_color: gtkcolor(dialog_fg_color);
+
+$popover_bg_color: gtkcolor(popover_bg_color);
+$popover_fg_color: gtkcolor(popover_fg_color);
+$popover_shade_color: gtkcolor(popover_shade_color);
+
+$thumbnail_bg_color: gtkcolor(thumbnail_bg_color);
+$thumbnail_fg_color: gtkcolor(thumbnail_fg_color);
+
+$shade_color: gtkcolor(shade_color);
+$scrollbar_outline_color: gtkcolor(scrollbar_outline_color);
+
+// Other colors
+
+$border_color: gtkalpha(currentColor, $border_opacity);
+$thin_border_color: gtkalpha(currentColor, $thin_border_opacity);
+$link_color: $accent_color;
+$link_visited_color: gtkmix($accent_color, $view_fg_color, 80%);
+
+$hover_color: gtkalpha(currentColor, .07);
+$active_color: gtkalpha(currentColor, .16);
+$selected_color: gtkalpha(currentColor, .1);
+$selected_hover_color: gtkalpha(currentColor, .13);
+$selected_active_color: gtkalpha(currentColor, .19);
+
+$view_hover_color: gtkalpha(currentColor, .04);
+$view_active_color: gtkalpha(currentColor, .08);
+$view_selected_color: gtkalpha($accent_bg_color, .25);
+$view_selected_hover_color: gtkalpha($accent_bg_color, .32);
+$view_selected_active_color: gtkalpha($accent_bg_color, .39);
+
+$trough_color: gtkalpha(currentColor, .15);
+$trough_hover_color: gtkalpha(currentColor, .2);
+$trough_active_color: gtkalpha(currentColor, .25);
+
+$fill_color: $accent_bg_color;
+$fill_text_color: $accent_fg_color;
+
+$slider_color: $headerbar_bg_color;
+$slider_hover_color: $headerbar_backdrop_color;
+
+$osd_fg_color: transparentize(white, .1);
+$osd_text_color: white;
+$osd_bg_color: transparentize(black, 0.3);
+$osd_fill_bg_color: transparentize(white, .25);
+$osd_fill_fg_color: transparentize(black, .25);
+$osd_focus_color: transparentize(white, .5);
+$osd_link_color: gtkmix($accent_bg_color, $osd_text_color, 50%);
+$osd_link_visited_color: gtkmix($accent_bg_color, $osd_text_color, 75%);
+
+$tooltip_border_color: transparentize(white, 0.9);
+$shadow_color: transparentize(black, 0.9);
+
+$drop_target_color: $accent_bg_color;
+
+$window_outline_color: transparentize(white, .92);
+
+//special cased widget colors
+$focus_border_color:  gtkalpha($accent_color, $focus_border_opacity);
+$dim_label_opacity: 0.55;
+$dimmer_opacity: 0.3;
+$disabled_opacity: 0.45;
+$strong_disabled_opacity: 0.3;

src/sass/libadwaita/_common.scss

@@ -0,0 +1,94 @@
+
+.background {
+  color: $window_fg_color;
+  background-color: $window_bg_color;
+}
+
+dnd {
+  color: $window_fg_color;
+}
+
+.normal-icons {
+  -gtk-icon-size: 16px;
+}
+
+.large-icons {
+  -gtk-icon-size: 32px;
+}
+
+%osd,
+.osd {
+  color: $osd_fg_color;
+  border: none;
+  background-color: $osd_bg_color;
+  background-clip: padding-box;
+}
+
+/* Text selection */
+
+selection {
+  background-color: gtkalpha($view_fg_color, 0.1);
+  color: transparent;
+
+  &:focus-within {
+    background-color: gtkalpha($accent_bg_color, 0.3);
+  }
+}
+
+:not(window):drop(active):focus,
+:not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
+  border-color: $drop_target_color;
+  box-shadow: inset 0 0 0 1px $drop_target_color;
+  caret-color: $drop_target_color;
+}
+
+.navigation-sidebar,
+placessidebar,
+stackswitcher,
+expander-widget {
+  :not(window):drop(active):focus,
+  :not(window):drop(active) {
+    box-shadow: none;
+  }
+}
+
+/* Outline for low res icons */
+.lowres-icon {
+    -gtk-icon-shadow: 0 -1px rgba(0,0,0,0.05),
+      1px 0 rgba(0,0,0,0.1),
+      0 1px rgba(0,0,0,0.3),
+      -1px 0 rgba(0,0,0,0.1);
+}
+
+/* Drop shadow for large icons */
+.icon-dropshadow {
+  -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+      0 -1px rgba(0,0,0,0.05),
+      1px 0 rgba(0,0,0,0.1),
+      0 1px rgba(0,0,0,0.3),
+      -1px 0 rgba(0,0,0,0.1);
+}
+
+@keyframes needs_attention {
+  from { background-image: radial-gradient(farthest-side, $accent_color 0%, transparent 0%); }
+  to { background-image: radial-gradient(farthest-side, $accent_color 95%, transparent); }
+}
+
+%needs_attention {
+  // the dot is drawn by using two radial gradient, the first one is the actual dot, the other
+  // simulates the shadow labels and icons normally have in buttons.
+  animation: needs_attention 150ms ease-in;
+
+  background-image: radial-gradient(farthest-side, $accent_color 96%, transparent);
+  background-size: 6px 6px;
+  background-repeat: no-repeat;
+
+  background-position: right 3px;
+
+  &:dir(rtl) {
+    background-position: left 3px;
+  }
+}
+
+@import 'widgets';
+@import 'apps';

src/sass/libadwaita/_compat-colors.scss

@@ -0,0 +1,33 @@
+// 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}.
+
+/* Public colors from Default */
+
+@define-color theme_bg_color #{$window_bg_color};
+@define-color theme_fg_color #{$window_fg_color};
+
+@define-color theme_base_color #{$view_bg_color};
+@define-color theme_text_color #{$view_fg_color};
+
+@define-color theme_selected_bg_color #{$accent_bg_color};
+@define-color theme_selected_fg_color #{$accent_fg_color};
+
+@define-color insensitive_bg_color #{gtkmix($window_bg_color, $view_bg_color, 60%)};
+@define-color insensitive_fg_color #{gtkalpha($window_fg_color, .5)};
+
+@define-color insensitive_base_color #{$view_bg_color};
+
+@define-color borders #{$border_color};
+
+@define-color theme_unfocused_bg_color #{$window_bg_color};
+@define-color theme_unfocused_fg_color #{$window_fg_color};
+
+@define-color theme_unfocused_base_color #{$view_bg_color};
+@define-color theme_unfocused_text_color #{$view_fg_color};
+
+@define-color theme_unfocused_selected_bg_color #{$accent_bg_color};
+@define-color theme_unfocused_selected_fg_color #{$accent_fg_color};
+
+@define-color unfocused_insensitive_color #{gtkcolor(insensitive_bg_color)};
+
+@define-color unfocused_borders #{$border_color};

src/sass/libadwaita/_defaults.scss

@@ -0,0 +1,87 @@
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+
+// 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}.
+
+// These are the colors apps are can override. We define the defaults here and
+// define variables for them in _colors.scss
+
+@if $theme != 'default' or $colortype == 'fixed' {
+// The main accent color and the matching text value
+@define-color accent_bg_color #{$primary};
+@define-color accent_fg_color #{on($primary)};
+@define-color accent_color #{$primary};
+}
+
+// destructive-action buttons
+@define-color destructive_bg_color #{$destructive};
+@define-color destructive_fg_color #{on($destructive)};
+@define-color destructive_color #{$destructive};
+
+// Levelbars, entries, labels and infobars. These don't need text colors
+@define-color success_bg_color #{$success};
+@define-color success_fg_color #{on($success)};
+@define-color success_color #{$success};
+
+@define-color warning_bg_color #{$warning};
+@define-color warning_fg_color #{on($warning)};
+@define-color warning_color #{$warning};
+
+@define-color error_bg_color #{$error};
+@define-color error_fg_color #{on($error)};
+@define-color error_color #{$error};
+
+@if $colorscheme != 'default' or $blackness == 'true' or $colortype == 'fixed' {
+// Window
+@define-color window_bg_color #{$background};
+@define-color window_fg_color #{$text};
+
+// Views - e.g. text view or tree view
+@define-color view_bg_color #{$base};
+@define-color view_fg_color #{$text};
+
+// Header bar, search bar, tab bar
+@define-color headerbar_bg_color #{$titlebar-backdrop};
+@define-color headerbar_fg_color #{$titlebar-text};
+@define-color headerbar_border_color #{$titlebar-text};
+@define-color headerbar_backdrop_color #{$titlebar};
+@define-color headerbar_shade_color #{if($variant == 'light', transparentize(black, .88), transparentize(black, .64))};
+@define-color headerbar_darker_shade_color #{$window-border};
+
+// Split pane views
+@define-color sidebar_bg_color #{$sidebar};
+@define-color sidebar_fg_color #{on($sidebar)};
+@define-color sidebar_backdrop_color #{$sidebar-backdrop};
+@define-color sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+@define-color sidebar_border_color #{transparentize(on($sidebar), .92)};
+
+@define-color secondary_sidebar_bg_color #{$base};
+@define-color secondary_sidebar_fg_color #{$text};
+@define-color secondary_sidebar_backdrop_color #{$background};
+@define-color secondary_sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+@define-color secondary_sidebar_border_color #{$border};
+
+// Cards, boxed lists
+@define-color card_bg_color #{if($variant == 'light', $base, $fill)};
+@define-color card_fg_color #{$text};
+@define-color card_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .64))};
+
+// Dialogs
+@define-color dialog_bg_color #{$base-alt};
+@define-color dialog_fg_color #{$text};
+
+// Popovers
+@define-color popover_bg_color #{$popover};
+@define-color popover_fg_color #{$text};
+@define-color popover_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+
+// Thumbnails
+@define-color thumbnail_bg_color #{$surface};
+@define-color thumbnail_fg_color #{$text};
+
+// Miscellaneous
+@define-color shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+@define-color scrollbar_outline_color #{if($variant == 'light', white, transparentize(black, .5))};
+}

src/sass/libadwaita/_drawing.scss

@@ -0,0 +1,386 @@
+// Drawing mixins
+
+// generic drawing of more complex things
+
+//
+// Ripple keyframes
+//
+
+@keyframes ripple {
+  to {
+    background-size: 1000% 1000%;
+  }
+}
+
+@keyframes ripple-on-slider {
+  to {
+    background-size: auto, 1000% 1000%;
+  }
+}
+
+@keyframes ripple-on-headerbar {
+  from {
+    background-image: radial-gradient(circle, $accent_color 0%, transparent 0%);
+  }
+
+  to {
+    background-image: radial-gradient(circle, $accent_color 100%, transparent 100%);
+  }
+}
+
+//
+// Helper mixin for drawing visible focus rings
+//
+// If $target is specified, the focus ring is applied to the specified child element.
+// If $outer is true, the focus ring extends outward. Otherwise, it extends inward.
+// If $within is true, use focus-within instead of focus:focus-visible
+//
+@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: ':focus:focus-visible', $fc: $focus_border_color, $transition: null) {
+  & #{$target} {
+    outline: 0 solid transparent;
+    outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);
+    transition: $focus_transition, $transition;
+  }
+
+  &#{$focus-state} #{$target} {
+    outline-color: $fc;
+    outline-width: $width;
+    outline-offset: $offset;
+  }
+}
+
+@mixin entry($t, $fc: $accent_color) {
+//
+// entry
+//
+// $t: entry type
+// $fc: focus color
+//
+
+  @if $t == normal {
+    transition: $transition,
+                outline $ripple_fade_out_duration $ease_out,
+                box-shadow $ripple_fade_out_duration $ease_out;
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: if($fc == $accent_color, $button_color, rgba($fc, 0.1));
+    color: if($fc == $accent_color, $secondary_text_color, rgba($fc, 0.75));
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+  }
+
+  @if $t == hover {
+    transition: $transition,
+                box-shadow $ripple_fade_out_duration $ease_out;
+    background-color: $button_hover_color;
+    box-shadow: inset 0 0 0 2px $button_hover_color;
+    color: if($fc == $accent_color, $text_color, $fc);
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+  }
+
+  @if $t == focus {
+    background-color: $button_focus_color;
+    box-shadow: inset 0 0 0 2px transparent;
+    color: if($fc == $accent_color, $text_color, $fc);
+    outline: 2px solid if($fc == $accent_color, $track, $fc);
+    outline-offset: -2px;
+  }
+
+  @if $t == checked {
+    transition: $transition,
+                outline $ripple_fade_out_duration $ease_out,
+                box-shadow $ripple_fade_out_duration $ease_out;
+    background-color: if($fc == $accent_color, $button_color, rgba($fc, 0.1));
+    box-shadow: inset 0 0 0 2px transparent;
+    color: if($fc == $accent_color, $text_color, $fc);
+    outline: 2px solid if($fc == $accent_color, $accent_color, $fc);
+    outline-offset: -2px;
+  }
+
+  @if $t == disabled {
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: if($fc == $accent_color, $button_color, rgba($fc, 0.1));
+    color: if($fc == $accent_color, $disabled_text_color, rgba($fc, 0.35));
+    outline: none;
+  }
+
+  @if $t == raised-normal {
+    transition: $transition, box-shadow $ripple_fade_out_duration $ease_out;
+    border-image: none;
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: if($fc == $accent_color, $surface, $fc);
+    color: if($fc == $accent_color, $text, on($fc));
+  }
+
+  @if $t == raised-hover {
+    box-shadow: inset 0 0 0 2px $button_hover_color;
+  }
+
+  @if $t == raised-focus {
+    border-image: none;
+    box-shadow: inset 0 0 0 2px if($fc == $accent_color, $accent_color, $fc);
+  }
+
+  @if $t == raised-disabled {
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: $base-alt;
+    color: $disabled_text_color;
+  }
+}
+
+
+@mixin button($t) {
+//
+// button
+//
+// $t: button type
+//
+
+  @if $t == normal {
+    transition: $transition,
+                background-size $ripple_fade_out_duration $ease_out,
+                background-image $ripple-fade-out-opacity-duration $ease_out,
+                outline $ripple_fade_out_duration $ease_out;
+    background-color: $button_color;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+    color: $text_color;
+  }
+
+  @if $t == hover {
+    background-color: $button_hover_color;
+    color: $text_color;
+    outline: 0 solid transparent;
+  }
+
+  @if $t == focus {
+    outline: 2px solid gtkalpha($accent_color, 0.35);
+    outline-offset: 0;
+  }
+
+  @if $t == active {
+    transition: $transition,
+                background-size 0ms,
+                background-image 0ms,
+                border 0ms;
+    animation: ripple $ripple_fade_in_duration $ease_out forwards;
+    background-image: radial-gradient(circle, $button_hover_color 10%, transparent 0%);
+    background-size: 0% 0%;
+    background-color: $button_hover_color;
+    color: $text_color;
+    outline: 0 solid transparent;
+  }
+
+  @if $t == disabled {
+    background-color: $button_color;
+    color: $disabled_text_color;
+    outline-color: transparent;
+  }
+
+  @if $t == checked {
+    background-color: $accent_color;
+    color: $accent_fg_color;
+  }
+
+  @if $t == checked-hover {
+    outline-color: transparent;
+    background-color: gtkmix($accent_fg_color, $accent_color, 5%);
+    color: $accent_fg_color;
+  }
+
+  @if $t == checked-active {
+    animation: none;
+    outline-color: transparent;
+    background-color: gtkmix($accent_fg_color, $accent_color, 12%);
+    background-image: none;
+    color: $accent_fg_color;
+  }
+
+  @if $t == checked-disabled {
+    outline-color: transparent;
+    background-color: gtkalpha($accent_color, 0.35);
+    color: gtkalpha($accent_fg_color, 0.35);
+  }
+
+  @if $t == flat-normal {
+    transition: $transition,
+                border-image $ripple_fade_in_duration $ease_out,
+                background-size $ripple_fade_out_duration $ease_out,
+                background-image $ripple_fade_out_opacity_duration $ease_out,
+                outline $ripple_fade_out_duration $ease_out;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
+    background-color: transparent;
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+    color: $secondary_text_color;
+  }
+
+  @if $t == flat-hover {
+    background-color: $button_hover_color;
+    color: $text_color;
+  }
+
+  @if $t == flat-focus {
+    color: $text_color;
+    outline: 2px solid $button_color;
+    outline-offset: -2px;
+  }
+
+  @if $t == flat-active {
+    transition: $transition,
+                border-image $ripple_fade_in_duration $ease_out,
+                background-size 0ms,
+                background-image 0ms;
+    animation: ripple $ripple_fade_in_duration $ease_out forwards;
+    background-image: radial-gradient(circle, $button_hover_color 10%, transparent 0%);
+    background-size: 0% 0%;
+    background-color: $button_hover_color;
+    color: $text_color;
+  }
+
+  @if $t == flat-disabled {
+    color: $secondary_disabled_text_color;
+    background-color: transparent;
+  }
+
+  @if $t == flat-checked {
+    background-color: $button_checked_color;
+    color: $text_color;
+  }
+
+  @if $t == flat-checked-hover {
+    background-color: $button_checked_hover_color;
+    color: $text_color;
+  }
+
+  @if $t == flat-checked-active {
+    animation: none;
+    outline-color: transparent;
+    background-color: $button_checked_active_color;
+    background-image: none;
+    color: $text_color;
+  }
+
+  @if $t == flat-checked-disabled {
+    background-color: $button_checked_color;
+    color: $disabled_text_color;
+  }
+}
+
+@mixin undershoot($p, $c: $shade_color, $neighbor: false, $style: default) {
+//
+// undershoot
+//
+// $p: position
+// $c: shade color
+// $neighbor: use ~ instead of >
+//
+// possible $p values:
+// top, bottom, right, left
+//
+
+  $_border_pos: '';
+  $_direction: '';
+  $_selector: if($neighbor, '~', '>');
+
+  @if $p==top {
+    $_direction: bottom;
+    $_border_pos: 0 1px;
+  } @else if $p==bottom {
+    $_direction: top;
+    $_border_pos: 0 -1px;
+  } @else if $p==left {
+    $_direction: right;
+    $_border_pos: 1px 0;
+  } @else if $p==right {
+    $_direction: left;
+    $_border_pos: -1px 0;
+  } @else {
+    @error "Unknown position #{$p}"
+  }
+
+  #{$_selector} undershoot.#{$p} {
+    @if $style==default {
+      box-shadow: none;
+    } @else if $style==frame {
+      box-shadow: inset $_border_pos $border_color;
+    }
+
+    background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent 6px);
+  }
+}
+
+@mixin overshoot($p) {
+//
+// overshoot
+//
+// $p: position
+//
+// possible $p values:
+// top, bottom, right, left
+//
+
+  $_small_gradient_length: 3%;
+  $_big_gradient_length: 50%;
+
+  $_small_gradient_size: 100% $_small_gradient_length;
+  $_big_gradient_size: 100% $_big_gradient_length;
+
+  @if $p==right or $p==left {
+    $_small_gradient_size: $_small_gradient_length 100%;
+    $_big_gradient_size: $_big_gradient_length 100%;
+  }
+
+  $_small_gradient: radial-gradient(farthest-side at $p,
+                                    gtkalpha(currentColor, 0.12) 85%,
+                                    gtkalpha(currentColor, 0));
+
+  $_big_gradient: radial-gradient(farthest-side at $p,
+                                  gtkalpha(currentColor, 0.05),
+                                  gtkalpha(currentColor, 0));
+
+  background-image: $_small_gradient, $_big_gradient;
+  background-size: $_small_gradient_size, $_big_gradient_size;
+
+  background-repeat: no-repeat;
+  background-position: $p;
+
+  background-color: transparent; // reset some properties to be sure to not inherit them somehow
+  border: none;                  //
+  box-shadow: none;              //
+}
+
+@mixin background-shadow($direction, $color) {
+  background-image:
+    linear-gradient($direction,
+                    gtkalpha($color, 0.7),
+                    gtkalpha($color, 0.14) 40px,
+                    gtkalpha($color, 0) 56px),
+    linear-gradient($direction,
+                    gtkalpha($color, 0.4),
+                    gtkalpha($color, 0.14) 7px,
+                    gtkalpha($color, 0) 24px);
+}
+
+@mixin transition-shadows($color) {
+  > dimming {
+    background: $color;
+  }
+
+  > shadow {
+    min-width: 56px;
+    min-height: 56px;
+
+    &.left  { @include background-shadow(to right,  $color); }
+    &.right { @include background-shadow(to left,   $color); }
+    &.up    { @include background-shadow(to bottom, $color); }
+    &.down  { @include background-shadow(to top,    $color); }
+  }
+}

src/sass/libadwaita/_functions.scss

@@ -0,0 +1,16 @@
+@function gtkalpha($c,$a) {
+  @return unquote("alpha(#{$c},#{$a})");
+}
+
+@function gtkmix($c1,$c2,$r) {
+  $ratio: 1 -  $r / 100%; // match SCSS mix()
+  @return unquote("mix(#{$c1},#{$c2},#{$ratio})");
+}
+
+@function gtkshade($c,$s) {
+  @return unquote("shade(#{$c},#{$s})");
+}
+
+@function gtkcolor($c) {
+  @return unquote("@#{$c}");
+}

src/sass/libadwaita/_palette.scss

@@ -0,0 +1,94 @@
+$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};

src/sass/libadwaita/_variables.scss

@@ -0,0 +1,96 @@
+@import '../tweaks-temp';
+
+$asset_suffix: if($variant == 'dark', '-dark', '');
+
+//
+// Sizes
+//
+
+$base_padding: if($compact == 'false', 6px, 4px);
+$menu_margin: $base_padding; //margin around menuitems & sidebar items
+$menu_padding: $base_padding * 2; //inner menuitem padding
+
+$small_size: if($compact == 'false', 24px, 22px);
+$medium_size: if($compact == 'false', 36px, 32px);
+$large_size: if($compact == 'false', 48px, 40px);
+
+$menuitem_size: if($compact == 'false', 28px, 24px);
+
+//
+// Radiuses
+//
+
+$button_radius: 6px;
+$card_radius: $button_radius + 6px;
+$menuitem_radius: $button_radius;
+$window_radius: $button_radius + $base_padding;
+$popover_radius: $menuitem_radius + $base_padding;
+$circular_radius: 9999px;
+
+//
+// Durations
+//
+
+$duration: 75ms;
+$ripple_fade_in_duration: 225ms;
+$ripple_fade_out_duration: 300ms;
+$ripple_fade_out_opacity_duration: 1200ms;
+
+//
+// Timing functions
+//
+
+$ease: cubic-bezier(0.4, 0.0, 0.2, 1);
+$ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
+$ease_in: cubic-bezier(0.4, 0.0, 1, 1);
+$ease_in_out: cubic-bezier(0.4, 0.0, 0.6, 1);
+$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+//
+// Transition shorthands
+//
+
+$transition: all $duration $ease_out;
+$transition_shadow: box-shadow 200ms ease-out;
+$backdrop_transition: 200ms ease-out;
+$focus_transition: outline-color 200ms $ease_out_quad,
+                   outline-width 200ms $ease_out_quad,
+                   outline-offset 200ms $ease_out_quad;
+$button_transition: background 200ms $ease_out_quad,
+                    box-shadow 200ms $ease_out_quad;
+//
+// Shadows
+//
+
+$shadow-z1:
+  0 2px 3px -2px rgba(black, 0.3),
+  0 1px 2px -1px rgba(black, 0.24),
+  0 1px 2px -1px rgba(black, 0.17);
+$shadow-z2:
+  0 4px 3px -3px rgba(black, 0.2),
+  0 2px 2px -1px rgba(black, 0.24),
+  0 1px 3px 0 rgba(black, 0.12);
+$shadow-z3:
+  0 3px 3px -2px rgba(black, 0.05),
+  0 2px 3px -1px rgba(black, 0.06),
+  0 1px 4px 0 rgba(black, 0.05);
+$shadow-z4:
+  0 1px 2px 0 rgba(black, 0.15),
+  0 3px 3px 0 rgba(black, 0.18),
+  0 3px 6px 0 rgba(black, 0.12);
+$shadow-z5:
+  0 2px 3px -1px rgba(black, 0.05),
+  0 4px 6px 0 rgba(black, 0.06),
+  0 1px 10px 0 rgba(black, 0.05);
+$shadow-z6:
+  0 2px 3px -1px rgba(black, 0.1),
+  0 4px 6px 0 rgba(black, 0.12),
+  0 1px 10px 0 rgba(black, 0.1);
+$shadow-z12:
+  0 7px 5px -4px rgba(black, 0.2),
+  0 12px 10px 2px rgba(black, 0.14),
+  0 5px 13px 4px rgba(black, 0.12);
+$shadow-z16:
+  0 1px 3px 0 rgba(black, 0.2),
+  0 15px 16px 2px rgba(black, 0.14),
+  0 6px 18px 5px rgba(black, 0.12);

src/sass/libadwaita/_widgets.scss

@@ -0,0 +1,42 @@
+@import 'widgets/avatar';
+@import 'widgets/bottom-sheet';
+@import 'widgets/buttons';
+@import 'widgets/calendar';
+@import 'widgets/checks';
+@import 'widgets/color-chooser';
+@import 'widgets/column-view';
+@import 'widgets/dialogs';
+@import 'widgets/deprecated';
+@import 'widgets/dropdowns';
+@import 'widgets/emoji-chooser';
+@import 'widgets/entries';
+@import 'widgets/expanders';
+@import 'widgets/file-chooser';
+@import 'widgets/header-bar';
+@import 'widgets/labels';
+@import 'widgets/level-bar';
+@import 'widgets/linked';
+@import 'widgets/links';
+@import 'widgets/lists';
+@import 'widgets/menus';
+@import 'widgets/message-dialog';
+@import 'widgets/misc';
+@import 'widgets/notebook';
+@import 'widgets/paned';
+@import 'widgets/popovers';
+@import 'widgets/preferences';
+@import 'widgets/progress-bar';
+@import 'widgets/scale';
+@import 'widgets/scrolling';
+@import 'widgets/shortcuts-window';
+@import 'widgets/sidebars';
+@import 'widgets/spinner';
+@import 'widgets/spin-button';
+@import 'widgets/switch';
+@import 'widgets/tab-view';
+@import 'widgets/text-selection';
+@import 'widgets/toolbars';
+@import 'widgets/tooltip';
+@import 'widgets/views';
+@import 'widgets/view-switcher';
+@import 'widgets/window';

src/sass/libadwaita/apps/_builder.scss

@@ -0,0 +1,119 @@
+//
+// Builder
+//
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+popover.background.pages-popover {
+  listview > row {
+    padding: $base_padding;
+
+    button {
+      margin: 0;
+    }
+
+    check {
+      margin: 4px 2px;
+      -gtk-icon-size: 12px;
+    }
+  }
+}
+
+panelresizer .top-bar {
+  box-shadow: inset 0 -1px $border_color;
+}
+
+.frameheader.header {
+  min-height: $large_size;
+  padding: 0;
+  border: none;
+  border-bottom: 1px solid $border_color;
+  background-color: $headerbar_backdrop_color;
+
+  &:backdrop {
+    background-color: $headerbar_bg_color;
+  }
+
+  tabbar.inline {
+    tabbox > tabboxchild {
+      margin: 0;
+    }
+  }
+}
+
+panelframeswitcher {
+  &.frameheader.header { padding: 0 $base_padding; }
+
+  > button.toggle.image-button {
+    border: none;
+    margin: $base_padding 0;
+  }
+}
+
+panelstatusbar {
+  box-shadow: inset 0 1px $border_color;
+
+  > menubutton > button,
+  > paneltogglebutton button {
+    border-radius: 0;
+    @extend %button_basic_flat;
+  }
+}
+
+panelwidget entry.statusbar {
+  background-color: $window_bg_color;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  border-top: 1px solid $border_color;
+
+  &:focus-within {
+    outline: none;
+  }
+}
+
+.IdeTweaksWindow,
+.org-gnome-Builder {
+  .boxed-list {
+    box-shadow: inset 0 0 0 1px gtkalpha(currentColor, 0.08);
+  }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $base_padding * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $button_radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $base_padding / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: gtkalpha(currentColor, 0.05);
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: gtkalpha(currentColor, 0.15);
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $accent_color;
+    }
+  }
+}

src/sass/libadwaita/apps/_editor.scss

@@ -0,0 +1,11 @@
+//
+// Text Editor
+//
+
+window.org-gnome-TextEditor {
+  popover.open-popover {
+    > contents {
+      padding: 0;
+    }
+  }
+}

src/sass/libadwaita/apps/_nautilus.scss

@@ -0,0 +1,46 @@
+//
+// Nautilus
+//
+.nautilus-window {
+  .floating-bar {
+    min-height: 32px;
+    padding: 0;
+    margin: $base_padding;
+    border-style: none;
+    border-radius: $button_radius;
+    background-color: $accent_color;
+    color: $accent_fg_color;
+    box-shadow: $shadow-z3;
+
+    button {
+      margin: (32px - $small_size) / 2;
+      color: $accent_fg_color;
+
+      @extend %small_button;
+    }
+  }
+}
+
+#NautilusQueryEditor { // search entry
+  > menubutton {
+    margin: $base_padding 0;
+
+    > button.image-button {
+      min-width: 24px;
+      min-height: 24px;
+      padding: $medium_size / 2 - $base_padding - 12px;
+    }
+  }
+}
+
+#NautilusPathBar {
+  background-color: gtkalpha(currentColor, 0.05);
+  border-radius: $button_radius;
+  padding: 0;
+}
+
+#NautilusPathButton {
+  margin: 0;
+  border-radius: $button_radius;
+  @extend %button_basic_flat;
+}

src/sass/libadwaita/apps/_other.scss

@@ -0,0 +1,148 @@
+//
+// Amberol
+//
+
+playlistview {
+  scrollbar {
+    &.overlay-indicator {
+      &.dragging,
+      &.hovering { background-color: transparent; }
+    }
+  }
+
+  queuerow {
+    picture.cover,
+    image.card { border: none; }
+  }
+}
+
+//
+// Theme Selectors
+//
+
+themeselector, // Gnome text editor
+panelthemeselector { // Gnome builder
+  margin: $base_padding * 1.5;
+
+  checkbutton {
+    padding: 0;
+    min-height: 44px;
+    min-width: 44px;
+    padding: 1px;
+    background-clip: content-box;
+    border-radius: $circular_radius;
+    box-shadow: inset 0 0 0 1px $border_color;
+
+    &.follow:checked,
+    &.light:checked,
+    &.dark:checked {
+      box-shadow: inset 0 0 0 2px $accent_bg_color;
+    }
+
+    &.follow {
+      background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%);
+    }
+
+    &.light {
+      background-color: #ffffff;
+    }
+
+    &.dark {
+      background-color: #202020;
+    }
+
+    &.theme-selector radio {
+      -gtk-icon-source: none;
+      border: none;
+      box-shadow: none;
+      min-height: 20px;
+      min-width: 20px;
+      padding: 0;
+
+      &, &:hover, &:active, &:checked {
+        background-color: transparent;
+        background-image: none;
+      }
+
+      &:checked {
+        -gtk-icon-size: 20px;
+        -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg")));
+
+        &, &:hover, &:active {
+          color: $accent_fg_color;
+          background-color: $accent_bg_color;
+          box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
+        }
+      }
+    }
+  }
+}
+
+popover.menu themeswitcher { // Gnome console
+  padding: $base_padding;
+
+  .check {
+    min-height: 20px;
+    min-width: 20px;
+    background: none;
+    padding: 0;
+    margin: 0;
+    border-radius: $circular_radius;
+    color: $accent_fg_color;
+    background-color: $accent_bg_color;
+
+    &, &:hover, &:active {
+      box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
+    }
+  }
+
+  checkbutton {
+    padding: 0;
+    min-height: 44px;
+    min-width: 44px;
+    padding: 1px;
+    border: none;
+    background-clip: content-box;
+    border-radius: $circular_radius;
+    box-shadow: inset 0 0 0 1px $border_color;
+
+    &:checked {
+      box-shadow: inset 0 0 0 2px $accent_color;
+    }
+
+    radio {
+      padding: 0;
+      border: none;
+
+      &,
+      &:hover,
+      &:active,
+      &:checked,
+      &:indeterminate {
+        background-color: transparent;
+        background-image: none;
+        box-shadow: none;
+        color: transparent;
+      }
+
+      &:checked, &:indeterminate {
+        -gtk-icon-source: none;
+        -gtk-icon-size: 0;
+      }
+    }
+
+    &.system {
+      background: linear-gradient(-45deg, #1e1e1e 50%, white 50%);
+    }
+
+    &.light {
+      color: gtkalpha(black, .8);
+      background-color: white;
+    }
+
+    &.dark {
+      color: white;
+      background-color: #1e1e1e;
+    }
+  }
+}

src/sass/libadwaita/base.scss

@@ -0,0 +1,10 @@
+$contrast: 'normal';
+$variant: 'light';
+
+@import 'palette';
+@import 'functions';
+@import 'variables';
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'compat-colors';

src/sass/libadwaita/widgets/_avatar.scss

@@ -0,0 +1,38 @@
+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-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
+      color: nth($avatarcolor, 1);
+    }
+  }
+
+  &.contrasted { color: white; }
+
+  &.image { background: none; }
+}

src/sass/libadwaita/widgets/_bottom-sheet.scss

@@ -0,0 +1,45 @@
+
+bottom-sheet {
+  > dimming {
+    background-color: gtkalpha($shade_color, 2);
+  }
+
+  > sheet {
+    border-top-left-radius: $window_radius;
+    border-top-right-radius: $window_radius;
+    box-shadow: 0 2px 8px 2px transparentize(black, 0.93),
+                0 3px 20px 10px transparentize(black, 0.95),
+                0 6px 32px 16px transparentize(black, 0.98),
+                0 0 0 1px $shade_color;
+
+    > drag-handle {
+      background-color: gtkalpha(currentColor, .25);
+      min-width: 60px;
+      min-height: 4px;
+      margin: $base_padding;
+      border-radius: $circular_radius;
+    }
+
+    > outline {
+      border-top-left-radius: $window_radius;
+      border-top-right-radius: $window_radius;
+      box-shadow: inset 1px 0 $window_outline_color,
+                  inset -1px 0 $window_outline_color,
+                  inset 0 1px $window_outline_color;
+
+      &.flush-left {
+        box-shadow: inset -1px 0 $window_outline_color,
+                    inset 0 1px $window_outline_color;
+      }
+
+      &.flush-right {
+        box-shadow: inset 1px 0 $window_outline_color,
+                    inset 0 1px $window_outline_color;
+      }
+
+      &.flush-left.flush-right {
+        box-shadow: inset 0 1px $window_outline_color;
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_buttons.scss

@@ -0,0 +1,625 @@
+
+%button_basic {
+  @include button(normal);
+
+  &:focus { @include button(focus); }
+
+  &:hover { @include button(hover); -gtk-icon-filter: brightness(1.2); }
+
+  &.keyboard-activating, &:active { @include button(active); }
+
+  &:disabled { @include button(disabled); }
+
+  &:checked {
+    @include button(checked);
+
+    &:hover { @include button(checked-hover); }
+
+    &:active { @include button(checked-active); }
+
+    &:disabled { @include button(checked-disabled); }
+  }
+}
+
+%button_basic_flat {
+  @include button(flat-normal);
+
+  &:focus:not(:hover):not(:active) { @include button(flat-focus); }
+
+  &:hover { @include button(flat-hover); }
+
+  &.keyboard-activating, &:active { @include button(flat-active); }
+
+  &:disabled { @include button(flat-disabled); }
+
+  &:checked {
+    @include button(flat-checked);
+
+    &:hover { @include button(flat-checked-hover); }
+
+    &:active { @include button(flat-checked-active); }
+
+    &:disabled { @include button(flat-checked-disabled); }
+  }
+}
+
+%button_basic_raised {
+  background-color: $button_color;
+
+  &:hover {
+    background-color: $button_hover_color;
+  }
+
+  &.keyboard-activating,
+  &:active {
+    background-color: $button_active_color;
+  }
+
+  &:checked {
+    background-color: $button_checked_color;
+
+    &:hover {
+      background-color: $button_checked_hover_color;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $button_checked_active_color;
+    }
+  }
+}
+
+@at-root %opaque_button {
+  box-shadow: none;
+
+  @include focus-ring($outer: true, $offset: 1px, $transition: $button_transition);
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
+  &: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));
+    }
+  }
+}
+
+%small_button {
+  min-height: $small_size;
+  min-width: $small_size;
+  padding: 0;
+  border-radius: $circular_radius;
+}
+
+$opaque_button_default_bg: gtkmix($window_bg_color, $window_fg_color, 85%);
+
+%button,
+button {
+  min-height: 24px;
+  min-width: 16px;
+  padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
+  border-radius: $button_radius;
+  font-weight: bold;
+  @extend %button_basic;
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+
+    label {
+      filter: none;
+    }
+  }
+
+  &.image-button {
+    min-width: 24px;
+    padding-left: ($medium_size - 24px) / 2;
+    padding-right: ($medium_size - 24px) / 2;
+
+    &.close-button {
+      padding: 0;
+      border-radius: $circular_radius;
+    }
+  }
+
+  &.text-button {
+    padding-left: $base_padding * 2 + 4px;
+    padding-right: $base_padding * 2 + 4px;
+  }
+
+  &.text-button.image-button,
+  &.image-text-button {
+    padding-left: $base_padding * 1.5;
+    padding-right: $base_padding * 1.5;
+
+    > box,
+    > box > box {
+      border-spacing: 4px;
+
+      > label {
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+    }
+  }
+
+  &.arrow-button {
+    padding-left: $base_padding * 1.5;
+    padding-right: $base_padding * 1.5;
+
+    > box { border-spacing: 4px; }
+
+    &.text-button {
+      > box { border-spacing: 4px; }
+    }
+  }
+
+  @at-root %button_basic_drop_active,
+  &:drop(active) {
+    color: $drop_target_color;
+    box-shadow: inset 0 0 0 2px $drop_target_color;
+  }
+
+  // big standalone buttons like in Documents pager
+  @at-root %osd_button,
+  &.osd {
+    min-width: 32px;
+    min-height: 32px;
+    @include focus-ring($outer: true, $offset: 1px, $transition: $button_transition);
+
+    color: $osd_fg_color;
+    background-color: transparentize(black, .35);
+
+    &:hover {
+      color: white;
+      background-color: gtkalpha(gtkmix(black, currentColor, 85%), .65);
+    }
+
+    &.keyboard-activating,
+    &:active {
+      color: white;
+      background-color: gtkalpha(gtkmix(black, currentColor, 75%), .65);
+    }
+
+    &:checked {
+      background-color: gtkalpha(gtkmix(black, currentColor, 80%), .65);
+
+      &:hover {
+        background-color: gtkalpha(gtkmix(black, currentColor, 75%), .65);
+      }
+
+      &.keyboard-activating,
+      &:active {
+        background-color: gtkalpha(gtkmix(black, currentColor, 65%), .65);
+      }
+    }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
+    }
+
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+  }
+
+  &.opaque {
+    @extend %opaque_button;
+
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
+  }
+
+  &.destructive-action {
+    @extend %opaque_button;
+
+    color: $destructive_fg_color;
+
+    &, &:checked {
+      background-color: $destructive_bg_color;
+    }
+  }
+
+  &.suggested-action {
+    @extend %opaque_button;
+
+    color: $accent_fg_color;
+
+    &, &:checked {
+      background-color: $accent_bg_color;
+    }
+  }
+
+  &.flat {
+    @extend %button_basic_flat;
+
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
+    }
+  }
+
+  stackswitcher > & {
+    // to position the needs attention dot, padding is added to the button
+    // child, a label needs just lateral padding while an icon needs vertical
+    // padding added too.
+
+    > label {
+      padding: 0 6px;
+      margin: 0 -6px;
+    }
+
+    > image {
+      padding: 3px 6px;
+      margin: -3px -6px;
+    }
+
+    &.text-button { min-width: 100px; }
+
+    &.needs-attention {
+      > label,
+      > image { @extend %needs_attention; }
+    }
+  }
+
+  // hide separators
+  &.font {
+    separator { background-color: transparent; }
+    > box { border-spacing: 6px; }
+    > box > box > label { font-weight: bold; }
+  }
+
+  @at-root %circular_button,
+  &.circular { // force circular button shape
+    min-width: 34px;
+    min-height: 34px;
+    padding: 0;
+    border-radius: $circular_radius;
+
+    label { padding: 0; }
+  }
+
+  @at-root %pill_button,
+  &.pill {
+    padding: 10px 32px;
+    border-radius: $circular_radius;
+  }
+
+  &.card {
+    background-color: $card_bg_color;
+    background-clip: padding-box;
+    font-weight: inherit;
+    padding: 0;
+
+    @include focus-ring($offset: -1px, $transition: $button_transition);
+
+    &:hover {
+      background-image: image($view_hover_color);
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image($view_active_color);
+    }
+
+    &:checked {
+      background-color: $card_bg_color;
+      background-image: image($view_selected_color);
+
+      &:hover { background-image: image($view_selected_hover_color); }
+
+      &.keyboard-activating,
+      &:active { background-image: image($view_selected_active_color); }
+
+      &.has-open-popup { background-image: image($view_selected_hover_color); }
+
+      .osd & {
+        background-color: gtkalpha(currentColor, .1);
+      }
+    }
+
+    &:drop(active) {
+      color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+  }
+}
+
+%undecorated_button {
+  background-color: transparent;
+}
+
+button.color {
+  padding: 5px;
+
+  > colorswatch:only-child {
+    border-radius: 2.5px;
+
+    > overlay {
+      border-radius: 2px;
+    }
+
+    &:disabled {
+      filter: none;
+    }
+
+    &.light > overlay {
+      border-color: gtkalpha($view_fg_color, 0.1);
+    }
+  }
+}
+
+menubutton {
+  &.osd {
+    background: none;
+    color: inherit;
+
+    > button { @extend %osd_button; }
+  }
+
+  &.circular > button { @extend %circular_button; }
+  &.flat > button { @extend %button_basic_flat; }
+  &.pill > button { @extend %pill_button; }
+
+  &.suggested-action {
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+  }
+
+  &.destructive-action {
+    background-color: $destructive_bg_color;
+    color: $destructive_fg_color;
+  }
+
+  &.opaque {
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    border-radius: $button_radius;
+
+    &.circular, &.pill {
+      border-radius: $circular_radius;
+    }
+
+    > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+
+  &.image-button > button {
+    min-width: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  &.card > button {
+    border-radius: $card_radius;
+  }
+
+  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: $button_radius;
+
+  &, & > separator {
+    transition: $button_transition;
+    transition-property: background;
+  }
+
+  > separator {
+    margin-top: 6px;
+    margin-bottom: 6px;
+    background: none;
+  }
+
+  > menubutton > button {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  // 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: 9px;
+    padding-right: 9px;
+
+    > box {
+      border-spacing: 6px;
+    }
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+
+    > button, > menubutton > button {
+      filter: none;
+    }
+  }
+
+  // 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: $border_color;
+    }
+
+    &:hover,
+    &:active,
+    &:checked {
+      background: $hover_color;
+
+      > separator {
+        background: none;
+      }
+    }
+
+    &:disabled {
+      filter: opacity($strong_disabled_opacity);
+
+      > button:disabled, > menubutton > button:disabled {
+        filter: none;
+      }
+    }
+
+    &:focus-within:focus-visible > separator {
+      background: none;
+    }
+
+    > button,
+    > menubutton > button {
+      @extend %button_basic_flat;
+
+      border-radius: $button_radius;
+    }
+  }
+
+  &.suggested-action {
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+  }
+
+  &.destructive-action {
+    background-color: $destructive_bg_color;
+    color: $destructive_fg_color;
+  }
+
+  &.opaque {
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    > button, > menubutton > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        color: inherit;
+        background-color: transparent;
+      }
+    }
+
+    $_separator_color: gtkalpha(currentColor, $dimmer_opacity);
+
+    > 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 {
+  > box {
+    border-spacing: $base_padding;
+
+    > label {
+      font-weight: bold;
+
+      &:dir(ltr) { padding-right: 2px; }
+      &:dir(rtl) { padding-left: 2px; }
+    }
+  }
+
+  .arrow-button > box > &,
+  splitbutton > button > & {
+    > box > label {
+      &:dir(ltr) { padding-right: 0; }
+      &:dir(rtl) { padding-left: 0; }
+    }
+  }
+}
+
+tabbutton {
+  label {
+    font-weight: 800;
+    font-size: 8pt;
+
+    &.small {
+      font-size: 6pt;
+    }
+  }
+
+  indicatorbin > indicator,
+  indicatorbin > mask {
+    transform: translate(-1px, 1px);
+  }
+}

src/sass/libadwaita/widgets/_calendar.scss

@@ -0,0 +1,54 @@
+calendar {
+  color: $view_fg_color;
+  background-clip: padding-box;
+  border: 1px solid $border_color;
+  font-feature-settings: "tnum";
+
+  > header {
+    border-bottom: 1px solid $border_color;
+
+    > button {
+      @extend %button_basic_flat;
+      border-radius: 0;
+    }
+  }
+
+  > grid {
+    padding-left: 3px;
+    padding-bottom: 3px;
+
+    > label.today {
+      box-shadow: inset 0px -2px $border_color;
+
+      &:selected {
+        box-shadow: none;
+      }
+    }
+
+    > label {
+      @include focus-ring($focus-state: ':focus');
+      margin-top: 3px;
+      margin-right: 3px;
+
+      &.day-number {
+        padding: 3px;
+
+        &:checked {
+          border-radius: $button_radius;
+          background-color: gtkalpha($accent_bg_color, 0.3);
+        }
+
+        &:selected {
+          border-radius: $button_radius;
+
+          background-color: $accent_bg_color;
+          color: $accent_fg_color;
+        }
+      }
+
+      &.day-number.other-month {
+        color: gtkalpha(currentColor, 0.3);
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_checks.scss

@@ -0,0 +1,104 @@
+checkbutton {
+  border-spacing: $base_padding / 2 + 1px;
+  border-radius: $button_radius + 3px;
+  padding: $base_padding / 2;
+
+  @include focus-ring();
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
+  &.text-button {
+    // this is for a nice focus on check and radios text
+    padding: $base_padding / 2 + 1px;
+  }
+}
+
+check,
+radio {
+  min-height: 20px;
+  min-width: 20px;
+  -gtk-icon-size: 20px;
+  padding: 0;
+  box-shadow: 0 0 0 0 transparent;
+  background-color: gtkalpha(currentColor, 0.12);
+  transition: $transition,
+              box-shadow $ripple-fade-out-duration / 2 $ease-out;
+
+  &:not(:checked):not(:indeterminate) {
+    &:hover {
+      box-shadow: 0 0 0 6px gtkalpha(currentColor, 0.05);
+      background-color: gtkalpha(currentColor, 0.15);
+    }
+  
+    &:active {
+      box-shadow: 0 0 0 6px gtkalpha(currentColor, 0.12);
+      background-color: gtkalpha(currentColor, 0.20);
+    }
+  }
+
+  &:checked,
+  &:indeterminate {
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+    box-shadow: none;
+
+    &:hover {
+      background-image: image(gtkalpha(currentColor, 0.1));
+      box-shadow: 0 0 0 6px gtkalpha($accent_bg_color, 0.05);
+    }
+
+    &:active {
+      background-image: image(gtkalpha(currentColor, 0.2));
+      box-shadow: 0 0 0 6px gtkalpha($accent_bg_color, 0.12);
+    }
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  .osd & {
+    &:checked,
+    &:indeterminate {
+      background-color: $osd_fill_bg_color;
+      color: $osd_fill_fg_color;
+    }
+  }
+}
+
+check {
+  border-radius: 100%;
+
+  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg"))); }
+  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/checkbox-mixed-symbolic@2.svg"))); }
+}
+
+radio {
+  border-radius: 100%;
+
+  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic@2.svg"))); }
+  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/radio-mixed-symbolic@2.svg"))); }
+}
+
+checkbutton.selection-mode {
+  border-radius: $circular_radius;
+
+  check, radio {
+    padding: $base_padding / 2;
+    border-radius: $circular_radius;
+  }
+
+  label {
+    &:dir(ltr) { margin-right: $base_padding; }
+    &:dir(rtl) { margin-left: $base_padding; }
+  }
+}
+
+// ANIMATION:
+// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
+// the transformation is set on the active state and it get reset on the checked state.
+check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
+
+// radio:not(:checked):active { -gtk-icon-transform: scale(0); }

src/sass/libadwaita/widgets/_color-chooser.scss

@@ -0,0 +1,100 @@
+colorswatch {
+  // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+  // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
+  // applied to the overlay box.
+
+  @include focus-ring($width: 4px, $offset: -2px);
+
+  // base color corners rounding
+  // to avoid the artifacts caused by rounded corner anti-aliasing the base color
+  // sports a bigger radius.
+  // nth-child is needed by the custom color strip.
+
+  &.top {
+    border-top-left-radius: $button_radius + 0.5px;
+    border-top-right-radius: $button_radius + 0.5px;
+
+    > overlay {
+      border-top-left-radius: $button_radius;
+      border-top-right-radius: $button_radius;
+    }
+  }
+
+  &.bottom {
+    border-bottom-left-radius: $button_radius + 0.5px;
+    border-bottom-right-radius: $button_radius + 0.5px;
+
+    > overlay {
+      border-bottom-left-radius: $button_radius;
+      border-bottom-right-radius: $button_radius;
+    }
+  }
+
+  &.left,
+  &:first-child:not(.top) {
+    border-top-left-radius: $button_radius + 0.5px;
+    border-bottom-left-radius: $button_radius + 0.5px;
+
+    > overlay {
+      border-top-left-radius: $button_radius;
+      border-bottom-left-radius: $button_radius;
+    }
+  }
+
+  &.right,
+  &:last-child:not(.bottom) {
+    border-top-right-radius: $button_radius + 0.5px;
+    border-bottom-right-radius: $button_radius + 0.5px;
+
+    > overlay {
+      border-top-right-radius: $button_radius;
+      border-bottom-right-radius: $button_radius;
+    }
+  }
+
+  &.dark > overlay {
+    color: white;
+  }
+
+  &.light > overlay {
+    color: transparentize(black, .25);
+    box-shadow: inset 0 0 0 1px gtkalpha($view_fg_color, 0.1);
+  }
+
+  &:drop(active) {
+    &.light > overlay {
+      box-shadow: inset 0 0 0 2px $drop_target_color;
+    }
+
+    &.dark > overlay {
+      box-shadow: inset 0 0 0 2px $drop_target_color;
+    }
+  }
+
+  &#add-color-button {
+    > overlay {
+      @extend %button_basic;
+
+      border-radius: $button_radius 0 0 $button_radius;
+    }
+
+    &:only-child > overlay { border-radius: $button_radius; }
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  &#editor-color-sample {
+    border-radius: $button_radius;
+
+    > overlay { border-radius: $button_radius + 0.5px; }
+  }
+}
+
+plane {
+  @include focus-ring($offset: 2px, $outer: true);
+}
+
+// colorscale popup
+colorchooser .popover.osd { border-radius: $popover_radius; }

src/sass/libadwaita/widgets/_column-view.scss

@@ -0,0 +1,113 @@
+columnview {
+  @include focus-ring();
+
+  &:drop(active) {
+    box-shadow: none;
+  }
+
+  > header > button {
+    @extend %undecorated_button;
+    padding: $base_padding / 2 $base_padding * 1.5;
+    border-radius: 0;
+    box-shadow: none;
+    line-height: 100%;
+    border-left: 1px solid $border_color;
+    border-bottom: 1px solid $border_color;
+
+    &:first-child {
+      border-left-width: 0;
+    }
+
+    > box {
+      color: gtkalpha(currentColor, 0.4);
+      font-weight: 700;
+      font-size: 9pt;
+      border-spacing: $base_padding;
+    }
+
+    &:hover > box {
+      color: gtkalpha(currentColor, 0.7);
+      box-shadow: none;
+    }
+
+    &:active > box {
+      color: currentColor;
+    }
+
+    sort-indicator {
+      &.ascending {
+        -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+      }
+      &.descending {
+        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+      }
+
+      min-height: 16px;
+      min-width: 16px;
+    }
+  }
+
+  button.dnd,
+  header.button.dnd { // for treeview-like derive widgets
+    &:active, &:selected, &:hover, & {
+      color: $accent_fg_color;
+      background-color: $accent_bg_color;
+      transition: none;
+    }
+  }
+
+  // Remove the default background of the internal list view
+  // since we already apply a background to the column view
+  // with the .view class. Doing this will avoid overdraw.
+  &.view > listview.view {
+    background: none;
+    color: inherit;
+  }
+
+  // move padding to child cells
+  > listview > row {
+    padding: 0;
+
+    // align horizontal sizing with header buttons
+    > cell {
+      padding: 8px 6px;
+
+      &:not(:first-child) {
+        border-left: 1px solid transparent;
+      }
+    }
+  }
+
+  // make column separators visible when :show-column-separators is true
+  &.column-separators {
+    > listview > row > cell,
+    > header > button {
+      border-left-color: $border_color;
+    }
+  }
+
+  > listview:not(.horizontal).separators > row:not(.separator) {
+    border-top: 1px solid $border_color;
+    border-bottom: none;
+  }
+
+  // shrink vertically for .data-table
+  &.data-table > listview > row > cell {
+    padding-top: $base_padding / 2;
+    padding-bottom: $base_padding / 2;
+  }
+
+  @include undershoot(top, $shade_color, true);
+}
+
+columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
+  outline: 2px solid $focus_border_color;
+}
+
+columnview row:not(:selected) cell editablelabel.editing:focus-within {
+  outline: 2px solid $accent_color;
+}
+
+treeexpander {
+  border-spacing: $base_padding / 2 + 1px;
+}

src/sass/libadwaita/widgets/_deprecated.scss

@@ -0,0 +1,335 @@
+// The following styles are deprecated in GTK and should be removed for GTK 5.x
+
+// .linked >                  element            child
+$deprecated_linked_widgets: ("combobox",         "> box > button.combo"),
+                            ("appchooserbutton", "> combobox > box > button.combo");
+
+/***********************
+ * GtkAppChooserDialog *
+ ***********************/
+
+window.appchooser {
+  headerbar.titlebar {
+    @extend .flat;
+    @extend %headerbar-shrunk;
+
+    > windowhandle {
+      padding-top: 3px;
+    }
+
+    box.start + box {
+      margin-top: -6px;
+      margin-bottom: -6px;
+      min-height: 12px;
+    }
+  }
+
+  searchbar {
+    @extend %searchbar-flat;
+
+    background: none;
+  }
+
+  &.csd searchbar {
+    @extend %searchbar-shrunk;
+  }
+
+  .dialog-vbox > box > box:not(.dialog-action-area) {
+    margin: 6px;
+  }
+
+  .dialog-action-area {
+    margin-top: 0;
+  }
+}
+
+/****************
+ * GtkAssistant *
+ ****************/
+
+window.assistant {
+  .sidebar {
+    padding: $menu-margin;
+    background-color: $sidebar_bg_color;
+    color: $sidebar_fg_color;
+
+    &:not(separator) {
+      &:dir(ltr) {
+        border-right: none;
+        box-shadow: inset -1px 0 $border_color;
+      }
+
+      &:dir(rtl) {
+        box-shadow: inset 1px 0 $border_color;
+      }
+    }
+
+    &:backdrop {
+      background-color: $sidebar_backdrop_color;
+      transition: background-color $backdrop_transition;
+    }
+
+    > label {
+      padding: 6px 12px;
+      border-radius: $menuitem_radius;
+
+      &.highlight {
+        background-color: $selected_color;
+      }
+    }
+  }
+}
+
+/***************
+ * GtkComboBox *
+ ***************/
+
+combobox {
+  @extend dropdown;
+
+  // Since cell view is taller than a plain label, make sure
+  // the button doesn't get stretched with a larger font
+  button {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    min-height: 30px;
+  }
+}
+
+/***************
+ * GtkIconView *
+ ***************/
+
+iconview {
+  @extend %view;
+  @include focus-ring();
+
+  &:drop(active) {
+    box-shadow: none;
+  }
+
+  > dndtarget:drop(active) {
+    border-style: solid;
+    border-width: 1px;
+    border-color: $drop_target_color;
+  }
+}
+
+/**************
+ * GtkInfoBar *
+ **************/
+
+infobar {
+  > revealer > box {
+    padding: 6px;
+    padding-bottom: 7px;
+    border-spacing: 6px;
+    box-shadow: inset 0 -1px $border_color;
+
+    > box {
+      border-spacing: 6px;
+    }
+  }
+
+  &.action:hover > revealer > box {
+    background-image: image(gtkalpha(currentColor, .05));
+  }
+
+  &.action:active > revealer > box {
+    background-image: image(gtkalpha(currentColor, .1));
+  }
+
+  @each $i_type, $i_color in (info, $accent_bg_color),
+                             (question, $accent_bg_color),
+                             (warning, $warning_bg_color),
+                             (error, $error_bg_color) {
+    &.#{$i_type} > revealer > box {
+      background-color: gtkmix($i_color, $window_bg_color, 30%);
+      color: $window_fg_color;
+    }
+  }
+
+ .close {
+    min-width: 18px;
+    min-height: 18px;
+    padding: 4px;
+    border-radius: 50%;
+    @extend %button_basic_flat;
+  }
+}
+
+/****************
+ * GtkStatusBar *
+ ****************/
+
+statusbar {
+  padding: 6px 10px 6px 10px;
+}
+
+/***************
+ * GtkTreeView *
+ ***************/
+
+// To be used for opaque elements overlaid atop the selected row
+$treeview_selection_opaque: gtkmix(currentColor, $view_bg_color, 10%);
+$treeview_borders_opaque: gtkmix(currentColor, $view_bg_color, 20%);
+
+treeview.view {
+  @extend columnview;
+
+  border-left-color: $treeview_borders_opaque; // this is actually the tree lines color,
+  border-top-color: $treeview_borders_opaque; // while this is the grid lines color, better then nothing
+
+  &:selected {
+    &:focus, & {
+      border-radius: 0;
+    }
+  }
+
+  &.separator {
+    min-height: 2px;
+    color: $border_color;
+  }
+
+  &.expander {
+    // GtkTreeView uses the larger of the expander’s min-width and min-height
+    min-width: 16px;
+    min-height: 16px;
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+    color: gtkalpha(currentColor, .7);
+
+    &:hover, &:active { color: currentColor; }
+
+    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+    &:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
+  }
+
+  > dndtarget:drop(active) {
+    border-style: solid none;
+    border-width: 1px;
+    border-color: $drop_target_color;
+
+    &.after { border-top-style: none; }
+
+    &.before { border-bottom-style: none; }
+  }
+
+  > header > button {
+    padding-left: $base_padding;
+    padding-right: $base_padding;
+  }
+
+  &.progressbar { // progress bar in treeviews
+    &, &:selected {
+      background-color: $accent_bg_color;
+      color: $accent_fg_color;
+    }
+
+    box-shadow: none;
+  }
+
+  &.trough { // progress bar trough in treeviews
+    background-color: gtkalpha(currentColor, 0.1);
+  }
+
+  ~ undershoot.top {
+    box-shadow: none;
+    background: none;
+  }
+
+  acceleditor > label {
+    // see tests/testaccel in GTK to test
+    background-color: $treeview_selection_opaque;
+  }
+}
+
+treeview.navigation-sidebar {
+  padding: 0;
+
+  &:selected {
+    &:focus, & {
+      background-color: $selected_color;
+    }
+  }
+}
+
+treeview entry {
+  &:focus-within {
+    &:dir(rtl), &:dir(ltr) { // specificity bump hack
+      background-color: $view_bg_color;
+      transition-property: color, background;
+    }
+  }
+
+  &.flat, & {
+    border-radius: 0;
+    background-image: none;
+    background-color: $view_bg_color;
+
+    &:focus-within { border-color: $accent_color; }
+  }
+}
+
+treeview spinbutton:not(.vertical) {
+  min-height: 0;
+  border-style: none;
+  border-radius: 0;
+
+  > text {
+    min-height: 0;
+    padding: 1px 2px;
+  }
+}
+
+// The following styles are deprecated in libadwaita and should be removed in 2.x
+
+// Deprecated: use .boxed-list instead
+list.content {
+  @extend .boxed-list;
+}
+
+// Deprecated: use .navigation-sidebar instead
+.sidebar {
+  &:not(separator) {
+    &:dir(ltr),
+    &.left,
+    &.left:dir(rtl) {
+      border-right: 1px solid $border_color;
+      border-left-style: none;
+    }
+
+    &:dir(rtl),
+    &.right {
+      border-left: 1px solid $border_color;
+      border-right-style: none;
+    }
+  }
+
+  listview.view,
+  list {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  paned &,
+  .sidebar-pane & {
+    &.left, &.right,
+    &.left:dir(rtl),
+    &:dir(rtl), &:dir(ltr), & { border-style: none; }}
+}
+
+// Deprecated: use .title-1
+.large-title {
+  font-weight: 300;
+  font-size: 24pt;
+}
+
+// Deprecated: use AdwToolbarView
+
+headerbar.flat {
+  @extend %headerbar-flat;
+}

src/sass/libadwaita/widgets/_dialogs.scss

@@ -0,0 +1,125 @@
+.dialog-action-area {
+  margin: $base_padding;
+  border-spacing: $base_padding;
+}
+
+/****************
+ * Print dialog *
+*****************/
+
+window.print {
+  drawing {
+    color: $window_fg_color;
+    background: none;
+    border: none;
+    padding: 0;
+
+    paper {
+      background-color: white;
+      color: transparentize(black, .2);
+      background-clip: padding-box;
+      border: 1px solid $border_color;
+    }
+  }
+
+  headerbar.titlebar {
+    @extend .flat;
+  }
+
+  .dialog-action-box {
+    @extend .view;
+  }
+}
+
+/********************
+ * Page setup dalog *
+ ********************/
+
+window.pagesetup {
+  headerbar.titlebar {
+    @extend .flat;
+  }
+}
+
+/******************
+ * GtkAboutDialog *
+ ******************/
+
+window.aboutdialog {
+  headerbar.titlebar {
+    @extend .flat;
+  }
+
+  image.large-icons {
+    -gtk-icon-size: 128px;
+  }
+}
+
+/*************************
+ * GtkColorChooserDialog *
+ *************************/
+window.colorchooser {
+  headerbar.titlebar {
+    @extend .flat;
+  }
+}
+
+/*************
+ * AdwDialog *
+ *************/
+
+floating-sheet {
+  > dimming {
+    background-color: gtkalpha($shade_color, 2);
+  }
+
+  > sheet {
+    border-radius: $window_radius;
+    box-shadow: 0 2px 8px 2px transparentize(black, 0.93),
+                0 3px 20px 10px transparentize(black, 0.95),
+                0 6px 32px 16px transparentize(black, 0.98),
+                0 0 0 1px $shade_color;
+    outline: 1px solid $window_outline_color;
+    outline-offset: -1px;
+  }
+}
+
+dialog.bottom-sheet {
+  &.landscape sheet {
+    margin-left: 30px;
+    margin-right: 30px;
+
+    > outline {
+      &.flush-left, &.flush-right, &.flush-left.flush-right {
+        box-shadow: inset 1px 0 $window_outline_color,
+                    inset -1px 0 $window_outline_color,
+                    inset 0 1px $window_outline_color;
+      }
+    }
+  }
+}
+
+dialog-host > dialog.background {
+  background: none;
+
+  sheet {
+    background-color: $window_bg_color;
+    color: $window_fg_color;
+  }
+}
+
+dialog-host > dialog.view {
+  background: none;
+
+  sheet {
+    @extend %view;
+  }
+}
+
+dialog-host > dialog.osd {
+  background: none;
+
+  sheet {
+    @extend %osd;
+  }
+}

src/sass/libadwaita/widgets/_dropdowns.scss

@@ -0,0 +1,38 @@
+dropdown {
+  > button > box {
+    border-spacing: 6px;
+
+    > stack > row.activatable {
+      &:hover, &:active { background: none; }
+    }
+  }
+
+  arrow {
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    min-height: 16px;
+    min-width: 16px;
+  }
+
+  &:drop(active) { // FIXME: untested
+    box-shadow: none;
+
+    button.combo { @extend %button_basic_drop_active; }
+  }
+
+  popover.menu {
+    padding-top: 6px;
+
+    listview > row {
+      min-width: 0;
+    }
+
+    // dropdowns with searchboxes on top
+    .dropdown-searchbar {
+      padding: 6px;
+
+      + scrolledwindow {
+        @include undershoot(top, $popover_shade_color);
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_emoji-chooser.scss

@@ -0,0 +1,75 @@
+popover.emoji-picker > contents {
+  padding: 0;
+}
+
+.emoji-searchbar {
+  padding: 6px;
+}
+
+.emoji-toolbar {
+  // flowbox children already have 3px padding, so we only need 3px more to
+  // get the regular 6px. We also don't need spacing, for the same reason.
+  padding: 3px;
+}
+
+button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+  @extend %circular_button;
+  @extend %button_basic_flat;
+
+  min-width: 32px;
+  min-height: 32px;
+}
+
+popover.emoji-picker emoji {
+  font-size: x-large;
+  padding: 6px;
+  border-radius: $button_radius;
+
+  &:focus,
+  &:hover {
+    background: $hover_color;
+  }
+
+  &:active {
+    background: $active_color;
+  }
+}
+
+popover.emoji-picker scrolledwindow.view {
+  background: none;
+  color: inherit;
+
+  @include undershoot(top, $popover_shade_color);
+  @include undershoot(bottom, $popover_shade_color);
+}
+
+// Emoji completion popover
+
+popover.emoji-completion > contents {
+  padding: $menu_margin;
+  padding-bottom: $menu_margin - 2px;
+}
+
+emoji-completion-row {
+  // emoji extends quite a bit into the padding, so we can't use the same padding on all sides
+  padding: $menu_padding - 6px;
+  margin-bottom: 2px;
+  border-radius: $menuitem_radius;
+
+  &:dir(ltr) { padding-right: $menu_padding; }
+  &:dir(rtl) { padding-left: $menu_padding; }
+
+   > box {
+    border-spacing: $menu_padding - 6px;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: $selected_color;
+    color: $popover_fg_color;
+  }
+
+  &:active {
+    background-color: $active_color; // matching buttons
+  }
+}

src/sass/libadwaita/widgets/_entries.scss

@@ -0,0 +1,103 @@
+%entry,
+entry {
+  %entry_basic, & {
+    min-height: $medium_size;
+    padding-left: $base_padding * 1.5;
+    padding-right: $base_padding * 1.5;
+    border-radius: $button_radius;
+    border-spacing: $base_padding;
+    background-color: $button_color;
+    background-clip: padding-box;
+    caret-color: currentColor;
+
+    @include focus-ring($focus-state: ':focus-within');
+
+    .osd &:focus-within {
+      outline-color: $osd_focus_color;
+    }
+
+    > text {
+      > placeholder {
+        @extend .dim-label;
+      }
+
+      > block-cursor {
+        color: $view_bg_color;
+        background-color: $view_fg_color;
+      }
+    }
+
+    &.flat {
+      &:focus-within, &:disabled, & {
+        min-height: 0;
+        padding: 2px;
+        background-color: transparent;
+        box-shadow: none;
+        border-radius: 0;
+      }
+    }
+
+    &:disabled { filter: opacity($disabled_opacity); }
+
+    // entry error and warning style
+    @each $e_type, $e_color in (error,   $error_color),
+                               (warning, $warning_color),
+                               (success, $success_color) {
+      &.#{$e_type} {
+        @include focus-ring($focus-state: ':focus-within', $fc: gtkalpha(currentColor, $focus_border_opacity));
+
+        > text {
+          > selection:focus-within { background-color: gtkalpha($e_color, .2); }
+
+          > cursor-handle > contents { background-color: currentColor; }
+        }
+
+        > progress > trough > progress {
+          border-color: currentColor;
+        }
+      }
+    }
+
+    > image { // icons inside the entry
+      opacity: .7;
+
+      &:hover { opacity: 1; }
+
+      &:active {
+        opacity: .8;
+      }
+
+      &.left { margin-right: 6px; }
+      &.right { margin-left: 6px; }
+    }
+
+    &.password image.caps-lock-indicator {
+      opacity: $dimmer_opacity;
+    }
+
+    &:drop(active) {
+      &:focus-within, & {
+        border-color: $drop_target_color;
+        box-shadow: inset 0 0 0 1px $drop_target_color;
+      }
+    }
+  }
+
+  > progress {
+    margin-bottom: 3px;
+
+    > trough > progress {
+      background-color: transparent;
+      background-image: none;
+      border-radius: 0;
+      border-width: 0 0 2px;
+      border-color: $accent_bg_color;
+      border-style: solid;
+      box-shadow: none;
+    }
+  }
+
+  .osd & > progress > trough > progress {
+    border-color: $osd_fill_bg_color;
+  }
+}

src/sass/libadwaita/widgets/_expanders.scss

@@ -0,0 +1,27 @@
+expander {
+  min-width: 16px;
+  min-height: 16px;
+  -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+  &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+  &:disabled { filter: opacity($disabled_opacity); }
+
+  &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+}
+
+expander-widget {
+  @include focus-ring("> box > title");
+
+  > box > title {
+    border-radius: $button_radius;
+
+    > expander {
+      opacity: .7;
+    }
+
+    &:hover > expander,
+    &:active > expander {
+      opacity: 1;
+    }
+  }
+}

src/sass/libadwaita/widgets/_file-chooser.scss

@@ -0,0 +1,233 @@
+placessidebar {
+  .navigation-sidebar > row {
+    // Needs overriding of the `.navigation-sidebar > row` padding
+    padding: 0;
+
+    // Using margins/padding directly in the SidebarRow
+    // will make the animation of the new bookmark row jump
+    > revealer { padding: 0 14px; }
+
+    image.sidebar-icon {
+      &:dir(ltr) { padding-right: 8px; }
+      &:dir(rtl) { padding-left: 8px; }
+    }
+
+    label.sidebar-label {
+      &:dir(ltr) { padding-right: 2px; }
+      &:dir(rtl) { padding-left: 2px; }
+    }
+
+    @at-root button.sidebar-button {
+      @extend %button_basic_flat;
+
+      min-height: 26px;
+      min-width: 26px;
+      margin-top: $base_padding / 2;
+      margin-bottom: $base_padding / 2;
+      padding: 0;
+      border-radius: 100%;
+    }
+
+    // in the sidebar case it makes no sense to click the selected row
+    &:selected:active { box-shadow: none; }
+
+    &.sidebar-placeholder-row {
+      padding: 0 8px;
+      min-height: 2px;
+      background-image: image($drop_target_color);
+      background-clip: content-box;
+    }
+
+    &.sidebar-new-bookmark-row { color: $accent_color; }
+
+    &:drop(active):not(:disabled) {
+      color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+  }
+}
+
+row {
+  image.sidebar-icon {
+    opacity: 0.7; // see bug #786613 for details on this oddity
+  }
+
+  .sidebar-button {
+    opacity: 0.7;
+
+    &:hover,
+    &:active,
+    &.keyboard-activating {
+      opacity: 1;
+    }
+  }
+}
+
+placesview {
+  .server-list-button > image {
+    transition: -gtk-icon-transform 200ms $ease-out-quad;
+    -gtk-icon-transform: rotate(0turn);
+  }
+
+  .server-list-button:checked > image {
+    -gtk-icon-transform: rotate(-0.5turn);
+  }
+
+  > actionbar > revealer > box > box {
+    border-spacing: $base_padding;
+  }
+}
+
+filechooser {
+  box-shadow: 0 1px $border_color;
+
+  #pathbarbox {
+    border-bottom: 1px solid $border_color;
+  }
+
+  // Make the toolbar buttons flat like on an actual toolbar
+  #pathbarbox > stack > box > {
+    button,
+    box > button,
+    menubutton > button {
+      @extend %button_basic_flat;
+    }
+  }
+
+  pathbar button {
+    &:not(.image-button) {
+      padding-left: $base_padding * 1.5;
+      padding-right: $base_padding * 1.5;
+    }
+
+    // Icon + label buttons
+    > box {
+      border-spacing: 4px;
+
+      > label {
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+    }
+  }
+
+  columnview > listview > row > cell {
+    padding: 0;
+
+    > filelistcell {
+      padding: 8px $base_padding;
+    }
+  }
+
+  gridview {
+    @include undershoot(top, $shade_color, true);
+    padding: $base_padding * 2.5;
+
+    > child {
+      border-radius: $card_radius;
+      padding: 0;
+      margin: $base_padding / 2;
+
+      > filelistcell {
+        padding: $base_padding $base_padding * 2;
+      }
+
+      & filethumbnail image {
+        filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3));
+      }
+
+      & box {
+        border-spacing: $base_padding;
+      }
+    }
+  }
+
+  // Style the outer action bar with a toolbar view-like shadow
+  > box > actionbar {
+    box-shadow: 0 -1px $border_color;
+
+    > revealer > box {
+      box-shadow: none;
+      padding-top: $base_padding;
+    }
+  }
+
+  // Style the remote search action bar like a banner
+  scrolledwindow + actionbar > revealer > box {
+    background-color: gtkmix($accent_bg_color, $view_bg_color, 30%);
+    color: $window_fg_color;
+    box-shadow: none;
+    padding-top: $base_padding;
+    font-weight: bold;
+
+    &:backdrop {
+      background-color: gtkmix($accent_bg_color, $view_bg_color, 15%);
+    }
+  }
+
+  placesview {
+    // Only the bottom undershoot, since the action bar is guaranteed to be
+    // there, while the search bar can show and hide. That's a problem, since
+    // we only need top undershoot when it's visible, to avoid a double shadow.
+    > stack > scrolledwindow {
+      @include undershoot(bottom);
+    }
+
+    // Make the Connect to Server action bar flat
+    > actionbar > revealer > box {
+      background: $view_bg_color;
+      color: $view_fg_color;
+      box-shadow: none;
+      padding-top: $base_padding;
+
+      &:backdrop {
+        background: $view_bg_color;
+        transition: none;
+      }
+    }
+  }
+
+  placessidebar {
+    background-color: $sidebar_bg_color;
+    color: $sidebar_fg_color;
+
+    &:backdrop {
+      background-color: $sidebar_backdrop_color;
+      transition: background-color $backdrop_transition;
+    }
+  }
+
+  // The separator is a part of GtkPaned, so it needs to be styled separately
+  paned.horizontal > separator {
+    &:dir(ltr) {
+      box-shadow: inset 1px 0 $sidebar_bg_color,
+                  inset 1px 0 $border_color;
+
+      &:backdrop {
+        box-shadow: inset 1px 0 $sidebar_backdrop_color,
+                    inset 1px 0 $border_color;
+      }
+    }
+
+    &:dir(rtl) {
+      box-shadow: inset -1px 0 $sidebar_bg_color,
+                  inset -1px 0 $border_color;
+
+      &:backdrop {
+        box-shadow: inset -1px 0 $sidebar_backdrop_color,
+                    inset -1px 0 $border_color;
+      }
+    }
+
+    &:backdrop {
+      transition: box-shadow $backdrop_transition;
+    }
+  }
+}
+
+/* Fix header bar height in the file chooser */
+window.filechooser headerbar box.start + box.vertical {
+  margin-top: -$base_padding;
+  margin-bottom: -$base_padding;
+  min-height: 12px;
+}

src/sass/libadwaita/widgets/_header-bar.scss

@@ -0,0 +1,392 @@
+headerbar {
+  min-height: $large_size;
+  background-color: $headerbar_backdrop_color;
+  color: $headerbar_fg_color;
+  margin: 0;
+  @extend %toolbar;
+
+  @if $rimless == 'false' {
+    box-shadow: inset 0 -1px $headerbar_border_color;
+  } @else {
+    border-radius: $window-radius $window-radius 0 0;
+    box-shadow: inset 0 -1px $headerbar_border_color, inset 0 1px $window_outline_color;
+  }
+
+  > windowhandle > box {
+    padding: $base_padding;
+
+    > box.start,
+    > box.end {
+      border-spacing: $base_padding;
+    }
+
+    &, > widget {
+      > box.start:dir(ltr),
+      > box.end:dir(rtl) {
+        margin-right: $base_padding;
+      }
+
+      > box.start:dir(rtl),
+      > box.end:dir(ltr) {
+        margin-left: $base_padding;
+      }
+    }
+  }
+
+  &:backdrop {
+    background-color: $headerbar_bg_color;
+    transition: background-color $backdrop_transition;
+
+    > windowhandle {
+      // opacity looks weird with GtkSwitch, but filter works fine
+      filter: opacity(0.5);
+
+      transition: filter $backdrop_transition;
+    }
+  }
+
+  &.default-decoration {
+    padding: 0;
+    margin: 0;
+    border: none;
+    min-height: $medium_size;
+
+    @if $rimless == 'false' {
+      box-shadow: none;
+    } @else {
+      box-shadow: inset 0 1px $window_outline_color;
+    }
+
+    > windowhandle > box {
+      padding: $base_padding / 2;
+    }
+
+    windowcontrols {
+      > button {
+        @if $window_button == 'mac' {
+          min-width: 16px;
+          min-height: 16px;
+          margin: 0 $base_padding - 2px;
+          padding: 0;
+        } @else {
+          min-width: 22px;
+          min-height: 22px;
+          margin: 0 $base_padding - 2px;
+          padding: 0;
+        }
+      }
+
+      > .icon {
+        margin: $base_padding;
+      }
+    }
+  }
+
+  .maximized &,
+  .fullscreen &,
+  .tiled &,
+  .tiled-top &,
+  .tiled-right &,
+  .tiled-bottom &,
+  .tiled-left &,
+  .solid-csd & {
+    border-radius: 0;
+    box-shadow: inset 0 -1px $headerbar_border_color;
+  }
+}
+
+window > {
+  .titlebar:not(.flat) {
+    box-shadow: inset 0 -1px $headerbar_border_color;
+  }
+
+  .titlebar headerbar:not(.flat) {
+    box-shadow: inset 0 -1px $headerbar_border_color;
+  }
+
+  headerbar.titlebar,
+  .titlebar headerbar {
+    min-height: $large_size;
+
+    > windowhandle > box {
+      padding-bottom: $base_padding;
+    }
+
+    &.default-decoration {
+      min-height: $medium_size;
+
+      > windowhandle > box {
+        padding: $base_padding / 2;
+      }
+    }
+  }
+}
+
+leaflet:first-child > headerbar {
+  & + separator {
+    background-color: $headerbar_backdrop_color;
+
+    @if $rimless == 'false' {
+      box-shadow: inset 0 -1px $headerbar_border_color;
+    } @else {
+      box-shadow: inset 0 -1px $headerbar_border_color, inset 0 1px $window_outline_color;
+    }
+
+    &:backdrop {
+      background-color: $headerbar_bg_color;
+      transition: background-color $backdrop_transition;
+    }
+  }
+}
+
+%headerbar-flat {
+  background: none;
+  color: inherit;
+  min-height: $large_size;
+
+  @if $rimless == 'false' {
+    box-shadow: none;
+  } @else {
+    box-shadow: inset 0 1px $window_outline_color;
+  }
+
+  > windowhandle > box {
+    padding-bottom: $base_padding;
+  }
+
+  &.default-decoration {
+    min-height: $medium_size;
+
+    > windowhandle > box {
+      padding: $base_padding / 2;
+    }
+  }
+
+  .maximized &,
+  .fullscreen &,
+  .tiled &,
+  .tiled-top &,
+  .tiled-right &,
+  .tiled-bottom &,
+  .tiled-left &,
+  .solid-csd & {
+    box-shadow: none;
+  }
+}
+
+%headerbar-inline {
+  @extend %headerbar-flat;
+
+  &:backdrop {
+    transition: none;
+
+    > windowhandle {
+      filter: none;
+      transition: none;
+    }
+  }
+
+  window.devel & > windowhandle {
+    background-image: none;
+  }
+}
+
+%headerbar-shrunk {
+  min-height: $large_size - $base_padding;
+
+  > windowhandle > box {
+    padding-top: $base_padding / 2;
+    padding-bottom: $base_padding / 2;
+  }
+
+  &.default-decoration {
+    min-height: $medium_size;
+
+    > windowhandle > box {
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+  }
+}
+
+.titlebar:not(headerbar) {
+  separator { background-color: $headerbar_border_color; }
+}
+
+/*********************
+ * GtkWindowControls *
+ *********************/
+
+$titlebutton_min: $button-min;
+$titlebutton_max: $button-max;
+$titlebutton_close: $button-close;
+
+%mac_window_button {
+  min-height: 16px;
+  min-width: 16px;
+  padding: ($medium_size - 16px) / 2 0;
+  margin-left: $base_padding - 2px;
+  margin-right: $base_padding - 2px;
+  box-shadow: none;
+
+  &.minimize, &.maximize, &.close {
+    color: transparent;
+    background: none;
+
+    &:hover, &:active {
+      box-shadow: none;
+    }
+
+    &:active > image {
+      background-color: gtkalpha(black, if($topbar == 'dark', 0.25, 0.12));
+    }
+
+    &:hover, &:active {
+      color: if($colorscheme != 'dracula', white, rgba(black, 0.5));
+    }
+
+    &:backdrop {
+      > image { background-color: gtkalpha($headerbar_fg_color, 0.3); }
+
+      &:hover, &:active {
+        color: gtkalpha($headerbar_fg_color, 0.45);
+      }
+    }
+  }
+
+  &.minimize { // Window minimize button
+    > image { background-color: $titlebutton_min; }
+
+    &:active > image {
+      background-color: gtkmix($headerbar_fg_color, $titlebutton_min, 25%);
+    }
+  }
+
+  &.maximize { // Window maximize button
+    > image { background-color: $titlebutton_max; }
+
+    &:active > image {
+      background-color: gtkmix($headerbar_fg_color, $titlebutton_max, 25%);
+    }
+  }
+
+  &.close { // Window close button
+    > image { background-color: $titlebutton_close; }
+
+    &:active > image {
+      background-color: gtkmix($headerbar_fg_color, $titlebutton_close, 25%);
+    }
+  }
+}
+
+%normal_window_button {
+  min-height: 22px;
+  min-width: 22px;
+  padding: ($medium-size - 22px) / 2 0;
+  margin-left: $base_padding - 2px;
+  margin-right: $base_padding - 2px;
+
+  &.minimize, &.maximize, &.close {
+    color: gtkalpha($headerbar_fg_color, 0.75);
+
+    &, &:hover, &:active, &:backdrop {
+      background: none;
+      box-shadow: none;
+    }
+
+    > image { background-color: gtkalpha(currentColor, 0.1); }
+
+    &:hover {
+      color: $headerbar_fg_color;
+
+      > image { background-color: gtkalpha(currentColor, 0.15); }
+    }
+
+    &:active {
+      color: $headerbar_fg_color;
+
+      > image { background-color: gtkalpha(currentColor, 0.2); }
+    }
+
+    &:backdrop {
+      opacity: 0.65;
+    }
+  }
+}
+
+windowcontrols {
+  border-spacing: $base_padding;
+
+  &:not(.empty) {
+    &.start:dir(ltr),
+    &.end:dir(rtl) {
+      margin-right: $base_padding;
+      margin-left: $base_padding;
+    }
+
+    &.start:dir(rtl),
+    &.end:dir(ltr) {
+      margin-left: $base_padding;
+      margin-right: $base_padding;
+    }
+  }
+
+  > button {
+    @if $window_button == 'mac' {
+      @extend %mac_window_button;
+    } @else {
+      @extend %normal_window_button;
+    }
+
+    > image {
+      padding: 0;
+      border-radius: 100%;
+      transition: $button_transition;
+    }
+  }
+
+  > .icon {
+    margin: 9px;
+  }
+}
+
+/******************
+ * AdwWindowTitle *
+ ******************/
+
+headerbar,
+windowtitle {
+  .title {
+    padding-left: 12px;
+    padding-right: 12px;
+    font-weight: bold;
+  }
+
+  .subtitle {
+    font-size: smaller;
+    padding-left: 12px;
+    padding-right: 12px;
+    @extend .dim-label;
+  }
+}
+
+windowtitle {
+  margin-top: -6px;
+  margin-bottom: -6px;
+  min-height: 12px;
+}
+
+// Development versions of apps to use a differently styled headerbar
+
+window.devel {
+  headerbar > windowhandle {
+    background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")),
+                                 image(transparent));
+    background-repeat: repeat-x;
+  }
+
+  dialog headerbar > windowhandle {
+    background-image: unset;
+    background-repeat: unset;
+  }
+}

src/sass/libadwaita/widgets/_labels.scss

@@ -0,0 +1,92 @@
+label {
+  caret-color: currentColor;
+
+  &.separator {
+    @extend .dim-label;
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+}
+
+.dim-label {
+  opacity: $dim_label_opacity;
+}
+
+.accent {
+  color: $accent_color;
+}
+
+.success {
+  color: $success_color;
+}
+
+.warning {
+  color: $warning_color;
+}
+
+.error {
+  color: $error_color;
+}
+
+/**********************
+ * General Typography *
+ **********************/
+
+.title-1 {
+  font-weight: 800;
+  font-size: 20pt;
+}
+
+.title-2 {
+  font-weight: 800;
+  font-size: 15pt;
+}
+
+.title-3 {
+  font-weight: 700;
+  font-size: 15pt;
+}
+
+.title-4 {
+  font-weight: 700;
+  font-size: 13pt;
+}
+
+.heading {
+  font-weight: 700;
+  font-size: 11pt;
+}
+
+.body {
+  font-weight: 400;
+  font-size: 11pt;
+}
+
+.caption-heading {
+  font-weight: 700;
+  font-size: 9pt;
+}
+
+.caption {
+  font-weight: 400;
+  font-size: 9pt;
+}
+
+.monospace {
+  font-family: monospace;
+}
+
+.numeric {
+  font-feature-settings: "tnum";
+}
+
+/*******************
+ * Editable Labels *
+ *******************/
+
+editablelabel > stack > text {
+  color: $view_fg_color;
+  background-color: $view_bg_color;
+}

src/sass/libadwaita/widgets/_level-bar.scss

@@ -0,0 +1,96 @@
+$_levelbar_size: 8px;
+$_levelbar_border_radius: 99px;
+
+levelbar {
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  &.horizontal {
+    trough > block {
+      min-height: $_levelbar_size;
+      border-radius: $_levelbar_border_radius;
+
+      &.empty,
+      &.full {
+        border-radius: $_levelbar_border_radius;
+      }
+    }
+
+    // segmented level bar
+    &.discrete > trough > block {
+      min-height: $_levelbar_size;
+      margin-right: 2px;
+      min-width: 26px;
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
+      }
+
+      &:last-child {
+        border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.vertical {
+    trough > block {
+      min-width: $_levelbar_size;
+      border-radius: $_levelbar_border_radius;
+
+      &.empty,
+      &.full {
+        border-radius: $_levelbar_border_radius;
+      }
+    }
+
+    // segmented level bar
+    &.discrete > trough > block {
+      min-width: $_levelbar_size;
+      margin-bottom: 2px;
+      min-height: 26px;
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: $_levelbar_border_radius $_levelbar_border_radius 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 $_levelbar_border_radius $_levelbar_border_radius;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  > trough {
+    padding: 0;
+
+    // level bar colours
+    > block {
+      &.low {
+        background-color: $warning_bg_color;
+      }
+
+      &.high,
+      &:not(.empty) {
+        background-color: $fill_color;
+      }
+
+      &.full {
+        background-color: $success_bg_color;
+      }
+
+      &.empty {
+        background-color: $trough_color;
+      }
+    }
+  }
+
+  .osd & > trough > block {
+    &.high, &:not(.empty) {
+      background-color: $osd_fill_bg_color;
+    }
+  }
+}

src/sass/libadwaita/widgets/_linked.scss

@@ -0,0 +1,46 @@
+// .linked >        element       child
+$_linked_widgets: ("%button",     ""),
+                  ("button",      ""),
+                  ("menubutton",  "> button"),
+                  ("dropdown",    "> button"),
+                  ("colorbutton", "> button"),
+                  ("fontbutton",  "> button"),
+                  ("tabbutton",   "> button"),
+                  ("%entry",      ""),
+                  ("entry",       "");
+
+$_linked_widgets: join($_linked_widgets, $deprecated_linked_widgets);
+
+@each $widget, $child in $_linked_widgets {
+  .linked:not(.vertical) > {
+    #{$widget} {
+      &:dir(ltr):not(:first-child) #{$child},
+      &:dir(rtl):not(:last-child) #{$child} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: -1px;
+      }
+
+      &:dir(ltr):not(:last-child) #{$child},
+      &:dir(rtl):not(:first-child) #{$child} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  .linked.vertical {
+    #{$widget} {
+      &:not(:first-child) #{$child} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        margin-top: -1px;
+      }
+
+      &:not(:last-child) #{$child} {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_links.scss

@@ -0,0 +1,53 @@
+link,
+button.link {
+  color: $link_color;
+  text-decoration: underline;
+  font-weight: inherit;
+
+  &:visited {
+    color: $link_visited_color;
+  }
+
+  &:hover {
+    color: gtkshade($link_color, 1.1);
+  }
+
+  &:active {
+    color: $link_color;
+  }
+
+  &:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
+
+  .osd & {
+    color: $osd_link_color;
+
+    &:visited {
+      color: $osd_link_visited_color;
+    }
+
+    &:active {
+      color: $osd_link_color;
+    }
+  }
+}
+
+link {
+  @include focus-ring();
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+}
+
+button.link {
+  &,
+  &:hover,
+  &:active,
+  &:checked {
+    @extend %undecorated_button;
+  }
+
+  > label {
+    text-decoration: underline;
+  }
+}

src/sass/libadwaita/widgets/_lists.scss

@@ -0,0 +1,576 @@
+$row_transition: background-color 200ms $ease-out-quad,
+                 background-image 200ms $ease-out-quad,
+                 border-radius 200ms $ease-out-quad;
+
+listview,
+list {
+  color: $view_fg_color;
+  background-color: $view_bg_color;
+  background-clip: padding-box;
+  border-color: $border_color;
+
+  > row {
+    padding: $base_padding / 2;
+    background-clip: padding-box;
+  }
+
+  > row.expander { padding: 0px; }
+  > row.expander .row-header { padding: $base_padding / 2; }
+
+  &.horizontal row.separator,
+  &.separators.horizontal > row:not(.separator) {
+    border-left: 1px solid $border_color;
+  }
+
+  &:not(.horizontal) row.separator,
+  &.separators:not(.horizontal) > row:not(.separator) {
+    border-bottom: 1px solid $border_color;
+  }
+}
+
+list.frame { border-radius: $button_radius; }
+
+listview > header {
+  @extend .heading;
+  padding: $base_padding / 2;
+  padding-top: $base_padding * 3;
+  padding-bottom: $base_padding;
+}
+
+row {
+  @include focus-ring();
+
+  .osd & {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    &.activatable {
+      &:hover { background-color: $hover_color; }
+
+      &:active { background-color: $active_color; }
+
+      // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+      &.has-open-popup { background-color: $hover_color; }
+
+      &:selected {
+        &:hover { background-color: $selected_hover_color; }
+
+        &:active { background-color: $selected_active_color; }
+
+        &.has-open-popup { background-color: $selected_hover_color; }
+      }
+    }
+
+    &:selected {
+      background-color: $selected_color;
+    }
+  }
+
+  background-clip: padding-box;
+
+  &.activatable {
+    transition: $transition,
+                background-size $ripple_fade_out_duration $ease_out,
+                background-image $ripple_fade_out_opacity_duration $ease_out,
+                font-weight 0;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
+
+    &:hover { background-color: $view_hover_color; }
+
+    &:active {
+      transition: $transition,
+                  background-size 0ms,
+                  background-image 0ms,
+                  font-weight 0ms;
+      animation: ripple $ripple_fade_in_duration $ease_out forwards;
+      background-image: radial-gradient(circle, $view_hover_color 10%, transparent 0%);
+      background-size: 0% 0%;
+      background-color: $view_hover_color;
+      box-shadow: none;
+    }
+
+    // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+    &.has-open-popup { background-color: $view_hover_color; }
+
+    &:selected {
+      &:hover { background-color: $view_selected_hover_color; }
+
+      &:active { background-color: $view_selected_active_color; }
+
+      &.has-open-popup { background-color: $view_selected_hover_color; }
+    }
+  }
+
+  &:selected {
+    background-color: $view_selected_color;
+  }
+}
+
+/*******************************************************
+ * Rich Lists                                          *
+ * Large list usually containing lots of widgets       *
+ * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073    *
+ *******************************************************/
+
+.rich-list { /* rich lists usually containing other widgets than just labels/text */
+  > row {
+    padding: $base_padding + 2px $base_padding * 2;
+    min-height: 32px; /* should be tall even when only containing a label */
+
+    > box {
+      border-spacing: 12px;
+    }
+  }
+
+  > header {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+/****************
+ * AdwActionRow *
+ ****************/
+
+row {
+  label.subtitle {
+    font-size: smaller;
+    @extend .dim-label;
+  }
+
+  > box.header {
+    margin-left: 12px;
+    margin-right: 12px;
+    border-spacing: 6px;
+    min-height: 50px;
+
+    > .icon:disabled {
+      filter: opacity($disabled_opacity);
+    }
+
+    > box.title {
+      margin-top: 6px;
+      margin-bottom: 6px;
+      border-spacing: 3px;
+      padding: 0;
+
+      // Specificity bump for header bar
+      &,
+      > .title,
+      > .subtitle {
+        padding: 0;
+        font-weight: inherit;
+      }
+    }
+
+    > .prefixes,
+    > .suffixes {
+      border-spacing: 6px;
+    }
+
+    > .icon,
+    > .prefixes {
+      &:dir(ltr) { margin-right: 6px; }
+      &:dir(rtl) { margin-left: 6px; }
+    }
+  }
+
+  &.property > box.header > box.title > {
+    .title {
+      font-size: smaller;
+      @extend .dim-label;
+    }
+
+    .subtitle {
+      font-size: inherit;
+      opacity: 1;
+    }
+  }
+}
+
+/******************************
+ * AdwEntryRow and AdwSpinRow *
+ ******************************/
+
+row.entry {
+  &:disabled {
+    text {
+      opacity: $disabled_opacity;
+    }
+
+    .dim-label, .subtitle {
+      opacity: 1;
+    }
+  }
+
+  .edit-icon, .indicator {
+    min-width: 24px;
+    min-height: 24px;
+    padding: 5px;
+  }
+
+  .edit-icon:disabled {
+    opacity: $strong_disabled_opacity;
+  }
+
+  .indicator {
+    opacity: $dimmer_opacity;
+  }
+
+  &.monospace {
+    font-family: inherit;
+
+    text {
+      font-family: monospace;
+    }
+  }
+}
+
+row.spin {
+  spinbutton {
+    background: none;
+    border-spacing: 6px;
+    box-shadow: none;
+
+    &, &:focus {
+      outline: none;
+    }
+
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &, &:dir(ltr):last-child, &:dir(rtl):first-child {
+        @extend %button_basic;
+        @extend %circular_button;
+        min-width: 30px;
+        min-height: 30px;
+        margin: 10px 2px;
+        border: none;
+      }
+    }
+  }
+
+  &:disabled spinbutton {
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &, &:dir(ltr):last-child, &:dir(rtl):first-child {
+        &:disabled {
+          filter: none;
+        }
+      }
+    }
+  }
+}
+
+row.entry,
+row.spin {
+  @include focus-ring($focus-state: '.focused', $offset: -1px, $transition: $row_transition);
+
+  &:not(:selected).activatable.focused:hover,
+  &:not(:selected).activatable.focused:active {
+    background-color: transparent;
+  }
+
+  @each $e_type, $e_color, $e_bg_color, $e_fg_color in (error,   $error_color,   $error_bg_color,   $error_fg_color),
+                                                       (warning, $warning_color, $warning_bg_color, $warning_fg_color),
+                                                       (success, $success_color, $success_bg_color, $success_fg_color) {
+    &.#{$e_type} {
+      @include focus-ring($focus-state: '.focused', $offset: -1px, $fc: gtkalpha(currentColor, $focus_border_opacity), $transition: $row_transition);
+
+      text {
+        > selection:focus-within { background-color: gtkalpha($e_color, .2); }
+
+        > cursor-handle > contents { background-color: currentColor; }
+      }
+
+      .dim-label, .subtitle {
+        opacity: 1;
+      }
+
+      .suggested-action {
+        background-color: $e_bg_color;
+        color: $e_fg_color;
+      }
+    }
+  }
+}
+
+/***************
+ * AdwComboRow *
+ ***************/
+
+row.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;
+
+    .combo-searchbar {
+      margin: 6px;
+
+      + scrolledwindow {
+        @include undershoot(top, $popover_shade_color);
+      }
+    }
+  }
+}
+
+/******************
+ * AdwExpanderRow *
+ ******************/
+
+@mixin margin-start($margin) {
+  &:dir(ltr) {
+    margin-left: $margin;
+  }
+
+  &:dir(rtl) {
+    margin-right: $margin;
+  }
+}
+
+%boxed_list {
+  background-color: $card_bg_color;
+  color: $card_fg_color;
+  border-radius: $button_radius;
+  box-shadow: 0 0 0 1px $border_color;
+}
+
+%boxed_list_row {
+  @include focus-ring($offset: -1px, $transition: $row_transition);
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
+  border-bottom: 1px solid gtkalpha(currentColor, .08);
+
+  &:not(:selected).activatable {
+    &:hover {
+      background-color: gtkalpha(currentColor, .03);
+    }
+
+    &:active {
+      background-color: gtkalpha(currentColor, .08);
+    }
+
+    &.has-open-popup {
+      background-color: gtkalpha(currentColor, .03);
+    }
+  }
+}
+
+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: gtkalpha($card_shade_color, .5);
+    color: inherit;
+  }
+
+  list.nested > row {
+    @extend %boxed_list_row;
+  }
+
+  // AdwExpanderRow arrow rotation
+
+  image.expander-row-arrow {
+    @extend .dim-label;
+
+    transition: -gtk-icon-transform 200ms $ease-out-quad;
+    @include margin-start(3px);
+
+    &:dir(ltr) {
+      -gtk-icon-transform: rotate(0.5turn);
+    }
+
+    &:dir(rtl) {
+      -gtk-icon-transform: rotate(-0.5turn);
+    }
+
+    &:disabled {
+      filter: opacity($disabled_opacity);
+    }
+  }
+
+  &:checked image.expander-row-arrow {
+    -gtk-icon-transform: rotate(0turn);
+    opacity: 1;
+
+    &:not(:disabled) {
+      color: $accent_color;
+    }
+  }
+
+  .osd &:checked image.expander-row-arrow:not(:disabled) {
+    color: inherit;
+  }
+
+  &.property box > list > row {
+    @extend .property;
+  }
+}
+
+/***************
+ * AdwButtonRow *
+ ***************/
+
+row.button {
+  > box {
+    margin-left: 12px;
+    margin-right: 12px;
+    border-spacing: 6px;
+    min-height: 50px;
+  }
+
+  .title {
+    @extend .heading;
+  }
+
+  &.suggested-action {
+    color: $accent_color;
+  }
+
+  &.destructive-action {
+    color: $destructive_color;
+  }
+}
+
+/*****************
+ * Boxed Lists *
+ *****************/
+
+list.boxed-list {
+  @extend %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: $button_radius;
+        border-top-right-radius: $button_radius;
+      }
+    }
+
+    // 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: $button_radius;
+        border-bottom-right-radius: $button_radius;
+        border-bottom-width: 0;
+      }
+    }
+  }
+}
+
+list.boxed-list-separate {
+  background: none;
+  color: $card_fg_color;
+
+  > row {
+    @extend %boxed_list;
+    border: none;
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    @include focus-ring($offset: -1px, $transition: $row_transition);
+
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    &:not(.expander) {
+      &:not(:selected).activatable {
+        &:hover {
+          background-color: $card_bg_color;
+          background-image: image(gtkalpha(currentColor, .03));
+        }
+
+        &:active {
+          background-color: $card_bg_color;
+          background-image: image(gtkalpha(currentColor, .08));
+        }
+
+        &.has-open-popup {
+          background-color: $card_bg_color;
+          background-image: image(gtkalpha(currentColor, .03));
+        }
+      }
+    }
+
+    &.entry, &.spin {
+      &:not(:selected).activatable.focused:hover,
+      &:not(:selected).activatable.focused:active {
+        background-color: $card_bg_color;
+        background-image: none;
+      }
+
+      @each $e_type, $e_color in (error,   $error_color),
+                                 (warning, $warning_color),
+                                 (success, $success_color) {
+        &.#{$e_type} {
+          color: $e_color;
+        }
+      }
+    }
+
+    &.expander {
+      row.header {
+        @extend %boxed_list_row;
+        border-top-left-radius: $button_radius;
+        border-top-right-radius: $button_radius;
+      }
+
+      &:not(:checked) row.header,
+      &.expander:checked list.nested,
+      &.expander:checked list.nested > row:last-child {
+        border-bottom-left-radius: $button_radius;
+        border-bottom-right-radius: $button_radius;
+        border-bottom: none;
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_menus.scss

@@ -0,0 +1,252 @@
+popover.menu {
+  > contents {
+    min-width: 120px;
+  }
+
+  scrollbar.vertical > range > trough > slider {
+    min-height: 30px;
+  }
+
+  box.inline-buttons {
+    padding: 0 $menu_padding;
+
+    button.image-button.model {
+      @extend %button_basic_flat;
+      min-height: 32px;
+      min-width: 32px;
+      padding: 0;
+      border: none;
+      outline: none;
+      transition: none;
+
+      &:selected {
+        background-color: $selected_color;
+
+        &:active {
+          background-color: $selected_active_color;
+        }
+      }
+    }
+  }
+
+  box.circular-buttons {
+    padding: $menu_padding $menu_padding $base_padding;
+
+    button.circular.image-button.model {
+      @extend %button_basic_flat;
+      outline: none;
+      padding: 11px;
+      box-shadow: inset 0 0 0 1px $border_color;
+
+      &:selected {
+        background-color: $selected_hover_color;
+
+        &:active {
+          background-color: $selected_active_color;
+        }
+      }
+    }
+  }
+
+  > contents {
+    padding: 0;
+
+    &, > scrolledwindow > viewport {
+      > stack > box {
+        padding: $menu_margin;
+      }
+    }
+  }
+
+  separator {
+    margin: $base_padding 0;
+  }
+
+  list separator {
+    margin: 0;
+  }
+
+  accelerator {
+    color: gtkalpha(currentColor, $dim_label_opacity);
+
+    &:dir(ltr) { margin-left: $menu_padding; }
+    &:dir(rtl) { margin-right: $menu_padding; }
+  }
+
+  check,
+  radio {
+    min-width: 16px;
+    min-height: 16px;
+    -gtk-icon-size: 16px;
+    padding: 0;
+
+    &,
+    &:hover:checked,
+    &:hover:indeterminate,
+    &:hover:not(:checked):not(:indeterminate),
+    &:active:checked,
+    &:active:indeterminate,
+    &:active:not(:checked):not(:indeterminate), {
+      background: none;
+      box-shadow: none;
+      color: inherit;
+    }
+  }
+
+  radio {
+    &:checked, &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/menu-radio-symbolic.svg")), -gtk-recolor(url("assets/menu-radio-symbolic@2.svg"))); }
+  }
+
+  .osd & {
+    check, radio {
+      background: none;
+      color: inherit;
+    }
+  }
+
+  radio, check {
+    padding: 0;
+    border: 1px solid gtkalpha(currentColor, $dimmer_opacity);
+  }
+
+  check,
+  radio,
+  arrow {
+    &.left {
+      margin-left: -2px;
+      margin-right: $base_padding;
+    }
+
+    &.right {
+      margin-left: $base_padding;
+      margin-right: -2px;
+    }
+  }
+
+  modelbutton {
+    min-height: 32px;
+    min-width: 40px;
+    padding: 0 $menu_padding;
+    border-radius: $menuitem_radius;
+    @include button(flat-normal);
+
+    &:focus:not(:hover):not(:active) {
+      outline: none;
+      background: none;
+      transition: none;
+    }
+
+    &:hover,
+    &:selected { @include button(flat-hover); }
+
+    &:active { @include button(flat-active); }
+
+    arrow {
+      background: none;
+      min-width: 16px;
+      min-height: 16px;
+      opacity: $dimmer_opacity;
+
+      &:hover { background: none; }
+
+      &:disabled {
+        filter: opacity($disabled_opacity);
+      }
+
+      &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
+
+      &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
+    }
+  }
+
+  label.title {
+    font-weight: bold;
+    padding: 4px ($menu_padding + 20px); //this will fall apart with font sizing
+  }
+
+  list, listview {
+    background: none;
+    color: inherit;
+
+    > row {
+      border-radius: $menuitem_radius;
+      padding: 0 $menu_padding;
+      min-height: $menuitem_size;
+      min-width: $large_size;
+
+      &:selected {
+        background: none;
+      }
+
+      &:hover {
+        &, &:selected.activatable {
+          background-color: $selected_color;
+        }
+      }
+
+      &:active {
+        &, &:selected.activatable {
+          background-color: $selected_active_color;
+        }
+      }
+
+      &.has-open-popup {
+        &, &:selected.activatable {
+          background-color: $selected_color;
+        }
+      }
+
+      > box {
+        border-spacing: $base_padding;
+      }
+    }
+  }
+
+  // Standalone lists should have same margins as menu sections,
+  // but we don't want that on lists inside sections themselves
+  contents > list,
+  contents > listview,
+  scrolledwindow > viewport > list,
+  scrolledwindow > listview {
+    padding: $menu_margin 0; //only vertical padding. horizontal row size would clip
+
+    > row {
+      margin: 0 $menu_margin;
+
+      padding: $menu_padding;
+      min-height: 0;
+    }
+  }
+}
+
+menubar {
+  box-shadow: inset 0 -1px $border_color;
+  padding-bottom: 1px;
+
+  > item {
+    min-height: 16px;
+    padding: 4px 8px;
+    border-radius: $button_radius;
+
+    &:selected { //Seems like it :hover even with keyboard focus
+      background-color: $selected_color;
+    }
+
+    //nested submenus
+    popover.menu popover.menu {
+      padding: 0 0 4px 0;
+    }
+
+    popover.menu popover.menu > contents {
+      margin: 0;
+      border-radius: $popover_radius; //including top
+    }
+  }
+}
+
+%menubar-inline {
+  box-shadow: none;
+  padding-bottom: 0;
+}
+
+%menubar-shrunk {}

src/sass/libadwaita/widgets/_message-dialog.scss

@@ -0,0 +1,155 @@
+/********************
+ * GtkMessageDialog *
+ ********************/
+
+window.dialog.message {
+  .titlebar {
+    min-height: 20px;
+    background: none;
+    box-shadow: none;
+    border-style: none;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+  }
+
+  box.dialog-vbox.vertical {
+    margin-top: 6px;
+    border-spacing: 24px;
+
+    > box > box > box > label.title {
+      font-weight: 800;
+      font-size: 15pt;
+    }
+  }
+
+  &.csd {
+    // bigger radius for better antialiasing
+    border-bottom-left-radius: $window_radius+1;
+    border-bottom-right-radius: $window_radius+1;
+
+    .dialog-action-area {
+      border-top: 1px solid $border_color;
+      margin: 0;
+      border-spacing: 0;
+
+      > button {
+        @extend %button_basic_flat;
+        padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
+        border-radius: 0;
+        border: none;
+        background-clip: padding-box;
+        border-left: 1px solid $border_color;
+
+        &:first-child {
+          border-bottom-left-radius: $window_radius+1;
+          border-left: none;
+        }
+
+        &:last-child {
+          border-bottom-right-radius: $window_radius+1;
+        }
+
+        &.suggested-action {
+          color: $accent_color;
+        }
+
+        &.destructive-action {
+          color: $destructive_color;
+        }
+      }
+    }
+  }
+}
+
+/********************
+ * AdwMessageDialog *
+ ********************/
+
+window.messagedialog,
+dialog-host > dialog.alert sheet,
+window.dialog-window.alert {
+  background-color: $dialog_bg_color;
+  color: $dialog_fg_color;
+}
+
+dialog-host > dialog.alert.floating sheet,
+window.dialog-window.alert {
+  border-radius: $window_radius+1;
+  outline: none;
+}
+
+window.messagedialog,
+dialog.alert {
+  .message-area {
+    padding: 24px 30px;
+    border-spacing: 24px;
+
+    &.has-heading.has-body {
+      border-spacing: 10px;
+    }
+  }
+
+  .response-area > button {
+    padding: 10px 14px;
+    border-radius: 0;
+
+    &.suggested {
+      color: $accent_color;
+    }
+
+    &.destructive {
+      color: $destructive_color;
+    }
+  }
+
+ .response-area {
+    &:not(.compact) > button {
+      margin-top: -1px;
+      margin-right: -1px;
+      margin-left: -1px;
+
+      &:first-child:dir(ltr),
+      &:last-child:dir(rtl) {
+        margin-left: 0;
+      }
+
+      &:last-child:dir(ltr),
+      &:first-child:dir(rtl) {
+        margin-right: 0;
+      }
+    }
+
+    &.compact > button {
+      margin-top: -1px;
+      margin-bottom: -1px;
+
+      &:first-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+window.messagedialog,
+dialog.alert.floating {
+ .response-area {
+    &:not(.compact) > button {
+      &:first-child:dir(ltr),
+      &:last-child:dir(rtl) {
+        border-bottom-left-radius: $window_radius+1;
+      }
+
+      &:last-child:dir(ltr),
+      &:first-child:dir(rtl) {
+        border-bottom-right-radius: $window_radius+1;
+      }
+    }
+
+    &.compact > button {
+      &:first-child {
+        border-bottom-left-radius: $window_radius+1;
+        border-bottom-right-radius: $window_radius+1;
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_misc.scss

@@ -0,0 +1,215 @@
+/**********
+ * Frames *
+ **********/
+frame,
+.frame {
+  border: 1px solid $border_color;
+}
+
+frame {
+  border-radius: $button_radius;
+
+  > label {
+    margin: $base_padding / 2 + 1px;
+  }
+}
+
+/**************
+ * Separators *
+ **************/
+
+separator {
+  background: $border_color;
+  min-width: 1px;
+  min-height: 1px;
+
+  &.spacer {
+    background: none;
+
+    &.horizontal { min-width: 12px; }
+    &.vertical { min-height: 12px; }
+  }
+}
+
+/*********************
+ * App Notifications *
+ *********************/
+
+.app-notification {
+  @extend %osd;
+
+  padding: 10px;
+  border-spacing: 10px;
+  border-radius: 0 0 $card_radius $card_radius;
+  background-color: $osd_bg_color;
+  background-image: linear-gradient(to bottom, transparentize(black, 0.8),
+                                               transparent 2px);
+  background-clip: padding-box;
+
+  border { border: none; }
+}
+
+/**********
+ * Toasts *
+ **********/
+
+toast {
+  @extend %osd;
+  margin: $base_padding * 2;
+  margin-bottom: $base_padding * 4;
+  border-radius: 150px;
+  border-spacing: $base_padding;
+  padding: $base_padding;
+
+  &:dir(ltr) { padding-left: $base_padding * 2; }
+  &:dir(rtl) { padding-right: $base_padding * 2; }
+
+  > widget {
+    margin: 0 $base_padding;
+  }
+}
+
+/**************
+ * GtkVideo *
+ **************/
+
+video {
+  & image.osd {
+    min-width: 64px;
+    min-height: 64px;
+    border-radius: 32px;
+  }
+}
+
+/******************
+ * AdwAboutWindow *
+ ******************/
+
+window.about,
+dialog.about {
+  .main-page {
+    > viewport > clamp > box {
+      margin: $base_padding * 2;
+      border-spacing: $base_padding;
+
+      > box {
+        margin-top: 18px;
+        border-spacing: 18px;
+        margin-bottom: $base_padding;
+      }
+    }
+
+    .app-version {
+      padding: $base_padding / 2 $base_padding * 3;
+      color: $accent_color;
+      border-radius: $circular_radius;
+      margin-top: $base_padding / 2;
+    }
+  }
+
+  .subpage {
+    > viewport > clamp > box {
+      margin: 18px 12px;
+      border-spacing: 18px;
+    }
+
+    > clamp > textview {
+      background: none;
+      color: inherit;
+    }
+  }
+}
+
+/*****************
+ * AdwStatusPage *
+ *****************/
+
+statuspage {
+  > scrolledwindow > viewport > box {
+    margin: 36px 12px;
+    border-spacing: 36px;
+
+    > clamp > box {
+      border-spacing: $base_padding * 2;
+
+      > .icon {
+        -gtk-icon-size: 128px;
+
+        color: gtkalpha(currentColor, $dim_label_opacity);
+
+        &: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: 12px;
+        }
+      }
+
+      > .title {
+        font-size: 18pt;
+      }
+    }
+  }
+}
+
+/* Cards */
+
+.card {
+  @at-root %card, & {
+    background-color: $card_bg_color;
+    color: $card_fg_color;
+    border-radius: $card_radius;
+    box-shadow: 0 0 0 1px $border;
+
+    .osd &, &.osd {
+      background-color: gtkalpha(currentColor, .1);
+      color: inherit;
+      box-shadow: none;
+    }
+  }
+
+  @include focus-ring($offset: -1px);
+
+  .osd &, &.osd {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+  }
+
+  &.activatable {
+    transition: $focus_transition, $button_transition;
+
+    &:hover {
+      background-image: image(gtkalpha(currentColor, .03));
+    }
+
+    &:active {
+      background-image: image(gtkalpha(currentColor, .08));
+    }
+  }
+}
+
+/* Transition shadows */
+
+flap,
+leaflet,
+navigation-view,
+overlay-split-view {
+  @include transition-shadows($shade_color);
+}

src/sass/libadwaita/widgets/_notebook.scss

@@ -0,0 +1,216 @@
+notebook {
+  @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: ':focus:focus-visible');
+
+  > header {
+    padding: 1px;
+    border-color: $border_color;
+    border-width: 1px;
+    background-clip: padding-box;
+
+    > tabs { margin: -1px; }
+
+    &.top {
+      border-bottom-style: solid;
+      > tabs {
+        margin-bottom: -2px;
+        > tab {
+          &:hover { box-shadow: inset 0 -4px $border_color; }
+
+          &:checked { box-shadow: inset 0 -4px $accent_bg_color; }
+        }
+      }
+    }
+
+    &.bottom {
+      border-top-style: solid;
+      > tabs {
+        margin-top: -2px;
+        > tab {
+          &:hover { box-shadow: inset 0 4px $border_color; }
+
+          &:checked { box-shadow: inset 0 4px $accent_bg_color; }
+        }
+      }
+    }
+
+    &.left {
+      border-right-style: solid;
+      > tabs {
+        margin-right: -2px;
+        > tab {
+          &:hover { box-shadow: inset -4px 0 $border_color; }
+
+          &:checked { box-shadow: inset -4px 0 $accent_bg_color; }
+        }
+      }
+    }
+
+    &.right {
+      border-left-style: solid;
+      > tabs {
+        margin-left: -2px;
+        > tab {
+          &:hover { box-shadow: inset 4px 0 $border_color; }
+
+          &:checked { box-shadow: inset 4px 0 $accent_bg_color; }
+        }
+      }
+    }
+
+    &.top > tabs > arrow {
+      @extend %notebook_vert_arrows;
+
+      border-top-style: none;
+    }
+
+    &.bottom > tabs > arrow {
+      @extend %notebook_vert_arrows;
+
+      border-bottom-style: none;
+    }
+
+    @at-root %notebook_vert_arrows {
+      margin-left: -5px;
+      margin-right: -5px;
+      padding-left: 4px;
+      padding-right: 4px;
+
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+    }
+
+    &.left > tabs > arrow {
+      @extend %notebook_horz_arrows;
+
+      border-left-style: none;
+    }
+
+    &.right > tabs > arrow {
+      @extend %notebook_horz_arrows;
+
+      border-right-style: none;
+    }
+
+    @at-root %notebook_horz_arrows {
+      margin-top: -5px;
+      margin-bottom: -5px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+    }
+
+    > tabs > arrow {
+      @extend %button_basic;
+      @extend %button_basic_flat;
+
+      min-height: 16px;
+      min-width: 16px;
+      border-radius: 0;
+
+      &:hover:not(:active) {
+        box-shadow: none;
+      }
+    }
+
+    > tabs > tab {
+      transition: $focus_transition;
+      min-height: 30px;
+      min-width: 30px;
+      padding: 3px 12px;
+
+      font-weight: normal;
+
+      &:hover, &:active {
+        background-color: $hover_color;
+      }
+
+      &:not(:checked) {
+        outline-color: transparent;
+      }
+
+      &:disabled {
+        filter: opacity($disabled_opacity);
+
+        label, button {
+          filter: none;
+        }
+      }
+
+      // colors the button like the label, overridden otherwise
+      button.flat {
+        color: gtkalpha(currentColor, 0.3);
+        &:hover, &:active { color: currentColor; }
+
+        padding: 0;
+        margin-top: 4px;
+        margin-bottom: 4px;
+        // FIXME: generalize .small-button?
+        min-width: 20px;
+        min-height: 20px;
+
+        &:last-child {
+          margin-left: 4px;
+          margin-right: -4px;
+        }
+
+        &:first-child {
+          margin-left: -4px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    &.top,
+    &.bottom {
+      > tabs {
+        padding-left: 4px;
+        padding-right: 4px;
+
+        &:not(:only-child) {
+          margin-left: 3px;
+          margin-right: 3px;
+
+          &:first-child { margin-left: -1px; }
+          &:last-child { margin-right: -1px; }
+        }
+
+        > tab {
+          margin-left: 4px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    &.left,
+    &.right {
+      > tabs {
+        padding-top: 4px;
+        padding-bottom: 4px;
+
+        &:not(:only-child) {
+          margin-top: 3px;
+          margin-bottom: 3px;
+
+          &:first-child { margin-top: -1px; }
+          &:last-child { margin-bottom: -1px; }
+        }
+
+        > tab {
+          margin-top: 4px;
+          margin-bottom: 4px;
+        }
+      }
+    }
+
+    &.top > tabs > tab { padding-bottom: 4px; }
+    &.bottom > tabs > tab { padding-top: 4px; }
+  }
+
+  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+    background-color: $view_bg_color;
+  }
+}

src/sass/libadwaita/widgets/_paned.scss

@@ -0,0 +1,46 @@
+paned {
+  > separator {
+    min-width: 1px;
+    min-height: 1px;
+    background: none;
+    background-size: 1px 1px;
+
+    &.wide {
+      min-width: 5px;
+      min-height: 5px;
+    }
+  }
+
+  &.horizontal > separator {
+    &:dir(ltr) {
+      margin: 0 -8px 0 0;
+      padding: 0 8px 0 0;
+      box-shadow: inset 1px 0 $border_color;
+    }
+    &:dir(rtl) {
+      margin: 0 0 0 -8px;
+      padding: 0 0 0 8px;
+      box-shadow: inset -1px 0 $border_color;
+    }
+
+    &.wide {
+      margin: 0;
+      padding: 0;
+      box-shadow: inset  1px 0 $border_color,
+                  inset -1px 0 $border_color;
+    }
+  }
+
+  &.vertical > separator {
+    margin: 0 0 -8px 0;
+    padding: 0 0 8px 0;
+    box-shadow: inset 0 1px $border_color;
+
+    &.wide {
+      margin: 0;
+      padding: 0;
+      box-shadow: inset 0  1px $border_color,
+                  inset 0 -1px $border_color;
+    }
+  }
+}

src/sass/libadwaita/widgets/_popovers.scss

@@ -0,0 +1,95 @@
+toolbarview.undershoot-top    popover scrolledwindow undershoot.top,
+toolbarview.undershoot-bottom popover scrolledwindow undershoot.bottom {
+  background: none;
+  box-shadow: none;
+}
+
+popover {
+  &.background {
+    background-color: transparent;
+    font: initial;
+  }
+
+  > arrow,
+  > contents {
+    background-color: $popover_bg_color;
+    color: $popover_fg_color;
+    background-clip: border-box;
+
+    @if $rimless == 'true' {
+      border: none;
+      box-shadow: 0 1px 5px 1px transparentize(black, .91),
+                  0 2px 14px 3px transparentize(black, .95);
+    } @else {
+      border: 1px solid gtkmix(white, $popover_bg_color, 8%);
+      box-shadow: 0 1px 5px 1px transparentize(black, .91),
+                  0 2px 14px 3px transparentize(black, .95),
+                  0 0 0 1px $headerbar_darker_shade_color;
+    }
+  }
+
+  > contents {
+    padding: $base_padding;
+    border-radius: $popover_radius;
+
+    > list,
+    > .view,
+    > toolbar {
+      border-style: none;
+      background-color: transparent;
+    }
+
+    separator {
+      background-color: gtkalpha(currentColor, 0.08);
+    }
+  }
+
+  .osd &,
+  &.touch-selection,
+  &.magnifier {
+    background-color: transparent;
+
+    > arrow,
+    > contents {
+      @extend %osd;
+
+      border: 1px solid transparentize(white, 0.9);
+      box-shadow: none;
+    }
+  }
+
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $popover_shade_color);
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $popover_shade_color);
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top, $popover_shade_color);
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom, $popover_shade_color)
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left, $popover_shade_color); }
+      &:dir(rtl) { @include undershoot(right, $popover_shade_color); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right, $popover_shade_color); }
+      &:dir(rtl) { @include undershoot(left, $popover_shade_color); }
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($popover_shade_color);
+  }
+}

src/sass/libadwaita/widgets/_preferences.scss

@@ -0,0 +1,18 @@
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+preferencesgroup > box {
+  &, .labels {
+    border-spacing: $base_padding;
+  }
+
+  > box.header:not(.single-line) {
+    margin-bottom: $base_padding;
+  }
+
+  > box.single-line {
+    min-height: 34px;
+  }
+}

src/sass/libadwaita/widgets/_progress-bar.scss

@@ -0,0 +1,93 @@
+progressbar {
+  // sizing
+  &.horizontal {
+    > trough {
+      min-width: 150px;
+      &, > progress { min-height: 8px; }
+    }
+  }
+
+  &.vertical {
+    > trough {
+      min-height: 80px;
+      &, > progress { min-width: 8px; }
+    }
+  }
+
+  > text {
+    @extend .dim-label;
+    @extend .numeric;
+    font-size: smaller;
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  > trough {
+    @extend %scale_trough;
+
+    > progress {
+      @extend %scale_highlight; /* share most of scales' */
+
+      $_progress-radius: 99px;
+
+      border-radius: $_progress-radius;
+
+      &.left {
+        border-top-left-radius: $_progress-radius;
+        border-bottom-left-radius: $_progress-radius;
+      }
+
+      &.right {
+        border-top-right-radius: $_progress-radius;
+        border-bottom-right-radius: $_progress-radius;
+      }
+
+      &.top {
+        border-top-right-radius: $_progress-radius;
+        border-top-left-radius: $_progress-radius;
+      }
+
+      &.bottom {
+        border-bottom-right-radius: $_progress-radius;
+        border-bottom-left-radius: $_progress-radius;
+      }
+    }
+  }
+
+  &.osd {
+    // Thin progress bar with no trough, usually goes under the header bar
+    min-width: 2px;
+    min-height: 2px;
+    background-color: transparent;
+    color: inherit;
+
+    > trough {
+      border-style: none;
+      border-radius: 0;
+      background-color: transparent;
+      box-shadow: none;
+
+      > progress {
+        border-style: none;
+        border-radius: 0;
+      }
+
+    }
+
+    &.horizontal {
+      > trough, > trough > progress { min-height: 2px; }
+    }
+
+    &.vertical {
+      > trough, > trough > progress { min-width: 2px; }
+    }
+  }
+
+  > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
+
+  .osd & > trough > progress {
+    background-color: $osd_fill_bg_color;
+  }
+}

src/sass/libadwaita/widgets/_scale.scss

@@ -0,0 +1,229 @@
+$_slider_border_color: transparentize(black, .9);
+
+%scale_trough {
+  border-radius: $circular_radius;
+  background-color: $trough_color;
+}
+
+%scale_highlight {
+  border-radius: $circular_radius;
+  background-color: $fill_color;
+  color: $fill_text_color;
+}
+
+scale {
+  // sizing
+  $_marks_length: 6px;
+  $_marks_distance: 6px;
+
+  min-height: 10px;
+  min-width: 10px;
+  padding: 12px;
+
+  @include focus-ring("> trough > slider", $offset: 0);
+
+  > trough {
+    @extend %scale_trough;
+
+    // the colored part of the backing bit
+    > highlight { @extend %scale_highlight; }
+
+    // this is another differently styled part of the backing bit, the most relevant use case is for example
+    // in media player to indicate how much video stream as been cached
+    > fill {
+      @extend %scale_trough;
+    }
+
+    > slider {
+      background-color: $slider_color;
+      box-shadow: 0 0 0 2px $fill_color, 0 0 0 0 transparent;
+      border-radius: 100%;
+      transition: $transition-shadow;
+
+      // the slider is inside the trough, so to have make it bigger there's a negative margin
+      min-width: 16px;
+      min-height: 16px;
+      margin: -7px;
+    }
+  }
+
+  &:hover, &:active {
+    > trough {
+      background-color: $trough_hover_color;
+
+      > highlight {
+        background-image: image(gtkalpha(currentColor, .1));
+      }
+
+      > slider {
+        background-color: $slider_hover_color;
+        box-shadow: 0 0 0 2px $fill_color, 0 0 0 8px gtkalpha($text_color, 0.12);
+      }
+    }
+  }
+
+  .osd & {
+    &:focus:focus-visible > trough {
+      outline-color: $osd_focus_color;
+    }
+
+    > trough > highlight {
+      background-color: $osd_fill_bg_color;
+      color: $osd_fill_fg_color;
+    }
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+
+    > trough > slider {
+      box-shadow: 0 0 0 2px gtkmix($fill_color, $window_bg_color, 50%);
+      outline-color: transparentize(black, .8);
+    }
+  }
+
+  // click-and-hold the slider to activate
+  &.fine-tune {
+    padding: 9px;
+
+    &.horizontal {
+      min-height: 16px;
+    }
+
+    &.vertical {
+      min-width: 16px;
+    }
+
+    > trough {
+      // to make the trough grow in fine-tune mode
+      > slider { margin: -5px; }
+    }
+  }
+
+  > value {
+    @extend .dim-label;
+    @extend .numeric;
+  }
+
+  &.marks-before:not(.marks-after),
+  &.marks-after:not(.marks-before) {
+    > trough > slider {
+      transform: rotate(45deg);
+
+      // Adjust box-shadow for the 45deg rotation, for 0px 2px we ideally want
+      // 1/√2px 1/√2px, round that to 1px 1px
+      box-shadow: 0 0 0 2px $fill_color;
+
+      &:disabled {
+        box-shadow: 0 0 0 2px gtkmix($fill_color, $window_bg_color, 50%);
+      }
+    }
+  }
+
+  &.horizontal {
+    > marks {
+      color: gtkalpha(currentColor, $dim_label_opacity);
+      &.top    { margin-bottom: $_marks_distance; }
+      &.bottom { margin-top: $_marks_distance; }
+
+      indicator {
+        background-color: currentColor;
+        min-height: $_marks_length;
+        min-width: 1px;
+      }
+    }
+
+    > value.left  { margin-right: 9px; }
+    > value.right { margin-left: 9px; }
+
+    &.fine-tune > marks {
+      &.top { margin-top: 3px; }
+      &.bottom { margin-bottom: 3px; }
+
+      indicator { min-height: ($_marks_length - 3px); }
+    }
+
+    &.marks-before {
+      padding-top: 0;
+
+       > trough > slider {
+        border-top-left-radius: 0;
+      }
+    }
+
+    &.marks-after {
+      padding-bottom: 0;
+
+      > trough > slider {
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &.marks-before.marks-after > trough > slider {
+      border-radius: 100%;
+    }
+  }
+
+  &.vertical {
+    > marks {
+      color: gtkalpha(currentColor, $dim_label_opacity);
+      &.top    { margin-right: $_marks_distance; }
+      &.bottom { margin-left: $_marks_distance; }
+
+      indicator {
+        background-color: currentColor;
+        min-height: 1px;
+        min-width: $_marks_length;
+      }
+    }
+
+    > value.top    { margin-bottom: 9px; }
+    > value.bottom { margin-top: 9px; }
+
+    &.fine-tune > marks {
+      &.top { margin-left: 3px; }
+      &.bottom { margin-right: 3px; }
+
+      indicator { min-height: ($_marks_length - 3px); }
+    }
+
+    &.marks-before {
+      padding-left: 0;
+
+      > trough > slider {
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &.marks-after {
+      padding-right: 0;
+
+      > trough > slider {
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  &.color {
+    padding: 0;
+
+    > trough {
+      border: none;
+      background: none;
+      border-radius: 10px;
+
+      > slider {
+        margin: 0;
+        background-color: transparentize(white, .2);
+      }
+    }
+
+    &.fine-tune {
+      padding: 2px;
+
+      > trough > slider {
+        margin: -2px;
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_scrolling.scss

@@ -0,0 +1,172 @@
+$osd_scrollbar_outline_color: transparentize(black, .5);
+
+scrollbar {
+  $_slider_min_length: 40px;
+  $_slider_width: 8px;
+  $_scrollbar_transition: all 200ms linear;
+
+  > range > trough {
+    margin: 7px;
+    transition: $_scrollbar_transition;
+    border-radius: 10px;
+
+    > slider {
+      min-width: $_slider_width;
+      min-height: $_slider_width;
+      margin: -6px;
+      border: 6px solid transparent;
+      border-radius: 10px;
+      background-clip: padding-box;
+      transition: $_scrollbar_transition;
+      background-color: gtkalpha(currentColor, .2);
+
+      &:hover { background-color: gtkalpha(currentColor, .4); }
+
+      &:active { background-color: gtkalpha(currentColor, .6); }
+
+      &:disabled { opacity: 0; }
+    }
+  }
+
+  &.horizontal > range > trough {
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+
+  &.vertical > range > trough {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+
+  &.overlay-indicator {
+    background: none;
+    color: inherit;
+    box-shadow: none;
+    padding: 0;
+
+    > range > trough {
+      outline: 1px solid transparent;
+
+      > slider {
+        outline: 1px solid gtkalpha($scrollbar_outline_color, .6);
+
+        .osd & {
+          outline: 1px solid gtkalpha($osd_scrollbar_outline_color, .6);
+        }
+
+        outline-offset: -6px;
+      }
+    }
+
+    &:not(.hovering) > range > trough > slider {
+      min-width: 3px;
+      min-height: 3px;
+      outline-color: gtkalpha($scrollbar_outline_color, .35);
+
+      .osd & {
+        outline-color: gtkalpha($osd_scrollbar_outline_color, .35);
+      }
+    }
+
+    &.hovering > range > trough {
+      background-color: gtkalpha(currentColor, .1);
+    }
+
+    &.horizontal {
+      > range > trough > slider {
+        min-width: $_slider_min_length;
+      }
+
+      &.hovering > range > trough > slider {
+        min-height: $_slider_width;
+      }
+
+      &:not(.hovering) > range > trough {
+        margin-top: 3px;
+        margin-bottom: 3px;
+      }
+    }
+
+    &.vertical {
+      > range > trough > slider {
+        min-height: $_slider_min_length;
+      }
+
+      &.hovering > range > trough > slider {
+        min-width: $_slider_width;
+      }
+
+      &:not(.hovering) > range > trough {
+        margin-left: 3px;
+        margin-right: 3px;
+      }
+    }
+  }
+
+  &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
+  &.vertical > range > trough > slider { min-height: $_slider_min_length; }
+
+  > range.fine-tune > trough > slider {
+    &, &:hover, &:active {
+      background-color: gtkalpha($accent_color, .6);
+    }
+  }
+}
+
+scrolledwindow {
+  // This is used when content is touch-dragged past boundaries.
+  // draws a box on top of the content, the size changes programmatically.
+  > overshoot {
+    &.top {
+      @include overshoot(top);
+    }
+
+    &.bottom {
+      @include overshoot(bottom);
+    }
+
+    &.left {
+      @include overshoot(left);
+    }
+
+    &.right {
+      @include overshoot(right);
+    }
+  }
+
+  &.undershoot-top {
+    @include undershoot(top);
+  }
+
+  &.undershoot-bottom {
+    @include undershoot(bottom);
+  }
+
+  &.undershoot-start {
+    &:dir(ltr) { @include undershoot(left); }
+    &:dir(rtl) { @include undershoot(right); }
+  }
+
+  &.undershoot-end {
+    &:dir(ltr) { @include undershoot(right); }
+    &:dir(rtl) { @include undershoot(left); }
+  }
+}
+
+toolbarview.undershoot-top scrolledwindow {
+  @include undershoot(top);
+}
+
+toolbarview.undershoot-bottom scrolledwindow {
+  @include undershoot(bottom);
+}
+
+.about {
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $style: frame);
+  }
+  
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $style: frame);
+  }
+}

src/sass/libadwaita/widgets/_shortcuts-window.scss

@@ -0,0 +1,55 @@
+shortcuts-section {
+  margin: 20px;
+}
+
+.shortcuts-search-results {
+  margin: 20px;
+  border-spacing: 24px;
+}
+
+// shortcut window keys
+shortcut {
+  border-spacing: 6px;
+  border-radius: 6px;
+  @include focus-ring($outer: true, $offset: 4px);
+
+  > .keycap {
+    min-width: 20px;
+    min-height: 25px;
+    padding: 2px 6px;
+
+    @extend %card;
+
+    border-radius: $button_radius;
+    font-size: smaller;
+  }
+}
+
+shortcuts-section stackswitcher.circular {
+  border-spacing: 12px;
+
+  > button.circular,
+  > button.text-button.circular {
+    min-width: 32px;
+    min-height: 32px;
+    padding: 0;
+  }
+}
+
+window.shortcuts {
+  headerbar.titlebar {
+    @extend .flat;
+    @extend %headerbar-shrunk;
+
+    > windowhandle {
+      padding-top: 3px;
+    }
+  }
+
+  searchbar {
+    @extend %searchbar-flat;
+    @extend %searchbar-shrunk;
+
+    background: none;
+  }
+}

src/sass/libadwaita/widgets/_sidebars.scss

@@ -0,0 +1,228 @@
+
+.sidebar-pane {
+  background-color: $sidebar_bg_color;
+  color: $sidebar_fg_color;
+
+  &:backdrop {
+    background-color: $sidebar_backdrop_color;
+    transition: background-color $backdrop_transition;
+  }
+
+  @if $rimless == 'true' {
+    headerbar {
+      border-top-right-radius: 0;
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($sidebar_shade_color);
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($accent_bg_color, $sidebar_bg_color, 30%);
+    color: $sidebar_fg_color;
+
+    &:backdrop {
+      background-color: gtkmix($accent_bg_color, $sidebar_backdrop_color, 15%);
+    }
+  }
+
+  &:dir(ltr), &.end:dir(rtl) {
+    &, banner > revealer > widget {
+      box-shadow: inset -1px 0 $sidebar_border_color;
+    }
+  }
+
+  &:dir(rtl), &.end:dir(ltr) {
+    &, banner > revealer > widget {
+      box-shadow: inset 1px 0 $sidebar_border_color;
+    }
+  }
+}
+
+.sidebar-pane, .content-pane {
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $sidebar_shade_color, $style: frame);
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $sidebar_shade_color, $style: frame);
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top, $sidebar_shade_color, $style: frame);
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom, $sidebar_shade_color, $style: frame);
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left, $sidebar_shade_color, $style: frame); }
+      &:dir(rtl) { @include undershoot(right, $sidebar_shade_color, $style: frame); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right, $sidebar_shade_color, $style: frame); }
+      &:dir(rtl) { @include undershoot(left, $sidebar_shade_color, $style: frame); }
+    }
+  }
+}
+
+/* Middle pane in three-pane setups */
+.content-pane .sidebar-pane,
+.sidebar-pane .content-pane {
+  background-color: $secondary_sidebar_bg_color;
+  color: $secondary_sidebar_fg_color;
+
+  &:backdrop {
+    background-color: $secondary_sidebar_backdrop_color;
+    transition: background-color $backdrop_transition;
+  }
+
+  @if $rimless == 'true' {
+    headerbar {
+      border-radius: 0;
+    }
+  }
+
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $secondary_sidebar_shade_color);
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $secondary_sidebar_shade_color);
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top, $secondary_sidebar_shade_color);
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom, $secondary_sidebar_shade_color)
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left, $secondary_sidebar_shade_color); }
+      &:dir(rtl) { @include undershoot(right, $secondary_sidebar_shade_color); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right, $secondary_sidebar_shade_color); }
+      &:dir(rtl) { @include undershoot(left, $secondary_sidebar_shade_color); }
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($secondary_sidebar_shade_color);
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($accent_bg_color, $secondary_sidebar_bg_color, 30%);
+    color: $secondary_sidebar_fg_color;
+
+    &:backdrop {
+      background-color: gtkmix($accent_bg_color, $secondary_sidebar_backdrop_color, 15%);
+    }
+  }
+
+  &:dir(ltr), &.end:dir(rtl) {
+    &, banner > revealer > widget {
+      box-shadow: inset -1px 0 $sidebar_border_color;
+    }
+  }
+
+  &:dir(rtl), &.end:dir(ltr) {
+    &, banner > revealer > widget {
+      box-shadow: inset 1px 0 $sidebar_border_color;
+    }
+  }
+}
+
+@if $rimless == 'true' {
+  .content-pane headerbar {
+    border-top-left-radius: 0;
+  }
+}
+
+.sidebar-pane .sidebar-pane {
+  background-color: transparent;
+  color: inherit;
+}
+
+stacksidebar row {
+  padding: 10px 4px;
+
+  > label {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  &.needs-attention > label {
+    @extend %needs_attention;
+    background-size: 6px 6px, 0 0;
+  }
+}
+
+/**********************
+ * Navigation Sidebar *
+ **********************/
+
+.navigation-sidebar {
+  &, &.view, &.view:disabled {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  &.background {
+    &, &:disabled {
+      background-color: $window_bg_color;
+      color: $window_fg_color;
+    }
+  }
+
+  row {
+    &.activatable {
+      &:hover { background-color: $hover_color; }
+
+      &:active { background-color: $active_color; }
+
+      // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+      &.has-open-popup { background-color: $hover_color; }
+
+      &:selected {
+        &:hover { background-color: $selected_hover_color; }
+
+        &:active { background-color: $selected_active_color; }
+
+        &.has-open-popup { background-color: $selected_hover_color; }
+      }
+    }
+
+    &:selected {
+      background-color: $selected_color;
+    }
+  }
+
+  padding: $menu_margin 0; //only vertical padding. horizontal row size would clip
+
+  > separator {
+    margin: $menu_margin;
+    background: none;
+  }
+
+  > row {
+    min-height: 36px;
+    padding: 0 8px;
+    border-radius: $menuitem_radius;
+    margin: 0 $menu_margin $base_padding / 2;
+  }
+}

src/sass/libadwaita/widgets/_spin-button.scss

@@ -0,0 +1,72 @@
+spinbutton {
+  @extend %entry;
+  @extend .numeric;
+
+  padding: 0;
+  border-spacing: 0;
+
+  /* :not here just to bump specificity above that of the list button styling */
+  > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+  > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    @extend %button_basic_flat;
+
+    margin: 0;
+
+    border-radius: 0;
+    box-shadow: none;
+
+    border-style: solid;
+    border-color: gtkalpha(currentColor, .1);
+  }
+
+  &:not(.vertical) {
+    > text {
+      min-width: 28px;
+      padding: 6px;
+    }
+
+    /* :not here just to bump specificity above that of the list button styling */
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      min-height: 16px;
+      min-width: 22px;
+      padding-bottom: 0;
+      padding-top: 0;
+      border-left-width: 1px;
+
+      &:dir(rtl) {
+        border-left-width: 0;
+        border-right-width: 1px;
+      }
+
+      &:dir(ltr):last-child {
+        border-radius: 0 $button_radius $button_radius 0;
+      }
+
+      &:dir(rtl):first-child {
+        border-radius: $button_radius 0 0 $button_radius;
+      }
+    }
+  }
+
+  &.vertical {
+    > text {
+      min-height: 30px;
+      min-width: 30px;
+    }
+
+    /* :not here just to bump specificity above that of the list button styling */
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &:last-child {
+        border-top-width: 1px;
+        border-radius: 0 0 $button_radius $button_radius;
+      }
+
+      &:first-child {
+        border-bottom-width: 1px;
+        border-radius: $button_radius $button_radius 0 0;
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_spinner.scss

@@ -0,0 +1,16 @@
+@keyframes spin {
+  to { transform: rotate(1turn); }
+}
+
+spinner {
+  background: none;
+  opacity: 0; // non spinning spinner makes no sense
+  -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
+
+  &:checked {
+    opacity: 1;
+    animation: spin 1s linear infinite;
+
+    &:disabled { opacity: $disabled_opacity; }
+  }
+}

src/sass/libadwaita/widgets/_switch.scss

@@ -0,0 +1,57 @@
+switch {
+  $switch_slider_color: white;
+
+  // similar to GtkScale
+  border-radius: $circular_radius;
+  padding: $base_padding / 2;
+  background-color: $trough_color;
+  transition: background-color $duration $ease_out;
+
+  &:hover { background-color: $trough_hover_color; }
+  &:active { background-color: $trough_active_color; }
+
+  @include focus-ring($offset: 1px, $outer: true);
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  > slider {
+    min-width: $small_size - 6px;
+    min-height: $small_size - 6px;
+    border-radius: 50%;
+    background-color: $switch_slider_color;
+    box-shadow: 0 2px 3px rgba(black, 0.15), 0 0 0 0 transparent;
+    transition: box-shadow 100ms $ease_out,
+                background-color $duration $ease_out;
+  }
+
+  &:hover > slider,
+  &:active > slider {
+    box-shadow: 0 2px 3px transparent, 0 0 0 6px gtkalpha(currentColor, .1);
+  }
+
+  &:checked {
+    color: $accent_fg_color;
+    background-color: $accent_bg_color;
+
+    &:hover { background-image: image(gtkalpha(currentColor, .1)); }
+    &:active { background-image: image(transparentize(black, .8)); }
+
+    > slider {
+      color: $window_fg_color;
+      background-color: $switch_slider_color;
+    }
+  }
+
+  .osd & {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    &:checked {
+      background-color: transparentize($osd_fill_bg_color, .15);
+      color: $osd_fill_fg_color;
+    }
+  }
+}

src/sass/libadwaita/widgets/_tab-view.scss

@@ -0,0 +1,236 @@
+tabbar {
+  .box {
+    background-color: $headerbar_bg_color;
+    color: $headerbar_fg_color;
+    box-shadow: inset 0 -1px $headerbar_border_color;
+    padding: 1px;
+    padding-top: 0;
+
+    &:backdrop {
+      background-color: $headerbar_backdrop_color;
+      transition: background-color $backdrop_transition;
+
+      > scrolledwindow,
+      > .start-action,
+      > .end-action {
+        filter: opacity(0.5);
+        transition: filter $backdrop_transition;
+      }
+    }
+  }
+
+  tabbox {
+    padding-bottom: $base_padding;
+    padding-top: $base_padding;
+    min-height: 34px;
+
+    > tabboxchild {
+      @include focus-ring($focus-state: ':focus-within:focus-visible');
+      border-radius: $button_radius;
+    }
+
+    > separator {
+      margin-top: 5px;
+      margin-bottom: 5px;
+      transition: opacity 150ms ease-in-out;
+
+      &.hidden {
+        opacity: 0;
+      }
+    }
+
+    > revealer > indicator {
+      min-width: 2px;
+      border-radius: 2px;
+      margin: 3px 6px;
+      background: gtkalpha($accent_color, 0.5);
+    }
+  }
+
+  tab {
+    transition: background 150ms ease-in-out;
+
+    &:selected {
+      background-color: $selected_color;
+
+      &:hover { background-color: $selected_hover_color; }
+      &:active { background-color: $selected_active_color; }
+    }
+
+    &:hover { background-color: $hover_color; }
+    &:active { background-color: $active_color; }
+  }
+
+  tabbox.single-tab tab {
+    &, &:hover, &:active {
+      background: none;
+    }
+  }
+
+  .start-action,
+  .end-action {
+    padding: $base_padding;
+  }
+
+  .start-action:dir(ltr),
+  .end-action:dir(rtl) {
+    padding-right: 0;
+  }
+
+  .start-action:dir(rtl),
+  .end-action:dir(ltr) {
+    padding-left: 0;
+  }
+
+  &.inline {
+    @extend %tabbar-inline;
+  }
+}
+
+%tabbar-inline .box {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding-bottom: 0;
+
+  &:backdrop {
+    background-color: transparent;
+    transition: none;
+
+    > scrolledwindow,
+    > .start-action,
+    > .end-action {
+      filter: none;
+      transition: none;
+    }
+  }
+}
+
+%tabbar-shrunk {
+  tabbox,
+  .start-action,
+  .end-action {
+    padding-top: 0;
+    padding-bottom: $base_padding;
+  }
+}
+
+dnd tab {
+  background-color: $headerbar_bg_color;
+  background-image: image($selected_active_color);
+  color: $headerbar_fg_color;
+
+  box-shadow: 0 0 0 1px transparentize(black, 0.97),
+              0 1px 3px 1px transparentize(black, .93),
+              0 2px 6px 2px transparentize(black, .97);
+
+  margin: 25px;
+}
+
+tabbar,
+dnd {
+  tab {
+    min-height: 26px;
+    padding: 4px;
+    border-radius: $button_radius;
+
+    button.image-button {
+      padding: 0;
+      margin: 0;
+      min-width: 24px;
+      min-height: 24px;
+      border-radius: $circular_radius;
+    }
+
+    indicator {
+      min-height: 2px;
+      border-radius: 2px;
+      background: gtkalpha($accent_color, 0.5);
+      transform: translateY(4px);
+    }
+  }
+}
+
+tabgrid > tabgridchild {
+  @include focus-ring(".card", $offset: 0, $outer: true);
+}
+
+tabthumbnail {
+  border-radius: $card_radius + 4px;
+
+  > box {
+    margin: $base_padding;
+  }
+
+  &:drop(active) {
+    box-shadow: inset 0 0 0 2px gtkalpha($drop_target_color, .4);
+    background-color: gtkalpha($drop_target_color, .1);
+  }
+
+  transition: box-shadow 200ms $ease-out-quad, background-color $ease-out-quad;
+
+  .needs-attention {
+    &:dir(ltr) { transform: translate(8px, -8px); }
+    &:dir(rtl) { transform: translate(-8px, -8px); }
+
+    > widget {
+      background: $accent_color;
+      min-width: 12px;
+      min-height: 12px;
+      border-radius: 8px;
+      margin: $base_padding / 2;
+      box-shadow: 0 1px 2px gtkalpha($accent_color, .4);
+    }
+  }
+
+  .card {
+    picture {
+      outline: 1px solid $window_outline_color;
+      outline-offset: -1px;
+      border-radius: $card_radius;
+    }
+
+    background: none;
+    color: inherit;
+  }
+
+  &.pinned .card {
+    background-color: $thumbnail_bg_color;
+    color: $thumbnail_fg_color;
+  }
+
+  .icon-title-box {
+    border-spacing: $base_padding;
+  }
+
+  .tab-unpin-icon {
+    margin: $base_padding;
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  button.circular {
+    margin: $base_padding;
+    background-color: gtkalpha($thumbnail_bg_color, .75);
+    min-width: 24px;
+    min-height: 24px;
+
+    &:hover {
+      background-color: gtkalpha(gtkmix($thumbnail_bg_color, currentColor, 90%), .75);
+    }
+
+    &:active {
+      background-color: gtkalpha(gtkmix($thumbnail_bg_color, currentColor, 80%), .75);
+    }
+  }
+}
+
+taboverview > .overview  .new-tab-button {
+  margin: 18px;
+}
+
+tabview:drop(active),
+tabbox:drop(active),
+tabgrid:drop(active) {
+  box-shadow: none;
+}

src/sass/libadwaita/widgets/_text-selection.scss

@@ -0,0 +1,30 @@
+cursor-handle {
+  all: unset;
+  padding: 24px 20px;
+
+  > contents {
+    min-width: 20px;
+    min-height: 20px;
+    border-radius: 50%;
+
+    background-color: $accent_bg_color;
+  }
+
+  &.top > contents {
+    border-top-right-radius: 0;
+  }
+
+  &.bottom > contents {
+    border-top-left-radius: 0;
+    transform: translateX(1px);
+  }
+
+  &.insertion-cursor > contents {
+    border-top-left-radius: 0;
+    transform: translateX(1px) translateY(4px) rotate(45deg);
+  }
+}
+
+magnifier {
+  background-color: $view_bg_color;
+}

src/sass/libadwaita/widgets/_toolbars.scss

@@ -0,0 +1,324 @@
+%toolbar {
+  button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &.arrow-button,
+    &.image-button,
+    &.image-text-button {
+      @extend %button_basic_flat;
+    }
+  }
+
+  &.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+  }
+
+  menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &.image-button > button {
+      @extend %button_basic_flat;
+    }
+  }
+
+  .linked button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &.arrow-button,
+    &.image-button,
+    &.image-text-button {
+      @extend %button_basic_raised;
+    }
+  }
+
+  menubutton.raised > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &.arrow-button,
+    &.image-button,
+    &.image-text-button {
+      @extend %button_basic_raised;
+    }
+  }
+
+  menubutton.suggested-action,
+  menubutton.destructive-action,
+  menubutton.opaque {
+    > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      @extend %opaque_button;
+
+      color: inherit;
+      background-color: transparent;
+    }
+  }
+
+  splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    @extend %flat_split_button;
+  }
+
+  switch {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+
+  // Reset styles for popovers
+  popover {
+    button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &.arrow-button,
+      &.image-button,
+      &.image-text-button {
+        @extend %button_basic_raised;
+      }
+    }
+
+    menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &.image-button > button {
+        @extend %button_basic_raised;
+      }
+    }
+  }
+}
+
+.toolbar {
+  padding: $base_padding;
+  border-spacing: $base_padding;
+  @extend %toolbar;
+
+  // stand-alone OSD toolbars
+  &.osd {
+    padding: $base_padding * 2;
+    border-radius: $card_radius;
+  }
+}
+
+%toolbar-shrunk {
+  padding-top: $base_padding;
+  padding-bottom: $base_padding;
+}
+
+/****************
+ * GtkSearchBar *
+ ****************/
+
+searchbar {
+  > revealer > box {
+    padding: $base_padding $base_padding $base_padding + 1px $base_padding;
+    background-color: $headerbar_backdrop_color;
+    color: $headerbar_fg_color;
+    box-shadow: inset 0 -1px $headerbar_border_color;
+
+    &:backdrop {
+      background-color: $headerbar_bg_color;
+      transition: background-color $backdrop_transition;
+
+      > * {
+        filter: opacity(.5);
+        transition: filter $backdrop_transition;
+      }
+    }
+
+    @extend %toolbar;
+
+   .close {
+      min-width: 18px;
+      min-height: 18px;
+      padding: 4px;
+      border-radius: 50%;
+      @extend %button_basic_flat;
+
+      &:dir(ltr) {
+        margin-left: 10px;
+        margin-right: 4px;
+      }
+
+      &:dir(rtl) {
+        margin-left: 4px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &.inline {
+    @extend %searchbar-inline;
+  }
+}
+
+%searchbar-flat > revealer > box {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding-bottom: $base_padding;
+}
+
+%searchbar-inline {
+  @extend %searchbar-flat;
+
+  > revealer > box:backdrop {
+    background-color: transparent;
+    transition: none;
+
+    > * {
+      filter: none;
+      transition: none;
+    }
+  }
+}
+
+%searchbar-shrunk > revealer > box {
+  padding-top: $base_padding;
+  padding-bottom: $base_padding;
+}
+
+/****************
+ * GtkActionBar *
+ ****************/
+
+actionbar > revealer > box {
+  background-color: $headerbar_backdrop_color;
+  color: $headerbar_fg_color;
+  box-shadow: inset 0 1px $headerbar_border_color;
+  padding: $base_padding + 1px $base_padding $base_padding $base_padding;
+  @extend %toolbar;
+
+  &, > box.start, > box.end {
+    border-spacing: $base_padding;
+  }
+
+  &:backdrop {
+    background-color: $headerbar_bg_color;
+    transition: background-color $backdrop_transition;
+
+    > * {
+      filter: opacity(.5);
+      transition: filter $backdrop_transition;
+    }
+  }
+}
+
+%actionbar-inline > revealer > box {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding-top: $base_padding;
+
+  &:backdrop {
+    background-color: transparent;
+    transition: none;
+
+    > * {
+      filter: none;
+      transition: none;
+    }
+  }
+}
+
+%actionbar-shrunk > revealer > box {
+  padding-top: $base_padding;
+  padding-bottom: $base_padding;
+}
+
+/*************
+ * AdwBanner *
+ *************/
+banner > revealer > widget {
+  /* There are 2 more instances in _sidebars.css, keep in sync with that */
+  background-color: gtkmix($accent_bg_color, $window_bg_color, 30%);
+  color: $window_fg_color;
+  padding: $base_padding;
+
+  &:backdrop {
+    background-color: gtkmix($accent_bg_color, $window_bg_color, 15%);
+    transition: background-color $backdrop_transition;
+
+    > label, > button {
+      filter: opacity(.5);
+      transition: filter $backdrop_transition;
+    }
+  }
+}
+
+/******************
+ * AdwToolbarView *
+ ******************/
+toolbarview {
+  > .top-bar,
+  > .bottom-bar {
+    headerbar { @extend %headerbar-inline; }
+    searchbar { @extend %searchbar-inline; }
+    actionbar { @extend %actionbar-inline; }
+    menubar   { @extend %menubar-inline; }
+    tabbar    { @extend %tabbar-inline; }
+
+    .collapse-spacing {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      headerbar {
+        @extend %headerbar-shrunk;
+        padding-top: $base_padding / 2;
+        padding-bottom: $base_padding / 2;
+      }
+
+      searchbar { @extend %searchbar-shrunk; }
+      actionbar { @extend %actionbar-shrunk; }
+      menubar   { @extend %menubar-shrunk; }
+      .toolbar  { @extend %toolbar-shrunk; }
+      tabbar    { @extend %tabbar-shrunk; }
+
+      viewswitcherbar { @extend %viewswitcherbar-shrunk; }
+    }
+  }
+
+  &.undershoot-top    scrolledwindow { @include undershoot(top); }
+  &.undershoot-bottom scrolledwindow { @include undershoot(bottom); }
+
+  window.devel & > .top-bar {
+    background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")),
+                                 image(transparent));
+    background-repeat: repeat-x;
+  }
+
+  window.devel dialog & > .top-bar {
+    background-image: unset;
+    background-repeat: unset;
+  }
+
+  > .top-bar,
+  > .bottom-bar {
+    background-color: $headerbar_backdrop_color;
+    color: $headerbar_fg_color;
+
+    &:backdrop {
+      background-color: $headerbar_bg_color;
+      transition: background-color $backdrop_transition;
+
+      > windowhandle {
+        filter: opacity(.5);
+        transition: filter $backdrop_transition;
+      }
+    }
+  }
+
+  > .top-bar {
+    box-shadow: 0 1px $border_color;
+
+    &.border {
+      box-shadow: 0 1px $border_color;
+    }
+  }
+
+  > .bottom-bar {
+    box-shadow: 0 -1px $border_color;
+
+    &.border {
+      box-shadow: 0 -1px $border_color;
+    }
+  }
+
+  .sidebar-pane &,
+  .content-pane &,
+  .about & { // reset
+    > .top-bar,
+    > .bottom-bar {
+      box-shadow: none;
+
+      &, &:backdrop {
+        background-color: transparent;
+      }
+    }
+  }
+}

src/sass/libadwaita/widgets/_tooltip.scss

@@ -0,0 +1,20 @@
+tooltip {
+  &.background {
+    // background-color needs to be set this way otherwise it gets drawn twice
+    // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
+    background-color: transparentize(black, 0.2);
+    background-clip: padding-box;
+    border: 1px solid $tooltip_border_color; // this subtle border is meant to
+                                              // not make the tooltip melt with
+                                              // very dark backgrounds
+    color: white;
+  }
+
+  padding: 6px 10px;
+  border-radius: 9px;
+  box-shadow: none; // otherwise it gets inherited by windowframe.csd
+
+  > box {
+    border-spacing: $base_padding;
+  }
+}

src/sass/libadwaita/widgets/_view-switcher.scss

@@ -0,0 +1,123 @@
+viewswitcher {
+  border-spacing: 3px;
+
+  &.narrow {
+    margin-top: -3px;
+    margin-bottom: -3px;
+    min-height: 6px;
+  }
+
+  button.toggle {
+    padding: 0;
+
+    > stack > box {
+      &.narrow {
+        font-size: 0.75rem;
+        padding-top: 4px;
+
+        > label {
+          min-height: 18px;
+          padding-left: 3px;
+          padding-right: 3px;
+          padding-bottom: 2px;
+        }
+      }
+
+      &.wide {
+        padding: 2px 12px;
+        border-spacing: 6px;
+      }
+    }
+  }
+}
+
+/**********************
+ * AdwViewSwitcherBar *
+ **********************/
+
+viewswitcherbar actionbar > revealer > box {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 7px;
+}
+
+%viewswitcherbar-shrunk actionbar > revealer > box {
+  // Not 0px because view switcher has negative margin
+  padding-top: 6px;
+}
+
+/************************
+ * AdwViewSwitcherTitle *
+ ************************/
+
+viewswitchertitle {
+  margin-top: -6px;
+  margin-bottom: -6px;
+
+  viewswitcher {
+    margin-left: 12px;
+    margin-right: 12px;
+
+    &.narrow {
+      margin-top: 3px;
+      margin-bottom: 3px;
+    }
+
+    &.wide {
+      margin-top: 6px;
+      margin-bottom: 6px;
+    }
+  }
+
+  windowtitle {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+/*******************
+ * AdwIndicatorBin *
+ *******************/
+
+indicatorbin {
+  > indicator, > mask {
+    min-width: 6px;
+    min-height: 6px;
+    border-radius: 100px;
+  }
+
+  > indicator {
+    margin: 1px;
+    background: gtkalpha(currentColor, .4);
+  }
+
+  > mask {
+    padding: 1px;
+    background: black;
+  }
+
+  &.needs-attention > indicator {
+    background: $accent_color;
+  }
+
+  &.badge {
+    > indicator,
+    > mask {
+      min-height: 13px;
+    }
+
+    > indicator > label {
+      font-size: 0.6rem;
+      font-weight: bold;
+      padding-left: 4px;
+      padding-right: 4px;
+      color: white;
+    }
+
+    &.needs-attention > indicator {
+      background: $accent_bg_color;
+
+      > label { color: $accent_fg_color; }
+    }
+  }
+}

src/sass/libadwaita/widgets/_views.scss

@@ -0,0 +1,70 @@
+.view,
+%view {
+  color: $view_fg_color;
+  background-color: $view_bg_color;
+
+  &:disabled {
+    color: gtkalpha(currentColor, .5);
+    background-color: gtkmix($window_bg_color, $view_bg_color, 60%);
+  }
+
+  &:selected {
+    &:focus, & {
+      background-color: $view_selected_color;
+
+      border-radius: $button_radius;
+    }
+  }
+}
+
+// window.view { // reset
+//   color: $window_fg_color;
+//   background-color: $window_bg_color;
+// }
+
+textview {
+  caret-color: currentColor;
+
+  > text {
+    @extend %view;
+
+    background-color: transparent;
+  }
+
+  > border {
+    background-color: gtkmix($window_bg_color, $view_bg_color, 50%);
+  }
+
+  &:drop(active) {
+    caret-color: $drop_target_color;
+  }
+}
+
+rubberband {
+  border: 1px solid $accent_color;
+  background-color: gtkalpha($accent_color, 0.2);
+}
+
+flowbox > flowboxchild,
+gridview > child {
+  padding: 3px;
+  border-radius: $button_radius;
+
+  @include focus-ring();
+
+  &:selected {
+    background-color: $view_selected_color;
+  }
+}
+
+gridview > child.activatable {
+  &:hover { background-color: $view_hover_color; }
+
+  &:active { background-color: $view_active_color; }
+
+  &:selected {
+    &:hover { background-color: $view_selected_hover_color; }
+
+    &:active { background-color: $view_selected_active_color; }
+  }
+}

src/sass/libadwaita/widgets/_window.scss

@@ -0,0 +1,72 @@
+
+window {
+  border: none;
+
+  &.csd {
+    margin: 0;
+    border-radius: $window_radius;
+
+    @if $rimless == 'true' {
+      outline: 0 none transparent;
+      box-shadow: $shadow-z16,
+      0 0 36px transparent;
+    } @else {
+      outline-offset: -1px;
+      outline: 1px solid $window_outline_color;
+      box-shadow: $shadow-z16,
+      0 0 36px transparent,
+      0 0 0 1px $headerbar_darker_shade_color;
+    }
+
+    &:backdrop {
+      // the transparent shadow here is to enforce that the shadow extents don't
+      // change when we go to backdrop, to prevent jumping windows.
+      // The biggest shadow should be in the same order then in the active state
+      // or the jumping will happen during the transition.
+      transition: box-shadow $backdrop_transition;
+
+      @if $rimless == 'true' {
+        box-shadow: $shadow-z4,
+        0 0 36px transparent;
+      } @else {
+        box-shadow: $shadow-z4,
+        0 0 36px transparent,
+        0 0 0 1px $headerbar_darker_shade_color;
+      }
+    }
+
+    // &.dialog.message,
+    // &.messagedialog { }
+
+    &.tiled,
+    &.tiled-top,
+    &.tiled-left,
+    &.tiled-right,
+    &.tiled-bottom {
+      border-radius: 0;
+      outline: none;
+    }
+
+    &.maximized,
+    &.fullscreen {
+      border-radius: 0;
+      outline: none;
+      box-shadow: none;
+      transition: none;
+    }
+  }
+
+  &.solid-csd {
+    margin: 0;
+    padding: 2px;
+    border-radius: 0;
+    background-color: $headerbar_bg_color;
+    border: 1px solid $headerbar_darker_shade_color;
+  }
+
+  // server-side decorations as used by mutter
+  &.ssd {
+    // just doing borders, wm draws actual shadows
+    box-shadow: 0 0 0 1px $headerbar_darker_shade_color;
+  }
+}