polish up theme. add notes

3 files changed, 130 insertions, 78 deletions

diff --git a/README.md b/README.md
index 4dcd006..ba78e9e 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,34 @@
 # yo-theme-helix
-A Helix theme inspired by Zenbones & Alabaster. Uses radix colors
+
+A [Helix][helix] theme 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.
+- Alabaster essentially skips eveything else 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 approach used by zenbones to highlight the remaining code constructs.
+    - subtle colors, contrast & font variants
+    - 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 comments (incl. LSP info/hints)**
+  - **Red/Amber: LSP error/warnings**
+  - **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 how to apply them.
+  - Designed for **automatic light/dark mode**.
+- Variants. 
+  - It should be straightforward to use helix theme inheritance to swap out the default color palette
+with other radix color combinations without losing the design principles of the theme.
+
+
+[helix]: https://helix-editor.com/
+[zenbones]: https://github.com/mcchrish/zenbones.nvim
+[alabaster]: https://github.com/tonsky/vscode-theme-alabaster
+[radix]: https://www.radix-ui.com/colors
diff --git a/yo_dark.toml b/yo_dark.toml
index 1f1d699..c7374f7 100644
--- a/yo_dark.toml
+++ b/yo_dark.toml
@@ -1,15 +1,16 @@
 # yo_dark
 
 # Helix theme inspired by Zenbones & Alabaster using the
-# radix color system - https://www.radix-ui.com/colors
+# radix color system https://www.radix-ui.com/colors
 
 # Author: Michael McClintock @mrmcc3
 # License: MIT
 
+# background/text
 "ui.background" = { fg = "gray11", bg = "gray2" } 
 "ui.background.separator" = { fg = "gray7" }
 "ui.text" = { fg = "gray11" }
-"ui.text.focus" = { fg = "alt10", bg="gray2", modifiers=["bold"] }
+"ui.text.focus" = { fg = "alt10", modifiers=["bold"] }
 
 # popups/menus
 "ui.window" = { fg = "gray7" }
@@ -23,7 +24,6 @@
 
 # cursor/selection
 "ui.cursor" = { fg = "gray2", bg = "gray11" }
-# "ui.cursor.primary" = { fg = "alt2", bg = "alt10" } # can't set insert if set
 "ui.cursor.insert" = { fg="alt2", bg="alt10" }
 "ui.cursor.select" = { fg="gray2", bg="gray12"}
 "ui.cursor.match" = { fg="alt10", modifiers=["bold"]}
@@ -31,11 +31,10 @@
 "ui.selection.primary" = { fg = "alt12", bg = "alt5" }
 "ui.cursorline.primary" = { bg = "gray3" }
 
-# gutter
-# "ui.gutter" = { } # not set
-# "ui.gutter.selected" = { }
+# line numbers / diff
 "ui.linenr" = { fg = "gray7" }
 "ui.linenr.selected" = { fg = "alt8" }
+diff = { fg = "gray7" }
 
 # statusline
 "ui.statusline" = { fg = "gray11", bg = "gray4" }
@@ -50,59 +49,47 @@
 "ui.virtual.whitespace" = { fg = "gray6" }
 "ui.virtual.indent-guide" = { fg = "gray6" }
 
-# diff
-"diff.plus" = "gray7"
-"diff.minus" = "gray7"
-"diff.delta" = "gray7"
-
 # diagnostics
-warning = "warn10"
-error = "err10"
-info = "info10"
-hint = "info10"
-"diagnostic.hint" = { underline = { style = "curl", color = "info7" } }
-"diagnostic.info" = { underline = { style = "curl", color = "info7" } }
+warning = { fg = "warn10" }
+error = { fg = "err10" }
+info = { fg = "info10" }
+hint = { fg = "info10" }
+"diagnostic.hint" = { underline = { style = "curl", color = "gray8" } }
+"diagnostic.info" = { underline = { style = "curl", color = "gray8" } }
 "diagnostic.warning" = { underline = { style = "curl", color = "warn10" } }
 "diagnostic.error" = { underline = { style = "curl", color = "err10" } }
 
