@nu-appdev/northwestern-starlight-theme 1.2.0 → 1.3.0

package/src/styles/components/tooltip.css

@@ -0,0 +1,145 @@
+/* ==========================================================================
+   Tooltip — Inline hover/focus definitions
+   ========================================================================== */
+
+/* stylelint-disable selector-class-pattern */
+
+@layer northwestern {
+    .nu-tooltip {
+        position: relative;
+        display: inline;
+        cursor: help;
+    }
+
+    .nu-tooltip__trigger {
+        position: relative;
+    }
+
+    .nu-tooltip--underline .nu-tooltip__trigger {
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-decoration-style: dotted;
+        text-decoration-color: var(--nu-color-text-muted);
+        text-underline-offset: 3px;
+        transition: text-decoration-color var(--nu-transition-fast);
+    }
+
+    .nu-tooltip--underline:hover .nu-tooltip__trigger,
+    .nu-tooltip--underline:focus-within .nu-tooltip__trigger {
+        text-decoration-color: var(--sl-color-text-accent);
+    }
+
+    .nu-tooltip__content {
+        position: fixed;
+        z-index: 1000;
+        box-sizing: border-box;
+        width: max-content;
+        max-width: 280px;
+        padding: 0.375rem 0.625rem;
+        margin: 0;
+        font-family: var(--nu-font-body);
+        font-size: var(--sl-text-xs);
+        font-weight: 400;
+        line-height: 1.5;
+        color: var(--nu-color-text);
+        text-align: left;
+        background-color: var(--nu-card-bg);
+        border: 1px solid var(--nu-border-color);
+        box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+        opacity: 0;
+        transition: opacity var(--nu-transition-fast);
+    }
+
+    :root:not([data-theme="light"]) .nu-tooltip__content {
+        box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
+    }
+
+    /* Rich content slot styling */
+    .nu-tooltip__content p,
+    .nu-tooltip__content > :first-child {
+        margin-top: 0;
+    }
+
+    .nu-tooltip__content p,
+    .nu-tooltip__content > :last-child {
+        margin-bottom: 0;
+    }
+
+    .nu-tooltip__trigger p {
+        display: inline;
+        margin: 0;
+    }
+
+    .nu-tooltip__content strong {
+        font-weight: 600;
+        color: inherit;
+    }
+
+    .nu-tooltip__content code {
+        padding: 0.1rem 0.25rem;
+        font-family: var(--sl-font-system-mono);
+        font-size: 0.9em;
+        background-color: rgb(0 0 0 / 6%);
+    }
+
+    :root:not([data-theme="light"]) .nu-tooltip__content code {
+        background-color: rgb(255 255 255 / 8%);
+    }
+
+    .nu-tooltip__content[popover] {
+        inset: unset;
+        overflow: visible;
+    }
+
+    .nu-tooltip__content:popover-open {
+        opacity: 1;
+    }
+
+    .nu-tooltip__content::backdrop {
+        display: none;
+    }
+
+    .nu-tooltip__arrow {
+        position: absolute;
+        left: 50%;
+        width: 8px;
+        height: 8px;
+        background-color: var(--nu-card-bg);
+        border-color: var(--nu-border-color);
+        border-style: solid;
+        transform: translateX(-50%) rotate(45deg);
+    }
+
+    .nu-tooltip--top .nu-tooltip__arrow {
+        bottom: -5px;
+        border-top: none;
+        border-right-width: 1px;
+        border-bottom-width: 1px;
+        border-left: none;
+    }
+
+    .nu-tooltip--bottom .nu-tooltip__arrow {
+        top: -5px;
+        border-top-width: 1px;
+        border-right: none;
+        border-bottom: none;
+        border-left-width: 1px;
+    }
+
+    .nu-tooltip--custom .nu-tooltip__content {
+        color: var(--nu-tip-text);
+        background-color: var(--nu-tip-bg);
+        border-color: var(--nu-tip-border);
+        box-shadow: none;
+    }
+
+    .nu-tooltip--custom .nu-tooltip__arrow {
+        background-color: var(--nu-tip-arrow);
+        border-color: var(--nu-tip-border);
+    }
+
+    .nu-tooltip__trigger:focus-visible {
+        outline: 2px solid var(--nu-focus-ring);
+        outline-offset: 2px;
+    }
+}

package/src/styles/content.css

