Skip to content

feat(theme): update theme #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
natemoo-re wants to merge 3 commits into
base: main
Choose a base branch
from
+246 −47
Draft

feat(theme): update theme #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
72a17b2
fix(theme): accent color per topic
natemoo-re Apr 5, 2026
1e15aa4
fix(theme): sidebar tweaks
natemoo-re Apr 5, 2026
be263ea
fix(theme): update ec
natemoo-re Apr 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
8 changes: 0 additions & 8 deletions src/components/WebContainer/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,3 @@ export const theme = {
brightWhite: "#FFFFFF",
selectionBackground: "#97979b33",
};








24 changes: 12 additions & 12 deletions src/starlightOverrides/Head.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ import "/src/styles/starlight.css";

<Default><slot /></Default>
<style is:global>
/* Remove the general html font-family override to prevent it from overriding our specific rules */
h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.sl-doc-title,
.sl-nav-link {
font-family: var(--sl-font-heading);
}
/* Remove the general html font-family override to prevent it from overriding our specific rules */
h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.sl-doc-title,
.sl-nav-link {
font-family: var(--sl-font-heading);
}
</style>
25 changes: 25 additions & 0 deletions src/starlightOverrides/PageFrame.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<string, { hsl: string; name: string }> = {
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;
---

<div
data-topic={currentTopic?.label?.toLowerCase() ?? 'clack'}
style={`--sl-color-accent-hsl:${accent.hsl};--sl-color-accent-low:hsl(${accent.hsl}/0.1);--sl-color-accent:hsl(${accent.hsl}/0.9);--sl-color-accent-high:hsl(${accent.hsl}/1);--accent-fill:var(--color-${accent.name}-90);--accent-muted:var(--color-${accent.name}-50);--accent-highlight:var(--color-${accent.name}-100);--topic-clack-hsl:311 100% 50%;--topic-args-hsl:52 81% 53%;--topic-tab-hsl:134 94% 49%;`}
>
<Default>
<slot name="header" slot="header" />
<slot name="sidebar" slot="sidebar" />
<slot />
</Default>
</div>
235 changes: 208 additions & 27 deletions src/styles/starlight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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;

Expand All @@ -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 {
Expand All @@ -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);
}
}

Expand All @@ -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 {
Expand All @@ -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,
Expand All @@ -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);
Expand All @@ -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 {
Expand Down