fix: titlebars should be mantle not crust (#238)

ARCHITECTURE.md

@@ -0,0 +1,74 @@
+## Build pipeline
+
+The GTK port has a fairly complicated build pipeline / system, chiefly stemming from our use of Colloid as a base theme.
+We use Colloid as a base to reduce development overhead of creating our own theme from scratch, we look to replace this in the future
+to give us more flexibility and control over the theme (see https://github.com/catppuccin/gtk/issues/164).
+
+We have reimplemented Colloid's build system (previously implemented in Shell) in Python to make it easier to maintain, extend, and iterate on.
+With this re-implementation, we have several distinct components in the system, described below:
+1) Patching
+2) SCSS
+2) Assets
+
+## Patching
+
+We patch our colloid submodule to add additional functionality and (temporarily) fix bugs found in Colloid.
+We do this through `.patch` files, applied with `git apply` when the build script boots up. 
+The build script will store some state in the submodule to ensure it does not get needlessly patched.
+
+The patches are stored in `patches/colloid`, and currently have our palette, the Plank theme, and a modification to Colloid
+to allow all of our accents to load. When we find issues in Colloid, they will be patched through this system before being submitted upstream.
+
+## SCSS
+
+[This section assumes the directory root is at `colliod/src/sass`]
+
+The bulk of the theme is implemented here, in SCSS. This is by far the most modular part of Colloid out of the box, requiring minimal patching from our end to function.
+To start, we move the Colloid submodule into its own temporary copy. This is to allow us to run multiple builds in parallel, which would be otherwise impossible due to the
+file changes necessitated by each build, described below.
+
+With our temporary copy established, we generate the 'tweaks' for the build. This sets up a file (`_tweaks-temp.scss`) which describes the various knobs and dials for the build:
+```scss
+@import 'color-palette-catppuccin-mocha';
+
+$colorscheme: 'catppuccin';
+$colortype: 'system';
+$opacity: 'default';
+$theme: 'mauve';
+$compact: 'false';
+$translucent: 'false';
+$panel_opacity: 1.0;
+$blackness: 'false';
+$rimless: 'false';
+$window_button: 'mac';
+$float: 'false';
+```
+We edit in the correct palette import for the flavour we're building, and set the other variables based on user / build state input.
+
+With the tweaks setup, we can now invoke `sassc` (the SCSS compiler) to build all of our CSS files. We run all of the SCSS builds in parallel, for performance.
+With the SCSS complete, we have now finished most of the work required for the build.
+
+
+## Assets
+
+We build our own assets to ship with the theme, based on the processes used in Colloid. 
+
+We build assets for GTK, to include UI elements such as buttons, checkboxes,
+etc. This is done through standard find-and-replace, as these assets are just SVGs. We do not support GTK2, so do not have to support the older PNG assets used there.
+
+We also build assets for Xfce's Xfwm4, which are first patched from a source SVG, and then rendered through the `inkscape` CLI. 
+This operation is done once, at the start of a build process (e.g CI, to be reused for every subsequent build), or once until they change in the future for local development. 
+The script to generate these assets can be found at [`patches/xfwm4/generate_assets.py`](./patches/xfwm4/generate_assets.py)
+
+
+## CI integration
+
+The CI system utilizes the build system, as described above, but with some unique parallelization elements to improve performance.
+We have chosen to only build a limited subset of possible tweaks in CI, to constrain the time it takes to run. 
+
+Currently, we build a matrix of:
+- Flavor
+- Accent
+
+The CI will run all 4 flavours in parallel (see above for precautions taken to ensure this functions correctly), and build each accent serially.
+We collate the logs for these runs into files so that they can be shown neatly at the end of the run.

CONTRIBUTING.md

@@ -1,5 +1,7 @@
 ## Development
 
