Update _control-center.scss

update
Merge branch 'main' of https://github.com/vinceliuice/Colloid-gtk-theme
2025-09-16 05:18:38 -07:00 · 2025-08-06 10:43:06 +08:00 · 2025-08-06 10:01:29 +08:00 · 2025-08-03 10:55:47 +08:00 · 2025-08-03 10:55:45 +08:00 · 2025-07-31 10:00:13 +08:00
111 changed files with 3742 additions and 360 deletions
--- a/.github/ISSUE_TEMPLATE/issue_template.md
+++ b/.github/ISSUE_TEMPLATE/issue_template.md
@@ -0,0 +1,28 @@
+**Describe the bug** A clear and concise description of what the bug is.
+
+**Theme Version** Example: v1.9.0 or latest commit
+
+**Operating System** Example: Ubuntu 22.04, Fedora 39
+
+**Desktop Environment** Example: GNOME 45, KDE Plasma 6.0, XFCE 4.18
+
+**Theme Variant** Example: Colloid-Dark, Colloid-Light, etc.
+
+**Steps to reproduce** Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+**Expected behavior** A clear and concise description of what you expected to
+happen.
+
+**Screenshots** If applicable, add screenshots to help explain your problem.
+
+**Logs** If applicable, add terminal output or system logs.
+
+**Checklist**
+
+- [ ] I checked if the issue already exists.
+- [ ] I provided enough information.
--- a/build.sh
+++ b/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

--- a/install.sh
+++ b/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
 }
--- a/src/assets/labwc/assets-Dark/close-active.svg
+++ b/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>
--- a/src/assets/labwc/assets-Dark/close-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets-Dark/iconify-active.svg
+++ b/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>
--- a/src/assets/labwc/assets-Dark/iconify-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets-Dark/max-active.svg
+++ b/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>
--- a/src/assets/labwc/assets-Dark/max-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets-Dark/max_toggled-active.svg
+++ b/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>
--- a/src/assets/labwc/assets-Dark/max_toggled-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets-Light/close-active.svg
+++ b/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>
--- a/src/assets/labwc/assets-Light/close-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets-Light/iconify-active.svg
+++ b/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>
--- a/src/assets/labwc/assets-Light/iconify-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets-Light/max-active.svg
+++ b/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>
--- a/src/assets/labwc/assets-Light/max-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets-Light/max_toggled-active.svg
+++ b/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>
--- a/src/assets/labwc/assets-Light/max_toggled-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets/close-active.svg
+++ b/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>
--- a/src/assets/labwc/assets/close-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets/iconify-active.svg
+++ b/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>
--- a/src/assets/labwc/assets/iconify-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets/max-active.svg
+++ b/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>
--- a/src/assets/labwc/assets/max-inactive.svg
+++ b/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>
--- a/src/assets/labwc/assets/max_toggled-active.svg
+++ b/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>
--- a/src/assets/labwc/assets/max_toggled-inactive.svg
+++ b/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>
--- a/src/main/labwc/themerc
+++ b/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
--- a/src/main/labwc/themerc-Catppuccin
+++ b/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
--- a/src/main/labwc/themerc-Dark
+++ b/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
--- a/src/main/labwc/themerc-Dark-Catppuccin
+++ b/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
--- a/src/main/labwc/themerc-Dark-Dracula
+++ b/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
--- a/src/main/labwc/themerc-Dark-Everforest
+++ b/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
--- a/src/main/labwc/themerc-Dark-Gruvbox
+++ b/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
--- a/src/main/labwc/themerc-Dark-Nord
+++ b/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
--- a/src/main/labwc/themerc-Dracula
+++ b/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
--- a/src/main/labwc/themerc-Everforest
+++ b/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
--- a/src/main/labwc/themerc-Gruvbox
+++ b/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
--- a/src/main/labwc/themerc-Light
+++ b/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
--- a/src/main/labwc/themerc-Light-Catppuccin
+++ b/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
--- a/src/main/labwc/themerc-Light-Dracula
+++ b/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
--- a/src/main/labwc/themerc-Light-Everforest
+++ b/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
--- a/src/main/labwc/themerc-Light-Gruvbox
+++ b/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
--- a/src/main/labwc/themerc-Light-Nord
+++ b/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
--- a/src/main/labwc/themerc-Nord
+++ b/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
--- a/src/sass/_variables.scss
+++ b/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);

