Add SDR/HDR neon color props
argyleink opened this issue · 1 comments
argyleink commented
something like this:
:root {
--neon-red: #D30302;
--neon-pink: #e10361;
--neon-purple: #4003e6;
--neon-blue: #00a3d5;
--neon-green: #02c435;
--neon-yellow: #b48505;
--neon-white: #fff;
}
.neon-red {
--neon: #FF5161;
--neon-glow: #D30302;
}
.neon-pink {
--neon: #FF53cd;
--neon-glow: #e10361;
}
.neon-purple {
--neon: #9461fd;
--neon-glow: #4003e6;
}
.neon-blue {
--neon: #2dd9fe;
--neon-glow: #00a3d5;
}
.neon-green {
--neon: #00fe9b;
--neon-glow: #02c435;
}
.neon-yellow {
--neon: #ffdb4e;
--neon-glow: #b48505;
}
.neon-white {
--neon: #fefefe;
--neon-glow: #ffffff;
}
@media (dynamic-range: high) {
:root {
--neon-red: color(display-p3 1 0 0);
--neon-pink: color(display-p3 1 0 1);
--neon-purple: color(display-p3 0 0 1);
--neon-blue: color(display-p3 0 1 1);
--neon-green: color(display-p3 0 1 0);
--neon-yellow: color(display-p3 1 1 0);
--neon-white: color(display-p3 1 1 1);
}
.neon-red {
--neon-glow: color(display-p3 1 0 0);
}
.neon-pink {
--neon-glow: color(display-p3 1 0 1);
}
.neon-purple {
--neon-glow: color(display-p3 0 0 1);
}
.neon-blue {
--neon-glow: color(display-p3 0 1 1);
}
.neon-green {
--neon-glow: color(display-p3 0 1 0);
}
.neon-yellow {
--neon-glow: color(display-p3 1 1 0);
}
.neon-white {
--neon-glow: color(display-p3 1 1 1);
}
}
argyleink commented
fixed in v2 https://github.com/argyleink/open-props/blob/2.0.0beta/css/color/neon.p3.css
or via https://unpkg.com/open-props@beta/neon.p3.css