nexus-shared 2.0.0 → 3.0.0

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

@@ -1,21 +1,94 @@
 @layer nexus.components {
   /* Popover panel: a native [popover] element, placed by the component that opens it. In dark mode it is a step
-     lighter than the surface it floats over, so it reads as raised. */
+     lighter than the surface it floats over, so it reads as raised.
+     (The shared panel lives in the theme picker's file because that is where it was first needed; it belongs to
+     every popover, not to the picker. Moving it would have to move its place in Nexus.Index.css with it.) */
   .nx-popover {
+    /* The arrow's base and depth. Keep in step with ARROW_BASE and ARROW_DEPTH in Helpers/PopoverHelpers.ts, which
+       work out the room the arrow needs, and with the two paths below, which are drawn for exactly these. */
+    --nx-popover-arrow: 26px;
+    --nx-popover-arrow-depth: 11px;
+    /* The panel's edge, shared with the arrow's own: a panel that changes it changes both. */
+    --nx-popover-edge: var(--nx-border);
+
     margin: 0;
+    /* The browser's own [popover] rule says `overflow: auto`, which would cut the arrow off at the panel's edge and
+       put a pair of scroll bars on a panel that fits. A panel that has to scroll scrolls a block inside itself. */
+    overflow: visible;
     padding: var(--nx-space-4);
-    border: 1px solid var(--nx-border);
+    border: 1px solid var(--nx-popover-edge);
     border-radius: var(--nx-radius-lg);
     background: light-dark(var(--nx-surface), var(--nx-surface-2));
     color: var(--nx-text);
     box-shadow: var(--nx-shadow);
   }
 
+  /*
+   * 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
+   * and nothing along the third cannot be one: `::before` is the whole tail in the panel's edge colour, `::after`
+   * the same tail a pixel smaller on both slopes and a pixel longer at the base, in the panel's own background. What
+   * is left of the first between them is the 1px line along the slopes; the second covers the panel's border across
+   * the base, so the tail opens into the panel with no seam and no line across its mouth. Both paths are drawn for
+   * the sizes above: change one and the other two have to be worked out again.
+   *
+   * `placeUnderAnchor` and `placeAtPoint` (Helpers/PopoverHelpers.ts) say which edge carries the tail and where
+   * along that edge its tip sits, and leave both out when it would point at nothing. Nothing here animates: the tail
+   * is drawn with the panel, so it is there in the first frame whether the opening animation runs or not.
+   */
+  .nx-popover[data-nx-arrow]::before,
+  .nx-popover[data-nx-arrow]::after {
+    content: "";
+    position: absolute;
+    /* The middle is only a fallback: the two are always written together, and taken away together. */
+    left: var(--nx-popover-arrow-x, 50%);
+    width: var(--nx-popover-arrow);
+    /* A pixel past the tail's depth: the panel's own border, which the fill covers. */
+    height: calc(var(--nx-popover-arrow-depth) + 1px);
+    margin-left: calc(var(--nx-popover-arrow) / -2);
+  }
+
+  /* The tail's outline: tip rounded by 2px, feet on the panel's border line. */
+  .nx-popover[data-nx-arrow]::before {
+    background: var(--nx-popover-edge);
+    clip-path: path("M 0 11 L 11.708 1.093 A 2 2 0 0 1 14.292 1.093 L 26 11 Z");
+  }
+
+  /* The fill: the same tail, 1px in from each slope (so the outline is left as a line) and 1px further down. */
+  .nx-popover[data-nx-arrow]::after {
+    background: inherit;
+    clip-path: path("M 0.367 12 L 12.354 1.857 A 1 1 0 0 1 13.646 1.857 L 25.633 12 Z");
+  }
+
+  /* Below its anchor: the tail stands on the panel's top edge, pointing up. */
+  .nx-popover[data-nx-arrow="below"]::before,
+  .nx-popover[data-nx-arrow="below"]::after {
+    top: calc(-1px - var(--nx-popover-arrow-depth));
+  }
+
+  /* Above its anchor: the same tail turned over, on the bottom edge. */
+  .nx-popover[data-nx-arrow="above"]::before,
+  .nx-popover[data-nx-arrow="above"]::after {
+    bottom: calc(-1px - var(--nx-popover-arrow-depth));
+    transform: scaleY(-1);
+  }
+
   .nx-theme-switcher__panel {
     position: fixed;
     inset: auto;
     width: min(340px, calc(100vw - 16px));
     max-height: calc(100vh - 80px);
+  }
+
+  /* A shut popover is hidden by the browser, so the panel takes its layout only while it is open. */
+  .nx-theme-switcher__panel:popover-open {
+    display: flex;
+  }
+
+  /* The picker scrolls, not the panel: a panel that scrolls its own box would cut its arrow off. */
+  .nx-theme-switcher__panel > .nx-theme-picker {
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
     overscroll-behavior: contain;
   }