transition not working (probably my fault) in scss

[Extner32]

The problem is that there is no transition at all, it just instantly changes.

my .py file for the workspaces. (basically just copy/paste from linkfrg's dotfiles)

from ignis import widgets
from ignis.widgets import Widget
from ignis.services.hyprland import HyprlandService, HyprlandWorkspace

hyprland = HyprlandService.get_default()


class WorkspaceButton(Widget.Button):
    def __init__(self, workspace: HyprlandWorkspace) -> None:
        
        super().__init__(
            css_classes=["workspace"],
            on_click=lambda x: workspace.switch_to(),
            halign="start",
            valign="center",
            child=Widget.Label(label=str(workspace.id)),
        )
        if workspace.id == hyprland.active_workspace.id:
            self.add_css_class("active")


def scroll_workspaces(direction: str) -> None:
    current = hyprland.active_workspace.id
    if direction == "up":
        target = current - 1
        hyprland.switch_to_workspace(target)
    else:
        target = current + 1
        if target == 11:
            return
        hyprland.switch_to_workspace(target)


class Workspaces(widgets.Box):
    def __init__(self):
        child = [
            widgets.EventBox(
                on_scroll_up=lambda x: scroll_workspaces("up"),
                on_scroll_down=lambda x: scroll_workspaces("down"),
                css_classes=["workspaces"],
                child=hyprland.bind_many(
                    ["workspaces", "active_workspace"],
                    transform=lambda workspaces, *_: [
                        WorkspaceButton(i) for i in workspaces
                    ],
                ),
            )
        ]
        super().__init__(child=child)
        

my entire style.css:

//material design 3 color roles:

//primary, secondary, tertiary
$primary: #d0bcfe;
$on-primary: #381e72;

$secondary: #ccc2dc;
$on-secondary: #332d41;

//surfaces
$surface: #141218;
$on-surface: #e6e0e9;

$surface-container: #211f26;

//dimensions
$padding: 3px;

$radius: 10px;
$radius-active: 5px;

* {
  all: unset; // Unsets everything so you can style everything from scratch
}

.bar {
    background-color: $surface;
    border-radius: 10px 10px 0px 0px;
    padding: $padding;
}

.workspace {
    background-color: $surface-container;
    color: $on-surface;
    
    border-radius: $radius;
    
    
    min-height: 30px;
    min-width: 30px;
    
    transition: 1s ease;
    
    &.active {
        background-color: $secondary;
        color: $on-secondary;
        
        border-radius: $radius-active;
        
    }

}

[Extner32]

Some new info:

I found out that when changing the .scss file, for example changing:
background-color: $surface-container; to background-color: $surface-container-high; (changing the color).

It does animate (transition) correctly??? This only happens when editing the style.scss file.

[debuggyo]

I believe that with the way you are creating the widgets is actually completely recreating the widgets when the workspaces or active_workspace signal is called rather than just updating them. Exo rework branch has a working workspaces module that updates widgets rather than completely recreating them however it is a lot more advanced than what you have now.