coquille/style.scss

@use "sass:color";
@use "sass:string";

@function gtkalpha($c, $a) {
  @return string.unquote("alpha(#{$c},#{$a})");
}

// https://gitlab.gnome.org/GNOME/libadwaita/-/blob/main/src/stylesheet/_colors.scss
$bg: #{"@window_bg_color"};
$fg: #{"@window_fg_color"};
$accent: #{"@accent_color"};
$radius: 7px;

window.Bar {
  border: none;
  box-shadow: none;
  background-color: $bg;
  color: $fg;
  font-size: 1.2em;
  padding: 0.5em 0;

  centerbox {
    min-height: 2.5em;
  }
  .Workspaces {
    button {
      all: unset;
      min-width: 1.1rem;
      min-height: 1.1rem;
      background-color: transparent;
      border-radius: 50%;

      border: 2px solid $fg;
      margin: 0.25rem 0.3rem;

      &:hover {
        border-color: gtkalpha($accent, 0.6);
      }
    }
    .focused {
      border-color: $accent;
      background-color: $accent;
    }
  }

  .Battery label {
    padding-left: 0;
    margin-left: 0;
  }

  .NotificationCenter {
    &:hover {
      background-color: gtkalpha($fg, 0.2);
    }
  }
}