Update _control-center.scss

Themes for Labwc

build.sh

@@ -10,13 +10,15 @@ if [ ! "$(which sassc 2> /dev/null)" ]; then
   if has_command zypper; then
     sudo zypper in sassc
   elif has_command apt; then
-    sudo apt install sassc
+    sudo apt install -y sassc
   elif has_command dnf; then
     sudo dnf install -y sassc
   elif has_command yum; then
-    sudo yum install sassc
+    sudo yum install -y sassc
   elif has_command pacman; then
     sudo pacman -S --noconfirm sassc
+  elif has_command xbps-install; then
+    sudo xbps-install -y sassc
   fi
 fi
 

install.sh

@@ -37,8 +37,12 @@ SIZE_VARIANTS=('' '-Compact')
 
 if [[ "$(command -v gnome-shell)" ]]; then
   echo && gnome-shell --version
+
   SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)"
-  if [[ "${SHELL_VERSION:-}" -ge "47" ]]; then
+
+  if [[ "${SHELL_VERSION:-}" -ge "48" ]]; then
+    GS_VERSION="48-0"
+  elif [[ "${SHELL_VERSION:-}" -ge "47" ]]; then
     GS_VERSION="47-0"
   elif [[ "${SHELL_VERSION:-}" -ge "46" ]]; then
     GS_VERSION="46-0"
@@ -53,7 +57,7 @@ if [[ "$(command -v gnome-shell)" ]]; then
   fi
 else
   echo "'gnome-shell' not found, using styles for last gnome-shell version available."
