nexus-shared 3.0.0 → 3.1.0

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

@@ -1,232 +1,286 @@
-@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.
-     (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-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;
-  }
-
-  .nx-theme-picker {
-    display: grid;
-    gap: var(--nx-space-4);
-  }
-
-  .nx-theme-picker__group {
-    min-width: 0;
-    margin: 0;
-    padding: 0;
-    border: 0;
-  }
-
-  .nx-theme-picker__legend {
-    margin: 0 0 var(--nx-space-2);
-    padding: 0;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-  }
-
-  /* Theme cards */
-  .nx-theme-picker__grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-    gap: var(--nx-space-2);
-  }
-
-  .nx-theme-option {
-    display: grid;
-    gap: 6px;
-    padding: 5px;
-    border: 1px solid var(--nx-border);
-    border-radius: var(--nx-radius);
-    background: var(--nx-surface);
-    color: var(--nx-text);
-    cursor: pointer;
-    transition:
-      border-color var(--nx-duration),
-      box-shadow var(--nx-duration);
-  }
-
-  .nx-theme-option:hover {
-    border-color: var(--nx-border-strong);
-  }
-
-  .nx-theme-option:has(:checked) {
-    border-color: var(--nx-primary);
-    box-shadow: 0 0 0 1px var(--nx-primary);
-  }
-
-  .nx-theme-option:has(:focus-visible) {
-    box-shadow: 0 0 0 1px var(--nx-primary), var(--nx-focus-ring);
-  }
-
-  /* Drawn with the previewed theme's tokens, because the element carries its data-nx-theme. */
-  .nx-theme-option__preview {
-    display: block;
-    padding: 7px;
-    border-radius: var(--nx-radius-sm);
-    background: var(--nx-bg);
-  }
-
-  .nx-theme-option__window {
-    display: grid;
-    gap: 5px;
-    padding: 7px;
-    border: 1px solid var(--nx-border);
-    border-radius: var(--nx-radius-sm);
-    background: var(--nx-surface);
-  }
-
-  .nx-theme-option__line {
-    width: 78%;
-    height: 5px;
-    border-radius: 3px;
-    background: var(--nx-text);
-  }
-
-  .nx-theme-option__line--muted {
-    width: 52%;
-    background: var(--nx-text-muted);
-  }
-
-  .nx-theme-option__swatches {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-top: 2px;
-  }
-
-  .nx-theme-option__pill {
-    width: 26px;
-    height: 10px;
-    margin-right: auto;
-    border-radius: var(--nx-radius-full);
-    background: var(--nx-primary);
-  }
-
-  .nx-theme-option__dot {
-    width: 9px;
-    height: 9px;
-    border-radius: 50%;
-  }
-
-  .nx-theme-option__dot--success {
-    background: var(--nx-success);
-  }
-
-  .nx-theme-option__dot--warning {
-    background: var(--nx-warning);
-  }
-
-  .nx-theme-option__dot--danger {
-    background: var(--nx-danger);
-  }
-
-  .nx-theme-option__name {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 4px;
-    padding: 0 3px 1px;
-    font-size: var(--nx-text-sm);
-    font-weight: 500;
-  }
-
-  .nx-theme-option__check {
-    color: var(--nx-primary);
-    visibility: hidden;
-  }
-
-  .nx-theme-option:has(:checked) .nx-theme-option__check {
-    visibility: visible;
-  }
-}
+@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.
+     (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;
+    /* The room inside the edge: a panel sets `--nx-popover-pad` (a menu 4px, the table's panels 8px), never `padding`,
+       which this rule, loaded after theirs, would win over; its scroller (below) carries the right-hand part. */
+    padding: var(--nx-popover-pad, var(--nx-space-4));
+    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);
+    /*
+     * Every panel fades in as it opens and out as it closes, briefly, and nothing waits for it: a closing panel keeps
+     * its layout (`display`) and its place on top (`overlay`) only while it fades, and takes no clicks meanwhile.
+     * With animations off it simply comes and goes.
+     */
+    transition:
+      opacity 120ms ease-out,
+      display 120ms allow-discrete,
+      overlay 120ms allow-discrete;
+  }
+
+  .nx-popover:not(:popover-open) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @starting-style {
+    .nx-popover:popover-open {
+      opacity: 0;
+    }
+  }
+
+  [data-nx-motion="reduce"] .nx-popover {
+    transition: none;
+  }
+
+  /*
+   * A panel whose content can be longer than the window marks the part that scrolls with `.nx-popover__scroll`, a
+   * child of the panel. The panel is then never taller than the room it was placed in (`--nx-popover-room`, written
+   * by the placing helpers: the room on the side of its button it opened on), and the scroller takes what is left.
+   * 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.
+   */
+  .nx-popover:has(> .nx-popover__scroll) {
+    max-height: var(--nx-popover-room, calc(100vh - 16px));
+    padding-right: 0;
+  }
+
+  /* A shut popover is hidden by the browser, so the panel takes its layout only while it is open. */
+  .nx-popover:has(> .nx-popover__scroll):popover-open {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nx-popover:has(> .nx-popover__scroll) > :not(.nx-popover__scroll) {
+    margin-right: var(--nx-popover-pad, var(--nx-space-4));
+  }
+
+  .nx-popover__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding-right: var(--nx-popover-pad, var(--nx-space-4));
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+    border-radius: 0 calc(var(--nx-radius-lg) - 1px) calc(var(--nx-radius-lg) - 1px) 0;
+  }
+
+  /*
+   * 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));
+  }
+
+  .nx-theme-picker,
+  .nx-theme-switcher__body {
+    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. */
+  .nx-theme-picker__section {
+    margin: 0;
+    padding-top: var(--nx-space-4);
+    border-top: 1px solid var(--nx-border);
+    color: var(--nx-text);
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+  }
+
+  .nx-theme-picker__group {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .nx-theme-picker__legend {
+    margin: 0 0 var(--nx-space-2);
+    padding: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  /* Theme cards */
+  .nx-theme-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+    gap: var(--nx-space-2);
+  }
+
+  .nx-theme-option {
+    display: grid;
+    gap: 6px;
+    padding: 5px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    cursor: pointer;
+    transition:
+      border-color var(--nx-duration),
+      box-shadow var(--nx-duration);
+  }
+
+  .nx-theme-option:hover {
+    border-color: var(--nx-border-strong);
+  }
+
+  .nx-theme-option:has(:checked) {
+    border-color: var(--nx-primary);
+    box-shadow: 0 0 0 1px var(--nx-primary);
+  }
+
+  .nx-theme-option:has(:focus-visible) {
+    box-shadow: 0 0 0 1px var(--nx-primary), var(--nx-focus-ring);
+  }
+
+  /* Drawn with the previewed theme's tokens, because the element carries its data-nx-theme. */
+  .nx-theme-option__preview {
+    display: block;
+    padding: 7px;
+    border-radius: var(--nx-radius-sm);
+    background: var(--nx-bg);
+  }
+
+  .nx-theme-option__window {
+    display: grid;
+    gap: 5px;
+    padding: 7px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-sm);
+    background: var(--nx-surface);
+  }
+
+  .nx-theme-option__line {
+    width: 78%;
+    height: 5px;
+    border-radius: 3px;
+    background: var(--nx-text);
+  }
+
+  .nx-theme-option__line--muted {
+    width: 52%;
+    background: var(--nx-text-muted);
+  }
+
+  .nx-theme-option__swatches {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 2px;
+  }
+
+  .nx-theme-option__pill {
+    width: 26px;
+    height: 10px;
+    margin-right: auto;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-primary);
+  }
+
+  .nx-theme-option__dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+  }
+
+  .nx-theme-option__dot--success {
+    background: var(--nx-success);
+  }
+
+  .nx-theme-option__dot--warning {
+    background: var(--nx-warning);
+  }
+
+  .nx-theme-option__dot--danger {
+    background: var(--nx-danger);
+  }
+
+  .nx-theme-option__name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+    padding: 0 3px 1px;
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+  }
+
+  .nx-theme-option__check {
+    color: var(--nx-primary);
+    visibility: hidden;
+  }
+
+  .nx-theme-option:has(:checked) .nx-theme-option__check {
+    visibility: visible;
+  }
+}