@@ -1,8 +1,9 @@
 /* ==========================================================================
-   Content — Markdown Prose, Badges, Tables, Buttons
+   Content — Links, Lists, Figures, Horizontal Rules, Badges, Asides, Buttons
 
-   Encapsulates rendered markdown content, prose-adjacent Starlight components,
-   and content-area UI such as badges, asides, tables, and link buttons.
+   Core markdown prose styling. Component-scoped styles (tables, blockquotes,
+   footnotes, cards, code, tabs, steps) live in their own files under
+   src/styles/components/.
    ========================================================================== */
 
 @layer northwestern {
@@ -21,80 +22,6 @@
         border-bottom-style: solid;
     }
 
-    /* Footnote references — superscript markers with brackets */
-    .sl-markdown-content a[data-footnote-ref] {
-        font-weight: 600;
-        line-height: 1;
-        vertical-align: super;
-        color: var(--sl-color-accent);
-        text-decoration: none;
-    }
-
-    .sl-markdown-content a[data-footnote-ref]::before {
-        content: "[";
-    }
-
-    .sl-markdown-content a[data-footnote-ref]::after {
-        content: "]";
-    }
-
-    .sl-markdown-content a[data-footnote-ref]:hover {
-        text-decoration: underline;
-    }
-
-    /* Footnotes section */
-    .sl-markdown-content section[data-footnotes] {
-        padding-top: 1.5rem;
-        margin-top: 2.5rem;
-        font-size: 0.875rem;
-        color: var(--nu-color-text-muted);
-        border-top: 1px solid var(--nu-border-color);
-    }
-
-    /* Hide the default <hr> that remark-gfm inserts before footnotes */
-    .sl-markdown-content section[data-footnotes] > :first-child:is(hr) {
-        display: none;
-    }
-
-    /* Collapse the heading wrapper around the sr-only "Footnotes" label */
-    .sl-markdown-content section[data-footnotes] > .sl-heading-wrapper {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        white-space: nowrap;
-        border: 0;
-        clip-path: inset(50%);
-    }
-
-    .sl-markdown-content section[data-footnotes] ol {
-        padding-left: 1.5rem;
-    }
-
-    .sl-markdown-content section[data-footnotes] li {
-        padding-left: 0.25rem;
-    }
-
-    .sl-markdown-content section[data-footnotes] li + li {
-        margin-top: 0.5rem;
-    }
-
-    .sl-markdown-content section[data-footnotes] a[data-footnote-backref] {
-        margin-left: 0.25em;
-        font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
-        font-size: 1em;
-        font-weight: 700;
-        color: var(--sl-color-accent);
-        text-decoration: none;
-        font-variant-emoji: text;
-    }
-
-    .sl-markdown-content section[data-footnotes] a[data-footnote-backref]:hover {
-        border-bottom: 1px solid var(--sl-color-accent);
-    }
-
     .sl-markdown-content ul:not(:where(.not-content *)) {
         padding-left: 1.25rem;
         list-style: none;
@@ -136,38 +63,6 @@
         border: 0;
     }
 
-    .sl-markdown-content blockquote:not(:where(.not-content *)) {
-        padding: 1rem 1.5rem;
-        margin: 2rem 0;
-        color: var(--nu-color-text);
-        background: rgb(228 224 238 / 42%);
-        border-inline-start: 10px solid var(--nu-purple-100);
-    }
-
-    .sl-markdown-content blockquote:not(:where(.not-content *)) p:last-child {
-        margin-bottom: 0;
-    }
-
-    .sl-markdown-content blockquote:not(:where(.not-content *)) cite,
-    .sl-markdown-content blockquote:not(:where(.not-content *)) footer {
-        display: block;
-        margin-top: 0.75rem;
-        font-size: var(--sl-text-sm);
-        font-style: normal;
-        font-weight: 700;
-        color: var(--nu-color-link);
-    }
-
-    :root:not([data-theme="light"]) .sl-markdown-content blockquote:not(:where(.not-content *)) {
-        background: rgb(48 16 78 / 35%);
-        border-inline-start-color: var(--nu-purple-40);
-    }
-
-    :root:not([data-theme="light"]) .sl-markdown-content blockquote:not(:where(.not-content *)) cite,
-    :root:not([data-theme="light"]) .sl-markdown-content blockquote:not(:where(.not-content *)) footer {
-        color: var(--nu-purple-30);
-    }
-
     .sl-markdown-content figure:not(:where(.not-content *)) {
         margin: 2rem 0;
     }