-  GS_VERSION="47-0"
+  GS_VERSION="48-0"
 fi
 
 usage() {
@@ -78,7 +82,7 @@ OPTIONS:
                           2. fixed                       Using fixed theme colors (that will break light/dark mode switch)
 
   --tweaks                Specify versions for tweaks
-                          1. [nord|dracula|gruvbox|everforest|catppuccin|all]  (Nord/Dracula/Gruvbox/Everforet/Catppuccin/all) ColorSchemes version
+                          1. [nord|dracula|gruvbox|everforest|catppuccin|all]  (Nord/Dracula/Gruvbox/Everforest/Catppuccin/all) ColorSchemes version
                           2. black                       Blackness color version
                           3. rimless                     Remove the 1px border about windows and menus
                           4. normal                      Normal windows button style like gnome default theme (titlebuttons: max/min/close)
@@ -158,6 +162,10 @@ install() {
   cp -r "${SRC_DIR}/main/xfwm4/themerc"                                                      "${THEME_DIR}-xhdpi/xfwm4/themerc"
   sed -i "s/button_offset=6/button_offset=12/"                                               "${THEME_DIR}-xhdpi/xfwm4/themerc"
 
+  mkdir -p                                                                                   "${THEME_DIR}/labwc"
+  cp "${SRC_DIR}/main/labwc/themerc${color}${scheme}"                                        "${THEME_DIR}/labwc/themerc"
+  cp -r "${SRC_DIR}/assets/labwc/assets${color}/"*.svg                                       "${THEME_DIR}/labwc/"
+
   mkdir -p                                                                                   "${THEME_DIR}/plank"
   if [[ "$color" == '-Light' ]]; then
     cp -r "${SRC_DIR}/main/plank/theme-Light${scheme}/"*                                     "${THEME_DIR}/plank"
@@ -449,6 +457,8 @@ install_package() {
       sudo yum install sassc
     elif has_command pacman; then
       sudo pacman -S --noconfirm sassc
+    elif has_command xbps-install; then
+      sudo xbps-install -y sassc
     fi
   fi
 }

src/assets/labwc/assets-Dark/close-active.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="close-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.9633626"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <path
+     d="m 10.743741,10.000528 c -0.18994,0 -0.37988,0.07221 -0.525425,0.217803 -0.291088,0.291208 -0.291088,0.76 0,1.051223 L 14.948763,16 10.218316,20.730447 c -0.291088,0.291208 -0.291088,0.76 0,1.051222 0.291089,0.291208 0.76003,0.291208 1.051237,0 L 16,17.051222 l 4.730447,4.730447 c 0.291088,0.291208 0.75997,0.291208 1.051237,0 0.291088,-0.291207 0.291088,-0.759999 0,-1.051222 L 17.051237,16 21.781684,11.269554 c 0.291088,-0.291208 0.291088,-0.76 0,-1.051223 -0.291089,-0.2912074 -0.76003,-0.2912074 -1.051237,0 L 16,14.948778 11.269553,10.218331 C 11.124009,10.07273 10.934068,10.000528 10.744128,10.000528 Z"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.8471"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.7"
+     id="path2" />
+</svg>

src/assets/labwc/assets-Dark/close-inactive.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="close-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.9633626"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <path
+     d="m 10.743741,10.000528 c -0.18994,0 -0.37988,0.07221 -0.525425,0.217803 -0.291088,0.291208 -0.291088,0.76 0,1.051223 L 14.948763,16 10.218316,20.730447 c -0.291088,0.291208 -0.291088,0.76 0,1.051222 0.291089,0.291208 0.76003,0.291208 1.051237,0 L 16,17.051222 l 4.730447,4.730447 c 0.291088,0.291208 0.75997,0.291208 1.051237,0 0.291088,-0.291207 0.291088,-0.759999 0,-1.051222 L 17.051237,16 21.781684,11.269554 c 0.291088,-0.291208 0.291088,-0.76 0,-1.051223 -0.291089,-0.2912074 -0.76003,-0.2912074 -1.051237,0 L 16,14.948778 11.269553,10.218331 C 11.124009,10.07273 10.934068,10.000528 10.744128,10.000528 Z"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.8471"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.3"
+     id="path2" />
+</svg>

src/assets/labwc/assets-Dark/iconify-active.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="iconify-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="8.8684876"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <rect
+     x="10"
+     y="16.25"
+     width="12"
+     height="1.5"
+     rx="0.75"
+     ry="0.75"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="0.64143"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.7"
+     id="rect843" />
+</svg>

src/assets/labwc/assets-Dark/iconify-inactive.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="iconify-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="8.8684876"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <rect
+     x="10"
+     y="16.25"
+     width="12"
+     height="1.5"
+     rx="0.75"
+     ry="0.75"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="0.64143"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.3"
+     id="rect843" />
+</svg>

src/assets/labwc/assets-Dark/max-active.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8903709"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <path
+     d="m 13,10 c -1.662,0 -3,1.338 -3,3 v 6 c 0,1.662 1.338015,3 3,3 h 6 c 1.662,0 3,-1.338 3,-3 v -6 c 0,-1.662 -1.338015,-3 -3,-3 z m 0,1.5 h 6 c 0.831,0 1.5,0.66903 1.5,1.5 v 6 c 0,0.83097 -0.66903,1.5 -1.5,1.5 h -6 c -0.830955,0 -1.499985,-0.66903 -1.499985,-1.5 v -6 c 0,-0.83097 0.66903,-1.5 1.499985,-1.5 z"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.6667"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.7"
+     id="path131" />
+</svg>

src/assets/labwc/assets-Dark/max-inactive.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8903709"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <path
+     d="m 13,10 c -1.662,0 -3,1.338 -3,3 v 6 c 0,1.662 1.338015,3 3,3 h 6 c 1.662,0 3,-1.338 3,-3 v -6 c 0,-1.662 -1.338015,-3 -3,-3 z m 0,1.5 h 6 c 0.831,0 1.5,0.66903 1.5,1.5 v 6 c 0,0.83097 -0.66903,1.5 -1.5,1.5 h -6 c -0.830955,0 -1.499985,-0.66903 -1.499985,-1.5 v -6 c 0,-0.83097 0.66903,-1.5 1.499985,-1.5 z"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.6667"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.3"
+     id="path131" />
+</svg>

src/assets/labwc/assets-Dark/max_toggled-active.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max_toggled-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8173792"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <g
+     transform="matrix(1.5,0,0,1.5,-42.5,-1072.043)"
+     id="g696">
+    <g
+       style="opacity:0.7"
+       id="g694">
+      <path
+         d="m -26.25,723.362 c -1.108,0 -2,0.892 -2,2 v 2 c 0,1.108 0.892,2 2,2 h 2 c 1.108,0 2,-0.892 2,-2 v -2 c 0,-1.108 -0.892,-2 -2,-2 z m 0,1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 h -2 c -0.554,0 -1,-0.446 -1,-1 v -2 c 0,-0.554 0.446,-1 1,-1"
+         style="opacity:1;fill:#ffffff;paint-order:stroke fill markers"
+         transform="translate(63.25)"
+         id="path690" />
+      <path
+         d="m -24.25,721.362 c -1.108,0 -2,0.892 -2,2 h 1 c 0,-0.554 0.446,-1 1,-1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 v 1 c 1.108,0 2,-0.892 2,-2 v -2 c 0,-1.108 -0.892,-2 -2,-2 z"
+         opacity=".35"
+         style="opacity:0.35;fill:#ffffff;paint-order:stroke fill markers"
+         transform="translate(63.25)"
+         id="path692" />
+    </g>
+  </g>
+</svg>

src/assets/labwc/assets-Dark/max_toggled-inactive.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max_toggled-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8173792"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <g
+     transform="matrix(1.5,0,0,1.5,-162.5,-1072.043)"
+     id="g12"
+     inkscape:label="g12">
+    <g
+       style="opacity:0.3;fill:#ffffff"
+       id="g10">
+      <path
+         d="M 8,6 C 6.892,6 6,6.892 6,8 v 2 c 0,1.108 0.892,2 2,2 h 2 c 1.108,0 2,-0.892 2,-2 V 8 C 12,6.892 11.108,6 10,6 Z m 0,1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 H 8 C 7.446,11 7,10.554 7,10 V 8 C 7,7.446 7.446,7 8,7"
+         style="opacity:1;fill:#ffffff;paint-order:stroke fill markers"
+         transform="translate(109,717.362)"
+         id="path6" />
+      <path
+         d="M 10,4 C 8.892,4 8,4.892 8,6 H 9 C 9,5.446 9.446,5 10,5 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 v 1 c 1.108,0 2,-0.892 2,-2 V 6 C 14,4.892 13.108,4 12,4 Z"
+         opacity=".35"
+         style="opacity:0.35;fill:#ffffff;paint-order:stroke fill markers"
+         transform="translate(109,717.362)"
+         id="path8" />
+    </g>
+  </g>
+</svg>

src/assets/labwc/assets-Light/close-active.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="close-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8903709"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#000000;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#000000;fill-opacity:1" />
+  </g>
+  <path
+     d="m 10.743741,10.000528 c -0.18994,0 -0.37988,0.07221 -0.525425,0.217804 -0.291088,0.291207 -0.291088,0.759999 0,1.051221 L 14.948763,16 10.218316,20.730447 c -0.291088,0.291208 -0.291088,0.76 0,1.051222 0.291089,0.291208 0.76003,0.291208 1.051237,0 L 16,17.051222 l 4.730447,4.730447 c 0.291088,0.291208 0.75997,0.291208 1.051237,0 0.291088,-0.291207 0.291088,-0.760001 0,-1.051222 L 17.051237,16 21.781684,11.269553 c 0.291088,-0.291207 0.291088,-0.76 0,-1.051221 -0.291089,-0.2912085 -0.76003,-0.2912085 -1.051237,0 L 16,14.948778 11.269553,10.218332 c -0.145544,-0.145604 -0.335485,-0.217804 -0.525425,-0.217804 z"
+     fill="#363636"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.8471"
+     style="paint-order:stroke fill markers;fill:#000000;fill-opacity:1;opacity:0.6"
+     id="path362" />
+</svg>

src/assets/labwc/assets-Light/close-inactive.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="close-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8903709"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#000000;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#000000;fill-opacity:1" />
+  </g>
+  <path
+     d="m 10.743741,10.000528 c -0.18994,0 -0.37988,0.07221 -0.525425,0.217804 -0.291088,0.291207 -0.291088,0.759999 0,1.051221 L 14.948763,16 10.218316,20.730447 c -0.291088,0.291208 -0.291088,0.76 0,1.051222 0.291089,0.291208 0.76003,0.291208 1.051237,0 L 16,17.051222 l 4.730447,4.730447 c 0.291088,0.291208 0.75997,0.291208 1.051237,0 0.291088,-0.291207 0.291088,-0.760001 0,-1.051222 L 17.051237,16 21.781684,11.269553 c 0.291088,-0.291207 0.291088,-0.76 0,-1.051221 -0.291089,-0.2912085 -0.76003,-0.2912085 -1.051237,0 L 16,14.948778 11.269553,10.218332 c -0.145544,-0.145604 -0.335485,-0.217804 -0.525425,-0.217804 z"
+     fill="#363636"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.8471"
+     style="paint-order:stroke fill markers;fill:#000000;fill-opacity:1;opacity:0.26"
+     id="path362" />
+</svg>

src/assets/labwc/assets-Light/iconify-active.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="iconify-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="8.7954959"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#000000;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#000000;fill-opacity:1" />
+  </g>
+  <rect
+     x="10"
+     y="16.25"
+     width="12"
+     height="1.5"
+     rx="0.75"
+     ry="0.75"
+     fill="#363636"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="0.64143"
+     style="paint-order:stroke fill markers;fill:#000000;fill-opacity:1;opacity:0.6"
+     id="rect2" />
+</svg>

src/assets/labwc/assets-Light/iconify-inactive.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="iconify-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="8.7954959"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#000000;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#000000;fill-opacity:1" />
+  </g>
+  <rect
+     x="10"
+     y="16.25"
+     width="12"
+     height="1.5"
+     rx="0.75"
+     ry="0.75"
+     fill="#363636"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="0.64143"
+     style="paint-order:stroke fill markers;fill:#000000;fill-opacity:1;opacity:0.26"
+     id="rect2" />
+</svg>

src/assets/labwc/assets-Light/max-active.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8173792"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#000000;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#000000;fill-opacity:1" />
+  </g>
+  <path
+     d="m 13,10 c -1.662,0 -3,1.338 -3,3 v 6 c 0,1.662 1.338015,3 3,3 h 6 c 1.662,0 3,-1.338 3,-3 v -6 c 0,-1.662 -1.338015,-3 -3,-3 z m 0,1.5 h 6 c 0.831,0 1.5,0.66903 1.5,1.5 v 6 c 0,0.83097 -0.66903,1.5 -1.5,1.5 h -6 c -0.830955,0 -1.499985,-0.66903 -1.499985,-1.5 v -6 c 0,-0.83097 0.66903,-1.5 1.499985,-1.5 z"
+     fill="#363636"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.6667"
+     style="paint-order:stroke fill markers;fill:#000000;fill-opacity:1;opacity:0.6"
+     id="path2" />
+</svg>

src/assets/labwc/assets-Light/max-inactive.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8173792"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#000000;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#000000;fill-opacity:1" />
+  </g>
+  <path
+     d="m 13,10 c -1.662,0 -3,1.338 -3,3 v 6 c 0,1.662 1.338015,3 3,3 h 6 c 1.662,0 3,-1.338 3,-3 v -6 c 0,-1.662 -1.338015,-3 -3,-3 z m 0,1.5 h 6 c 0.831,0 1.5,0.66903 1.5,1.5 v 6 c 0,0.83097 -0.66903,1.5 -1.5,1.5 h -6 c -0.830955,0 -1.499985,-0.66903 -1.499985,-1.5 v -6 c 0,-0.83097 0.66903,-1.5 1.499985,-1.5 z"
+     fill="#363636"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.6667"
+     style="paint-order:stroke fill markers;fill:#000000;fill-opacity:1;opacity:0.26"
+     id="path2" />
+</svg>

src/assets/labwc/assets-Light/max_toggled-active.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max_toggled-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.7443876"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#000000;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#000000;fill-opacity:1" />
+  </g>
+  <g
+     transform="matrix(1.5,0,0,1.5,-42.5,-1072.043)"
+     id="g12">
+    <g
+       style="opacity:0.6"
+       id="g10">
+      <path
+         d="m -26.25,723.362 c -1.108,0 -2,0.892 -2,2 v 2 c 0,1.108 0.892,2 2,2 h 2 c 1.108,0 2,-0.892 2,-2 v -2 c 0,-1.108 -0.892,-2 -2,-2 z m 0,1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 h -2 c -0.554,0 -1,-0.446 -1,-1 v -2 c 0,-0.554 0.446,-1 1,-1"
+         style="opacity:1;fill:#000000;paint-order:stroke fill markers"
+         transform="translate(63.25)"
+         id="path6" />
+      <path
+         d="m -24.25,721.362 c -1.108,0 -2,0.892 -2,2 h 1 c 0,-0.554 0.446,-1 1,-1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 v 1 c 1.108,0 2,-0.892 2,-2 v -2 c 0,-1.108 -0.892,-2 -2,-2 z"
+         opacity=".35"
+         style="opacity:0.35;fill:#000000;paint-order:stroke fill markers"
+         transform="translate(63.25)"
+         id="path8" />
+    </g>
+  </g>
+</svg>

src/assets/labwc/assets-Light/max_toggled-inactive.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max_toggled-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.7443876"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#000000;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#000000;fill-opacity:1" />
+  </g>
+  <g
+     transform="matrix(1.5,0,0,1.5,-162.5,-1072.043)"
+     id="g2825">
+    <g
+       style="opacity:0.26;fill:#fafafa"
+       id="g2823">
+      <path
+         d="M 8,6 C 6.892,6 6,6.892 6,8 v 2 c 0,1.108 0.892,2 2,2 h 2 c 1.108,0 2,-0.892 2,-2 V 8 C 12,6.892 11.108,6 10,6 Z m 0,1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 H 8 C 7.446,11 7,10.554 7,10 V 8 C 7,7.446 7.446,7 8,7"
+         style="opacity:1;fill:#000000;paint-order:stroke fill markers"
+         transform="translate(109,717.362)"
+         id="path2819" />
+      <path
+         d="M 10,4 C 8.892,4 8,4.892 8,6 H 9 C 9,5.446 9.446,5 10,5 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 v 1 c 1.108,0 2,-0.892 2,-2 V 6 C 14,4.892 13.108,4 12,4 Z"
+         opacity=".35"
+         style="opacity:0.35;fill:#000000;paint-order:stroke fill markers"
+         transform="translate(109,717.362)"
+         id="path2821" />
+    </g>
+  </g>
+</svg>

src/assets/labwc/assets/close-active.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="close-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.9633626"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <path
+     d="m 10.743741,10.000528 c -0.18994,0 -0.37988,0.07221 -0.525425,0.217803 -0.291088,0.291208 -0.291088,0.76 0,1.051223 L 14.948763,16 10.218316,20.730447 c -0.291088,0.291208 -0.291088,0.76 0,1.051222 0.291089,0.291208 0.76003,0.291208 1.051237,0 L 16,17.051222 l 4.730447,4.730447 c 0.291088,0.291208 0.75997,0.291208 1.051237,0 0.291088,-0.291207 0.291088,-0.759999 0,-1.051222 L 17.051237,16 21.781684,11.269554 c 0.291088,-0.291208 0.291088,-0.76 0,-1.051223 -0.291089,-0.2912074 -0.76003,-0.2912074 -1.051237,0 L 16,14.948778 11.269553,10.218331 C 11.124009,10.07273 10.934068,10.000528 10.744128,10.000528 Z"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.8471"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.7"
+     id="path2" />
+</svg>

src/assets/labwc/assets/close-inactive.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="close-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.9633626"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <path
+     d="m 10.743741,10.000528 c -0.18994,0 -0.37988,0.07221 -0.525425,0.217803 -0.291088,0.291208 -0.291088,0.76 0,1.051223 L 14.948763,16 10.218316,20.730447 c -0.291088,0.291208 -0.291088,0.76 0,1.051222 0.291089,0.291208 0.76003,0.291208 1.051237,0 L 16,17.051222 l 4.730447,4.730447 c 0.291088,0.291208 0.75997,0.291208 1.051237,0 0.291088,-0.291207 0.291088,-0.759999 0,-1.051222 L 17.051237,16 21.781684,11.269554 c 0.291088,-0.291208 0.291088,-0.76 0,-1.051223 -0.291089,-0.2912074 -0.76003,-0.2912074 -1.051237,0 L 16,14.948778 11.269553,10.218331 C 11.124009,10.07273 10.934068,10.000528 10.744128,10.000528 Z"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.8471"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.3"
+     id="path2" />
+</svg>

src/assets/labwc/assets/iconify-active.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="iconify-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="8.8684876"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <rect
+     x="10"
+     y="16.25"
+     width="12"
+     height="1.5"
+     rx="0.75"
+     ry="0.75"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="0.64143"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.7"
+     id="rect843" />
+</svg>

src/assets/labwc/assets/iconify-inactive.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="iconify-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="8.8684876"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <rect
+     x="10"
+     y="16.25"
+     width="12"
+     height="1.5"
+     rx="0.75"
+     ry="0.75"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="0.64143"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.3"
+     id="rect843" />
+</svg>

src/assets/labwc/assets/max-active.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8903709"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <path
+     d="m 13,10 c -1.662,0 -3,1.338 -3,3 v 6 c 0,1.662 1.338015,3 3,3 h 6 c 1.662,0 3,-1.338 3,-3 v -6 c 0,-1.662 -1.338015,-3 -3,-3 z m 0,1.5 h 6 c 0.831,0 1.5,0.66903 1.5,1.5 v 6 c 0,0.83097 -0.66903,1.5 -1.5,1.5 h -6 c -0.830955,0 -1.499985,-0.66903 -1.499985,-1.5 v -6 c 0,-0.83097 0.66903,-1.5 1.499985,-1.5 z"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.6667"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.7"
+     id="path131" />
+</svg>

src/assets/labwc/assets/max-inactive.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8903709"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <path
+     d="m 13,10 c -1.662,0 -3,1.338 -3,3 v 6 c 0,1.662 1.338015,3 3,3 h 6 c 1.662,0 3,-1.338 3,-3 v -6 c 0,-1.662 -1.338015,-3 -3,-3 z m 0,1.5 h 6 c 0.831,0 1.5,0.66903 1.5,1.5 v 6 c 0,0.83097 -0.66903,1.5 -1.5,1.5 h -6 c -0.830955,0 -1.499985,-0.66903 -1.499985,-1.5 v -6 c 0,-0.83097 0.66903,-1.5 1.499985,-1.5 z"
+     fill="#dedede"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2.6667"
+     style="paint-order:stroke fill markers;fill:#ffffff;fill-opacity:1;opacity:0.3"
+     id="path131" />
+</svg>

src/assets/labwc/assets/max_toggled-active.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max_toggled-active.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8173792"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <g
+     transform="matrix(1.5,0,0,1.5,-42.5,-1072.043)"
+     id="g696">
+    <g
+       style="opacity:0.7"
+       id="g694">
+      <path
+         d="m -26.25,723.362 c -1.108,0 -2,0.892 -2,2 v 2 c 0,1.108 0.892,2 2,2 h 2 c 1.108,0 2,-0.892 2,-2 v -2 c 0,-1.108 -0.892,-2 -2,-2 z m 0,1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 h -2 c -0.554,0 -1,-0.446 -1,-1 v -2 c 0,-0.554 0.446,-1 1,-1"
+         style="opacity:1;fill:#ffffff;paint-order:stroke fill markers"
+         transform="translate(63.25)"
+         id="path690" />
+      <path
+         d="m -24.25,721.362 c -1.108,0 -2,0.892 -2,2 h 1 c 0,-0.554 0.446,-1 1,-1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 v 1 c 1.108,0 2,-0.892 2,-2 v -2 c 0,-1.108 -0.892,-2 -2,-2 z"
+         opacity=".35"
+         style="opacity:0.35;fill:#ffffff;paint-order:stroke fill markers"
+         transform="translate(63.25)"
+         id="path692" />
+    </g>
+  </g>
+</svg>

src/assets/labwc/assets/max_toggled-inactive.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="max_toggled-inactive.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.700194"
+     inkscape:cx="9.8173792"
+     inkscape:cy="18.795354"
+     inkscape:window-width="1600"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showgrid="false" />
+  <g
+     fill="#ffffff"
+     id="g2"
+     style="fill:#eff1f5;fill-opacity:1">
+    <circle
+       cx="16"
+       cy="16"
+       r="16"
+       opacity="0.2"
+       id="circle2"
+       style="stroke-width:1.33328;opacity:0.08;fill:#eff1f5;fill-opacity:1" />
+  </g>
+  <g
+     transform="matrix(1.5,0,0,1.5,-162.5,-1072.043)"
+     id="g12"
+     inkscape:label="g12">
+    <g
+       style="opacity:0.3;fill:#ffffff"
+       id="g10">
+      <path
+         d="M 8,6 C 6.892,6 6,6.892 6,8 v 2 c 0,1.108 0.892,2 2,2 h 2 c 1.108,0 2,-0.892 2,-2 V 8 C 12,6.892 11.108,6 10,6 Z m 0,1 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 H 8 C 7.446,11 7,10.554 7,10 V 8 C 7,7.446 7.446,7 8,7"
+         style="opacity:1;fill:#ffffff;paint-order:stroke fill markers"
+         transform="translate(109,717.362)"
+         id="path6" />
+      <path
+         d="M 10,4 C 8.892,4 8,4.892 8,6 H 9 C 9,5.446 9.446,5 10,5 h 2 c 0.554,0 1,0.446 1,1 v 2 c 0,0.554 -0.446,1 -1,1 v 1 c 1.108,0 2,-0.892 2,-2 V 6 C 14,4.892 13.108,4 12,4 Z"
+         opacity=".35"
+         style="opacity:0.35;fill:#ffffff;paint-order:stroke fill markers"
+         transform="translate(109,717.362)"
+         id="path8" />
+    </g>
+  </g>
+</svg>

src/main/labwc/themerc

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #242424
+window.inactive.title.bg.color: #2C2C2C
+window.active.label.text.color: #FFFFFF
+window.inactive.label.text.color: #FFFFFF99
+window.active.border.color: #242424
+window.inactive.border.color: #2C2C2C
+menu.items.bg.color: #242424
+menu.items.text.color: #FFFFFF
+menu.items.active.bg.color: #FFFFFF
+menu.items.active.text.color: #242424
+osd.bg.color: #242424
+osd.border.color: #FFFFFF
+osd.label.text.color: #FFFFFF
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Catppuccin

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #24273a
+window.inactive.title.bg.color: #292c3c
+window.active.label.text.color: #eff1f5
+window.inactive.label.text.color: #eff1f599
+window.active.border.color: #24273a
+window.inactive.border.color: #292c3c
+menu.items.bg.color: #24273a
+menu.items.text.color: #eff1f5
+menu.items.active.bg.color: #eff1f5
+menu.items.active.text.color: #24273a
+osd.bg.color: #24273a
+osd.border.color: #eff1f5
+osd.label.text.color: #eff1f5
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Dark

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #242424
+window.inactive.title.bg.color: #2C2C2C
+window.active.label.text.color: #FFFFFF
+window.inactive.label.text.color: #FFFFFF99
+window.active.border.color: #242424
+window.inactive.border.color: #2C2C2C
+menu.items.bg.color: #242424
+menu.items.text.color: #FFFFFF
+menu.items.active.bg.color: #FFFFFF
+menu.items.active.text.color: #242424
+osd.bg.color: #242424
+osd.border.color: #FFFFFF
+osd.label.text.color: #FFFFFF
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Dark-Catppuccin

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #24273a
+window.inactive.title.bg.color: #292c3c
+window.active.label.text.color: #eff1f5
+window.inactive.label.text.color: #eff1f599
+window.active.border.color: #24273a
+window.inactive.border.color: #292c3c
+menu.items.bg.color: #24273a
+menu.items.text.color: #eff1f5
+menu.items.active.bg.color: #eff1f5
+menu.items.active.text.color: #24273a
+osd.bg.color: #24273a
+osd.border.color: #eff1f5
+osd.label.text.color: #eff1f5
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Dark-Dracula

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #1f2029
+window.inactive.title.bg.color: #242632
+window.active.label.text.color: #ffffff
+window.inactive.label.text.color: #ffffff99
+window.active.border.color: #1f2029
+window.inactive.border.color: #242632
+menu.items.bg.color: #1f2029
+menu.items.text.color: #ffffff
+menu.items.active.bg.color: #ffffff
+menu.items.active.text.color: #1f2029
+osd.bg.color: #1f2029
+osd.border.color: #ffffff
+osd.label.text.color: #ffffff
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Dark-Everforest

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #272e33
+window.inactive.title.bg.color: #2d353b
+window.active.label.text.color: #fffbef
+window.inactive.label.text.color: #fffbef99
+window.active.border.color: #272e33
+window.inactive.border.color: #2d353b
+menu.items.bg.color: #272e33
+menu.items.text.color: #fffbef
+menu.items.active.bg.color: #fffbef
+menu.items.active.text.color: #272e33
+osd.bg.color: #272e33
+osd.border.color: #fffbef
+osd.label.text.color: #fffbef
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Dark-Gruvbox

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #242220
+window.inactive.title.bg.color: #282524
+window.active.label.text.color: #fbf1c7
+window.inactive.label.text.color: #fbf1c799
+window.active.border.color: #242220
+window.inactive.border.color: #282524
+menu.items.bg.color: #242220
+menu.items.text.color: #fbf1c7
+menu.items.active.bg.color: #fbf1c7
+menu.items.active.text.color: #242220
+osd.bg.color: #242220
+osd.border.color: #fbf1c7
+osd.label.text.color: #fbf1c7
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Dark-Nord

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #1e222a
+window.inactive.title.bg.color: #242932
+window.active.label.text.color: #ffffff
+window.inactive.label.text.color: #ffffff99
+window.active.border.color: #1e222a
+window.inactive.border.color: #242932
+menu.items.bg.color: #1e222a
+menu.items.text.color: #ffffff
+menu.items.active.bg.color: #ffffff
+menu.items.active.text.color: #1e222a
+osd.bg.color: #1e222a
+osd.border.color: #ffffff
+osd.label.text.color: #ffffff
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Dracula

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #1f2029
+window.inactive.title.bg.color: #242632
+window.active.label.text.color: #ffffff
+window.inactive.label.text.color: #ffffff99
+window.active.border.color: #1f2029
+window.inactive.border.color: #242632
+menu.items.bg.color: #1f2029
+menu.items.text.color: #ffffff
+menu.items.active.bg.color: #ffffff
+menu.items.active.text.color: #1f2029
+osd.bg.color: #1f2029
+osd.border.color: #ffffff
+osd.label.text.color: #ffffff
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Everforest

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #272e33
+window.inactive.title.bg.color: #2d353b
+window.active.label.text.color: #fffbef
+window.inactive.label.text.color: #fffbef99
+window.active.border.color: #272e33
+window.inactive.border.color: #2d353b
+menu.items.bg.color: #272e33
+menu.items.text.color: #fffbef
+menu.items.active.bg.color: #fffbef
+menu.items.active.text.color: #272e33
+osd.bg.color: #272e33
+osd.border.color: #fffbef
+osd.label.text.color: #fffbef
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Gruvbox

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #242220
+window.inactive.title.bg.color: #282524
+window.active.label.text.color: #fbf1c7
+window.inactive.label.text.color: #fbf1c799
+window.active.border.color: #242220
+window.inactive.border.color: #282524
+menu.items.bg.color: #242220
+menu.items.text.color: #fbf1c7
+menu.items.active.bg.color: #fbf1c7
+menu.items.active.text.color: #242220
+osd.bg.color: #242220
+osd.border.color: #fbf1c7
+osd.label.text.color: #fbf1c7
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Light

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #F2F2F2
+window.inactive.title.bg.color: #FAFAFA
+window.active.label.text.color: #000000
+window.inactive.label.text.color: #00000099
+window.active.border.color: #F2F2F2
+window.inactive.border.color: #FAFAFA
+menu.items.bg.color: #F2F2F2
+menu.items.text.color: #000000
+menu.items.active.bg.color: #000000
+menu.items.active.text.color: #F2F2F2
+osd.bg.color: #F2F2F2
+osd.border.color: #000000
+osd.label.text.color: #000000
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Light-Catppuccin

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #e6e9ef
+window.inactive.title.bg.color: #eff1f5
+window.active.label.text.color: #11111B
+window.inactive.label.text.color: #11111B99
+window.active.border.color: #e6e9ef
+window.inactive.border.color: #eff1f5
+menu.items.bg.color: #e6e9ef
+menu.items.text.color: #11111B
+menu.items.active.bg.color: #11111B
+menu.items.active.text.color: #e6e9ef
+osd.bg.color: #e6e9ef
+osd.border.color: #11111B
+osd.label.text.color: #11111B
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Light-Dracula

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #f0f1f4
+window.inactive.title.bg.color: #f9f9fb
+window.active.label.text.color: #000000
+window.inactive.label.text.color: #00000099
+window.active.border.color: #f0f1f4
+window.inactive.border.color: #f9f9fb
+menu.items.bg.color: #f0f1f4
+menu.items.text.color: #000000
+menu.items.active.bg.color: #000000
+menu.items.active.text.color: #f0f1f4
+osd.bg.color: #f0f1f4
+osd.border.color: #000000
+osd.label.text.color: #000000
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Light-Everforest

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #f4f0d9
+window.inactive.title.bg.color: #fdf6e3
+window.active.label.text.color: #1E2326
+window.inactive.label.text.color: #1E232699
+window.active.border.color: #f4f0d9
+window.inactive.border.color: #fdf6e3
+menu.items.bg.color: #f4f0d9
+menu.items.text.color: #1E2326
+menu.items.active.bg.color: #1E2326
+menu.items.active.text.color: #f4f0d9
+osd.bg.color: #f4f0d9
+osd.border.color: #1E2326
+osd.label.text.color: #1E2326
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Light-Gruvbox

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #fbf1c7
+window.inactive.title.bg.color: #f9f5d7
+window.active.label.text.color: #1D2021
+window.inactive.label.text.color: #1D202199
+window.active.border.color: #fbf1c7
+window.inactive.border.color: #f9f5d7
+menu.items.bg.color: #fbf1c7
+menu.items.text.color: #1D2021
+menu.items.active.bg.color: #1D2021
+menu.items.active.text.color: #fbf1c7
+osd.bg.color: #fbf1c7
+osd.border.color: #1D2021
+osd.label.text.color: #1D2021
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Light-Nord

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #f0f1f4
+window.inactive.title.bg.color: #f8fafc
+window.active.label.text.color: #000000
+window.inactive.label.text.color: #00000099
+window.active.border.color: #f0f1f4
+window.inactive.border.color: #f8fafc
+menu.items.bg.color: #f0f1f4
+menu.items.text.color: #000000
+menu.items.active.bg.color: #000000
+menu.items.active.text.color: #f0f1f4
+osd.bg.color: #f0f1f4
+osd.border.color: #000000
+osd.label.text.color: #000000
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/main/labwc/themerc-Nord

@@ -0,0 +1,19 @@
+window.titlebar.padding.height: 6
+window.titlebar.padding.width: 6
+window.active.title.bg.color: #1e222a
+window.inactive.title.bg.color: #242932
+window.active.label.text.color: #ffffff
+window.inactive.label.text.color: #ffffff99
+window.active.border.color: #1e222a
+window.inactive.border.color: #242932
+menu.items.bg.color: #1e222a
+menu.items.text.color: #ffffff
+menu.items.active.bg.color: #ffffff
+menu.items.active.text.color: #1e222a
+osd.bg.color: #1e222a
+osd.border.color: #ffffff
+osd.label.text.color: #ffffff
+window.button.hover.bg.corner-radius: 50
+window.button.width: 22
+window.button.height: 22
+window.button.spacing: 12

src/sass/_variables.scss

@@ -9,8 +9,8 @@ $asset-suffix: if($variant == 'dark', '-dark', '');
 $space-size: if($compact == 'false', 6px, 4px);
 
 $small-size: if($compact == 'false', 24px, 22px);
-$medium-size: if($compact == 'false', 36px, 32px);
-$large-size: if($compact == 'false', 48px, 40px);
+$medium-size: if($compact == 'false', 34px, 30px);
+$large-size: if($compact == 'false', 46px, 38px);
 
 $menuitem-size: if($compact == 'false', 28px, 24px);
 

src/sass/gnome-shell/_common.scss

@@ -29,51 +29,51 @@ stage {
   color: $text;
 }
 
-/* General Typography */
 
+/* General Typography */
 %large_title {
   font-weight: 300;
-  @include fontsize(24);
+  @include fontsize(24pt);
 }
 
 %title_1 {
   font-weight: 800;
-  @include fontsize(20);
+  @include fontsize(20pt);
 }
 
 %title_2 {
   font-weight: 800;
-  @include fontsize(15);
+  @include fontsize(15pt);
 }
 
 %title_3 {
   font-weight: 700;
-  @include fontsize(15);
+  @include fontsize(15pt);
 }
 
 %title_4 {
   font-weight: 700;
-  @include fontsize(13);
+  @include fontsize(13pt);
 }
 
 %heading {
   font-weight: 700;
-  @include fontsize(11);
+  @include fontsize(11pt);
 }
 
 %caption_heading {
   font-weight: 700;
-  @include fontsize(9);
+  @include fontsize(9pt);
 }
 
 %caption {
   font-weight: 400;
-  @include fontsize(9);
+  @include fontsize(9pt);
 }
 
 %smaller {
   font-weight: 400;
-  @include fontsize(8);
+  @include fontsize(9pt);
 }
 
 %monospace {font-family: monospace;}

src/sass/gnome-shell/_drawing.scss

@@ -1,7 +1,11 @@
 
-// provide font size in rem, with px fallback
-@mixin fontsize($size: 24, $base: 16) {
-  font-size: round($size) + pt;
+// Mixin to convert provided font size in pt to em units
+@mixin fontsize($size, $base: 16px, $unit: pt) {
+  // if pt, convert into unitless value with the assumption: 1pt = 1.091px
+  $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
+  $rounded_size: round($adjusted_size / $base) / 1000;
+  font-size: $rounded_size * 1em;
+  // font-size: round($size) + pt;
 }
 
 @mixin entry($t, $fc: $primary, $tc: $text, $bc: $fill) {
@@ -72,37 +76,37 @@
 
   @if $t == normal {
     color: $tc;
-    background-color: $bc;
+    background-color: rgba($tc, 0.05);
     box-shadow: none !important;
   }
 
   @if $t == focus {
     color: $tc;
-    background-color: overlay($bc, focus);
     box-shadow: none !important;
+    background-color: if($bc == $primary, rgba(white, 0.08), rgba($tc, 0.08));
   }
 
   @if $t == hover {
     color: $tc;
-    background-color: overlay($bc, hover);
     box-shadow: none !important;
+    background-color: if($bc == $primary, rgba(white, 0.1), rgba($tc, 0.1));
   }
 
   @if $t == active {
     color: $tc;
-    background-color: overlay($bc, active);
     box-shadow: none !important;
+    background-color: if($bc == $primary, rgba(white, 0.18), rgba($tc, 0.18));
   }
 
   @if $t == checked {
-    color: on($fc);
+    color: if($fc == $primary, white, on($fc));
     background-color: $fc;
     box-shadow: none !important;
   }
 
   @if $t == insensitive {
     color: rgba($tc, 0.35);
-    background-color: $bc;
+    background-color: rgba($tc, 0.02);
     box-shadow: none !important;
   }
 
@@ -114,18 +118,18 @@
 
   @if $t == flat-focus {
     color: $tc;
-    background-color: overlay($bc, focus);
+    background-color: rgba($tc, 0.08);
     box-shadow: none !important;
   }
 
   @if $t == flat-hover {
     color: $tc;
-    background-color: overlay($bc, hover);
+    background-color: rgba($tc, 0.1);
   }
 
   @if $t == flat-active {
     color: $tc;
-    background-color: overlay($bc, active);
+    background-color: rgba($tc, 0.18);
     box-shadow: none !important;
   }
 

src/sass/gnome-shell/_variables.scss

@@ -12,7 +12,7 @@ $asset_suffix: if($variant == 'dark', '-dark', '');
 
 // sizes
 $item_size: if($compact == 'false', 32px, 28px);
-$font_size: if($compact == 'false', 11, 10);
+$font_size: if($compact == 'false', 11pt, 10pt);
 
 // padding, margin and spacing
 $base_padding: if($compact == 'false', 6px, 4px);

src/sass/gnome-shell/_widgets-47-0.scss

@@ -1,3 +1,10 @@
+
+@if $gnome_version == 'new' and $colortype == 'system' {
+  $primary:            -st-accent-color;
+  $indicator:          -st-accent-color;
+  $inverse-indicator:  -st-accent-color;
+}
+
 @import 'common/a11y';
 @import 'common/base';
 @import 'common/buttons';

src/sass/gnome-shell/_widgets-48-0.scss

@@ -0,0 +1,49 @@
+
+@if $gnome_version == 'new' and $colortype == 'system' {
+  $primary:            -st-accent-color;
+  $indicator:          -st-accent-color;
+  $inverse-indicator:  -st-accent-color;
+}
+
+@import 'common/a11y';
+@import 'common/base';
+@import 'common/buttons';
+@import 'common/corner-ripple';
+@import 'common/entries';
+@import 'common/hotplug';
+@import 'common/ibus-popup';
+@import 'common/keyboard';
+@import 'common/login-dialog';
+@import 'common/looking-glass';
+@import 'common/misc';
+@import 'common/network-dialog';
+@import 'common/osd';
+@import 'common/overview';
+@import 'common/panel';
+@import 'common/popovers';
+@import 'common/screen-shield';
+@import 'common/scrollbars';
+@import 'common/search-entry';
+@import 'common/switcher-popup';
+@import 'common/tiled-previews';
+@import 'common/workspace-switcher';
+@import 'widgets-46-0/app-grid';
+@import 'widgets-46-0/calendar';
+@import 'widgets-47-0/check-box';
+@import 'widgets-46-0/dash';
+@import 'widgets-47-0/dialogs';
+@import 'widgets-48-0/message-list';
+@import 'widgets-40-0/misc';
+@import 'widgets-48-0/notifications';
+@import 'widgets-40-0/overview';
+@import 'widgets-42-0/osd';
+@import 'widgets-40-0/panel';
+@import 'widgets-42-0/popovers';
+@import 'widgets-48-0/quick-settings';
+@import 'widgets-40-0/search-entry';
+@import 'widgets-46-0/search-results';
+@import 'widgets-42-0/screenshot';
+@import 'widgets-47-0/slider';
+@import 'widgets-47-0/switches';
+@import 'widgets-40-0/window-picker';
+@import 'widgets-40-0/workspace-thumbnails';

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

@@ -3,8 +3,14 @@
   width: 48px;
   height: 48px;
   border-radius: 24px; // radius equals the size of the box to give us the curve
-  background-color: lighten(transparentize($primary, 0.7), 30%);
-  box-shadow: 0 0 2px 2px lighten($primary, 20%);
+
+  @if $gnome_version == 'default' {
+    background-color: lighten(transparentize($primary, 0.7), 30%);
+    box-shadow: 0 0 2px 2px lighten($primary, 20%);
+  } @else {
+    background-color: st-lighten(st-transparentize($primary, 0.7), 30%);
+    box-shadow: 0 0 2px 2px st-lighten($primary, 20%);
+  }
 }
 
 // Pointer accessibility notifications
@@ -13,7 +19,11 @@
   height: 60px;
   -pie-border-width: 3px;
   -pie-border-color: $primary;
-  -pie-background-color: lighten(transparentize($primary, 0.7), 40%);
+  @if $gnome_version == 'default' {
+    -pie-background-color: lighten(transparentize($primary, 0.7), 40%);
+  } @else {
+    -pie-background-color: st-lighten(st-transparentize($primary, 0.7), 40%);
+  }
 }
 
 // Screen zoom/Magnifier

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

@@ -1,5 +1,13 @@
 /* Buttons */
 
+$primary-text: $white;
+
+@if $gnome_version == 'new' and $colortype == 'system' {
+  $primary-text: $white;
+} @else {
+  $primary-text: on($primary);
+}
+
 %button {
   @include button(normal);
   &:focus { @include button(focus); }
@@ -17,11 +25,11 @@
 }
 
 %default_button {
-  @include button(normal, $bc:$primary, $tc:on($primary),);
-  &:focus { @include button(focus, $bc:$primary, $tc:on($primary)); }
-  &:hover { @include button(hover, $bc:$primary, $tc:on($primary)); }
-  &:insensitive { @include button(insensitive, $bc:$primary, $tc:on($primary)); }
-  &:active { @include button(active, $bc:$primary, $tc:on($primary),); }
+  @include button(normal, $bc:$primary, $tc:$primary-text);
+  &:focus { @include button(focus, $bc:$primary, $tc:$primary-text); }
+  &:hover { @include button(hover, $bc:$primary, $tc:$primary-text); }
+  &:insensitive { @include button(insensitive, $bc:$primary, $tc:$primary-text); }
+  &:active { @include button(active, $bc:$primary, $tc:$primary-text); }
 }
 
 .button {
@@ -48,8 +56,9 @@
 
 .icon-button {
   border-radius: $circular_radius;
-  padding: $base_padding;
+  padding: $scaled_padding * 2;
   min-height: $scalable_icon_size;
+  @extend %button;
 
   StIcon {
     icon-size: $scalable_icon_size;

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

@@ -202,17 +202,25 @@
     }
 
     &:active {
-      background-color: darken($primary, 5%);
-      color: on($primary) !important;
+      @if $gnome_version == 'default' {
+        background-color: darken($primary, 5%);
+      } @else {
+        background-color: st-darken($primary, 5%);
+      }
+      color: $primary-text !important;
     }
 
     &:selected {
       background-color: $primary;
-      color: on($primary) !important;
+      color: $primary-text !important;
 
       &:hover, &:focus {
-        background-color: lighten($primary, 8%);
-        color: on($primary) !important;
+        @if $gnome_version == 'default' {
+          background-color: lighten($primary, 8%);
+        } @else {
+          background-color: st-lighten($primary, 8%);
+        }
+        color: $primary-text !important;
       }
     }
   }

src/sass/gnome-shell/common/_corner-ripple.scss

@@ -3,8 +3,14 @@
 $ripple_size: 50px;
 
 .ripple-box {
-  background-color: rgba($primary, 0.35);
-  box-shadow: 0 0 2px 2px lighten($primary, 20%);
+  @if $gnome_version == 'default' {
+    background-color: transparentize($primary, 0.65);
+    box-shadow: 0 0 2px 2px lighten($primary, 20%);
+  } @else {
+    background-color: st-transparentize($primary, 0.65);
+    box-shadow: 0 0 2px 2px st-lighten($primary, 20%);
+  }
+
   // plus + 2px for the border (box-shadow)
   width: $ripple_size + 2px;
   height: $ripple_size + 2px;

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

@@ -14,22 +14,37 @@
 }
 
 %last_dialog_button {
-  color: on($primary);
+  color: $primary-text;
   background-color: $primary;
 
   &:hover {
-    color: on($primary);
-    background-color: lighten($primary, 9%);
+    color: $primary-text;
+
+    @if $gnome_version == 'default' {
+      background-color: darken($primary, 9%);
+    } @else {
+      background-color: st-darken($primary, 9%);
+    }
   }
 
   &:active {
-    color: on($primary);
-    background-color: darken($primary, 5%);
+    color: $primary-text;
+
+    @if $gnome_version == 'default' {
+      background-color: darken($primary, 5%);
+    } @else {
+      background-color: st-darken($primary, 5%);
+    }
   }
 
   &:insensitive {
-    background-color: rgba($primary, 0.05);
-    color: rgba($primary, 0.35);
+    @if $gnome_version == 'default' {
+      background-color: transparentize($primary, 0.95);
+      color: transparentize($primary, 0.65);
+    } @else {
+      background-color: st-transparentize($primary, 0.95);
+      color: st-transparentize($primary, 0.65);
+    }
   }
 }
 
@@ -211,7 +226,7 @@
   &:hover, &:focus { background-color: overlay($popover, hover); }
   &:active {
     background-color: $primary;
-    color: on($primary);
+    color: $primary-text;
   }
 }
 

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

@@ -8,7 +8,7 @@ StEntry, %entry {
   color: $text;
   caret-color: $text;
   selection-background-color: $primary;
-  selected-color: on($primary);
+  selected-color: $primary-text;
   @include entry(normal);
   &:hover { @include entry(hover);}
   &:focus { @include entry(focus);}

src/sass/gnome-shell/common/_ibus-popup.scss

@@ -29,7 +29,7 @@
 .candidate-index {
   padding: 0 0.5em 0 0;
   color: $text-secondary;
-  .candidate-box:selected & { color: on($primary, secondary); }
+  .candidate-box:selected & { color: $primary-text; }
 }
 
 .candidate-box {
@@ -39,7 +39,7 @@
   color: $text-secondary;
   &:hover { background-color: $divider; color: $text; }
   &:active { background-color: $track; color: $text; }
-  &:selected { background-color: $primary; color: on($primary); }
+  &:selected { background-color: $primary; color: $primary-text; }
   &:last-child { margin-right: 0; }
 }
 

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

@@ -72,11 +72,18 @@ $default_key_bg_color: if($variant == 'light', #adb3bc, #4b4b4b);
   }
 
   &.enter-key { // enter key is suggested-action
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
 
-    &:focus, &:hover { color: on($primary); background-color: lighten($primary, 5%); }
-    &:checked, &:active { color: on($primary); background-color: darken($primary, 10%); }
+    &:focus, &:hover, &:checked, &:active { color: $primary-text; }
+
+    @if $gnome_version == 'default' {
+      &:focus, &:hover { background-color: lighten($primary, 5%); }
+      &:checked, &:active { background-color: darken($primary, 10%); }
+    } @else {
+      &:focus, &:hover { background-color: st-lighten($primary, 5%); }
+      &:checked, &:active { background-color: st-darken($primary, 10%); }
+    }
   }
 
   &.shift-key-uppercase {

src/sass/gnome-shell/common/_login-dialog.scss

@@ -17,7 +17,7 @@
 
   StEntry {
     selection-background-color: $primary;
-    selected-color: on($primary);
+    selected-color: $primary-text;
     padding: 4px 8px;
     min-height: $item_size - $base_padding;
     border-radius: $circular_radius;
@@ -37,16 +37,16 @@
   .modal-dialog-button {
     padding: 0 16px;
     border: none;
-    @include button(flat-normal, $tc: on($primary));
-    &:hover, &:focus { @include button(flat-hover, $tc: on($primary)); }
-    &:active { @include button(flat-active, $tc: on($primary)); }
-    &:insensitive { @include button(flat-insensitive, $tc: on($primary, disabled)); }
+    @include button(flat-normal, $tc: $primary-text);
+    &:hover, &:focus { @include button(flat-hover, $tc: $primary-text); }
+    &:active { @include button(flat-active, $tc: $primary-text); }
+    &:insensitive { @include button(flat-insensitive, $tc: rgba(white, 0.3)); }
 
     &:default {
-      @include button(normal, $tc: on($primary));
-      &:hover, &:focus { @include button(hover, $tc: on($primary)); }
-      &:active { @include button(active, $tc: on($primary)); }
-      &:insensitive { @include button(insensitive, $tc: on($primary, disabled)); }
+      @include button(normal, $tc: $primary-text);
+      &:hover, &:focus { @include button(hover, $tc: $primary-text); }
+      &:active { @include button(active, $tc: $primary-text); }
+      &:insensitive { @include button(insensitive, $tc: rgba(white, 0.3)); }
     }
   }
 

src/sass/gnome-shell/common/_looking-glass.scss

@@ -64,7 +64,7 @@
   StEntry {
     min-height: 22px;
     selection-background-color: $primary;
-    selected-color: on($primary);
+    selected-color: $primary-text;
   }
 
   .shell-link {

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

@@ -1,6 +1,10 @@
 // Rubberband for select-area screenshots
 .select-area-rubberband {
-  background-color: transparentize($primary, 0.7);
+  @if $gnome_version == 'default' {
+    background-color: transparentize($primary, 0.3);
+  } @else {
+    background-color: st-transparentize($primary, 0.3);
+  }
   border: 1px solid $primary;
   border-radius: $base_radius;
 }

src/sass/gnome-shell/common/_network-dialog.scss

@@ -45,7 +45,7 @@
 
   &:selected {
     background-color: $primary;
-    color: on($primary);
+    color: $primary-text;
   }
 
   &:hover, &:focus { background-color: $divider; }

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

@@ -71,7 +71,7 @@
   -shell-counter-overlap-x: 3px;
   -shell-counter-overlap-y: 3px;
   background-color: $primary;
-  color: on($primary);
+  color: $primary-text;
   border: 2px solid $track;
   box-shadow: 0 2px 2px rgba(black, 0.5);
   border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;

src/sass/gnome-shell/common/_screen-shield.scss

@@ -54,7 +54,7 @@
 .unlock-dialog-notification-count-text {
   weight: bold;
   padding: 0 6px;
-  color: on($primary);
+  color: $primary-text;
   background-color: $primary;
   border-radius: $circular_radius;
   margin-right: 12px;
@@ -68,7 +68,12 @@
 #unlockDialogNotifications {
   StButton#vhandle, StButton#hhandle {
     background-color: transparentize($background, 0.7);
-    &:hover, &:focus { background-color: transparentize($background,0.5); }
-    &:active { background-color: transparentize($primary, 0.5); }
+    &:hover, &:focus { background-color: transparentize($background, 0.5); }
+
+    @if $gnome_version == 'default' {
+      &:active { background-color: transparentize($primary, 0.5); }
+    } @else {
+      &:active { background-color: st-transparentize($primary, 0.5); }
+    }
   }
 }

src/sass/gnome-shell/common/_search-entry.scss

@@ -7,7 +7,7 @@
   border-radius: $base_radius;
   caret-color: $text;
   selection-background-color: $divider;
-  selected-color: on($primary) !important;
+  selected-color: $primary-text !important;
   @include entry(normal, $bc: $base);
 
   &:hover {

src/sass/gnome-shell/common/_switcher-popup.scss

@@ -22,7 +22,7 @@
 
     &:selected {
       background-color: $primary;
-      color: on($primary);
+      color: $primary-text;
     }
   }
 

src/sass/gnome-shell/common/_tiled-previews.scss

@@ -4,8 +4,13 @@
 $tile_corner_radius: $base_radius + 1px;
 
 .tile-preview {
-  background-color: rgba($primary, 0.3);
   border: 1px solid $primary;
+
+  @if $gnome_version == 'default' {
+    background-color: transparentize($primary, 0.7);
+  } @else {
+    background-color: st-transparentize($primary, 0.7);
+  }
 }
 
 .tile-preview-left.on-primary {

src/sass/gnome-shell/common/_workspace-switcher.scss

@@ -30,7 +30,7 @@
 .ws-switcher-active-right {
   height: 52px;
   background-color: $primary;
-  color: on($primary);
+  color: $primary-text;
   border-radius: $base_radius + 3px;
   border: none;
 }

src/sass/gnome-shell/extensions-3-28/_dash-to-dock.scss

@@ -25,7 +25,7 @@
   }
 
   .notification-badge {
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
     border-radius: $circular_radius;

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

@@ -21,12 +21,12 @@
   }
 
   .notification-badge {
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
     border-radius: $circular_radius;
     margin: 2px;
-    padding: 0.25em 0.6em;
+    padding: 0.2em 0.4em;
     font-weight: bold;
     text-align: center;
   }

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

@@ -18,18 +18,18 @@
     color: white;
     background-color: rgba(black, 0.75);
     text-align: center;
-    padding: 0.25em 0.4em;
+    padding: 0.2em 0.4em;
   }
 
   .notification-badge {
     min-width: 16px;
     min-height: 16px;
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
     border-radius: $circular-radius;
     margin: 2px 3px 5px;
-    padding: 0.25em 0.4em;
+    padding: 0.2em 0.4em;
     font-weight: bold;
     text-align: center;
   }

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

@@ -122,7 +122,11 @@
 }
 
 .pop-shell-overlay {
-  background-color: rgba($primary, 0.3);
+  @if $gnome_version == 'default' {
+    background-color: transparentize($primary, 0.7);
+  } @else {
+    background-color: st-transparentize($primary, 0.7);
+  }
 }
 
 .pop-shell-search-element:select{

src/sass/gnome-shell/widgets-3-28/_app-grid.scss

@@ -109,7 +109,7 @@ $app_icon_spacing: 6px;
   }
 
   &:checked {
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
     box-shadow: none;
   }

src/sass/gnome-shell/widgets-42-0/_quick-settings.scss

@@ -35,16 +35,16 @@
 
   &:checked {
     background-color: $primary !important;
-    color: on($primary);
+    color: $primary-text;
 
     &:hover {
       background-color: mix($text, $primary, 6%) !important;
-      color: on($primary);
+      color: $primary-text;
     }
 
     &:active {
       background-color: mix($text, $primary, 15%) !important;
-      color: on($primary);
+      color: $primary-text;
     }
   }
 
@@ -145,7 +145,7 @@
 
       &.active {
         background-color: $primary !important;
-        color: on($primary);
+        color: $primary-text;
       }
     }
 

src/sass/gnome-shell/widgets-42-0/_screenshot.scss

@@ -166,17 +166,25 @@ $screenshot_ui_button_red: $error;
 .screenshot-ui-window-selector-window {
   &:hover {
     .screenshot-ui-window-selector-window-border {
-      border-color: darken($primary, 15%);
+      @if $gnome_version == 'default' {
+        border-color: darken($primary, 15%);
+      } @else {
+        border-color: st-darken($primary, 15%);
+      }
     }
   }
   &:checked {
     .screenshot-ui-window-selector-window-border {
       border-color: $primary;
-      background-color: transparentize($primary, 0.8);
+      @if $gnome_version == 'default' {
+        background-color: transparentize($primary, 0.8);
+      } @else {
+        background-color: st-transparentize($primary, 0.8);
+      }
     }
 
     .screenshot-ui-window-selector-check {
-      color: on($primary);
+      color: $primary-text;
       background-color: $primary;
     }
   }

src/sass/gnome-shell/widgets-44-0/_quick-settings.scss

@@ -38,16 +38,16 @@
 
   &:checked {
     background-color: $primary !important;
-    color: on($primary);
+    color: $primary-text;
 
     &:hover {
       background-color: mix($text, $primary, 6%) !important;
-      color: on($primary);
+      color: $primary-text;
     }
 
     &:active {
       background-color: mix($text, $primary, 15%) !important;
-      color: on($primary);
+      color: $primary-text;
     }
   }
 
@@ -100,16 +100,16 @@
   
     &:checked {
       background-color: $primary !important;
-      color: on($primary);
+      color: $primary-text;
   
       &:hover {
         background-color: mix($text, $primary, 6%) !important;
-        color: on($primary);
+        color: $primary-text;
       }
   
       &:active {
         background-color: mix($text, $primary, 15%) !important;
-        color: on($primary);
+        color: $primary-text;
       }
     }
 
@@ -183,7 +183,7 @@
 
       &.active {
         background-color: $primary !important;
-        color: on($primary);
+        color: $primary-text;
       }
     }
 

src/sass/gnome-shell/widgets-46-0/_app-grid.scss

@@ -132,7 +132,16 @@ $app_folder_size: 720px;
     > StIcon { icon-size: $base_icon_size; }
 
     &:hover { background-color: overlay($osd, hover); }
-    &:checked, &:active { background-color: $inverse-indicator; color: on($inverse-indicator); }
+
+    &:checked, &:active {
+      background-color: $inverse-indicator;
+
+      @if $gnome_version == 'default' {
+        color: on($inverse-indicator);
+      } @else {
+        color: if($theme == 'grey', rgba(black, 0.87), white);
+      }
+    }
   }
 
   .page-indicators {

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

@@ -206,17 +206,25 @@
     }
 
     &:active {
-      background-color: darken($primary, 5%);
-      color: on($primary) !important;
+      color: $primary-text !important;
+      @if $gnome_version == 'default' {
+        background-color: darken($primary, 5%);
+      } @else {
+        background-color: st-darken($primary, 5%);
+      }
     }
 
     &:selected {
       background-color: $primary;
-      color: on($primary) !important;
+      color: $primary-text !important;
 
       &:hover, &:focus {
-        background-color: lighten($primary, 8%);
-        color: on($primary) !important;
+        color: $primary-text !important;
+        @if $gnome_version == 'default' {
+          background-color: darken($primary, 8%);
+        } @else {
+          background-color: st-darken($primary, 8%);
+        }
       }
     }
   }

