From 11e87d269d30ccbce446f7b471a60d0282798e52 Mon Sep 17 00:00:00 2001 From: Michael McClintock Date: Sun, 15 Sep 2024 12:58:12 +1000 Subject: improve themes for html, markdown, inlay hints --- README.md | 57 +++++++++++++++++++++++++++++++---------------------- yo.toml | 50 +++++++++++++++++++++++++--------------------- yo_berry.toml | 15 +++++++------- yo_berry_dark.toml | 7 ++++--- yo_berry_light.toml | 20 +++++++++++-------- yo_dark.toml | 6 ++++-- yo_light.toml | 18 ++++++++++------- yo_sand.toml | 15 +++++++------- yo_sand_dark.toml | 7 ++++--- yo_sand_light.toml | 18 ++++++++++------- 10 files changed, 123 insertions(+), 90 deletions(-) diff --git a/README.md b/README.md index 7a6d9b2..5f2260e 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,31 @@ # yo-theme-helix -[Helix][helix] themes inspired by [Zenbones][zenbones] & -[Alabaster][alabaster]. Uses [Radix Colors][radix]. +[Helix][helix] themes inspired by [Zenbones][zenbones] & [Alabaster][alabaster]. +Uses [Radix Colors][radix]. ### Notes - Ideas from alabaster. - Comments should stand out. - Use color sparingly. The rules should be simple. - - avoid font variants where possible. -- Alabaster essentially only higlights comments/constants and strings. - - It doesn't highlight keywords (reserved words) or types. (which to be fair isn't really an issue for - clojure) + - Avoid font variants where possible. +- Alabaster essentially only highlights comments/constants and strings. + - It doesn't highlight keywords (reserved words) or types. (which to be fair + isn't really an issue for Clojure) - Yo doesn't go quite as far on this point. - - Instead it takes the minimal zenbones approach to highlight the remaining code. - - subtle colors & contrast. - - vibrant colors are left for diagnostics. -- The default yo themes use the following: + - Instead, it takes the minimal Zenbones approach to highlight the remaining + code. + - Subtle colors & contrast. + - Vibrant colors are left for diagnostics. +- The default Yo themes use the following: - **Green** for strings (same as alabaster) - **Purple** for constant (same as alabaster) - **Blue** for info (comments & LSP info/hints) - **Red/Amber** LSP error/warnings - - **Gray/Bronze** Everything else zenbones style + - **Gray/Bronze** Everything else Zenbones style - I'm not a designer and don't like my chances of making something look good by - tweaking colors so instead i'll let the pros handle it. - - [Radix Colors][radix] are very well deisgned. with clear instructions for + tweaking colors, so instead I'll let the pros handle it. + - [Radix Colors][radix] are very well-designed, with clear instructions for how to apply them. - Designed for **automatic light/dark mode**. - Variants. @@ -36,24 +37,32 @@ ### Changes +#### 2024-09-15 + +- Highlight HTML `tags` as keywords, dim attributes. +- Use dotted underline for inlay hints. +- Simplify markup highlighting (Markdown etc.) to prefer modifiers. Tweak quote + for light themes + #### 2023-11-21 - Update colors to radix colors 3.0 -- Add a new default theme. Move the old default to yo_sand with some color tweaks - +- Add a new default theme. Move the old default to yo_sand with some color + tweaks + ### Screenshots -| **yo** | **yo_light** | -|:-:|:-:| -|yo|yo_light| +| **yo** | **yo_light** | +| :---------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | +| yo | yo_light | -| **yo_berry** | **yo_berry_light** | -|:-:|:-:| -|yo_berry|yo_berry_light| +| **yo_berry** | **yo_berry_light** | +| :---------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | +| yo_berry | yo_berry_light | -| **yo_sand** | **yo_sand_light** | -|:-:|:-:| -|yo_sand|yo_sand_light| +| **yo_sand** | **yo_sand_light** | +| :--------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: | +| yo_sand | yo_sand_light | [helix]: https://helix-editor.com/ [zenbones]: https://github.com/mcchrish/zenbones.nvim diff --git a/yo.toml b/yo.toml index edff271..c37ea44 100644 --- a/yo.toml +++ b/yo.toml @@ -1,7 +1,9 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + # background/text "ui.background" = { fg = "p11", bg = "p2" } "ui.background.separator" = { fg = "p7" } @@ -22,7 +24,7 @@ "ui.cursor" = { fg = "p2", bg = "p11" } "ui.cursor.insert" = { fg = "p2", bg = "keyword" } "ui.cursor.select" = { fg = "p2", bg = "p12" } -"ui.cursor.match" = { fg = "p12", modifiers = ["bold"] } +"ui.cursor.match" = { fg = "p12", modifiers = ["bold"] } "ui.selection" = { bg = "p4" } "ui.selection.primary" = { bg = "p5" } "ui.cursorline.primary" = { bg = "p3" } @@ -46,17 +48,19 @@ diff = { fg = "p8" } "ui.virtual.ruler" = { bg = "p3" } "ui.virtual.whitespace" = { fg = "p6" } "ui.virtual.indent-guide" = { fg = "p6" } -"ui.virtual.inlay-hint" = { fg = "p7" } # TODO test +"ui.virtual.inlay-hint" = { fg = "p7", underline.style = "dotted" } # diagnostics -warning = { fg = "warning", modifiers = ["bold"] } error = { fg = "error", modifiers = ["bold"] } +warning = { fg = "warning", modifiers = ["bold"] } info = { fg = "info", modifiers = ["bold"] } hint = { fg = "info", modifiers = ["bold"] } -"diagnostic.hint" = { fg = "info", modifiers = ["bold"] } -"diagnostic.info" = { fg = "info", modifiers = ["bold"] } -"diagnostic.warning" = { fg = "warning", modifiers = ["bold"] } "diagnostic.error" = { fg = "error", modifiers = ["bold"] } +"diagnostic.warning" = { fg = "warning", modifiers = ["bold"] } +"diagnostic.info" = { fg = "info", modifiers = ["bold"] } +"diagnostic.hint" = { fg = "info", modifiers = ["bold"] } +# "diagnostic.unnecessary" = {} +# "diagnostic.deprecated" = {} # code comment = { fg = "info" } @@ -70,24 +74,26 @@ namespace = { fg = "p10" } punctuation = { fg = "p9" } "punctuation.delimiter" = { fg = "p8" } function = { fg = "p11" } -attribute = { fg = "p11" } -tag = { fg = "p12" } +attribute = { fg = "p10" } +tag = { fg = "keyword" } label = { fg = "p12" } constructor = { fg = "p12" } type = { fg = "p12" } # markup -markup = { fg = "p9" } -"markup.list" = { fg = "p8" } -"markup.heading" = { fg = "p12", modifiers = ["bold"] } "markup.bold" = { modifiers = ["bold"] } "markup.italic" = { modifiers = ["italic"] } -"markup.link" = { fg = "keyword" } -"markup.link.url" = { fg = "keyword" } -"markup.quote" = { modifiers = ["italic"] } -"markup.raw" = { fg = "p12" } +"markup.strikethrough" = { modifiers = ["crossed_out"] } +"markup.heading" = { fg = "p12", modifiers = ["bold"] } +"markup.heading.marker" = { fg = "p8" } +"markup.list" = { fg = "p8" } +"markup.link.url" = { underline.style = "line" } +"markup.link.label" = { underline.style = "dotted" } +# "markup.link.text" = {} +"markup.quote" = { fg = "p10" } +# "markup.raw" = {} -[palette] # radix ui colors +[palette] # https://www.radix-ui.com/colors # grayDark p1 = "#111111" @@ -103,10 +109,10 @@ p10 = "#7b7b7b" p11 = "#b4b4b4" p12 = "#eeeeee" -error = "#ec5d5e" # redDark-10 +error = "#ec5d5e" # redDark-10 warning = "#ff801f" # orangeDark-10 -info = "#3b9eff" # blueDark-10 +info = "#3b9eff" # blueDark-10 -string = "#33b074" # greenDark-10 +string = "#33b074" # greenDark-10 constant = "#9a5cd0" # purpleDark-10 -keyword = "#ae8c7e" # bronzeDark-10 +keyword = "#ae8c7e" # bronzeDark-10 diff --git a/yo_berry.toml b/yo_berry.toml index 00e3c7f..1aaac1a 100644 --- a/yo_berry.toml +++ b/yo_berry.toml @@ -1,7 +1,9 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + inherits = "yo" [palette] @@ -20,11 +22,10 @@ p10 = "#7c7a85" p11 = "#b5b2bc" p12 = "#eeeef0" -error = "#ee518a" # crimsonDark-10 +error = "#ee518a" # crimsonDark-10 warning = "#ffff57" # yellowDark-10 -info = "#3b9eff" # blueDark-10 +info = "#3b9eff" # blueDark-10 -string = "#0eb39e" # teal-10 +string = "#0eb39e" # teal-10 constant = "#b658c4" # plum-10 -keyword = "#9eb1ff" # indigo-11 - +keyword = "#9eb1ff" # indigo-11 diff --git a/yo_berry_dark.toml b/yo_berry_dark.toml index 320b70b..effe84f 100644 --- a/yo_berry_dark.toml +++ b/yo_berry_dark.toml @@ -1,7 +1,9 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + inherits = "yo_berry" [palette] @@ -12,4 +14,3 @@ p3 = "#1a191b" p4 = "#232225" p5 = "#2b292d" p6 = "#323035" - diff --git a/yo_berry_light.toml b/yo_berry_light.toml index a8e8042..8c27e5e 100644 --- a/yo_berry_light.toml +++ b/yo_berry_light.toml @@ -1,12 +1,17 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + inherits = "yo_berry" +"ui.virtual.inlay-hint" = { fg = "p8", underline.style = "dotted" } +"markup.quote" = { fg = "p9" } + [palette] -# primary - mauve +# mauve p1 = "#fdfcfd" p2 = "#f9f8f9" p3 = "#f4f2f4" @@ -20,11 +25,10 @@ p10 = "#86848d" p11 = "#6f6e77" p12 = "#1a1523" -error = "#e03177" # crimson-10 +error = "#e03177" # crimson-10 warning = "#ed5f00" # orange-10 -info = "#0081f1" # blue-10 +info = "#0081f1" # blue-10 -string = "#0d9b8a" # teal-10 +string = "#0d9b8a" # teal-10 constant = "#a144af" # plum-10 -keyword = "#5753c6" # iris-11 - +keyword = "#5753c6" # iris-11 diff --git a/yo_dark.toml b/yo_dark.toml index 173e60f..0bf18f1 100644 --- a/yo_dark.toml +++ b/yo_dark.toml @@ -1,7 +1,9 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + inherits = "yo" [palette] diff --git a/yo_light.toml b/yo_light.toml index 3fba4af..15c1491 100644 --- a/yo_light.toml +++ b/yo_light.toml @@ -1,9 +1,14 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + inherits = "yo" +"ui.virtual.inlay-hint" = { fg = "p8", underline.style = "dotted" } +"markup.quote" = { fg = "p9" } + [palette] # gray @@ -20,11 +25,10 @@ p10 = "#838383" p11 = "#646464" p12 = "#202020" - -error = "#dc3e42" # red-10 +error = "#dc3e42" # red-10 warning = "#ef5f00" # orange-10 -info = "#0588f0" # blue-10 +info = "#0588f0" # blue-10 -string = "#2b9a66" # green-10 +string = "#2b9a66" # green-10 constant = "#8347b9" # purple-10 -keyword = "#957468" # bronze-10 +keyword = "#957468" # bronze-10 diff --git a/yo_sand.toml b/yo_sand.toml index e3e8fd1..cf92035 100644 --- a/yo_sand.toml +++ b/yo_sand.toml @@ -1,7 +1,9 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + inherits = "yo" [palette] @@ -20,11 +22,10 @@ p10 = "#7c7b74" p11 = "#b5b3ad" p12 = "#eeeeec" -error = "#ec6142" # tomatoDark-10 +error = "#ec6142" # tomatoDark-10 warning = "#ffd60a" # amberDark-10 -info = "#23afd0" # cyanDark-10 +info = "#23afd0" # cyanDark-10 -string = "#53b365" # grassDark-10 +string = "#53b365" # grassDark-10 constant = "#de51a8" # pinkDark-10 -keyword = "#dbb594" # brownDark-11 - +keyword = "#dbb594" # brownDark-11 diff --git a/yo_sand_dark.toml b/yo_sand_dark.toml index 8f20895..33e38a5 100644 --- a/yo_sand_dark.toml +++ b/yo_sand_dark.toml @@ -1,7 +1,9 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + inherits = "yo_sand" [palette] @@ -12,4 +14,3 @@ p3 = "#191918" p4 = "#222221" p5 = "#2a2a28" p6 = "#31312e" - diff --git a/yo_sand_light.toml b/yo_sand_light.toml index b05e3e5..3b0562e 100644 --- a/yo_sand_light.toml +++ b/yo_sand_light.toml @@ -1,9 +1,14 @@ -# Helix theme inspired by Zenbones & Alabaster with radix colors. -# Author: Michael McClintock @mrmcc3 +# Author: Michael McClintock # License: MIT +# Yo - Themes for Helix inspired by Zenbones & Alabaster with Radix Colors. +# https://github.com/mrmcc3/yo-theme-helix + inherits = "yo_sand" +"ui.virtual.inlay-hint" = { fg = "p8", underline.style = "dotted" } +"markup.quote" = { fg = "p9" } + [palette] # sand @@ -20,11 +25,10 @@ p10 = "#82827c" p11 = "#63635e" p12 = "#21201c" -error = "#dd4425" # tomato-10 +error = "#dd4425" # tomato-10 warning = "#ffba18" # amber-10 -info = "#0797b9" # cyan-10 +info = "#0797b9" # cyan-10 -string = "#3e9b4f" # grass-10 +string = "#3e9b4f" # grass-10 constant = "#cf3897" # pink-10 -keyword = "#815e46" # brown-11 - +keyword = "#815e46" # brown-11 -- cgit v1.2.1-18-gbd029