@museumwnf/viewer-layout 3.2.2 → 3.3.0

package/src/styles/dxa-gallery.css

@@ -0,0 +1,342 @@
+/*
+ * The DXA gallery family's stylesheet: what every gallery shares beyond the
+ * components — its fonts, its page reset, its theme as a function of the
+ * palette, and the page column and menu legacy's galleries all had.
+ *
+ * A gallery imports it after the package's own stylesheet and before its
+ * theme, so that the theme's values win:
+ *
+ *   import '@museumwnf/viewer-layout/style.css'
+ *   import '@museumwnf/viewer-layout/dxa/gallery.css'
+ *   import '../theme/tokens.css'
+ *   import '../theme/overrides.css'
+ *
+ * The gallery's theme/tokens.css sets the palette — legacy's five colours,
+ * from inventory-app's .legacy-code/dxa-client/src/sites/<code>/_variables.scss:
+ *
+ *   --theme-dark          banner, header, footer
+ *   --theme-medium-dark   dark menu items
+ *   --theme-medium        text background, search button
+ *   --theme-light         light menu items
+ *   --background-color    page background
+ *
+ * Every token below can be set again in the gallery's theme/tokens.css; the
+ * gallery's value wins. Legacy drew white text on both menu shades and on the
+ * header buttons whatever the palette, and so does this file.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,400&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
+
+/* ── Theme: the family's tokens, read from the palette ───────────────────── */
+:root {
+  /* ---------- Global ---------- */
+  --mwnf-font-body: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
+  --mwnf-font-heading: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
+  --mwnf-line-height: 1.4;
+  --mwnf-weight-heading: 700;
+  --mwnf-color-text: #1a1a1a;
+  --mwnf-color-background: var(--background-color);
+  --mwnf-color-accent: var(--theme-dark);
+  --mwnf-color-muted: #555555;
+  --mwnf-color-border: var(--theme-medium);
+  --mwnf-content-width: 100%;
+  --mwnf-content-padding: 0rem;
+  --mwnf-space: 0.75rem;
+  --mwnf-radius: 0;
+  --mwnf-section-border: none;
+  --mwnf-section-title-size: 1rem;
+
+  /* ---------- Header ---------- */
+  --mwnf-header-padding: 0;
+  --mwnf-header-background: var(--theme-dark);
+  --mwnf-header-text: #ffffff;
+  --mwnf-header-title-size: 1.75rem;
+  --mwnf-header-subtitle-size: 0.875rem;
+  --mwnf-header-subtitle-color: #ffffff;
+
+  /* ---------- Banner ---------- */
+  --mwnf-banner-padding: 0;
+  --mwnf-banner-background: var(--theme-dark);
+  --mwnf-banner-text-color: #ffffff;
+  --mwnf-banner-text-size: 1.25rem;
+  --mwnf-banner-max-height: 28rem;
+
+  /* ---------- Navigation ---------- */
+  --mwnf-nav-padding: 0;
+  --mwnf-nav-background: var(--theme-dark);
+  --mwnf-nav-border: none;
+  --mwnf-nav-gap: 0px;
+  --mwnf-nav-link-color: #ffffff;
+  --mwnf-nav-link-active-color: #ffffff;
+  --mwnf-nav-link-weight: 400;
+
+  /* ---------- Content ---------- */
+  --mwnf-content-padding-block: 0;
+  --mwnf-content-background: var(--background-color);
+
+  /* ---------- Hyperlinks ---------- */
+  --mwnf-hyperlinks-padding: 1rem;
+  --mwnf-hyperlinks-background: transparent;
+  --mwnf-hyperlinks-link-color: #0000ff;
+
+  /* ---------- Sponsors ---------- */
+  --mwnf-sponsors-padding: 1rem;
+  --mwnf-sponsors-background: transparent;
+  --mwnf-sponsors-gap: 1.5rem;
+  --mwnf-sponsors-logo-height: 2.5rem;
+
+  /* ---------- Footer ---------- */
+  --mwnf-footer-padding: 0.5rem;
+  --mwnf-footer-background: var(--theme-dark);
+  --mwnf-footer-text-color: #ffffff;
+  --mwnf-footer-text-size: 0.875rem;
+  --mwnf-footer-justify: center;
+  --mwnf-footer-gap: 0.5rem;
+  --mwnf-footer-link-color: #ffffff;
+
+  /* ---------- Header: mark, title cell, links, search, switcher ---------- */
+  --mwnf-header-gap: 0.875rem;
+  --mwnf-header-eyebrow-size: 0.875rem;
+  --mwnf-header-title-line-height: 1.05;
+  --mwnf-header-tools-size: 0.875rem;
+  --mwnf-header-link-color: #ffffff;
+  --mwnf-header-links-separator: "|";
+  --mwnf-header-control-border: 2px solid #ffffff;
+  --mwnf-header-control-background: #ffffff;
+  --mwnf-header-control-text: #1a1a1a;
+  --mwnf-header-button-border: 2px solid var(--theme-medium);
+  --mwnf-header-button-background: var(--theme-medium);
+  --mwnf-header-button-text: #ffffff;
+  --mwnf-header-button-active-background: var(--theme-medium);
+  --mwnf-header-button-active-text: #ffffff;
+
+  /* ---------- Banner: the tall home strip and the narrow section strip ---------- */
+  --mwnf-banner-media-background: var(--theme-dark);
+  --mwnf-banner-fallback: linear-gradient(160deg, var(--theme-dark), var(--theme-medium));
+  --mwnf-banner-strip-height: 45vh;
+  --mwnf-banner-strip-max-height: 450px;
+  --mwnf-banner-strip-eyebrow-size: 30px;
+  --mwnf-banner-strip-title-size: 70px;
+  --mwnf-banner-overlay-text: #ffffff;
+  --mwnf-banner-overlay-background: color-mix(in srgb, var(--theme-dark) 60%, transparent);
+  --mwnf-banner-caption-background: rgba(0, 0, 0, 0.6);
+  --mwnf-banner-caption-text: rgba(255, 255, 255, 0.85);
+  --mwnf-banner-section-height: 20vh;
+  --mwnf-banner-section-max-height: 150px;
+  --mwnf-banner-section-title-size: 190%;
+
+  /* ---------- Content: the record page ---------- */
+  /* The sheet as the legacy gallery set it: bold labels in the dark tone over
+     plain values, no cell borders, the photo gallery on the page ground. */
+  --mwnf-sheet-text-size: 0.9375rem;
+  --mwnf-sheet-label-size: 0.9375rem;
+  --mwnf-sheet-label-weight: 700;
+  --mwnf-sheet-label-color: var(--theme-dark);
+  --mwnf-sheet-gap: 0.75rem;
+  --mwnf-sheet-toggle-color: var(--theme-dark);
+  --mwnf-sheet-term-color: var(--theme-medium-dark);
+  --mwnf-sheet-term-underline: var(--theme-medium-dark);
+  --mwnf-sheet-section-border: 1px solid var(--theme-light);
+  --mwnf-sheet-heading-size: 1rem;
+  --mwnf-sheet-heading-color: var(--theme-dark);
+  --mwnf-credits-border: 1px solid var(--theme-light);
+  --mwnf-credits-size: 0.875rem;
+  --mwnf-credits-color: #1a1a1a;
+  --mwnf-languages-gap: 0.125rem;
+  --mwnf-languages-button-border: 1px solid var(--theme-medium);
+  --mwnf-languages-button-text: var(--theme-dark);
+  --mwnf-languages-button-size: 0.8125rem;
+  --mwnf-languages-active-background: var(--theme-medium-dark);
+  --mwnf-languages-active-text: #ffffff;
+  --mwnf-media-background: var(--background-color);
+  --mwnf-media-thumb-active-border: 2px solid var(--theme-medium-dark);
+  --mwnf-media-caption-color: #555555;
+  --mwnf-popover-border: 2px solid var(--theme-medium-dark);
+  --mwnf-popover-title-background: var(--theme-dark);
+  --mwnf-grid-card-background: color-mix(in srgb, var(--theme-dark) 93%, transparent);
+
+  /* ---------- Content: the lists ---------- */
+  /* The tile grid, the "filter further by" column, the summary line and the
+     page links as the legacy gallery drew them: white controls with the grey
+     border on the page-ground panel, the active page in the dark tone. */
+  --mwnf-grid-columns: 3;
+  --mwnf-grid-gap: 4px;
+  --mwnf-grid-tile-background: #ffffff;
+  --mwnf-grid-card-text: #ffffff;
+  --mwnf-filter-padding: 14px;
+  --mwnf-filter-border: none;
+  --mwnf-filter-background: var(--background-color);
+  --mwnf-filter-gap: 10px;
+  --mwnf-filter-title-size: 1rem;
+  --mwnf-filter-title-color: #1a1a1a;
+  --mwnf-filter-control-border: 1px solid #999999;
+  --mwnf-filter-control-background: #ffffff;
+  --mwnf-filter-control-padding: 5px;
+  --mwnf-filter-reset-background: var(--theme-medium-dark);
+  --mwnf-filter-reset-text: #ffffff;
+  --mwnf-summary-size: 0.9375rem;
+  --mwnf-summary-color: #1a1a1a;
+  --mwnf-summary-value-color: #1a1a1a;
+  --mwnf-summary-border: none;
+  --mwnf-summary-padding: 0;
+  --mwnf-pagination-size: 0.8125rem;
+  --mwnf-pagination-button-border: 1px solid var(--theme-medium);
+  --mwnf-pagination-button-background: #ffffff;
+  --mwnf-pagination-button-text: var(--theme-dark);
+  --mwnf-pagination-button-hover-background: var(--background-color);
+  --mwnf-pagination-active-background: var(--theme-medium-dark);
+  --mwnf-pagination-active-text: #ffffff;
+
+  /* ---------- Navigation: the menu button and the standing notice ---------- */
+  --mwnf-nav-toggle-background: var(--theme-dark);
+  --mwnf-nav-toggle-color: #ffffff;
+  --mwnf-nav-notice-margin: 0;
+  --mwnf-nav-notice-padding: 5px 15px;
+  --mwnf-nav-notice-size: 90%;
+  --mwnf-nav-notice-background: var(--theme-dark);
+  --mwnf-nav-notice-color: #ffffff;
+
+  /* ---------- Content classes ---------- */
+  /* The partner profile's "View objects" button and the loading message, in
+     legacy's own `.legacy-button`/`.loader` colours. */
+  --mwnf-button-background: var(--theme-medium-dark);
+  --mwnf-button-text: #ffffff;
+  --mwnf-button-hover-background: var(--theme-dark);
+  --mwnf-loader-text: var(--theme-dark);
+
+  /* ---------- Links ---------- */
+  /* Legacy's `$link-blue` for the content links (About, Credits, the search
+     how-to, the partner profile, the search results), and black for the
+     controls it drew as text: the Back button and the item sheet's museum and
+     catalogue links. */
+  --mwnf-link-text: #0000ff;
+  --mwnf-back-link-color: #000000;
+  --mwnf-dxa-item-link: #000000;
+
+  /* ---------- Content: PartnerListView ---------- */
+  /* The country-group heading, in the dark tone over a medium rule. */
+  --mwnf-partner-list-group-title-color: var(--theme-dark);
+  --mwnf-partner-list-group-border: 2px solid var(--theme-medium);
+
+  /* ---------- The family pages ---------- */
+  /* The partner profile's tab strip and headings in the dark tone; the bands
+     (language switcher, tab-strip surround, "Timeline for this Search" box)
+     on the page ground. */
+  --mwnf-dxa-heading-color: var(--theme-dark);
+  --mwnf-dxa-band-background: var(--background-color);
+}
+
+/* ── Page reset ──────────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: var(--background-color);
+  color: var(--mwnf-color-text);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow-x: hidden;
+}
+
+html[dir='rtl'] body { direction: rtl; }
+
+a { color: inherit; }
+
+/* ── The page column and the menu ────────────────────────────────────────── */
+/* The legacy gallery is a fixed-width page column with edge-to-edge chrome
+   inside it, a six-column menu bar, and an upper-cased title and menu. What
+   a token cannot express is set here, on PageShell's own classes. */
+
+/* A 1350px column centred on the viewport, with a drop shadow marking its
+   edges. */
+.mwnf-page {
+  width: 1350px;
+  max-width: 100vw;
+  box-shadow: 0 2px 8px 2px #707070;
+}
+
+/* The header stays put while the page scrolls; the navigation does not,
+   because the language switcher makes the header's height variable. */
+.mwnf-header {
+  position: sticky;
+  top: 0;
+  z-index: 90;
+}
+.mwnf-nav {
+  z-index: 89;
+}
+
+/* The header row: the mark, the centred title cell, the tools at the end. */
+.mwnf-header__inner {
+  min-height: 80px;
+  padding-inline: 14px 12px;
+}
+.mwnf-header__title {
+  text-transform: uppercase;
+}
+.mwnf-header__search-input {
+  margin-inline-end: 5px;
+}
+
+/* The menu: one equal column per entry, alternating the two menu shades,
+   upper-cased in CSS so each entry is stored in its natural case — the only
+   form a translator can work with, and the only form that means anything in
+   Arabic. */
+.mwnf-nav__bar {
+  display: block;
+}
+.mwnf-nav__links {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  width: 100%;
+}
+.mwnf-nav__links li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 28px;
+}
+.mwnf-nav__links li:nth-child(odd) { background: var(--theme-medium-dark); }
+.mwnf-nav__links li:nth-child(even) { background: var(--theme-light); }
+.mwnf-nav__link {
+  width: 100%;
+  text-align: center;
+  padding: 2px 4px;
+  text-transform: uppercase;
+}
+.mwnf-nav__link--active {
+  background: rgba(0, 0, 0, 0.18);
+  text-decoration: none;
+}
+.mwnf-nav__notice-title {
+  font-weight: 700;
+}
+
+/* The banner is edge to edge inside the column. */
+.mwnf-banner {
+  padding-inline: 0;
+}
+.mwnf-banner--strip .mwnf-banner__title {
+  font-weight: 700;
+}
+.mwnf-banner--strip .mwnf-banner__enter {
+  text-decoration: none;
+}
+
+/* The footer: one centred line of links and the copyright. */
+.mwnf-footer {
+  justify-content: center;
+  text-align: center;
+}
+
+@media only screen and (max-width: 974px) {
+  .mwnf-nav__links { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media only screen and (max-width: 599px) {
+  .mwnf-header__inner { min-height: 65px; }
+  .mwnf-header__lockup { flex-basis: 100%; order: 3; }
+  .mwnf-nav__links { display: none; }
+  .mwnf-nav--open .mwnf-nav__links { display: grid; grid-template-columns: 1fr; }
+  .mwnf-nav__toggle { width: 100%; justify-content: center; font-size: 20px; }
+}

package/src/tokens.reference.css

@@ -15,7 +15,9 @@
   /* --mwnf-weight-heading: 700;                     Weight for titles */
   /* --mwnf-color-text: #1c1c1c;                     Default text color */
   /* --mwnf-color-background: #ffffff;               Page background */
-  /* --mwnf-color-accent: #1c1c1c;                   Links and accents */
+  /* --mwnf-color-accent: #1c1c1c;                   Surfaces and accents (menu, bands, active states); never a text colour */
+  /* --mwnf-link-text: #0000ff;                      Every link; a component with its own link token falls back to this */
+  /* --mwnf-link-hover-text: var(--mwnf-link-text);  A link's colour on hover, where it changes */
   /* --mwnf-color-muted: #555555;                    Secondary text */
   /* --mwnf-color-border: #dddddd;                   Default border color */
   /* --mwnf-content-width: 64rem;                    Max content width (all sections) */
@@ -191,6 +193,7 @@
   /* --mwnf-card-accordion-child-gap: 0.5rem;        Accordion variant gap between subsections */
   /* --mwnf-card-accordion-child-padding: 0.5rem 0;  Accordion variant subsection padding */
   /* --mwnf-card-accordion-child-border: 1px solid #dddddd; Border above accordion subsections */
+  /* --mwnf-card-accordion-child-hover-color: var(--mwnf-link-hover-text); Accordion variant subsection link on hover */
 
   /* ---------- Content: FeaturedRecord ---------- */
   /* --mwnf-featured-heading-size: 1rem;             Heading over the spotlight */
@@ -443,7 +446,7 @@
   /* --mwnf-prose-paragraph-gap: 1rem;               Gap between paragraphs */
   /* --mwnf-prose-list-indent: 1.5em;                Left indent of lists */
   /* --mwnf-prose-list-item-gap: 0.5rem;             Gap between list items */
-  /* --mwnf-prose-link-hover-color: #555555;         Link hover color */
+  /* --mwnf-prose-link-hover-color: var(--mwnf-link-hover-text, #555555); Link hover color */
   /* --mwnf-link-list-gap: 1.5rem;                   Gap between sections */
   /* --mwnf-link-list-back-size: 0.8125rem;          Back link size */
   /* --mwnf-link-list-title-size: 1.5rem;            Page title size */
@@ -454,6 +457,7 @@
   /* --mwnf-link-list-heading-color: inherit;        Group heading color */
   /* --mwnf-link-list-item-gap: 0.5rem;              Gap between links */
   /* --mwnf-link-list-note-gap: 0.25rem;             Gap between link and note */
+  /* --mwnf-link-list-link-color: var(--mwnf-link-text); Link color */
   /* --mwnf-link-list-link-weight: 500;              Link font weight */
   /* --mwnf-link-list-note-size: 0.8125rem;          Link note size */
   /* --mwnf-link-list-note-color: #555555;           Link note color */
@@ -498,6 +502,7 @@
   /* --mwnf-partner-list-group-title-color: inherit; Its color */
   /* --mwnf-partner-list-group-marker-closed: '▸ ';  The accordion's own disclosure triangle, collapsed */
   /* --mwnf-partner-list-group-marker-open: '▾ ';    Its expanded form */
+  /* --mwnf-partner-list-group-marker-color: inherit; The triangle's color (the heading's own by default) */
   /* --mwnf-partner-list-tier-gap: 0.5rem;           Space above a tier, and above the associated column */
   /* --mwnf-partner-list-tier-border: 1px dashed #dddddd; Line above the associated column */
   /* --mwnf-partner-list-tier-label-size: 0.75rem;   "Associated Partners" size */
@@ -505,8 +510,6 @@
   /* --mwnf-partner-list-row-inline-gap: 0.5rem;     Gap between a row's own logo, name and count */
   /* --mwnf-partner-list-logo-width: 6rem;           Row logo max width */
   /* --mwnf-partner-list-logo-height: 3rem;          Row logo max height */
-  /* --mwnf-partner-list-name-weight: 500;           Row name font weight */
-  /* --mwnf-partner-list-meta-size: 0.8125rem;       The item-count line's size */
   /* --mwnf-partner-list-children-indent: 1.5rem;    Indent of a nested (`nested: true`) associated row */
   /* --mwnf-partner-list-empty-padding: 1rem;        Empty state padding */
   /* --mwnf-partner-list-empty-size: 0.875rem;       Empty state size */
@@ -523,6 +526,9 @@
   /* --mwnf-view-back-size: 0.8125rem;               The record page's back link, the essay's panel link and nav row */
   /* --mwnf-view-back-color: inherit;                Its color */
   /* --mwnf-view-status-size: 0.75rem;               "Loading…" on the record page and the essay */
+  /* --mwnf-catalogue-boxed-gap: 1rem;               `boxed` results (framed by the panel's tokens): the gap under the filters */
+  /* --mwnf-catalogue-boxed-year-width: 6.25rem;     `boxed` results: a year field's width */
+  /* --mwnf-record-spaced-gap: 1.25rem;             `spaced` record: the gap under the pictures and the sheet */
 
   /* ---------- Content: EssayView ---------- */
   /* --mwnf-view-essay-breadcrumb-gap: 0.375rem;     Gap between breadcrumb parts */
@@ -589,7 +595,7 @@
   /* ---------- Content: PartnerPanel ---------- */
   /* --mwnf-partner-name-color: inherit;               Name, section and contact headings */
   /* --mwnf-partner-name-weight: 700;                  Name weight (page, heading) */
-  /* --mwnf-partner-link-color: var(--mwnf-color-accent);  Links: name, actions, contact, homepage */
+  /* --mwnf-partner-link-color: var(--mwnf-link-text);  Links: name, contact, homepage, actions (not one drawn as a button) */
   /* --mwnf-partner-muted-color: var(--mwnf-color-muted);  Location, count, dividers */
   /* --mwnf-partner-divider-gap: 0.375rem;             Space around a | divider */
   /* --mwnf-partner-logo-width: 7.5rem;                Line/summary logo, max width */
@@ -681,6 +687,7 @@
   /* --mwnf-back-link-button-padding: 0.375rem 0.75rem; Back link button padding */
   /* --mwnf-back-link-size: 0.875rem;                  Back link text size */
   /* --mwnf-back-link-line-height: 1;                  Back link line height */
+  /* --mwnf-back-link-color: var(--mwnf-link-text);    Back link color */
 
   /* ---------- Content: SearchFormView ---------- */
   /* --mwnf-search-form-row-gap: 0.5rem;             Gap between a row's own parts, and between facet columns */
@@ -782,13 +789,12 @@
   /* --mwnf-loader-text: #1c1c1c;                    Loader text color */
   /* --mwnf-loader-size: 0.875rem;                   Loader text size */
 
-  /* --mwnf-link-text: #0000ff;                      Link text color */
 
   /* ---------- DXA family pages (src/dxa/) ---------- */
   /* --mwnf-dxa-heading-color: #1c1c1c;              Partner name / profile heading color */
   /* --mwnf-dxa-band-background: #f0f0f0;            Language switcher / tab strip / timeline-link box background */
   /* --mwnf-dxa-item-background: #ffffff;            Item page ground (white on a gallery's tinted page) */
-  /* --mwnf-dxa-item-link: var(--mwnf-color-accent); Item sheet value links */
+  /* --mwnf-dxa-item-link: var(--mwnf-link-text);   Item sheet value links */
   /* --mwnf-dxa-theme-background: #ffffff;           Exhibition theme pages: the ground (legacy's secondary colour) */
   /* --mwnf-dxa-theme-text: #000000;                 Their text and tour links (secondary text colour) */
   /* --mwnf-dxa-theme-contrast: #64bfd9;             The heading band and link hover (contrast colour) */