feat(web): use Light/Dark previews instead of Normal/Inverse

hi-nvim-rs-web-styler/src/lib.rs

@@ -1,6 +1,6 @@
 use std::borrow::Cow;
 
-use hi_nvim_rs::{Colorscheme, Highlight};
+use hi_nvim_rs::{Colorscheme, Highlight, Kind};
 
 pub enum Target {
     Neovim,
@@ -37,17 +37,22 @@ fn style_group(
         highlight
     };
 
+    let (normal, inverse) = match colorscheme.kind() {
+        Kind::Light => ("light", "dark"),
+        Kind::Dark => ("dark", "light"),
+    };
+
     if let Some(fg) = highlight.fg.and_then(|c| colorscheme.get_color(c)) {
-        write!(w, "--{group}--fg: {fg}; ").unwrap();
+        write!(w, "--{group}--{normal}-fg: {fg}; ").unwrap();
     }
     if let Some(bg) = highlight.bg.and_then(|c| colorscheme.get_color(c)) {
-        write!(w, "--{group}--bg: {bg}; ").unwrap();
+        write!(w, "--{group}--{normal}-bg: {bg}; ").unwrap();
     }
     if let Some(fg) = highlight.fg.and_then(|c| colorscheme.get_inverse_color(c)) {
-        write!(w, "--{group}--inverse-fg: {fg}; ").unwrap();
+        write!(w, "--{group}--{inverse}-fg: {fg}; ").unwrap();
     }
     if let Some(bg) = highlight.bg.and_then(|c| colorscheme.get_inverse_color(c)) {
-        write!(w, "--{group}--inverse-bg: {bg}; ").unwrap();
+        write!(w, "--{group}--{inverse}-bg: {bg}; ").unwrap();
     }
     if highlight.bold.unwrap_or(false) {
         write!(w, "--{group}--font-weight: 600; ").unwrap();

hi-nvim-rs-web/assets/style.css

@@ -10,16 +10,16 @@
 }
 
 html {
-  --fg: var(--Normal--fg);
-  --bg: var(--Normal--bg);
-  --bg-light: var(--Normal--bg);
-  --border: var(--WinSeparator--fg);
-  --textarea-fg: var(--NormalFloat--fg);
-  --textarea-bg: var(--NormalFloat--bg);
-  --link-fg: var(--DiagnosticInfo--fg);
-  --link-bg: var(--DiagnosticInfo--bg);
-  --link-hover-fg: var(--Visual--fg);
-  --link-hover-bg: var(--Visual--bg);
+  --fg: var(--Normal--light-fg);
+  --bg: var(--Normal--light-bg);
+  --bg-light: var(--Normal--light-bg);
+  --border: var(--WinSeparator--light-fg);
+  --textarea-fg: var(--NormalFloat--light-fg);
+  --textarea-bg: var(--NormalFloat--light-bg);
+  --link-fg: var(--DiagnosticInfo--light-fg);
+  --link-bg: var(--DiagnosticInfo--light-bg);
+  --link-hover-fg: var(--Visual--light-fg);
+  --link-hover-bg: var(--Visual--light-bg);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -103,15 +103,23 @@ a:hover {
 }
 
 .preview {
-  max-width: calc(min(100%, 42rem))
+  max-width: calc(min(100%, 42rem));
 }
 
 .preview > div {
-  border: 1px solid var(--FloatBorder--fg);
+  border: 1px solid var(--FloatBorder--light-fg);
   box-shadow: var(--ring-box-shadow);
-  color: var(--Normal--fg);
-  background-color: var(--Normal--bg);
   font-family: monospace;
+
+  .light & {
+    color: var(--Normal--light-fg);
+    background-color: var(--Normal--light-bg);
+  }
+
+  .dark & {
+    color: var(--Normal--dark-fg);
+    background-color: var(--Normal--dark-bg);
+  }
 }
 
 .preview > h3 {
@@ -126,8 +134,16 @@ a:hover {
   margin: 0;
   padding-inline: 0.5em;
   text-align: right;
-  color: var(--LineNr--fg);
-  background-color: var(--LineNr--bg);
+
+  .light & {
+    color: var(--LineNr--light-fg);
+    background-color: var(--LineNr--light-bg);
+  }
+
+  .dark & {
+    color: var(--LineNr--dark-fg);
+    background-color: var(--LineNr--dark-bg);
+  }
 }
 
 .buffer article {
@@ -143,37 +159,32 @@ a:hover {
 
 .statusline {
   display: flex;
-  color: var(--StatusLine--fg);
-  background-color: var(--StatusLine--bg);
+
+  .light & {
+    color: var(--StatusLine--light-fg);
+    background-color: var(--StatusLine--light-bg);
+  }
+
+  .dark & {
+    color: var(--StatusLine--dark-fg);
+    background-color: var(--StatusLine--dark-bg);
+  }
 }
 
 .statusline > span:first-child {
   flex: 1;
 }
 
 .msgarea {
-  color: var(--MsgArea--fg);
-  background-color: var(--MsgArea--bg);
-}
-
-.preview.inverse > div {
-  color: var(--Normal--inverse-fg);
-  background-color: var(--Normal--inverse-bg);
-}
-
-.preview.inverse .linenr {
-  color: var(--LineNr--inverse-fg);
-  background-color: var(--LineNr--inverse-bg);
-}
-
-.preview.inverse .statusline {
-  color: var(--StatusLine--inverse-fg);
-  background-color: var(--StatusLine--inverse-bg);
-}
-
-.preview.inverse .msgarea {
-  color: var(--MsgArea--inverse-fg);
-  background-color: var(--MsgArea--inverse-bg);
+  .light & {
+    color: var(--MsgArea--light-fg);
+    background-color: var(--MsgArea--light-bg);
+  }
+
+  .dark & {
+    color: var(--MsgArea--dark-fg);
+    background-color: var(--MsgArea--dark-bg);
+  }
 }
 
 #error p {

hi-nvim-rs-web/build.rs

@@ -94,16 +94,18 @@ fn styles_to_write(mut w: impl std::io::Write) -> Result<(), Box<dyn std::error:
             w,
             r#"
 .{group} {{
-    color: var(--{group}--fg);
-    background-color: var(--{group}--bg);
     font-weight: var(--{group}--font-weight);
     font-style: var(--{group}--font-style);
     text-decoration: var(--{group}--text-decoration);
-}}
 
-.preview.inverse .{group} {{
-    color: var(--{group}--inverse-fg);
-    background-color: var(--{group}--inverse-bg);
+    .light & {{
+        color: var(--{group}--light-fg);
+        background-color: var(--{group}--light-bg);
+    }}
+    .dark & {{
+        color: var(--{group}--dark-fg);
+        background-color: var(--{group}--dark-bg);
+    }}
 }}
 "#
         )?;

hi-nvim-rs-web/src/main.rs

@@ -209,13 +209,13 @@ markup::define! {
     }
 
     PreviewContainerInner(language: Language) {
-        article #preview1 .preview {
-            h2 { "Normal" }
+        article #preview1 .preview .light {
+            h2 { "Light" }
             div { @Preview { language: *language } }
         }
 
-        article #preview2 .preview .inverse {
-            h2 { "Inverse" }
+        article #preview2 .preview .dark {
+            h2 { "Dark" }
             div { @Preview { language: *language } }
         }
     }

src/lib.rs

@@ -11,5 +11,5 @@ mod modifiers;
 pub use colorscheme::{parse, Colorscheme, Srgb, Theme};
 pub use compiler_neovim::compile as compile_neovim;
 pub use compiler_vim::compile as compile_vim;
-pub use configuration::{Highlight, NamespacedThemeElement};
+pub use configuration::{Highlight, Kind, NamespacedThemeElement};
 pub use error::Error;