[v1.0.0-rc3] black tweak differences between pre-1.x and 1.x

higherorderfunctor commented 6 months ago

Is there an existing issue outlining your problem?

[X] I have searched the existing issues and they do not solve my problem.

Describe the bug.

Comparing https://github.com/catppuccin/gtk/commit/0c3e8817da94769887c690b2211e006b287b27b1 versus https://github.com/catppuccin/gtk/commit/87a5f92f4bfc1a1377ce3db114408c92795d05d3 (rc3), it doesn't appear the black tweak is getting applied.

26c26
<   background-color: #010101;
---
>   background-color: #181926;
60c60
<   background-color: #010101;
---
>   background-color: #181926;
73c73
<   background-color: #010101;
---
>   background-color: #181926;
77c77
<   background-color: #000000;

Also, not sure if this is just a limitation with the new build system, a design choice going forward (https://github.com/catppuccin/gtk/blob/main/build.py#L247), or if it is unintentional and should be fixed, but in my spot testing it looks like Sky is mapped to mostly Teal.

# sky is only used a couple times
$ cat /nix/store/92kidlf1lbxg3gffgm5sivj0jqmzai4c-catppuccin-gtk-87a5f92f4bfc1a1377ce3db114408c92795d05d3/share/themes/catppuccin-macchiato-sky-compact+rimless,black/gtk-4.0/gtk.css | grep 91d7e3
  color: #91d7e3;
  color: #91d7e3;

15c15
<     background-image: radial-gradient(circle, #91d7e3 0%, transparent 0%);
---
>     background-image: radial-gradient(circle, #8bd5ca 0%, transparent 0%);

I'm using a custom nix overlay to install, but the build log looks like it should from what I can tell by showing which tweaks I have and the theme color.

I've also included a full diff for the gtk-4.0.css. I dont expect a 100% match, but figured these two items standout.

Build log

``` @nix { "action": "setPhase", "phase": "unpackPhase" } Running phase: unpackPhase unpacking source archive /nix/store/dp0p24kalwhll262dmbphd8b5yq9gj0v-source source root is source @nix { "action": "setPhase", "phase": "patchPhase" } Running phase: patchPhase patching script interpreter paths in colloid/install.sh colloid/build.sh colloid/install.sh: interpreter directive changed from "#! /usr/bin/env bash" to "/nix/store/h3bhzvz9ipglcybbcvkxvm4vg9lwvqg4-bash-5.2p26/bin/bash" colloid/build.sh: interpreter directive changed from "#! /usr/bin/env bash" to "/nix/store/h3bhzvz9ipglcybbcvkxvm4vg9lwvqg4-bash-5.2p26/bin/bash" @nix { "action": "setPhase", "phase": "updateAutotoolsGnuConfigScriptsPhase" } Running phase: updateAutotoolsGnuConfigScriptsPhase @nix { "action": "setPhase", "phase": "buildPhase" } Running phase: buildPhase [catppuccin-gtk] [INFO] - Applying patches... [catppuccin-gtk] [INFO] - Applying patch 'plank-dark.patch', located at './patches/colloid/plank-dark.patch' [catppuccin-gtk] [INFO] - Applying patch 'plank-light.patch', located at './patches/colloid/plank-light.patch' [catppuccin-gtk] [INFO] - Applying patch 'sass-palette-frappe.patch', located at './patches/colloid/sass-palette-frappe.patch' [catppuccin-gtk] [INFO] - Applying patch 'sass-palette-mocha.patch', located at './patches/colloid/sass-palette-mocha.patch' [catppuccin-gtk] [INFO] - Applying patch 'sass-palette-latte.patch', located at './patches/colloid/sass-palette-latte.patch' [catppuccin-gtk] [INFO] - Applying patch 'sass-palette-macchiato.patch', located at './patches/colloid/sass-palette-macchiato.patch' [catppuccin-gtk] [INFO] - Patching finished. [catppuccin-gtk] [INFO] - Building temp tweaks file [catppuccin-gtk] [INFO] - Inserting gnome-shell imports [catppuccin-gtk] [INFO] - Building main theme [catppuccin-gtk] [INFO] - Build info: build_root: releases theme_name: catppuccin flavor: macchiato accent: sky size: compact tweaks: Tweaks(tweaks=['rimless', 'black']) [catppuccin-gtk] [INFO] - Building into 'releases/catppuccin-macchiato-sky-compact+rimless,black'... [catppuccin-gtk] [INFO] - Main build complete [catppuccin-gtk] [INFO] - Bundling assets... [catppuccin-gtk] [INFO] - Asset bundling done [catppuccin-gtk] [INFO] - Completed macchiato with sky [catppuccin-gtk] [INFO] - Done! @nix { "action": "setPhase", "phase": "glibPreInstallPhase" } Running phase: glibPreInstallPhase @nix { "action": "setPhase", "phase": "installPhase" } Running phase: installPhase @nix { "action": "setPhase", "phase": "dropIconThemeCache" } Running phase: dropIconThemeCache @nix { "action": "setPhase", "phase": "glibPreFixupPhase" } Running phase: glibPreFixupPhase @nix { "action": "setPhase", "phase": "fixupPhase" } Running phase: fixupPhase shrinking RPATHs of ELF executables and libraries in /nix/store/92kidlf1lbxg3gffgm5sivj0jqmzai4c-catppuccin-gtk-87a5f92f4bfc1a1377ce3db114408c92795d05d3 checking for references to /build/ in /nix/store/92kidlf1lbxg3gffgm5sivj0jqmzai4c-catppuccin-gtk-87a5f92f4bfc1a1377ce3db114408c92795d05d3... patching script interpreter paths in /nix/store/92kidlf1lbxg3gffgm5sivj0jqmzai4c-catppuccin-gtk-87a5f92f4bfc1a1377ce3db114408c92795d05d3 ```

gtk-4.0.css full diff

```diff diff /nix/store/g2njxx6p41hbrj2mi0l23jhgl1b3bp1f-catppuccin-gtk-0c3e8817da94769887c690b2211e006b287b27b1/share/themes/Catppuccin-Macchiato-Compact-Sky-Dark/gtk-4.0/gtk.css /nix/store/92kidlf1lbxg3gffgm5sivj0jqmzai4c-catppuccin-gtk-87a5f92f4bfc1a1377ce3db114408c92795d05d3/share/themes/catppuccin-macchiato-sky-compact+rimless,black/gtk-4.0/gtk.css 15c15 < background-image: radial-gradient(circle, #91d7e3 0%, transparent 0%); --- > background-image: radial-gradient(circle, #8bd5ca 0%, transparent 0%); 18c18 < background-image: radial-gradient(circle, #91d7e3 100%, transparent 100%); --- > background-image: radial-gradient(circle, #8bd5ca 100%, transparent 100%); 26c26 < background-color: #010101; --- > background-color: #181926; 60c60 < background-color: #010101; --- > background-color: #181926; 73c73 < background-color: #010101; --- > background-color: #181926; 77c77 < background-color: #000000; --- > background-color: #181926; 89,90c89,90 < border: 1px solid #91d7e3; < background-color: rgba(145, 215, 227, 0.3); --- > border: 1px solid #8bd5ca; > background-color: rgba(139, 213, 202, 0.3); 117c117 < background-color: #010101; --- > background-color: #181926; 147c147 < color: #91d7e3; --- > color: #8bd5ca; 151c151 < color: #66BB6A; --- > color: #a6da95; 155c155 < color: #FBC02D; --- > color: #eed49f; 159c159 < color: #F44336; --- > color: #ed8796; 228c228 < background-color: #010101; --- > background-color: #181926; 296c296 < outline: 2px solid #91d7e3; --- > outline: 2px solid #8bd5ca; 412,413c412,413 < background-color: rgba(244, 67, 54, 0.1); < color: rgba(244, 67, 54, 0.75); --- > background-color: rgba(237, 135, 150, 0.1); > color: rgba(237, 135, 150, 0.75); 424c424 < background-color: rgba(244, 67, 54, 0.1); --- > background-color: rgba(237, 135, 150, 0.1); 426,427c426,427 < color: #F44336; < outline: 2px solid #F44336; --- > color: #ed8796; > outline: 2px solid #ed8796; 442c442 < color: #F44336; --- > color: #ed8796; 453,454c453,454 < background-color: rgba(244, 67, 54, 0.1); < color: rgba(244, 67, 54, 0.35); --- > background-color: rgba(237, 135, 150, 0.1); > color: rgba(237, 135, 150, 0.35); 463,464c463,464 < background-color: rgba(244, 67, 54, 0.25); < color: #F44336; --- > background-color: rgba(237, 135, 150, 0.25); > color: #ed8796; 478c478 < color: rgba(244, 67, 54, 0.75); --- > color: rgba(237, 135, 150, 0.75); 488c488 < color: #F44336; --- > color: #ed8796; 495c495 < color: rgba(244, 67, 54, 0.35); --- > color: rgba(237, 135, 150, 0.35); 504,505c504,505 < background-color: rgba(251, 192, 45, 0.1); < color: rgba(251, 192, 45, 0.75); --- > background-color: rgba(238, 212, 159, 0.1); > color: rgba(238, 212, 159, 0.75); 516c516 < background-color: rgba(251, 192, 45, 0.1); --- > background-color: rgba(238, 212, 159, 0.1); 518,519c518,519 < color: #FBC02D; < outline: 2px solid #FBC02D; --- > color: #eed49f; > outline: 2px solid #eed49f; 534c534 < color: #FBC02D; --- > color: #eed49f; 545,546c545,546 < background-color: rgba(251, 192, 45, 0.1); < color: rgba(251, 192, 45, 0.35); --- > background-color: rgba(238, 212, 159, 0.1); > color: rgba(238, 212, 159, 0.35); 555,556c555,556 < background-color: rgba(251, 192, 45, 0.25); < color: #FBC02D; --- > background-color: rgba(238, 212, 159, 0.25); > color: #eed49f; 570c570 < color: rgba(251, 192, 45, 0.75); --- > color: rgba(238, 212, 159, 0.75); 580c580 < color: #FBC02D; --- > color: #eed49f; 587c587 < color: rgba(251, 192, 45, 0.35); --- > color: rgba(238, 212, 159, 0.35); 596,597c596,597 < background-color: rgba(102, 187, 106, 0.1); < color: rgba(102, 187, 106, 0.75); --- > background-color: rgba(166, 218, 149, 0.1); > color: rgba(166, 218, 149, 0.75); 608c608 < background-color: rgba(102, 187, 106, 0.1); --- > background-color: rgba(166, 218, 149, 0.1); 610,611c610,611 < color: #66BB6A; < outline: 2px solid #66BB6A; --- > color: #a6da95; > outline: 2px solid #a6da95; 626c626 < color: #66BB6A; --- > color: #a6da95; 637,638c637,638 < background-color: rgba(102, 187, 106, 0.1); < color: rgba(102, 187, 106, 0.35); --- > background-color: rgba(166, 218, 149, 0.1); > color: rgba(166, 218, 149, 0.35); 647,648c647,648 < background-color: rgba(102, 187, 106, 0.25); < color: #66BB6A; --- > background-color: rgba(166, 218, 149, 0.25); > color: #a6da95; 662c662 < color: rgba(102, 187, 106, 0.75); --- > color: rgba(166, 218, 149, 0.75); 672c672 < color: #66BB6A; --- > color: #a6da95; 679c679 < color: rgba(102, 187, 106, 0.35); --- > color: rgba(166, 218, 149, 0.35); 686c686 < border-bottom: 2px solid #91d7e3; --- > border-bottom: 2px solid #8bd5ca; 702c702 < background-color: #010101; --- > background-color: #181926; 759c759 < background-image: radial-gradient(farthest-side, #91d7e3 0%, rgba(145, 215, 227, 0) 0%); --- > background-image: radial-gradient(farthest-side, #8bd5ca 0%, rgba(139, 213, 202, 0) 0%); 762c762 < background-image: radial-gradient(farthest-side, #91d7e3 95%, rgba(145, 215, 227, 0)); --- > background-image: radial-gradient(farthest-side, #8bd5ca 95%, rgba(139, 213, 202, 0)); 785c785 < row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:not(.suggested-action):not(.destructive-action):not(.flat), button { --- > row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:not(.suggested-action):not(.destructive-action):not(.flat), .toolbar .linked button, button { 800,801c800,801 < row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action):not(.flat), button:focus { < outline: 2px solid rgba(145, 215, 227, 0.35); --- > row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action):not(.flat), .toolbar .linked button:focus, button:focus { > outline: 2px solid rgba(139, 213, 202, 0.35); 808c808 < row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:hover { --- > row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action):not(.flat), .toolbar .linked button:hover, button:hover { 818c818 < row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button.keyboard-activating:not(.suggested-action):not(.destructive-action):not(.flat), button.keyboard-activating, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, --- > row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button.keyboard-activating:not(.suggested-action):not(.destructive-action):not(.flat), .toolbar .linked button.keyboard-activating, button.keyboard-activating, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, 821c821 < row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:active:not(.suggested-action):not(.destructive-action):not(.flat), button:active { --- > row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:active:not(.suggested-action):not(.destructive-action):not(.flat), .toolbar .linked button:active, button:active { 834c834 < row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:disabled { --- > row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat), .toolbar .linked button:disabled, button:disabled { 843,844c843,844 < row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action):not(.flat), button:checked { < background-color: #91d7e3; --- > row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action):not(.flat), .toolbar .linked button:checked, button:checked { > background-color: #8bd5ca; 853c853 < background-color: #a5dee8; --- > background-color: #9edcd3; 862c862 < background-color: rgba(145, 215, 227, 0.35); --- > background-color: rgba(139, 213, 202, 0.35); 1016c1016 < background-color: #343434; --- > background-color: #464751; 1121c1121 < background-color: #91d7e3; --- > background-color: #8bd5ca; 1123c1123 < border-color: #91d7e3; --- > border-color: #8bd5ca; 1129c1129 < background-color: #a5dee8; --- > background-color: #9edcd3; 1135c1135 < background-color: rgba(145, 215, 227, 0.35); --- > background-color: rgba(139, 213, 202, 0.35); 1148,1149c1148,1149 < color: #FF7043; < box-shadow: inset 0 0 0 1px #FF7043; --- > color: #f5a97f; > box-shadow: inset 0 0 0 1px #f5a97f; 1209c1209 < background-color: #91d7e3; --- > background-color: #8bd5ca; 1221c1221 < box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(145, 215, 227, 0.2), 0 4px 3px 0 rgba(145, 215, 227, 0.14), 0 1px 6px 0 rgba(145, 215, 227, 0.12); --- > box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(139, 213, 202, 0.2), 0 4px 3px 0 rgba(139, 213, 202, 0.14), 0 1px 6px 0 rgba(139, 213, 202, 0.12); 1225c1225 < background-color: rgba(109, 162, 171, 0.961); --- > background-color: rgba(105, 160, 152, 0.961); 1229c1229 < box-shadow: inset 0 0 0 9999px transparent, 0 3px 3px -3px rgba(145, 215, 227, 0.3), 0 2px 3px -1px rgba(145, 215, 227, 0.24), 0 2px 5px 0 rgba(145, 215, 227, 0.12); --- > box-shadow: inset 0 0 0 9999px transparent, 0 3px 3px -3px rgba(139, 213, 202, 0.3), 0 2px 3px -1px rgba(139, 213, 202, 0.24), 0 2px 5px 0 rgba(139, 213, 202, 0.12); 1233c1233 < box-shadow: 0 0 0 2px rgba(145, 215, 227, 0.35); --- > box-shadow: 0 0 0 2px rgba(139, 213, 202, 0.35); 1238c1238 < color: #91d7e3; --- > color: #8bd5ca; 1247c1247 < background-color: rgba(145, 215, 227, 0.3); --- > background-color: rgba(139, 213, 202, 0.3); 1251,1252c1251,1252 < background-color: #F44336; < color: #FFFFFF; --- > background-color: #ed8796; > color: rgba(0, 0, 0, 0.87); 1263c1263 < box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(244, 67, 54, 0.2), 0 4px 3px 0 rgba(244, 67, 54, 0.14), 0 1px 6px 0 rgba(244, 67, 54, 0.12); --- > box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(237, 135, 150, 0.2), 0 4px 3px 0 rgba(237, 135, 150, 0.14), 0 1px 6px 0 rgba(237, 135, 150, 0.12); 1267c1267 < background-color: #f77b72; --- > background-color: rgba(178, 102, 113, 0.961); 1271c1271 < box-shadow: inset 0 0 0 9999px transparent, 0 3px 3px -3px rgba(244, 67, 54, 0.3), 0 2px 3px -1px rgba(244, 67, 54, 0.24), 0 2px 5px 0 rgba(244, 67, 54, 0.12); --- > box-shadow: inset 0 0 0 9999px transparent, 0 3px 3px -3px rgba(237, 135, 150, 0.3), 0 2px 3px -1px rgba(237, 135, 150, 0.24), 0 2px 5px 0 rgba(237, 135, 150, 0.12); 1275c1275 < box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.35); --- > box-shadow: 0 0 0 2px rgba(237, 135, 150, 0.35); 1280c1280 < color: #F44336; --- > color: #ed8796; 1289c1289 < background-color: rgba(244, 67, 54, 0.3); --- > background-color: rgba(237, 135, 150, 0.3); 1336c1336 < background-color: #91d7e3; --- > background-color: #8bd5ca; 1341c1341 < background-color: #F44336; --- > background-color: #ed8796; 1346c1346 < background-color: #343434; --- > background-color: #464751; 1464c1464 < background-color: #91d7e3; --- > background-color: #8bd5ca; 1469c1469 < background-color: #F44336; --- > background-color: #ed8796; 1474c1474 < background-color: #343434; --- > background-color: #464751; 1602c1602 < background-color: #91d7e3; --- > background-color: #8bd5ca; 1608,1609c1608,1609 < background-color: #F44336; < color: #FFFFFF; --- > background-color: #ed8796; > color: rgba(0, 0, 0, 0.87); 1616c1616 < color: #5bd3f8; --- > color: #91d7e3; 1620c1620 < color: #BA68C8; --- > color: #c6a0f6; 1624c1624 < color: #5bd3f8; --- > color: #91d7e3; 1628c1628 < color: #BA68C8; --- > color: #c6a0f6; 1655c1655 < outline: 2px solid #91d7e3; --- > outline: 2px solid #8bd5ca; 1896c1896 < background-color: #010101; --- > background-color: #181926; 1909c1909 < background-color: #020202; --- > background-color: #24273a; 1975c1975 < background-color: #010101; --- > background-color: #181926; 2062,2063c2062 < box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); < background-color: #000000; --- > background-color: #181926; 2067a2067,2068 > border-radius: 12px 12px 0 0; > box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); 2075c2076 < background-color: #010101; --- > background-color: #181926; 2077d2077 < box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); 2086d2085 < box-shadow: none; 2087a2087 > box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); 2209c2209 < background-color: #91d7e3; --- > background-color: #8bd5ca; 2234d2233 < box-shadow: none; 2237,2241c2236 < background-image: image(#000000); < } < < headerbar.default-decoration:backdrop { < background-image: image(#010101); --- > box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); 2244,2245c2239 < headerbar.default-decoration windowcontrols button, < headerbar.default-decoration windowcontrols menubutton { --- > headerbar.default-decoration windowcontrols > button { 2248c2242 < margin: 0; --- > margin: 0 2px; 2258a2253,2256 > .maximized headerbar, .fullscreen headerbar, .tiled headerbar, .tiled-top headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .tiled-left headerbar { > box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); > } > 2261c2259 < box-shadow: none; --- > box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); 2265c2263 < background: #000000 cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, linear-gradient(to right, transparent 65%, rgba(145, 215, 227, 0.1)), linear-gradient(to top, #080808 3px, #0d0d0d); --- > background: #181926 cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, linear-gradient(to right, transparent 65%, rgba(139, 213, 202, 0.1)), linear-gradient(to top, #1e1f2f 3px, #222336); 2269c2267 < background: #000000 cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, image(#000000); --- > background: #181926 cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, image(#181926); 2350,2351c2348,2349 < border-left-color: #1f1f1f; < border-top-color: #1f1f1f; --- > border-left-color: #343540; > border-top-color: #343540; 2444c2442 < border-bottom: 4px solid #91d7e3; --- > border-bottom: 4px solid #8bd5ca; 2486c2484 < background-color: #010101; --- > background-color: #181926; 2504c2502 < background-color: #010101; --- > background-color: #181926; 2506c2504 < color: #91d7e3; --- > color: #8bd5ca; 2511c2509 < background-color: #91d7e3; --- > background-color: #8bd5ca; 2523c2521 < background-color: #000000; --- > background-color: #181926; 2528c2526 < background-color: #010101; --- > background-color: #181926; 2633c2631 < background-color: #020202; --- > background-color: #24273a; 2671c2669 < background-color: #020202; --- > background-color: #24273a; 2722c2720 < background-color: #010101; --- > background-color: #181926; 2784c2782 < background-color: #010101; --- > background-color: #181926; 3000c2998 < background-color: #000000; --- > background-color: #181926; 3011c3009 < background-color: #010101; --- > background-color: #181926; 3052c3050 < background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), alpha(#91d7e3, 0.4) 10%, alpha(#91d7e3, 0) 30%); --- > background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), alpha(#8bd5ca, 0.4) 10%, alpha(#8bd5ca, 0) 30%); 3056c3054 < background-image: image(alpha(currentColor, 0.03)), radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), alpha(#91d7e3, 0.4) 10%, alpha(#91d7e3, 0) 30%); --- > background-image: image(alpha(currentColor, 0.03)), radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), alpha(#8bd5ca, 0.4) 10%, alpha(#8bd5ca, 0) 30%); 3068c3066 < background: linear-gradient(to right, #010101, rgba(0, 0, 0, 0) 20px); --- > background: linear-gradient(to right, #181926, rgba(0, 0, 0, 0) 20px); 3072c3070 < background: linear-gradient(to left, #010101, rgba(0, 0, 0, 0) 20px); --- > background: linear-gradient(to left, #181926, rgba(0, 0, 0, 0) 20px); 3076c3074 < background: linear-gradient(to right, alpha(#91d7e3, 0.5), alpha(#91d7e3, 0.3) 1px, alpha(#91d7e3, 0) 20px); --- > background: linear-gradient(to right, alpha(#8bd5ca, 0.5), alpha(#8bd5ca, 0.3) 1px, alpha(#8bd5ca, 0) 20px); 3080c3078 < background: linear-gradient(to left, alpha(#91d7e3, 0.5), alpha(#91d7e3, 0.3) 1px, alpha(#91d7e3, 0) 20px); --- > background: linear-gradient(to left, alpha(#8bd5ca, 0.5), alpha(#8bd5ca, 0.3) 1px, alpha(#8bd5ca, 0) 20px); 3119c3117 < background-color: #000000; --- > background-color: #181926; 3128c3126 < background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), alpha(#91d7e3, 0.4) 10%, alpha(#91d7e3, 0) 30%); --- > background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), alpha(#8bd5ca, 0.4) 10%, alpha(#8bd5ca, 0) 30%); 3161c3159 < background: alpha(#91d7e3, 0.5); --- > background: alpha(#8bd5ca, 0.5); 3175,3176c3173,3174 < box-shadow: inset 0 0 0 2px alpha(#FF7043, 0.4); < background-color: alpha(#FF7043, 0.1); --- > box-shadow: inset 0 0 0 2px alpha(#f5a97f, 0.4); > background-color: alpha(#f5a97f, 0.1); 3188c3186 < background: #91d7e3; --- > background: #8bd5ca; 3193c3191 < box-shadow: 0 1px 2px alpha(#91d7e3, 0.4); --- > box-shadow: 0 1px 2px alpha(#8bd5ca, 0.4); 3254c3252 < background-color: #010101; --- > background-color: #181926; 3332c3330 < border: 1px solid rgba(1, 1, 1, 0.3); --- > border: 1px solid rgba(24, 25, 38, 0.3); 3339c3337 < border: 1px solid rgba(1, 1, 1, 0.3); --- > border: 1px solid rgba(24, 25, 38, 0.3); 3417c3415 < background-color: #91d7e3; --- > background-color: #8bd5ca; 3424,3427d3421 < switch image { < margin: -8px; < } < 3514c3508 < background-color: #91d7e3; --- > background-color: #8bd5ca; 3520,3521c3514,3515 < box-shadow: 0 0 0 6px rgba(145, 215, 227, 0.15); < background-color: #bae6ed; --- > box-shadow: 0 0 0 6px rgba(139, 213, 202, 0.15); > background-color: #b0e3db; 3527,3528c3521,3522 < box-shadow: 0 0 0 6px rgba(145, 215, 227, 0.2); < background-color: #91d7e3; --- > box-shadow: 0 0 0 6px rgba(139, 213, 202, 0.2); > background-color: #8bd5ca; 3535c3529 < background-color: rgba(145, 215, 227, 0.35); --- > background-color: rgba(139, 213, 202, 0.35); 3682c3676 < background-color: #91d7e3; --- > background-color: #8bd5ca; 3713c3707 < background-image: image(#91d7e3); --- > background-image: image(#8bd5ca); 3717c3711 < background-color: #010101; --- > background-color: #181926; 3736,3738c3730,3732 < color: #91d7e3; < background-color: #010101; < box-shadow: inset 0 0 0 2px #91d7e3; --- > color: #8bd5ca; > background-color: #181926; > box-shadow: inset 0 0 0 2px #8bd5ca, 0 0 0 8px transparent; 3742c3736 < box-shadow: inset 0 0 0 2px #91d7e3, 0 0 0 8px rgba(255, 255, 255, 0.12); --- > box-shadow: inset 0 0 0 2px #8bd5ca, 0 0 0 8px rgba(255, 255, 255, 0.12); 3746c3740 < box-shadow: inset 0 0 0 4px #91d7e3, 0 0 0 8px rgba(255, 255, 255, 0.12); --- > box-shadow: inset 0 0 0 4px #8bd5ca, 0 0 0 8px rgba(255, 255, 255, 0.12); 4070c4064 < background-color: #91d7e3; --- > background-color: #8bd5ca; 4087c4081 < background-color: #91d7e3; --- > background-color: #8bd5ca; 4126c4120 < background-color: #FBC02D; --- > background-color: #eed49f; 4130c4124 < background-color: #91d7e3; --- > background-color: #8bd5ca; 4134c4128 < background-color: #66BB6A; --- > background-color: #a6da95; 4154c4148 < background-color: #010101; --- > background-color: #181926; 4196a4191,4202 > actionbar.toolbar { > background-color: transparent; > padding: 0; > border-spacing: 0; > border: none; > box-shadow: none; > } > > actionbar.toolbar > revealer > box { > background-color: #181926; > } > 4201c4207 < background-color: #010101; --- > background-color: #181926; 4328c4334 < background-color: #010101; --- > background-color: #181926; 4395d4400 < outline: none; 4612c4617 < background-color: alpha(#F44336, 0.2); --- > background-color: alpha(#ed8796, 0.2); 4631,4632c4636,4637 < background-color: #F44336; < color: #FFFFFF; --- > background-color: #ed8796; > color: rgba(0, 0, 0, 0.87); 4637c4642 < background-color: alpha(#FBC02D, 0.2); --- > background-color: alpha(#eed49f, 0.2); 4656c4661 < background-color: #FBC02D; --- > background-color: #eed49f; 4662c4667 < background-color: alpha(#66BB6A, 0.2); --- > background-color: alpha(#a6da95, 0.2); 4681,4682c4686,4687 < background-color: #66BB6A; < color: #FFFFFF; --- > background-color: #a6da95; > color: rgba(0, 0, 0, 0.87); 4782c4787 < color: #91d7e3; --- > color: #8bd5ca; 4842c4847 < outline: 2px solid #91d7e3; --- > outline: 2px solid #8bd5ca; 4847c4852 < background-color: #91d7e3; --- > background-color: #8bd5ca; 4862c4867 < color: #91d7e3; --- > color: #8bd5ca; 4995c5000 < background-color: #020202; --- > background-color: #24273a; 5016c5021 < background-color: #020202; --- > background-color: #24273a; 5021c5026 < background-color: #020202; --- > background-color: #24273a; 5040c5045 < color: #91d7e3; --- > color: #8bd5ca; 5044c5049 < color: #F44336; --- > color: #ed8796; 5055c5060 < background-color: #020202; --- > background-color: #24273a; 5077c5082 < color: #91d7e3; --- > color: #8bd5ca; 5081c5086 < color: #F44336; --- > color: #ed8796; 5090c5095 < background-color: #010101; --- > background-color: #181926; 5111c5116 < background-color: #000000; --- > background-color: #181926; 5134c5139 < background-color: #000000; --- > background-color: #181926; 5180c5185 < background-color: #000000; --- > background-color: #181926; 5249c5254 < color: #91d7e3; --- > color: #8bd5ca; 5253c5258 < color: #91d7e3; --- > color: #8bd5ca; 5283c5288 < background-image: image(#1f1f1f); --- > background-image: image(#343540); 5292,5293c5297,5298 < background-color: #010101; < background-image: image(#1f1f1f), image(#1f1f1f); --- > background-color: #181926; > background-image: image(#343540), image(#343540); 5360c5365 < background-color: #010101; --- > background-color: #181926; 5365c5370 < color: #91d7e3; --- > color: #8bd5ca; 5369c5374 < background-color: #91d7e3; --- > background-color: #8bd5ca; 5382c5387 < background-color: #7dd0de; --- > background-color: #78cec1; 5386c5391 < background-color: #FBC02D; --- > background-color: #eed49f; 5399c5404 < background-color: #fbb814; --- > background-color: #eaca89; 5403,5404c5408,5409 < background-color: #F44336; < color: #FFFFFF; --- > background-color: #ed8796; > color: rgba(0, 0, 0, 0.87); 5408c5413 < color: #FFFFFF; --- > color: rgba(0, 0, 0, 0.87); 5412c5417 < color: #FFFFFF; --- > color: rgba(0, 0, 0, 0.87); 5416c5421 < background-color: #f32c1e; --- > background-color: #ea7183; 5493c5498 < box-shadow: 0 0 0 2px #91d7e3; --- > box-shadow: 0 0 0 2px #8bd5ca; 5542c5547 < background-color: #020202; --- > background-color: #24273a; 5553c5558 < background-color: #010101; --- > background-color: #181926; 5565,5566d5569 < outline-offset: -1px; < outline: 1px solid rgba(255, 255, 255, 0.1); 5568a5572 > outline: 0 none transparent; 5591,5592c5595,5596 < background-color: #000000; < border: 1px solid #1f1f1f; --- > background-color: #181926; > border: 1px solid #343540; 5596c5600 < background-color: #010101; --- > background-color: #181926; 5625c5629 < color: rgba(0, 0, 0, 0.5); --- > color: white; 5685,5686c5689,5690 < color: #91d7e3; < background-color: rgba(145, 215, 227, 0.2); --- > color: #8bd5ca; > background-color: rgba(139, 213, 202, 0.2); 5694c5698 < background-color: #91d7e3; --- > background-color: #8bd5ca; 5701c5705 < color: #91d7e3; --- > color: #8bd5ca; 5732c5736 < background-color: #020202; --- > background-color: #24273a; 5738c5742 < caret-color: #91d7e3; --- > caret-color: #8bd5ca; 5846c5850 < color: #91d7e3; --- > color: #8bd5ca; 5890c5894 < background-color: #91d7e3; --- > background-color: #8bd5ca; 5968c5972 < .display-container.card { --- > .small .display-container.card { 5975c5979 < background-color: #010101; --- > background-color: #181926; 6013c6017 < color: #91d7e3; --- > color: #8bd5ca; 6025c6029 < color: #91d7e3; --- > color: #8bd5ca; 6038c6042 < background-color: alpha(#91d7e3, 0.3); --- > background-color: alpha(#8bd5ca, 0.3); 6042c6046 < background-color: #010101; --- > background-color: #181926; 6052c6056 < background-color: #010101; --- > background-color: #181926; 6112c6116 < background-color: #010101; --- > background-color: #181926; 6177c6181 < background-color: #91d7e3; --- > background-color: #8bd5ca; 6187c6191 < color: #91d7e3; --- > color: #8bd5ca; 6191c6195 < background-color: #91d7e3; --- > background-color: #8bd5ca; 6245c6249 < background-color: alpha(#91d7e3, 0.8); --- > background-color: alpha(#8bd5ca, 0.8); 6253c6257 < background-color: alpha(#91d7e3, 0.25); --- > background-color: alpha(#8bd5ca, 0.25); 6264c6268 < background-color: #000000; --- > background-color: #181926; 6270c6274 < background-color: alpha(#91d7e3, 0.1); --- > background-color: alpha(#8bd5ca, 0.1); 6274c6278 < background-color: alpha(#91d7e3, 0.2); --- > background-color: alpha(#8bd5ca, 0.2); 6286c6290 < background-color: alpha(#91d7e3, 0.2); --- > background-color: alpha(#8bd5ca, 0.2); 6290,6291c6294,6295 < background-color: alpha(#91d7e3, 0.3); < color: #91d7e3; --- > background-color: alpha(#8bd5ca, 0.3); > color: #8bd5ca; 6295c6299 < background-color: alpha(#91d7e3, 0.25); --- > background-color: alpha(#8bd5ca, 0.25); 6299c6303 < background-color: alpha(#91d7e3, 0.35); --- > background-color: alpha(#8bd5ca, 0.35); 6367c6371 < background: alpha(#000000, 0.7); --- > background: alpha(#181926, 0.7); 6422c6426 < background-color: #91d7e3; --- > background-color: #8bd5ca; 6461c6465 < color: #FBC02D; --- > color: #eed49f; 6616c6620 < background-color: #FBC02D; --- > background-color: #eed49f; 6639c6643 < background-image: linear-gradient(to top, #91d7e3 2px, alpha(#91d7e3, 0) 2px); --- > background-image: linear-gradient(to top, #8bd5ca 2px, alpha(#8bd5ca, 0) 2px); 6723c6727 < color: #FFD600; --- > color: #eed49f; 6743c6747 < background: linear-gradient(to bottom, #66BB6A, #5b9bf8); --- > background: linear-gradient(to bottom, #a6da95, #8aadf4); 6882,6883c6886,6887 < color: #419345; < background-color: rgba(102, 187, 106, 0.15); --- > color: #76c65c; > background-color: rgba(166, 218, 149, 0.15); 6887,6888c6891,6892 < color: #5b9bf8; < background-color: rgba(91, 155, 248, 0.15); --- > color: #8aadf4; > background-color: rgba(138, 173, 244, 0.15); 6892,6893c6896,6897 < color: #d79b04; < background-color: rgba(251, 192, 45, 0.15); --- > color: #e2b75e; > background-color: rgba(238, 212, 159, 0.15); 6897,6898c6901,6902 < color: #FF8A65; < background-color: rgba(255, 138, 101, 0.15); --- > color: #f5a97f; > background-color: rgba(245, 169, 127, 0.15); 6902,6903c6906,6907 < color: #d2190b; < background-color: rgba(244, 67, 54, 0.15); --- > color: #e3445c; > background-color: rgba(237, 135, 150, 0.15); 6908c6912 < color: #F44336; --- > color: #ed8796; 6969c6973 < color: #F44336; --- > color: #ed8796; 6995c6999 < background-image: linear-gradient(to bottom, transparent, transparent 40px, #010101 40px, #010101); --- > background-image: linear-gradient(to bottom, transparent, transparent 40px, #181926 40px, #181926); 6998,7001c7002,7005 < @define-color weather_temp_chart_fill_color rgba(251, 192, 45, 0.5); < @define-color weather_temp_chart_stroke_color #f0ad05; < @define-color weather_thermometer_warm_color #FBC02D; < @define-color weather_thermometer_cold_color #5b9bf8; --- > @define-color weather_temp_chart_fill_color rgba(238, 212, 159, 0.5); > @define-color weather_temp_chart_stroke_color #e6c174; > @define-color weather_thermometer_warm_color #eed49f; > @define-color weather_thermometer_cold_color #8aadf4; 7066c7070 < color: #FBC02D; --- > color: #eed49f; 7071c7075 < color: #5b9bf8; --- > color: #8aadf4; 7103,7104c7107,7108 < background-color: #3c84f7; < color: #FFFFFF; --- > background-color: #8aadf4; > color: rgba(0, 0, 0, 0.87); 7180c7184 < color: #91d7e3; --- > color: #8bd5ca; 7213,7214c7217,7218 < color: #3c84f7; < background-color: alpha(#5b9bf8, 0.25); --- > color: #8aadf4; > background-color: alpha(#8aadf4, 0.25); 7219,7220c7223,7224 < color: #FF7043; < background-color: alpha(#FF8A65, 0.25); --- > color: #f5a97f; > background-color: alpha(#f5a97f, 0.25); 7225,7226c7229,7230 < color: #FFD600; < background: alpha(#FBC02D, 0.25); --- > color: #eed49f; > background: alpha(#eed49f, 0.25); 7246c7250 < background-color: #000000; --- > background-color: #181926; 7250c7254 < background-color: #010101; --- > background-color: #181926; 7320c7324 < outline-color: #91d7e3; --- > outline-color: #8bd5ca; 7334,7335c7338,7339 < border-top: 2px solid #91d7e3; < background: rgba(145, 215, 227, 0.9); --- > border-top: 2px solid #8bd5ca; > background: rgba(139, 213, 202, 0.9); 7340,7342c7344,7346 < border-top: 2px solid #F44336; < background: rgba(244, 67, 54, 0.9); < color: #FFFFFF; --- > border-top: 2px solid #ed8796; > background: rgba(237, 135, 150, 0.9); > color: rgba(0, 0, 0, 0.87); 7444c7448 < background-color: #010101; --- > background-color: #181926; 7477c7481 < background-color: #010101; --- > background-color: #181926; 7602c7606 < background-color: #91d7e3; --- > background-color: #8bd5ca; 7649c7653 < outline-color: #91d7e3; --- > outline-color: #8bd5ca; 7653c7657 < background-color: #000000; --- > background-color: #181926; 7669c7673 < color: #91d7e3; --- > color: #8bd5ca; 7788c7792 < background-color: #000000; --- > background-color: #181926; 7794c7798 < background-color: #010101; --- > background-color: #181926; 7813c7817 < background-color: mix(#91d7e3,#000000,0.7); --- > background-color: mix(#8bd5ca,#181926,0.7); 7818c7822 < background-color: mix(#91d7e3,#000000,0.7); --- > background-color: mix(#8bd5ca,#181926,0.7); 7824c7828 < background-color: #010101; --- > background-color: #181926; 7830c7834 < background-color: #010101; --- > background-color: #181926; 7836c7840 < background-color: mix(#91d7e3,#010101,0.7); --- > background-color: mix(#8bd5ca,#181926,0.7); 7842c7846 < background-color: mix(#91d7e3,#010101,0.7); --- > background-color: mix(#8bd5ca,#181926,0.7); 8126c8130 < background-color: #000000; --- > background-color: #181926; 8130c8134 < background-color: #010101; --- > background-color: #181926; 8157c8161 < box-shadow: inset 0 0 0 2px #91d7e3; --- > box-shadow: inset 0 0 0 2px #8bd5ca; 8198c8202 < background-color: #91d7e3; --- > background-color: #8bd5ca; 8220c8224 < background-color: #91d7e3; --- > background-color: #8bd5ca; 8238c8242 < box-shadow: inset 0 0 0 2px #91d7e3; --- > box-shadow: inset 0 0 0 2px #8bd5ca; 8276c8280 < @define-color theme_bg_color #010101; --- > @define-color theme_bg_color #181926; 8279c8283 < @define-color theme_base_color #010101; --- > @define-color theme_base_color #181926; 8282c8286 < @define-color theme_selected_bg_color #91d7e3; --- > @define-color theme_selected_bg_color #8bd5ca; 8288c8292 < @define-color insensitive_bg_color #010101; --- > @define-color insensitive_bg_color #181926; 8294c8298 < @define-color insensitive_base_color #000000; --- > @define-color insensitive_base_color #181926; 8303c8307 < @define-color theme_unfocused_bg_color #010101; --- > @define-color theme_unfocused_bg_color #181926; 8306c8310 < @define-color theme_unfocused_base_color #010101; --- > @define-color theme_unfocused_base_color #181926; 8309c8313 < @define-color theme_unfocused_selected_bg_color #91d7e3; --- > @define-color theme_unfocused_selected_bg_color #8bd5ca; 8324,8326c8328,8330 < @define-color warning_color #FBC02D; < @define-color error_color #F44336; < @define-color success_color #66BB6A; --- > @define-color warning_color #eed49f; > @define-color error_color #ed8796; > @define-color success_color #a6da95; 8333,8335c8337,8339 < @define-color wm_border black; < @define-color wm_bg #000000; < @define-color wm_unfocused_bg #010101; --- > @define-color wm_border #050508; > @define-color wm_bg #181926; > @define-color wm_unfocused_bg #181926; 8345,8346c8349,8350 < @define-color content_view_bg #010101; < @define-color placeholder_text_color #b3b3b3; --- > @define-color content_view_bg #181926; > @define-color placeholder_text_color #bababe; 8348c8352 < @define-color text_view_bg #010101; --- > @define-color text_view_bg #181926; 8350,8352c8354,8356 < @define-color budgie_tasklist_indicator_color_active #91d7e3; < @define-color budgie_tasklist_indicator_color_active_window #4e747b; < @define-color budgie_tasklist_indicator_color_attention #FBC02D; --- > @define-color budgie_tasklist_indicator_color_active #8bd5ca; > @define-color budgie_tasklist_indicator_color_active_window #4b736d; > @define-color budgie_tasklist_indicator_color_attention #eed49f; 8451c8455 < @define-color accent_bg_color #91d7e3; --- > @define-color accent_bg_color #8bd5ca; 8453,8460c8457,8464 < @define-color accent_color #91d7e3; < @define-color destructive_bg_color #F44336; < @define-color destructive_fg_color #FFFFFF; < @define-color destructive_color #F44336; < @define-color success_bg_color #66BB6A; < @define-color success_fg_color #FFFFFF; < @define-color success_color #66BB6A; < @define-color warning_bg_color #FBC02D; --- > @define-color accent_color #8bd5ca; > @define-color destructive_bg_color #ed8796; > @define-color destructive_fg_color rgba(0, 0, 0, 0.87); > @define-color destructive_color #ed8796; > @define-color success_bg_color #a6da95; > @define-color success_fg_color rgba(0, 0, 0, 0.87); > @define-color success_color #a6da95; > @define-color warning_bg_color #eed49f; 8462,8466c8466,8470 < @define-color warning_color #FBC02D; < @define-color error_bg_color #F44336; < @define-color error_fg_color #FFFFFF; < @define-color error_color #F44336; < @define-color window_bg_color #010101; --- > @define-color warning_color #eed49f; > @define-color error_bg_color #ed8796; > @define-color error_fg_color rgba(0, 0, 0, 0.87); > @define-color error_color #ed8796; > @define-color window_bg_color #181926; 8468c8472 < @define-color view_bg_color #010101; --- > @define-color view_bg_color #181926; 8470c8474 < @define-color headerbar_bg_color #000000; --- > @define-color headerbar_bg_color #181926; 8473c8477 < @define-color headerbar_backdrop_color #010101; --- > @define-color headerbar_backdrop_color #181926; 8475c8479 < @define-color card_bg_color #010101; --- > @define-color card_bg_color #181926; 8478c8482 < @define-color dialog_bg_color #000000; --- > @define-color dialog_bg_color #181926; 8480c8484 < @define-color popover_bg_color #010101; --- ```

Attach screenshots.

No response

How did you install the theme?

From source (Python script)

If using GTK4, have you symlinked the "gtk-4.0" folder?

[X] I have symlinked the gtk-4.0 folder.

What GNOME version are you seeing the bug on?

N/A

Any additional comments?

I'm using https://github.com/Aylur/ags not gnome-shell, but the differences are visible in the theme files.

nullishamy commented 6 months ago

gtk-4.0/gtk-dark.css --- 172/174 --- Text (346 CSS parse errors, exceeded DFT_PARSE_ERROR_LIMIT)
8349 @define-color wm_title #FFFFFF;                                          8348 @define-color wm_title #FFFFFF;
8350 @define-color wm_unfocused_title rgba(255, 255, 255, 0.7);               8349 @define-color wm_unfocused_title rgba(255, 255, 255, 0.7);
8351 @define-color wm_highlight rgba(255, 255, 255, 0.1);                     8350 @define-color wm_highlight rgba(255, 255, 255, 0.1);
8352 @define-color wm_border rgba(26, 33, 24, 0.94902);                       8351 @define-color wm_border #0a0a0e;
8353 @define-color wm_bg #11111b;                                             8352 @define-color wm_bg #313244;
8354 @define-color wm_unfocused_bg #CAFEBABE;                                 8353 @define-color wm_unfocused_bg #313244;
8355 @define-color wm_button_icon white;                                      8354 @define-color wm_button_icon white;
8356 @define-color wm_button_close_hover_bg #f38ba8;                          8355 @define-color wm_button_close_hover_bg #f38ba8;
8357 @define-color wm_button_close_active_bg #ed547e;                         8356 @define-color wm_button_close_active_bg #ed547e;

gtk-4.0/gtk-dark.css --- 173/174 --- Text (346 CSS parse errors, exceeded DFT_PARSE_ERROR_LIMIT)
8361 @define-color wm_button_min_active_bg #f5cd76;                           8360 @define-color wm_button_min_active_bg #f5cd76;
8362 /*                                                                       8361 /*
8363 FIXME this is really an API */                                           8362 FIXME this is really an API */
8364 @define-color content_view_bg #CAFEBABE;                                 8363 @define-color content_view_bg #313244;
8365 @define-color placeholder_text_color rgba(244, 255, 241, 0.923529);      8364 @define-color placeholder_text_color #c1c2c7;
8366 /* Very contrasty background for text views (@theme_text_color foregroun 8365 /* Very contrasty background for text views (@theme_text_color foregroun
.... d) */                                                                    .... d) */
8367 @define-color text_view_bg #CAFEBABE;                                    8366 @define-color text_view_bg #313244;
8368 @define-color budgie_tasklist_indicator_color rgba(255, 255, 255, 0.3);  8367 @define-color budgie_tasklist_indicator_color rgba(255, 255, 255, 0.3);
8369 @define-color budgie_tasklist_indicator_color_active #cba6f7;            8368 @define-color budgie_tasklist_indicator_color_active #cba6f7;
8370 @define-color budgie_tasklist_indicator_color_active_window #6e5a85;     8369 @define-color budgie_tasklist_indicator_color_active_window #7b679b;
8371 @define-color budgie_tasklist_indicator_color_attention #f9e2af;         8370 @define-color budgie_tasklist_indicator_color_attention #f9e2af;
8372 @define-color STRAWBERRY_100 #FF9262;                                    8371 @define-color STRAWBERRY_100 #FF9262;
8373 @define-color STRAWBERRY_300 #FF793E;                                    8372 @define-color STRAWBERRY_300 #FF793E;

gtk-4.0/gtk-dark.css --- 174/174 --- Text (346 CSS parse errors, exceeded DFT_PARSE_ERROR_LIMIT)
8482 @define-color error_bg_color #f38ba8;                                    8481 @define-color error_bg_color #f38ba8;
8483 @define-color error_fg_color rgba(0, 0, 0, 0.87);                        8482 @define-color error_fg_color rgba(0, 0, 0, 0.87);
8484 @define-color error_color #f38ba8;                                       8483 @define-color error_color #f38ba8;
8485 @define-color window_bg_color #CAFEBABE;                                 8484 @define-color window_bg_color #313244;
8486 @define-color window_fg_color rgba(0, 0, 0, 0.87);                       8485 @define-color window_fg_color #FFFFFF;
8487 @define-color view_bg_color #CAFEBABE;                                   8486 @define-color view_bg_color #313244;
8488 @define-color view_fg_color rgba(0, 0, 0, 0.87);                         8487 @define-color view_fg_color #FFFFFF;
8489 @define-color headerbar_bg_color #11111b;                                8488 @define-color headerbar_bg_color #313244;
8490 @define-color headerbar_fg_color #FFFFFF;                                8489 @define-color headerbar_fg_color #FFFFFF;
8491 @define-color headerbar_border_color rgba(255, 255, 255, 0.12);          8490 @define-color headerbar_border_color rgba(255, 255, 255, 0.12);
8492 @define-color headerbar_backdrop_color #CAFEBABE;                        8491 @define-color headerbar_backdrop_color #313244;
8493 @define-color headerbar_shade_color rgba(255, 255, 255, 0.12);           8492 @define-color headerbar_shade_color rgba(255, 255, 255, 0.12);
8494 @define-color card_bg_color #CAFEBABE;                                   8493 @define-color card_bg_color #313244;
8495 @define-color card_fg_color rgba(0, 0, 0, 0.87);                         8494 @define-color card_fg_color #FFFFFF;
8496 @define-color card_shade_color rgba(255, 255, 255, 0.12);                8495 @define-color card_shade_color rgba(255, 255, 255, 0.12);
8497 @define-color dialog_bg_color #11111b;                                   8496 @define-color dialog_bg_color #313244;
8498 @define-color dialog_fg_color rgba(0, 0, 0, 0.87);                       8497 @define-color dialog_fg_color #FFFFFF;
8499 @define-color popover_bg_color #CAFEBABE;                                8498 @define-color popover_bg_color #313244;
8500 @define-color popover_fg_color rgba(0, 0, 0, 0.87);                      8499 @define-color popover_fg_color #FFFFFF;
8501 @define-color shade_color rgba(255, 255, 255, 0.12);                     8500 @define-color shade_color rgba(255, 255, 255, 0.12);
8502 @define-color scrollbar_outline_color rgba(255, 255, 255, 0.12);         8501 @define-color scrollbar_outline_color rgba(255, 255, 255, 0.12);

As a test, I added in some garbage (CAFEBABE) into the condition where 'blackness' is applied (colors.scss background function), and as you can see it is being applied to the theme throughout. There is undoubtedly going to be changes in the theme, basically because the old build system ran a find and replace across all of colloid looking for hex codes to replace. The new system properly integrates with colloid to give it full control over the palette.

My understanding is that you haven't tested this visually, only looked at the diff? If so, I'd appreciate some visual confirmation this is a bug, because diff-only analysis will not work when jumping from 0.x to 1.x :+1:

As for your queries about color clipping, it is a colloid limitation. The old system had this too. We cannot map from our palette to colloid's 1:1, and have not yet retrofit colloid to support this. Therefor we approximate a best-effort color from colloid which maps into our palette.

(The reason you see sky in the css is likely because we specify it specifically for links in the theme, as colloid allows us to put a different color in there)

higherorderfunctor commented 6 months ago

@nullishamy it is visually different (blackness). I'll take some screenshots when I get back to a computer.

nullishamy commented 6 months ago

This is what blackness looks like on my machine. Unsure what it looked like previously but this seems fine to me?

Regular for reference

higherorderfunctor commented 6 months ago

@nullishamy here is what I had been using first, then rc3 with and without the blackness tweak.

edit: window bars are themed using hyprland catppuccin and not gtk.

https://github.com/catppuccin/gtk/commit/87a5f92f4bfc1a1377ce3db114408c92795d05d3 - blackness

rc3 - blackness

rc3 - no blackness

higherorderfunctor commented 6 months ago

Color codes for the dark empty regions in each screenshot.

$ hyprpicker # my 87a5f92 blackness
#010101      # pre 1.x blackness tweak not from palette

$ hyprpicker # my rc3 blackness
#181926      # Macchiato Crust

$ hyprpicker # my rc3 no blackness
#363A4F      # Macchiato Surface0

$ hyprpicker # nullishamy rc3 blackness
#11111B      # Mocha Crust

$ hyprpicker # nullishamy rc3 no blackness
#313244      # Mocha Surface0

higherorderfunctor commented 6 months ago

I'll switch to mocha for now as it is the darkest of the 4 palettes.

The colloid limitation makes sense.

I also understand if this is a won't fix situation for blackness. If there comes a time I really really want it and this is closed as a won't fix, I can work on a true-black/amoled-black tweak PR when I find some time.

I'll leave it up to the maintainers if they want to close this or not.

Appreciate the effort and for looking into this!

txtsd commented 6 months ago

The 1.x colors are SO different. It's not just about the blackness tweak. I hate how much brighter Mocha has become.

0.7.5 Mocha 2024-05-21-13:10:58:20:625023281-590x457_grim

1.0.0-rc3 Mocha 2024-05-21-13:11:08:20:875786673-590x457_grim

0.7.5 Mocha Black 2024-05-21-13:11:03:20:444851872-590x457_grim

1.0.0-rc3 Mocha Black 2024-05-21-13:11:12:20:288215326-590x457_grim

nullishamy commented 6 months ago

The 1.x colors are SO different. It's not just about the blackness tweak. I hate how much brighter Mocha has become.

If there's other changes to report as bugs, let's make another issue for it, keep things organised. @txtsd

nullishamy commented 6 months ago

Color codes for the dark empty regions in each screenshot.

$ hyprpicker # my 87a5f92 blackness
#010101      # pre 1.x blackness tweak not from palette

$ hyprpicker # my rc3 blackness
#181926      # Macchiato Crust

$ hyprpicker # my rc3 no blackness
#363A4F      # Macchiato Surface0

$ hyprpicker # nullishamy rc3 blackness
#11111B      # Mocha Crust

$ hyprpicker # nullishamy rc3 no blackness
#313244      # Mocha Surface0

@higherorderfunctor This is really helpful, thanks :pray:. Kind of expected, yeah, that the old system put random colours in there... As I thought, this area of the old script handles setting up the palette, as opposed to this template file in the new one.

I don't believe those super dark shades of gray are used anywhere else except the darkness mode, so we could certainly work on a palette change that makes it 'more true' to the old system? From what you've posted, the new system is actually using the palette correctly instead of these off palette colours, which is generally much better, though we do understand the desire to keep things looking similar to how they were, of course :+1:

What do you think about adding a tweak that configures the build to use the old palette (in this case, just the darks)? This could be easily plugged into the build system, and if we want to try it out I'm more than happy to open a PR to get some test builds up!

nullishamy commented 6 months ago

Here's my OLED implementation (pr: https://github.com/catppuccin/gtk/pull/213), if you want to test it, see the guide (https://github.com/catppuccin/gtk/blob/main/CONTRIBUTING.md#running-test-builds)

higherorderfunctor commented 6 months ago

@nullishamy I love it! The small calendar is a little darker, but that is probably because I switched to mocha. If this gets merged, which I hope it does, nix will need to have its options updated when they update to 1.x. I had to hard code oled into my build command.

https://github.com/NixOS/nixpkgs/blob/nixos-unstable/pkgs/data/themes/catppuccin-gtk/default.nix#L28C5-L28C20

nullishamy commented 6 months ago

Hello again

I released rc4 (https://github.com/catppuccin/gtk/releases/tag/v1.0.0-rc4), which changes the tweak back to black, as described in the release notes. I'd appreciate if you could retest and ensure nothing is broken, so that we can close this one out!

@higherorderfunctor

higherorderfunctor commented 6 months ago

Hello again

I released rc4 (https://github.com/catppuccin/gtk/releases/tag/v1.0.0-rc4), which changes the tweak back to black, as described in the release notes. I'd appreciate if you could retest and ensure nothing is broken, so that we can close this one out!

@higherorderfunctor

Ill test in the next hour or so. Thanks!

higherorderfunctor commented 6 months ago

The black tweak looks good to me @nullishamy building from main. Thanks again!

catppuccin / gtk