@visns-studio/visns-components 6.1.3 → 6.1.5

package/src/components/generic/groupedReport.css

@@ -1,16 +1,24 @@
-/* Grouped Report Base Styles */
+/* Grouped report surfaces.
+   Same visual language as the rest of the report builder: white surfaces,
+   single hairlines, quiet uppercase column labels, one radius, muted ink.
+   Every custom property carries a literal fallback because consuming projects
+   define different subsets of the design tokens. */
 .grouped-report {
-    --group-header-bg-primary: #2c5282;
-    --group-header-bg-secondary: #4a5568;
-    --group-header-bg-success: #38a169;
-    --group-header-bg-warning: #d69e2e;
-    --group-header-bg-danger: #e53e3e;
-    --group-header-color: white;
-    --empty-row-bg-light: #f8f9fa;
-    --empty-row-bg-transparent: transparent;
-    --border-color: #dee2e6;
-    --border-color-light: #e2e8f0;
-    --text-muted: #6c757d;
+    --gr-surface: var(--item-color, #fff);
+    --gr-surface-quiet: var(--bg-color, #f7f7f8);
+    --gr-line: var(--border-color, #e1e1e1);
+    --gr-radius: var(--br, 5px);
+    --gr-ink: var(--header-color, #212930);
+    --gr-ink-muted: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
+    --gr-accent: var(--primary-color, #2c5282);
+
+    /* Group header accents stay config-driven (groupHeaderStyle) but read as a
+       thin rule rather than a saturated fill. */
+    --group-accent-primary: var(--primary-color, #2c5282);
+    --group-accent-secondary: var(--gr-line);
+    --group-accent-success: var(--success-color, #2f855a);
+    --group-accent-warning: var(--warning-color, #b7791f);
+    --group-accent-danger: var(--danger-color, #c53030);
 }
 
 .grouped-report * {
@@ -22,22 +30,33 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1.5rem;
-    padding: 1rem;
-    background-color: #f8f9fa;
-    border-radius: 0.375rem;
-    border: 1px solid var(--border-color);
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding: 0.75rem 1rem;
+    background-color: var(--gr-surface);
+    border: 1px solid var(--gr-line);
+    border-radius: var(--gr-radius);
 }
 
 .grouped-report-summary {
     display: flex;
-    align-items: center;
-    gap: 1rem;
+    align-items: baseline;
+    gap: 0.5rem;
+    min-width: 0;
 }
 
-.summary-text {
-    font-weight: 500;
-    color: var(--text-muted);
+.grouped-report-summary .group-title {
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--gr-ink-muted);
+}
+
+.summary-text,
+.grouped-report-summary .group-stats {
+    font-size: 0.8125rem;
+    color: var(--gr-ink-muted);
 }
 
 .grouped-report-actions {
@@ -46,18 +65,33 @@
 }
 
 .btn-export {
-    background-color: #0d6efd;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background-color: var(--gr-surface);
+    color: var(--gr-ink);
+    border: 1px solid var(--gr-line);
+    padding: 8px 14px;
+    border-radius: var(--gr-radius);
     cursor: pointer;
+    font-size: 0.8125rem;
     font-weight: 500;
-    transition: background-color 0.15s ease-in-out;
+    transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.btn-export:hover:not(:disabled) {
+    color: var(--gr-accent);
+    border-color: var(--gr-accent);
+}
+
+.btn-export:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
-.btn-export:hover {
-    background-color: #0b5ed7;
+.btn-export:focus-visible {
+    outline: 2px solid var(--gr-accent);
+    outline-offset: 2px;
 }
 
 /* Section-based Grouping */
@@ -66,112 +100,142 @@
 }
 
 .grouped-report--sections .group-section {
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     page-break-inside: avoid;
-    border: 1px solid var(--border-color);
-    border-radius: 0.5rem;
+    background-color: var(--gr-surface);
+    border: 1px solid var(--gr-line);
+    border-radius: var(--gr-radius);
     overflow: hidden;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
 /* Group Headers */
 .group-header {
+    width: 100%;
     padding: 0.75rem 1rem;
-    font-weight: 600;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    color: var(--group-header-color);
+    gap: 0.5rem;
+    background-color: var(--gr-surface);
+    border: 0;
+    border-bottom: 1px solid var(--gr-line);
+    border-left: 3px solid var(--group-accent-secondary);
+    color: var(--gr-ink);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    user-select: none;
+}
+
+.group-header:focus-visible {
+    outline: 2px solid var(--gr-accent);
+    outline-offset: -2px;
+}
+
+.group-header-toggle {
+    display: inline-flex;
+    align-items: center;
+    color: var(--gr-ink-muted);
 }
 
 .group-header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 0.75rem;
     width: 100%;
+    min-width: 0;
 }
 
 .group-title {
-    font-size: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
     margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .group-stats {
-    font-size: 0.875rem;
+    font-size: 0.8125rem;
     font-weight: 400;
-    opacity: 0.9;
+    color: var(--gr-ink-muted);
+    white-space: nowrap;
 }
 
-/* Group Header Styles */
+/* Group Header Styles — accent rule only, no heavy fills */
 .group-section--primary .group-header {
-    background-color: var(--group-header-bg-primary);
+    border-left-color: var(--group-accent-primary);
 }
 
 .group-section--secondary .group-header {
-    background-color: var(--group-header-bg-secondary);
+    border-left-color: var(--group-accent-secondary);
 }
 
 .group-section--success .group-header {
-    background-color: var(--group-header-bg-success);
+    border-left-color: var(--group-accent-success);
 }
 
 .group-section--warning .group-header {
-    background-color: var(--group-header-bg-warning);
+    border-left-color: var(--group-accent-warning);
 }
 
 .group-section--danger .group-header {
-    background-color: var(--group-header-bg-danger);
+    border-left-color: var(--group-accent-danger);
 }
 
 /* Group Content */
 .group-content {
-    background-color: white;
+    background-color: var(--gr-surface);
+}
+
+.group-content .table-container,
+.grouped-table-container {
+    overflow: auto;
+    max-height: 80vh;
 }
 
 .group-table,
 .grouped-table {
     width: 100%;
+    min-width: 100%;
     border-collapse: collapse;
     margin: 0;
 }
 
 .group-table thead th,
 .grouped-table thead th {
-    background-color: #f8f9fa;
-    color: #495057;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--gr-surface-quiet);
+    color: var(--gr-ink-muted);
     font-weight: 600;
-    padding: 0.75rem;
+    padding: 0.625rem 0.75rem;
     text-align: left;
-    border-bottom: 2px solid var(--border-color);
-    border-right: 1px solid var(--border-color-light);
-    font-size: 0.875rem;
+    white-space: nowrap;
+    border-bottom: 1px solid var(--gr-line);
+    font-size: 0.6875rem;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.group-table thead th:last-child,
-.grouped-table thead th:last-child {
-    border-right: none;
+    letter-spacing: 0.06em;
 }
 
 .group-table thead th.required-column,
 .grouped-table thead th.required-column {
-    background-color: #e3f2fd;
-    font-weight: 700;
+    color: var(--gr-ink);
 }
 
 .group-table tbody td,
 .grouped-table tbody td {
-    padding: 0.75rem;
-    border-bottom: 1px solid var(--border-color-light);
-    border-right: 1px solid var(--border-color-light);
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid var(--gr-line);
     vertical-align: top;
-    font-size: 0.875rem;
+    font-size: 0.8125rem;
+    color: var(--gr-ink);
 }
 
-.group-table tbody td:last-child,
-.grouped-table tbody td:last-child {
-    border-right: none;
+.group-table tbody tr:last-child td,
+.grouped-table tbody tr:last-child td {
+    border-bottom: none;
 }
 
 .group-table tbody td.required-column,
@@ -181,90 +245,77 @@
 
 /* Data Rows */
 .data-row {
-    background-color: white;
+    background-color: var(--gr-surface);
     transition: background-color 0.15s ease-in-out;
 }
 
 .data-row:hover {
-    background-color: #f8f9fa;
-}
-
-.data-row:nth-child(even) {
-    background-color: #fbfcfd;
-}
-
-.data-row:nth-child(even):hover {
-    background-color: #f1f3f4;
+    background-color: var(--gr-surface-quiet);
 }
 
 /* Empty Rows */
 .empty-row td {
-    height: 2.5rem;
-    min-height: 2.5rem;
-    border-bottom: 1px solid var(--border-color-light);
+    height: 2.25rem;
+    min-height: 2.25rem;
+    border-bottom: 1px solid var(--gr-line);
 }
 
 .empty-row--light {
-    background-color: var(--empty-row-bg-light);
+    background-color: var(--gr-surface-quiet);
 }
 
 .empty-row--transparent {
-    background-color: var(--empty-row-bg-transparent);
+    background-color: transparent;
 }
 
 .empty-row--striped:nth-child(even) {
-    background-color: #f8f9fa;
+    background-color: var(--gr-surface-quiet);
 }
 
-/* Empty State */
-.grouped-report-empty {
+/* Empty / error states */
+.grouped-report-empty,
+.grouped-report-error {
     text-align: center;
-    padding: 3rem;
-    color: var(--text-muted);
-    background-color: #f8f9fa;
-    border: 1px solid var(--border-color);
-    border-radius: 0.5rem;
+    padding: 2.5rem 1.5rem;
+    color: var(--gr-ink-muted);
+    background-color: var(--gr-surface);
+    border: 1px solid var(--gr-line);
+    border-radius: var(--gr-radius);
 }
 
 .grouped-report-error {
-    text-align: center;
-    padding: 2rem;
-    color: #dc3545;
-    background-color: #f8d7da;
-    border: 1px solid #f5c6cb;
-    border-radius: 0.5rem;
+    border-left: 3px solid var(--danger-color, #c53030);
+    text-align: left;
+}
+
+.grouped-report-empty p,
+.grouped-report-error p {
+    margin: 0;
+    font-size: 0.875rem;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
     .grouped-report-header {
         flex-direction: column;
-        gap: 1rem;
+        gap: 0.75rem;
         align-items: stretch;
     }
-    
+
     .group-table,
     .grouped-table {
         font-size: 0.75rem;
     }
-    
+
     .group-table thead th,
     .group-table tbody td,
     .grouped-table thead th,
     .grouped-table tbody td {
         padding: 0.5rem;
     }
-    
+
     .group-header {
-        padding: 0.5rem;
-    }
-    
-    .group-title {
-        font-size: 0.875rem;
-    }
-    
-    .group-stats {
-        font-size: 0.75rem;
+        padding: 0.625rem 0.75rem;
     }
 }
 
@@ -273,35 +324,28 @@
     .grouped-report-actions {
         display: none;
     }
-    
+
     .group-section {
         page-break-inside: avoid;
         margin-bottom: 1rem;
         border: 1px solid #000;
     }
-    
+
     .group-header {
-        background-color: #000 !important;
-        color: white !important;
-        -webkit-print-color-adjust: exact;
-        print-color-adjust: exact;
-    }
-    
-    .group-table,
-    .grouped-table {
-        border-collapse: collapse;
+        border-left-width: 3px;
+        border-bottom: 1px solid #000;
     }
-    
+
     .group-table thead th,
     .group-table tbody td,
     .grouped-table thead th,
     .grouped-table tbody td {
         border: 1px solid #000;
     }
-    
+
     .empty-row--light {
         background-color: #f0f0f0 !important;
         -webkit-print-color-adjust: exact;
         print-color-adjust: exact;
     }
-}
+}

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

@@ -1,5 +1,10 @@
 @use 'controls' as *;
 
+/* The page header bar below (`.crmtitle`) is the same spec as the index
+   header in GenericIndex.module.scss, so the two pages share one header
+   language. The `--page-header-*` density hooks are documented once, at the
+   top of that file; keep the two rules in step. */
+
 .btn {
     @include button-primary;
 }
@@ -166,16 +171,21 @@
     /* Was a centred, tinted bar. A section heading is read at the start of
        the line like everything under it; centring it made the eye jump to the
        middle and back for every section on the page. */
-    padding: 0 0 var(--spacing-sm);
-    border-bottom: 1px solid var(--border-color);
+    /* Literal fallbacks throughout: --spacing-*, --font-size-sm,
+       --font-weight-semibold and --muted-color are not in every project's
+       token set, and a bare var() for a missing token is invalid at
+       computed-value time — the declaration is dropped and the quiet label
+       silently reverts to unpadded body text. */
+    padding: 0 0 var(--spacing-sm, 0.5rem);
+    border-bottom: 1px solid var(--border-color, #e1e1e1);
     border-radius: 0;
-    margin-bottom: var(--spacing-md);
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-semibold);
+    margin-bottom: var(--spacing-md, 1rem);
+    font-size: var(--font-size-sm, 0.8rem);
+    font-weight: var(--font-weight-semibold, 600);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     text-align: left;
-    color: var(--muted-color);
+    color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.6));
 }
 
 .gridtxt__header span {
@@ -194,13 +204,17 @@
     margin: 0;
 }
 
+/* Overview fields. These were chunky tinted boxes — a brand-tinted border and
+   fill around every single value, which turned a plain list of facts into two
+   columns of competing containers. A field needs only enough edge to show
+   where it ends: the shared hairline token, no fill, tighter padding. */
 .gridtxt > ul li {
     flex: 0 0 calc(50% - 10px);
-    padding: 0.65rem;
+    padding: 0.5rem 0.65rem;
     box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-rgb), 0.095);
+    border: 1px solid var(--border-color, #e1e1e1);
     color: var(--paragraph-color);
-    background: rgba(var(--primary-rgb), 0.015);
+    background: var(--surface-color, transparent);
     margin: 3px;
     border-radius: var(--br);
     line-height: 1.45;
@@ -217,8 +231,8 @@
    as an error; a left rule was only a quieter version of the same mistake.
    Emphasis should mean something, and here there is nothing to emphasise. */
 .gridtxt > ul .notecolor {
-    border: 1px solid var(--border-color);
-    background: var(--surface-color);
+    border: 1px solid var(--border-color, #e1e1e1);
+    background: var(--surface-color, transparent);
 }
 
 .titleInfo {
@@ -640,47 +654,77 @@
 
 
 
-.crmtitle {
+/* The unified page header bar. Identical spec to `.crmtitle` in
+   GenericIndex.module.scss — see the `--page-header-*` hooks block at the top
+   of that file. This was a tall bordered white card with its own radius and
+   type scale, which is why the detail and index headers looked like two
+   different products; it is now the same bar as the index, carrying a
+   breadcrumb instead of a plain title.
+
+   `.crmtitle--alternate` is the non-`full` layout's variant (also used by
+   OAuthIntegrationsPage). It had no rule in this file, so it fell through to
+   the bare `.grid__full` card; it joins the same bar. */
+.crmtitle,
+.crmtitle--alternate {
     min-height: auto;
-    padding: 1rem;
+    padding: var(--page-header-padding, var(--spacing-md, 1rem));
     margin: 0;
-    background: white;
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    background: var(--item-color, #fff);
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid var(--border-color, #e1e1e1);
+    box-shadow: none;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: var(--page-header-gap, var(--spacing-md, 1rem));
 
     h1 {
         font-weight: 700;
-        font-size: 1.25rem;
+        font-size: var(--page-header-title-size, 1.25rem);
         margin: 0;
         padding: 0;
-        line-height: 1;
+        line-height: 1.25;
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
 
-        a {
-            text-decoration: none;
-            color: var(--secondary-color);
-            font-weight: 400;
-        }
+    /* The parent crumb. Same size and baseline as the entity it leads to, so
+       the breadcrumb reads as one line of type rather than a label glued to a
+       title — but quieter, because the current page is the subject. */
+    h1 a {
+        text-decoration: none;
+        color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.6));
+        font-weight: 500;
+        transition: color 0.15s ease;
+    }
 
-        svg {
-            color: rgba(var(--primary-rgb), 0.5);
-            position: relative;
-            top: 2px;
-            margin: 0 0.5rem;
-            max-width: 15px;
-        }
+    h1 a:hover {
+        color: var(--paragraph-color, inherit);
+        text-decoration: underline;
+    }
+
+    h1 svg {
+        color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.45));
+        flex: 0 0 auto;
+        margin: 0 0.4rem;
+        max-width: 15px;
     }
 
     .titleInfo {
+        /* `.titleInfo` is absolutely positioned for other surfaces in this
+           file; in the bar it is an ordinary flex child, or it would float
+           out of the header it belongs to. */
+        position: static;
         width: max-content;
+        flex: 0 0 auto;
     }
 
     .titleInfo span {
-        font-size: 0.875em;
-        color: rgba(var(--primary-rgb), 0.65);
+        font-size: 0.875rem;
+        color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.65));
     }
 }