@visns-studio/visns-components 6.1.4 → 6.1.6

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

@@ -1,5 +1,47 @@
 @use 'controls' as *;
 
+/* ============================================================================
+   Page header density hooks
+   ----------------------------------------------------------------------------
+   One header bar, one spec, shared by every page that draws a page title —
+   the index (`.crmtitle` here) and the detail/breadcrumb header
+   (`.crmtitle` in GenericDetail.module.scss). Both files carry the same
+   declarations so the two pages sit on the same baseline: a white surface
+   flush under the nav, one bottom hairline, the same padding, and the same
+   title type scale. Change one, change the other.
+
+   As with the `--nav-*` set (see the block at the top of
+   Navigation.module.scss), every declaration below is written
+   `var(--hook, <the value it always had>)`, so an unset hook is a no-op and a
+   project retunes density from `:root` in its own stylesheet — no fork, no
+   prop, no class.
+
+     --page-header-padding     the bar's own padding, and what aligns the title
+                               with the nav's content. A project that has
+                               retuned `--nav-bar-padding` will usually want to
+                               set this to the same horizontal value.
+                               default: var(--spacing-md, 1rem)
+     --page-header-title-size  the page title type size. The breadcrumb's
+                               parent crumb and the current entity are both set
+                               from this, so the two pages share one scale.
+                               default: 1.25rem
+     --page-header-gap         space between the title block and the
+                               right-aligned action/count slot.
+                               default: var(--spacing-md, 1rem)
+
+   Deliberately not hooks: the surface colour and the hairline. Those are the
+   existing `--item-color` / `--border-color` tokens every project already
+   sets, and a header that does not match the page's other surfaces is a bug
+   rather than a density preference.
+
+   Note the concrete fallbacks. `--spacing-*`, `--muted-color` and
+   `--surface-color` are not part of every consuming project's token set; a
+   bare `var(--spacing-md)` there is invalid at computed-value time and the
+   whole declaration is dropped (padding silently becomes 0). Every use of a
+   token outside the common set is written with a literal fallback for that
+   reason.
+   ========================================================================= */
+
 .btn {
     @include button-primary;
 }
@@ -721,51 +763,79 @@
     }
 }
 
-.crmtitle {
+/* The unified page header bar — see the hooks block at the top of this file.
+   `.crmtitle` is applied to the same element as `.grid__full`, so it has to
+   undo that card's border, radius, shadow and 2px padding: a page header is
+   not a card sitting on the page, it is the top edge of the page.
+
+   `.crmtitleSimple` is the non-`full` layout's variant. It had no rule at all
+   in this file, so those pages fell through to the bare `.grid__full` card —
+   an unstyled title stacked above its actions. It joins the same bar. */
+.crmtitle,
+.crmtitleSimple {
     min-height: auto;
-    /* Was a flat 1rem inside a tinted-navy border, which made the page title
-       look like another card competing with the grid below it. A page header
-       is not a card: no border, no fill, just the title and its count sitting
-       on the page. */
-    padding: 0 0 var(--spacing-md);
+    padding: var(--page-header-padding, var(--spacing-md, 1rem));
     margin: 0;
-    background: none;
+    /* The surface every other panel already uses, so the bar reads as page
+       rather than as one more floating element. */
+    background: var(--item-color, #fff);
     border-radius: 0;
     border: none;
-    border-bottom: 1px solid var(--border-color);
+    /* A single hairline is the whole separation — the shadow that `.grid__full`
+       carries would make this a card again. */
+    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;
+        /* Was 1, which clipped descenders at this size. */
+        line-height: 1.25;
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
 
-        a {
-            text-decoration: none;
-            color: var(--secondary-color);
-            font-weight: 400;
-        }
+    /* A breadcrumb crumb: still a link, but it should not compete with the
+       page it leads to. Same size and baseline as the title, quieter weight
+       and colour. */
+    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.25rem;
-        }
+    h1 a:hover {
+        color: var(--paragraph-color, inherit);
+        text-decoration: underline;
+    }
+
+    /* The chevron between crumbs — a separator, not a mark of its own. */
+    h1 svg {
+        color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.45));
+        flex: 0 0 auto;
+        margin: 0 0.4rem;
     }
 
     .titleInfo {
+        /* The shared `.titleInfo` rule positions absolutely for other
+           surfaces; inside the bar it is a flex child like anything else. */
+        position: static;
         width: max-content;
+        flex: 0 0 auto;
     }
 
     .titleInfo span {
-        font-size: 0.875em;
-        color: rgba(var(--paragraph-color-rgb), 0.65);
+        font-size: 0.875rem;
+        color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.65));
     }
 }