@visns-studio/visns-components 6.17.1 → 6.20.0

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

@@ -54,56 +54,69 @@
     gap: 1rem;
 }
 
-.grid__three {
-    width: 33%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+/* ----------------------------------------------------------------------------
+   The card set.
+
+   One surface, one radius, one hairline, one elevation. Before this the four
+   cards on the same page disagreed on all four: two radii (`--br` and a
+   literal 6px), two borders (a WHITE `rgba(--item-color-rgb, 1)` — i.e. no
+   visible edge at all — and a hardcoded `#dadce0`), and three shadows
+   (`0 10px 50px`, which at 5% over a near-white ground is a smudge nobody can
+   see, and a `0 4px 0` hard offset that reads as a 90s button).
+
+   The border is what does the work now that the page ground is the warm stone
+   rather than a near-white: a card needs one edge, not a 50px blur.
+   `--shadow-sm` is the single elevation token and is deliberately quiet — the
+   contrast between white and the ground carries the lift.
+
+   `overflow: visible` is load-bearing on every one of these: the filter
+   selects, the row-action popovers and the contact tooltips all render inside
+   a card and have to escape it. Clipping happens one level in, on the grid's
+   own container, where nothing needs to overflow.
+   -------------------------------------------------------------------------- */
+
+@mixin card-surface {
+    background: var(--item-color, #fff);
+    border: 1px solid var(--border-color, #e1e1e1);
+    border-radius: var(--card-radius, 10px);
+    box-shadow: var(
+        --shadow-sm,
+        0 1px 2px rgba(var(--primary-rgb, 27, 57, 51), 0.08),
+        0 2px 8px rgba(var(--primary-rgb, 27, 57, 51), 0.06)
+    );
     box-sizing: border-box;
     overflow: visible;
     position: relative;
-    padding: 20px;
     margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+}
+
+.grid__three {
+    @include card-surface;
+    width: 33%;
+    padding: 20px;
 }
 
 .grid__half {
+    @include card-surface;
     width: 50%;
-    background: var(--item-color);
-    border-radius: 6px;
-    border: 1px solid #dadce0;
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
     padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color), 0.05);
 }
 
 .grid__full {
+    @include card-surface;
     width: 100%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 2px;
-    margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    /* Was 2px. Two pixels of card showing between the card's own border and
+       whatever it wraps is the "bit of padding" that made the grid look like
+       it did not line up with its own corners — the outer radius curving
+       around a square inner edge three pixels away. A card whose only child is
+       a full-bleed surface has no padding of its own; the child brings its. */
+    padding: 0;
 }
 
 .grid__dashfull {
+    @include card-surface;
     width: 100%;
-    background: var(--item-color);
-    border-radius: 6px;
-    border: 1px solid #dadce0;
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
     padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__subrow {
@@ -196,14 +209,14 @@
 
 .grid__subnav__alternate {
     flex: 1;
-    background: rgba(var(--item-color-rgb), 0.05);
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 0.05);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    border: 1px solid rgba(var(--item-color-rgb, 255, 255, 255), 1);
     box-sizing: border-box;
     padding: 5px;
     margin: 8px 0;
     height: auto;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 10px 50px rgba(var(--primary-rgb, 27, 57, 51), 0.05);
 }
 
 .grid__subnav__alternate > ul {
@@ -226,7 +239,7 @@
     box-sizing: border-box;
     display: block;
     text-decoration: none;
-    background: rgba(var(--item-color-rgb), 1.05);
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 1);
     color: var(--secondary-color);
     border-radius: 5px;
     transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -257,13 +270,13 @@
     flex: 0 1 80%;
     background: var(--item-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    border: 1px solid rgba(var(--item-color-rgb, 255, 255, 255), 1);
     box-sizing: border-box;
     padding: 2px;
     margin: 8px 0;
     height: auto;
     position: relative;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 10px 50px rgba(var(--primary-rgb, 27, 57, 51), 0.05);
 }
 
 .grid__subcontent h2 {
@@ -1205,3 +1218,435 @@
     width: 100%;
     position: relative;
 }
+
+// ============================================================================
+// 2026 pass — the index page frame
+// ----------------------------------------------------------------------------
+// The page title bar and the filter rail around the grid. Appended for the
+// same reason as DataGrid's pass: these are targeted overrides of rules above
+// and the cascade order is load-bearing.
+// ============================================================================
+
+.crmtitle,
+.crmtitleSimple {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    // The title sat in its own white slab with a hard edge, which made the page
+    // read as two stacked boxes. It is type on the page ground now, and the
+    // grid card below is the only container.
+    padding: 0 0.25rem 0.85rem;
+    background: none;
+    border: 0;
+}
+
+.crmtitle h1,
+.crmtitleSimple h1,
+.crmtitle h2,
+.crmtitleSimple h2 {
+    margin: 0;
+    font-size: 1.375rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--heading-color, var(--primary-color, #1b3933));
+}
+
+// -- the filter rail ---------------------------------------------------------
+// Tabs on the left rail were solid brand-green blocks with square corners, one
+// per filter — a column of buttons shouting at the same volume as the data.
+
+.grid__subnav,
+.grid__subnav__alternate {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    padding: 0.4rem;
+    border: 1px solid color-mix(in srgb, var(--paragraph-color, #2b2b2b) 12%, transparent);
+    border-radius: 12px;
+    background: var(--background-color, #fff);
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary-color, #1b3933) 6%, transparent);
+}
+
+.grid__subnav > *,
+.grid__subnav__alternate > * {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.7rem;
+    border: 0;
+    border-radius: var(--radius-sm, 8px);
+    background: none;
+    color: var(--muted-color, #6b7688);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+        background var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
+        color var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.grid__subnav > *:hover,
+.grid__subnav__alternate > *:hover {
+    background: color-mix(in srgb, var(--primary-color, #1b3933) 5%, transparent);
+    color: var(--primary-color, #1b3933);
+}
+
+// NOTE: the filter tabs themselves are TableFilter's, wrapped in a container
+// inside this rail — so their selected state is styled in
+// TableFilter.module.scss (`.subactive`), not from here. A `.grid__subnav > *`
+// rule reaches the wrapper and nothing else.
+
+// -- states ------------------------------------------------------------------
+
+.noData,
+.loadingContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 8rem;
+    color: var(--muted-color, #6b7688);
+    font-size: 0.875rem;
+}
+
+.loadingSpinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid color-mix(in srgb, var(--paragraph-color, #2b2b2b) 14%, transparent);
+    border-top-color: var(--primary-color, #1b3933);
+    border-radius: 50%;
+    animation: genericIndexSpin 0.7s linear infinite;
+}
+
+@keyframes genericIndexSpin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .loadingSpinner { animation-duration: 2s; }
+}
+
+/* ============================================================================
+ * 2026 pass — the rail / content split
+ * ----------------------------------------------------------------------------
+ * Three measured faults, not a matter of taste. On /settings at 1440x1500:
+ * the rail card was 241px tall next to a 1264px content pane, so ~1020px of
+ * the left column was a dead L-shaped void; the content pane drew a bordered,
+ * shadowed card around a grid that already draws its own, so every index page
+ * wore two card edges; and the selected rail item was a 10%-opacity tint with
+ * no accent, which at a glance did not read as selected at all.
+ *
+ * The pattern itself stays — a vertical rail beside content is still right in
+ * 2026, and it is the only one of the three that scales as sections are added
+ * (horizontal tabs stop working somewhere around seven). What changes is that
+ * the rail becomes a COLUMN rather than a card: it has no edge of its own to
+ * terminate, so there is no void under it, and it sticks while the content
+ * scrolls past.
+ *
+ * Appended rather than folded in, so the cascade order is doing the
+ * overriding and the original rules stay readable. Every token carries a
+ * literal fallback — a bare var() for a token the host has not declared is
+ * invalid at computed-value time and takes the whole declaration with it.
+ * ==========================================================================*/
+
+.grid__subrow {
+    /* Grid, not flex: the rail column gets a real, stable width instead of
+       `flex: 1` fighting `flex: 0 1 80%` for it, and `start` alignment stops
+       the two columns forcing each other to equal height — which is what
+       created the void in the first place. */
+    display: grid;
+    grid-template-columns:
+        minmax(var(--index-rail-min, 190px), var(--index-rail-width, 224px))
+        minmax(0, 1fr);
+    align-items: start;
+    gap: var(--index-rail-gap, 1.25rem);
+}
+
+.grid__subnav,
+.grid__subnav__alternate {
+    /* No card. The rail is part of the page ground, so it has no bottom edge
+       to leave a thousand pixels of nothing beneath. */
+    background: none;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 8px 0;
+
+    /* It follows the reader instead of scrolling away. The offset is the app
+       chrome above it; a host with different chrome retunes one token. */
+    position: sticky;
+    top: var(--index-rail-top, 88px);
+
+    /* A rail longer than the window scrolls itself, never the page. */
+    max-height: calc(100vh - var(--index-rail-offset, 120px));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+}
+
+.grid__subnav > ul li a,
+.grid__subnav__alternate > ul li a {
+    /* Room for the accent edge below, so selecting an item does not shift its
+       label sideways by 3px. */
+    position: relative;
+    padding-left: calc(var(--spacing-md, 1rem) - 3px);
+    border-left: 3px solid transparent;
+    border-radius: var(--radius-sm, 6px);
+    color: var(--paragraph-color, #52606d);
+}
+
+.grid__subnav > ul li:hover a,
+.grid__subnav__alternate > ul li:hover a {
+    background: color-mix(
+        in srgb,
+        var(--primary-color, #1b3933) 6%,
+        transparent
+    );
+    color: var(--heading-color, #111827);
+}
+
+/* The SELECTED item is not styled here, and cannot be: `.subactive` is
+   declared in TableFilter.module.scss, so a `.subactive` written in this file
+   compiles to a different hashed class name and matches nothing. The accent
+   edge lives with the class it belongs to, in TableFilter. The transparent
+   3px border above is what reserves the space for it, so selecting an item
+   does not shift its label. */
+
+.grid__subcontent {
+    /* The grid inside already draws a bordered, shadowed, rounded card. This
+       drew a second one around it. */
+    background: none;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 8px 0;
+    min-width: 0;
+}
+
+/* Narrow viewports: one column. TableFilter already turns the rail into a
+   horizontal underline strip below 760px, so the two only have to agree on
+   where that happens. */
+@media (max-width: 759px) {
+    .grid__subrow {
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--spacing-sm, 0.5rem);
+    }
+
+    .grid__subnav,
+    .grid__subnav__alternate {
+        /* A strip that sticks would cover the rows it is filtering. */
+        position: static;
+        max-height: none;
+        overflow: visible;
+    }
+}
+
+/* ============================================================================
+ * Embedded mode — an index rendered inside another page's panel
+ * ----------------------------------------------------------------------------
+ * See the block comment on `GenericIndex` for what asks for this. Two shapes:
+ *
+ *   - `tabLayout="underline"`: the filter menu becomes a horizontal strip
+ *     ABOVE the grid instead of a rail beside it. The strip itself is
+ *     TableFilter's (`variant="underline"`); everything here is the container
+ *     around it, which has to undo the rail's card, its sticky positioning and
+ *     its scroller — a strip is none of those things.
+ *   - `showTitle={false}`: no page-title bar, so the record count is rendered
+ *     against the grid instead. It sits at the right-hand end of the strip
+ *     when there is one, and in `.embeddedInfoRow` when there is not.
+ *
+ * Appended, like the passes above it: these are targeted overrides of rules
+ * earlier in this file and the cascade order is what does the overriding.
+ * ==========================================================================*/
+
+/* The rail layout is a two-column grid (`.grid__subrow` above). Stacked, it is
+   one column: `grid-template-columns: none` is what gives the reclaimed rail
+   width back to the grid rather than leaving a 224px hole beside it. */
+.grid__subrow--stacked {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    grid-template-columns: none;
+    align-items: stretch;
+    gap: 0;
+}
+
+.grid__subrow--stacked > .grid__subnav,
+.grid__subrow--stacked > .grid__subcontent {
+    flex: 0 0 auto;
+    width: 100%;
+    /* Without this the strip's min-content width floors the flex item, so a
+       row of ten tabs widens the page instead of scrolling inside it. */
+    min-width: 0;
+}
+
+/* The strip is separated from the grid card by one gap, stated once here —
+   `.grid__subnav--underline` zeroes its own margin. A tab row butted straight
+   onto the card below reads as that card's header rather than as a control
+   above it. */
+.grid__subrow--stacked > .grid__subcontent {
+    margin: var(--spacing-md, 1rem) 0 0;
+}
+
+.grid__subnav--underline {
+    /* Not a card, not sticky, not a scroller. */
+    position: static;
+    max-height: none;
+    overflow: visible;
+    overscroll-behavior: auto;
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    /* The one hairline under the whole strip; the selected tab's 3px accent
+       edge sits on top of it. */
+    border-bottom: 1px solid
+        color-mix(in srgb, var(--paragraph-color, #2b2b2b) 12%, transparent);
+
+    /* A row, so the record count can sit at the far end of it rather than
+       costing a line of its own. `flex-end` keeps the count on the strip's
+       baseline instead of floating above the tabs. */
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: var(--spacing-md, 1rem);
+}
+
+/* `.grid__subnav > *` above pads, tints and FLEXES the TableFilter wrapper for
+   the rail. In a strip that padding indents the first tab off the page edge,
+   the hover tint lights up the whole row, and the flex is the one that
+   actually breaks it: as a flex container the tab list floors at its own
+   min-content width, so a row wider than the panel widens the page instead of
+   scrolling inside itself. Back to a block, which is what TableFilter's own
+   stylesheet expects around the scroller. */
+.grid__subnav--underline > * {
+    display: block;
+    min-width: 0;
+    padding: 0;
+    background: none;
+}
+
+.grid__subnav--underline > *:hover {
+    background: none;
+}
+
+/* The strip takes the room; the count takes what it needs. */
+.grid__subnav--underline > *:first-child {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.grid__subnav--underline > .titleInfo {
+    flex: 0 0 auto;
+    /* Clear of the hairline, on the same optical line as the tab labels. */
+    padding-bottom: 0.55rem;
+    white-space: nowrap;
+}
+
+/* No strip to sit in: the count gets its own row, right-aligned above the
+   grid card and matched to the card's own horizontal inset. */
+.embeddedInfoRow {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 0.25rem 0.5rem;
+}
+
+.grid__subnav--underline > .titleInfo,
+.embeddedInfoRow > .titleInfo {
+    /* The `.titleInfo` rule inside `.crmtitle` positions it for the title bar;
+       neither of these is the title bar. */
+    position: static;
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+    width: max-content;
+}
+
+.grid__subnav--underline > .titleInfo span,
+.embeddedInfoRow > .titleInfo span {
+    font-size: 0.8125rem;
+    color: var(--muted-color, #6b7688);
+}
+
+.grid__subnav--underline > .titleInfo strong,
+.embeddedInfoRow > .titleInfo strong {
+    color: var(--heading-color, var(--primary-color, #1b3933));
+    font-weight: 600;
+}
+
+/* Narrow viewports need nothing of their own here. The rail's phone rules sit
+   above this block, so a stacked row's own `gap: 0` and single column already
+   win on source order — and the strip inside is the same one TableFilter shows
+   on a phone anyway. */
+
+/* ============================================================================
+ * The grid card — one card, not two
+ * ----------------------------------------------------------------------------
+ * `GenericIndex` renders the data grid as
+ *
+ *     .grid__full                 <- a card: white, bordered, rounded, lifted
+ *       .dataGridTopContainer     <- the search / actions toolbar (a SIBLING)
+ *       .dataGridContainer        <- ANOTHER card: bordered, rounded 14px,
+ *                                    shadowed, overflow hidden
+ *
+ * so the page drew a card inside a card, three pixels apart, with two
+ * different corner radii, and put the toolbar in the gap between them — which
+ * is exactly the "rounded corners but the white background ruins it, doesn't
+ * line up, has a bit of padding" the owner is looking at. On a near-white page
+ * ground the two whites were indistinguishable, so all you saw was a rounded
+ * outline that didn't follow anything.
+ *
+ * The outer element is the only one that wraps BOTH the toolbar and the table,
+ * so it is the one that gets to be the card. The inner container gives up its
+ * border, its radius and its shadow and becomes a plain surface flush inside
+ * it: search row, column header, rows and pager all on one white card, one
+ * hairline around the lot, corners that clip what is actually at them.
+ *
+ * Scoped by attribute rather than by `:has()` on a module class, because
+ * `.dataGridContainer` is DataGrid.module.scss's local name and hashes to
+ * something this file cannot spell. `[class*='dataGridContainer']` matches the
+ * generated `_dataGridContainer_hwl8s_579` and nothing else on the page. The
+ * same trick is used for the auth brand panel in the app's _tokens.scss.
+ *
+ * Grids rendered anywhere OTHER than inside a `.grid__full` — in a modal, on a
+ * detail tab — are untouched by this and keep drawing their own card, which is
+ * correct: there is nothing else around them to be the card.
+ * ==========================================================================*/
+
+.grid__full:has([class*='dataGridContainer']) {
+    /* `overflow` stays visible: the column filter selects, the row-action
+       popovers and the pager's per-page dropdown all open out of the card and
+       are clipped to nothing the moment this is `hidden`. The clipping that
+       the radius needs happens on the inner container instead, which contains
+       only the table and has nothing that overflows. */
+    overflow: visible;
+
+    /* Descendant, not `>`. Measured: `GenericIndex` wraps the toolbar and the
+       grid container together in one unclassed `<div>`, so the card's only
+       direct child is that wrapper and a child combinator matches nothing. */
+    [class*='dataGridContainer'] {
+        border: 0;
+        box-shadow: none;
+        /* NOT `inherit`: the parent element is that unclassed wrapper, whose
+           radius is 0, so inheriting would square the corners off.
+           The card's INNER curve is its radius less its own 1px border, and
+           this element sits exactly on that padding box — so that is the
+           radius that meets the card's edge without a sliver of white
+           overshooting the curve, or a gap short of it. */
+        border-radius: calc(var(--card-radius, 10px) - 1px);
+        overflow: hidden;
+    }
+
+    /* The toolbar is the card's top edge now rather than a strip floating on
+       it, so it loses the horizontal inset it needed when the card had 2px of
+       padding, and its hairline runs the full width to meet the card's own
+       border on both sides. */
+    [class*='dataGridTopContainer'] {
+        border-top-left-radius: calc(var(--card-radius, 10px) - 1px);
+        border-top-right-radius: calc(var(--card-radius, 10px) - 1px);
+        border-bottom-color: var(--border-color, #e1e1e1);
+    }
+}

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

@@ -52,8 +52,11 @@
    ========================================================================= */
 
 .header {
-    background: var(--primary-color);
-    color: var(--primary-color);
+    /* `color` was also var(--primary-color) — the same value as the
+       background, so every piece of header text was invisible against it
+       wherever the token was defined. */
+    background: var(--primary-color, #1b3933);
+    color: var(--tertiary-color, #fff);
     position: sticky;
     top: 0;
     width: 100%;
@@ -102,7 +105,7 @@
     background: var(--bg);
 
     .content-header {
-        background: rgba(var(--tertiary-color-rgb), 1.1);
+        background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 1);
         border-bottom: 1px solid rgba(0, 0, 0, 0.14);
         box-sizing: border-box;
         padding: 1em;