119 lines
4.6 KiB
Nix
119 lines
4.6 KiB
Nix
{ 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.darker}; height: ${builtins.toString size}px;">
|
|
<p style="color: ${color-set.bright}"> ${color-name}.darker </p>
|
|
<p sktyle="color: ${color-set.bright}"> ${color-set.darker} </p>
|
|
</div>
|
|
<div class="color-box" style="background: ${color-set.dark}; height: ${builtins.toString size}px;">
|
|
<p style="color: ${color-set.brighter}"> ${color-name}.dark </p>
|
|
<p style="color: ${color-set.brighter}"> ${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.darker}"> ${color-name}.bright </p>
|
|
<p style="color: ${color-set.darker}"> ${color-set.bright} </p>
|
|
</div>
|
|
<div class="color-box" style="background: ${color-set.brighter}; height: ${builtins.toString size}px;">
|
|
<p style="color: ${color-set.dark}"> ${color-name}.brighter </p>
|
|
<p style="color: ${color-set.dark}"> ${color-set.brighter} </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" 80}
|
|
${cb special "special" 80}
|
|
${cb subtle "subtle" 80}
|
|
<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>
|
|
'';
|
|
}
|