src/sass/gnome-shell/widgets-46-0/_quick-settings.scss

@@ -38,16 +38,24 @@
 
   &:checked {
     background-color: $primary !important;
-    color: on($primary);
+    color: $primary-text;
 
     &:hover {
-      background-color: mix($text, $primary, 6%) !important;
-      color: on($primary);
+      color: $primary-text;
+      @if $gnome_version == 'default' {
+        background-color: mix($text, $primary, 6%) !important;
+      } @else {
+        background-color: st-mix($text, $primary, 6%) !important;
+      }
     }
 
     &:active {
-      background-color: mix($text, $primary, 15%) !important;
-      color: on($primary);
+      color: $primary-text;
+      @if $gnome_version == 'default' {
+        background-color: mix($text, $primary, 15%) !important;
+      } @else {
+        background-color: st-mix($text, $primary, 15%) !important;
+      }
     }
   }
 
@@ -93,23 +101,31 @@
     &:hover {
       background-color: $divider !important;
     }
-  
+
     &:active {
       background-color: rgba($text, 0.15) !important;
     }
-  
+
     &:checked {
       background-color: $primary !important;
-      color: on($primary);
+      color: $primary-text;
   
       &:hover {
-        background-color: mix($text, $primary, 6%) !important;
-        color: on($primary);
+        color: $primary-text;
+        @if $gnome_version == 'default' {
+          background-color: mix($text, $primary, 6%) !important;
+        } @else {
+          background-color: st-mix($text, $primary, 6%) !important;
+        }
       }
   
       &:active {
-        background-color: mix($text, $primary, 15%) !important;
-        color: on($primary);
+        color: $primary-text;
+        @if $gnome_version == 'default' {
+          background-color: mix($text, $primary, 15%) !important;
+        } @else {
+          background-color: st-mix($text, $primary, 15%) !important;
+        }
       }
     }
 
