@nu-appdev/northwestern-starlight-theme 1.0.0

package/src/styles/components/mermaid.css

@@ -0,0 +1,86 @@
+/* ==========================================================================
+   Mermaid — Structural SVG Overrides
+
+   Only includes CSS that cannot be expressed through mermaid themeVariables:
+   font enforcement, HTML label backgrounds, and diagram-specific structural
+   fixes. Colors and contrast are handled by the TS config in mermaid.ts.
+   ========================================================================== */
+
+/* stylelint-disable selector-class-pattern, order/properties-order */
+
+/* Container — card-like border matching cards.css */
+pre.mermaid,
+.mermaid {
+    padding: 1.5rem;
+    border: 1px solid var(--nu-border-color) !important;
+}
+
+/* Font — mermaid applies font via inline style, CSS !important needed */
+.mermaid text {
+    font-family: var(--nu-font-body) !important;
+}
+
+/* HTML labels inherit color from parent instead of mermaid's inline style */
+.mermaid .nodeLabel p {
+    color: inherit !important;
+}
+
+/* Edge label HTML elements — mermaid uses <div> with inline background */
+.mermaid .edgeLabel,
+.mermaid .edgeLabel p {
+    color: var(--nu-color-text, #342f2e) !important;
+    background: var(--nu-card-bg, #fff) !important;
+}
+
+.mermaid .labelBkg {
+    color: var(--nu-color-text, #342f2e) !important;
+    background: var(--nu-card-bg, #fff) !important;
+}
+
+/* Class diagram: edge labels on purple bg */
+.mermaid svg.classDiagram .labelBkg,
+.mermaid svg.classDiagram .labelBkg .edgeLabel,
+.mermaid svg.classDiagram .labelBkg .edgeLabel p {
+    background: var(--nu-purple-100) !important;
+}
+
+:root:not([data-theme="light"]) .mermaid svg.classDiagram .labelBkg,
+:root:not([data-theme="light"]) .mermaid svg.classDiagram .labelBkg .edgeLabel,
+:root:not([data-theme="light"]) .mermaid svg.classDiagram .labelBkg .edgeLabel p {
+    background: var(--nu-purple-80) !important;
+}
+
+/* Class diagram: first attribute row header tint */
+.mermaid svg.classDiagram .node.default > .row-rect-odd:nth-child(2) path[fill*="hsl"] {
+    fill: #fff !important;
+}
+
+:root:not([data-theme="light"]) .mermaid svg.classDiagram .node.default > .row-rect-odd:nth-child(2) path[fill*="hsl"] {
+    fill: var(--nu-card-bg, #292929) !important;
+}
+
+/* ER diagram: HTML label text readability */
+.mermaid svg.erDiagram .edgeLabel,
+.mermaid svg.erDiagram .edgeLabel p,
+.mermaid svg.erDiagram .edgeLabel span {
+    color: var(--nu-color-text, #342f2e) !important;
+}
+
+/* ER attribute labels: dark text on light rows */
+.mermaid svg.erDiagram .label.attribute-type .nodeLabel,
+.mermaid svg.erDiagram .label.attribute-name .nodeLabel,
+.mermaid svg.erDiagram .label.attribute-keys .nodeLabel,
+.mermaid svg.erDiagram .label.attribute-comment .nodeLabel {
+    color: var(--nu-color-text, #342f2e) !important;
+}
+
+/* ER entity name headers: white text on purple */
+.mermaid svg.erDiagram .label.name .nodeLabel {
+    color: #fff !important;
+}
+
+/* Sequence diagram: actor label text outside the purple box */
+.mermaid [class*="actor-bottom"] [class*="actor"] tspan,
+.mermaid [class*="actor-top"] [class*="actor"] tspan {
+    fill: var(--nu-color-text, #342f2e) !important;
+}

package/src/styles/components/steps.css

@@ -0,0 +1,28 @@
+/* ==========================================================================
+   Steps — Ordered Step Indicators
+
+   Encapsulates Starlight step marker styling, including numbered bullets and
+   connector lines across light and dark modes.
+   ========================================================================== */
+
+@layer northwestern {
+    .sl-steps > li::before {
+        font-family: var(--nu-font-heading);
+        font-weight: 700;
+        color: #fff !important;
+        background-color: var(--nu-purple-100) !important;
+        box-shadow: none !important;
+    }
+
+    :root:not([data-theme="light"]) .sl-steps > li::before {
+        background-color: var(--nu-purple-80) !important;
+    }
+
+    .sl-steps > li::after {
+        background-color: var(--nu-purple-20) !important;
+    }
+
+    :root:not([data-theme="light"]) .sl-steps > li::after {
+        background-color: var(--nu-purple-80) !important;
+    }
+}

package/src/styles/components/tabs.css

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   Tabs — Code-Oriented Tab Panels
+
+   Encapsulates Starlight tab styling when tabs wrap code blocks, including
+   tab chrome, panel spacing, and embedded code-frame adjustments.
+   ========================================================================== */
+
+/* stylelint-disable custom-property-pattern */
+
+@layer northwestern {
+    starlight-tabs:has(.expressive-code) {
+        border: 1px solid var(--nu-border-color);
+        border-top: 4px solid var(--nu-purple-100);
+    }
+
+    starlight-tabs:has(.expressive-code) .tablist-wrapper {
+        padding: 0;
+        background: var(--nu-purple-surface);
+        border-bottom: 1px solid var(--nu-border-color);
+    }
+
+    starlight-tabs:has(.expressive-code) [role="tablist"] {
+        gap: 0;
+        border-bottom: none;
+    }
+
+    starlight-tabs:has(.expressive-code) [role="tab"] {
+        padding: 0.5rem 1rem;
+        font-family: var(--__sl-font-mono);
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: var(--nu-black-80);
+        border-bottom: 2px solid transparent;
+    }
+
+    starlight-tabs:has(.expressive-code) [role="tab"][aria-selected="true"] {
+        color: var(--nu-purple-100);
+        border-bottom-color: var(--nu-purple-100);
+    }
+
+    starlight-tabs:has(.expressive-code) .expressive-code {
+        margin: 0 !important;
+    }
+
+    starlight-tabs:has(.expressive-code) .expressive-code .frame {
+        margin: 0 !important;
+        border: none !important;
+    }
+
+    starlight-tabs:has(.expressive-code) .expressive-code .frame.is-terminal .header,
+    starlight-tabs:has(.expressive-code) .expressive-code .frame.is-terminal .header::before,
+    starlight-tabs:has(.expressive-code) .expressive-code .frame.is-terminal .header::after,
+    starlight-tabs:has(.expressive-code) .expressive-code .frame:not(.has-title, .is-terminal) .header,
+    starlight-tabs:has(.expressive-code) .expressive-code .frame:not(.has-title, .is-terminal) .header::before,
+    starlight-tabs:has(.expressive-code) .expressive-code .frame:not(.has-title, .is-terminal) .header::after {
+        display: none !important;
+    }
+
+    starlight-tabs:has(.expressive-code) [role="tabpanel"] {
+        margin-top: 0 !important;
+    }
+
+    starlight-tabs:has(.expressive-code) [role="tabpanel"]:not(:has(p, ul, ol, h1, h2, h3, h4, h5, h6)) {
+        padding: 0 !important;
+    }
+
+    starlight-tabs:has(.expressive-code) [role="tabpanel"]:has(p, ul, ol, h1, h2, h3, h4, h5, h6) {
+        padding: 1rem 1.25rem !important;
+    }
+
+    starlight-tabs [role="tabpanel"] p + .expressive-code,
+    starlight-tabs [role="tabpanel"] ul + .expressive-code,
+    starlight-tabs [role="tabpanel"] ol + .expressive-code {
+        margin-top: 0.75rem !important;
+    }
+
+    starlight-tabs:has(.expressive-code) .expressive-code .copy {
+        top: 0.45rem !important;
+    }
+
+    starlight-tabs:has(.expressive-code) .expressive-code .frame.has-title .copy {
+        top: calc(0.45rem + 2.2rem) !important;
+    }
+
+    :root:not([data-theme="light"]) starlight-tabs:has(.expressive-code) {
+        border-top-color: var(--nu-purple-40);
+        box-shadow: none;
+    }
+
+    :root:not([data-theme="light"]) starlight-tabs:has(.expressive-code) .tablist-wrapper {
+        background: rgb(78 42 132 / 14%);
+        border-bottom-color: var(--nu-border-color);
+    }
+
+    :root:not([data-theme="light"]) starlight-tabs:has(.expressive-code) [role="tab"] {
+        color: var(--sl-color-gray-2);
+    }
+
+    :root:not([data-theme="light"]) starlight-tabs:has(.expressive-code) [role="tab"][aria-selected="true"] {
+        color: var(--nu-purple-30);
+        border-bottom-color: var(--nu-purple-30);
+    }
+}

package/src/styles/components/utility-surfaces.css

@@ -0,0 +1,41 @@
+/* ==========================================================================
+   Utility Surfaces — File Tree, Pagination, Banner
+
+   Encapsulates smaller shared surface treatments used by file trees,
+   pagination links, and the site banner.
+   ========================================================================== */
+
+@layer northwestern {
+    starlight-file-tree,
+    .pagination-links a {
+        background-color: var(--nu-card-bg) !important;
+    }
+
+    starlight-file-tree .highlight {
+        color: #fff !important;
+        background-color: var(--nu-purple-100) !important;
+    }
+
+    :root:not([data-theme="light"]) starlight-file-tree .highlight {
+        background-color: var(--nu-purple-80) !important;
+    }
+
+    .pagination-links a {
+        transition:
+            border-color var(--nu-transition-fast),
+            background-color var(--nu-transition-fast);
+    }
+
+    .pagination-links a:hover {
+        border-color: var(--nu-purple-60) !important;
+    }
+
+    :root:not([data-theme="light"]) .pagination-links a:hover {
+        border-color: var(--nu-purple-40) !important;
+    }
+
+    .sl-banner {
+        --sl-color-banner-bg: var(--nu-purple-100);
+        --sl-color-banner-text: #fff;
+    }
+}

package/src/styles/content.css

@@ -0,0 +1,386 @@
+/* ==========================================================================
+   Content — Markdown Prose, Badges, Tables, Buttons
+
+   Encapsulates rendered markdown content, prose-adjacent Starlight components,
+   and content-area UI such as badges, asides, tables, and link buttons.
+   ========================================================================== */
+
+@layer northwestern {
+    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content) {
+        padding-bottom: 2px;
+        font-weight: 700;
+        color: var(--sl-color-accent);
+        text-decoration: none;
+        border-bottom: 1px dashed var(--sl-color-accent);
+        transition: all var(--nu-transition-default);
+    }
+
+    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content):hover {
+        text-decoration: none;
+        border-bottom-style: solid;
+    }
+
+    .sl-markdown-content ul:not(:where(.not-content *)) {
+        padding-left: 1.25rem;
+        list-style: none;
+    }
+
+    .sl-markdown-content ul:not(:where(.not-content *)) > li {
+        position: relative;
+        padding-left: 0.25rem;
+    }
+
+    .sl-markdown-content ul:not(:where(.not-content *)) > li::before {
+        position: absolute;
+        top: 0.55em;
+        left: -1rem;
+        width: 6px;
+        height: 6px;
+        content: "";
+        background: var(--nu-purple-40);
+    }
+
+    :root:not([data-theme="light"]) .sl-markdown-content ul:not(:where(.not-content *)) > li::before {
+        background: var(--nu-purple-30);
+    }
+
+    .sl-markdown-content ul:not(:where(.not-content *)) ul > li::before {
+        background: transparent;
+        border: 1.5px solid var(--nu-purple-40);
+    }
+
+    :root:not([data-theme="light"]) .sl-markdown-content ul:not(:where(.not-content *)) ul > li::before {
+        background: transparent;
+        border-color: var(--nu-purple-30);
+    }
+
+    .sl-markdown-content hr:not(:where(.not-content *)) {
+        height: 3px;
+        margin: 2.5rem 0;
+        background: var(--nu-purple-10);
+        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;
+    }
+
+    .sl-markdown-content figure:not(:where(.not-content *)) img,
+    .sl-markdown-content figure:not(:where(.not-content *)) svg,
+    .sl-markdown-content figure:not(:where(.not-content *)) video {
+        display: block;
+        margin-bottom: 0.75rem;
+    }
+
+    .sl-markdown-content figcaption:not(:where(.not-content *)) {
+        max-width: 42rem;
+        padding-top: 0.75rem;
+        font-size: var(--sl-text-sm);
+        line-height: 1.5;
+        color: var(--nu-color-text-muted);
+        border-top: 3px solid var(--nu-purple-10);
+    }
+
+    :root:not([data-theme="light"]) .sl-markdown-content figcaption:not(:where(.not-content *)) {
+        color: var(--sl-color-gray-2);
+        border-top-color: var(--nu-purple-140);
+    }
+
+    /* stylelint-disable selector-class-pattern */
+
+    .sl-badge {
+        font-family: var(--nu-font-body);
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        border-width: 1px;
+    }
+
+    .sl-badge.default:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(78 42 132 / 10%);
+        --sl-color-border-badge: rgb(78 42 132 / 30%);
+        --sl-color-text-badge: var(--nu-purple-100);
+    }
+
+    .sl-badge.note:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(80 145 205 / 10%);
+        --sl-color-border-badge: rgb(80 145 205 / 30%);
+        --sl-color-text-badge: color-mix(in srgb, var(--nu-blue), black 40%);
+    }
+
+    .sl-badge.tip:not([class*="sl-openapi"]),
+    .sl-badge.success:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(0 134 86 / 10%);
+        --sl-color-border-badge: rgb(0 134 86 / 30%);
+        --sl-color-text-badge: color-mix(in srgb, var(--nu-dark-green), black 30%);
+    }
+
+    .sl-badge.caution:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(255 197 32 / 12%);
+        --sl-color-border-badge: rgb(255 197 32 / 35%);
+        --sl-color-text-badge: color-mix(in srgb, var(--nu-dark-gold), black 38%);
+    }
+
+    .sl-badge.danger:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(239 85 63 / 10%);
+        --sl-color-border-badge: rgb(239 85 63 / 30%);
+        --sl-color-text-badge: color-mix(in srgb, var(--nu-dark-orange), black 26%);
+    }
+
+    /* Dark mode — lighter text, slightly stronger tints */
+    :root:not([data-theme="light"]) .sl-badge.default:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(78 42 132 / 15%);
+        --sl-color-border-badge: rgb(78 42 132 / 35%);
+        --sl-color-text-badge: var(--nu-purple-30);
+    }
+
+    :root:not([data-theme="light"]) .sl-badge.note:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(80 145 205 / 12%);
+        --sl-color-border-badge: rgb(80 145 205 / 30%);
+        --sl-color-text-badge: #93c5fd;
+    }
+
+    :root:not([data-theme="light"]) .sl-badge.tip:not([class*="sl-openapi"]),
+    :root:not([data-theme="light"]) .sl-badge.success:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(0 134 86 / 12%);
+        --sl-color-border-badge: rgb(0 134 86 / 30%);
+        --sl-color-text-badge: #6ee7b7;
+    }
+
+    :root:not([data-theme="light"]) .sl-badge.caution:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(255 197 32 / 14%);
+        --sl-color-border-badge: rgb(255 197 32 / 35%);
+        --sl-color-text-badge: #fde68a;
+    }
+
+    :root:not([data-theme="light"]) .sl-badge.danger:not([class*="sl-openapi"]) {
+        --sl-color-bg-badge: rgb(239 85 63 / 12%);
+        --sl-color-border-badge: rgb(239 85 63 / 30%);
+        --sl-color-text-badge: #fca5a5;
+    }
+
+    .sidebar-content a[aria-current="page"] .sl-badge:not([class*="sl-openapi"]) {
+        color: var(--sl-color-text-badge, inherit) !important;
+    }
+
+    .sidebar-content a[aria-current="page"] .sl-badge.default:not([class*="sl-openapi"]) {
+        color: inherit !important;
+        background-color: transparent !important;
+        border-color: currentcolor !important;
+    }
+
+    .starlight-aside {
+        padding: 1rem 1.25rem;
+        border: 1px solid var(--sl-color-asides-border) !important;
+    }
+
+    .starlight-aside__title {
+        font-family: var(--nu-font-heading);
+        font-size: var(--sl-text-xs);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+    }
+
+    .starlight-aside__content {
+        font-size: var(--sl-text-sm);
+    }
+
+    .starlight-aside--note {
+        --sl-color-asides-text-accent: color-mix(in srgb, var(--nu-blue), black 30%);
+        --sl-color-asides-border: rgb(80 145 205 / 30%);
+        background-color: rgb(80 145 205 / 6%) !important;
+    }
+
+    .starlight-aside--tip {
+        --sl-color-asides-text-accent: color-mix(in srgb, var(--nu-dark-green), black 18%);
+        --sl-color-asides-border: rgb(0 134 86 / 30%);
+        background-color: rgb(0 134 86 / 6%) !important;
+    }
+
+    .starlight-aside--caution {
+        --sl-color-asides-text-accent: color-mix(in srgb, var(--nu-dark-gold), black 24%);
+        --sl-color-asides-border: rgb(255 197 32 / 35%);
+        background-color: rgb(255 197 32 / 8%) !important;
+    }
+
+    .starlight-aside--danger {
+        --sl-color-asides-text-accent: color-mix(in srgb, var(--nu-dark-orange), black 18%);
+        --sl-color-asides-border: rgb(239 85 63 / 30%);
+        background-color: rgb(239 85 63 / 6%) !important;
+    }
+
+    :root:not([data-theme="light"]) .starlight-aside--note {
+        --sl-color-asides-text-accent: #93c5fd;
+        --sl-color-asides-border: rgb(80 145 205 / 25%);
+        background-color: rgb(80 145 205 / 8%) !important;
+    }
+
+    :root:not([data-theme="light"]) .starlight-aside--tip {
+        --sl-color-asides-text-accent: #6ee7b7;
+        --sl-color-asides-border: rgb(0 134 86 / 25%);
+        background-color: rgb(0 134 86 / 8%) !important;
+    }
+
+    :root:not([data-theme="light"]) .starlight-aside--caution {
+        --sl-color-asides-text-accent: #fde68a;
+        --sl-color-asides-border: rgb(255 197 32 / 30%);
+        background-color: rgb(255 197 32 / 10%) !important;
+    }
+
+    :root:not([data-theme="light"]) .starlight-aside--danger {
+        --sl-color-asides-text-accent: #fca5a5;
+        --sl-color-asides-border: rgb(239 85 63 / 25%);
+        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),
+            border-color var(--nu-transition-fast),
+            color var(--nu-transition-fast);
+    }
+
+    .sl-link-button.primary {
+        color: #fff !important;
+        background: var(--nu-purple-100) !important;
+        border-color: var(--nu-purple-100) !important;
+    }
+
+    .sl-link-button.primary:hover {
+        color: #fff !important;
+        background: var(--nu-purple-80) !important;
+        border-color: var(--nu-purple-80) !important;
+    }
+
+    .sl-link-button.secondary {
+        color: var(--nu-color-text) !important;
+        border-color: var(--nu-black-20) !important;
+    }
+
+    .sl-link-button.secondary:hover {
+        color: var(--nu-color-text) !important;
+        background: var(--nu-hover-bg) !important;
+        border-color: var(--nu-black-50) !important;
+    }
+
+    .sl-link-button.minimal:hover {
+        color: var(--nu-purple-100) !important;
+    }
+
+    :root:not([data-theme="light"]) .sl-link-button.primary {
+        background: var(--nu-purple-80) !important;
+        border-color: var(--nu-purple-80) !important;
+    }
+
+    :root:not([data-theme="light"]) .sl-link-button.primary:hover {
+        background: var(--nu-purple-60) !important;
+        border-color: var(--nu-purple-60) !important;
+    }
+
+    :root:not([data-theme="light"]) .sl-link-button.secondary {
+        color: var(--nu-color-text) !important;
+        border-color: var(--nu-black-50) !important;
+    }
+
+    :root:not([data-theme="light"]) .sl-link-button.secondary:hover {
+        color: var(--nu-color-text) !important;
+        background: var(--nu-hover-bg) !important;
+        border-color: var(--nu-black-20) !important;
+    }
+
+    :root:not([data-theme="light"]) .sl-link-button.minimal:hover {
+        color: var(--nu-purple-40) !important;
+    }
+
+    .sl-link-button:focus-visible {
+        outline: 2px solid var(--nu-focus-ring);
+        outline-offset: 2px;
+    }
+}

package/src/styles/layers.css

@@ -0,0 +1,8 @@
+/* ==========================================================================
+   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;