nx2/dotfiles
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better color changing (maual)

Browse Source
This commit is contained in:
Lennart J. Kurzweg (Nx2)
2024-12-02 21:00:01 +01:00
parent a82660b049
commit f5538e69a5
3 changed files with 150 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
home-modules/color-pallete.nix
View File

@@ -5,17 +5,18 @@
<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>
@@ -37,7 +38,7 @@
color: ${foreground};
width: fit-content;
margin: 10px auto 10px auto;
background: ${background};
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;
@@ -66,18 +67,20 @@
${cb accent "accent" 100}
${cb secondary "secondary" 100}
${cb tertiary "tertiary" 100}
${cb weird "weird" 75}
${cb special "special" 75}
${cb positive "positive" 30}
${cb negative "negative" 30}
${cb black "black" 25}
${cb white "white" 25}
${cb blue "blue" 25}
${cb cyan "cyan" 25}
${cb green "green" 25}
${cb magenta "magenta" 25}
${cb red "red" 25}
${cb yellow "yellow" 25}
${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) {