--- a/src/sass/gnome-shell/_common.scss
+++ b/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;}
--- a/src/sass/gnome-shell/_drawing.scss
+++ b/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;
  }

--- a/src/sass/gnome-shell/_variables.scss
+++ b/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);
--- a/src/sass/gnome-shell/_widgets-47-0.scss
+++ b/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';
--- a/src/sass/gnome-shell/_widgets-48-0.scss
+++ b/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';
--- a/src/sass/gnome-shell/common/_a11y.scss
+++ b/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
+
+  @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;
+  @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
--- a/src/sass/gnome-shell/common/_buttons.scss
+++ b/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;
--- a/src/sass/gnome-shell/common/_calendar.scss
+++ b/src/sass/gnome-shell/common/_calendar.scss
@@ -202,17 +202,25 @@
    }

    &:active {
+      @if $gnome_version == 'default' {
        background-color: darken($primary, 5%);
-      color: on($primary) !important;
+      } @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 {
+        @if $gnome_version == 'default' {
          background-color: lighten($primary, 8%);
-        color: on($primary) !important;
+        } @else {
+          background-color: st-lighten($primary, 8%);
+        }
+        color: $primary-text !important;
      }
    }
  }
--- a/src/sass/gnome-shell/common/_corner-ripple.scss
+++ b/src/sass/gnome-shell/common/_corner-ripple.scss
@@ -3,8 +3,14 @@
 $ripple_size: 50px;

 .ripple-box {
-  background-color: rgba($primary, 0.35);
+  @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;
--- a/src/sass/gnome-shell/common/_dialogs.scss
+++ b/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);
+    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;
  }
 }

--- a/src/sass/gnome-shell/common/_entries.scss
+++ b/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);}
--- a/src/sass/gnome-shell/common/_ibus-popup.scss
+++ b/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; }
 }

--- a/src/sass/gnome-shell/common/_keyboard.scss
+++ b/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 {
--- a/src/sass/gnome-shell/common/_login-dialog.scss
+++ b/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)); }
    }
  }

--- a/src/sass/gnome-shell/common/_looking-glass.scss
+++ b/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 {
--- a/src/sass/gnome-shell/common/_misc.scss
+++ b/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;
 }
--- a/src/sass/gnome-shell/common/_network-dialog.scss
+++ b/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; }
--- a/src/sass/gnome-shell/common/_notifications.scss
+++ b/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%;
--- a/src/sass/gnome-shell/common/_panel.scss
+++ b/src/sass/gnome-shell/common/_panel.scss
@@ -8,7 +8,7 @@
  transition-duration: 250ms;
  box-shadow: none;
  border: none;
-  @include fontsize($font_size - 1);
+  // @include fontsize($font_size - 1);

  @if $float == 'true' {
    background-color: transparent;
--- a/src/sass/gnome-shell/common/_popovers.scss
+++ b/src/sass/gnome-shell/common/_popovers.scss
@@ -17,18 +17,16 @@
  min-width: if($compact == 'true', 10em, 12em);
  color: $text-secondary !important;
  padding: 0;
-  font-weight: normal;
  border-radius: $base_radius + $base_padding * 3;
  box-shadow: 0 3px 5px -2px rgba(black, if($variant == 'light', 0.1, 0.18));
  margin: $base_padding 6px 8px;
-  @include fontsize($font_size - 1);
+  // @include fontsize($font_size - 1);

  .popup-menu-content {
    padding: $base_padding;
    background-color: $popover;
    border-radius: $menu_radius;
    margin: 0;
-    font-weight: normal;

    @if $rimless == 'false' {
      border: 1px solid $window-border;
@@ -43,11 +41,9 @@
    border-radius: $base_radius;
    margin: 0;
    transition-duration: 100ms;
-    font-weight: normal;
    background-color: transparent;

    &:checked {
-      font-weight: normal;
      border: none;
      box-shadow: none;
      color: $text !important;
--- a/src/sass/gnome-shell/common/_screen-shield.scss
+++ b/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); }
+    &: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); }
+    }
  }
 }
