nexus-shared 1.1.21 → 3.0.0

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

@@ -0,0 +1,232 @@
+@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;
+  }
+}

package/src/Styles/Nexus.Themes.css

@@ -0,0 +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;
+    }
+  }
+}

package/src/Styles/Nexus.Time.css

@@ -0,0 +1,147 @@
+@layer nexus.components {
+  /*
+   * Time picker: the box lines digits up, and its panel opens in a popover placed by the component. The panel shows
+   * columns of hours, minutes, seconds, and AM/PM whose chosen items scroll to the middle row, so the chosen time reads
+   * as one line with its neighbours above and below; or a single list of slots. Chosen items are solid primary, like
+   * the calendar's chosen day.
+   */
+  .nx-field__control--time {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-field__action--clock[aria-expanded="true"] {
+    color: var(--nx-field-accent);
+  }
+
+  .nx-time-popover {
+    position: fixed;
+    inset: auto;
+    padding: 0;
+  }
+
+  .nx-time {
+    --nx-time-item: 32px;
+    --nx-time-rows: 7;
+    --nx-time-bg: light-dark(var(--nx-surface), var(--nx-surface-2));
+    --nx-time-scrollbar: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent);
+
+    display: grid;
+    color: var(--nx-text);
+    font-size: var(--nx-text-sm);
+    line-height: 1.3;
+    user-select: none;
+  }
+
+  .nx-time__columns {
+    display: flex;
+    padding: var(--nx-space-1);
+  }
+
+  /* A column scrolls; the space before its first item and after its last lets both reach the middle row. */
+  .nx-time__column {
+    position: relative;
+    width: 56px;
+    height: calc(var(--nx-time-item) * var(--nx-time-rows));
+    padding: calc(var(--nx-time-item) * (var(--nx-time-rows) - 1) / 2) var(--nx-space-1);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color var(--nx-duration);
+  }
+
+  .nx-time__column--meridiem {
+    width: auto;
+    min-width: 56px;
+  }
+
+  .nx-time__column:is(:hover, :focus-within) {
+    scrollbar-color: var(--nx-time-scrollbar) transparent;
+  }
+
+  .nx-time__column + .nx-time__column {
+    border-left: 1px solid var(--nx-border);
+  }
+
+  .nx-time__item {
+    display: grid;
+    place-items: center;
+    height: var(--nx-time-item);
+    padding: 0 var(--nx-space-2);
+    border-radius: var(--nx-radius);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-time__item:hover:not([aria-disabled="true"], [aria-selected="true"]) {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-time__item[aria-selected="true"] {
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+    font-weight: 600;
+  }
+
+  /* An inset ring, so the column does not clip it, with a band of the panel's color that shows on a chosen item. */
+  .nx-time__item:focus-visible {
+    box-shadow:
+      inset 0 0 0 2px var(--nx-primary),
+      inset 0 0 0 4px var(--nx-time-bg);
+  }
+
+  .nx-time__item[aria-disabled="true"] {
+    color: var(--nx-text-subtle);
+    opacity: 0.45;
+    cursor: default;
+  }
+
+  .nx-time__item[aria-disabled="true"][aria-selected="true"] {
+    color: var(--nx-primary-text);
+    opacity: 0.7;
+  }
+
+  .nx-time__foot {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--nx-space-2);
+    padding: 6px var(--nx-space-2);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* List of slots */
+  .nx-time__list {
+    position: relative;
+    min-width: 132px;
+    max-height: calc(var(--nx-time-item) * 8 + var(--nx-space-2));
+    padding: var(--nx-space-1);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--nx-time-scrollbar) transparent;
+  }
+
+  .nx-time__slot {
+    place-items: center start;
+    padding: 0 var(--nx-space-3);
+  }
+
+  .nx-time__empty {
+    padding: var(--nx-space-2) var(--nx-space-3);
+    color: var(--nx-text-muted);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-time__item,
+    .nx-time__column {
+      transition: none;
+    }
+  }
+}