285 lines
8.6 KiB
Nix
285 lines
8.6 KiB
Nix
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;
|
|
}
|