--- a/src/sass/gnome-shell/common/_search-entry.scss
+++ b/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 {
--- a/src/sass/gnome-shell/common/_switcher-popup.scss
+++ b/src/sass/gnome-shell/common/_switcher-popup.scss
@@ -22,7 +22,7 @@

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

--- a/src/sass/gnome-shell/common/_tiled-previews.scss
+++ b/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 {
--- a/src/sass/gnome-shell/common/_workspace-switcher.scss
+++ b/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;
 }
--- a/src/sass/gnome-shell/extensions-3-28/_dash-to-dock.scss
+++ b/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;
--- a/src/sass/gnome-shell/extensions-40-0/_dash-to-dock.scss
+++ b/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;
  }
--- a/src/sass/gnome-shell/extensions-46-0/_dash-to-dock.scss
+++ b/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;
  }
--- a/src/sass/gnome-shell/extensions-46-0/_misc.scss
+++ b/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{
--- a/src/sass/gnome-shell/widgets-3-28/_app-grid.scss
+++ b/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;
  }
--- a/src/sass/gnome-shell/widgets-42-0/_quick-settings.scss
+++ b/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;
      }
    }

--- a/src/sass/gnome-shell/widgets-42-0/_screenshot.scss
+++ b/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 {
+      @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;
+      @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;
    }
  }
--- a/src/sass/gnome-shell/widgets-44-0/_quick-settings.scss
+++ b/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;
      }
    }

--- a/src/sass/gnome-shell/widgets-46-0/_app-grid.scss
+++ b/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 {
--- a/src/sass/gnome-shell/widgets-46-0/_calendar.scss
+++ b/src/sass/gnome-shell/widgets-46-0/_calendar.scss
@@ -206,17 +206,25 @@
    }

    &:active {
+      color: $primary-text !important;
+      @if $gnome_version == 'default' {
        background-color: darken($primary, 5%);
-      color: on($primary) !important;
+      } @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%);
+        }
      }
    }
  }
--- a/src/sass/gnome-shell/widgets-46-0/_quick-settings.scss
+++ b/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 {
+      color: $primary-text;
+      @if $gnome_version == 'default' {
        background-color: mix($text, $primary, 6%) !important;
-      color: on($primary);
+      } @else {
+        background-color: st-mix($text, $primary, 6%) !important;
+      }
    }

    &:active {
+      color: $primary-text;
+      @if $gnome_version == 'default' {
        background-color: mix($text, $primary, 15%) !important;
-      color: on($primary);
+      } @else {
+        background-color: st-mix($text, $primary, 15%) !important;
+      }
    }
  }

@@ -100,16 +108,24 @@

    &:checked {
      background-color: $primary !important;
-      color: on($primary);
+      color: $primary-text;
  
      &:hover {
+        color: $primary-text;
+        @if $gnome_version == 'default' {
          background-color: mix($text, $primary, 6%) !important;
-        color: on($primary);
+        } @else {
+          background-color: st-mix($text, $primary, 6%) !important;
+        }
      }
  
      &:active {
+        color: $primary-text;
+        @if $gnome_version == 'default' {
          background-color: mix($text, $primary, 15%) !important;
-        color: on($primary);
+        } @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;
  }
--- a/src/sass/gnome-shell/widgets-47-0/_check-box.scss
+++ b/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 {
+    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 StIcon,
-  &:checked:hover StIcon,
  &:checked:active StIcon {
-    background-color: transparent;
-    color: transparent;
+    background-color: st-darken(-st-accent-color, 7%);
+    color: st-darken(-st-accent-fg-color, 7%);
  }
 }
--- a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
+++ b/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);
+      color: $primary-text;
+
+      @if $gnome_version == 'default' {
        background-color: lighten($primary, 9%);
+      } @else {
+        background-color: st-lighten($primary, 9%);
+      }
    }

    &:active {
-      color: on($primary);
+      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;
  }
 }

