colors: refactor dark theme
colors: refactor dark theme
This commit is contained in:
parent
d9f629f3a9
commit
f55f7474fd
2 changed files with 307 additions and 0 deletions
285
modules/nixos/appearance/palettes/dark.nix
Normal file
285
modules/nixos/appearance/palettes/dark.nix
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
let
|
||||
/*
|
||||
extended version of gruvbox/gruvbox material to support multiple frameworks:
|
||||
|
||||
- tailwind
|
||||
- base16/24
|
||||
- semantic
|
||||
|
||||
references:
|
||||
|
||||
shades
|
||||
<https://coolors.co/dfd2b3-d9c7a5-d4be98-c6b395-b4a288-a49384-99897a-8b7c6f>
|
||||
<https://coolors.co/1a1a1a-212121-282828-343232-3f3b3b-4d4947-585350-645f59-716860-7d6f64>
|
||||
|
||||
colors
|
||||
<https://coolors.co/69713f-737c45-7f884c-8c9654-9aa55c-a9b665-b1be74-b8c481-bec98c-c4ce96>
|
||||
<https://coolors.co/e57b76-ea6962-e95149-e33e35>
|
||||
<https://coolors.co/e69965-e78a4e-e07b38-de732b>
|
||||
*/
|
||||
colors = {
|
||||
#shades
|
||||
|
||||
shade-50 = "#dfd2b3";
|
||||
shade-100 = "#d9c7a5";
|
||||
shade-150 = "#d4be98";
|
||||
shade-200 = "#c6b395";
|
||||
shade-250 = "#b4a288";
|
||||
shade-300 = "#a49384";
|
||||
shade-350 = "#99897a";
|
||||
shade-400 = "#8b7c6f";
|
||||
shade-450 = "#7d6f64";
|
||||
shade-500 = "#716860";
|
||||
shade-550 = "#645f59";
|
||||
shade-600 = "#585350";
|
||||
shade-650 = "#4d4947";
|
||||
shade-700 = "#3f3b3b";
|
||||
shade-750 = "#343232";
|
||||
shade-800 = "#282828";
|
||||
shade-850 = "#212121";
|
||||
shade-900 = "#1a1a1a";
|
||||
|
||||
# we use green as the primary color here.
|
||||
primary = "#a9b665";
|
||||
|
||||
# color scale for our primary accent color.
|
||||
primary-dark-1 = "#b1be74";
|
||||
primary-dark-2 = "${colors.primary-dark-1}";
|
||||
primary-dark-3 = "#b8c481";
|
||||
primary-dark-4 = "${colors.primary-dark-3}";
|
||||
primary-dark-5 = "#bec98c";
|
||||
primary-dark-6 = "${colors.primary-dark-4}";
|
||||
primary-dark-7 = "#c4ce96";
|
||||
|
||||
primary-light-1 = "#9aa55c";
|
||||
primary-light-2 = "${colors.primary-light-1}";
|
||||
primary-light-3 = "#8c9654";
|
||||
primary-light-4 = "${colors.primary-dark-3}";
|
||||
primary-light-5 = "#7f884c";
|
||||
primary-light-6 = "${colors.primary-dark-5}";
|
||||
primary-light-7 = "#69713f";
|
||||
|
||||
primary-alpha-10 = "${colors.primary}19";
|
||||
primary-alpha-20 = "${colors.primary}33";
|
||||
primary-alpha-30 = "${colors.primary}4b";
|
||||
primary-alpha-40 = "${colors.primary}66";
|
||||
primary-alpha-50 = "${colors.primary}80";
|
||||
primary-alpha-60 = "${colors.primary}99";
|
||||
primary-alpha-70 = "${colors.primary}b3";
|
||||
primary-alpha-80 = "${colors.primary}cc";
|
||||
primary-alpha-90 = "${colors.primary}e1";
|
||||
|
||||
primary-hover = "${colors.primary-light-2}";
|
||||
primary-active = "${colors.primary-light-4}";
|
||||
|
||||
# we use green as the secondary color here.
|
||||
secondary = "${colors.shade-700}";
|
||||
|
||||
# color scale for our secondary accent color.
|
||||
secondary-dark-1 = "${colors.shade-550}";
|
||||
secondary-dark-2 = "${colors.shade-500}";
|
||||
secondary-dark-3 = "${colors.shade-450}";
|
||||
secondary-dark-4 = "${colors.shade-400}";
|
||||
secondary-dark-5 = "${colors.shade-350}";
|
||||
secondary-dark-6 = "${colors.shade-300}";
|
||||
secondary-dark-7 = "${colors.shade-250}";
|
||||
secondary-dark-8 = "${colors.shade-200}";
|
||||
secondary-dark-9 = "${colors.shade-150}";
|
||||
secondary-dark-10 = "${colors.shade-100}";
|
||||
secondary-dark-11 = "${colors.shade-100}";
|
||||
secondary-dark-12 = "${colors.shade-100}";
|
||||
secondary-dark-13 = "${colors.shade-100}";
|
||||
|
||||
secondary-light-1 = "${colors.shade-650}";
|
||||
secondary-light-2 = "${colors.shade-700}";
|
||||
secondary-light-3 = "${colors.shade-750}";
|
||||
secondary-light-4 = "${colors.shade-800}";
|
||||
|
||||
secondary-alpha-10 = "${colors.secondary}19";
|
||||
secondary-alpha-20 = "${colors.secondary}33";
|
||||
secondary-alpha-30 = "${colors.secondary}4b";
|
||||
secondary-alpha-40 = "${colors.secondary}66";
|
||||
secondary-alpha-50 = "${colors.secondary}80";
|
||||
secondary-alpha-60 = "${colors.secondary}99";
|
||||
secondary-alpha-70 = "${colors.secondary}b3";
|
||||
secondary-alpha-80 = "${colors.secondary}cc";
|
||||
secondary-alpha-90 = "${colors.secondary}e1";
|
||||
|
||||
secondary-hover = "${colors.secondary-light-1}";
|
||||
secondary-active = "${colors.secondary-light-2}";
|
||||
|
||||
red-light = "#e57b76";
|
||||
red = "#ea6962";
|
||||
red-dark-1 = "#e7534b";
|
||||
red-dark-2 = "#e33e35";
|
||||
|
||||
orange-light = "#e69965";
|
||||
orange = "#e78a4e";
|
||||
orange-dark-1 = "#e07b38";
|
||||
orange-dark-2 = "#de732b";
|
||||
|
||||
yellow-light = "#d9b06d";
|
||||
yellow = "#d8a657";
|
||||
yellow-dark-1 = "#d09a43";
|
||||
yellow-dark-2 = "#c99136";
|
||||
|
||||
olive-light = "#beb874";
|
||||
olive = "#b9b25f";
|
||||
olive-dark-1 = "#ada652";
|
||||
olive-dark-2 = "#9b944b";
|
||||
|
||||
green-light = "#b1be74";
|
||||
green = "#a9b665";
|
||||
green-dark-1 = "#9aa55c";
|
||||
green-dark-2 = "#8c9654";
|
||||
|
||||
teal-light = "#9abb95";
|
||||
teal = "#89b482";
|
||||
teal-dark-1 = "#7aa573";
|
||||
teal-dark-2 = "#6c9a65";
|
||||
|
||||
blue-light = "#91b6ae";
|
||||
blue = "#7daea3";
|
||||
blue-dark-1 = "#6ea096";
|
||||
blue-dark-2 = "#63978d";
|
||||
|
||||
violet-light = "#dba3c7";
|
||||
violet = "#d892c1";
|
||||
violet-dark-1 = "#cd7eb3";
|
||||
violet-dark-2 = "#c86faa";
|
||||
|
||||
purple-light = "#d9a0af";
|
||||
purple = "#d3869b";
|
||||
purple-dark-1 = "#ca778d";
|
||||
purple-dark-2 = "#c26680";
|
||||
|
||||
pink-light = "#d8abcc";
|
||||
pink = "#cf91be";
|
||||
pink-dark-1 = "#c47eb1";
|
||||
pink-dark-2 = "#bc71a8";
|
||||
|
||||
brown-light = "#b18568";
|
||||
brown = "#a87757";
|
||||
brown-dark-1 = "#976b4e";
|
||||
brown-dark-2 = "#896248";
|
||||
|
||||
grey-light = "${colors.shade-350}";
|
||||
grey = "${colors.shade-450}";
|
||||
grey-dark-1 = "${colors.shade-500}";
|
||||
grey-dark-2 = "${colors.shade-550}";
|
||||
|
||||
black-light = "${colors.shade-700}";
|
||||
black = "${colors.shade-800}";
|
||||
black-dark-1 = "${colors.shade-850}";
|
||||
black-dark-2 = "${colors.shade-900}";
|
||||
|
||||
# semantic
|
||||
body = "${colors.shade-700}";
|
||||
header = "${colors.shade-800}";
|
||||
text = "${colors.shade-150}";
|
||||
text-light = "${colors.shade-100}";
|
||||
text-lighter = "${colors.shade-50}";
|
||||
texter-dark = "${colors.shade-200}";
|
||||
text-darker = "${colors.shade-350}";
|
||||
footer = "${colors.shade-800}";
|
||||
menu = "${colors.shade-800}";
|
||||
border-active = "${colors.shade-150}";
|
||||
border-inactive = "${colors.shade-600}";
|
||||
|
||||
error-bg = "${colors.red}";
|
||||
error-bg-active = "${colors.red-dark-1}";
|
||||
error-bg-hover = "${colors.red-dark-2}";
|
||||
error-text = "${colors.shade-800}";
|
||||
error-border = "${colors.red-light}";
|
||||
|
||||
success-bg = "${colors.green}";
|
||||
success-bg-active = "${colors.green-dark-1}";
|
||||
success-bg-hover = "${colors.green-dark-2}";
|
||||
success-text = "${colors.shade-800}";
|
||||
success-border = "${colors.green-light}";
|
||||
|
||||
warning-bg = "${colors.yellow}";
|
||||
warning-bg-active = "${colors.yellow-dark-1}";
|
||||
warning-bg-hover = "${colors.yellow-dark-2}";
|
||||
warning-text = "${colors.shade-800}";
|
||||
warning-border = "${colors.yellow-light}";
|
||||
|
||||
info-bg = "${colors.blue}";
|
||||
info-bg-active = "${colors.blue-dark-1}";
|
||||
info-bg-hover = "${colors.blue-dark-2}";
|
||||
info-text = "${colors.shade-800}";
|
||||
info-border = "${colors.blue-light}";
|
||||
|
||||
tip-bg = "${colors.teal}";
|
||||
tip-bg-active = "${colors.teal-dark-1}";
|
||||
tip-bg-hover = "${colors.teal-dark-2}";
|
||||
tip-text = "${colors.shade-800}";
|
||||
tip-border = "${colors.teal-light}";
|
||||
|
||||
input-text = "${colors.text-light}";
|
||||
|
||||
# syntax
|
||||
|
||||
syntax = {
|
||||
string = "${colors.green}";
|
||||
number = "${colors.purple}";
|
||||
float = "${colors.purple}";
|
||||
boolean = "${colors.purple}";
|
||||
type = "${colors.yellow}";
|
||||
structure = "${colors.orange}";
|
||||
statement = "${colors.red}";
|
||||
label = "${colors.orange}";
|
||||
operator = "${colors.orange}";
|
||||
identifier = "${colors.blue}";
|
||||
function = "${colors.green}";
|
||||
storageClass = "${colors.orange}";
|
||||
constant = "${colors.teal}";
|
||||
exception = "${colors.red}";
|
||||
preproc = "${colors.purple}";
|
||||
include = "${colors.purple}";
|
||||
define = "${colors.purple}";
|
||||
macro = "${colors.teal}";
|
||||
preCondit = "${colors.purple}";
|
||||
special = "${colors.yellow}";
|
||||
specialChar = "${colors.yellow}";
|
||||
comment = "${colors.text-darker}";
|
||||
todo = "${colors.purple}";
|
||||
tag = "${colors.tag}";
|
||||
|
||||
mdH1 = "${colors.red}";
|
||||
mdH2 = "${colors.orange}";
|
||||
mdH3 = "${colors.yellow}";
|
||||
mdH4 = "${colors.green}";
|
||||
mdH5 = "${colors.blue}";
|
||||
mdH6 = "${colors.purple}";
|
||||
};
|
||||
|
||||
# base 16/24
|
||||
base00 = "${colors.shade-800}";
|
||||
base01 = "${colors.shade-700}";
|
||||
base02 = "${colors.shade-600}";
|
||||
base03 = "${colors.shade-450}";
|
||||
base04 = "${colors.shade-300}";
|
||||
base05 = "${colors.shade-150}";
|
||||
base06 = "${colors.shade-100}";
|
||||
base07 = "${colors.shade-50}";
|
||||
base08 = "${colors.red}";
|
||||
base09 = "${colors.orange}";
|
||||
base0A = "${colors.yellow}";
|
||||
base0B = "${colors.green}";
|
||||
base0C = "${colors.teal}";
|
||||
base0D = "${colors.blue}";
|
||||
base0E = "${colors.purple}";
|
||||
base0F = "${colors.brown}";
|
||||
base10 = "${colors.shade-850}";
|
||||
base11 = "${colors.shade-900}";
|
||||
base12 = "${colors.red-light}";
|
||||
base13 = "${colors.yellow-light}";
|
||||
base14 = "${colors.green-light}";
|
||||
base15 = "${colors.teal-light}";
|
||||
base16 = "${colors.blue-light}";
|
||||
base17 = "${colors.purple-light}";
|
||||
};
|
||||
in {
|
||||
inherit colors;
|
||||
}
|
||||
22
modules/nixos/appearance/palettes/readme.md
Normal file
22
modules/nixos/appearance/palettes/readme.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
# References:
|
||||
|
||||
## Dark
|
||||
|
||||
### Shades
|
||||
|
||||
- (https://coolors.co/1a1a1a-212121-282828-343232-3f3b3b-4d4947-585350-645f59-716860-7d6f64)[Dark]
|
||||
- (https://coolors.co/dfd2b3-d9c7a5-d4be98-c6b395-b4a288-a49384-99897a-8b7c6f)[light]
|
||||
|
||||
### Colors
|
||||
|
||||
- [https://coolors.co/69713f-737c45-7f884c-8c9654-9aa55c-a9b665-b1be74-b8c481-bec98c-c4ce96](Green)
|
||||
- [https://coolors.co/e57b76-ea6962-e95149-e33e35](Red)
|
||||
- [https://coolors.co/e69965-e78a4e-e07b38-de732b](Orange)
|
||||
- [https://coolors.co/d9b06d-d8a657-d09a43-c99136](Yellow)
|
||||
- [https://coolors.co/beb874-b9b25f-ada652-9b944b](Olive)
|
||||
- [https://coolors.co/9abb95-89b482-7aa573-6c9a65](Teal)
|
||||
- [https://coolors.co/91b6ae-7daea3-6ea096-63978d](Blue)
|
||||
- [https://coolors.co/dba3c7-d892c1-cd7eb3-c86faa](Violet)
|
||||
- [https://coolors.co/d9a0af-d3869b-ca778d-c26680](Purple)
|
||||
- [https://coolors.co/d8abcc-cf91be-c47eb1-bc71a8](Pink)
|
||||
- [https://coolors.co/b18568-a87757-976b4e-896248](Brown)
|
||||
Loading…
Add table
Add a link
Reference in a new issue