@nu-appdev/northwestern-starlight-theme 1.1.1 → 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,12 +1,13 @@
 /* ==========================================================================
-   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 {
-    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content) {
+    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content, [data-footnote-ref], [data-footnote-backref]) {
         padding-bottom: 2px;
         font-weight: 700;
         color: var(--sl-color-accent);
@@ -15,7 +16,8 @@
         transition: all var(--nu-transition-default);
     }
 
-    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content):hover {
+    .sl-markdown-content
+        a:not(.anchor-link, [role="tab"], .not-content, [data-footnote-ref], [data-footnote-backref]):hover {
         text-decoration: none;
         border-bottom-style: solid;
     }
@@ -55,48 +57,12 @@
     }
 
     .sl-markdown-content hr:not(:where(.not-content *)) {
-        height: 3px;
+        height: 1px;
         margin: 2.5rem 0;
-        background: var(--nu-purple-10);
+        background: var(--nu-border-color);
         border: 0;
     }
 
-    :root:not([data-theme="light"]) .sl-markdown-content hr:not(:where(.not-content *)) {
-        background: var(--nu-purple-140);
-    }
-
-    .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;
     }
@@ -269,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;
@@ -75,8 +71,8 @@
     }
 
     .nu-mermaid-btn:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 0.25rem var(--nu-focus-shadow-color);
+        outline: 2px solid var(--sl-color-accent);
+        outline-offset: -2px;
     }
 
     .nu-mermaid-btn:hover {
@@ -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);
     }
@@ -144,6 +141,11 @@
         height: 16px;
     }
 
+    .nu-mermaid-overlay-controls .nu-mermaid-btn:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 2px rgb(255 255 255 / 60%);
+    }
+
     .nu-mermaid-overlay-controls .nu-mermaid-btn:hover {
         color: #fff;
         background: rgb(255 255 255 / 25%);
@@ -166,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 {
@@ -183,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 {
@@ -199,4 +221,59 @@
         background: transparent !important;
         border: none !important;
     }
+
+    .nu-mermaid-zoom-badge {
+        position: absolute;
+        right: 1rem;
+        bottom: 1rem;
+        padding: 0.2rem 0.5rem;
+        font-family: var(--nu-font-mono, ui-monospace, monospace);
+        font-size: 0.75rem;
+        line-height: 1;
+        color: rgb(255 255 255 / 70%);
+        pointer-events: none;
+        background: rgb(0 0 0 / 35%);
+
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefix */
+        -webkit-backdrop-filter: blur(6px);
+        backdrop-filter: blur(6px);
+    }
+
+    :root[data-theme="light"] .nu-mermaid-zoom-badge {
+        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,11 +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,
+    .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;
@@ -102,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 {
@@ -139,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);
     }
 
@@ -148,7 +198,6 @@
     }
 
     .right-sidebar-panel a[aria-current="true"] {
-        padding-left: 0.8rem;
         font-weight: 600;
         border-left-color: var(--sl-color-accent);
     }
@@ -206,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 {};