unable to set colour for hyprland workspaces

[suwuako]

I'm unable to set the colours of the workspace icons even when referring to them with #workspaces button: heres my config and waybar version

waybar -v Waybar v0.10.4

css

@define-color maroon rgba(235, 160, 172, 0.8);
@define-color peach rgb(250, 179, 135);
@define-color yellow rgba(249, 226, 175, 1);
@define-color green rgb(166, 227, 161);
@define-color sky rgb(137, 220, 235);
@define-color crust rgb(17, 17, 27);
@define-color mantle rgb(24, 24, 37);
@define-color base rgb(30, 30, 46);
@define-color text rgb(205, 214, 244);
@define-color transparent rgba(0, 0, 0, 0);

@define-color border_color rgba(180, 190, 254, 0.8);    /* lavender */
@define-color module_bg rgba(49, 50, 68, 0.8);          /* Surface 0 */
@define-color text_color @text;
@define-color text_border @crust;

* { 
    font-size: 15px; 
    font-family: hermit, "Symbols Nerd Font Mono";
    font-weight: bold;  
    color: @text_color;

    /*          SHADOW TEXT
    text-shadow:
        2px  2px 0 @text_border,
        1px -1px 0 @text_border,  
        1px -1px 0 @text_border,
        -1px  1px 0 @text_border,
        1px  1px 0 @text_border;
    */

    /*          DEBUG
    border-style: solid;
    border-width: 6px;
    border-color: rgba(17, 17, 27, 1);
    */
}

#workspaces, #cpu, #memory, #clock {
    border-style: solid;
    border-width: 2.4px;
    border-color: @border_color;

    background-color: @module_bg;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 10px;
}

#cpu {
    color: @sky;
}

#memory {
    color: @green;
}

#clock {
    color: @text;
}

#workspaces button {
    color: @pink;
    padding: 0 1px;
}

#workspaces button.persistant {
    color: @pink;
}

#workspaces button.empty {
    color: @yellow;
}

#workspaces button.active {
    color: @green;
}

window#waybar{
    background: none;
    border-color: rgba(249, 226, 175, 0.9);
    border-radius: 10px;
    padding: 0
}

config

{
    "layer": "top",
    "position": "top",
    "height": 35,
    "margin-top": 6,
    "margin-left": 8,
    "margin-right": 8,
    "margin-bottom": -14,
    "spacing": 10,
    "output": "DP-1",           // EDIT THIS FOR MONITOR

    "modules-left" : [
        "cpu",
        "memory",
        "battery",
    ],

    "modules-center" : [
        "clock",
    ],

    "modules-right" : [
        "hyprland/workspaces",
    ],

    "cpu" : {
        "interval": 5,
        "format": ": {usage}%",
    },

    "memory" : {
        "interval": 5,
        "format": "\uefc5 {percentage}%",
    },

    "battery" : { 
        "interval": 5,
    },

    "clock" : {
        "timezone": "Australia/Sydney",
        "interval": 1,
        "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
        "format": "{:%H:%M:%S}",
        "format-alt": "{:%a, %d/%m/%y}",
    },

    "hyprland/workspaces": {
        "format": "{icon}",
        "all-outputs": false,
        "format-icons": {
            "active-only": false,
            "active": "",
            "empty": "",
            "default": "",
        },
        "persistent-workspaces": {
            "DP-1": [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ],
        },
    },

}

[khaneliman]

What does it look like with that config? I have mine working with this setup of CSS for workspaces:

#workspaces {
  margin: 0.5em;
  padding-left: 5px;
  padding-right: 5px;
  color: @peach;
  font-weight: bold;
  background-color: @surface0;
  border: 2px solid @surface1;
}

#workspaces label {
  font-family: MonaspiceNe Nerd Font;
  font-size: 20px;
}

#workspaces button {
  padding: 0 0.5em;
  background-color: @surface0;
  color: @text;
  margin: 0.25em;
}

#workspaces button.empty {
  /* background-color: @surface2; */
  color: @overlay0;
}

#workspaces button.visible {
  /* background-color: @surface2; */
  color: @blue;
}

#workspaces button.active {
  /* background-color: @surface2; */
  color: @green;
}

#workspaces button.urgent {
  box-shadow: 2px 2px 2px 2px;
  border-radius: 1em;
  color: @red;
}

[suwuako]

it currently looks like this (i did a bit of configging after posting this)

@define-color pink rgb(245, 194, 231);
@define-color mauve rgb(203, 166, 247);
@define-color maroon rgba(235, 160, 172, 0.8);
@define-color peach rgb(250, 179, 135);
@define-color yellow rgba(249, 226, 175, 1);
@define-color green rgb(166, 227, 161);
@define-color sky rgb(137, 220, 235);
@define-color crust rgb(17, 17, 27);
@define-color mantle rgb(24, 24, 37);
@define-color base rgb(30, 30, 46);
@define-color text rgb(205, 214, 244);
@define-color transparent rgba(0, 0, 0, 0);

@define-color border_color rgba(180, 190, 254, 0.8);    /* lavender */
@define-color module_bg rgba(49, 50, 68, 1);            /* Surface 0 */
@define-color text_color @text;
@define-color text_border @crust;

#workspaces {
    border-color: @pink;

    padding-right: 5px;
    padding-left: 5px;
}

#workspaces label {
    font-size: 14px;
}

#workspaces button {
    color: @pink;
    padding: 0 1px;
    box-shadow: none;
}

#workspaces button.empty {
    color: @yellow;
}

#workspaces button.visible {
    color: @green;
    background: @transparent;
    border: @transparent;
}

#workspaces button.active {
    color: @green;
    background: @transparent;
    border: @transparent;
}

#workspaces button:hover {
    background: @transparent;
    border: @transparent;
}