nexus-shared 3.2.0 → 4.0.0

package/src/Styles/Nexus.Print.css

@@ -0,0 +1,288 @@
+/*
+ * A printable document (PrintDocument.tsx): a receipt, a bill, a statement. On screen it reads in the theme's colours
+ * at the width of its paper; printed, it is the only thing on the paper, black on white - A5 (128 mm of text) or an
+ * 80 mm thermal roll (72 mm printed). The browser's own print, no PDF library. The paper itself is the component's
+ * own @page rule, written while it is on the page.
+ *
+ * And a whole page a server wrote, in a frame of its own (DocumentFrame.tsx): its sheet, desk and @page are its own.
+ */
+@layer nexus.components {
+  /* As wide as its paper, in any container (a flex column that would shrink it to its text included). */
+  .nx-print {
+    container: nx-print / inline-size;
+    width: 100%;
+    max-width: 128mm;
+    margin-inline: auto;
+    color: var(--nx-text);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+  .nx-print--thermal {
+    max-width: 72mm;
+    font-size: 0.75rem;
+  }
+
+  .nx-print p {
+    margin: 0;
+  }
+
+  .nx-print__head {
+    padding-block-end: var(--nx-space-2);
+    border-block-end: 1px dashed var(--nx-border);
+    text-align: center;
+  }
+
+  .nx-print__title {
+    font-size: 1.25em;
+    font-weight: 700;
+  }
+
+  /*
+   * A logo (`logo`). On A5 it sits beside the title lines in a 24 mm column, with one as wide after them so the lines
+   * stay centred on the paper; at most 16 mm tall, so the head is never taller than its lines and a one-page receipt
+   * stays one page. On an 80 mm roll it sits above them, small and centred.
+   */
+  .nx-print__head--logo {
+    display: grid;
+    grid-template-columns: 24mm minmax(0, 1fr) 24mm;
+    align-items: center;
+    column-gap: var(--nx-space-2);
+  }
+
+  .nx-print__logo,
+  .nx-print__heading {
+    min-width: 0;
+  }
+
+  .nx-print__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .nx-print__logo > :is(img, svg) {
+    display: block;
+    max-width: 100%;
+    max-height: 16mm;
+    object-fit: contain;
+  }
+
+  .nx-print--thermal .nx-print__head--logo {
+    display: block;
+  }
+
+  .nx-print--thermal .nx-print__logo {
+    margin-block-end: var(--nx-space-1);
+  }
+
+  /* An A5 document shown narrower than its paper (a phone): the logo above the lines, as on a roll. Printed, it is A5. */
+  @container nx-print (max-width: 100mm) {
+    .nx-print__head--logo {
+      display: block;
+    }
+
+    .nx-print__logo {
+      margin-block-end: var(--nx-space-1);
+    }
+  }
+
+  .nx-print--thermal .nx-print__logo > :is(img, svg) {
+    max-width: 36mm;
+    max-height: 10mm;
+  }
+
+  .nx-print__kind {
+    margin-block-start: var(--nx-space-1);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  /* A stamp across the document: Voided, Cancelled, Copy. */
+  .nx-print__stamp {
+    margin-block: var(--nx-space-2);
+    padding: var(--nx-space-1);
+    border: 1px solid currentColor;
+    font-weight: 700;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  /* Facts: a label and its value on each line, the labels in one column. */
+  .nx-print__facts {
+    display: grid;
+    gap: 2px;
+    margin: var(--nx-space-2) 0;
+  }
+
+  .nx-print__facts > div {
+    display: grid;
+    grid-template-columns: minmax(6.5em, 35%) 1fr;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-print__facts dt {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-print__facts dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* Lines: what was charged, the figures lined up at the end, the totals under a rule. */
+  .nx-print__lines {
+    width: 100%;
+    margin-block: var(--nx-space-2);
+    border-collapse: collapse;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-print__lines th,
+  .nx-print__lines td {
+    padding: 3px 0;
+    text-align: start;
+    vertical-align: top;
+  }
+
+  .nx-print__lines :is(th, td) + :is(th, td) {
+    padding-inline-start: var(--nx-space-2);
+  }
+
+  .nx-print__lines .nx-print__end {
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  .nx-print__lines thead th {
+    border-block-end: 1px solid var(--nx-border);
+    font-weight: 600;
+  }
+
+  .nx-print__lines tfoot :is(th, td) {
+    border-block-start: 1px solid var(--nx-border);
+    font-size: 1.1em;
+    font-weight: 700;
+  }
+
+  .nx-print__lines tfoot tr + tr :is(th, td) {
+    border-block-start: 0;
+  }
+
+  .nx-print__note {
+    display: block;
+    color: var(--nx-text-muted);
+    font-size: 0.9em;
+  }
+
+  .nx-print__foot {
+    padding-block-start: var(--nx-space-2);
+    border-block-start: 1px dashed var(--nx-border);
+    text-align: center;
+    white-space: pre-line;
+  }
+
+  /*
+   * Printed: only the document, lifted out of the page around it, black on white. Only while a document is on the
+   * page (`:has`), so printing any other page prints that page as it is.
+   */
+  @media print {
+    body:has(.nx-print) * {
+      visibility: hidden;
+    }
+
+    body:has(.nx-print) .nx-print,
+    body:has(.nx-print) .nx-print * {
+      visibility: visible;
+    }
+
+    body:has(.nx-print) .nx-print {
+      position: absolute;
+      inset: 0 auto auto 0;
+      width: 100%;
+      max-width: none;
+      color: #000;
+      background: #fff;
+    }
+
+    body:has(.nx-print) .nx-print--thermal {
+      width: 72mm;
+    }
+
+    .nx-print__facts dt,
+    .nx-print__note {
+      color: #000;
+    }
+
+    /* A logo prints in black and white, as the rest does: a thermal roll has no other colour. */
+    .nx-print__logo {
+      filter: grayscale(1);
+    }
+
+    .nx-print__head,
+    .nx-print__foot,
+    .nx-print__lines thead th,
+    .nx-print__lines tfoot :is(th, td) {
+      border-color: #000;
+    }
+  }
+
+  /*
+   * A server's page in a frame: a form's bar (its status line and the page's buttons) over the page, which fills the
+   * height the container gives and never less than 22rem, so a frame stacked under an editor is never a sliver. The
+   * frame scrolls inside itself; a sheet wider than the box scrolls sideways there, never the page.
+   */
+  .nx-document-frame {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    min-height: 22rem;
+  }
+
+  /* Its line says a few words ("Loading the preview…"), so two buttons stay beside it in a half-width frame. */
+  .nx-document-frame__bar {
+    --nx-form-status-basis: 10rem;
+
+    flex: none;
+  }
+
+  /* Lower than the panel, as a read-only box: the page's own desk covers it once a page is there. */
+  .nx-document-frame__view {
+    position: relative;
+    display: grid;
+    flex: 1 1 auto;
+    place-items: center;
+    min-height: 0;
+    overflow: hidden;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius);
+    background: light-dark(var(--nx-surface-2), var(--nx-bg));
+  }
+
+  .nx-document-frame__page {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    transition: opacity var(--nx-duration);
+  }
+
+  /* A read that lasts: the page shown stays, dimmed, under the bar's "Loading…". */
+  .nx-document-frame__view--busy .nx-document-frame__page {
+    opacity: 0.5;
+  }
+
+  [data-nx-motion="reduce"] .nx-document-frame__page {
+    transition: none;
+  }
+
+  .nx-document-frame__empty {
+    max-width: 32rem;
+    padding: var(--nx-space-4);
+  }
+}

package/src/Styles/Nexus.QrCode.css

@@ -0,0 +1,12 @@
+@layer nexus.components {
+  /*
+   * A QR code (`QrCodeImage`): the white square of its quiet zone with a control's rounded corners, 9rem wide unless the
+   * page's own class says otherwise. Its colours are the SVG's own fills, black on white in every theme, as a camera
+   * reads it; forced colours leave SVG fills alone (Chromium, measured by the template's qr-code.cjs).
+   */
+  .nx-qr {
+    display: block;
+    width: 9rem;
+    border-radius: var(--nx-radius);
+  }
+}

package/src/Styles/Nexus.Record.css

@@ -0,0 +1,430 @@
+@layer nexus.components {
+  /*
+   * A record's page of cards (`RecordCards`): the hero across the top, then the cards, as many to a row as have 26rem
+   * each (one on a phone), each as tall as what it holds. A card is a panel - the admin panel's edge, corner and surface -
+   * with its heading (an icon, the title and its count, a sentence, its buttons) over its body. Nothing inside a card is
+   * boxed: fields are label over value, items are rows between hairlines that reach the card's edges.
+   */
+  .nx-record {
+    display: grid;
+    gap: var(--nx-space-4);
+    min-width: 0;
+    container-type: inline-size;
+  }
+
+  .nx-record__cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
+    gap: var(--nx-space-4);
+    align-items: start;
+  }
+
+  .nx-record-card,
+  .nx-record-hero {
+    min-width: 0;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-surface);
+    /* A link to a card (`#emails`) leaves a little room above it. */
+    scroll-margin-block: var(--nx-space-4);
+  }
+
+  .nx-record-card--wide {
+    grid-column: 1 / -1;
+  }
+
+  .nx-record-card__head {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nx-space-3);
+    padding: var(--nx-space-4) var(--nx-space-4) 0;
+  }
+
+  /* The card's icon on a soft tint of the theme's colour: an icon, so 3:1 is its floor. */
+  .nx-record-card__icon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--nx-control-sm);
+    height: var(--nx-control-sm);
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-primary) 12%, var(--nx-surface));
+    color: var(--nx-primary);
+  }
+
+  .nx-record-card__text {
+    display: grid;
+    flex: 1 1 auto;
+    align-content: center;
+    min-width: 0;
+    /* The title's line is a button's height, so a heading with buttons and one without line up. */
+    min-height: var(--nx-control-sm);
+  }
+
+  /*
+   * The title and its sentence, then the buttons. The text keeps at least 12rem beside them; a narrow card (a phone, two
+   * buttons, a long label) puts the buttons on a line of their own under the text, at its start, never squeezing the
+   * title to a few words a line.
+   */
+  .nx-record-card__main {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--nx-space-2) var(--nx-space-3);
+    min-width: 0;
+  }
+
+  .nx-record-card__main > .nx-record-card__text {
+    flex: 1 1 12rem;
+  }
+
+  /* A title alone needs less: its buttons stay beside it down to 8rem. */
+  .nx-record-card__main > .nx-record-card__text:not(:has(> .nx-record-card__lead)) {
+    flex-basis: 8rem;
+  }
+
+  .nx-record-card__main > .nx-record-card__actions {
+    justify-content: flex-start;
+  }
+
+  .nx-record-card__title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 var(--nx-space-2);
+    margin: 0;
+    font-size: var(--nx-text-lg);
+    font-weight: 600;
+    line-height: var(--nx-control-sm);
+    overflow-wrap: anywhere;
+  }
+
+  /* Focused from code only (the focus coming home after a popup), never by Tab: no ring of its own. */
+  .nx-record-card__title:focus {
+    outline: none;
+  }
+
+  /* Its own line height, so the title's line is the same with a count and without one (while the list is read). */
+  .nx-record-card__count {
+    color: var(--nx-text-muted);
+    line-height: 1;
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-record-card__lead {
+    margin: 0 0 var(--nx-space-1);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+  }
+
+  .nx-record-card__actions {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-record-card__body {
+    min-width: 0;
+    padding: var(--nx-space-3) var(--nx-space-4) var(--nx-space-4);
+  }
+
+  .nx-record-card__empty {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-record-card__message {
+    margin: 0 0 var(--nx-space-3);
+    font-size: var(--nx-text-md);
+  }
+
+  /* A list reaches the card's edges, its last row as close to the foot as the heading is to the first. */
+  .nx-record-card--items > .nx-record-card__body {
+    padding: var(--nx-space-2) 0 var(--nx-space-1);
+  }
+
+  .nx-record-card--items > .nx-record-card__body > :is(.nx-record-card__empty, .nx-record__failed) {
+    margin: var(--nx-space-1) var(--nx-space-4) var(--nx-space-3);
+  }
+
+  /* A card of the page's own stacks what it is given at the cards' own gap, a paragraph's margins dropped. */
+  .nx-record-card--content > .nx-record-card__body {
+    display: grid;
+    gap: var(--nx-space-3);
+    align-content: start;
+  }
+
+  .nx-record-card--content > .nx-record-card__body > * {
+    margin-block: 0;
+  }
+
+  /* While a source loads: the table's bone, on the line it holds (the table draws it as a block, so two classes). */
+  .nx-table__bone.nx-record__bone {
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: baseline;
+  }
+
+  /* A mark held while it is read: a tag's size, the bone's tint. */
+  .nx-record__bone-tag {
+    width: 7rem;
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+  }
+
+  .nx-record__held {
+    display: grid;
+  }
+
+  /* A held line is a line box of the text it stands for (its font and line height), its bone on the baseline. */
+  .nx-record__held-line,
+  .nx-record-item__text > .nx-record__held-line {
+    display: block;
+  }
+
+  /* The hero */
+
+  .nx-record-hero {
+    --nx-record-hero-picture: 5.5rem;
+
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-4);
+    padding: var(--nx-space-4) var(--nx-space-5);
+  }
+
+  .nx-record-hero__picture {
+    display: flex;
+    flex: none;
+  }
+
+  .nx-record-hero__text {
+    display: grid;
+    flex: 1 1 auto;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .nx-record-hero__title {
+    margin: 0;
+    font-size: var(--nx-text-xl);
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-hero__line {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-hero__marks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: var(--nx-space-1);
+  }
+
+  .nx-record-hero > .nx-record-card__actions {
+    align-self: flex-start;
+  }
+
+  /* Fields: label over value, as many to a row as have 11rem; long text and chips across. */
+
+  .nx-record-fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+    gap: var(--nx-space-3) var(--nx-space-4);
+    margin: 0;
+  }
+
+  .nx-record-field {
+    min-width: 0;
+  }
+
+  .nx-record-field--wide {
+    grid-column: 1 / -1;
+  }
+
+  .nx-record-field__label {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  /* One line's height while it loads too, so nothing moves when the values come. */
+  .nx-record-field__value {
+    min-height: 1.45em;
+    margin: 0;
+    font-size: var(--nx-text-md);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-field__empty {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-record-field__lines {
+    white-space: pre-line;
+  }
+
+  .nx-record-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin: 2px 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Items: rows between hairlines, a picture or an icon, the name and its marks, lines, and icon buttons on the right. */
+
+  .nx-record-items {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-record-item {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-3);
+    min-width: 0;
+    padding: var(--nx-space-2) var(--nx-space-4);
+  }
+
+  .nx-record-item + .nx-record-item {
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-record-item__media {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--nx-control-md);
+    height: var(--nx-control-md);
+    overflow: hidden;
+    border-radius: 50%;
+  }
+
+  .nx-record-item__media--icon {
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-text) 6%, var(--nx-surface));
+    color: var(--nx-text-muted);
+  }
+
+  .nx-record-item__media--held {
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+  }
+
+  .nx-record-item__text {
+    display: grid;
+    flex: 1 1 auto;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  /* At least a mark's height, so a row is as tall with marks as without, and as its held row. */
+  .nx-record-item__title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px var(--nx-space-2);
+    min-height: calc(var(--nx-text-xs) * 1.6 + 2px);
+    margin: 0;
+    font-size: var(--nx-text-md);
+    font-weight: 500;
+    line-height: 1.45;
+  }
+
+  .nx-record-item__name {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-item__marks {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .nx-record-item__line {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-item__actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 2px;
+  }
+
+  /* A popup's step: its sentence over the form, and the button that stays on it under. */
+
+  .nx-record-step {
+    display: grid;
+    gap: var(--nx-space-3);
+  }
+
+  .nx-record-step__lead {
+    font-size: var(--nx-text-md);
+    line-height: 1.5;
+  }
+
+  .nx-record-step__lead > p {
+    margin: 0;
+  }
+
+  .nx-record-step__also {
+    margin: 0;
+  }
+
+  /* A narrow page (a phone, a popup): the hero's picture smaller, its padding the cards'. */
+  @container (max-width: 34rem) {
+    .nx-record-hero {
+      --nx-record-hero-picture: 4rem;
+
+      gap: var(--nx-space-3);
+      padding: var(--nx-space-4);
+    }
+
+    .nx-record-hero__title {
+      font-size: var(--nx-text-lg);
+    }
+
+    .nx-record-card__head {
+      padding: var(--nx-space-3) var(--nx-space-3) 0;
+    }
+
+    .nx-record-card__body {
+      padding: var(--nx-space-3);
+    }
+
+    .nx-record-item {
+      gap: var(--nx-space-2);
+      padding-inline: var(--nx-space-3);
+    }
+
+    .nx-record-item__media {
+      width: var(--nx-control-sm);
+      height: var(--nx-control-sm);
+    }
+  }
+}