Psuedo dynamic color based on note count

[mariomui]

Problem Currently, the colors are all the same, there's no contrast. You can't easily see which folders are too small, which folders are too big--especially in a big vault.

I want multiple colors on the displayed note count, but dependent on the size of the note count. I currently randomly generate colors using sass.

Idea The idea is to inject the length of the word count into an attribute. So a folder with 300words would have a [data-novel-word-length=3] This allows a css way of generating the standard colors necessary to differentiate every length without unn. js calculation. This would all be performant pre-processed css as long as the length is pre-injected into the dom.

data attributes injected in dom data-count="300" data-len="3" data-count="4844" data-len="4" data-count="53,443" data-len="5" and so on and so forth.

i doubt ppl will have sizes more than 5.

$three: (
  length: "3",
  color: "--threeColor",
);

// list of lists
$novelmaps: ( 
  $three,
  $two,
  ....
)
@each $ncmap in $ncmaps {
  $length: map-get($ncmap, "length");
  $color: map-get($ncmap, "color");
  &:has(.nav-folder-title[data-novel-word-length="#{$length}"]) {
    color: $color
  }
}

Should you not want to implement the scss file as it does create a large css file--just injecting the data-attribute would be enough for a proper test trial. But i do not foresee any performance impact.

Below is a mockup