+Information regarding the architecture of the project can be found [in the ARCHITECTURE.md](./ARCHITECTURE.md) document.
+
 ### Requirements
 - All the [requirements for building](#building)
 - `whiskers`, optionally, from [catppuccin/toolbox](https://github.com/catppuccin/toolbox/tree/main/whiskers#installation)

build.py

@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-import os, re, shutil, subprocess, argparse, glob, logging, zipfile
+import os, re, shutil, subprocess, argparse, glob, logging, zipfile, sys
 
 from dataclasses import dataclass
 from typing import Any, Literal, List
@@ -55,7 +55,10 @@ class BuildContext:
     tweaks: Tweaks
 
     def output_dir(self) -> str:
-        return f"{self.build_root}/{self.build_id()}"
+        suffix = "light"
+        if self.flavor.dark:
+            suffix = "dark"
+        return f"{self.build_root}/{self.build_id()}-{suffix}"
 
     def build_id(self) -> str:
         return f"{self.theme_name}-{self.flavor.identifier}-{self.accent.identifier}-{self.size}+{self.tweaks.id() or 'default'}"
@@ -231,38 +234,13 @@ def gnome_shell_version():
             f"@import 'extensions-{GS_VERSION}';",
         )
 
-
-# Accent translation
-ctp_to_colloid = {
-    "rosewater": "pink",
-    "flamingo": "pink",
-    "pink": "pink",
-    "mauve": "purple",
-    "red": "red",
-    "maroon": "red",
-    "peach": "orange",
-    "yellow": "yellow",
-    "green": "green",
-    "teal": "teal",
-    "sky": "teal",
-    "sapphire": "default",
-    "blue": "default",
-    "lavender": "default",
-}
-
-
-def translate_accent(ctp_accent: Color):
-    return ctp_to_colloid[ctp_accent.identifier]
-
-
 def write_tweak(key, default, value):
     subst_text(
         f"{SRC_DIR}/sass/_tweaks-temp.scss", f"\\${key}: {default}", f"${key}: {value}"
     )
 
-
 def apply_tweaks(ctx: BuildContext):
-    write_tweak("theme", "'default'", f"'{translate_accent(ctx.accent)}'")
+    write_tweak("theme", "'default'", f"'{ctx.accent.identifier}'")
 
     if ctx.size == "compact":
         write_tweak("compact", "'false'", "'true'")
@@ -393,15 +371,15 @@ def make_assets(ctx: BuildContext):
         f"{output_dir}/metacity-1/thumbnail.png",
     )
 
-    xfwm4_assets = f"{THIS_DIR}/patches/xfwm4/generated/assets-catppuccin-{ctx.flavor.identifier}"
+    xfwm4_assets_root = f"{THIS_DIR}/patches/xfwm4/generated/assets-catppuccin-{ctx.flavor.identifier}"
-    for file in glob.glob(xfwm4_assets + '/*'):
+    for file in glob.glob(xfwm4_assets_root + '/*'):
         shutil.copy(file, f"{output_dir}/xfwm4")
 
-    xfwm4_assets = xfwm4_assets + "-hdpi/*"
+    xfwm4_assets = xfwm4_assets_root + "-hdpi/*"
     for file in glob.glob(xfwm4_assets):
         shutil.copy(file, f"{output_dir}-hdpi/xfwm4")
 
-    xfwm4_assets = xfwm4_assets + "-xhdpi/*"
+    xfwm4_assets = xfwm4_assets_root + "-xhdpi/*"
     for file in glob.glob(xfwm4_assets):
         shutil.copy(file, f"{output_dir}-xhdpi/xfwm4")
 
