solorice/config/eww/eww.scss

$bg: #1a1b26;
$bg_dark: #16161e;
$bg_float: #16161e;
$bg_highlight: #292e42;
$bg_popup: #16161e;
$bg_search: #3d59a1;
$bg_sidebar: #16161e;
$bg_statusline: #16161e;
$bg_visual: #283457;
$black: #15161e;
$blue: #7aa2f7;
$blue0: #3d59a1;
$blue1: #2ac3de;
$blue2: #0db9d7;
$blue5: #89ddff;
$blue6: #b4f9f8;
$blue7: #394b70;
$border: #15161e;
$border_highlight: #27a1b9;
$comment: #565f89;
$cyan: #7dcfff;
$dark3: #545c7e;
$dark5: #737aa2;
$delta_add: #2c5a66;
$delta_delete: #713137;
$diff_add: #20303b;
$diff_change: #1f2231;
$diff_delete: #37222c;
$diff_text: #394b70;
$error: #db4b4b;
$fg: #c0caf5;
$fg_dark: #a9b1d6;
$fg_float: #c0caf5;
$fg_gutter: #3b4261;
$fg_sidebar: #a9b1d6;
$git_add: #449dab;
$git_change: #6183bb;
$git_delete: #914c54;
$git_ignore: #545c7e;
$gitSigns_add: #266d6a;
$gitSigns_change: #536c9e;
$gitSigns_delete: #b2555b;
$green: #9ece6a;
$green1: #73daca;
$green2: #41a6b5;
$hint: #1abc9c;
$info: #0db9d7;
$magenta: #bb9af7;
$magenta2: #ff007c;
$orange: #ff9e64;
$purple: #9d7cd8;
$red: #f7768e;
$red1: #db4b4b;
$teal: #1abc9c;
$terminal_black: #414868;
$warning: #e0af68;
$yellow: #e0af68;

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

//Global Styles
.bar,
.bar-1 {
  background-color: rgba(22, 22, 30, 0.7);
  color: $fg;
  font-family: "JetBrainsMono NF";
  font-weight: bold;
}

// Styles on classes (see eww.yuck for more information)

.sidestuff slider {
  all: unset;
}

.metric scale trough highlight {
  all: unset;
  background-color: $error;
  border-radius: 10px;
}

.metric scale trough {
  all: unset;
  background-color: $bg_visual;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 1px;
  margin-right: 2px;
}

.metric scale trough highlight {
  all: unset;
  // background-color: $fg_sidebar;
  background-color: $teal;
  color: $bg;
  border-radius: 10px;
}

.metric scale trough {
  all: unset;
  background-color: $bg_visual;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 1px;
  margin-right: 2px;
}

.label-ram {
  font-size: large;
}

.music {
  &.playing {
    color: $teal;
  }

  &.paused {
    color: $terminal_black;
  }
}

.workspaces {
  .current {
    color: $hint;
  }
}

.icon-module {
  &>&__icon {
    margin-right: 5px;
  }
}

.cpu {
  &.warning {
    color: $warning;
  }

  &.danger {
    color: $red;
  }
}

.battery {
  &.warning {
    color: $warning;
  }

  &.critical {
    color: $red;
  }

  &.Charging {
    color: $teal;
  }
}

.network {
  &.disconnected {
    color: $error;
  }
}

.workspaces button:hover {
  background: $bg_highlight;
}