nexus-shared 3.2.0 → 4.1.0

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

@@ -63,6 +63,7 @@
    */
   .nx-popover:has(> .nx-popover__scroll) {
     max-height: var(--nx-popover-room, calc(100vh - 16px));
+    max-height: var(--nx-popover-room, calc(100dvh - 16px));
     padding-right: 0;
   }
 

package/src/Styles/Nexus.Themes.css

@@ -6,7 +6,9 @@
  * 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.
+ * 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.
@@ -57,7 +59,11 @@
     --nx-info: light-dark(#0964d0, #4493f8);
   }
 
-  /* Nord: arctic, north-bluish calm. */
+  /*
+   * 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);
@@ -69,11 +75,11 @@
     --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-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, #8e5e63);
-    --nx-danger-text: light-dark(#eceff4, #eceff4);
+    --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);

package/src/Styles/Nexus.Tokens.css

@@ -68,13 +68,18 @@
   /*
    * Derived colors, declared wherever a theme applies, so an element with its own data-nx-theme
    * (a theme preview, for example) gets hover and soft colors from that theme.
-   * Mixing toward the text color darkens in light mode and lightens in dark mode.
+   *
+   * A solid fill under the pointer (--nx-primary-hover, --nx-danger-hover; a button pressed too) is the fill with 12%
+   * black mixed in, in every theme and in light and dark mode alike. The fill sits behind the white --nx-*-text label,
+   * so the darker step only raises the label's contrast: 6:1 or more, from 4.6:1 at rest. It is about the same step in
+   * every theme (an OKLab difference of 5.8 to 7.4, x100). Mixing toward the text color lightened the fill in dark
+   * mode, to 3.5:1. npm run check:themes reads these two lines and checks both.
    */
   :root,
   [data-nx-theme] {
-    --nx-primary-hover: color-mix(in oklab, var(--nx-primary-solid), var(--nx-text) 16%);
+    --nx-primary-hover: color-mix(in oklab, var(--nx-primary-solid), black 12%);
     --nx-primary-soft: color-mix(in oklab, var(--nx-primary) 14%, var(--nx-surface));
-    --nx-danger-hover: color-mix(in oklab, var(--nx-danger-solid), var(--nx-text) 16%);
+    --nx-danger-hover: color-mix(in oklab, var(--nx-danger-solid), black 12%);
     --nx-danger-soft: color-mix(in oklab, var(--nx-danger) 14%, var(--nx-surface));
     --nx-success-soft: color-mix(in oklab, var(--nx-success) 14%, var(--nx-surface));
     --nx-warning-soft: color-mix(in oklab, var(--nx-warning) 14%, var(--nx-surface));

package/src/Styles/Nexus.Tree.css

@@ -63,6 +63,16 @@
     font-size: var(--nx-text-sm);
   }
 
+  /* The filters' tabs (`filters`): the panel's first row, lined up with Select all under it, wrapping on a phone. */
+  .nx-tree__filters {
+    padding: 6px 6px 0 var(--nx-space-3);
+  }
+
+  .nx-tree__filters:not(:has(+ .nx-tree__toolbar)) {
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--nx-border);
+  }
+
   .nx-tree__all {
     flex: none;
   }
@@ -103,6 +113,18 @@
     margin-left: var(--nx-space-1);
   }
 
+  /* A tree that fills (`fill`): the height it is given, the toolbar on top and the rows scrolling under it. */
+  .nx-tree-field--fill {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nx-tree-field--fill > .nx-tree,
+  .nx-tree-field--fill .nx-tree__viewport {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
   /* Rows */
   .nx-tree__viewport {
     position: relative;
@@ -158,11 +180,29 @@
     box-shadow: inset 0 0 0 2px var(--nx-primary);
   }
 
-  .nx-tree__row[role="treeitem"]:is(:hover, :focus-visible) {
+  .nx-tree__row[role="treeitem"]:is(:hover, :focus-visible),
+  .nx-tree__row--selected {
     --nx-tree-muted: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
     --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 50%);
   }
 
+  /* The selected row (`selectedValue`): a single choice's tint, as a dropdown's chosen option has, and a heavier label.
+     It stays when focus moves on; under the pointer or with the keyboard's focus the tint deepens, and its muted texts
+     move further toward the text color (35% read 4.49:1 there in Catppuccin light). */
+  .nx-tree__row--selected {
+    background-color: color-mix(in oklab, var(--nx-primary) 10%, transparent);
+  }
+
+  .nx-tree__row--selected[role="treeitem"]:is(:hover, :focus-visible) {
+    --nx-tree-muted: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 50%);
+    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 65%);
+    background-color: color-mix(in oklab, var(--nx-primary) 17%, transparent);
+  }
+
+  .nx-tree__row--selected .nx-tree__label {
+    font-weight: 500;
+  }
+
   .nx-tree__toggle {
     display: grid;
     flex: none;