Gnome 47 styling issues

[musjj]

This is how it looks by default:

This is how it looks with stylix.targets.gnome.enable enabled on the NixOS module:

This is how it looks by default on Gnome 46.1:

Anyone know what's causing this? I'm on nixos-unstable with Gnome 47 and I'm noticing that the repo pinned it for 46:

https://github.com/danth/stylix/blob/6863412636c8f2cb3b7360f747fbd020fbfddf68/flake.nix#L36

It looks like that Gnome updated the button layout for 47, so maybe there's a styling conflict?

[musjj]

I tried to update it to 47.1 in my fork, but the button colors ended up getting weird:

The only thing I changed in the patch is (due to an error):

- $selected_borders_color: transparentize(#{{base05-hex}}, 0.5);
+ $accent_borders_color: transparentize(#{{base05-hex}}, 0.5);

I tried to compare the patches against the associated upstream files, but I'm not noticing anything off. I wonder if there's a styling system change somewhere in the codebase.

One thing I'm noticing is that they now have this -st-* colors:

$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));

But I'm not sure where it's coming from. Some assistance would be really appreciated here!

EDIT: It looks like that there are these new accent colors settings: https://release.gnome.org/47

Not sure how to incorporate Stylix with it.

[danth]

Usually, after each release, I update the gnome-shell input in flake.nix, and then modify the new CSS by hand to recreate the patches.

I haven't got around to doing this yet, so it's effectively still using the CSS from GNOME 46, but applied to the new GNOME 47 UI, hence the issues.

[musjj]

I actually tried to update the repo to Gnome 47, but there are these new accent color values that I'm not sure what to do about. For example, the button bg colors are now derived from -st-accent-color (which is why it looks weird in my second post), but I'm not sure how to customize them:

(46.1 -> 47.1)

-  @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
+  @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);

I wonder if you should just sed these values to the base16 colors.

[danth]

Regarding the accent colors, the style guide lists which colours each base "normally" corresponds to. Would that be sufficient?

Alternatively, we could consider disabling or hiding the accent color setting somehow, similar to how we currently handle the dark/light mode toggle.