@@ -340,57 +235,6 @@
         background-color: rgb(239 85 63 / 8%) !important;
     }
 
-    .sl-markdown-content table:not(:where(.not-content *)) {
-        display: table;
-        width: 100%;
-        text-indent: 0;
-        border-collapse: collapse;
-        border-color: var(--nu-border-color);
-    }
-
-    .sl-markdown-content table:not(:where(.not-content *)) > thead > tr > th {
-        padding: 0.5rem 1rem;
-        font-family: var(--nu-font-heading);
-        font-weight: 600;
-        color: var(--nu-black-80);
-        text-align: left;
-        background-color: var(--nu-purple-surface);
-        border: 1px solid var(--nu-border-color);
-    }
-
-    :root:not([data-theme="light"]) .sl-markdown-content table:not(:where(.not-content *)) > thead > tr > th {
-        color: var(--nu-color-text);
-        background-color: rgb(78 42 132 / 14%);
-    }
-
-    .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr > td {
-        padding: 0.5rem 1rem;
-        text-align: left;
-        border: 1px solid var(--nu-border-color);
-    }
-
-    .sl-markdown-content table:not(:where(.not-content *)) > thead > tr > th[align="right"],
-    .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr > td[align="right"] {
-        text-align: right;
-    }
-
-    .sl-markdown-content table:not(:where(.not-content *)) > thead > tr > th[align="center"],
-    .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr > td[align="center"] {
-        text-align: center;
-    }
-
-    .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr:nth-child(even) {
-        background-color: #f3f4f6;
-    }
-
-    :root:not([data-theme="light"])
-        .sl-markdown-content
-        table:not(:where(.not-content *))
-        > tbody
-        > tr:nth-child(even) {
-        background-color: #1e1e1e;
-    }
-
     .sl-link-button {
         transition:
             background-color var(--nu-transition-fast),

package/src/styles/layers.css

@@ -1,8 +1 @@
-/* ==========================================================================
-   Layers — Theme Cascade Order
-
-   Encapsulates the cascade layer ordering shared by Starlight and the
-   Northwestern theme so later files can rely on a stable layer stack.
-   ========================================================================== */
-
 @layer starlight, northwestern;

package/src/styles/mermaid-toolbar.css

@@ -1,15 +1,12 @@
 /* ==========================================================================
    Mermaid Toolbar — Diagram Interaction Layer
-
-   Encapsulates hover actions, fullscreen overlay controls, and the pan/zoom
-   viewport used by the Mermaid diagram interaction layer.
    ========================================================================== */
 
 @layer northwestern {
     .nu-mermaid-toolbar {
         position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
+        top: 0;
+        right: 1rem;
         z-index: 2;
         display: flex;
         gap: 1px;
@@ -31,7 +28,6 @@
         opacity: 1;
     }
 
-    /* Touch devices can't hover — keep toolbar visible */
     @media (hover: none) {
         .nu-mermaid-toolbar {
             opacity: 0.8;
@@ -110,6 +106,7 @@
         z-index: 9999;
         display: flex;
         flex-direction: column;
+        outline: none;
         background: #f3f5f7;
         transition: opacity 200ms ease;
     }
@@ -124,8 +121,8 @@
         flex-shrink: 0;
         gap: 0.25rem;
         align-items: center;
-        height: var(--sl-nav-height);
-        padding: 0 1.5rem;
+        min-height: var(--sl-nav-height);
+        padding: 0.5rem var(--sl-nav-pad-x, 1.5rem);
         background: var(--nu-topbar-bg);
         border-bottom: 1px solid var(--nu-border-color);
     }
@@ -171,13 +168,27 @@
 
     .nu-mermaid-overlay-controls .nu-mermaid-close {
         color: #fff;
-        background: rgb(255 255 255 / 20%);
-        border-color: rgb(255 255 255 / 30%);
+        background: rgb(255 255 255 / 15%);
+        border-color: rgb(255 255 255 / 25%);
     }
 
     .nu-mermaid-overlay-controls .nu-mermaid-close:hover {
-        background: rgb(255 255 255 / 35%);
-        border-color: rgb(255 255 255 / 40%);
+        background: rgb(255 255 255 / 25%);
+    }
+
+    @media (width < 50rem) {
+        .nu-mermaid-overlay-controls [data-action="zoom-in"],
+        .nu-mermaid-overlay-controls [data-action="zoom-out"],
+        .nu-mermaid-overlay-controls [data-action="zoom-reset"],
+        .nu-mermaid-overlay-controls .nu-mermaid-separator {
+            display: none;
+        }
+
+        .nu-mermaid-overlay-controls .nu-mermaid-close {
+            width: var(--sl-menu-button-size, 2rem);
+            height: var(--sl-menu-button-size, 2rem);
+            padding: 0;
+        }
     }
 
     .nu-mermaid-viewport {
@@ -188,6 +199,12 @@
         overflow: hidden;
         touch-action: none;
         cursor: grab;
+        background-image: radial-gradient(circle, rgb(0 0 0 / 5%) 0.75px, transparent 0.75px);
+        background-size: 28px 28px;
+    }
+
+    :root:not([data-theme="light"]) .nu-mermaid-viewport {
+        background-image: radial-gradient(circle, rgb(255 255 255 / 5%) 0.75px, transparent 0.75px);
     }
 
     .nu-mermaid-viewport:active {
@@ -216,7 +233,6 @@
         color: rgb(255 255 255 / 70%);
         pointer-events: none;
         background: rgb(0 0 0 / 35%);
-        border-radius: 0.25rem;
 
         /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefix */
         -webkit-backdrop-filter: blur(6px);
@@ -227,4 +243,37 @@
         color: rgb(0 0 0 / 55%);
         background: rgb(255 255 255 / 50%);
     }
+
+    .nu-mermaid-toast {
+        position: absolute;
+        right: 1rem;
+        bottom: 3rem;
+        z-index: 1;
+        padding: 0.5rem 0.875rem;
+        font-family: var(--nu-font-body, sans-serif);
+        font-size: 0.8125rem;
+        font-weight: 600;
+        color: #fff;
+        pointer-events: none;
+        background: color-mix(in srgb, var(--nu-color-success) 85%, #fff);
+        opacity: 0;
+        transform: translateY(4px);
+        transition:
+            opacity 200ms ease,
+            transform 200ms ease;
+    }
+
+    .nu-mermaid-toast-visible {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    @media (width < 50rem) {
+        .nu-mermaid-toast {
+            right: 1rem;
+            bottom: 4rem;
+            left: 1rem;
+            text-align: center;
+        }
+    }
 }

package/src/styles/navigation.css

@@ -9,22 +9,25 @@
     .site-title,
     .header > a,
     .header > nav a,
-    .social-icons a,
-    starlight-theme-select,
-    starlight-theme-select label,
-    starlight-theme-select select,
-    starlight-theme-select svg,
-    northwestern-theme-toggle,
-    northwestern-theme-toggle button,
-    northwestern-theme-toggle svg,
+    .header .social-icons a,
     starlight-menu-button,
     starlight-menu-button button {
         color: var(--nu-topbar-text) !important;
         fill: var(--nu-topbar-text) !important;
     }
 
+    .header northwestern-theme-toggle,
+    .header northwestern-theme-toggle button,
+    .header northwestern-theme-toggle svg,
+    .header starlight-theme-select,
+    .header starlight-theme-select label,
+    .header starlight-theme-select select,
+    .header starlight-theme-select svg {
+        color: var(--nu-topbar-text) !important;
+        fill: var(--nu-topbar-text) !important;
+    }
+
     starlight-menu-button button,
-    northwestern-theme-toggle button,
     .header northwestern-theme-toggle button {
         background: rgb(255 255 255 / 15%) !important;
         border: 1px solid rgb(255 255 255 / 25%) !important;
@@ -33,18 +36,57 @@
     }
 
     starlight-menu-button button:hover,
-    northwestern-theme-toggle button:hover,
     .header northwestern-theme-toggle button:hover {
         background: rgb(255 255 255 / 25%) !important;
     }
 
     starlight-menu-button button:focus-visible,
-    northwestern-theme-toggle button:focus-visible,
     .header northwestern-theme-toggle button:focus-visible {
         outline: none !important;
         box-shadow: 0 0 0 2px rgb(255 255 255 / 60%) !important;
     }
 
+    @media (width < 50rem) {
+        .sidebar-pane .actions {
+            align-items: center;
+        }
+
+        .sidebar-pane northwestern-theme-toggle button {
+            width: 2.5rem;
+            height: 2.5rem;
+            color: var(--nu-color-text) !important;
+            background: var(--nu-hover-bg) !important;
+            border: 1px solid var(--nu-border-color) !important;
+        }
+
+        .sidebar-pane northwestern-theme-toggle svg {
+            fill: var(--nu-color-text) !important;
+        }
+
+        .sidebar-pane .social-icons {
+            align-items: center;
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+
+        .sidebar-pane .social-icons a {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 2.5rem;
+            height: 2.5rem;
+            padding: 0 !important;
+            margin: 0 !important;
+            color: var(--nu-color-text) !important;
+            background: var(--nu-hover-bg);
+            border: 1px solid var(--nu-border-color);
+        }
+
+        .sidebar-pane .social-icons svg {
+            fill: var(--nu-color-text) !important;
+        }
+    }
+
     @media (width < 50rem) {
         site-search button {
             color: var(--nu-topbar-text) !important;
@@ -109,27 +151,29 @@
         border-color: var(--nu-black-20) !important;
     }
 
-    /* Starlight owns these borders; force them onto the shared theme token. */
     .header,
     .sidebar-pane {
         border-color: var(--nu-border-color) !important;
     }
 
+    nav.sidebar a {
+        border-left: 3px solid transparent;
+    }
+
     nav.sidebar a:hover {
         background-color: var(--nu-purple-surface) !important;
     }
 
     nav.sidebar a[aria-current="page"] {
-        padding-left: 0.8rem;
         font-weight: 700;
         color: var(--nu-color-link) !important;
         background-color: var(--nu-purple-surface) !important;
-        border-left: 3px solid var(--nu-color-link);
+        border-left-color: var(--nu-color-link);
     }
 
     nav.sidebar a[aria-current="true"] {
         font-weight: 600;
-        border-left: 3px solid var(--nu-color-link);
+        border-left-color: var(--nu-color-link);
     }
 
     :root:not([data-theme="light"]) nav.sidebar a:hover {
@@ -146,7 +190,6 @@
         border-left: 3px solid transparent;
         transition:
             border-color var(--nu-transition-fast),
-            padding-left var(--nu-transition-fast),
             font-weight var(--nu-transition-fast);
     }
 
@@ -155,7 +198,6 @@
     }
 
     .right-sidebar-panel a[aria-current="true"] {
-        padding-left: 0.8rem;
         font-weight: 600;
         border-left-color: var(--sl-color-accent);
     }
@@ -213,4 +255,11 @@
     .sidebar-content a[href="/changelog/"]:hover span {
         opacity: 1;
     }
+
+    dialog button:focus-visible,
+    dialog input:focus-visible,
+    dialog a:focus-visible {
+        outline: 2px solid var(--nu-focus-ring) !important;
+        outline-offset: 2px;
+    }
 }

package/src/styles/openapi.css

@@ -1,8 +1,5 @@
 /* ==========================================================================
    OpenAPI — Scoped overrides for starlight-openapi plugin
-
-   Encapsulates method badges plus OpenAPI content panels, rows, fields,
-   and controls rendered inside markdown content.
    ========================================================================== */
 
 /* stylelint-disable selector-class-pattern */

package/src/styles/theme.css

@@ -1,11 +1,7 @@
 /* ==========================================================================
    Theme — Starlight Variable Mapping
-
-   Encapsulates the mapping from Northwestern design tokens onto Starlight's
-   theme variables, plus global paint and border-radius overrides.
    ========================================================================== */
 
-/* Unlayered — paints immediately to prevent white flash on load */
 html {
     background-color: #18181b;
 }

package/src/styles/typography.css

@@ -165,6 +165,10 @@
     }
 
     .site-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-family: var(--nu-font-heading);
+        font-size: clamp(1rem, 3.5vw, 1.125rem);
+        white-space: nowrap;
     }
 }

package/src/styles/variables.css

@@ -1,8 +1,5 @@
 /* ==========================================================================
    Variables — Northwestern Design Tokens
-
-   Encapsulates the shared design-token source of truth for color, typography,
-   motion, surface, focus, and light/dark layout values.
    ========================================================================== */
 
 @layer northwestern {

package/src/virtual.d.ts

@@ -1,3 +1,12 @@
+declare global {
+    var __nuPropertySlugs:
+        | {
+              page: string;
+              counts: Map<string, number>;
+          }
+        | undefined;
+}
+
 declare module "virtual:northwestern-theme/config" {
     const config: {
         homepage: {
@@ -8,3 +17,5 @@ declare module "virtual:northwestern-theme/config" {
     };
     export default config;
 }
+
+export {};