@@ -183,7 +199,7 @@
 
       &.active {
         background-color: $primary !important;
-        color: on($primary);
+        color: $primary-text;
       }
     }
 
@@ -256,7 +272,7 @@
     icon-size: $base_icon_size * 2 !important;
     -st-icon-style: regular !important;
   }
-  & .close-button {
+  & .icon-button {
     @extend .icon-button;
     padding: $base_padding;
   }

src/sass/gnome-shell/widgets-47-0/_check-box.scss

@@ -4,50 +4,46 @@
   StBoxLayout { spacing: .8em; }
 
   StBin {
-    width: 24px;
-    height: 24px;
-    padding: $base_padding / 2;
+    border-radius: 7px;
+    padding: 2px;
   }
 
-  StBin, &:focus StBin {
-    background-image: url("assets/checkbox-off.svg");
-    background-color: transparent;
-    box-shadow: none;
-  }
-
-  &:hover StBin {
-    background-color: $divider;
-  }
-
-  &:active StBin {
-    background-color: $track;
-  }
-
-  &:checked StBin, &:focus:checked StBin {
-    @if $theme == 'default' {
-      background-image: url("assets/checkbox#{$asset_suffix}.svg");
-    }
-    @else {
-      background-image: url("assets/checkbox.svg");
-    }
+  &:focus StBin {
+    // Trick due to St limitations. It needs a background to draw a box-shadow
+    background-color: rgba(0, 0, 0, 0.01);
+    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
   }
 
   StIcon {
-    icon-size: 0;
-    padding: 0;
+    icon-size: 14px;
+    padding: 1px;
+
     color: transparent;
-    border: none;
+    border-radius: 6px;
+    border: 2px solid transparentize(if($variant == 'light', black, white), .85);
+  }
+
+  &:hover StIcon {
+    border-color: transparentize(if($variant == 'light', black, white), .8);
   }
 
-  &:hover StIcon,
   &:active StIcon {
-    border: none;
+    border-color: transparentize(if($variant == 'light', black, white), .7);
   }
 
-  &:checked StIcon,
-  &:checked:hover StIcon,
-  &:checked:active StIcon {
-    background-color: transparent;
-    color: transparent;
+  &:checked StIcon {
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
+    border-color: transparent;
   }
-}
+
+  &:checked:hover StIcon {
+    background-color: st-lighten(-st-accent-color, 5%);
+    color: st-lighten(-st-accent-fg-color, 5%);
+  }
+
+  &:checked:active StIcon {
+    background-color: st-darken(-st-accent-color, 7%);
+    color: st-darken(-st-accent-fg-color, 7%);
+  }
+}

src/sass/gnome-shell/widgets-47-0/_dialogs.scss

@@ -2,7 +2,7 @@
 
 %theme_dialogs {
   background-color: $popover;
-  border-radius: $modal_radius + $base_padding / 2;
+  border-radius: $modal_radius + $base_padding;
 
   @if $rimless == 'false' {
     border: 1px solid $window-border;
@@ -30,22 +30,37 @@
   }
 
   &:last-child {
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
 
     &:hover {
-      color: on($primary);
-      background-color: lighten($primary, 9%);
+      color: $primary-text;
+
+      @if $gnome_version == 'default' {
+        background-color: lighten($primary, 9%);
+      } @else {
+        background-color: st-lighten($primary, 9%);
+      }
     }
 
     &:active {
-      color: on($primary);
-      background-color: darken($primary, 5%);
+      color: $primary-text;
+
+      @if $gnome_version == 'default' {
+        background-color: darken($primary, 5%);
+      } @else {
+        background-color: st-darken($primary, 5%);
+      }
     }
 
    &:insensitive {
-      background-color: rgba($primary, 0.05);
-      color: rgba($primary, 0.35);
+      @if $gnome_version == 'default' {
+        background-color: transparentize($primary, 0.95);
+        color: transparentize($primary, 0.65);
+      } @else {
+        background-color: st-transparentize($primary, 0.95);
+        color: st-transparentize($primary, 0.65);
+      }
     }
   }
 }
@@ -53,7 +68,7 @@
 // modal dialog
 .modal-dialog {
   color: $text-secondary;
-  padding: $base_padding * 1.5;
+  padding: $base_padding * 2;
   @extend %theme_dialogs;
 
   .modal-dialog-content-box {
@@ -211,7 +226,7 @@
   &:hover, &:focus { background-color: overlay($popover, hover); }
   &:active {
     background-color: $primary;
-    color: on($primary);
+    color: $primary-text;
   }
 }
 

src/sass/gnome-shell/widgets-47-0/_message-list.scss

@@ -58,7 +58,11 @@
     border-style: solid;
 
     &:focus {
-      border-color: transparentize($primary, 0.4);
+      @if $gnome_version == 'default' {
+        border-color: transparentize($primary, 0.4);
+      } @else {
+        border-color: st-transparentize($primary, 0.4);
+      }
     }
   }
 }

