feat: actually use our palette

2024-05-18 22:08:47 +01:00
parent 41858b3d68
commit 1585bdacf7
7 changed files with 420 additions and 106 deletions
--- a/build.py
+++ b/build.py
@@ -40,7 +40,7 @@ class BuildContext:
    tweaks: Tweaks

    def output_dir(self) -> str:
-        return f"{self.build_root}/{self.theme_name}-{self.flavor.identifier}-{self.accent.identifier}-{self.size}+{self.tweaks.id()}"
+        return f"{self.build_root}/{self.theme_name}-{self.flavor.identifier}-{self.accent.identifier}-{self.size}+{self.tweaks.id() or 'default'}"

    def build_id(self) -> str:
        return f"{self.theme_name}-{self.flavor.identifier}-{self.accent.identifier}-{self.size}"
@@ -270,7 +270,7 @@ def apply_tweaks(ctx: BuildContext):
    subst_text(
        f"{SRC_DIR}/sass/_tweaks-temp.scss",
        "@import 'color-palette-default';",
-        "@import 'color-palette-catppuccin';",
+        f"@import 'color-palette-catppuccin-{ctx.flavor.identifier}';",
    )
    write_tweak("colorscheme", "'default'", "'catppuccin'")

@@ -341,20 +341,10 @@ def make_assets(ctx: BuildContext):

    theme_color = ctx.accent.hex

-    if ctx.tweaks.has("black"):
-        background_light = "#FFFFFF"
-        background_dark = "#0F0F0F"
-        background_darker = "#121212"
-        background_alt = "#212121"
-        titlebar_light = "#F2F2F2"
-        titlebar_dark = "#030303"
-    else:
-        background_light = "#FFFFFF"
-        background_dark = "#2C2C2C"
-        background_darker = "#3C3C3C"
-        background_alt = "#464646"
-        titlebar_light = "#F2F2F2"
-        titlebar_dark = "#242424"
+    palette = ctx.flavor.colors
+    background = palette.base.hex
+    background_alt = palette.mantle.hex
+    titlebar = palette.overlay0.hex

    for file in glob.glob(f"{output_dir}/cinnamon/assets/*.svg"):
        subst_text(file, "#5b9bf8", theme_color)
@@ -367,35 +357,35 @@ def make_assets(ctx: BuildContext):
    for file in glob.glob(f"{output_dir}/gtk-3.0/assets/*.svg"):
        subst_text(file, "#5b9bf8", theme_color)
        subst_text(file, "#3c84f7", theme_color)
-        subst_text(file, "#ffffff", background_light)
-        subst_text(file, "#2c2c2c", background_dark)
+        subst_text(file, "#ffffff", background)
+        subst_text(file, "#2c2c2c", background)
        subst_text(file, "#3c3c3c", background_alt)

    for file in glob.glob(f"{output_dir}/gtk-4.0/assets/*.svg"):
        subst_text(file, "#5b9bf8", theme_color)
        subst_text(file, "#3c84f7", theme_color)
-        subst_text(file, "#ffffff", background_light)
-        subst_text(file, "#2c2c2c", background_dark)
+        subst_text(file, "#ffffff", background)
+        subst_text(file, "#2c2c2c", background)
        subst_text(file, "#3c3c3c", background_alt)

    if ctx.flavor.dark:
-        subst_text(f"{output_dir}/cinnamon/thumbnail.png", "#2c2c2c", background_dark)
+        subst_text(f"{output_dir}/cinnamon/thumbnail.png", "#2c2c2c", background)
        subst_text(f"{output_dir}/cinnamon/thumbnail.png", "#5b9bf8", theme_color)

-        subst_text(f"{output_dir}/gtk-3.0/thumbnail.png", "#2c2c2c", background_dark)
-        subst_text(f"{output_dir}/gtk-4.0/thumbnail.png", "#2c2c2c", background_dark)
+        subst_text(f"{output_dir}/gtk-3.0/thumbnail.png", "#2c2c2c", background)
+        subst_text(f"{output_dir}/gtk-4.0/thumbnail.png", "#2c2c2c", background)

        subst_text(f"{output_dir}/gtk-3.0/thumbnail.png", "#5b9bf8", theme_color)
        subst_text(f"{output_dir}/gtk-4.0/thumbnail.png", "#5b9bf8", theme_color)
    else:
-        subst_text(f"{output_dir}/cinnamon/thumbnail.png", "#ffffff", background_light)
-        subst_text(f"{output_dir}/cinnamon/thumbnail.png", "#f2f2f2", titlebar_light)
+        subst_text(f"{output_dir}/cinnamon/thumbnail.png", "#ffffff", background)
+        subst_text(f"{output_dir}/cinnamon/thumbnail.png", "#f2f2f2", titlebar)
        subst_text(f"{output_dir}/cinnamon/thumbnail.png", "#3c84f7", theme_color)

-        subst_text(f"{output_dir}/gtk-3.0/thumbnail.png", "#f2f2f2", titlebar_light)
+        subst_text(f"{output_dir}/gtk-3.0/thumbnail.png", "#f2f2f2", titlebar)
        subst_text(f"{output_dir}/gtk-3.0/thumbnail.png", "#3c84f7", theme_color)

-        subst_text(f"{output_dir}/gtk-4.0/thumbnail.png", "#f2f2f2", titlebar_light)
+        subst_text(f"{output_dir}/gtk-4.0/thumbnail.png", "#f2f2f2", titlebar)
        subst_text(f"{output_dir}/gtk-4.0/thumbnail.png", "#3c84f7", theme_color)

    for file in glob.glob(f"{SRC_DIR}/assets/cinnamon/common-assets/*.svg"):
@@ -475,7 +465,10 @@ def apply_colloid_patches():
        "plank-dark.patch",
        "plank-light.patch",
        "sass-colors.patch",
-        "sass-palette.patch",
+        "sass-palette-frappe.patch",
+        "sass-palette-mocha.patch",
+        "sass-palette-latte.patch",
+        "sass-palette-macchiato.patch",
    ]:
        path = f"./patches/colloid/{patch}"
        logger.info(f"Applying patch '{patch}', located at '{path}'")
