nexus-shared 3.1.0 → 3.2.0

package/src/Styles/Nexus.Table.css

@@ -447,21 +447,17 @@
   }
 
   /*
-   * The pinned section above the page: a row across the table whose button folds the records the user pinned open and
-   * shut, and the rows themselves, which show in the list below as well. A pinned row wears a pin where the rows of the
-   * page show their number.
+   * The sections above the page: a row across the table whose button folds a set of the user's records open and shut -
+   * the ones they pinned, their favourites - and the rows themselves, which show in the list below as well. A section's
+   * row wears the section's icon where the rows of the page show their number.
    */
-  .nx-table__pins {
-    border-bottom: 2px solid var(--nx-table-line);
-  }
-
-  .nx-table__pin-cell {
+  .nx-table__section-cell {
     padding: 0;
     border-bottom: 1px solid var(--nx-table-line);
     background: var(--nx-table-head-bg);
   }
 
-  .nx-table__pin-toggle {
+  .nx-table__section-toggle {
     display: flex;
     align-items: center;
     gap: var(--nx-space-2);
@@ -479,54 +475,54 @@
     transition: background-color var(--nx-duration);
   }
 
-  .nx-table__pin-toggle:hover {
+  .nx-table__section-toggle:hover {
     background: color-mix(in oklab, var(--nx-text) 5%, transparent);
   }
 
-  .nx-table__pin-toggle:focus-visible {
+  .nx-table__section-toggle:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 2px var(--nx-primary);
   }
 
-  .nx-table__pin-caret {
+  .nx-table__section-caret,
+  .nx-table__section-icon,
+  .nx-table__mark {
     flex-shrink: 0;
     width: 15px;
     height: 15px;
     color: var(--nx-text-muted);
-    transition: transform var(--nx-duration);
   }
 
-  .nx-table__pins[data-open] .nx-table__pin-caret {
-    transform: rotate(90deg);
+  /* A row's marks, where its number would be: one under the other, in the line a single mark takes. */
+  .nx-table__marks {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
   }
 
-  .nx-table__pin-icon {
-    flex-shrink: 0;
-    width: 15px;
-    height: 15px;
-    color: var(--nx-text-muted);
+  .nx-table__section-caret {
+    transition: transform var(--nx-duration);
+  }
+
+  .nx-table__section[data-open] .nx-table__section-caret {
+    transform: rotate(90deg);
   }
 
-  .nx-table__pin-count {
+  .nx-table__section-count {
     color: var(--nx-text-muted);
     font-weight: 400;
     font-variant-numeric: tabular-nums;
   }
 
-  .nx-table__pin-loading {
+  .nx-table__section-loading {
     width: 14px;
     height: 14px;
     color: var(--nx-text-muted);
   }
 
-  .nx-table__pin-mark {
-    width: 15px;
-    height: 15px;
-    color: var(--nx-text-muted);
-  }
-
-  [data-nx-motion="reduce"] .nx-table__pin-caret,
-  [data-nx-motion="reduce"] .nx-table__pin-toggle {
+  [data-nx-motion="reduce"] .nx-table__section-caret,
+  [data-nx-motion="reduce"] .nx-table__section-toggle {
     transition: none;
   }
 
@@ -859,6 +855,11 @@
     --nx-tag-tone: var(--nx-info);
   }
 
+  /* A tag after a value (a column's `tag`): "Asia" then "Trashed", a word's space apart. */
+  .nx-table__tag--after {
+    margin-inline-start: var(--nx-space-2);
+  }
+
   /* Placeholders while the first rows load. */
   .nx-table__bone {
     display: block;

package/src/Styles/Nexus.Theme.Picker.css

@@ -55,6 +55,11 @@
    * The scroller runs to the panel's right wall, so its scroll bar is the wall's and not a padding's width inside it,
    * and it carries the panel's right padding inside itself; the panel's other children keep the same inset with a
    * margin. Its right corners take the panel's rounding, so the bar is cut by the curve instead of drawn over it.
+   * A scroller cuts off what reaches past its edge, and a focus ring is drawn outside its box (3px; a checkbox's
+   * outline 4px). So on its other three sides it reaches 4px into the panel's padding and pads itself by as much:
+   * what it holds stays where it was, and a field at its edge shows its whole ring (every panel's padding is 4px or
+   * more). Focus scrolls a field as far clear of the edges (`scroll-padding`), so one left flush with an edge by a
+   * scroll shows its ring too.
    */
   .nx-popover:has(> .nx-popover__scroll) {
     max-height: var(--nx-popover-room, calc(100vh - 16px));
@@ -74,12 +79,31 @@
   .nx-popover__scroll {
     flex: 1 1 auto;
     min-height: 0;
+    margin: calc(var(--nx-space-1) * -1);
+    margin-right: 0;
+    padding: var(--nx-space-1);
     padding-right: var(--nx-popover-pad, var(--nx-space-4));
+    scroll-padding: var(--nx-space-1);
     overflow: hidden auto;
     overscroll-behavior: contain;
     border-radius: 0 calc(var(--nx-radius-lg) - 1px) calc(var(--nx-radius-lg) - 1px) 0;
   }
 
+  /*
+   * Where the scroller reaches one of the panel's left corners (it is the panel's first or last child, as a menu's
+   * list is), its own corner follows the panel's curve: the panel's inner radius less the room between their edges,
+   * which is the panel's padding less the 4px taken back. A menu's 4px puts the two edges together, so its corner takes
+   * the whole 9px; an 8px padding leaves 5px, the theme panel's 16px none. Square, a scrolled item's highlight ran
+   * over the rounded border.
+   */
+  .nx-popover > .nx-popover__scroll:first-child {
+    border-top-left-radius: max(0px, var(--nx-radius-lg) - 1px - (var(--nx-popover-pad, var(--nx-space-4)) - var(--nx-space-1)));
+  }
+
+  .nx-popover > .nx-popover__scroll:last-child {
+    border-bottom-left-radius: max(0px, var(--nx-radius-lg) - 1px - (var(--nx-popover-pad, var(--nx-space-4)) - var(--nx-space-1)));
+  }
+
   /*
    * The arrow that ties a panel to the button or the place it opened from: an isosceles tail, 26px across and 11px
    * deep, with a slightly rounded tip. It is drawn in two layers, because a shape with a line along two of its sides
@@ -130,19 +154,45 @@
     transform: scaleY(-1);
   }
 
+  /* Wide enough for the sections to sit two to a row. */
   .nx-theme-switcher__panel {
     position: fixed;
     inset: auto;
-    width: min(340px, calc(100vw - 16px));
+    width: min(680px, calc(100vw - 16px));
   }
 
   .nx-theme-picker,
-  .nx-theme-switcher__body {
+  .nx-theme-switcher__body,
+  .nx-theme-picker__block {
     display: grid;
     gap: var(--nx-space-4);
   }
 
-  /* A section of the preferences: a line above it and its name, a step stronger than the small headings under it. */
+  /*
+   * In the panel every section is a cell of one grid: two to a row, the theme across both, and one under the other
+   * where the window is narrow. The two pickers' own wrappers step aside so their sections share that grid.
+   */
+  .nx-theme-switcher__body {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
+    align-items: start;
+    column-gap: var(--nx-space-6);
+  }
+
+  .nx-theme-switcher__body > .nx-theme-picker {
+    display: contents;
+  }
+
+  .nx-theme-picker__block {
+    align-content: start;
+    min-width: 0;
+    gap: var(--nx-space-3);
+  }
+
+  .nx-theme-picker__block--wide {
+    grid-column: 1 / -1;
+  }
+
+  /* A section's name, a line above it, a step stronger than the small headings under it. */
   .nx-theme-picker__section {
     margin: 0;
     padding-top: var(--nx-space-4);
@@ -152,6 +202,12 @@
     font-weight: 600;
   }
 
+  /* The first section starts at the top of its picker, with nothing above it to set it off from. */
+  .nx-theme-picker:first-child > .nx-theme-picker__block:first-child > .nx-theme-picker__section {
+    padding-top: 0;
+    border-top: 0;
+  }
+
   .nx-theme-picker__group {
     min-width: 0;
     margin: 0;

package/src/Styles/Nexus.Themes.css

@@ -1,194 +1,194 @@
-/*
- * 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.
+ * 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;
+    }
+  }
+}