src/sass/gnome-shell/widgets-47-0/_slider.scss

@@ -17,6 +17,10 @@ $slide_size: if($compact == 'false', 7px, 6px);
   -barlevel-overdrive-separator-width: 2px;
 
   &:hover {
-    color: lighten($slide_color, 7%);
+    @if $gnome_version == 'default' and $variant == 'dark' and $theme == 'grey' {
+      color: lighten($slide_color, 7%);
+    } @else {
+      color: st-lighten($slide_color, 7%);
+    }
   }
 }

src/sass/gnome-shell/widgets-47-0/_switches.scss

@@ -1,34 +1,49 @@
 /* Switches */
 
+$switch_width: 46px;
+$switch_handle_size: 20px;
+
 .toggle-switch {
-  width: 46px;
-  height: 24px;
-  background-size: contain;
-  background-color: transparent;
-  color: transparent;
+  width: $switch_width;
+  border-radius: $circular-radius;
+  transition-duration: 100ms;
+  color: $text;
+  background: transparentize(if($variant == 'light', black, white), .85);
 
-  &, .popup-sub-menu & {
-    background-image: url("assets/toggle-off.svg");
-
-    &:checked {
-      background-image: url("assets/toggle-on#{$asset_suffix}.svg");
-    }
+  &:hover {
+    background: transparentize(if($variant == 'light', black, white), .8);
   }
 
   StIcon {
-    icon-size: 0;
+    icon-size: $base_icon_size;
   }
 
   .handle {
-    margin: 0;
-    background: none;
-    box-shadow: none;
-    transition-duration: 0;
+    margin: 3px;
+    width: $switch_handle_size;
+    height: $switch_handle_size;
+    border-radius: $circular-radius;
+    background: if($variant == 'light', white, mix(white, $background, 80%));
+    box-shadow: 0 2px 4px transparentize(black, .8);
+    transition-duration: 100ms;
   }
 
   &:checked {
+    background: $primary;
+    color: $primary-text;
+
+    &:hover {
+      @if $gnome_version == 'default' {
+        background-color: lighten($primary, 5%);
+        color: lighten($primary-text, 5%);
+      } @else {
+        background-color: st-lighten($primary, 5%);
+        color: st-lighten($primary-text, 5%);
+      }
+    }
+
     .handle {
-      background: none;
+      background: white;
     }
   }
-}
+}