--- a/src/sass/gnome-shell/widgets-47-0/_message-list.scss
+++ b/src/sass/gnome-shell/widgets-47-0/_message-list.scss
@@ -58,7 +58,11 @@
    border-style: solid;

    &:focus {
+      @if $gnome_version == 'default' {
        border-color: transparentize($primary, 0.4);
+      } @else {
+        border-color: st-transparentize($primary, 0.4);
+      }
    }
  }
 }
--- a/src/sass/gnome-shell/widgets-47-0/_slider.scss
+++ b/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 {
+    @if $gnome_version == 'default' and $variant == 'dark' and $theme == 'grey' {
      color: lighten($slide_color, 7%);
+    } @else {
+      color: st-lighten($slide_color, 7%);
+    }
  }
 }
--- a/src/sass/gnome-shell/widgets-47-0/_switches.scss
+++ b/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;
    }
  }
 }
--- a/src/sass/gnome-shell/widgets-48-0/_message-list.scss
+++ b/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
+    }
+  }
+}
--- a/src/sass/gnome-shell/widgets-48-0/_notifications.scss
+++ b/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;
+  }
+}
--- a/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss
+++ b/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; }
+}
--- a/src/sass/gtk/_common-3.0.scss
+++ b/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; }
--- a/src/sass/gtk/apps/_gnome-3.0.scss
+++ b/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;
 // }
--- a/src/sass/gtk/apps/_misc.scss
+++ b/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,12 +338,25 @@ window.background:not(.csd) {
  }
 }

-scrolledwindow#DialogNotebook {
-  > viewport.frame > notebook.frame {
+window.bright.symbolic {
+  scrolledwindow > viewport.frame > notebook {
+    tabs > tab {
+      padding: $space-size / 2 $space-size;
+
      button.close-button {
-      image { padding: 4px; }
+        margin: 4px 0;
      }
    }
+  }
+}
+
+popover#ContextMenu { // not use ?
+  border-radius: $menu-radius;
+  background-clip: content-box;
+
+  modelbutton.flat {
+    border-radius: $corner-radius;
+  }
 }


--- a/src/sass/gtk/apps/_xfce.scss
+++ b/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;
      }
    }
  }
--- a/src/sass/libadwaita/_colors.scss
+++ b/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;
--- a/src/sass/libadwaita/_drawing.scss
+++ b/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;
  }
--- a/src/sass/libadwaita/_variables.scss
+++ b/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);

--- a/src/sass/libadwaita/_widgets.scss
+++ b/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';
@@ -29,12 +30,14 @@
@import 'widgets/scale';
@import 'widgets/scrolling';
@import 'widgets/shortcuts-window';
+@import 'widgets/shortcuts-dialog';
@import 'widgets/sidebars';
@import 'widgets/spinner';
@import 'widgets/spin-button';
@import 'widgets/switch';
@import 'widgets/tab-view';
@import 'widgets/text-selection';
+@import 'widgets/toggle-group';
@import 'widgets/toolbars';
@import 'widgets/tooltip';
@import 'widgets/views';
--- a/src/sass/libadwaita/apps/_control-center.scss
+++ b/src/sass/libadwaita/apps/_control-center.scss
@@ -25,9 +25,11 @@ preferencesgroup > box {
    }
  }

-  .cutout-button { background-color: $dialog_bg_color; }
+  .cutout-button {
+    background-color: $dialog_bg_color;
+  }
  
-  @if $gnome_version == 'new' {
+  button.accent, // GDM Settings
  button.accent-button {
    min-height: 24px;
    min-width: 24px;
@@ -38,9 +40,13 @@ preferencesgroup > box {
    background-clip: content-box;
    box-shadow: none;

-      &:hover { box-shadow: 0 0 0 3px $hover_color; }
+    &:hover {
+      box-shadow: 0 0 0 3px $hover_color;
+    }

-      &:checked { box-shadow: 0 0 0 3px $accent_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));
@@ -82,5 +88,4 @@ preferencesgroup > box {
      --accent-bg-color: var(--accent-slate);
    }
  }
-  }
 }
