{ rice, ... }:
{
  home.file.".config/color-pallete.html".text = with rice.color; let
    cb = color-set: color-name: size: /* html */ ''
      <div class="color-container" style="border-color: ${color-set.base}">
        <div class="color-box" style="background: ${color-set.dark}; height: ${builtins.toString size}px;">
          <p style="color: ${color-set.bright}"> ${color-name}.dark </p>
          <p style="color: ${color-set.bright}"> ${color-set.dark} </p>
        </div>
        <div class="color-box" style="background: ${color-set.base}; height: ${builtins.toString size}px;">
          <p class="dynamic-text"> ${color-name}.base </p>
          <p class="dynamic-text"> ${color-set.base} </p>
        </div>
        <div class="color-box" style="background: ${color-set.bright}; height: ${builtins.toString size}px;">
          <p style="color: ${color-set.dark}"> ${color-name}.bright </p>
          <p style="color: ${color-set.dark}"> ${color-set.bright} </p>
        </div>
      </div>
    '';
  in /* html */ ''
    <!DOCTYPE html>
    <head>
      <meta charset="UTF-8">
      <meta name="darkreader-lock">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Color Pallete</title>
      <style>
        * {
          margin: 0px;
          padding: 0px;
        }
        html {
          background: rgba(${rice.lib.hex-to-rgb-comma-string background},${builtins.toString rice.transparency});
          padding: auto;
        }
        body {
          font-family: ${rice.font.base.name};
          color: ${foreground};
          width: fit-content;
          margin: 10px auto 10px auto;
          background: rgba(${rice.lib.hex-to-rgb-comma-string background},${builtins.toString rice.transparency});
          border: ${builtins.toString rice.border-width}px solid ${border}; 
          border-radius: ${builtins.toString rice.rounding}px;
          padding: ${builtins.toString rice.gap-size}px;
        }
        h1 {
          margin: ${builtins.toString rice.gap-size}px;
        }
        .color-container {
          font-family: ${rice.font.code.name};
          display: flex;
          gap: ${builtins.toString rice.gap-size}px;
          margin: ${builtins.toString rice.gap-size}px;
        }
        .color-box {
          width: 200px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: ${builtins.toString rice.rounding}px;
        }
      </style>
    </head>
    <body>
      <h1> Color Pallete </h1>
      ${cb accent "accent" 100}
      ${cb secondary "secondary" 100}
      ${cb tertiary "tertiary" 100}
      ${cb weird "weird" 100}
      ${cb special "special" 100}
      <br>
      ${cb positive "positive" 70}
      ${cb negative "negative" 70}
      <br>
      ${cb black "black" 50}
      ${cb white "white" 50}
      ${cb blue "blue" 50}
      ${cb cyan "cyan" 50}
      ${cb green "green" 50}
      ${cb magenta "magenta" 50}
      ${cb red "red" 50}
      ${cb yellow "yellow" 50}
    </body>
    <script>
      function getLuminance(color) {
        const rgb = color.match(/\w\w/g).map((c) => parseInt(c, 16));
        const [r, g, b] = rgb.map((val) => {
          const channel = val / 255;
          return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
        });
        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
      }
      function setDynamicTextColor() {
        const texts = document.getElementsByClassName("dynamic-text");
        function ff(text) {
          const backgroundColor = text.parentElement.style.backgroundColor;
          const rgbValues = backgroundColor.match(/\d+/g).map(Number);
          const hexColor = `#''${rgbValues.map(c => c.toString(16).padStart(2, '0')).join("")}`;
          const luminance = getLuminance(hexColor);
          text.style.color = luminance < 0.2 ? '${foreground}' : '${background}';
        };
        for (let id in texts) { ff(texts[id]); } 
      }
      setDynamicTextColor();
    </script>
    </html>
  '';
}
