argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

Home Page:https://open-props.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add SDR/HDR neon color props

argyleink opened this issue · comments

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);
  }
}

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