--- a/src/sass/libadwaita/apps/_nautilus.scss
+++ b/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;
@@ -24,8 +28,6 @@
    padding: 0;

    > header > button {
-      border-top: 1px solid $border_color;
-
      &:last-child {
        padding-right: 24px;
      }
@@ -68,9 +70,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;
    }
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
vinceliuice	20dcc6d958	Update _control-center.scss	2025-08-06 10:43:06 +08:00
vinceliuice	923c07fe00	update	2025-08-06 10:01:29 +08:00
vinceliuice	bac95e19ba	Merge branch 'main' of https://github.com/vinceliuice/Colloid-gtk-theme	2025-08-03 10:55:47 +08:00
vinceliuice	117df083f0	update	2025-08-03 10:55:45 +08:00
Vince	94894f4bc2	Merge pull request #229 from deverebor/chore/create-issue-template chore: create issue template to improve issues structures	2025-07-31 10:00:13 +08:00
vinceliuice	9bf9fc5a59	Update _control-center.scss	2025-07-27 12:10:57 +08:00
vinceliuice	a71fcfceec	Fixed #239 , Fixed #240	2025-07-27 12:07:22 +08:00
vinceliuice	15f9b99ef4	Merge branch 'main' of https://github.com/vinceliuice/Colloid-gtk-theme	2025-06-28 04:27:45 +08:00
vinceliuice	a25d492117	Update install.sh	2025-06-28 04:27:43 +08:00
Vince	6486d61532	Merge pull request #237 from Kyuyrii/main Themes for Labwc	2025-06-28 04:25:48 +08:00
Kyuyrii	7561592086	Themerc files for Labwc	2025-06-25 21:04:27 -03:00
Kyuyrii	926424ec8f	Assets for Labwc themes	2025-06-25 21:02:58 -03:00
Kyuyrii	3f7965a900	Added Labwc to the installer	2025-06-25 21:01:52 -03:00
vinceliuice	bc05f7cbfe	update	2025-06-17 21:41:30 +08:00
Lucas Souza	e9c55da91c	chore: create issue template to improve issues structures	2025-04-28 10:20:42 -03:00
vinceliuice	1f09381660	Update _nautilus.scss	2025-04-21 14:46:04 +08:00
vinceliuice	49171606dc	update	2025-04-20 22:29:14 +08:00
vinceliuice	07c0f4aa7a	update	2025-04-14 08:32:45 +08:00
vinceliuice	4edce1099c	Fixed #227	2025-04-12 14:01:06 +08:00
vinceliuice	7538163d37	Fixed gnome-shell 48 issues	2025-04-11 14:44:01 +08:00
vinceliuice	967cae772c	Update build.sh	2025-03-20 00:29:25 +08:00
vinceliuice	7ac2cd6b05	Fixed sticky notes issues	2025-02-26 12:58:37 +08:00
Vince	559faed606	Merge pull request #217 from Lassebq/gnome48-quicksettings Fix quick settings for GNOME 48	2025-02-08 16:23:13 +08:00
Lassebq	d172cd3aa3	Fix quick settings for GNOME 48	2025-02-07 21:19:51 +02:00
vinceliuice	ef460f796f	Merge branch 'main' of github.com:vinceliuice/Colloid-gtk-theme	2025-01-11 18:38:17 +08:00
vinceliuice	57419ecc86	Fixed #209	2025-01-11 18:38:12 +08:00
Vince	e750f79a20	Merge pull request #210 from amogusussy/main Add commands for void linux	2025-01-10 15:54:06 +08:00
amogusussy	8e2281b3d1	add command for build.sh	2025-01-05 16:30:57 +00:00
amogusussy	6cf0b9da6b	add void linux command	2025-01-05 16:29:03 +00:00
vinceliuice	ace860be57	Fixed gnome-shell issues	2024-12-28 23:03:21 +08:00