@@ -476,6 +454,7 @@ def apply_colloid_patches():
     for patch in [
         "plank-dark.patch",
         "plank-light.patch",
+        "theme-func.patch",
         "sass-palette-frappe.patch",
         "sass-palette-mocha.patch",
         "sass-palette-latte.patch",
@@ -654,3 +633,4 @@ try:
     main()
 except Exception as e:
     logger.error("Something went wrong when building the theme:", exc_info=e)
+    sys.exit(1)

install.py

@@ -94,7 +94,7 @@ def parse_args():
 
 def build_release_url(ctx: InstallContext) -> str:
     repo_root = "https://github.com/catppuccin/gtk/releases/download"
-    release = "v1.0.0-rc4"
+    release = "v1.0.0-rc5"
     zip_name = f"catppuccin-{ctx.flavor}-{ctx.accent}-standard+default.zip"
 
     return f"{repo_root}/{release}/{zip_name}"
@@ -120,8 +120,11 @@ def fetch_zip(url: str) -> Optional[zipfile.ZipFile]:
 
 
 def add_libadwaita_links(ctx: InstallContext, rewrite: bool = False):
+    suffix = "light"
+    if ctx.flavor != "latte":
+        suffix = "dark"
     dir_name = (
-        ctx.dest / f"catppuccin-{ctx.flavor}-{ctx.accent}-standard+default" / "gtk-4.0"
+        ctx.dest / f"catppuccin-{ctx.flavor}-{ctx.accent}-standard+default-{suffix}" / "gtk-4.0"
     ).absolute()
     gtk4_dir = (Path(os.path.expanduser("~")) / ".config" / "gtk-4.0").absolute()
     os.makedirs(gtk4_dir, exist_ok=True)

patches/colloid/palette.tera

@@ -11,7 +11,22 @@ new file mode 100644
 index 00000000..4ff0da0d
 --- /dev/null
 +++ b/src/sass/_color-palette-catppuccin-{{ flavor.identifier }}.scss
-@@ -0,0 +1,72 @@
+@@ -0,0 +1,87 @@
++ // Our accents
++ $rosewater: #{{ palette.rosewater.hex }};
++ $flamingo: #{{ palette.flamingo.hex }};
++ $pink: #{{ palette.pink.hex }};
++ $mauve: #{{ palette.mauve.hex }};
++ $red: #{{ palette.red.hex }};
++ $maroon: #{{ palette.maroon.hex }};
++ $peach: #{{ palette.peach.hex }};
++ $yellow: #{{ palette.yellow.hex }};
++ $green: #{{ palette.green.hex }};
++ $teal: #{{ palette.teal.hex }};
++ $sky: #{{ palette.sky.hex }};
++ $sapphire: #{{ palette.sapphire.hex }};
++ $blue: #{{ palette.blue.hex }};
++ $lavender: #{{ palette.lavender.hex }};
 +// Default Theme Color Palette
 +
 +// Red
@@ -62,7 +77,7 @@ index 00000000..4ff0da0d
 +$grey-600: red;
 +$grey-650: #{{ palette.surface0.hex }};
 +$grey-700: #{{ palette.base.hex }};
-+$grey-750: #{{ palette.crust.hex }};
++$grey-750: #{{ palette.mantle.hex }};
 +$grey-800: #{{ palette.crust.hex }};
 +$grey-850: #020202;
 +$grey-900: #010101;

patches/colloid/sass-palette-frappe.patch

@@ -3,7 +3,22 @@ new file mode 100644
 index 00000000..4ff0da0d
 --- /dev/null
 +++ b/src/sass/_color-palette-catppuccin-frappe.scss
-@@ -0,0 +1,72 @@
+@@ -0,0 +1,87 @@
++ // Our accents
++ $rosewater: #f2d5cf;
++ $flamingo: #eebebe;
++ $pink: #f4b8e4;
++ $mauve: #ca9ee6;
++ $red: #e78284;
++ $maroon: #ea999c;
++ $peach: #ef9f76;
++ $yellow: #e5c890;
++ $green: #a6d189;
++ $teal: #81c8be;
++ $sky: #99d1db;
++ $sapphire: #85c1dc;
++ $blue: #8caaee;
++ $lavender: #babbf1;
 +// Default Theme Color Palette
 +
 +// Red
@@ -53,7 +68,7 @@ index 00000000..4ff0da0d
 +$grey-600: red;
 +$grey-650: #414559;
 +$grey-700: #303446;
-+$grey-750: #232634;
++$grey-750: #292c3c;
 +$grey-800: #232634;
 +$grey-850: #020202;
 +$grey-900: #010101;

patches/colloid/sass-palette-latte.patch

@@ -3,7 +3,22 @@ new file mode 100644
 index 00000000..4ff0da0d
 --- /dev/null
 +++ b/src/sass/_color-palette-catppuccin-latte.scss
-@@ -0,0 +1,72 @@
+@@ -0,0 +1,87 @@
++ // Our accents
++ $rosewater: #dc8a78;
++ $flamingo: #dd7878;
++ $pink: #ea76cb;
++ $mauve: #8839ef;
++ $red: #d20f39;
++ $maroon: #e64553;
++ $peach: #fe640b;
++ $yellow: #df8e1d;
++ $green: #40a02b;
++ $teal: #179299;
++ $sky: #04a5e5;
++ $sapphire: #209fb5;
++ $blue: #1e66f5;
++ $lavender: #7287fd;
 +// Default Theme Color Palette
 +
 +// Red

patches/colloid/sass-palette-macchiato.patch

@@ -3,7 +3,22 @@ new file mode 100644
 index 00000000..4ff0da0d
 --- /dev/null
 +++ b/src/sass/_color-palette-catppuccin-macchiato.scss
-@@ -0,0 +1,72 @@
+@@ -0,0 +1,87 @@
++ // Our accents
++ $rosewater: #f4dbd6;
++ $flamingo: #f0c6c6;
++ $pink: #f5bde6;
++ $mauve: #c6a0f6;
++ $red: #ed8796;
++ $maroon: #ee99a0;
++ $peach: #f5a97f;
++ $yellow: #eed49f;
++ $green: #a6da95;
++ $teal: #8bd5ca;
++ $sky: #91d7e3;
++ $sapphire: #7dc4e4;
++ $blue: #8aadf4;
++ $lavender: #b7bdf8;
 +// Default Theme Color Palette
 +
 +// Red
@@ -53,7 +68,7 @@ index 00000000..4ff0da0d
 +$grey-600: red;
 +$grey-650: #363a4f;
 +$grey-700: #24273a;
-+$grey-750: #181926;
++$grey-750: #1e2030;
 +$grey-800: #181926;
 +$grey-850: #020202;
 +$grey-900: #010101;

patches/colloid/sass-palette-mocha.patch

@@ -3,7 +3,22 @@ new file mode 100644
 index 00000000..4ff0da0d
 --- /dev/null
 +++ b/src/sass/_color-palette-catppuccin-mocha.scss
-@@ -0,0 +1,72 @@
+@@ -0,0 +1,87 @@
++ // Our accents
++ $rosewater: #f5e0dc;
++ $flamingo: #f2cdcd;
++ $pink: #f5c2e7;
++ $mauve: #cba6f7;
++ $red: #f38ba8;
++ $maroon: #eba0ac;
++ $peach: #fab387;
++ $yellow: #f9e2af;
++ $green: #a6e3a1;
++ $teal: #94e2d5;
++ $sky: #89dceb;
++ $sapphire: #74c7ec;
++ $blue: #89b4fa;
++ $lavender: #b4befe;
 +// Default Theme Color Palette
 +
 +// Red
@@ -53,7 +68,7 @@ index 00000000..4ff0da0d
 +$grey-600: red;
 +$grey-650: #313244;
 +$grey-700: #1e1e2e;
-+$grey-750: #11111b;
++$grey-750: #181825;
 +$grey-800: #11111b;
 +$grey-850: #020202;
 +$grey-900: #010101;

patches/colloid/theme-func.patch

@@ -0,0 +1,46 @@
+diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss
+index 8738bf37..71797c6d 100644
+--- a/src/sass/_colors.scss
++++ b/src/sass/_colors.scss
+@@ -58,27 +58,20 @@
+ }
+ 
+ @function theme($color) {
+-  @if ($variant == 'light') {
+-    @if ($theme == 'default') { @return $default-dark; }
+-    @if ($theme == 'purple') { @return $purple-dark; }
+-    @if ($theme == 'pink') { @return $pink-dark; }
+-    @if ($theme == 'red') { @return $red-dark; }
+-    @if ($theme == 'orange') { @return $orange-dark; }
+-    @if ($theme == 'yellow') { @return $yellow-dark; }
+-    @if ($theme == 'green') { @return $green-dark; }
+-    @if ($theme == 'teal') { @return $teal-dark; }
+-    @if ($theme == 'grey') { @return $grey-600; }
+-  } @else {
+-    @if ($theme == 'default') { @return $default-light; }
+-    @if ($theme == 'purple') { @return $purple-light; }
+-    @if ($theme == 'pink') { @return $pink-light; }
+-    @if ($theme == 'red') { @return $red-light; }
+-    @if ($theme == 'orange') { @return $orange-light; }
+-    @if ($theme == 'yellow') { @return $yellow-light; }
+-    @if ($theme == 'green') { @return $green-light; }
+-    @if ($theme == 'teal') { @return $teal-light; }
+-    @if ($theme == 'grey') { @return $grey-200; }
+-  }
++  @if ($theme == 'rosewater') { @return $rosewater; }
++  @if ($theme == 'flamingo') { @return $flamingo; }
++  @if ($theme == 'pink') { @return $pink; }
++  @if ($theme == 'mauve') { @return $mauve; }
++  @if ($theme == 'red') { @return $red; }
++  @if ($theme == 'maroon') { @return $maroon; }
++  @if ($theme == 'peach') { @return $peach; }
++  @if ($theme == 'yellow') { @return $yellow; }
++  @if ($theme == 'green') { @return $green; }
++  @if ($theme == 'teal') { @return $teal; }
++  @if ($theme == 'sky') { @return $sky; }
++  @if ($theme == 'sapphire') { @return $sapphire; }
++  @if ($theme == 'blue') { @return $blue; }
++  @if ($theme == 'lavender') { @return $lavender; }
+ }
+ 
+ @function background($type) {

patches/xfwm4/generate_assets.py

@@ -151,6 +151,9 @@ def call_subprocesses(inp: WorkerInput):
     return [
         subprocess.Popen(
             [
+                # FIXME: https://gitlab.com/inkscape/inkscape/-/issues/4716#note_1882967469Z
+                "unshare",
+                "--user",
                 inkscape,
                 "--export-id",
                 inp.ident,