Releases: s9a/dew
Releases · s9a/dew
kaleido trident
be difference
embed style for fastest interface
<style media=(color) data-kaleido="https://s9a.page/dew" data-trident="0.3.0">
@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,.dew-hyper :any-link{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-lunar.dew-lunar,.dew-media.dew-media,.dew-polar.dew-polar,.dew-solar.dew-solar{fill:var(--dew-oil);background-color:var(--dew-oil);color:var(--dew-ink)}:root{--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);--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)}}
</style>imagine beyond orchid deeppink mistyrose
<link rel="stylesheet" href="diy.css">autumn aurora
changes include #9 #10 #11 #12
embed style for fastest interface
<style media=(color) data-help="https://s9a.page/dew" data-tag="v0.2.0">
.dew-shift,.dew-shift *{transition:var(--dew-shift)}.dew-wet,.dew-wet *{background:var(--dew-oil);color:var(--dew-ink)}.dew-rim,.dew-rim *{border-color:var(--dew-rim)}.dew-hyper,.dew-hyper :any-link{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-lunar.dew-lunar,.dew-media.dew-media,.dew-polar.dew-polar,.dew-solar.dew-solar{fill:var(--dew-oil);background:var(--dew-oil);color:var(--dew-ink)}:root{--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);--dew-shift:none;--dew-solar:hotpink;--dew-lunar:#201;--dew-locus:currentColor;--dew-focus:invert(100%);--dew-hover:none;--dew-vapor:opacity(60%)}: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)}}
</style>imagine beyond hotpink
<link rel="stylesheet" href="diy.css">npm packing
aurora online
summer style
depend via npm or unpkg
or stay fresh with tag style
style embed is optimal because local is stable and embedding prevents FOUC color
<style media=(color) data-help="https://s9a.page/dew" data-tag="v0.1.0">
.dew-shift,.dew-shift *{transition:var(--dew-shift)}.dew-wet,.dew-wet *{background:var(--dew-oil);color:var(--dew-ink)}.dew-rim,.dew-rim *{border-color:var(--dew-rim)}.dew-hyper,.dew-hyper :any-link{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-lunar.dew-lunar,.dew-media.dew-media,.dew-polar.dew-polar,.dew-solar.dew-solar{fill:var(--dew-oil);background:var(--dew-oil);color:var(--dew-ink)}:root{--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);--dew-shift:none;--dew-solar:mistyrose;--dew-lunar:darkviolet;--dew-locus:currentColor;--dew-focus:invert(100%);--dew-hover:none;--dew-vapor:opacity(60%)}:any-link:hover{--dew-hyper:var(--dew-hover)}:any-link:focus{--dew-hyper:var(--dew-focus)}.dew-lunar,.dew-polar{--dew-oil:var(--dew-polar);--dew-ink:var(--dew-media)}@media (prefers-color-scheme:dark){:root{--dew-media:var(--dew-lunar);--dew-polar:var(--dew-solar)}}
</style>your local style flavor would cascade
<link rel="stylesheet" href="diy.css">