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

more rice color pallete

Browse Source
This commit is contained in:
Lennart J. Kurzweg (Nx2)
2025-09-30 00:16:39 +02:00
parent 122a4c6cd8
commit d3a407f1a5
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,17 +3,25 @@
home.file.".config/color-pallete.html".text = with rice.color; let home.file.".config/color-pallete.html".text = with rice.color; let
cb = color-set: color-name: size: /* html */ '' cb = color-set: color-name: size: /* html */ ''
<div class="color-container" style="border-color: ${color-set.base}"> <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;"> <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.brighter}"> ${color-name}.dark </p>
<p style="color: ${color-set.bright}"> ${color-set.dark} </p> <p style="color: ${color-set.brighter}"> ${color-set.dark} </p>
</div> </div>
<div class="color-box" style="background: ${color-set.base}; height: ${builtins.toString size}px;"> <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-name}.base </p>
<p class="dynamic-text"> ${color-set.base} </p> <p class="dynamic-text"> ${color-set.base} </p>
</div> </div>
<div class="color-box" style="background: ${color-set.bright}; height: ${builtins.toString size}px;"> <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.darker}"> ${color-name}.bright </p>
<p style="color: ${color-set.dark}"> ${color-set.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>
</div> </div>
''; '';
@@ -67,8 +75,9 @@
${cb accent "accent" 100} ${cb accent "accent" 100}
${cb secondary "secondary" 100} ${cb secondary "secondary" 100}
${cb tertiary "tertiary" 100} ${cb tertiary "tertiary" 100}
${cb weird "weird" 100} ${cb weird "weird" 80}
${cb special "special" 100} ${cb special "special" 80}
${cb subtle "subtle" 80}
<br> <br>
${cb positive "positive" 70} ${cb positive "positive" 70}
${cb negative "negative" 70} ${cb negative "negative" 70}