src/sass/gnome-shell/widgets-48-0/_message-list.scss

@@ -0,0 +1,269 @@
+/* Message List */
+// a.k.a. notifications in the menu
+
+.message-list {
+  width: if($compact == 'true', 25.5em, 29em);
+  text-shadow: none;
+  border: solid $border;
+  padding: 0;
+
+  // padding and margins to account for scrollbar
+  &:ltr { margin-left: 0; margin-right: $base_margin * 2; padding-right: 0; border-right-width: 0; }
+  &:rtl { margin-right: 0; margin-left: $base_margin * 2; padding-left: 0; border-left-width: 0; }
+
+  .message-list-placeholder {
+    @extend %title_2;
+    spacing: $base_spacing * 2;
+    color: $text-secondary-disabled;
+
+    // icon size and color
+    > StIcon {
+      icon-size: 96px; // non-em asset size
+      margin-bottom: $base_margin * 3;
+      -st-icon-style: symbolic;
+    }
+  }
+}
+
+.message-view {
+  // to account for scrollbar
+  &:ltr { margin-right: $base_margin * 3; }
+  &:rtl { margin-left: $base_margin * 3; }
+
+  -st-vfade-offset: 68px;
+
+  .message {
+    margin-bottom: $base_padding * 2 !important;
+  }
+}
+
+// do-not-disturb + clear button
+.message-list-controls {
+  margin: ($base_margin * 2) ($base_margin * 4) 0;
+  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
+  padding: $base_padding;
+  spacing: $base_padding;
+  @extend %heading;
+
+  .dnd-button {
+    // We need this because the focus outline isn't inset like for the buttons
+    // so the dnd button would grow when it gets focus if we didn't change only
+    // its color when focusing.
+    border-width: 2px;
+    border-color: transparent;
+    border-radius: 32px;
+    border-style: solid;
+
+    &:focus {
+      @if $gnome_version == 'default' {
+        border-color: transparentize($primary, 0.4);
+      } @else {
+        border-color: st-transparentize($primary, 0.4);
+      }
+    }
+  }
+}
+
+// message notification group
+.message-notification-group {
+  spacing: $base_padding * 2;
+
+  .message-group-header {
+    padding: $base_padding;
+    .message-group-title {
+      @extend %title_2;
+      margin: 0 $base_margin;
+    }
+  }
+
+  // close button
+  .message-collapse-button {
+    @extend .icon-button;
+    padding: 4px !important;
+    border: 4px transparent solid;
+  }
+}
+
+// message bubbles
+.message {
+  padding: $base_padding;
+  margin: $base_spacing / 2;
+  border-radius: $window_radius;
+
+  .popup-menu & {
+    border-radius: $base_radius;
+    color: $text-secondary;
+    background-color: mix($text, $base, 5%) !important;
+
+    &:hover {
+      background-color: mix($text, $base, 10%) !important;
+    }
+
+    &:active {
+      background-color: mix($text, $base, 15%) !important;
+    }
+
+    .notification-button { border-radius: $base_radius / 2; }
+  }
+
+  &:second-in-stack {
+    background-color: mix($text, $base, 8%) !important;
+    box-shadow: none;
+  }
+
+  &:lower-in-stack {
+    background-color: mix($text, $base, 11%) !important;
+    box-shadow: none;
+  }
+
+  // subtract side padding to accommodate the close button's border
+  &:ltr { padding-right: $base_padding; }
+  &:rtl { padding-left: $base_padding; }
+
+  // message header
+  .message-header {
+    padding: 0 $scaled_padding;
+    spacing: $base_padding;
+    color: $text-disabled;
+
+    // remove side padding to accommodate the close button
+    &:ltr { padding-right: 0; }
+    &:rtl { padding-left: 0; }
+
+    // header source icon
+    .message-source-icon {
+      icon-size: $base_icon_size; // 16px
+      -st-icon-style: symbolic;
+    }
+
+    // box that contains the source icon, source name and timestamp of the message
+    .message-header-content {
+      spacing: $base_padding;
+      min-height: to_em(24px);
+      padding-bottom: $base_padding;
+
+      // header source title
+      .message-source-title {
+        font-weight: bold;
+      }
+
+      // Time label
+      .event-time {
+        @extend %caption;
+        // Add bottom padding to align the app name with the time horizontally
+        padding-bottom: to_em(1px);
+        color: $text-disabled;
+
+        &:ltr { text-align: right; }
+        &:rtl { text-align: left; }
+      }
+    }
+
+    // buttons in the message header
+    .message-expand-button,
+    .message-close-button {
+      @extend .icon-button;
+      color: $text;
+      background-color: $fill;
+      padding: 4px;
+      border: none;
+
+      &, &:hover, &:active {
+        color: $text;
+      }
+  
+      &:hover, &:focus { background-color: $divider; }
+      &:active, &:active:hover { background-color: $track; }
+      &:insensitive { background-color: $fill;}
+    }
+
+    .message-expand-button {
+      padding: 4px;
+      border: none;
+
+      &:ltr { margin-right: $base_padding; }
+      &:rtl { margin-left: $base_padding; }
+    }
+  }
+
+  // container for message contents
+  .message-box {
+    padding: $base_padding;
+    margin: $base_padding;
+    margin-top: 0;
+    spacing: $base_padding;
+
+    // icon of the message
+    .message-icon {
+      &:ltr { margin-right: $base_padding; }
+      &:rtl { margin-left: $base_padding; }
+
+      // icon size and color
+      icon-size: $base_icon_size * 3; // 48px
+      -st-icon-style: symbolic;
+
+      &.message-themed-icon {
+        border-radius: $circular_radius; // is circular
+        icon-size: $base_icon_size;
+        min-width: $base_icon_size * 3 - $base_padding * 2;
+        min-height: $base_icon_size * 3 - $base_padding * 2;
+        color: $text-disabled;
+        background-color: $divider;
+        padding: $base_padding;
+      }
+    }
+
+    // If the header isn't displayed we need more top margin
+    &:first-child {
+      margin-top: $base_padding * 2;
+    }
+
+    // text of the message
+    .message-content {
+      spacing: $base_margin;
+
+      // message title
+      .message-title {
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// URLs in messages
+.url-highlighter {
+  link-color: $link;
+}
+
+.message-media-control {
+  margin: 4px $base_padding;
+  padding: $base_padding * 2;
+  border-radius: $circular_radius;
+  border: none;
+  color: $text-secondary;
+
+  &:hover, &:focus { background-color: $divider; }
+  &:active { background-color: $track; }
+
+  &:hover, &:focus, &:active {
+    color: $text;
+  }
+
+  &:insensitive {
+    color: $text-disabled;
+  }
+
+  StIcon { icon-size: $base_icon_size; }
+}
+
+.media-message {
+  // album-art
+  .message-icon {
+    border-radius: $base_radius / 2 !important;
+    padding: 0;
+
+    &.message-themed-icon {
+      icon-size: $base_icon_size * 2 !important; // 32px
+    }
+  }
+}

src/sass/gnome-shell/widgets-48-0/_notifications.scss

@@ -0,0 +1,62 @@
+/* Notifications & Message Tray */
+
+$notification_banner_height: 64px;
+$notification_banner_width: 34em;
+
+// Banner notifications
+.notification-banner {
+  min-height: $notification_banner_height;
+  width: $notification_banner_width;
+  margin: 12px 8px 8px;
+  border-radius: $base_radius;
+  color: $text-secondary;
+  background-color: $popover;
+  text-shadow: none;
+  border-radius: $base_radius + $base_padding * 2;
+  padding: $base_padding;
+
+  @if $rimless == 'false' and $variant == 'dark' {
+    border: 1px solid $window-border;
+    box-shadow: inset 0 0 0 1px highlight($popover);
+  } @else {
+    border: none;
+    box-shadow: 0 3px 6px rgba(black, 0.25);
+  }
+
+  &:hover, &:active, &:focus {
+    color: $text;
+    background-color: $popover;
+  }
+}
+
+.notification-buttons-bin {
+  border: none;
+  spacing: 0;
+}
+
+.notification-button {
+  min-height: $item_size + $base_padding;
+  padding: 0 $base_padding * 3;
+  background-color: $fill;
+  color: $text-secondary;
+  font-weight: 500;
+  border: none;
+  border-radius: $base_radius;
+
+  &:focus {
+    background-color: transparent;
+    color: $text;
+    box-shadow: inset 0 0 0 2px $divider;
+  }
+
+  &:hover, &:focus:hover {
+    background-color: $divider;
+    color: $text;
+    box-shadow: none;
+  }
+
+  &:active {
+    background-color: $track;
+    color: $text;
+  }
+}

src/sass/gnome-shell/widgets-48-0/_quick-settings.scss

@@ -0,0 +1,290 @@
+.quick-settings {
+  padding: $base_padding * 3 !important;
+  border-radius: $base_radius + $base_padding * 3 !important;
+  margin-top: 4px !important;
+
+  .icon-button, .button {
+    padding: $base_padding * 1.75;
+
+    > StIcon {
+      icon-size: $base_icon_size;
+    }
+  }
+}
+
+.quick-settings-grid {
+  spacing-rows: $base_padding * 2;
+  spacing-columns: $base_padding * 2;
+}
+
+.quick-toggle, .quick-toggle-has-menu {
+  border-radius: $base_radius;
+  min-width: 12em;
+  max-width: 12em;
+  min-height: $scalable_icon_size * 3; // use icon size so the button scales
+  border: none;
+}
+
+.quick-toggle {
+  background-color: $button !important;
+
+  &:hover {
+    background-color: $divider !important;
+  }
+
+  &:active {
+    background-color: rgba($text, 0.15) !important;
+  }
+
+  &:checked {
+    background-color: $primary !important;
+    color: $primary-text;
+
+    &:hover {
+      color: $primary-text;
+      @if $gnome_version == 'default' {
+        background-color: mix($text, $primary, 6%) !important;
+      } @else {
+        background-color: st-mix($text, $primary, 6%) !important;
+      }
+    }
+
+    &:active {
+      color: $primary-text;
+      @if $gnome_version == 'default' {
+        background-color: mix($text, $primary, 15%) !important;
+      } @else {
+        background-color: st-mix($text, $primary, 15%) !important;
+      }
+    }
+  }
+
+  & > StBoxLayout { spacing: $base_padding * 1.5; }
+
+  /* Move padding into the box; this is to allow menu arrows
+     to extend to the border */
+  &.button { padding: 0; }
+  & > StBoxLayout { padding: 0 $base_padding * 2; }
+  &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
+  &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
+
+  .quick-toggle-title {
+    @extend %heading;
+  }
+
+  .quick-toggle-subtitle {
+    @extend %caption;
+    font-weight: normal;
+  }
+
+  .quick-toggle-icon { icon-size: $base_icon_size; }
+}
+
+.quick-toggle-has-menu {
+  & .quick-toggle {
+    min-width: auto;
+    max-width: auto;
+
+    &:ltr { border-radius: $base_radius 0 0 $base_radius; }
+    &:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
+    &:rtl { border-radius: 0 $base_radius $base_radius 0; }
+    &:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
+
+    &:ltr:last-child { border-radius: $base_radius; }
+    &:rtl:last-child { border-radius: $base_radius; }
+  }
+
+  .quick-toggle-menu-button {
+    background-color: $button !important;
+    padding: $base_padding $base_padding * 1.75;
+    border: none !important;
+    color: $text;
+
+    &:hover {
+      background-color: $divider !important;
+    }
+
+    &:active {
+      background-color: rgba($text, 0.15) !important;
+    }
+
+    &:checked {
+      background-color: $primary !important;
+      color: $primary-text;
+  
+      &:hover {
+        color: $primary-text;
+        @if $gnome_version == 'default' {
+          background-color: mix($text, $primary, 6%) !important;
+        } @else {
+          background-color: st-mix($text, $primary, 6%) !important;
+        }
+      }
+  
+      &:active {
+        color: $primary-text;
+        @if $gnome_version == 'default' {
+          background-color: mix($text, $primary, 15%) !important;
+        } @else {
+          background-color: st-mix($text, $primary, 15%) !important;
+        }
+      }
+    }
+
+    &:ltr { border-radius: 0 $base_radius $base_radius 0; }
+    &:rtl { border-radius: $base_radius 0 0 $base_radius; }
+  }
+
+  .quick-toggle-separator {
+    width: 0;
+  }
+}
+
+.quick-slider {
+  & > StBoxLayout { spacing: $base_padding; }
+
+  .icon-button {
+    padding: $base_padding + 2px;
+  }
+
+  .slider-bin {
+    &:focus { @include button(focus); }
+    padding: $base_padding;
+    border-radius: $circular_radius;
+  }
+}
+
+.quick-toggle-menu {
+  background-color: $popover !important;
+  color: $text !important;
+  border-radius: $base_radius + $base_padding * 2 !important;
+  padding: $scaled_padding * 2;
+  margin: $base_padding * 2 $base_padding * 3 0;
+  border: none;
+  box-shadow: 0 1px 3px rgba(black, 0.15);
+
+  &:insensitive {
+    // override insensitive style on submenu
+    @include button(normal);
+  }
+
+  .popup-menu-item {
+    border-radius: $base_radius !important;
+
+    &:focus, &:hover, &.selected {
+      color: $text !important;
+      background-color: rgba($text, 0.1) !important;
+    }
+
+    &:active {
+      color: $text !important;
+      background-color: rgba($text, 0.2) !important;
+    }
+
+    > StIcon {
+      -st-icon-style: symbolic;
+      icon-size: $base_icon_size;
+    }
+  }
+
+  .popup-separator-menu-item {
+    padding: 0  !important;
+  }
+
+  & .header {
+    spacing-rows: $base_padding * 0.5;
+    spacing-columns: $base_padding * 2;
+    padding-bottom: $base_padding * 2;
+
+    & .icon {
+      icon-size: $medium_icon_size; // a non-standard symbolic size but ok
+      border-radius: $base_radius;
+      padding: 1.5 * $base_padding;
+      background-color: on($popover, divider) !important;
+
+      &.active {
+        background-color: $primary !important;
+        color: $primary-text;
+      }
+    }
+
+    & .title {
+      @extend %title_3;
+    }
+
+    & .subtitle {
+      @extend %caption_heading;
+    }
+  }
+}
+
+.quick-settings-system-item {
+  & > StBoxLayout { spacing: $base_padding * 2; }
+
+  .icon-button {
+    border-radius: $base_radius;
+
+    > StIcon {
+      -st-icon-style: symbolic;
+      icon-size: $base_icon_size;
+    }
+  }
+
+  & .power-item {
+    min-height: 0;
+    min-width: 0;
+
+    &:insensitive {
+      @include button(normal);
+      background-color: transparent;
+    }
+  }
+}
+
+.nm-network-item {
+  .wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic
+}
+
+.bt-device-item {
+  .popup-menu-icon { -st-icon-style: symbolic; }
+}
+
+.bt-menu-placeholder.popup-menu-item {
+  @extend %title_4;
+  text-align: center;
+
+  padding: 2em 4em;
+}
+
+.device-subtitle { color: $text-disabled; }
+
+.keyboard-brightness-level {
+  spacing: $base_padding;
+
+  .button:checked { @extend %default_button; }
+}
+
+// background apps
+
+.background-apps-quick-toggle {
+  min-height: to_em(40px);
+  background-color: transparent;
+
+  & StIcon { icon-size: $base_icon_size !important; }
+}
+
+.background-app-item {
+  & .title { @extend %heading; }
+  & .subtitle { @extend %caption; }
+  & .popup-menu-icon {
+    icon-size: $medium_icon_size !important;
+    -st-icon-style: regular !important;
+  }
+  & .icon-button {
+    padding: $base_padding;
+  }
+  & .spinner {
+    padding: $base_padding;
+  }
+  &.popup-inactive-menu-item { color: $text; }
+}

src/sass/gtk/_common-3.0.scss

@@ -178,14 +178,16 @@ iconview {
   &:hover, &:selected { border-radius: $corner-radius; }
 }
 
+%rubberband,
 .rubberband,
 rubberband {
+  // border-radius: 3px;
   border: 1px solid $primary;
   background-color: rgba($primary, 0.3);
 }
 
 flowbox {
-  rubberband { @extend rubberband; }
+  rubberband { @extend %rubberband; }
 
   flowboxchild {
     padding: $space-size / 2;
@@ -1493,7 +1495,7 @@ treeview.view {
     @extend %selected_items;
   }
 
-  rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
+  rubberband { @extend %rubberband; } // to avoid borders being overridden by the previously set props
 
   &.separator {
     min-height: $space-size;
@@ -2012,7 +2014,7 @@ notebook {
       }
 
       // colors the button like the label, overridden otherwise
-      button.flat {
+      button.flat, button.close-button {
         @extend %small-button;
 
         &:last-child {
@@ -2025,11 +2027,6 @@ notebook {
           margin-right: $space-size;
         }
       }
-
-      button.close-button {
-        min-width: $small-size;
-        min-height: $small-size;
-      }
     }
 
     &.top,
@@ -3670,7 +3667,7 @@ colorchooser .popover.osd {
 
   // &:hover { -gtk-icon-effect: highlight; }
 
-  rubberband, .rubberband { @extend rubberband; }
+  rubberband, .rubberband { @extend %rubberband; }
 }
 
 // .scale-popup {
@@ -3991,11 +3988,15 @@ stackswitcher {
   border: none;
 
   &.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
-    margin: 0 0;
+    margin: 0;
     background-color: transparent;
     border-radius: $corner-radius;
     padding: ($medium-size - 24px - $space-size) / 2 ($medium-size - 16px) / 2;
 
+    + button {
+      margin-left: $space-size / 2;
+    }
+
     &.text-button { min-width: 100px; }
 
     &:focus:not(:hover):not(:checked) { box-shadow: none; }

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

@@ -82,26 +82,58 @@ $nautilus: $base-alt;
     &, placessidebar { border-radius: 0; }
   }
 
-  // Floating status bar
   .floating-bar {
-    min-height: 32px;
-    padding: 0;
     margin: $space-size;
-    border: none;
+    padding: 2px;
+    box-shadow: $shadow-z3;
     border-radius: $corner-radius;
     background-color: $primary;
     color: on($primary);
-    box-shadow: $shadow-z3;
+    border: none;
 
     button {
-      margin: (32px - $small-size) / 2;
-      color: on($primary);
-
-      @extend %small-button;
+      @extend %button-on-dark;
+      min-height: 16px;
+      min-width: 16px;
+      padding: 2px;
+      margin: $space-size - 4px;
     }
   }
 }
 
+// Floating status bar
+.floating-bar {
+  min-height: 16px + $space-size * 2;
+  padding: 0;
+  // margin: $space-size;
+  border: 1px solid $solid-border;
+  border-radius: 0;
+  background-color: $base;
+  color: $text;
+  // box-shadow: $shadow-z3;
+
+  &.bottom.right {
+    border-top-left-radius: $corner-radius;
+    border-right: none;
+    border-bottom: none;
+  }
+
+  &.bottom.left {
+    border-top-right-radius: $corner-radius;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  button {
+    min-height: 16px;
+    min-width: 16px;
+    padding: 0;
+    margin: $space-size;
+    border-radius: $circular-radius;
+    @extend %button-flat;
+  }
+}
+
 // .nautilus-canvas-item {
 //   border-radius: $corner-radius;
 // }

src/sass/gtk/apps/_misc.scss

@@ -293,10 +293,10 @@ window.background:not(.csd) {
 }
 
 #Statusbar {
-  padding-left: 8px;
+  padding: 3px 0 3px 8px;
 
-  spinbutton {
-    margin: 6px 0;
+  spinbutton, box > button.flat {
+    margin: 3px 0;
   }
 }
 
@@ -338,14 +338,27 @@ window.background:not(.csd) {
   }
 }
 
-scrolledwindow#DialogNotebook {
-  > viewport.frame > notebook.frame {
-    button.close-button {
-      image { padding: 4px; }
+window.bright.symbolic {
+  scrolledwindow > viewport.frame > notebook {
+    tabs > tab {
+      padding: $space-size / 2 $space-size;
+
+      button.close-button {
+        margin: 4px 0;
+      }
     }
   }
 }
 
+popover#ContextMenu { // not use ?
+  border-radius: $menu-radius;
+  background-clip: content-box;
+
+  modelbutton.flat {
+    border-radius: $corner-radius;
+  }
+}
+
 
 //
 // Synapse

src/sass/gtk/apps/_xfce.scss

@@ -197,9 +197,15 @@ dialog.xfsm-logout-dialog {
 
     widget.view {
       // padding: $space-size; // Not work ?
+      border-radius: $corner-radius;
+    }
+
+    .view {
+      &:hover { color: $text; }
 
       &:selected {
-        @extend %selected_items;
+        color: on($primary);
+        background: $primary;
       }
     }
   }

src/sass/libadwaita/_colors.scss

@@ -95,9 +95,9 @@ $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);
+$view_selected_color: gtkalpha($accent_color, .25);
+$view_selected_hover_color: gtkalpha($accent_color, .32);
+$view_selected_active_color: gtkalpha($accent_color, .39);
 
 $trough_color: gtkalpha(currentColor, .15);
 $trough_hover_color: gtkalpha(currentColor, .2);
@@ -132,6 +132,9 @@ $dimmer_opacity: 0.3;
 $disabled_opacity: 0.45;
 $strong_disabled_opacity: 0.3;
 
+$standalone-color-oklab-light: Min(l, 0.5) a b;
+$standalone-color-oklab-dark: Max(l, 0.85) a b;
+
 @if $gnome_version == 'new' {
 :root {
   --accent-blue: #3584e4;

src/sass/libadwaita/_drawing.scss

@@ -182,20 +182,20 @@
   }
 
   @if $t == checked {
-    background-color: $accent_color;
+    background-color: $accent_bg_color;
     color: $accent_fg_color;
   }
 
   @if $t == checked-hover {
     outline-color: transparent;
-    background-color: gtkmix($accent_fg_color, $accent_color, 5%);
+    background-color: gtkmix($accent_fg_color, $accent_bg_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-color: gtkmix($accent_fg_color, $accent_bg_color, 12%);
     background-image: none;
     color: $accent_fg_color;
   }

src/sass/libadwaita/_variables.scss

@@ -12,8 +12,8 @@ $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);
+$medium_size: if($compact == 'false', 34px, 30px);
+$large_size: if($compact == 'false', 46px, 38px);
 
 $menuitem_size: if($compact == 'false', 28px, 24px);
 

src/sass/libadwaita/_widgets.scss

@@ -13,6 +13,7 @@
 @import 'widgets/expanders';
 @import 'widgets/file-chooser';
 @import 'widgets/header-bar';
+@import 'widgets/inspector';
 @import 'widgets/labels';
 @import 'widgets/level-bar';
 @import 'widgets/linked';
@@ -35,8 +36,9 @@
 @import 'widgets/switch';
 @import 'widgets/tab-view';
 @import 'widgets/text-selection';
+@import 'widgets/toggle-group';
 @import 'widgets/toolbars';
 @import 'widgets/tooltip';
 @import 'widgets/views';
 @import 'widgets/view-switcher';
-@import 'widgets/window';
+@import 'widgets/window';

src/sass/libadwaita/apps/_control-center.scss

@@ -25,62 +25,66 @@ preferencesgroup > box {
     }
   }
 
-  .cutout-button { background-color: $dialog_bg_color; }
+  .cutout-button {
+    background-color: $dialog_bg_color;
+  }
 
-  @if $gnome_version == 'new' {
-    button.accent-button {
-      min-height: 24px;
-      min-width: 24px;
-      padding: $base_padding / 2;
-      border-radius: $circular_radius;
-      background: var(--accent-bg-color);
-      outline: none;
-      background-clip: content-box;
-      box-shadow: none;
-  
-      &:hover { box-shadow: 0 0 0 3px $hover_color; }
-  
-      &:checked { box-shadow: 0 0 0 3px $accent_color; }
-  
-      &.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate {
-        --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
-      }
-      
-      &.blue {
-        --accent-bg-color: var(--accent-blue);
-      }
-      
-      &.teal {
-        --accent-bg-color: var(--accent-teal);
-      }
-      
-      &.green {
-        --accent-bg-color: var(--accent-green);
-      }
-      
-      &.yellow {
-        --accent-bg-color: var(--accent-yellow);
-      }
-      
-      &.orange {
-        --accent-bg-color: var(--accent-orange);
-      }
-      
-      &.red {
-        --accent-bg-color: var(--accent-red);
-      }
-      
-      &.pink {
-        --accent-bg-color: var(--accent-pink);
-      }
-      
-      &.purple {
-        --accent-bg-color: var(--accent-purple);
-      }
-      
-      &.slate {
-        --accent-bg-color: var(--accent-slate);
-      }
+  button.accent-button {
+    min-height: 24px;
+    min-width: 24px;
+    padding: $base_padding / 2;
+    border-radius: $circular_radius;
+    background: var(--accent-bg-color);
+    outline: none;
+    background-clip: content-box;
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: 0 0 0 3px $hover_color;
+    }
+
+    &:checked {
+      box-shadow: 0 0 0 3px $accent_color;
+    }
+
+    &.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate {
+      --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
+    }
+
+    &.blue {
+      --accent-bg-color: var(--accent-blue);
+    }
+
+    &.teal {
+      --accent-bg-color: var(--accent-teal);
+    }
+
+    &.green {
+      --accent-bg-color: var(--accent-green);
+    }
+
+    &.yellow {
+      --accent-bg-color: var(--accent-yellow);
+    }
+
+    &.orange {
+      --accent-bg-color: var(--accent-orange);
+    }
+
+    &.red {
+      --accent-bg-color: var(--accent-red);
+    }
+
+    &.pink {
+      --accent-bg-color: var(--accent-pink);
+    }
+
+    &.purple {
+      --accent-bg-color: var(--accent-purple);
+    }
+
+    &.slate {
+      --accent-bg-color: var(--accent-slate);
     }
   }
-}
+}

src/sass/libadwaita/apps/_nautilus.scss

@@ -2,17 +2,21 @@
 // Nautilus
 //
 .floating-bar {
-  min-height: 32px;
-  padding: 0;
-  margin: if($gnome_version == 'default', $base_padding, $base_padding / 2);
+  min-height: $small_size;
+  padding: ($medium_size - $small_size) / 2;
+  margin: $base_padding;
   border-style: none;
   border-radius: $button_radius;
-  background-color: $accent_color;
+  background-color: $accent_bg_color;
   color: $accent_fg_color;
   box-shadow: $shadow-z3;
 
+  .nautilus-window & {
+    margin: if($gnome_version == 'default', $base_padding, $base_padding / 2);
+  }
+
   button {
-    margin: (32px - $small_size) / 2;
+    margin: 0;
     color: $accent_fg_color;
 
     @extend %small_button;
@@ -68,9 +72,9 @@
     margin: $base_padding 0;
 
     > button.image-button {
-      min-width: 24px;
-      min-height: 24px;
-      padding: $medium_size / 2 - $base_padding - 12px;
+      min-width: 16px;
+      min-height: 16px;
+      padding: $base_padding / 2;
     }
   }
 }

src/sass/libadwaita/apps/_other.scss

@@ -147,6 +147,234 @@ popover.menu themeswitcher { // Gnome console
   }
 }
 
+// Sticky note
+styleselector {
+  checkbutton {
+    padding: 0;
+    min-height: 44px;
+    min-width: 44px;
+    padding: 0;
+    background-clip: content-box;
+    border-radius: $circular_radius;
+    box-shadow: none;
+    border: none;
+
+    &:hover {
+      box-shadow: inset 0 0 0 2px $border_color;
+    }
+
+    &:checked {
+      box-shadow: inset 0 0 0 2px var(--accent-bg-color);
+
+      > radio, > radio:checked {
+        &, &:hover {
+          -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")));
+          color: var(--accent-fg-color);
+          background-color: var(--accent-bg-color);
+          box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
+          border: none;
+        }
+      }
+    }
+
+    > radio {
+      min-height: 20px;
+      min-width: 20px;
+      padding: 0;
+      margin: 0;
+
+      &:not(:checked):not(:indeterminate) {
+        &, &:hover {
+          color: transparent;
+          border: none;
+          background: none;
+          box-shadow: none;
+          -gtk-icon-source: none;
+        }
+      }
+    }
+  }
+}
+
+.note-window {
+  &, .text-view.view, .text-view.view > text, .toolbar, .toolbar button { color: $accent_fg_color; }
+
+  .top-bar > windowhandle:backdrop { filter: none; }
+
+  popover {
+    > arrow,
+    > contents {
+      @if $rimless == 'false' {
+        border: 1px solid gtkalpha($accent_fg_color, 0.1);
+        box-shadow: 0 1px 5px 1px transparentize(black, .91),
+                    0 2px 14px 3px transparentize(black, .95);
+      }
+    }
+  }
+
+  &.style-yellow {
+    &, .text-view.view, .text-view.view > text {
+      background-color: var(--accent-yellow);
+    }
+  
+    headerbar.flat, .toolbar {
+      &, &:backdrop {
+        background-color: var(--accent-yellow);
+      }
+    }
+
+    .text-view.view > text > selection {
+      background-color: gtkalpha($accent_fg_color, 0.35);
+    }
+
+    popover {
+      > arrow,
+      > contents {
+        background-color: gtkmix($accent_fg_color, var(--accent-yellow), 10%);
+      }
+    }
+  }
+
+  &.style-pink {
+    &, .text-view.view, .text-view.view > text {
+      background-color: var(--accent-pink);
+    }
+  
+    headerbar.flat, .toolbar {
+      &, &:backdrop {
+        background-color: var(--accent-pink);
+      }
+    }
+
+    .text-view.view > text > selection {
+      background-color: gtkalpha($accent_fg_color, 0.35);
+    }
+
+    popover {
+      > arrow,
+      > contents {
+        background-color: gtkmix($accent_fg_color, var(--accent-pink), 10%);
+      }
+    }
+  }
+
+  &.style-green {
+    &, .text-view.view, .text-view.view > text {
+      background-color: var(--accent-green);
+    }
+  
+    headerbar.flat, .toolbar {
+      &, &:backdrop {
+        background-color: var(--accent-green);
+      }
+    }
+
+    .text-view.view > text > selection {
+      background-color: gtkalpha($accent_fg_color, 0.35);
+    }
+
+    popover {
+      > arrow,
+      > contents {
+        background-color: gtkmix($accent_fg_color, var(--accent-green), 10%);
+      }
+    }
+  }
+
+  &.style-purple {
+    &, .text-view.view, .text-view.view > text {
+      background-color: var(--accent-purple);
+    }
+  
+    headerbar.flat, .toolbar {
+      &, &:backdrop {
+        background-color: var(--accent-purple);
+      }
+    }
+
+    .text-view.view > text > selection {
+      background-color: gtkalpha($accent_fg_color, 0.35);
+    }
+
+    popover {
+      > arrow,
+      > contents {
+        background-color: gtkmix($accent_fg_color, var(--accent-purple), 10%);
+      }
+    }
+  }
+
+  &.style-blue {
+    &, .text-view.view, .text-view.view > text {
+      background-color: var(--accent-blue);
+    }
+  
+    headerbar.flat, .toolbar {
+      &, &:backdrop {
+        background-color: var(--accent-blue);
+      }
+    }
+
+    .text-view.view > text > selection {
+      background-color: gtkalpha($accent_fg_color, 0.35);
+    }
+
+    popover {
+      > arrow,
+      > contents {
+        background-color: gtkmix($accent_fg_color, var(--accent-blue), 10%);
+      }
+    }
+  }
+
+  &.style-gray {
+    &, .text-view.view, .text-view.view > text {
+      background-color: #565656;
+    }
+  
+    headerbar.flat, .toolbar {
+      &, &:backdrop {
+        background-color: #565656;
+      }
+    }
+
+    .text-view.view > text > selection {
+      background-color: gtkalpha($accent_fg_color, 0.35);
+    }
+
+    popover {
+      > arrow,
+      > contents {
+        background-color: gtkmix($accent_fg_color, #565656, 10%);
+      }
+    }
+  }
+
+  &.style-charcoal {
+    &, .text-view.view, .text-view.view > text {
+      background-color: #2b2b2b;
+    }
+  
+    headerbar.flat, .toolbar {
+      &, &:backdrop {
+        background-color: #2b2b2b;
+      }
+    }
+
+    .text-view.view > text > selection {
+      background-color: gtkalpha($accent_fg_color, 0.35);
+    }
+
+    popover {
+      > arrow,
+      > contents {
+        background-color: gtkmix($accent_fg_color, #2b2b2b, 10%);
+      }
+    }
+  }
+}
+
 //
 // NG (DING)
 //

src/sass/libadwaita/widgets/_buttons.scss

@@ -154,11 +154,11 @@ button {
 
     > box,
     > box > box {
-      border-spacing: 4px;
+      border-spacing: $base_margin;
 
       > label {
-        padding-left: 2px;
-        padding-right: 2px;
+        padding-left: $base_margin / 2;
+        padding-right: $base_margin / 2;
       }
     }
   }
@@ -167,10 +167,10 @@ button {
     padding-left: $base_padding * 1.5;
     padding-right: $base_padding * 1.5;
 
-    > box { border-spacing: 4px; }
+    > box { border-spacing: $base_margin; }
 
     &.text-button {
-      > box { border-spacing: 4px; }
+      > box { border-spacing: $base_margin; }
     }
   }
 
@@ -183,8 +183,8 @@ button {
   // big standalone buttons like in Documents pager
   @at-root %osd_button,
   &.osd {
-    min-width: 32px;
-    min-height: 32px;
+    min-width: $medium_size;
+    min-height: $medium_size;
     @include focus-ring($outer: true, $offset: 1px, $transition: $button_transition);
 
     color: $osd_fg_color;
@@ -270,13 +270,13 @@ button {
     // padding added too.
 
     > label {
-      padding: 0 6px;
-      margin: 0 -6px;
+      padding: 0 $base_padding;
+      margin: 0 -$base_padding;
     }
 
     > image {
-      padding: 3px 6px;
-      margin: -3px -6px;
+      padding: $base_padding / 2 $base_padding;
+      margin: -$base_padding / 2 -$base_padding;
     }
 
     &.text-button { min-width: 100px; }
@@ -290,7 +290,7 @@ button {
   // hide separators
   &.font {
     separator { background-color: transparent; }
-    > box { border-spacing: 6px; }
+    > box { border-spacing: $base_padding; }
     > box > box > label { font-weight: bold; }
   }
 

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

@@ -164,6 +164,22 @@ leaflet:first-child > headerbar {
     }
   }
 
+  windowcontrols > button {
+    @if $window_button =='mac' {
+      &.minimize, &.maximize, &.close {
+        &:backdrop {
+          > image {
+            background-color: gtkalpha($window_fg_color, 0.3);
+          }
+  
+          &:hover, &:active {
+            color: gtkalpha($window_fg_color, 0.45);
+          }
+        }
+      }
+    }
+  }
+
   .maximized &,
   .fullscreen &,
   .tiled &,