diff --git a/astro.config.mjs b/astro.config.mjs index 4ad7ceb..4afc070 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -32,6 +32,7 @@ export default defineConfig({ ], components: { Head: "./src/starlightOverrides/Head.astro", + PageFrame: "./src/starlightOverrides/PageFrame.astro", }, expressiveCode: { themes: ['github-dark-high-contrast', 'github-light-high-contrast'], diff --git a/src/components/WebContainer/theme.ts b/src/components/WebContainer/theme.ts index 2d817ae..0004441 100644 --- a/src/components/WebContainer/theme.ts +++ b/src/components/WebContainer/theme.ts @@ -20,11 +20,3 @@ export const theme = { brightWhite: "#FFFFFF", selectionBackground: "#97979b33", }; - - - - - - - - diff --git a/src/starlightOverrides/Head.astro b/src/starlightOverrides/Head.astro index 8380aa0..e3c99e2 100644 --- a/src/starlightOverrides/Head.astro +++ b/src/starlightOverrides/Head.astro @@ -5,16 +5,16 @@ import "/src/styles/starlight.css"; diff --git a/src/starlightOverrides/PageFrame.astro b/src/starlightOverrides/PageFrame.astro new file mode 100644 index 0000000..4d3618e --- /dev/null +++ b/src/starlightOverrides/PageFrame.astro @@ -0,0 +1,25 @@ +--- +import Default from '@astrojs/starlight/components/PageFrame.astro'; + +const topics = Astro.locals.starlightSidebarTopics?.topics ?? []; +const currentTopic = topics.find((t: { isCurrent: boolean }) => t.isCurrent); + +const accentMap: Record = { + Clack: { hsl: '311 100% 50%', name: 'pink' }, + Args: { hsl: '52 81% 53%', name: 'yellow' }, + Tab: { hsl: '134 94% 49%', name: 'green' }, +}; + +const accent = accentMap[currentTopic?.label] ?? accentMap.Clack; +--- + +
+ + + + + +
diff --git a/src/styles/starlight.css b/src/styles/starlight.css index 5d77c21..e436813 100644 --- a/src/styles/starlight.css +++ b/src/styles/starlight.css @@ -8,7 +8,7 @@ --sl-color-text-heading: var(--heading-fill); --sl-text-h1: var(--sl-text-6xl); --sl-color-accent-hsl: 311 100% 50%; - --sl-color-accent-low: hsl(311 100% 50% / 0.5); + --sl-color-accent-low: hsl(311 100% 50% / 0.1); --sl-color-accent: hsl(311 100% 50% / 0.9); --sl-color-accent-high: hsl(311 100% 50% / 1); @@ -74,9 +74,12 @@ color: var(--heading-fill); } + /* Right sidebar (TOC) background gradient */ + .right-sidebar { + background: linear-gradient(to bottom, var(--color-gray-90) 0%, var(--container-fill) 100%); + } + starlight-toc nav>ul { - --c-start: var(--heading-muted); - --c-end: var(--separator-fill); border-left: 1px solid transparent; position: relative; @@ -87,7 +90,7 @@ bottom: 0; left: 0; width: var(--border-050); - background: linear-gradient(to bottom, var(--c-start), var(--c-end)); + background: linear-gradient(to bottom, var(--surface-border-highlight), var(--surface-border-fill)); } a { @@ -96,7 +99,9 @@ } [aria-current] { - border-left-color: var(--sl-color-accent); + border-left-color: hsl(var(--sl-color-accent-hsl) / 0.9); + font-weight: 600; + color: var(--separator-fill); } } @@ -107,15 +112,38 @@ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } + /* Content links — use current accent color */ + .sl-markdown-content a:not(:where(.not-content *)) { + color: hsl(var(--sl-color-accent-hsl)); + } + .sl-markdown-content a:hover:not(:where(.not-content *)) { + color: hsl(var(--sl-color-accent-hsl) / 0.8); + } + .sl-link-button.primary { - background: linear-gradient(to right in oklab, var(--color-pink-90), var(--color-pink-100)); - color: var(--color-gray-100); - border-color: var(--color-pink-100); - border-radius: 0px; + background: radial-gradient(ellipse at center, hsl(var(--sl-color-accent-hsl) / 0.5), hsl(var(--sl-color-accent-hsl) / 0.1)); + border: 2px solid hsl(var(--sl-color-accent-hsl) / 0.9); + border-radius: var(--radius-100); + color: var(--color-white-100); + font-family: var(--__sl-font-mono); + text-transform: uppercase; + letter-spacing: 0.01em; + padding: var(--space-400) var(--space-600); + } + + .sl-link-button:not(.primary) { + background: radial-gradient(ellipse at center, var(--color-white-50), var(--color-white-10)); + border: 2px solid var(--color-white-90); + border-radius: var(--radius-100); + color: var(--color-white-100); + font-family: var(--__sl-font-mono); + text-transform: uppercase; + letter-spacing: 0.01em; + padding: var(--space-400) var(--space-600); } .sl-link-button > svg { - fill: var(--color-gray-100); + fill: currentColor; } .cli-preview { @@ -129,26 +157,119 @@ color: var(--color-white-100); } + /* Expressive Code — subtle border, rounded, gradient bg */ + .expressive-code { + --ec-brdWd: 1px; + --ec-brdCol: var(--color-white-50); + --ec-brdRad: var(--radius-100); + --ec-codeBg: var(--container-fill); + --ec-frm-shdCol: transparent; + --ec-frm-frameBoxShdCssVal: none; + --ec-frm-trmTtbBg: transparent; + --ec-frm-trmTtbBrdBtmCol: transparent; + --ec-frm-trmBg: var(--container-fill); + --ec-frm-edBg: var(--container-fill); + --ec-frm-edTabBarBg: transparent; + --ec-frm-edTabBarBrdCol: transparent; + --ec-frm-edTabBarBrdBtmCol: transparent; + --ec-frm-edActTabBg: transparent; + --ec-frm-edActTabBrdCol: transparent; + } + + /* Terminal title bar — subtle gradient fade */ + .expressive-code .frame.is-terminal .header { + background: linear-gradient(to bottom, var(--color-white-0), var(--color-white-10)); + } + + /* Editor title bar — same treatment */ + .expressive-code .frame.has-title:not(.is-terminal) .header { + background: linear-gradient(to bottom, var(--color-white-0), var(--color-white-10)); + } + + /* Sidebar background gradient */ .sidebar-pane { + background: linear-gradient(to bottom, var(--color-gray-90) 0%, var(--container-fill) 100%) !important; + a { border: 1px solid transparent; + border-radius: 0; } - [aria-current="page"] { - --c-start: hsl(var(--sl-color-accent-hsl) / 5%); - --c-end: hsl(var(--sl-color-accent-hsl) / 30%); - color: var(--sl-color-accent); - background: linear-gradient(to right, var(--c-start), var(--c-end)); - border-color: var(--sl-color-accent); - - &:hover { - --c-start: hsl(var(--sl-color-accent-hsl) / 100%); - --c-end: hsl(var(--sl-color-accent-hsl) / 50%); - border-color: var(--sl-color-accent); - color: var(--color-gray-100); - background: linear-gradient(to right, var(--c-start), var(--c-end)); + /* Move connector line from per-item to per-group */ + ul ul { + position: relative; + &::before { + content: ''; + position: absolute; + inset: 0; + left: calc(var(--sl-sidebar-item-padding-inline) * 2); + border-inline-start: 1px solid; + border-image: linear-gradient(to bottom, var(--surface-border-highlight), var(--surface-border-fill)) 1; + pointer-events: none; + z-index: 0; } } + ul ul li { + border-inline-start: none; + z-index: 1; + } + + /* Active sidebar link — accent text + left indicator, no bg */ + [aria-current="page"], + [aria-current="page"]:hover, + [aria-current="page"]:focus { + color: hsl(var(--sl-color-accent-hsl)); + background: transparent; + border-inline-start: 2px solid hsl(var(--sl-color-accent-hsl)); + } + + a:hover, + a:focus-visible { + border-inline-start: 2px solid hsl(var(--sl-color-accent-hsl) / 0.5); + } + + /* Sidebar group labels — uppercase */ + summary .group-label .large { + text-transform: uppercase; + font-size: var(--sl-text-sm); + letter-spacing: 0.01em; + } + } + + /* Sidebar topic list — gradient box on hover + active */ + .starlight-sidebar-topics a:is(.starlight-sidebar-topics-current, :hover, :focus-visible) { + background: linear-gradient(to right, hsl(var(--sl-color-accent-hsl) / 0.1), hsl(var(--sl-color-accent-hsl) / 0.5)); + border: 1px solid hsl(var(--sl-color-accent-hsl) / 0.9); + border-radius: var(--radius-100); + } + + .starlight-sidebar-topics a:not(.starlight-sidebar-topics-current) { + color: var(--heading-muted); + } + + .starlight-sidebar-topics a .starlight-sidebar-topics-icon { + border-color: transparent; + background: transparent; + color: hsl(var(--sl-color-accent-hsl)); + } + + /* Canonical topic hover colors — each topic uses its own color on hover */ + .starlight-sidebar-topics a { + --sl-color-accent-low: hsl(var(--sl-color-accent-hsl) / 0.1); + --sl-color-accent: hsl(var(--sl-color-accent-hsl) / 0.9); + --sl-color-accent-high: hsl(var(--sl-color-accent-hsl) / 1); + --sl-color-text-accent: var(--sl-color-accent-high); + --sl-color-text-invert: black; + --sl-icon-color: currentColor; + } + .starlight-sidebar-topics a[href*="/clack"] { + --sl-color-accent-hsl: 311 100% 50%; + } + .starlight-sidebar-topics a[href*="/args"] { + --sl-color-accent-hsl: 52 81% 53%; + } + .starlight-sidebar-topics a[href*="/tab"] { + --sl-color-accent-hsl: 134 94% 49%; } starlight-menu-button button, @@ -157,6 +278,60 @@ bottom: 0; } + /* Aside/Note — full border, gradient bg, corner decorations */ + .starlight-aside { + border: 1px solid var(--sl-color-asides-border); + border-inline-start-width: 1px; + position: relative; + overflow: visible; + } + + .starlight-aside--note { + background: radial-gradient(ellipse at center top, hsl(234 100% 50% / 0.5), hsl(234 100% 50% / 0.1)); + } + .starlight-aside--tip { + background: radial-gradient(ellipse at center top, hsl(281 82% 63% / 0.5), hsl(281 82% 63% / 0.1)); + } + .starlight-aside--caution { + background: radial-gradient(ellipse at center top, hsl(41 82% 63% / 0.5), hsl(41 82% 63% / 0.1)); + } + .starlight-aside--danger { + background: radial-gradient(ellipse at center top, hsl(339 82% 63% / 0.5), hsl(339 82% 63% / 0.1)); + } + + .starlight-aside::before, + .starlight-aside::after { + content: ''; + position: absolute; + width: 8px; + height: 8px; + border-color: var(--sl-color-asides-border); + border-style: solid; + } + .starlight-aside::before { + top: -1px; + left: -1px; + border-width: 2px 0 0 2px; + } + .starlight-aside::after { + bottom: -1px; + right: -1px; + border-width: 0 2px 2px 0; + } + + .starlight-aside__title { + font-family: var(--__sl-font-mono); + text-transform: uppercase; + font-size: var(--sl-text-sm); + letter-spacing: 0.01em; + } + + /* Search bar — pill shape */ + site-search button { + border-radius: var(--radius-full) !important; + border: 1px solid var(--surface-border-highlight); + } + /* Light theme specific overrides for better readability */ :root[data-theme=light] { --sl-color-text: var(--color-gray-100); @@ -175,14 +350,20 @@ --sl-icon-color: var(--color-gray-100); - .sl-link-button { - background-color: var(--color-gray-100); + .sl-link-button.primary { + background: radial-gradient(ellipse at center, hsl(var(--sl-color-accent-hsl) / 0.3), hsl(var(--sl-color-accent-hsl) / 0.05)); + border-color: hsl(var(--sl-color-accent-hsl) / 0.9); + color: var(--color-gray-100); + } + + .sl-link-button:not(.primary) { + background: radial-gradient(ellipse at center, var(--color-gray-80), var(--color-gray-100)); + border-color: var(--color-gray-90); color: var(--color-white-100); - border-color: var(--color-gray-100); } .sl-link-button>svg { - fill: var(--color-white-100); + fill: currentColor; } .starlight-sidebar-topics-icon {