@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/styles/GenericDetail.module.scss

@@ -8,6 +8,14 @@
 .btn {
     @include button-primary;
 }
+
+/* The secondary half of the pair. A detail page's action bar is one primary
+   action and, when editing, one way back out of it — the way out was painted
+   in error red, the loudest colour in the palette, sitting next to the Save it
+   competes with. */
+.btnSecondary {
+    @include button-secondary;
+}
 .grid {
     width: 100%;
     display: flex;
@@ -86,6 +94,29 @@
     gap: 0.5rem;
 }
 
+/* `page.tabLayout: "underline"` — tabs above the panel rather than beside it.
+   See the note on `tabsUnderlined` in GenericDetail.jsx for when a page wants
+   this. The row becomes a column and both children take the full width; the
+   rail gives up its card, because an underline strip is not a panel. */
+.grid__subrow--stacked {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 0;
+}
+
+.grid__subnav--underline {
+    flex: 0 0 auto;
+    width: 100%;
+    padding: 0;
+    margin: 8px 0 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+    /* The one hairline under the whole strip, which the selected tab's accent
+       edge sits on top of. The strip's own items draw no border. */
+    border-bottom: 1px solid var(--border-color, #e1e1e1);
+}
+
 /* The tab rail. Identical spec to `.grid__subnav` in GenericIndex.module.scss
    — the two pages share one rail, so keep them in step.
 
@@ -224,7 +255,14 @@
 
 .gridtxt__header {
     width: 100%;
-    display: block;
+    /* Flex so an optional right-hand meta line (`section.meta`) can sit on the
+       heading's baseline at the far edge — the card-header shape used across
+       the dashboards: title left, quiet facts right. */
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--spacing-md, 1rem);
+    flex-wrap: wrap;
     background: none;
     box-sizing: border-box;
     /* Was a centred, tinted bar. A section heading is read at the start of
@@ -239,16 +277,36 @@
     border-bottom: 1px solid var(--border-color, #e1e1e1);
     border-radius: 0;
     margin-bottom: var(--spacing-md, 1rem);
-    font-size: var(--font-size-sm, 0.8rem);
+    /* Promoted from a 0.8rem uppercase eyebrow to a plain 0.9rem heading in
+       the page's ink. The eyebrow treatment now belongs to the field labels
+       inside the card (`.overviewLabel`), and two levels of hierarchy cannot
+       both be small-caps-muted-0.8rem without collapsing into one. */
+    font-size: var(--font-size-md, 0.9rem);
     font-weight: var(--font-weight-semibold, 600);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
+    letter-spacing: 0;
+    text-transform: none;
     text-align: left;
-    color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.6));
+    color: var(--heading-color, var(--paragraph-color, #221e33));
 }
 
-.gridtxt__header span {
-    font-weight: 700;
+.gridtxt__header > span:first-child {
+    font-weight: var(--font-weight-semibold, 600);
+    min-width: 0;
+}
+
+/* The quiet facts on the right of a card header — a count, a last-updated
+   stamp. Deliberately weaker than the heading it shares a line with: it
+   describes the card, it does not name it. */
+.gridtxt__meta {
+    display: inline-flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 0 var(--spacing-md, 1rem);
+    font-size: var(--font-size-sm, 0.8rem);
+    font-weight: var(--font-weight-regular, 400);
+    letter-spacing: 0;
+    text-transform: none;
+    color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.6));
 }
 
 /* Optional one-line subtitle under a section heading (GenericDetail renders it
@@ -321,31 +379,97 @@
     }
 }
 
-.customer__overview {
+/* The overview field list.
+
+   Every field used to be its own bordered, tinted box, so a summary of six
+   facts arrived as six competing containers and the card around them counted
+   for nothing. The card is the container; the fields inside it are label/value
+   pairs on the card's own surface, laid on a two-column grid so the second
+   column's labels line up with the first's instead of drifting with whatever
+   the row above happened to be tall enough to need.
+
+   Selectors are `.gridtxt > ul.customer__overview` rather than
+   `.customer__overview`, because `.gridtxt > ul li` above is more specific
+   than a single class and would otherwise keep the hairline box. */
+.gridtxt > ul.customer__overview {
     width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(
+        var(--detail-overview-columns, 2),
+        minmax(0, 1fr)
+    );
+    gap: var(--spacing-md, 1rem) var(--spacing-xl, 1.75rem);
     list-style: none;
     box-sizing: border-box;
-    padding: 1em;
+    padding: 0.35rem 0 0.85rem;
     margin: 0;
 
     li {
-        width: 49%;
-        padding: 1em;
+        width: auto;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.15rem;
+        padding: 0;
+        margin: 0;
         box-sizing: border-box;
-        border: 1px solid rgba(var(--primary-rgb), 0.15);
+        border: none;
+        border-radius: 0;
+        background: none;
         color: var(--paragraph-color);
-        background: rgba(#f4f4f4, 0.65);
-        margin: 5px;
-        border-radius: 5px;
+        font-size: 0.85rem;
+        line-height: 1.45;
 
         p {
             font-size: 0.85rem;
         }
     }
+
+    /* `size: "full"` fields — a description, a note — run the width of the
+       card rather than being squeezed into one column. */
+    .fw-grid-item {
+        grid-column: 1 / -1;
+    }
+}
+
+@media (max-width: 759px) {
+    .gridtxt > ul.customer__overview {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+/* The label above a value. The eyebrow treatment the section heading used to
+   wear: small, muted, letter-spaced — enough to read as a label and not enough
+   to compete with the value under it. */
+.overviewLabel {
+    display: block;
+    font-size: var(--font-size-xs, 0.72rem);
+    font-weight: var(--font-weight-semibold, 600);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    line-height: 1.3;
+    color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.6));
+}
+
+.overviewValue {
+    display: block;
+    min-width: 0;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: var(--paragraph-color, #221e33);
+    /* A long unbroken value (a URL, a reference) must not push the grid
+       column wider than its share. */
+    overflow-wrap: anywhere;
+
+    a {
+        color: var(--primary-color);
+    }
+}
+
+/* "Not set", said out loud. A label followed by nothing reads as a page that
+   failed to load rather than as a field nobody has filled in. */
+.overviewEmpty {
+    color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.45));
 }
 
 .progress {
@@ -577,18 +701,21 @@
     }
 }
 
+/* The floating action bar. It stays pinned bottom-right — every detail page
+   in every project is laid out around it — but its buttons are the shared
+   controls now: `display: block; float: left` overrode the button mixin's own
+   inline-flex centring, which is why an icon and its label sat off-centre, and
+   the 0.35em padding undercut the shared control height so these buttons were
+   visibly shorter than every other button in the app. */
 .polActions {
     position: fixed;
     bottom: 15px;
     right: 20px;
     width: auto;
-}
-
-.polActions button {
-    display: block;
-    float: left;
-    padding: 0.35em 1em;
-    margin: 0 0.15em;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm, 0.5rem);
+    z-index: 20;
 }
 
 .oppoverview {

package/src/components/styles/GenericIndex.module.scss

@@ -112,6 +112,12 @@
     flex-wrap: wrap;
     height: auto;
     gap: 0.5rem;
+    /* Not `stretch`. The grid card is the one that decides how tall this row
+       is — it has measured itself against the window. A tab rail with more
+       entries than that is taller than the window allows, and stretching the
+       grid card to match it pushes the pager below the fold. The rail scrolls
+       inside itself instead (below). */
+    align-items: flex-start;
 }
 
 /* The tab rail. Identical spec to `.grid__subnav` in GenericDetail.module.scss
@@ -126,6 +132,13 @@
     padding: var(--spacing-xs, 0.25rem);
     margin: 8px 0;
     height: auto;
+    /* A long rail scrolls itself rather than the page. The offset is the app
+       chrome stacked above it; a consuming project with a different shell can
+       retune it with `--index-subnav-offset`. It only decides where the rail
+       starts scrolling, so it does not have to be exact. */
+    max-height: calc(100vh - var(--index-subnav-offset, 200px));
+    overflow-y: auto;
+    overscroll-behavior: contain;
     box-shadow: none;
 }
 

package/src/components/styles/GenericMain.module.scss

@@ -64,8 +64,19 @@
        — the density hook for the bar's own height — belongs here rather than
        in Navigation.module.scss, where the rest of the set is documented. */
     padding: var(--nav-bar-padding, var(--spacing-sm) var(--spacing-md));
