nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Themes.css

@@ -1,194 +1,200 @@
-/*
- * Color themes. Each sets its base palette once per color as light-dark(light, dark); the page's color-scheme
- * (light, dark, or the system setting) picks the side. Hover colors, soft backgrounds, and the focus ring are
- * derived from these in Nexus.Tokens.css.
- *
- * Colors follow each theme's official palette, darkened or lightened where needed to meet WCAG AA contrast.
- * --nx-primary and --nx-danger are the accent as text and lines (light in dark mode, for contrast on dark panels);
- * --nx-primary-solid and --nx-danger-solid are the same hue as a fill behind white text (buttons, selected days,
- * checks), a darker shade in dark mode. --nx-primary-text and --nx-danger-text sit on the solid fills.
- * After changing a color, run: npm run check:themes
- *
- * A new theme is one more block with its own data-nx-theme value, added to NEXUS_THEMES or passed to the theme components.
- */
-@layer nexus.themes {
-  /* Nexus: neutral grays with a confident blue. The default. */
-  :root,
-  [data-nx-theme="nexus"] {
-    --nx-bg: light-dark(#f5f6f8, #0f1115);
-    --nx-surface: light-dark(#ffffff, #171a20);
-    --nx-surface-2: light-dark(#f0f2f5, #1e222a);
-    --nx-surface-hover: light-dark(#e9ecf1, #262b35);
-    --nx-border: light-dark(#dde1e7, #2c323d);
-    --nx-border-strong: light-dark(#c3cad4, #3d4552);
-    --nx-text: light-dark(#171c26, #e6e9ef);
-    --nx-text-muted: light-dark(#5a6375, #a1a9b7);
-    --nx-text-subtle: light-dark(#8b93a2, #6f7888);
-    --nx-primary: light-dark(#1c5cea, #4f8fff);
-    --nx-primary-solid: light-dark(#1c5cea, #3270dd);
-    --nx-primary-text: light-dark(#ffffff, #ffffff);
-    --nx-danger: light-dark(#c5291d, #f26b5e);
-    --nx-danger-solid: light-dark(#c5291d, #cb473d);
-    --nx-danger-text: light-dark(#ffffff, #ffffff);
-    --nx-success: light-dark(#147739, #4cc27a);
-    --nx-warning: light-dark(#b34608, #f2a54a);
-    --nx-info: light-dark(#0b6aa2, #5bb3e6);
-  }
-
-  /* GitHub: Primer grays with GitHub green. */
-  [data-nx-theme="github"] {
-    --nx-bg: light-dark(#f6f8fa, #010409);
-    --nx-surface: light-dark(#ffffff, #0d1117);
-    --nx-surface-2: light-dark(#f6f8fa, #151b23);
-    --nx-surface-hover: light-dark(#eef1f4, #212830);
-    --nx-border: light-dark(#d1d9e0, #3d444d);
-    --nx-border-strong: light-dark(#b1bac4, #656c76);
-    --nx-text: light-dark(#1f2328, #f0f6fc);
-    --nx-text-muted: light-dark(#59636e, #9198a1);
-    --nx-text-subtle: light-dark(#818b98, #6e7681);
-    --nx-primary: light-dark(#1b7736, #3fb950);
-    --nx-primary-solid: light-dark(#1b7736, #388441);
-    --nx-primary-text: light-dark(#ffffff, #ffffff);
-    --nx-danger: light-dark(#c8212d, #f85149);
-    --nx-danger-solid: light-dark(#c8212d, #db3330);
-    --nx-danger-text: light-dark(#ffffff, #ffffff);
-    --nx-success: light-dark(#197934, #3fb950);
-    --nx-warning: light-dark(#8d5e00, #d29922);
-    --nx-info: light-dark(#0964d0, #4493f8);
-  }
-
-  /* Nord: arctic, north-bluish calm. */
-  [data-nx-theme="nord"] {
-    --nx-bg: light-dark(#e5e9f0, #242933);
-    --nx-surface: light-dark(#eceff4, #2e3440);
-    --nx-surface-2: light-dark(#e5e9f0, #3b4252);
-    --nx-surface-hover: light-dark(#d8dee9, #434c5e);
-    --nx-border: light-dark(#d8dee9, #434c5e);
-    --nx-border-strong: light-dark(#b8c2d3, #4c566a);
-    --nx-text: light-dark(#2e3440, #eceff4);
-    --nx-text-muted: light-dark(#4c566a, #b9c2d0);
-    --nx-text-subtle: light-dark(#7b88a1, #7b88a1);
-    --nx-primary: light-dark(#446184, #88c0d0);
-    --nx-primary-solid: light-dark(#446184, #4b717c);
-    --nx-primary-text: light-dark(#eceff4, #eceff4);
-    --nx-danger: light-dark(#9e4049, #dba6ab);
-    --nx-danger-solid: light-dark(#9e4049, #8e5e63);
-    --nx-danger-text: light-dark(#eceff4, #eceff4);
-    --nx-success: light-dark(#4e6639, #a3be8c);
-    --nx-warning: light-dark(#954931, #ebcb8b);
-    --nx-info: light-dark(#406283, #9cb5ce);
-  }
-
-  /* Dracula: the dark purple classic, with its Alucard palette for light. */
-  [data-nx-theme="dracula"] {
-    --nx-bg: light-dark(#f3eed9, #21222c);
-    --nx-surface: light-dark(#fffbeb, #282a36);
-    --nx-surface-2: light-dark(#f7f1dc, #303241);
-    --nx-surface-hover: light-dark(#efe8cf, #44475a);
-    --nx-border: light-dark(#e4dcc0, #44475a);
-    --nx-border-strong: light-dark(#cfc49f, #6272a4);
-    --nx-text: light-dark(#1f1f1f, #f8f8f2);
-    --nx-text-muted: light-dark(#635d97, #c5c8d8);
-    --nx-text-subtle: light-dark(#8e89ae, #6272a4);
-    --nx-primary: light-dark(#644ac9, #bd93f9);
-    --nx-primary-solid: light-dark(#644ac9, #8a60c1);
-    --nx-primary-text: light-dark(#ffffff, #ffffff);
-    --nx-danger: light-dark(#ba3527, #ff7b7b);
-    --nx-danger-solid: light-dark(#ba3527, #c8494d);
-    --nx-danger-text: light-dark(#ffffff, #ffffff);
-    --nx-success: light-dark(#14710a, #50fa7b);
-    --nx-warning: light-dark(#a34d14, #ffb86c);
-    --nx-info: light-dark(#036a96, #8be9fd);
-  }
-
-  /* Solarized: warm cream or deep teal, with precise accents. */
-  [data-nx-theme="solarized"] {
-    --nx-bg: light-dark(#eee8d5, #00212b);
-    --nx-surface: light-dark(#fdf6e3, #002b36);
-    --nx-surface-2: light-dark(#f5efdc, #073642);
-    --nx-surface-hover: light-dark(#eee8d5, #0b4453);
-    --nx-border: light-dark(#e4ddc8, #0d3f4c);
-    --nx-border-strong: light-dark(#cdc5ab, #2a5561);
-    --nx-text: light-dark(#073642, #eee8d5);
-    --nx-text-muted: light-dark(#566b72, #93a1a1);
-    --nx-text-subtle: light-dark(#809294, #657b83);
-    --nx-primary: light-dark(#1c679c, #55a7e0);
-    --nx-primary-solid: light-dark(#1c679c, #247bb2);
-    --nx-primary-text: light-dark(#ffffff, #ffffff);
-    --nx-danger: light-dark(#bd2320, #e9807e);
-    --nx-danger-solid: light-dark(#bd2320, #b95555);
-    --nx-danger-text: light-dark(#ffffff, #ffffff);
-    --nx-success: light-dark(#5b6900, #92a800);
-    --nx-warning: light-dark(#7d5e00, #c69700);
-    --nx-info: light-dark(#1d6e68, #2fb3a9);
-  }
-
-  /* Catppuccin: soothing pastels, Latte for light and Mocha for dark. */
-  [data-nx-theme="catppuccin"] {
-    --nx-bg: light-dark(#e6e9ef, #11111b);
-    --nx-surface: light-dark(#eff1f5, #1e1e2e);
-    --nx-surface-2: light-dark(#e6e9ef, #313244);
-    --nx-surface-hover: light-dark(#dce0e8, #45475a);
-    --nx-border: light-dark(#ccd0da, #45475a);
-    --nx-border-strong: light-dark(#acb0be, #585b70);
-    --nx-text: light-dark(#42455c, #dce2f7);
-    --nx-text-muted: light-dark(#65687d, #a6adc8);
-    --nx-text-subtle: light-dark(#868a9c, #7f849c);
-    --nx-primary: light-dark(#7a21ed, #cba6f7);
-    --nx-primary-solid: light-dark(#7a21ed, #8965b1);
-    --nx-primary-text: light-dark(#ffffff, #ffffff);
-    --nx-danger: light-dark(#ba0d33, #f38ba8);
-    --nx-danger-solid: light-dark(#ba0d33, #b75573);
-    --nx-danger-text: light-dark(#ffffff, #ffffff);
-    --nx-success: light-dark(#2c6e1d, #a6e3a1);
-    --nx-warning: light-dark(#875612, #f9e2af);
-    --nx-info: light-dark(#0a52e0, #89b4fa);
-  }
-
-  /* Rosé Pine: muted pine, iris, and rose; Dawn for light. */
-  [data-nx-theme="rose-pine"] {
-    --nx-bg: light-dark(#faf4ed, #191724);
-    --nx-surface: light-dark(#fffaf3, #1f1d2e);
-    --nx-surface-2: light-dark(#f2e9e1, #26233a);
-    --nx-surface-hover: light-dark(#ebe2da, #2a2740);
-    --nx-border: light-dark(#dfdad9, #403d52);
-    --nx-border-strong: light-dark(#cecacd, #524f67);
-    --nx-text: light-dark(#494565, #e0def4);
-    --nx-text-muted: light-dark(#6a6683, #908caa);
-    --nx-text-subtle: light-dark(#948fa2, #6e6a86);
-    --nx-primary: light-dark(#745c8f, #c4a7e7);
-    --nx-primary-solid: light-dark(#745c8f, #8166a1);
-    --nx-primary-text: light-dark(#fffaf3, #fffaf3);
-    --nx-danger: light-dark(#9d4c63, #eb6f92);
-    --nx-danger-solid: light-dark(#9d4c63, #bf476c);
-    --nx-danger-text: light-dark(#fffaf3, #fffaf3);
-    --nx-success: light-dark(#286983, #9ccfd8);
-    --nx-warning: light-dark(#90590f, #f6c177);
-    --nx-info: light-dark(#406d76, #4da0c2);
-  }
-
-  /* Browsers without light-dark() (before 2024) get the Nexus light palette. */
-  @supports not (color: light-dark(#fff, #000)) {
-    :root,
-    [data-nx-theme] {
-      --nx-bg: #f5f6f8;
-      --nx-surface: #ffffff;
-      --nx-surface-2: #f0f2f5;
-      --nx-surface-hover: #e9ecf1;
-      --nx-border: #dde1e7;
-      --nx-border-strong: #c3cad4;
-      --nx-text: #171c26;
-      --nx-text-muted: #5a6375;
-      --nx-text-subtle: #8b93a2;
-      --nx-primary: #1c5cea;
-      --nx-primary-solid: #1c5cea;
-      --nx-primary-text: #ffffff;
-      --nx-danger: #c5291d;
-      --nx-danger-solid: #c5291d;
-      --nx-danger-text: #ffffff;
-      --nx-success: #147739;
-      --nx-warning: #b34608;
-      --nx-info: #0b6aa2;
-    }
-  }
-}
+/*
+ * Color themes. Each sets its base palette once per color as light-dark(light, dark); the page's color-scheme
+ * (light, dark, or the system setting) picks the side. Hover colors, soft backgrounds, and the focus ring are
+ * derived from these in Nexus.Tokens.css.
+ *
+ * Colors follow each theme's official palette, darkened or lightened where needed to meet WCAG AA contrast.
+ * --nx-primary and --nx-danger are the accent as text and lines (light in dark mode, for contrast on dark panels);
+ * --nx-primary-solid and --nx-danger-solid are the same hue as a fill behind white text (buttons, selected days,
+ * checks), a darker shade in dark mode. --nx-primary-text and --nx-danger-text sit on the solid fills: a light
+ * label in both modes (white, or the theme's own near-white), since a fill under the pointer or pressed darkens
+ * (Nexus.Tokens.css). A fill keeps 2:1 on --nx-surface at rest and under the pointer.
+ * After changing a color, run: npm run check:themes
+ *
+ * A new theme is one more block with its own data-nx-theme value, added to NEXUS_THEMES or passed to the theme components.
+ */
+@layer nexus.themes {
+  /* Nexus: neutral grays with a confident blue. The default. */
+  :root,
+  [data-nx-theme="nexus"] {
+    --nx-bg: light-dark(#f5f6f8, #0f1115);
+    --nx-surface: light-dark(#ffffff, #171a20);
+    --nx-surface-2: light-dark(#f0f2f5, #1e222a);
+    --nx-surface-hover: light-dark(#e9ecf1, #262b35);
+    --nx-border: light-dark(#dde1e7, #2c323d);
+    --nx-border-strong: light-dark(#c3cad4, #3d4552);
+    --nx-text: light-dark(#171c26, #e6e9ef);
+    --nx-text-muted: light-dark(#5a6375, #a1a9b7);
+    --nx-text-subtle: light-dark(#8b93a2, #6f7888);
+    --nx-primary: light-dark(#1c5cea, #4f8fff);
+    --nx-primary-solid: light-dark(#1c5cea, #3270dd);
+    --nx-primary-text: light-dark(#ffffff, #ffffff);
+    --nx-danger: light-dark(#c5291d, #f26b5e);
+    --nx-danger-solid: light-dark(#c5291d, #cb473d);
+    --nx-danger-text: light-dark(#ffffff, #ffffff);
+    --nx-success: light-dark(#147739, #4cc27a);
+    --nx-warning: light-dark(#b34608, #f2a54a);
+    --nx-info: light-dark(#0b6aa2, #5bb3e6);
+  }
+
+  /* GitHub: Primer grays with GitHub green. */
+  [data-nx-theme="github"] {
+    --nx-bg: light-dark(#f6f8fa, #010409);
+    --nx-surface: light-dark(#ffffff, #0d1117);
+    --nx-surface-2: light-dark(#f6f8fa, #151b23);
+    --nx-surface-hover: light-dark(#eef1f4, #212830);
+    --nx-border: light-dark(#d1d9e0, #3d444d);
+    --nx-border-strong: light-dark(#b1bac4, #656c76);
+    --nx-text: light-dark(#1f2328, #f0f6fc);
+    --nx-text-muted: light-dark(#59636e, #9198a1);
+    --nx-text-subtle: light-dark(#818b98, #6e7681);
+    --nx-primary: light-dark(#1b7736, #3fb950);
+    --nx-primary-solid: light-dark(#1b7736, #388441);
+    --nx-primary-text: light-dark(#ffffff, #ffffff);
+    --nx-danger: light-dark(#c8212d, #f85149);
+    --nx-danger-solid: light-dark(#c8212d, #db3330);
+    --nx-danger-text: light-dark(#ffffff, #ffffff);
+    --nx-success: light-dark(#197934, #3fb950);
+    --nx-warning: light-dark(#8d5e00, #d29922);
+    --nx-info: light-dark(#0964d0, #4493f8);
+  }
+
+  /*
+   * Nord: arctic, north-bluish calm. In dark mode its fills carry pure white: its panel (#2e3440) is lighter than
+   * other themes', and with snow (#eceff4) as the label a fill had no room to darken under the pointer and still
+   * stand 2:1 off the panel.
+   */
+  [data-nx-theme="nord"] {
+    --nx-bg: light-dark(#e5e9f0, #242933);
+    --nx-surface: light-dark(#eceff4, #2e3440);
+    --nx-surface-2: light-dark(#e5e9f0, #3b4252);
+    --nx-surface-hover: light-dark(#d8dee9, #434c5e);
+    --nx-border: light-dark(#d8dee9, #434c5e);
+    --nx-border-strong: light-dark(#b8c2d3, #4c566a);
+    --nx-text: light-dark(#2e3440, #eceff4);
+    --nx-text-muted: light-dark(#4c566a, #b9c2d0);
+    --nx-text-subtle: light-dark(#7b88a1, #7b88a1);
+    --nx-primary: light-dark(#446184, #88c0d0);
+    --nx-primary-solid: light-dark(#446184, #557b86);
+    --nx-primary-text: light-dark(#eceff4, #ffffff);
+    --nx-danger: light-dark(#9e4049, #dba6ab);
+    --nx-danger-solid: light-dark(#9e4049, #99686d);
+    --nx-danger-text: light-dark(#eceff4, #ffffff);
+    --nx-success: light-dark(#4e6639, #a3be8c);
+    --nx-warning: light-dark(#954931, #ebcb8b);
+    --nx-info: light-dark(#406283, #9cb5ce);
+  }
+
+  /* Dracula: the dark purple classic, with its Alucard palette for light. */
+  [data-nx-theme="dracula"] {
+    --nx-bg: light-dark(#f3eed9, #21222c);
+    --nx-surface: light-dark(#fffbeb, #282a36);
+    --nx-surface-2: light-dark(#f7f1dc, #303241);
+    --nx-surface-hover: light-dark(#efe8cf, #44475a);
+    --nx-border: light-dark(#e4dcc0, #44475a);
+    --nx-border-strong: light-dark(#cfc49f, #6272a4);
+    --nx-text: light-dark(#1f1f1f, #f8f8f2);
+    --nx-text-muted: light-dark(#635d97, #c5c8d8);
+    --nx-text-subtle: light-dark(#8e89ae, #6272a4);
+    --nx-primary: light-dark(#644ac9, #bd93f9);
+    --nx-primary-solid: light-dark(#644ac9, #8a60c1);
+    --nx-primary-text: light-dark(#ffffff, #ffffff);
+    --nx-danger: light-dark(#ba3527, #ff7b7b);
+    --nx-danger-solid: light-dark(#ba3527, #c8494d);
+    --nx-danger-text: light-dark(#ffffff, #ffffff);
+    --nx-success: light-dark(#14710a, #50fa7b);
+    --nx-warning: light-dark(#a34d14, #ffb86c);
+    --nx-info: light-dark(#036a96, #8be9fd);
+  }
+
+  /* Solarized: warm cream or deep teal, with precise accents. */
+  [data-nx-theme="solarized"] {
+    --nx-bg: light-dark(#eee8d5, #00212b);
+    --nx-surface: light-dark(#fdf6e3, #002b36);
+    --nx-surface-2: light-dark(#f5efdc, #073642);
+    --nx-surface-hover: light-dark(#eee8d5, #0b4453);
+    --nx-border: light-dark(#e4ddc8, #0d3f4c);
+    --nx-border-strong: light-dark(#cdc5ab, #2a5561);
+    --nx-text: light-dark(#073642, #eee8d5);
+    --nx-text-muted: light-dark(#566b72, #93a1a1);
+    --nx-text-subtle: light-dark(#809294, #657b83);
+    --nx-primary: light-dark(#1c679c, #55a7e0);
+    --nx-primary-solid: light-dark(#1c679c, #247bb2);
+    --nx-primary-text: light-dark(#ffffff, #ffffff);
+    --nx-danger: light-dark(#bd2320, #e9807e);
+    --nx-danger-solid: light-dark(#bd2320, #b95555);
+    --nx-danger-text: light-dark(#ffffff, #ffffff);
+    --nx-success: light-dark(#5b6900, #92a800);
+    --nx-warning: light-dark(#7d5e00, #c69700);
+    --nx-info: light-dark(#1d6e68, #2fb3a9);
+  }
+
+  /* Catppuccin: soothing pastels, Latte for light and Mocha for dark. */
+  [data-nx-theme="catppuccin"] {
+    --nx-bg: light-dark(#e6e9ef, #11111b);
+    --nx-surface: light-dark(#eff1f5, #1e1e2e);
+    --nx-surface-2: light-dark(#e6e9ef, #313244);
+    --nx-surface-hover: light-dark(#dce0e8, #45475a);
+    --nx-border: light-dark(#ccd0da, #45475a);
+    --nx-border-strong: light-dark(#acb0be, #585b70);
+    --nx-text: light-dark(#42455c, #dce2f7);
+    --nx-text-muted: light-dark(#65687d, #a6adc8);
+    --nx-text-subtle: light-dark(#868a9c, #7f849c);
+    --nx-primary: light-dark(#7a21ed, #cba6f7);
+    --nx-primary-solid: light-dark(#7a21ed, #8965b1);
+    --nx-primary-text: light-dark(#ffffff, #ffffff);
+    --nx-danger: light-dark(#ba0d33, #f38ba8);
+    --nx-danger-solid: light-dark(#ba0d33, #b75573);
+    --nx-danger-text: light-dark(#ffffff, #ffffff);
+    --nx-success: light-dark(#2c6e1d, #a6e3a1);
+    --nx-warning: light-dark(#875612, #f9e2af);
+    --nx-info: light-dark(#0a52e0, #89b4fa);
+  }
+
+  /* Rosé Pine: muted pine, iris, and rose; Dawn for light. */
+  [data-nx-theme="rose-pine"] {
+    --nx-bg: light-dark(#faf4ed, #191724);
+    --nx-surface: light-dark(#fffaf3, #1f1d2e);
+    --nx-surface-2: light-dark(#f2e9e1, #26233a);
+    --nx-surface-hover: light-dark(#ebe2da, #2a2740);
+    --nx-border: light-dark(#dfdad9, #403d52);
+    --nx-border-strong: light-dark(#cecacd, #524f67);
+    --nx-text: light-dark(#494565, #e0def4);
+    --nx-text-muted: light-dark(#6a6683, #908caa);
+    --nx-text-subtle: light-dark(#948fa2, #6e6a86);
+    --nx-primary: light-dark(#745c8f, #c4a7e7);
+    --nx-primary-solid: light-dark(#745c8f, #8166a1);
+    --nx-primary-text: light-dark(#fffaf3, #fffaf3);
+    --nx-danger: light-dark(#9d4c63, #eb6f92);
+    --nx-danger-solid: light-dark(#9d4c63, #bf476c);
+    --nx-danger-text: light-dark(#fffaf3, #fffaf3);
+    --nx-success: light-dark(#286983, #9ccfd8);
+    --nx-warning: light-dark(#90590f, #f6c177);
+    --nx-info: light-dark(#406d76, #4da0c2);
+  }
+
+  /* Browsers without light-dark() (before 2024) get the Nexus light palette. */
+  @supports not (color: light-dark(#fff, #000)) {
+    :root,
+    [data-nx-theme] {
+      --nx-bg: #f5f6f8;
+      --nx-surface: #ffffff;
+      --nx-surface-2: #f0f2f5;
+      --nx-surface-hover: #e9ecf1;
+      --nx-border: #dde1e7;
+      --nx-border-strong: #c3cad4;
+      --nx-text: #171c26;
+      --nx-text-muted: #5a6375;
+      --nx-text-subtle: #8b93a2;
+      --nx-primary: #1c5cea;
+      --nx-primary-solid: #1c5cea;
+      --nx-primary-text: #ffffff;
+      --nx-danger: #c5291d;
+      --nx-danger-solid: #c5291d;
+      --nx-danger-text: #ffffff;
+      --nx-success: #147739;
+      --nx-warning: #b34608;
+      --nx-info: #0b6aa2;
+    }
+  }
+}