Custom GTK CSS for blur and window tinting + a few style tweaks

gtk.css

/* define custom accent colour */
@define-color accent_bg_color #a67edd;

:root {
  --accent-color: #a67edd;
    /* create variables for tinted surfaces */
  --window-bg-color: color-mix(
    in oklab,
    var(--accent-color),
    var(--view-bg-color) 90%
  );
  --window-fg-color: color-mix(
    in oklab,
    var(--accent-color),
    var(--view-fg-color) 50%
  );
  --aview-bg-color: color-mix(
    in oklab,
    var(--accent-color),
    var(--view-bg-color) 95%
  );
}

/* set tinted surfaces */
window {
  background: alpha(var(--window-bg-color), 0.8);
}

.sidebar-pane,
.sidebar,
.navigation-sidebar {
  background: transparent;
}

.content-pane {
  background: alpha(var(--aview-bg-color), 0.8);
}

/* font tweaks (below this isnt needed for tinting)*/

* {
  font-feature-settings:
    "liga" 1,
    "calt" 1,
    "ss04" 1,
    "cv10" 1,
    "cv11" 1,
    "cv01" 1;
}


/* remove drop shadow from lists */

.boxed-list,
.card,
.boxed-list-separate > row {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
}