diff --git a/docs/frontend/ui.md b/docs/frontend/ui.md index 65fd0aa7..d81a693a 100644 --- a/docs/frontend/ui.md +++ b/docs/frontend/ui.md @@ -922,14 +922,14 @@ and are tracked in issue #298: ### Available themes -| Theme | Mode | Selector | Description | -| ------------- | ----- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| System | auto | (none) | Follows device `prefers-color-scheme` | -| Default Light | light | `.light` / `:root` | Clean neutral palette, DM Sans / Geist Mono | -| Default Dark | dark | `.dark` | Semi-transparent surfaces on dark background | -| Retro | light | `.theme-retro` | Win98 / Napster: silver-grey, navy accent, square corners, inset bevels, Tahoma / Courier New, Clippy help button | -| Classic | dark | `.theme-classic` | Profilarr v1: deep charcoal (#111827), gray-800 surfaces, blue-600 accent, tighter radius (8px cards, 6px controls), card shadows, Schibsted Grotesk / Fira Code | -| Vesper | dark | `.theme-vesper` | Twilight indigo (#161122), violet-purple surfaces, amber-gold accent (the evening star), soft card shadows, slightly larger card radius, IBM Plex Sans / IBM Plex Mono | -| Tannhauser | dark | `.theme-tannhauser` | Cyberpunk sprawl (#0b0e14), cyan circuit-trace borders, hot magenta accent, neon-glow card shadows, sharp corners (6px cards, 4px controls), Inter / JetBrains Mono | +| Theme | Mode | Selector | Description | +| ------------- | ----- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| System | auto | (none) | Follows device `prefers-color-scheme` | +| Default Light | light | `.light` / `:root` | Clean neutral palette, DM Sans / Geist Mono | +| Default Dark | dark | `.dark` | Semi-transparent surfaces on dark background | +| Retro | light | `.theme-retro` | Win98 / Napster: silver-grey, navy accent, square corners, inset bevels, Tahoma / Courier New, Clippy help button | +| Classic | dark | `.theme-classic` | Profilarr v1: deep charcoal (#111827), gray-800 surfaces, blue-600 accent, tighter radius (8px cards, 6px controls), card shadows, Schibsted Grotesk / Fira Code | +| Vesper | dark | `.theme-vesper` | Twilight indigo (#161122), violet-purple surfaces, amber-gold accent (the evening star), soft card shadows, slightly larger card radius, IBM Plex Sans / IBM Plex Mono | +| Ashruvarsha | dark | `.theme-ashruvarsha` | Cyberpunk sprawl (#0b0e14), cyan circuit-trace borders, hot magenta accent, neon-glow card shadows, sharp corners (6px cards, 4px controls), Rajdhani / Space Mono | Planned: user-loadable custom theme files. diff --git a/src/app.css b/src/app.css index 455b3442..2d2eca6e 100644 --- a/src/app.css +++ b/src/app.css @@ -5,7 +5,7 @@ @import './styles/themes/retro.css'; @import './styles/themes/classic.css'; @import './styles/themes/vesper.css'; -@import './styles/themes/tannhauser.css'; +@import './styles/themes/ashruvarsha.css'; @import './styles/prose.css'; @import './styles/scrollbar.css'; @import './styles/transitions.css'; diff --git a/src/app.html b/src/app.html index 9e557821..0eed5a44 100644 --- a/src/app.html +++ b/src/app.html @@ -23,7 +23,7 @@ retro: { cls: 'theme-retro', scheme: 'light' }, classic: { cls: 'theme-classic', scheme: 'dark' }, vesper: { cls: 'theme-vesper', scheme: 'dark' }, - tannhauser: { cls: 'theme-tannhauser', scheme: 'dark' } + ashruvarsha: { cls: 'theme-ashruvarsha', scheme: 'dark' } }; var mapped = themeMap[stored]; if (mapped) { diff --git a/src/lib/client/stores/font.ts b/src/lib/client/stores/font.ts index 41418dc2..6bc48c62 100644 --- a/src/lib/client/stores/font.ts +++ b/src/lib/client/stores/font.ts @@ -10,8 +10,8 @@ import { browser } from '$app/environment'; import { themePreference } from '$stores/theme.ts'; import { getThemeDefinition } from '$lib/client/themes/registry.ts'; -export type SansFont = 'auto' | 'dm-sans' | 'inter' | 'ibm-plex-sans'; -export type MonoFont = 'auto' | 'geist-mono' | 'jetbrains-mono' | 'ibm-plex-mono'; +export type SansFont = 'auto' | 'dm-sans' | 'inter' | 'ibm-plex-sans' | 'rajdhani'; +export type MonoFont = 'auto' | 'geist-mono' | 'jetbrains-mono' | 'ibm-plex-mono' | 'space-mono'; export interface FontSettings { sans: SansFont; @@ -23,25 +23,29 @@ const STORAGE_KEY = 'fontSettings'; const sansFontStacks: Record, string> = { 'dm-sans': "'DM Sans', ui-sans-serif, system-ui, sans-serif", inter: "'Inter', ui-sans-serif, system-ui, sans-serif", - 'ibm-plex-sans': "'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif" + 'ibm-plex-sans': "'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif", + rajdhani: "'Rajdhani', ui-sans-serif, system-ui, sans-serif" }; const monoFontStacks: Record, string> = { 'geist-mono': "'Geist Mono', ui-monospace, monospace", 'jetbrains-mono': "'JetBrains Mono', ui-monospace, monospace", - 'ibm-plex-mono': "'IBM Plex Mono', ui-monospace, monospace" + 'ibm-plex-mono': "'IBM Plex Mono', ui-monospace, monospace", + 'space-mono': "'Space Mono', ui-monospace, monospace" }; const allSansOptions: { value: Exclude; label: string }[] = [ { value: 'dm-sans', label: 'DM Sans' }, { value: 'inter', label: 'Inter' }, - { value: 'ibm-plex-sans', label: 'IBM Plex Sans' } + { value: 'ibm-plex-sans', label: 'IBM Plex Sans' }, + { value: 'rajdhani', label: 'Rajdhani' } ]; const allMonoOptions: { value: Exclude; label: string }[] = [ { value: 'geist-mono', label: 'Geist Mono' }, { value: 'jetbrains-mono', label: 'JetBrains Mono' }, - { value: 'ibm-plex-mono', label: 'IBM Plex Mono' } + { value: 'ibm-plex-mono', label: 'IBM Plex Mono' }, + { value: 'space-mono', label: 'Space Mono' } ]; function applyFonts(settings: FontSettings) { diff --git a/src/lib/client/themes/registry.ts b/src/lib/client/themes/registry.ts index f49914bc..a6bf4b7c 100644 --- a/src/lib/client/themes/registry.ts +++ b/src/lib/client/themes/registry.ts @@ -8,7 +8,7 @@ export type ThemePreference = | 'retro' | 'classic' | 'vesper' - | 'tannhauser'; + | 'ashruvarsha'; export type ThemeMode = 'light' | 'dark'; export interface ThemeDefinition { @@ -89,15 +89,15 @@ export const themeDefinitions: ThemeDefinition[] = [ defaultMono: 'ibm-plex-mono' }, { - value: 'tannhauser', - label: 'Tannhauser', - shortLabel: 'Tannhauser', - description: 'C-beams glittering in the dark', + value: 'ashruvarsha', + label: 'Ashruvarsha', + shortLabel: 'Ashruvarsha', + description: 'Tears in rain', icon: Zap, - className: 'theme-tannhauser', + className: 'theme-ashruvarsha', mode: 'dark', - defaultSans: 'inter', - defaultMono: 'jetbrains-mono' + defaultSans: 'rajdhani', + defaultMono: 'space-mono' } ]; diff --git a/src/lib/client/ui/help/HelpButton.svelte b/src/lib/client/ui/help/HelpButton.svelte index 76984b9d..e0cfa5dd 100644 --- a/src/lib/client/ui/help/HelpButton.svelte +++ b/src/lib/client/ui/help/HelpButton.svelte @@ -78,8 +78,8 @@ let quip = ''; $: isRetro = $themePreference === 'retro'; - $: isTannhauser = $themePreference === 'tannhauser'; - $: activeQuips = isTannhauser ? joiQuips : isRetro ? clippyQuips : parrotQuips; + $: isAshruvarsha = $themePreference === 'ashruvarsha'; + $: activeQuips = isAshruvarsha ? joiQuips : isRetro ? clippyQuips : parrotQuips; function pickQuip() { quip = activeQuips[Math.floor(Math.random() * activeQuips.length)]; @@ -107,7 +107,7 @@ on:click|stopPropagation > {#if open} - {#if isTannhauser} + {#if isAshruvarsha}
{/if} {:else} - {#if isTannhauser} + {#if isAshruvarsha}