-
-# comments - info
-comment = { fg = "info10" }
-
-# keywords/operators - alt
-keyword = { fg = "alt10", modifiers=["bold"] }
-operator = { fg = "alt10" }
-
-
-# strings - str
-string = { fg = "str10" }
-
-# constants - const
-constant = { fg = "const10"}
-"string.symbol" = { fg = "const10" }
-
-# everything else - gray
-variable = { fg = "gray10" }
-
-punctuation = { fg = "gray11" }
+# code
+comment = { fg = "info9" }
+keyword = { fg = "alt9", modifiers=["bold"] }
+operator = { fg = "alt9" }
+string = { fg = "str9" }
+constant = { fg = "const9"}
+"string.symbol" = { fg = "const9" }
+variable = { fg = "gray9" }
+namespace = { fg = "gray9" }
+punctuation = { fg = "gray10" }
 function = { fg = "gray11" }
 attribute = { fg = "gray11" }
-
 tag = { fg = "gray12" }
+label = { fg = "gray12" }
 constructor = { fg = "gray12" }
 type = { fg = "gray12" , modifiers = [] }
 
+# markup
+markup = { fg = "gray9" }
+"markup.list" = { fg = "gray8" }
+"markup.heading" = { fg = "gray12", modifiers = ["bold"] }
+"markup.bold" = { modifiers = ["bold"] }
+"markup.italic" = { modifiers = ["italic"] }
+"markup.link" = { fg = "gray12" }
+"markup.link.url" = { fg = "gray11", modifiers = ["underlined"] }
+"markup.quote" = { fg = "alt9", modifiers = ["italic"] }
+"markup.raw" = { fg = "gray12" }
 
-# TODO
-namespace = "err10"
-label = "err10"
-markup = "err10"
-diff = "err10"
-
-
-[palette] 
+[palette] # https://www.radix-ui.com/docs/colors/palette-composition/the-scales
 
-# gray (default text/ui) - sandDark
+# gray (default/text/ui) - sandDark
 gray1 = "#161615"
 gray2 = "#1c1c1a"
 gray3 = "#232320"
@@ -116,7 +103,7 @@ gray10 = "#7f7e77"
 gray11 = "#a1a09a"
 gray12 = "#ededec"
 
-# alt (active, global defs) - bronzeDark
+# alt (active/operators/keywords) - bronzeDark
 alt1 = "#191514"
 alt2 = "#1f1917"
 alt3 = "#2a211f"
@@ -172,18 +159,18 @@ info10 = "#369eff"
 info11 = "#52a9ff"
 info12 = "#eaf6ff"
 
-# str (strings) - greenDark
+# str (strings) - grassDark
 str1 = "#0d1912"
-str2 = "#0c1f17"
-str3 = "#0f291e"
-str4 = "#113123"
-str5 = "#133929"
-str6 = "#164430"
-str7 = "#1b543a"
-str8 = "#236e4a"
-str9 = "#30a46c"
-str10 = "#3cb179"
-str11 = "#4cc38a"
+str2 = "#0f1e13"
+str3 = "#132819"
+str4 = "#16301d"
+str5 = "#193921"
+str6 = "#1d4427"
+str7 = "#245530"
+str8 = "#2f6e3b"
+str9 = "#46a758"
+str10 = "#55b467"
+str11 = "#63c174"
 str12 = "#e5fbeb"
 
 # const (constants/literals) - purpleDark
diff --git a/yo_light.toml b/yo_light.toml
index 23daa77..e3ddd32 100644
--- a/yo_light.toml
+++ b/yo_light.toml
@@ -6,11 +6,44 @@
 # Author: Michael McClintock @mrmcc3
 # License: MIT
 
