hozen: add new color system

This commit is contained in:
ooks-io 2024-11-08 16:35:01 +11:00
parent 723bf4d367
commit 11bd9a3671
6 changed files with 332 additions and 373 deletions

View file

@ -2,6 +2,7 @@
imports = [
./apps.nix
./lib
./hozen
./hosts
./keys.nix
./pkgs

View file

@ -1,10 +1,81 @@
{ook, ...}: let
inherit (ook.lib.color.utils) mkLightColorScheme mkDarkColorScheme;
darkScheme = mkDarkColorScheme {
neutrals = {
"50" = "dfd2b3";
"100" = "d9c7a5";
"150" = "d4be98";
"200" = "c6b395";
"250" = "b4a288";
"300" = "a49384";
"350" = "99897a";
"400" = "8b7c6f";
"450" = "7d6f64";
"500" = "716860";
"550" = "645f59";
"600" = "585350";
"650" = "4d4947";
"700" = "3f3b3b";
"750" = "343232";
"800" = "282828";
"850" = "212121";
"900" = "1a1a1a";
};
primary = "ea6962";
red = "ea6962";
orange = "e78a4e";
yellow = "d8a657";
olive = "b9b25f";
green = "a9b665";
teal = "89b482";
blue = "7daea3";
violet = "d892c1";
purple = "d3869b";
pink = "cf91be";
brown = "a87757";
};
lightScheme = mkLightColorScheme {
neutrals = {
"50" = "f7efda";
"100" = "f4eac8";
"150" = "f2e5bc";
"200" = "e7d9b1";
"250" = "ddcca6";
"300" = "d3c19c";
"350" = "c5b496";
"400" = "b7a78f";
"450" = "a89984";
"500" = "a08e79";
"550" = "9a826a";
"600" = "91785f";
"650" = "8a7056";
"700" = "745a44";
"750" = "6d4e3c";
"800" = "654735";
"850" = "5e4131";
"900" = "51372a";
};
primary = "45707a";
red = "be4141"; # contrast 4.55
orange = "ad540b"; # contrast 4.52
yellow = "966208"; # contrast 4.51
olive = "707029"; # contrast 4.51
green = "67732b"; # contrast 4.51
teal = "497459"; # contrast 4.67
blue = "45707a"; # contrast 4.75
violet = "7d6198"; # contrast 4.54
purple = "8f5b7c"; # contrast 4.63
pink = "925d66"; # contrast 4.6
brown = "654735"; # contrast 7.31
};
style = {
color = import ./dark.nix {inherit ook;};
light.color = import ./light.nix {inherit ook;};
dark.color = import ./dark.nix {inherit ook;};
color = darkScheme;
light.color = lightScheme;
dark.color = darkScheme;
};
in {
_module.args.sytle = style;
flake.style = style;
_module.args.hozen = style;
flake.hozen = style;
}

View file

@ -1,310 +0,0 @@
# Color Scheme Documentation
Generated on: 1730946863
## Table of Contents
- [Neutral Shades](#neutral-shades)
- [Base Colors](#base-colors)
- [Syntax Highlighting](#syntax-highlighting)
- [Semantic Colors](#semantic-colors)
- [Color Scales](#color-scales)
## Color Preview
### Neutral Shades
| Name | Preview | Hex |
| ---- | ------- | --- |
| `100` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
| `150` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
| `200` | <span style='display:inline-block; width:50px; height:20px; background:#c6b395; border:1px solid #282828;'></span> | `#c6b395` |
| `250` | <span style='display:inline-block; width:50px; height:20px; background:#b4a288; border:1px solid #282828;'></span> | `#b4a288` |
| `300` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
| `350` | <span style='display:inline-block; width:50px; height:20px; background:#99897a; border:1px solid #282828;'></span> | `#99897a` |
| `400` | <span style='display:inline-block; width:50px; height:20px; background:#8b7c6f; border:1px solid #282828;'></span> | `#8b7c6f` |
| `450` | <span style='display:inline-block; width:50px; height:20px; background:#7d6f64; border:1px solid #282828;'></span> | `#7d6f64` |
| `50` | <span style='display:inline-block; width:50px; height:20px; background:#dfd2b3; border:1px solid #282828;'></span> | `#dfd2b3` |
| `500` | <span style='display:inline-block; width:50px; height:20px; background:#716860; border:1px solid #282828;'></span> | `#716860` |
| `550` | <span style='display:inline-block; width:50px; height:20px; background:#645f59; border:1px solid #282828;'></span> | `#645f59` |
| `600` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
| `650` | <span style='display:inline-block; width:50px; height:20px; background:#4d4947; border:1px solid #282828;'></span> | `#4d4947` |
| `700` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
| `750` | <span style='display:inline-block; width:50px; height:20px; background:#343232; border:1px solid #282828;'></span> | `#343232` |
| `800` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
| `850` | <span style='display:inline-block; width:50px; height:20px; background:#212121; border:1px solid #282828;'></span> | `#212121` |
| `900` | <span style='display:inline-block; width:50px; height:20px; background:#1a1a1a; border:1px solid #282828;'></span> | `#1a1a1a` |
### Base Colors
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base00` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
| `base01` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
| `base02` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
| `base03` | <span style='display:inline-block; width:50px; height:20px; background:#7d6f64; border:1px solid #282828;'></span> | `#7d6f64` |
| `base04` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
| `base05` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
| `base06` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
| `base07` | <span style='display:inline-block; width:50px; height:20px; background:#dfd2b3; border:1px solid #282828;'></span> | `#dfd2b3` |
| `base08` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
| `base09` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
| `base0A` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
| `base0B` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
| `base0C` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
| `base0D` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
| `base0E` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `base0F` | <span style='display:inline-block; width:50px; height:20px; background:#a87757; border:1px solid #282828;'></span> | `#a87757` |
| `base10` | <span style='display:inline-block; width:50px; height:20px; background:#212121; border:1px solid #282828;'></span> | `#212121` |
| `base11` | <span style='display:inline-block; width:50px; height:20px; background:#1a1a1a; border:1px solid #282828;'></span> | `#1a1a1a` |
| `base12` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
| `base13` | <span style='display:inline-block; width:50px; height:20px; background:#d3b17b; border:1px solid #282828;'></span> | `#d3b17b` |
| `base14` | <span style='display:inline-block; width:50px; height:20px; background:#adb486; border:1px solid #282828;'></span> | `#adb486` |
| `base15` | <span style='display:inline-block; width:50px; height:20px; background:#a2b59f; border:1px solid #282828;'></span> | `#a2b59f` |
| `base16` | <span style='display:inline-block; width:50px; height:20px; background:#9bafaa; border:1px solid #282828;'></span> | `#9bafaa` |
| `base17` | <span style='display:inline-block; width:50px; height:20px; background:#d3a4b1; border:1px solid #282828;'></span> | `#d3a4b1` |
### Syntax Highlighting
| Name | Preview | Hex |
| ---- | ------- | --- |
| `boolean` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `comment` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
| `constant` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
| `define` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `exception` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
| `float` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `function` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
| `identifier` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
| `include` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `label` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
| `macro` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
| `number` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `operator` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
| `preCondit` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `preproc` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `special` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
| `specialChar` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
| `statement` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
| `storageClass` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
| `string` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
| `structure` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
| `tag` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
| `todo` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `type` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
### Semantic Colors
| Name | Preview | Hex |
| ---- | ------- | --- |
| `body` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
| `border` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
| `border-active` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
| `border-inactive` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
| `footer` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
| `header` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
| `menu` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
| `subtext` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
| `text` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
| `text-bright` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
## Color Scales
### Color Scale: red
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#e2615b; border:1px solid #282828;'></span> | `#e2615b` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d95a54; border:1px solid #282828;'></span> | `#d95a54` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#d1544e; border:1px solid #282828;'></span> | `#d1544e` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#c64f49; border:1px solid #282828;'></span> | `#c64f49` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e77a74; border:1px solid #282828;'></span> | `#e77a74` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#e39b96; border:1px solid #282828;'></span> | `#e39b96` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#e3a9a6; border:1px solid #282828;'></span> | `#e3a9a6` |
### Color Scale: orange
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#df8247; border:1px solid #282828;'></span> | `#df8247` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d57b41; border:1px solid #282828;'></span> | `#d57b41` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#cc743c; border:1px solid #282828;'></span> | `#cc743c` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#bc6e3c; border:1px solid #282828;'></span> | `#bc6e3c` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e39461; border:1px solid #282828;'></span> | `#e39461` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e19e73; border:1px solid #282828;'></span> | `#e19e73` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#dea884; border:1px solid #282828;'></span> | `#dea884` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#ddb195; border:1px solid #282828;'></span> | `#ddb195` |
### Color Scale: yellow
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ce9e52; border:1px solid #282828;'></span> | `#ce9e52` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#c4964c; border:1px solid #282828;'></span> | `#c4964c` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#b88d49; border:1px solid #282828;'></span> | `#b88d49` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a7834b; border:1px solid #282828;'></span> | `#a7834b` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d5ac69; border:1px solid #282828;'></span> | `#d5ac69` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d3b17b; border:1px solid #282828;'></span> | `#d3b17b` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d3b78a; border:1px solid #282828;'></span> | `#d3b78a` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d3bc9a; border:1px solid #282828;'></span> | `#d3bc9a` |
### Color Scale: olive
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#b9b25f; border:1px solid #282828;'></span> | `#b9b25f` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ada75b; border:1px solid #282828;'></span> | `#ada75b` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#9e995b; border:1px solid #282828;'></span> | `#9e995b` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#8e8a5c; border:1px solid #282828;'></span> | `#8e8a5c` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#7e7b5d; border:1px solid #282828;'></span> | `#7e7b5d` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#b8b270; border:1px solid #282828;'></span> | `#b8b270` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#b6b280; border:1px solid #282828;'></span> | `#b6b280` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#b6b390; border:1px solid #282828;'></span> | `#b6b390` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b8b69e; border:1px solid #282828;'></span> | `#b8b69e` |
### Color Scale: green
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#9eaa62; border:1px solid #282828;'></span> | `#9eaa62` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#939c60; border:1px solid #282828;'></span> | `#939c60` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#858c61; border:1px solid #282828;'></span> | `#858c61` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#787b62; border:1px solid #282828;'></span> | `#787b62` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#abb575; border:1px solid #282828;'></span> | `#abb575` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#adb486; border:1px solid #282828;'></span> | `#adb486` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#afb594; border:1px solid #282828;'></span> | `#afb594` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b3b6a3; border:1px solid #282828;'></span> | `#b3b6a3` |
### Color Scale: teal
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#85a87e; border:1px solid #282828;'></span> | `#85a87e` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#819b7d; border:1px solid #282828;'></span> | `#819b7d` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#7e8d7b; border:1px solid #282828;'></span> | `#7e8d7b` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#7b7e7b; border:1px solid #282828;'></span> | `#7b7e7b` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#96b492; border:1px solid #282828;'></span> | `#96b492` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#a2b59f; border:1px solid #282828;'></span> | `#a2b59f` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#aeb7ad; border:1px solid #282828;'></span> | `#aeb7ad` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b9bab9; border:1px solid #282828;'></span> | `#b9bab9` |
### Color Scale: blue
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#7ba198; border:1px solid #282828;'></span> | `#7ba198` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#79938e; border:1px solid #282828;'></span> | `#79938e` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#788582; border:1px solid #282828;'></span> | `#788582` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#777777; border:1px solid #282828;'></span> | `#777777` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#8caea7; border:1px solid #282828;'></span> | `#8caea7` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#9bafaa; border:1px solid #282828;'></span> | `#9bafaa` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#a8b1af; border:1px solid #282828;'></span> | `#a8b1af` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b4b4b4; border:1px solid #282828;'></span> | `#b4b4b4` |
### Color Scale: violet
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d892c1; border:1px solid #282828;'></span> | `#d892c1` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#cf8cb9; border:1px solid #282828;'></span> | `#cf8cb9` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#c586b0; border:1px solid #282828;'></span> | `#c586b0` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#bb81a8; border:1px solid #282828;'></span> | `#bb81a8` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#af7e9f; border:1px solid #282828;'></span> | `#af7e9f` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d8a1c6; border:1px solid #282828;'></span> | `#d8a1c6` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d9b0cc; border:1px solid #282828;'></span> | `#d9b0cc` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#dbbdd1; border:1px solid #282828;'></span> | `#dbbdd1` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#dec9d7; border:1px solid #282828;'></span> | `#dec9d7` |
### Color Scale: purple
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ca8094; border:1px solid #282828;'></span> | `#ca8094` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#bf7c8e; border:1px solid #282828;'></span> | `#bf7c8e` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#b47788; border:1px solid #282828;'></span> | `#b47788` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a87482; border:1px solid #282828;'></span> | `#a87482` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d395a6; border:1px solid #282828;'></span> | `#d395a6` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d3a4b1; border:1px solid #282828;'></span> | `#d3a4b1` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d4b3bc; border:1px solid #282828;'></span> | `#d4b3bc` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d7bfc6; border:1px solid #282828;'></span> | `#d7bfc6` |
### Color Scale: pink
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#cf91be; border:1px solid #282828;'></span> | `#cf91be` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#c58bb6; border:1px solid #282828;'></span> | `#c58bb6` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#bb87ac; border:1px solid #282828;'></span> | `#bb87ac` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#af83a3; border:1px solid #282828;'></span> | `#af83a3` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a28099; border:1px solid #282828;'></span> | `#a28099` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d0a0c2; border:1px solid #282828;'></span> | `#d0a0c2` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d0aec7; border:1px solid #282828;'></span> | `#d0aec7` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d3bbcc; border:1px solid #282828;'></span> | `#d3bbcc` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d6c8d2; border:1px solid #282828;'></span> | `#d6c8d2` |
### Color Scale: brown
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#a87757; border:1px solid #282828;'></span> | `#a87757` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#977259; border:1px solid #282828;'></span> | `#977259` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#876c5a; border:1px solid #282828;'></span> | `#876c5a` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#77665a; border:1px solid #282828;'></span> | `#77665a` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#695f59; border:1px solid #282828;'></span> | `#695f59` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#a68168; border:1px solid #282828;'></span> | `#a68168` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#a58a79; border:1px solid #282828;'></span> | `#a58a79` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#a59388; border:1px solid #282828;'></span> | `#a59388` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#a69d96; border:1px solid #282828;'></span> | `#a69d96` |
### Color Scale: primary
| Name | Preview | Hex |
| ---- | ------- | --- |
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#e2615b; border:1px solid #282828;'></span> | `#e2615b` |
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d95a54; border:1px solid #282828;'></span> | `#d95a54` |
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#d1544e; border:1px solid #282828;'></span> | `#d1544e` |
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#c64f49; border:1px solid #282828;'></span> | `#c64f49` |
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e77a74; border:1px solid #282828;'></span> | `#e77a74` |
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#e39b96; border:1px solid #282828;'></span> | `#e39b96` |
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#e3a9a6; border:1px solid #282828;'></span> | `#e3a9a6` |
## Usage
This color scheme is generated using Nix. To use these colors, you can:
1. Import the color scheme directly in your Nix configuration
2. Generate theme files for your preferred applications
3. Use the hex values in your CSS/HTML
## Notes
- All colors are in hexadecimal format
- Preview squares show approximate colors (may vary by display)
- Neutral shades provide a range from lightest (50) to darkest (900)
- Color scales provide variations for UI elements

View file

@ -7,7 +7,7 @@
inherit (inputs) nixpkgs;
inherit (lib) singleton recursiveUpdate mkDefault;
inherit (builtins) concatLists;
inherit (self) keys;
inherit (self) hozen keys;
hm = inputs.home-manager.nixosModules.home-manager;
agenix = inputs.agenix.nixosModules.default;
nixosModules = "${self}/modules/nixos";
@ -44,7 +44,7 @@
mkNixos {
specialArgs =
recursiveUpdate {
inherit keys lib inputs self inputs' self';
inherit hozen keys lib inputs self inputs' self';
}
specialArgs;
modules = concatLists [

View file

@ -3,17 +3,14 @@
types,
translate,
}: let
# base modification function
# Base modification functions
modifyHSL = hexStr: modifications: let
# convert hex to HSL
hslSet = translate.hex.toHSL.set hexStr;
# apply modifications to get new HSL values
newHSL = types.hsl.set {
inherit (hslSet) h; # keep hue
inherit (hslSet) h;
l = math.clamp 0.0 1.0 (hslSet.l + (modifications.l or 0.0));
s = math.clamp 0.0 1.0 (hslSet.s + (modifications.s or 0.0));
};
# convert back to hex
rgbSet = translate.hsl.toRGB.set newHSL;
in
translate.rgb.toHex.string rgbSet;
@ -30,6 +27,8 @@
desaturate = amount: hexStr:
modifyHSL hexStr {s = (amount * -1) / 100.0;};
# opinionated scale generators for light/dark themes
# lighter/darker shades always desaturate
mkDarkColorScale = base: {
up4 = desaturate 24 (lighten 12 base);
up3 = desaturate 18 (lighten 9 base);
@ -54,10 +53,11 @@
up4 = desaturate 24 (darken 12 base);
};
mkDarkColorScheme = {
shades,
# core color scheme generator
mkColorScheme = {
type ? "dark",
neutrals ? {},
primary,
secondary,
red,
orange,
yellow,
@ -69,54 +69,252 @@
purple,
pink,
brown,
} @ args: {
shade-50 = args.shades."50";
shade-100 = args.shades."100";
shade-150 = args.shades."150";
shade-200 = args.shades."200";
shade-250 = args.shades."250";
shade-300 = args.shades."300";
shade-350 = args.shades."350";
shade-400 = args.shades."400";
shade-450 = args.shades."450";
shade-500 = args.shades."500";
shade-550 = args.shades."550";
shade-600 = args.shades."600";
shade-650 = args.shades."650";
shade-700 = args.shades."700";
shade-750 = args.shades."750";
shade-800 = args.shades."800";
shade-850 = args.shades."850";
shade-900 = args.shades."900";
} @ args: let
# Select scale function based on theme type
colorScale =
if type == "dark"
then mkDarkColorScale
else mkLightColorScale;
primary = mkDarkColorScale args.primary;
secondary = {
up-1 = args.shade."550";
up-2 = args.shade."500";
up-3 = args.shade."450";
up-4 = args.shade."400";
up-5 = args.shade."350";
up-6 = args.shade."300";
up-7 = args.shade."250";
up-8 = args.shade."200";
up-9 = args.shade."150";
up-10 = args.shade."100";
base = args.shade."700";
down-1 = args.shade."650";
down-2 = args.shade."700";
# Generate color scales
colorScales = {
red = colorScale args.red;
orange = colorScale args.orange;
yellow = colorScale args.yellow;
olive = colorScale args.olive;
green = colorScale args.green;
teal = colorScale args.teal;
blue = colorScale args.blue;
violet = colorScale args.violet;
purple = colorScale args.purple;
pink = colorScale args.pink;
brown = colorScale args.brown;
};
red = mkDarkColorScale args.red;
orange = mkDarkColorScale args.orange;
yellow = mkDarkColorScale args.yellow;
olive = mkDarkColorScale args.olive;
green = mkDarkColorScale args.green;
teal = mkDarkColorScale args.teal;
blue = mkDarkColorScale args.blue;
violet = mkDarkColorScale args.violet;
purple = mkDarkColorScale args.purple;
pink = mkDarkColorScale args.pink;
brown = mkDarkColorScale args.brown;
# Theme-specific configurations
themeConfig =
if type == "dark"
then {
semantic = {
body = args.neutrals."700";
header = args.neutrals."800";
footer = args.neutrals."800";
menu = args.neutrals."800";
border = args.neutrals."150";
border-active = args.neutrals."150";
border-inactive = args.neutrals."600";
text = args.neutrals."150";
text-bright = args.neutrals."100";
subtext = args.neutrals."300";
};
secondary = {
up-4 = args.neutrals."400";
up-3 = args.neutrals."450";
up-2 = args.neutrals."500";
up-1 = args.neutrals."550";
base = args.neutrals."700";
down-1 = args.neutrals."750";
down-2 = args.neutrals."800";
down-3 = args.neutrals."850";
down-4 = args.neutrals."900";
};
base00 = args.neutrals."800";
base01 = args.neutrals."700";
base02 = args.neutrals."600";
base03 = args.neutrals."450";
base04 = args.neutrals."300";
base05 = args.neutrals."150";
base06 = args.neutrals."100";
base07 = args.neutrals."50";
base10 = args.neutrals."850";
base11 = args.neutrals."900";
}
else {
semantic = {
body = args.neutrals."50";
header = args.neutrals."150";
footer = args.neutrals."150";
menu = args.neutrals."150";
border = args.neutrals."800";
border-active = args.neutrals."800";
border-inactive = args.neutrals."300";
text = args.neutrals."800";
text-bright = args.neutrals."850";
subtext = args.neutrals."600";
};
secondary = {
up-4 = args.neutrals."400";
up-3 = args.neutrals."350";
up-2 = args.neutrals."300";
up-1 = args.neutrals."250";
base = args.neutrals."200";
down-1 = args.neutrals."150";
down-2 = args.neutrals."100";
down-3 = args.neutrals."50";
down-4 = args.neutrals."50";
};
base00 = args.neutrals."150";
base01 = args.neutrals."250";
base02 = args.neutrals."450";
base03 = args.neutrals."550";
base04 = args.neutrals."650";
base05 = args.neutrals."800";
base06 = args.neutrals."850";
base07 = args.neutrals."900";
base10 = args.neutrals."100";
base11 = args.neutrals."50";
};
in {
# Common structure for both themes
neutrals = {
inherit
(args.neutrals)
"50"
"100"
"150"
"200"
"250"
"300"
"350"
"400"
"450"
"500"
"550"
"600"
"650"
"700"
"750"
"800"
"850"
"900"
;
};
inherit
(colorScales)
red
orange
yellow
olive
green
teal
blue
violet
purple
pink
brown
;
primary = colorScale args.primary;
inherit (themeConfig) semantic secondary;
# Status colors (same structure for both themes)
error = {
bg = "${colorScales.red.base}";
bg-active = "${colorScales.red.down1}";
bg-hover = "${colorScales.red.down2}";
text = "${themeConfig.semantic.text-bright}";
border = "${colorScales.red.up2}";
};
success = {
bg = "${colorScales.green.base}";
bg-active = "${colorScales.green.down1}";
bg-hover = "${colorScales.green.down2}";
text = "${themeConfig.semantic.text-bright}";
border = "${colorScales.green.up2}";
};
warning = {
bg = "${colorScales.yellow.base}";
bg-active = "${colorScales.yellow.down1}";
bg-hover = "${colorScales.yellow.down2}";
text = "${themeConfig.semantic.text-bright}";
border = "${colorScales.yellow.up2}";
};
info = {
bg = "${colorScales.blue.base}";
bg-active = "${colorScales.blue.down1}";
bg-hover = "${colorScales.blue.down2}";
text = "${themeConfig.semantic.text-bright}";
border = "${colorScales.blue.up2}";
};
tip = {
bg = "${colorScales.teal.base}";
bg-active = "${colorScales.teal.down1}";
bg-hover = "${colorScales.teal.down2}";
text = "${themeConfig.semantic.text-bright}";
border = "${colorScales.teal.up2}";
};
# Syntax highlighting (same for both themes)
syntax = {
string = args.green;
number = args.purple;
float = args.purple;
boolean = args.purple;
type = args.yellow;
structure = args.orange;
statement = args.red;
label = args.orange;
operator = args.orange;
identifier = args.blue;
function = args.green;
storageClass = args.orange;
constant = args.teal;
exception = args.red;
preproc = args.purple;
include = args.purple;
define = args.purple;
macro = args.teal;
preCondit = args.purple;
special = args.yellow;
specialChar = args.yellow;
comment = "${themeConfig.semantic.subtext}";
todo = args.purple;
tag = args.teal;
};
# Base16/24 colors
inherit
(themeConfig)
base00
base01
base02
base03
base04
base05
base06
base07
base10
base11
;
# Generated base colors
base08 = args.red;
base09 = args.orange;
base0A = args.yellow;
base0B = args.green;
base0C = args.teal;
base0D = args.blue;
base0E = args.purple;
base0F = args.brown;
base12 = "${colorScales.red.up2}";
base13 = "${colorScales.yellow.up2}";
base14 = "${colorScales.green.up2}";
base15 = "${colorScales.teal.up2}";
base16 = "${colorScales.blue.up2}";
base17 = "${colorScales.purple.up2}";
};
# wrappers
mkDarkColorScheme = args: mkColorScheme (args // {type = "dark";});
mkLightColorScheme = args: mkColorScheme (args // {type = "light";});
in {
inherit lighten darken saturate desaturate mkLightColorScale mkDarkColorScale mkDarkColorScheme;
inherit lighten darken saturate desaturate;
inherit mkDarkColorScale mkLightColorScale;
inherit mkColorScheme mkDarkColorScheme mkLightColorScheme;
}

View file

@ -25,8 +25,7 @@
inherit types translate;
};
in {
inherit check types translate;
inherit (utils) lighten darken saturate desaturate mkColorScale;
inherit check types translate utils;
};
};
in {