-    /* Separates the bar from the page when content scrolls under it. */
-    box-shadow: var(--shadow-sm);
+    /* Where the bar stops. Without it the navy ran straight into the page's
+       off-white with nothing to mark the edge, which is most of why the bar
+       read as flat. */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    /* Separates the bar from the page when content scrolls under it.
+       `var(--shadow-sm)` carried no fallback, so in a project that does not
+       declare that token the declaration was invalid and thrown away — there
+       was no shadow at all. */
+    box-shadow: var(
+        --shadow-sm,
+        0 1px 2px rgba(0, 0, 0, 0.12),
+        0 6px 16px rgba(0, 0, 0, 0.06)
+    );
 }
 
 .headerAlternate {
@@ -76,6 +87,12 @@
     width: 100%;
     z-index: 995;
     padding: var(--nav-bar-padding, 0.35rem 1rem);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: var(
+        --shadow-sm,
+        0 1px 2px rgba(0, 0, 0, 0.06),
+        0 6px 16px rgba(0, 0, 0, 0.04)
+    );
 }
 
 .content {

package/src/components/styles/ImpersonateGate.module.scss

@@ -0,0 +1,85 @@
+/**
+ * Impersonation hand-off.
+ *
+ * Ported from the Next.js portal's styles/impersonate.css. Two states, one
+ * card: the spinner while the token is being validated, and the error card if
+ * it is not accepted. Colours come from the consuming app's token layer with
+ * the portal's own values as fallbacks, so it looks the same there and
+ * sensible everywhere else.
+ */
+
+.loading,
+.error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: var(--background-color, #f8f9fa);
+}
+
+.card {
+    width: 100%;
+    max-width: 500px;
+    padding: 2rem;
+    border-radius: 10px;
+    background-color: var(--surface-color, #fff);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.title {
+    margin: 0 0 1.5rem;
+    color: var(--primary-color, #0276ba);
+    font-size: clamp(1.5rem, 2.5vw, 2rem);
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.message {
+    margin: 0 0 1.5rem;
+    color: var(--paragraph-color, #58585a);
+    line-height: 1.5;
+    /* An error message can arrive from the server as one long unbroken token
+       (a JWT complaint, a URL); it must not push the card wider than the
+       viewport. */
+    overflow-wrap: anywhere;
+}
+
+.spinner {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    border: 5px solid rgba(2, 118, 186, 0.2);
+    border-top-color: var(--primary-color, #0276ba);
+    border-radius: 50%;
+    animation: impersonate-spin 1s ease-in-out infinite;
+}
+
+.button {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 10px;
+    background-color: var(--primary-color, #0276ba);
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &:hover {
+        background-color: var(--primary-color-darker, #025d94);
+    }
+}
+
+@keyframes impersonate-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .spinner {
+        animation-duration: 3s;
+    }
+}

package/src/components/styles/Login.module.scss

@@ -11,6 +11,8 @@
  * @fontsource, so there is no webfont request to fail.
  */
 
+@use './authBrandPanel' as brand;
+
 .auth {
     /* Local aliases only — every brand value comes from the consuming app's
        token layer so this library stays reusable. The fallbacks are neutral
@@ -32,7 +34,11 @@
     // photograph the larger share makes it the subject and the form the task.
     grid-template-columns: 52fr 48fr;
     background: var(--paper);
-    font-family: 'Barlow', system-ui, sans-serif;
+    // Read from a token first, so an app can put its own face on the whole
+    // auth journey without forking this file. 'Barlow' itself is imported by
+    // the screens (see auth/authFont.js) — declaring it here without loading
+    // it anywhere was why this screen quietly fell back to system-ui.
+    font-family: var(--auth-font-family, 'Barlow', system-ui, sans-serif);
     color: var(--ink);
 
     @media (max-width: 900px) {
@@ -42,115 +48,10 @@
 
 /* --- Brand panel --------------------------------------------------------- */
 
-.brand {
-    position: relative;
-    background-color: var(--navy-deep);
-    background-size: cover;
-    background-position: center 62%;
-    overflow: hidden;
-
-    // A scrim anchored to the bottom-left, where the copy sits — not a flat
-    // wash over the whole image, which would dull the dusk light that makes
-    // the photograph worth using.
-    //
-    // The foot is a near-solid plate rather than a fade. The brand line has to
-    // hold against whatever the photograph is doing behind it, and this one is
-    // bright exactly where the type sits, which left the brand line washing
-    // into the photograph. Held high — 0.88 still at 18%, which is where the ink
-    // block ends — so the whole block reads on one ground, then released
-    // quickly to 0.06 at the top, so the sky above is still a photograph and
-    // not a tint.
-    //
-    // Shared verbatim with the supervisor PWA
-    // (prime-web-nextjs/app/login/Login.module.scss). If one moves, move both.
-    &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background:
-            linear-gradient(
-                to top,
-                rgba(16, 25, 42, 0.94) 0%,
-                rgba(16, 25, 42, 0.88) 18%,
-                rgba(16, 25, 42, 0.62) 42%,
-                rgba(16, 25, 42, 0.22) 70%,
-                rgba(16, 25, 42, 0.06) 100%
-            ),
-            linear-gradient(
-                to right,
-                rgba(16, 25, 42, 0.5) 0%,
-                rgba(16, 25, 42, 0) 55%
-            );
-    }
-
-    @media (max-width: 900px) {
-        display: none;
-    }
-}
-
-.brandInk {
-    position: absolute;
-    left: clamp(2rem, 4vw, 3.5rem);
-    right: clamp(2rem, 4vw, 3.5rem);
-    bottom: clamp(2rem, 5vh, 3.5rem);
-    z-index: 1;
-    color: #fff;
-    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
-}
-
-.eyebrow {
-    margin: 0 0 0.75rem;
-    font-size: 0.72rem;
-    font-weight: 700;
-    letter-spacing: 0.22em;
-    // Stated, not left to the cascade: global.css sets
-    // `p { line-height: var(--para-height) }`, which is 1.6 here. That put the
-    // kicker on a taller line than the same kicker in the PWA, so the red dash
-    // sat at a different height and the gap beneath it read as wider.
-    line-height: 1.4;
-    text-transform: uppercase;
-    color: rgba(255, 255, 255, 0.75);
-    // The single use of the logo's red in the whole screen.
-    padding-left: 2.1rem;
-    position: relative;
-
-    &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 50%;
-        width: 1.5rem;
-        height: 2px;
-        background: var(--flag);
-    }
-}
-
-.brandLine {
-    margin: 0 0 0.6rem;
-    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
-    font-weight: 700;
-    line-height: 1;
-    // Tight tracking at display size — Barlow opens up as it scales.
-    letter-spacing: -0.02em;
-    // Stated rather than inherited from .brandInk: this is the one line on the
-    // screen that has to be white, and finding that out should not mean
-    // reading the parent.
-    color: #fff;
-    text-wrap: balance;
-}
-
-.brandSub {
-    margin: 0;
-    max-width: 34ch;
-    font-size: 1rem;
-    font-weight: 300;
-    line-height: 1.5;
-    // No-op against this app's globals, but the PWA's own `p` rule tracks body
-    // copy at 0.015rem, so the value is pinned in both files rather than left
-    // to whichever global layer the screen happens to be rendered under.
-    letter-spacing: 0;
-    color: rgba(255, 255, 255, 0.82);
-}
+// Shared with AuthShell and the client portal's split layout — see
+// _authBrandPanel.scss. It was copied into each of them before 6.8.3, which is
+// the arrangement where one copy quietly stops matching the others.
+@include brand.auth-brand-panel(hide);
 
 /* --- Form panel ---------------------------------------------------------- */
 
@@ -493,18 +394,8 @@
     color: var(--muted);
 }
 
-/* One entrance, staggered between the two panels. Anything more would be
-   decoration on a screen people pass through several times a day. */
-@keyframes rise {
-    from {
-        opacity: 0;
-        transform: translateY(0.75rem);
-    }
-    to {
-        opacity: 1;
-        transform: none;
-    }
-}
+// One entrance, staggered between the two panels — see _authBrandPanel.scss.
+@include brand.auth-rise-keyframes;
 
 @media (prefers-reduced-motion: reduce) {
     .brandInk,

package/src/components/styles/LogoutScreen.module.scss

@@ -0,0 +1,89 @@
+/**
+ * Sign out.
+ *
+ * Ported from the Next.js portal's styles/logout-page.css. One card, one
+ * spinner, one and a half seconds — long enough to read "logging out" and be
+ * sure it happened, short enough not to feel like a wait.
+ */
+
+.page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+}
+
+.card {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 3rem;
+    border-radius: 10px;
+    background-color: var(--surface-color, #fff);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    text-align: center;
+}
+
+.icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 1.5rem;
+    border-radius: 50%;
+    background-color: rgba(2, 118, 186, 0.1);
+    color: var(--primary-color, #0276ba);
+}
+
+.title {
+    margin: 0 0 0.5rem;
+    color: var(--primary-color, #0276ba);
+    font-size: 1.8rem;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.message {
+    margin: 0;
+    color: var(--paragraph-color, #58585a);
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    margin: 2rem auto 0;
+    border: 3px solid rgba(2, 118, 186, 0.2);
+    border-top-color: var(--primary-color, #0276ba);
+    border-radius: 50%;
+    animation: logout-spin 1s linear infinite;
+}
+
+@keyframes logout-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width: 576px) {
+    .card {
+        margin: 0 1rem;
+        padding: 2rem;
+    }
+
+    .icon {
+        width: 60px;
+        height: 60px;
+    }
+
+    .title {
+        font-size: 1.5rem;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .spinner {
+        animation-duration: 3s;
+    }
+}