dew.css

/*
https://github.com/s9a/dew
*/

@media (prefers-reduced-motion: no-preference) {
  .dew-shift *,
  .dew-shift {
    transition: var(--dew-shift);
  }
}

.dew-wet *,
.dew-wet {
  background-color: var(--dew-oil);
  color: var(--dew-ink);
}

.dew-rim *,
.dew-rim {
  border-color: var(--dew-rim);
}

.dew-hyper :any-link,
.dew-hyper {
  filter: var(--dew-hyper);
}

.dew-tab :focus,
.dew-tab:focus {
  filter: var(--dew-focus);
  outline-color: var(--dew-locus);
}

.dew-field:disabled {
  filter: var(--dew-vapor);
}

.dew-image {
  background-image: none;
}

.dew-media.dew-media,
.dew-polar.dew-polar,
.dew-solar.dew-solar,
.dew-lunar.dew-lunar {
  fill: var(--dew-oil);
  background-color: var(--dew-oil);
  color: var(--dew-ink);
}

:root {
  /*dev*/
  --dew-hyper: none;
  --dew-media: var(--dew-solar);
  --dew-polar: var(--dew-lunar);
  --dew-oil: var(--dew-media);
  --dew-ink: var(--dew-polar);
  --dew-rim: var(--dew-ink);

 /*diy*/
  --dew-shift: none;
  --dew-slick: mistyrose;
  --dew-slime: deeppink;
  --dew-solar: orchid;
  --dew-lunar: #111;
  --dew-locus: currentColor;
  --dew-focus: invert(100%);
  --dew-hover: none;
  --dew-vapor: opacity(60%);
}

.dew-ion ::selection {
  background-color: var(--dew-slick);
  color: var(--dew-slime);
}

:any-link:hover {
  --dew-hyper: var(--dew-hover);
}

:any-link:focus {
  --dew-hyper: var(--dew-focus);
}

.dew-media {
  --dew-oil: var(--dew-media);
  --dew-ink: var(--dew-polar);
}

.dew-polar {
  --dew-oil: var(--dew-polar);
  --dew-ink: var(--dew-media);
}

.dew-solar {
  --dew-oil: var(--dew-solar);
  --dew-ink: var(--dew-lunar);
}

.dew-lunar {
  --dew-oil: var(--dew-lunar);
  --dew-ink: var(--dew-solar);
}

@media (prefers-color-scheme: dark) {
  :root {
    --dew-media: var(--dew-lunar);
    --dew-polar: var(--dew-solar);
  }
}