JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<section id="ref">
<div class="progress"></div>
<div class="palette">
  <div class="flare"></div>
  <div class="fill"></div>
</div>
</section>

<hr>

<section id="mix">
<div class="progress"></div>
<div class="palette">
  <div class="flare"></div>
  <div class="fill"></div>
</div>
</section>

CSS

:root {
  --fill-hue: 214;
  --fill-lightness: 44%;
  --flare-relative-hue: 48;
  --flare-relative-lightness: 25%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fill-hue: 188;
    --fill-lightness: 50%;
    --flare-relative-hue: 48;
    --flare-relative-lightness: -25%;
  }
}

#ref {
  --download-progress-flare-color: #9059FF;
  --download-progress-fill-color: rgb(0,97,224);
}

#mix {
  --download-progress-fill-color: hsl(var(--fill-hue), 100%, var(--fill-lightness));
  --download-progress-flare-color: hsl(calc(var(--fill-hue) + var(--flare-relative-hue)), 100%, calc(var(--fill-lightness) + var(--flare-relative-lightness)));
}

.progress {
  width: 60vw;
  height: 60px;
  background: linear-gradient(90deg, var(--download-progress-flare-color) 0, var(--download-progress-fill-color) 70%);
}

.palette {
  margin-block: 6px;
}

.palette > .flare {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: var(--download-progress-flare-color);
}

.palette > .fill {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: var(--download-progress-fill-color);
}