-inherits = "yo_dark"
+inherits = "yo_dark" 
 
-[palette]
+# bump up backgrounds by 1 so it's not too bright.
 
-# gray (default text/ui) - sandDark
+"ui.background" = { fg = "gray11", bg = "gray3" } 
+
+# popups/menus
+"ui.popup" = { fg = "gray12", bg = "gray5" }
+"ui.popup.info" = { fg = "gray12", bg = "gray3" }
+"ui.text.info" = { fg = "gray12", bg = "gray3" }
+"ui.help" = { fg = "gray12", bg = "gray3" }
+"ui.menu" = { fg = "gray11", bg = "gray5" }
+"ui.menu.scroll" = { fg = "gray8", bg = "gray5" }
+
+# cursor/selection
+"ui.cursor" = { fg = "gray3", bg = "gray11" }
+"ui.cursor.insert" = { fg="alt3", bg="alt10" }
+"ui.cursor.select" = { fg="gray3", bg="gray12"}
+"ui.selection" = { fg = "gray12", bg = "gray6" }
+"ui.selection.primary" = { fg = "alt12", bg = "alt6" }
+"ui.cursorline.primary" = { bg = "gray4" }
+
+# statusline
+"ui.statusline" = { fg = "gray11", bg = "gray5" }
+"ui.statusline.inactive" = { fg = "gray11", bg = "gray3" }
+"ui.statusline.normal" = { fg = "gray3", bg = "gray11" }
+"ui.statusline.insert" = { fg = "alt3", bg = "alt10" }
+"ui.statusline.select" = { fg = "alt3", bg = "gray12" }
+"ui.statusline.separator" = { fg = "gray8" }
+
+# virtual
+"ui.virtual.ruler" = { bg = "gray4" }
+"ui.virtual.whitespace" = { fg = "gray7" }
+"ui.virtual.indent-guide" = { fg = "gray7" }
+
+[palette] # https://www.radix-ui.com/docs/colors/palette-composition/the-scales
+
+# gray (default/text/ui) - sand
 gray1 = "#fdfdfc"
 gray2 = "#f9f9f8"
 gray3 = "#f3f3f2"
@@ -24,7 +57,7 @@ gray10 = "#868682"
 gray11 = "#706f6c"
 gray12 = "#1b1b18"
 
-# alt (active, global defs) - bronzeDark
+# alt (active/operators/keywords) - bronze
 alt1 = "#fdfcfc"
 alt2 = "#fdf8f6"
 alt3 = "#f8f1ee"
@@ -38,7 +71,7 @@ alt10 = "#977669"
 alt11 = "#846358"
 alt12 = "#43302b"
 
-# error (diagnostics) - redDark
+# error (diagnostics) - red
 err1 = "#fffcfc"
 err2 = "#fff8f8"
 err3 = "#ffefef"
@@ -80,19 +113,19 @@ info10 = "#0081f1"
 info11 = "#006adc"
 info12 = "#00254d"
 
-# str (strings) - green
-str1 = "#fbfefc"
-str2 = "#f2fcf5"
-str3 = "#e9f9ee"
-str4 = "#ddf3e4"
-str5 = "#ccebd7"
-str6 = "#b4dfc4"
-str7 = "#92ceac"
-str8 = "#5bb98c"
-str9 = "#30a46c"
-str10 = "#299764"
-str11 = "#18794e"
-str12 = "#153226"
+# str (strings) - grass
+str1 = "#fbfefb"
+str2 = "#f3fcf3"
+str3 = "#ebf9eb"
+str4 = "#dff3df"
+str5 = "#ceebcf"
+str6 = "#b7dfba"
+str7 = "#97cf9c"
+str8 = "#65ba75"
+str9 = "#46a758"
+str10 = "#3d9a50"
+str11 = "#297c3b"
+str12 = "#1b311e"
 
 # const (constants/literals) - purple
 const1 = "#fefcfe"