hozen: add slug arg
This commit is contained in:
parent
1874a33f84
commit
e00a70ca53
2 changed files with 126 additions and 129 deletions
|
|
@ -2,6 +2,7 @@
|
||||||
inherit (ook.lib.color.utils) mkLightColorScheme mkDarkColorScheme;
|
inherit (ook.lib.color.utils) mkLightColorScheme mkDarkColorScheme;
|
||||||
|
|
||||||
darkScheme = mkDarkColorScheme {
|
darkScheme = mkDarkColorScheme {
|
||||||
|
slug = "gruvbox-material-dark-medium";
|
||||||
neutrals = {
|
neutrals = {
|
||||||
"50" = "dfd2b3";
|
"50" = "dfd2b3";
|
||||||
"100" = "d9c7a5";
|
"100" = "d9c7a5";
|
||||||
|
|
@ -17,12 +18,12 @@
|
||||||
"600" = "585350";
|
"600" = "585350";
|
||||||
"650" = "4d4947";
|
"650" = "4d4947";
|
||||||
"700" = "3f3b3b";
|
"700" = "3f3b3b";
|
||||||
"750" = "343232";
|
"750" = "32302f";
|
||||||
"800" = "282828";
|
"800" = "282828";
|
||||||
"850" = "212121";
|
"850" = "212121";
|
||||||
"900" = "1a1a1a";
|
"900" = "1a1a1a";
|
||||||
};
|
};
|
||||||
primary = "ea6962";
|
primary = "a9b665";
|
||||||
red = "ea6962";
|
red = "ea6962";
|
||||||
orange = "e78a4e";
|
orange = "e78a4e";
|
||||||
yellow = "d8a657";
|
yellow = "d8a657";
|
||||||
|
|
@ -37,6 +38,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
lightScheme = mkLightColorScheme {
|
lightScheme = mkLightColorScheme {
|
||||||
|
slug = "gruvbox-material-light-soft";
|
||||||
neutrals = {
|
neutrals = {
|
||||||
"50" = "f7efda";
|
"50" = "f7efda";
|
||||||
"100" = "f4eac8";
|
"100" = "f4eac8";
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,14 @@
|
||||||
hslSet = translate.hex.toHSL.set hexStr;
|
hslSet = translate.hex.toHSL.set hexStr;
|
||||||
newHSL = types.hsl.set {
|
newHSL = types.hsl.set {
|
||||||
inherit (hslSet) h;
|
inherit (hslSet) h;
|
||||||
l = math.clamp 0.0 1.0 (hslSet.l + (modifications.l or 0.0));
|
l =
|
||||||
s = math.clamp 0.0 1.0 (hslSet.s + (modifications.s or 0.0));
|
if modifications ? absoluteL
|
||||||
|
then modifications.l
|
||||||
|
else math.clamp 0.0 1.0 (hslSet.l + (modifications.l or 0.0));
|
||||||
|
s =
|
||||||
|
if modifications ? absoluteS
|
||||||
|
then modifications.l
|
||||||
|
else math.clamp 0.0 1.0 (hslSet.s + (modifications.s or 0.0));
|
||||||
};
|
};
|
||||||
rgbSet = translate.hsl.toRGB.set newHSL;
|
rgbSet = translate.hsl.toRGB.set newHSL;
|
||||||
in
|
in
|
||||||
|
|
@ -27,35 +33,47 @@
|
||||||
desaturate = amount: hexStr:
|
desaturate = amount: hexStr:
|
||||||
modifyHSL hexStr {s = (amount * -1) / 100.0;};
|
modifyHSL hexStr {s = (amount * -1) / 100.0;};
|
||||||
|
|
||||||
# opinionated scale generators for light/dark themes
|
absoluteLum = amount: hexStr:
|
||||||
# lighter/darker shades always desaturate
|
modifyHSL hexStr {
|
||||||
|
absoluteL = true;
|
||||||
|
l = amount / 100.0;
|
||||||
|
};
|
||||||
|
|
||||||
mkDarkColorScale = base: {
|
mkDarkColorScale = base: {
|
||||||
up4 = desaturate 24 (lighten 12 base);
|
hard4 = lighten 12 base;
|
||||||
up3 = desaturate 18 (lighten 9 base);
|
hard3 = lighten 9 base;
|
||||||
up2 = desaturate 12 (lighten 6 base);
|
hard2 = lighten 6 base;
|
||||||
up1 = desaturate 6 (lighten 3 base);
|
hard1 = lighten 3 base;
|
||||||
inherit base;
|
inherit base;
|
||||||
down1 = desaturate 6 (darken 3 base);
|
soft1 = darken 3 base;
|
||||||
down2 = desaturate 12 (darken 6 base);
|
soft2 = darken 6 base;
|
||||||
down3 = desaturate 18 (darken 9 base);
|
soft3 = darken 9 base;
|
||||||
down4 = desaturate 24 (darken 12 base);
|
soft4 = darken 12 base;
|
||||||
};
|
};
|
||||||
|
|
||||||
mkLightColorScale = base: {
|
mkLightColorScale = base: {
|
||||||
down4 = desaturate 24 (lighten 12 base);
|
soft4 = lighten 12 base;
|
||||||
down3 = desaturate 18 (lighten 9 base);
|
soft3 = lighten 9 base;
|
||||||
down2 = desaturate 12 (lighten 6 base);
|
soft2 = lighten 6 base;
|
||||||
down1 = desaturate 6 (lighten 3 base);
|
soft1 = lighten 3 base;
|
||||||
inherit base;
|
inherit base;
|
||||||
up1 = desaturate 6 (darken 3 base);
|
hard1 = darken 3 base;
|
||||||
up2 = desaturate 12 (darken 6 base);
|
hard2 = darken 6 base;
|
||||||
up3 = desaturate 18 (darken 9 base);
|
hard3 = darken 9 base;
|
||||||
up4 = desaturate 24 (darken 12 base);
|
hard4 = darken 12 base;
|
||||||
|
};
|
||||||
|
|
||||||
|
mkAlert = color: {
|
||||||
|
fg = absoluteLum 19 color;
|
||||||
|
bg = absoluteLum 79 color;
|
||||||
|
border = color;
|
||||||
|
base = color;
|
||||||
};
|
};
|
||||||
|
|
||||||
# core color scheme generator
|
# core color scheme generator
|
||||||
mkColorScheme = {
|
mkColorScheme = {
|
||||||
type ? "dark",
|
type ? "dark",
|
||||||
|
slug,
|
||||||
neutrals ? {},
|
neutrals ? {},
|
||||||
primary,
|
primary,
|
||||||
red,
|
red,
|
||||||
|
|
@ -71,52 +89,59 @@
|
||||||
brown,
|
brown,
|
||||||
} @ args: let
|
} @ args: let
|
||||||
# Select scale function based on theme type
|
# Select scale function based on theme type
|
||||||
colorScale =
|
mkColorScale =
|
||||||
if type == "dark"
|
if type == "dark"
|
||||||
then mkDarkColorScale
|
then mkDarkColorScale
|
||||||
else mkLightColorScale;
|
else mkLightColorScale;
|
||||||
|
|
||||||
# Generate color scales
|
# Generate color scales
|
||||||
colorScales = {
|
colors = {
|
||||||
red = colorScale args.red;
|
red = mkColorScale args.red;
|
||||||
orange = colorScale args.orange;
|
orange = mkColorScale args.orange;
|
||||||
yellow = colorScale args.yellow;
|
yellow = mkColorScale args.yellow;
|
||||||
olive = colorScale args.olive;
|
olive = mkColorScale args.olive;
|
||||||
green = colorScale args.green;
|
green = mkColorScale args.green;
|
||||||
teal = colorScale args.teal;
|
teal = mkColorScale args.teal;
|
||||||
blue = colorScale args.blue;
|
blue = mkColorScale args.blue;
|
||||||
violet = colorScale args.violet;
|
violet = mkColorScale args.violet;
|
||||||
purple = colorScale args.purple;
|
purple = mkColorScale args.purple;
|
||||||
pink = colorScale args.pink;
|
pink = mkColorScale args.pink;
|
||||||
brown = colorScale args.brown;
|
brown = mkColorScale args.brown;
|
||||||
};
|
};
|
||||||
|
|
||||||
# Theme-specific configurations
|
# Theme-specific configurations
|
||||||
themeConfig =
|
theme =
|
||||||
if type == "dark"
|
if type == "dark"
|
||||||
then {
|
then {
|
||||||
semantic = {
|
semantic = {
|
||||||
body = args.neutrals."700";
|
layout = {
|
||||||
header = args.neutrals."800";
|
body = args.neutrals."750";
|
||||||
footer = args.neutrals."800";
|
header = args.neutrals."800";
|
||||||
menu = args.neutrals."800";
|
footer = args.neutrals."800";
|
||||||
border = args.neutrals."150";
|
menu = args.neutrals."800";
|
||||||
border-active = args.neutrals."150";
|
};
|
||||||
border-inactive = args.neutrals."600";
|
border = {
|
||||||
text = args.neutrals."150";
|
base = args.neutrals."150";
|
||||||
text-bright = args.neutrals."100";
|
active = args.neutrals."150";
|
||||||
subtext = args.neutrals."300";
|
inactive = args.neutrals."600";
|
||||||
|
};
|
||||||
|
typography = {
|
||||||
|
text = args.neutrals."150";
|
||||||
|
text-bright = args.neutrals."100";
|
||||||
|
subtext = args.neutrals."300";
|
||||||
|
contrast-text = args.neutrals."800";
|
||||||
|
};
|
||||||
};
|
};
|
||||||
secondary = {
|
secondary = {
|
||||||
up-4 = args.neutrals."400";
|
hard4 = args.neutrals."300";
|
||||||
up-3 = args.neutrals."450";
|
hard3 = args.neutrals."350";
|
||||||
up-2 = args.neutrals."500";
|
hard2 = args.neutrals."400";
|
||||||
up-1 = args.neutrals."550";
|
hard1 = args.neutrals."450";
|
||||||
base = args.neutrals."700";
|
base = args.neutrals."500";
|
||||||
down-1 = args.neutrals."750";
|
soft1 = args.neutrals."550";
|
||||||
down-2 = args.neutrals."800";
|
soft2 = args.neutrals."600";
|
||||||
down-3 = args.neutrals."850";
|
soft3 = args.neutrals."650";
|
||||||
down-4 = args.neutrals."900";
|
soft4 = args.neutrals."700";
|
||||||
};
|
};
|
||||||
base00 = args.neutrals."800";
|
base00 = args.neutrals."800";
|
||||||
base01 = args.neutrals."700";
|
base01 = args.neutrals."700";
|
||||||
|
|
@ -131,27 +156,34 @@
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
semantic = {
|
semantic = {
|
||||||
body = args.neutrals."50";
|
layout = {
|
||||||
header = args.neutrals."150";
|
body = args.neutrals."50";
|
||||||
footer = args.neutrals."150";
|
header = args.neutrals."150";
|
||||||
menu = args.neutrals."150";
|
footer = args.neutrals."150";
|
||||||
border = args.neutrals."800";
|
menu = args.neutrals."150";
|
||||||
border-active = args.neutrals."800";
|
};
|
||||||
border-inactive = args.neutrals."300";
|
border = {
|
||||||
text = args.neutrals."800";
|
base = args.neutrals."800";
|
||||||
text-bright = args.neutrals."850";
|
active = args.neutrals."800";
|
||||||
subtext = args.neutrals."600";
|
inactive = args.neutrals."300";
|
||||||
|
};
|
||||||
|
typography = {
|
||||||
|
text = args.neutrals."800";
|
||||||
|
text-bright = args.neutrals."850";
|
||||||
|
subtext = args.neutrals."600";
|
||||||
|
text-contrast = args.neutrals."50";
|
||||||
|
};
|
||||||
};
|
};
|
||||||
secondary = {
|
secondary = {
|
||||||
up-4 = args.neutrals."400";
|
hard4 = args.neutrals."400";
|
||||||
up-3 = args.neutrals."350";
|
hard3 = args.neutrals."350";
|
||||||
up-2 = args.neutrals."300";
|
hard2 = args.neutrals."300";
|
||||||
up-1 = args.neutrals."250";
|
hard1 = args.neutrals."250";
|
||||||
base = args.neutrals."200";
|
base = args.neutrals."200";
|
||||||
down-1 = args.neutrals."150";
|
soft1 = args.neutrals."150";
|
||||||
down-2 = args.neutrals."100";
|
soft2 = args.neutrals."100";
|
||||||
down-3 = args.neutrals."50";
|
soft3 = args.neutrals."50";
|
||||||
down-4 = args.neutrals."50";
|
soft4 = args.neutrals."50";
|
||||||
};
|
};
|
||||||
base00 = args.neutrals."150";
|
base00 = args.neutrals."150";
|
||||||
base01 = args.neutrals."250";
|
base01 = args.neutrals."250";
|
||||||
|
|
@ -165,6 +197,7 @@
|
||||||
base11 = args.neutrals."50";
|
base11 = args.neutrals."50";
|
||||||
};
|
};
|
||||||
in {
|
in {
|
||||||
|
inherit slug;
|
||||||
# Common structure for both themes
|
# Common structure for both themes
|
||||||
neutrals = {
|
neutrals = {
|
||||||
inherit
|
inherit
|
||||||
|
|
@ -190,8 +223,14 @@
|
||||||
;
|
;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
error = mkAlert args.red;
|
||||||
|
warning = mkAlert args.yellow;
|
||||||
|
success = mkAlert args.green;
|
||||||
|
note = mkAlert args.blue;
|
||||||
|
tip = mkAlert args.teal;
|
||||||
|
|
||||||
inherit
|
inherit
|
||||||
(colorScales)
|
(colors)
|
||||||
red
|
red
|
||||||
orange
|
orange
|
||||||
yellow
|
yellow
|
||||||
|
|
@ -205,52 +244,11 @@
|
||||||
brown
|
brown
|
||||||
;
|
;
|
||||||
|
|
||||||
primary = colorScale args.primary;
|
primary = mkColorScale args.primary;
|
||||||
|
|
||||||
inherit (themeConfig) semantic secondary;
|
inherit (theme) secondary;
|
||||||
|
inherit (theme.semantic) layout border typography;
|
||||||
|
|
||||||
# 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 = {
|
syntax = {
|
||||||
string = args.green;
|
string = args.green;
|
||||||
number = args.purple;
|
number = args.purple;
|
||||||
|
|
@ -273,14 +271,13 @@
|
||||||
preCondit = args.purple;
|
preCondit = args.purple;
|
||||||
special = args.yellow;
|
special = args.yellow;
|
||||||
specialChar = args.yellow;
|
specialChar = args.yellow;
|
||||||
comment = "${themeConfig.semantic.subtext}";
|
comment = "${theme.semantic.typography.subtext}";
|
||||||
todo = args.purple;
|
todo = args.purple;
|
||||||
tag = args.teal;
|
tag = args.teal;
|
||||||
};
|
};
|
||||||
|
|
||||||
# Base16/24 colors
|
|
||||||
inherit
|
inherit
|
||||||
(themeConfig)
|
(theme)
|
||||||
base00
|
base00
|
||||||
base01
|
base01
|
||||||
base02
|
base02
|
||||||
|
|
@ -292,8 +289,6 @@
|
||||||
base10
|
base10
|
||||||
base11
|
base11
|
||||||
;
|
;
|
||||||
|
|
||||||
# Generated base colors
|
|
||||||
base08 = args.red;
|
base08 = args.red;
|
||||||
base09 = args.orange;
|
base09 = args.orange;
|
||||||
base0A = args.yellow;
|
base0A = args.yellow;
|
||||||
|
|
@ -302,12 +297,12 @@
|
||||||
base0D = args.blue;
|
base0D = args.blue;
|
||||||
base0E = args.purple;
|
base0E = args.purple;
|
||||||
base0F = args.brown;
|
base0F = args.brown;
|
||||||
base12 = "${colorScales.red.up2}";
|
base12 = "${colors.red.hard2}";
|
||||||
base13 = "${colorScales.yellow.up2}";
|
base13 = "${colors.yellow.hard2}";
|
||||||
base14 = "${colorScales.green.up2}";
|
base14 = "${colors.green.hard2}";
|
||||||
base15 = "${colorScales.teal.up2}";
|
base15 = "${colors.teal.hard2}";
|
||||||
base16 = "${colorScales.blue.up2}";
|
base16 = "${colors.blue.hard2}";
|
||||||
base17 = "${colorScales.purple.up2}";
|
base17 = "${colors.purple.hard2}";
|
||||||
};
|
};
|
||||||
|
|
||||||
# wrappers
|
# wrappers
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue