From 11bd9a3671c49540a8675203d8b6f32a0b03421c Mon Sep 17 00:00:00 2001 From: ooks-io Date: Fri, 8 Nov 2024 16:35:01 +1100 Subject: [PATCH] hozen: add new color system --- outputs/default.nix | 1 + outputs/hozen/default.nix | 81 +++++++++- outputs/hozen/readme.md | 310 ------------------------------------ outputs/lib/builders.nix | 4 +- outputs/lib/color/utils.nix | 306 ++++++++++++++++++++++++++++------- outputs/lib/default.nix | 3 +- 6 files changed, 332 insertions(+), 373 deletions(-) delete mode 100644 outputs/hozen/readme.md diff --git a/outputs/default.nix b/outputs/default.nix index e662224..e82fb55 100644 --- a/outputs/default.nix +++ b/outputs/default.nix @@ -2,6 +2,7 @@ imports = [ ./apps.nix ./lib + ./hozen ./hosts ./keys.nix ./pkgs diff --git a/outputs/hozen/default.nix b/outputs/hozen/default.nix index 049f527..6360d82 100644 --- a/outputs/hozen/default.nix +++ b/outputs/hozen/default.nix @@ -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; } diff --git a/outputs/hozen/readme.md b/outputs/hozen/readme.md deleted file mode 100644 index e0d2163..0000000 --- a/outputs/hozen/readme.md +++ /dev/null @@ -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` | | `#d9c7a5` | -| `150` | | `#d4be98` | -| `200` | | `#c6b395` | -| `250` | | `#b4a288` | -| `300` | | `#a49384` | -| `350` | | `#99897a` | -| `400` | | `#8b7c6f` | -| `450` | | `#7d6f64` | -| `50` | | `#dfd2b3` | -| `500` | | `#716860` | -| `550` | | `#645f59` | -| `600` | | `#585350` | -| `650` | | `#4d4947` | -| `700` | | `#3f3b3b` | -| `750` | | `#343232` | -| `800` | | `#282828` | -| `850` | | `#212121` | -| `900` | | `#1a1a1a` | - -### Base Colors - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base00` | | `#282828` | -| `base01` | | `#3f3b3b` | -| `base02` | | `#585350` | -| `base03` | | `#7d6f64` | -| `base04` | | `#a49384` | -| `base05` | | `#d4be98` | -| `base06` | | `#d9c7a5` | -| `base07` | | `#dfd2b3` | -| `base08` | | `#ea6962` | -| `base09` | | `#e78a4e` | -| `base0A` | | `#d8a657` | -| `base0B` | | `#a9b665` | -| `base0C` | | `#89b482` | -| `base0D` | | `#7daea3` | -| `base0E` | | `#d3869b` | -| `base0F` | | `#a87757` | -| `base10` | | `#212121` | -| `base11` | | `#1a1a1a` | -| `base12` | | `#e58b86` | -| `base13` | | `#d3b17b` | -| `base14` | | `#adb486` | -| `base15` | | `#a2b59f` | -| `base16` | | `#9bafaa` | -| `base17` | | `#d3a4b1` | - -### Syntax Highlighting - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `boolean` | | `#d3869b` | -| `comment` | | `#a49384` | -| `constant` | | `#89b482` | -| `define` | | `#d3869b` | -| `exception` | | `#ea6962` | -| `float` | | `#d3869b` | -| `function` | | `#a9b665` | -| `identifier` | | `#7daea3` | -| `include` | | `#d3869b` | -| `label` | | `#e78a4e` | -| `macro` | | `#89b482` | -| `number` | | `#d3869b` | -| `operator` | | `#e78a4e` | -| `preCondit` | | `#d3869b` | -| `preproc` | | `#d3869b` | -| `special` | | `#d8a657` | -| `specialChar` | | `#d8a657` | -| `statement` | | `#ea6962` | -| `storageClass` | | `#e78a4e` | -| `string` | | `#a9b665` | -| `structure` | | `#e78a4e` | -| `tag` | | `#89b482` | -| `todo` | | `#d3869b` | -| `type` | | `#d8a657` | - -### Semantic Colors - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `body` | | `#3f3b3b` | -| `border` | | `#d4be98` | -| `border-active` | | `#d4be98` | -| `border-inactive` | | `#585350` | -| `footer` | | `#282828` | -| `header` | | `#282828` | -| `menu` | | `#282828` | -| `subtext` | | `#a49384` | -| `text` | | `#d4be98` | -| `text-bright` | | `#d9c7a5` | - -## Color Scales - -### Color Scale: red - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#ea6962` | -| `down1` | | `#e2615b` | -| `down2` | | `#d95a54` | -| `down3` | | `#d1544e` | -| `down4` | | `#c64f49` | -| `up1` | | `#e77a74` | -| `up2` | | `#e58b86` | -| `up3` | | `#e39b96` | -| `up4` | | `#e3a9a6` | - -### Color Scale: orange - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#e78a4e` | -| `down1` | | `#df8247` | -| `down2` | | `#d57b41` | -| `down3` | | `#cc743c` | -| `down4` | | `#bc6e3c` | -| `up1` | | `#e39461` | -| `up2` | | `#e19e73` | -| `up3` | | `#dea884` | -| `up4` | | `#ddb195` | - -### Color Scale: yellow - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#d8a657` | -| `down1` | | `#ce9e52` | -| `down2` | | `#c4964c` | -| `down3` | | `#b88d49` | -| `down4` | | `#a7834b` | -| `up1` | | `#d5ac69` | -| `up2` | | `#d3b17b` | -| `up3` | | `#d3b78a` | -| `up4` | | `#d3bc9a` | - -### Color Scale: olive - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#b9b25f` | -| `down1` | | `#ada75b` | -| `down2` | | `#9e995b` | -| `down3` | | `#8e8a5c` | -| `down4` | | `#7e7b5d` | -| `up1` | | `#b8b270` | -| `up2` | | `#b6b280` | -| `up3` | | `#b6b390` | -| `up4` | | `#b8b69e` | - -### Color Scale: green - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#a9b665` | -| `down1` | | `#9eaa62` | -| `down2` | | `#939c60` | -| `down3` | | `#858c61` | -| `down4` | | `#787b62` | -| `up1` | | `#abb575` | -| `up2` | | `#adb486` | -| `up3` | | `#afb594` | -| `up4` | | `#b3b6a3` | - -### Color Scale: teal - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#89b482` | -| `down1` | | `#85a87e` | -| `down2` | | `#819b7d` | -| `down3` | | `#7e8d7b` | -| `down4` | | `#7b7e7b` | -| `up1` | | `#96b492` | -| `up2` | | `#a2b59f` | -| `up3` | | `#aeb7ad` | -| `up4` | | `#b9bab9` | - -### Color Scale: blue - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#7daea3` | -| `down1` | | `#7ba198` | -| `down2` | | `#79938e` | -| `down3` | | `#788582` | -| `down4` | | `#777777` | -| `up1` | | `#8caea7` | -| `up2` | | `#9bafaa` | -| `up3` | | `#a8b1af` | -| `up4` | | `#b4b4b4` | - -### Color Scale: violet - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#d892c1` | -| `down1` | | `#cf8cb9` | -| `down2` | | `#c586b0` | -| `down3` | | `#bb81a8` | -| `down4` | | `#af7e9f` | -| `up1` | | `#d8a1c6` | -| `up2` | | `#d9b0cc` | -| `up3` | | `#dbbdd1` | -| `up4` | | `#dec9d7` | - -### Color Scale: purple - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#d3869b` | -| `down1` | | `#ca8094` | -| `down2` | | `#bf7c8e` | -| `down3` | | `#b47788` | -| `down4` | | `#a87482` | -| `up1` | | `#d395a6` | -| `up2` | | `#d3a4b1` | -| `up3` | | `#d4b3bc` | -| `up4` | | `#d7bfc6` | - -### Color Scale: pink - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#cf91be` | -| `down1` | | `#c58bb6` | -| `down2` | | `#bb87ac` | -| `down3` | | `#af83a3` | -| `down4` | | `#a28099` | -| `up1` | | `#d0a0c2` | -| `up2` | | `#d0aec7` | -| `up3` | | `#d3bbcc` | -| `up4` | | `#d6c8d2` | - -### Color Scale: brown - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#a87757` | -| `down1` | | `#977259` | -| `down2` | | `#876c5a` | -| `down3` | | `#77665a` | -| `down4` | | `#695f59` | -| `up1` | | `#a68168` | -| `up2` | | `#a58a79` | -| `up3` | | `#a59388` | -| `up4` | | `#a69d96` | - -### Color Scale: primary - -| Name | Preview | Hex | -| ---- | ------- | --- | - -| `base` | | `#ea6962` | -| `down1` | | `#e2615b` | -| `down2` | | `#d95a54` | -| `down3` | | `#d1544e` | -| `down4` | | `#c64f49` | -| `up1` | | `#e77a74` | -| `up2` | | `#e58b86` | -| `up3` | | `#e39b96` | -| `up4` | | `#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 diff --git a/outputs/lib/builders.nix b/outputs/lib/builders.nix index f088b69..cd7822e 100644 --- a/outputs/lib/builders.nix +++ b/outputs/lib/builders.nix @@ -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 [ diff --git a/outputs/lib/color/utils.nix b/outputs/lib/color/utils.nix index 1fa6938..7014169 100644 --- a/outputs/lib/color/utils.nix +++ b/outputs/lib/color/utils.nix @@ -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; } diff --git a/outputs/lib/default.nix b/outputs/lib/default.nix index e2505b5..a6a7c1e 100644 --- a/outputs/lib/default.nix +++ b/outputs/lib/default.nix @@ -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 {