--- a/patches/colloid/palette.tera
+++ b/patches/colloid/palette.tera
@@ -0,0 +1,87 @@
+---
+whiskers:
+  version: 2.1.0
+  matrix:
+    - flavor
+  filename: 'sass-palette-{{ flavor.identifier }}.patch'
+---
+{%- set palette = flavor.colors -%}
+diff --git a/src/sass/_color-palette-catppuccin-{{ flavor.identifier }}.scss b/src/sass/_color-palette-catppuccin-{{ flavor.identifier }}.scss
+new file mode 100644
+index 00000000..8a905942
+--- /dev/null
+++ b/src/sass/_color-palette-catppuccin-{{ flavor.identifier }}.scss
+@@ -0,0 +1,72 @@
+// Default Theme Color Palette
+
+// Red
+$red-light: #{{ palette.red.hex }};
+$red-dark: #{{ palette.red | mod(lightness=30) | get(key="hex") }};
+
+// Pink
+$pink-light: #{{ palette.pink.hex }};
+$pink-dark: #{{ palette.pink | mod(lightness=30) | get(key="hex") }};
+
+// Purple
+$purple-light: #{{ palette.mauve.hex }};
+$purple-dark: #{{ palette.mauve | mod(lightness=30) | get(key="hex") }};
+
+// Blue
+$blue-light: #{{ palette.blue.hex }};
+$blue-dark: #{{ palette.blue | mod(lightness=30) | get(key="hex") }};
+
+// Teal
+$teal-light: #{{ palette.teal.hex }};
+$teal-dark: #{{ palette.teal | mod(lightness=30) | get(key="hex") }};
+
+// Green
+$green-light: #{{ palette.green.hex }};
+$green-dark: #{{ palette.green | mod(lightness=30) | get(key="hex") }};
+
+// Yellow
+$yellow-light: #{{ palette.yellow.hex }};
+$yellow-dark: #{{ palette.yellow | mod(lightness=30) | get(key="hex") }};
+
+// Orange
+$orange-light: #{{ palette.peach.hex }};
+$orange-dark: #{{ palette.peach | mod(lightness=30) | get(key="hex") }};
+
+// Grey
+$grey-050: #{{ palette.text.hex }};
+$grey-100: #{{ palette.subtext1.hex }};
+$grey-150: #{{ palette.subtext1.hex }};
+$grey-200: #{{ palette.subtext0.hex }};
+$grey-250: #{{ palette.subtext0.hex }};
+$grey-300: #{{ palette.overlay1.hex }};
+$grey-350: #{{ palette.overlay1.hex }};
+$grey-400: #{{ palette.overlay0.hex }};
+$grey-450: #{{ palette.overlay0.hex }};
+$grey-500: #{{ palette.surface2.hex }};
+$grey-550: #{{ palette.surface2.hex }};
+$grey-600: #{{ palette.surface1.hex }};
+$grey-650: #{{ palette.surface1.hex }};
+$grey-700: #{{ palette.surface0.hex }};
+$grey-750: #{{ palette.surface0.hex }};
+$grey-800: #{{ palette.base.hex }};
+$grey-850: #{{ palette.base.hex }};
+$grey-900: #{{ palette.crust.hex }};
+$grey-950: #{{ palette.crust.hex }};
+
+// White
+$white: #FFFFFF;
+
+// Black
+$black: #000000;
+
+// Button
+$button-close: #{{ palette.red.hex }};
+$button-max: #{{ palette.green.hex }};
+$button-min: #{{ palette.yellow.hex }};
+
+// Link
+$links: #{{ palette.sky.hex }};
+
+// Theme
+$default-light: $purple-light;
+$default-dark: $purple-dark;
+{{ '' }}
--- a/patches/colloid/sass-palette-frappe.patch
+++ b/patches/colloid/sass-palette-frappe.patch
@@ -0,0 +1,78 @@
+diff --git a/src/sass/_color-palette-catppuccin-frappe.scss b/src/sass/_color-palette-catppuccin-frappe.scss
+new file mode 100644
+index 00000000..8a905942
+--- /dev/null
+++ b/src/sass/_color-palette-catppuccin-frappe.scss
+@@ -0,0 +1,72 @@
+// Default Theme Color Palette
+
+// Red
+$red-light: #e78284;
+$red-dark: #81191b;
+
+// Pink
+$pink-light: #f4b8e4;
+$pink-dark: #851567;
+
+// Purple
+$purple-light: #ca9ee6;
+$purple-dark: #58207a;
+
+// Blue
+$blue-light: #8caaee;
+$blue-dark: #143686;
+
+// Teal
+$teal-light: #81c8be;
+$teal-dark: #2f6b63;
+
+// Green
+$green-light: #a6d189;
+$green-dark: #466f2b;
+
+// Yellow
+$yellow-light: #e5c890;
+$yellow-dark: #7d5d1d;
+
+// Orange
+$orange-light: #ef9f76;
+$orange-dark: #8a3910;
+
+// Grey
+$grey-050: #c6d0f5;
+$grey-100: #b5bfe2;
+$grey-150: #b5bfe2;
+$grey-200: #a5adce;
+$grey-250: #a5adce;
+$grey-300: #838ba7;
+$grey-350: #838ba7;
+$grey-400: #737994;
+$grey-450: #737994;
+$grey-500: #626880;
+$grey-550: #626880;
+$grey-600: #51576d;
+$grey-650: #51576d;
+$grey-700: #414559;
+$grey-750: #414559;
+$grey-800: #303446;
+$grey-850: #303446;
+$grey-900: #232634;
+$grey-950: #232634;
+
+// White
+$white: #FFFFFF;
+
+// Black
+$black: #000000;
+
+// Button
+$button-close: #e78284;
+$button-max: #a6d189;
+$button-min: #e5c890;
+
+// Link
+$links: #99d1db;
+
+// Theme
+$default-light: $purple-light;
+$default-dark: $purple-dark;
--- a/patches/colloid/sass-palette-latte.patch
+++ b/patches/colloid/sass-palette-latte.patch
@@ -0,0 +1,78 @@
+diff --git a/src/sass/_color-palette-catppuccin-latte.scss b/src/sass/_color-palette-catppuccin-latte.scss
+new file mode 100644
+index 00000000..8a905942
+--- /dev/null
+++ b/src/sass/_color-palette-catppuccin-latte.scss
+@@ -0,0 +1,72 @@
+// Default Theme Color Palette
+
+// Red
+$red-light: #d20f39;
+$red-dark: #900a27;
+
+// Pink
+$pink-light: #ea76cb;
+$pink-dark: #851567;
+
+// Purple
+$purple-light: #8839ef;
+$purple-dark: #440b8f;
+
+// Blue
+$blue-light: #1e66f5;
+$blue-dark: #073693;
+
+// Teal
+$teal-light: #179299;
+$teal-dark: #148086;
+
+// Green
+$green-light: #40a02b;
+$green-dark: #317921;
+
+// Yellow
+$yellow-light: #df8e1d;
+$yellow-dark: #885712;
+
+// Orange
+$orange-light: #fe640b;
+$orange-dark: #993901;
+
+// Grey
+$grey-050: #4c4f69;
+$grey-100: #5c5f77;
+$grey-150: #5c5f77;
+$grey-200: #6c6f85;
+$grey-250: #6c6f85;
+$grey-300: #8c8fa1;
+$grey-350: #8c8fa1;
+$grey-400: #9ca0b0;
+$grey-450: #9ca0b0;
+$grey-500: #acb0be;
+$grey-550: #acb0be;
+$grey-600: #bcc0cc;
+$grey-650: #bcc0cc;
+$grey-700: #ccd0da;
+$grey-750: #ccd0da;
+$grey-800: #eff1f5;
+$grey-850: #eff1f5;
+$grey-900: #dce0e8;
+$grey-950: #dce0e8;
+
+// White
+$white: #FFFFFF;
+
+// Black
+$black: #000000;
+
+// Button
+$button-close: #d20f39;
+$button-max: #40a02b;
+$button-min: #df8e1d;
+
+// Link
+$links: #04a5e5;
+
+// Theme
+$default-light: $purple-light;
+$default-dark: $purple-dark;
--- a/patches/colloid/sass-palette-macchiato.patch
+++ b/patches/colloid/sass-palette-macchiato.patch
@@ -0,0 +1,78 @@
+diff --git a/src/sass/_color-palette-catppuccin-macchiato.scss b/src/sass/_color-palette-catppuccin-macchiato.scss
+new file mode 100644
+index 00000000..8a905942
+--- /dev/null
+++ b/src/sass/_color-palette-catppuccin-macchiato.scss
+@@ -0,0 +1,72 @@
+// Default Theme Color Palette
+
+// Red
+$red-light: #ed8796;
+$red-dark: #861425;
+
+// Pink
+$pink-light: #f5bde6;
+$pink-dark: #861467;
+
+// Purple
+$purple-light: #c6a0f6;
+$purple-dark: #470d8d;
+
+// Blue
+$blue-light: #8aadf4;
+$blue-dark: #0d388d;
+
+// Teal
+$teal-light: #8bd5ca;
+$teal-dark: #297166;
+
+// Green
+$green-light: #a6da95;
+$green-dark: #3a7228;
+
+// Yellow
+$yellow-light: #eed49f;
+$yellow-dark: #835f17;
+
+// Orange
+$orange-light: #f5a97f;
+$orange-dark: #8f390b;
+
+// Grey
+$grey-050: #cad3f5;
+$grey-100: #b8c0e0;
+$grey-150: #b8c0e0;
+$grey-200: #a5adcb;
+$grey-250: #a5adcb;
+$grey-300: #8087a2;
+$grey-350: #8087a2;
+$grey-400: #6e738d;
+$grey-450: #6e738d;
+$grey-500: #5b6078;
+$grey-550: #5b6078;
+$grey-600: #494d64;
+$grey-650: #494d64;
+$grey-700: #363a4f;
+$grey-750: #363a4f;
+$grey-800: #24273a;
+$grey-850: #24273a;
+$grey-900: #181926;
+$grey-950: #181926;
+
+// White
+$white: #FFFFFF;
+
+// Black
+$black: #000000;
+
+// Button
+$button-close: #ed8796;
+$button-max: #a6da95;
+$button-min: #eed49f;
+
+// Link
+$links: #91d7e3;
+
+// Theme
+$default-light: $purple-light;
+$default-dark: $purple-dark;
--- a/patches/colloid/sass-palette-mocha.patch
+++ b/patches/colloid/sass-palette-mocha.patch
@@ -0,0 +1,78 @@
+diff --git a/src/sass/_color-palette-catppuccin-mocha.scss b/src/sass/_color-palette-catppuccin-mocha.scss
+new file mode 100644
+index 00000000..8a905942
+--- /dev/null
+++ b/src/sass/_color-palette-catppuccin-mocha.scss
+@@ -0,0 +1,72 @@
+// Default Theme Color Palette
+
+// Red
+$red-light: #f38ba8;
+$red-dark: #8c0e32;
+
+// Pink
+$pink-light: #f5c2e7;
+$pink-dark: #841667;
+
+// Purple
+$purple-light: #cba6f7;
+$purple-dark: #470d8d;
+
+// Blue
+$blue-light: #89b4fa;
+$blue-dark: #063d94;
+
+// Teal
+$teal-light: #94e2d5;
+$teal-dark: #21796a;
+
+// Green
+$green-light: #a6e3a1;
+$green-dark: #2a7723;
+
+// Yellow
+$yellow-light: #f9e2af;
+$yellow-dark: #8f650b;
+
+// Orange
+$orange-light: #fab387;
+$orange-dark: #943c06;
+
+// Grey
+$grey-050: #cdd6f4;
+$grey-100: #bac2de;
+$grey-150: #bac2de;
+$grey-200: #a6adc8;
+$grey-250: #a6adc8;
+$grey-300: #7f849c;
+$grey-350: #7f849c;
+$grey-400: #6c7086;
+$grey-450: #6c7086;
+$grey-500: #585b70;
+$grey-550: #585b70;
+$grey-600: #45475a;
+$grey-650: #45475a;
+$grey-700: #313244;
+$grey-750: #313244;
+$grey-800: #1e1e2e;
+$grey-850: #1e1e2e;
+$grey-900: #11111b;
+$grey-950: #11111b;
+
+// White
+$white: #FFFFFF;
+
+// Black
+$black: #000000;
+
+// Button
+$button-close: #f38ba8;
+$button-max: #a6e3a1;
+$button-min: #f9e2af;
+
+// Link
+$links: #89dceb;
+
+// Theme
+$default-light: $purple-light;
+$default-dark: $purple-dark;
--- a/patches/colloid/sass-palette.patch
+++ b/patches/colloid/sass-palette.patch
@@ -1,78 +0,0 @@
-diff --git a/src/sass/_color-palette-catppuccin.scss b/src/sass/_color-palette-catppuccin.scss
-new file mode 100644
-index 00000000..8a905942
--- /dev/null
-+++ b/src/sass/_color-palette-catppuccin.scss
-@@ -0,0 +1,72 @@
-+// Default Theme Color Palette
-+
-+// Red
-+$red-light: #F44336;
-+$red-dark: #E53935;
-+
-+// Pink
-+$pink-light: #F06292;
-+$pink-dark: #EC407A;
-+
-+// Purple
-+$purple-light: #BA68C8;
-+$purple-dark: #AB47BC;
-+
-+// Blue
-+$blue-light: #5b9bf8;
-+$blue-dark: #3c84f7;
-+
-+// Teal
-+$teal-light: #4DB6AC;
-+$teal-dark: #009688;
-+
-+// Green
-+$green-light: #66BB6A;
-+$green-dark: #4CAF50;
-+
-+// Yellow
-+$yellow-light: #FBC02D;
-+$yellow-dark: #FFD600;
-+
-+// Orange
-+$orange-light: #FF8A65;
-+$orange-dark: #FF7043;
-+
-+// Grey
-+$grey-050: #FAFAFA;
-+$grey-100: #F2F2F2;
-+$grey-150: #EEEEEE;
-+$grey-200: #DDDDDD;
-+$grey-250: #CCCCCC;
-+$grey-300: #BFBFBF;
-+$grey-350: #A0A0A0;
-+$grey-400: #9E9E9E;
-+$grey-450: #868686;
-+$grey-500: #727272;
-+$grey-550: #555555;
-+$grey-600: #464646;
-+$grey-650: #3C3C3C;
-+$grey-700: #2C2C2C;
-+$grey-750: #242424;
-+$grey-800: #212121;
-+$grey-850: #121212;
-+$grey-900: #0F0F0F;
-+$grey-950: #030303;
-+
-+// White
-+$white: #FFFFFF;
-+
-+// Black
-+$black: #000000;
-+
-+// Button
-+$button-close: #fd5f51;
-+$button-max: #38c76a;
-+$button-min: #fdbe04;
-+
-+// Link
-+$links: #5bd3f8;
-+
-+// Theme
-+$default-light: $blue-light;
-+$default-dark: $blue-dark;