From a521ce960a190c24c630674ffff82b66deda9b80 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Wed, 29 Apr 2026 15:18:41 +0530 Subject: [PATCH 01/15] feat: paper theme sidebar redesign to match Figma - Sidebar header: plain title (single content) or Select dropdown (multi-content) - VersionSwitcher pinned to sidebar footer, hidden if no versions - ChapterNav: remove numbering, Figma-matching typography tokens - Add Departure Mono (self-hosted) and Hanuman (Google Fonts) - Font CSS variables: --paper-font-mono, --paper-font-body - Nav items: proper padding, border-radius, accent active state - Section labels: uppercase mono, secondary color, rs-space-8 gap Co-Authored-By: Claude Opus 4.6 (1M context) --- examples/basic/chronicle.yaml | 2 +- examples/versioned/chronicle.yaml | 2 +- .../src/themes/paper/ChapterNav.module.css | 35 ++++++--- .../chronicle/src/themes/paper/ChapterNav.tsx | 18 +---- .../src/themes/paper/Layout.module.css | 72 ++++++++++++++---- .../chronicle/src/themes/paper/Layout.tsx | 70 +++++++++++++---- .../paper/fonts/DepartureMono-Regular.woff2 | Bin 0 -> 22496 bytes 7 files changed, 139 insertions(+), 60 deletions(-) create mode 100644 packages/chronicle/src/themes/paper/fonts/DepartureMono-Regular.woff2 diff --git a/examples/basic/chronicle.yaml b/examples/basic/chronicle.yaml index b61a74b..adcad3a 100644 --- a/examples/basic/chronicle.yaml +++ b/examples/basic/chronicle.yaml @@ -9,7 +9,7 @@ content: label: Docs theme: - name: default + name: paper search: enabled: true diff --git a/examples/versioned/chronicle.yaml b/examples/versioned/chronicle.yaml index 0a55cb0..5d41684 100644 --- a/examples/versioned/chronicle.yaml +++ b/examples/versioned/chronicle.yaml @@ -3,7 +3,7 @@ site: description: Multi-content + multi-version sample theme: - name: default + name: paper content: - dir: docs diff --git a/packages/chronicle/src/themes/paper/ChapterNav.module.css b/packages/chronicle/src/themes/paper/ChapterNav.module.css index a7abaeb..b824e7a 100644 --- a/packages/chronicle/src/themes/paper/ChapterNav.module.css +++ b/packages/chronicle/src/themes/paper/ChapterNav.module.css @@ -1,21 +1,25 @@ .nav { display: flex; flex-direction: column; - gap: var(--rs-space-5); + gap: var(--rs-space-8); } .chapter { display: flex; flex-direction: column; gap: var(--rs-space-2); + margin-top: var(--rs-space-8); } .chapterLabel { + font-family: var(--paper-font-mono); font-size: var(--rs-font-size-small); - font-weight: 600; + font-weight: var(--rs-font-weight-medium); + line-height: var(--rs-line-height-small); + letter-spacing: var(--rs-letter-spacing-small); text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--rs-color-foreground-base-primary); + color: var(--rs-color-foreground-base-secondary); + padding: 0 var(--rs-space-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -27,30 +31,32 @@ margin: 0; display: flex; flex-direction: column; - gap: var(--rs-space-1); - padding-left: var(--rs-space-4); } .link { display: flex; align-items: center; - gap: var(--rs-space-2); + gap: var(--rs-space-3); + font-family: var(--paper-font-body); font-size: var(--rs-font-size-small); - color: var(--rs-color-foreground-base-tertiary); + font-weight: 400; + line-height: var(--rs-line-height-small); + letter-spacing: var(--rs-letter-spacing-small); + color: var(--rs-color-foreground-base-primary); text-decoration: none; - padding: var(--rs-space-1) 0; + padding: var(--rs-space-3); + border-radius: var(--rs-radius-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .link:hover { - color: var(--rs-color-foreground-base-primary); + color: var(--rs-color-foreground-accent-primary); } .active { color: var(--rs-color-foreground-accent-primary); - font-weight: 500; } .icon { @@ -60,9 +66,14 @@ } .subLabel { + font-family: var(--paper-font-mono); font-size: var(--rs-font-size-small); - font-weight: 500; + font-weight: var(--rs-font-weight-medium); + line-height: var(--rs-line-height-small); + letter-spacing: var(--rs-letter-spacing-small); + text-transform: uppercase; color: var(--rs-color-foreground-base-secondary); + padding: 0 var(--rs-space-3); margin-top: var(--rs-space-3); display: block; white-space: nowrap; diff --git a/packages/chronicle/src/themes/paper/ChapterNav.tsx b/packages/chronicle/src/themes/paper/ChapterNav.tsx index 3d9bcad..d092344 100644 --- a/packages/chronicle/src/themes/paper/ChapterNav.tsx +++ b/packages/chronicle/src/themes/paper/ChapterNav.tsx @@ -15,23 +15,8 @@ interface ChapterNavProps { tree: Root; } -function buildChapterIndices( - children: Node[] -): Map { - const indices = new Map(); - let index = 0; - for (const item of children) { - if (item.type === 'folder') { - index++; - indices.set(item, index); - } - } - return indices; -} - export function ChapterNav({ tree }: ChapterNavProps) { const { pathname } = useLocation(); - const chapterIndices = buildChapterIndices(tree.children); return (
- - - + {settingsOpen ? ( + <> + + + + + + + setSettingsOpen(false)}> + + + + ) : ( + setSettingsOpen(true)}> + + + )}
From a873737b92a02fdf12c4722e61070219e2dffc05 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 30 Apr 2026 09:39:12 +0530 Subject: [PATCH 05/15] feat: wire theme switcher in paper navbar - Toggle dark/light via sun/moon icon in settings panel - Enable system theme for paper theme (remove forcedTheme: light) - Hydration-safe: only render after client mount Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/chronicle/src/themes/paper/Page.tsx | 24 ++++++++++++++++---- packages/chronicle/src/themes/registry.ts | 2 +- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/chronicle/src/themes/paper/Page.tsx b/packages/chronicle/src/themes/paper/Page.tsx index 909921d..19da62c 100644 --- a/packages/chronicle/src/themes/paper/Page.tsx +++ b/packages/chronicle/src/themes/paper/Page.tsx @@ -5,10 +5,11 @@ import { AdjustmentsHorizontalIcon, EyeIcon, SunIcon, + MoonIcon, XMarkIcon, } from '@heroicons/react/24/outline'; -import { IconButton } from '@raystack/apsara'; -import { useMemo, useState } from 'react'; +import { IconButton, useTheme } from '@raystack/apsara'; +import { useEffect, useMemo, useState } from 'react'; import { Link as RouterLink, useLocation } from 'react-router'; import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb'; import { flattenTree } from 'fumadocs-core/page-tree'; @@ -19,6 +20,10 @@ import { ReadingProgress } from './ReadingProgress'; export function Page({ page, tree }: ThemePageProps) { const { pathname } = useLocation(); const [settingsOpen, setSettingsOpen] = useState(false); + const [isClient, setIsClient] = useState(false); + const { resolvedTheme, setTheme } = useTheme(); + + useEffect(() => { setIsClient(true); }, []); const { prev, next, crumbs } = useMemo(() => { const pages = flattenTree(tree.children); @@ -88,9 +93,18 @@ export function Page({ page, tree }: ThemePageProps) { - - - + {isClient && ( + setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')} + aria-label={resolvedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'} + > + {resolvedTheme === 'dark' + ? + : + } + + )} setSettingsOpen(false)}> diff --git a/packages/chronicle/src/themes/registry.ts b/packages/chronicle/src/themes/registry.ts index 5647960..8628abf 100644 --- a/packages/chronicle/src/themes/registry.ts +++ b/packages/chronicle/src/themes/registry.ts @@ -15,7 +15,7 @@ export function getTheme(name?: string): Theme { export function getThemeConfig(name?: string) { if (name === 'paper') { - return { enableSystem: false, forcedTheme: 'light' }; + return { enableSystem: true }; } return { enableSystem: true }; } From e70d715220bab252467845b218c5717beb70703a Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 30 Apr 2026 09:52:10 +0530 Subject: [PATCH 06/15] =?UTF-8?q?fix:=20paper=20theme=20typography=20?= =?UTF-8?q?=E2=80=94=20breadcrumb=20mono=20font,=20content=20Hanuman,=20pa?= =?UTF-8?q?ragraph=20line-height?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Breadcrumb: use --paper-font-mono, medium weight - Content: switch from Georgia to --paper-font-body (Hanuman) - Paragraph: line-height 2 - Main: width 90% Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/chronicle/src/themes/paper/Page.module.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/chronicle/src/themes/paper/Page.module.css b/packages/chronicle/src/themes/paper/Page.module.css index 44ec1cb..c6cbcfd 100644 --- a/packages/chronicle/src/themes/paper/Page.module.css +++ b/packages/chronicle/src/themes/paper/Page.module.css @@ -1,6 +1,6 @@ .main { flex: 1; - width: 100%; + width: 90%; max-width: 1024px; box-sizing: content-box; margin: 0 auto; @@ -49,6 +49,7 @@ .breadcrumb { display: flex; align-items: center; + font-family: var(--paper-font-mono); font-size: var(--rs-font-size-small); line-height: var(--rs-line-height-small); letter-spacing: var(--rs-letter-spacing-small); @@ -61,6 +62,7 @@ .crumbLink { color: var(--rs-color-foreground-base-tertiary); + font-weight: var(--rs-font-weight-medium); text-decoration: none; } @@ -70,7 +72,7 @@ .crumbActive { color: var(--rs-color-foreground-base-primary); - font-weight: 600; + font-weight: var(--rs-font-weight-medium); } .article { @@ -81,7 +83,7 @@ } .content { - font-family: Georgia, "Times New Roman", serif; + font-family: var(--paper-font-body); line-height: 1.8; background: var(--rs-color-background-base-primary); padding: var(--rs-space-9); @@ -134,6 +136,7 @@ .content p { margin: 0.75rem 0; + line-height: 2; } .content ul, From cd3191b0b4ae200e3f8064c24263138a2fb114ca Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 30 Apr 2026 09:55:03 +0530 Subject: [PATCH 07/15] =?UTF-8?q?feat:=20reader=20mode=20=E2=80=94=20hide?= =?UTF-8?q?=20sidebar=20and=20TOC,=20center=20content?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ReaderModeContext: shared state between Layout and Page - Eye icon toggles reader mode via context - Layout hides sidebar when reader mode active - Page hides ReadingProgress and removes right padding - Content centers in reader mode Co-Authored-By: Claude Opus 4.6 (1M context) --- .../chronicle/src/themes/paper/Layout.tsx | 18 ++++++++++-- .../src/themes/paper/Page.module.css | 5 ++++ packages/chronicle/src/themes/paper/Page.tsx | 8 ++++-- .../src/themes/paper/ReaderModeContext.tsx | 28 +++++++++++++++++++ 4 files changed, 53 insertions(+), 6 deletions(-) create mode 100644 packages/chronicle/src/themes/paper/ReaderModeContext.tsx diff --git a/packages/chronicle/src/themes/paper/Layout.tsx b/packages/chronicle/src/themes/paper/Layout.tsx index 8ef8e12..d52c80a 100644 --- a/packages/chronicle/src/themes/paper/Layout.tsx +++ b/packages/chronicle/src/themes/paper/Layout.tsx @@ -9,6 +9,7 @@ import { usePageContext } from '@/lib/page-context'; import type { ThemeLayoutProps } from '@/types'; import { ChapterNav } from './ChapterNav'; import styles from './Layout.module.css'; +import { ReaderModeProvider, useReaderMode } from './ReaderModeContext'; import { VersionSwitcher } from './VersionSwitcher'; function SidebarHeader({ config }: { config: ThemeLayoutProps['config'] }) { @@ -52,17 +53,20 @@ function SidebarHeader({ config }: { config: ThemeLayoutProps['config'] }) { ); } -export function Layout({ +function LayoutInner({ children, config, tree, hideSidebar, classNames }: ThemeLayoutProps) { + const { readerMode } = useReaderMode(); + const showSidebar = !hideSidebar && !readerMode; + return ( - {hideSidebar ? null : ( + {showSidebar ? ( - )} + ) : null}
{children}
@@ -84,3 +88,11 @@ export function Layout({ ); } + +export function Layout(props: ThemeLayoutProps) { + return ( + + + + ); +} diff --git a/packages/chronicle/src/themes/paper/Page.module.css b/packages/chronicle/src/themes/paper/Page.module.css index c6cbcfd..0bbd7ac 100644 --- a/packages/chronicle/src/themes/paper/Page.module.css +++ b/packages/chronicle/src/themes/paper/Page.module.css @@ -8,6 +8,11 @@ padding-right: var(--rs-space-17); } +.readerMode { + padding-right: 0; + margin: 0 auto; +} + .navbar { display: flex; align-items: center; diff --git a/packages/chronicle/src/themes/paper/Page.tsx b/packages/chronicle/src/themes/paper/Page.tsx index 19da62c..4e01f2e 100644 --- a/packages/chronicle/src/themes/paper/Page.tsx +++ b/packages/chronicle/src/themes/paper/Page.tsx @@ -15,6 +15,7 @@ import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb'; import { flattenTree } from 'fumadocs-core/page-tree'; import type { ThemePageProps } from '@/types'; import styles from './Page.module.css'; +import { useReaderMode } from './ReaderModeContext'; import { ReadingProgress } from './ReadingProgress'; export function Page({ page, tree }: ThemePageProps) { @@ -22,6 +23,7 @@ export function Page({ page, tree }: ThemePageProps) { const [settingsOpen, setSettingsOpen] = useState(false); const [isClient, setIsClient] = useState(false); const { resolvedTheme, setTheme } = useTheme(); + const { readerMode, toggleReaderMode } = useReaderMode(); useEffect(() => { setIsClient(true); }, []); @@ -45,7 +47,7 @@ export function Page({ page, tree }: ThemePageProps) { return ( <> -
+
@@ -90,7 +92,7 @@ export function Page({ page, tree }: ThemePageProps) {
{settingsOpen ? ( <> - + {isClient && ( @@ -120,7 +122,7 @@ export function Page({ page, tree }: ThemePageProps) {
{page.content}
- + {!readerMode && } ); } diff --git a/packages/chronicle/src/themes/paper/ReaderModeContext.tsx b/packages/chronicle/src/themes/paper/ReaderModeContext.tsx new file mode 100644 index 0000000..959f8eb --- /dev/null +++ b/packages/chronicle/src/themes/paper/ReaderModeContext.tsx @@ -0,0 +1,28 @@ +'use client'; + +import { createContext, useContext, useState, type ReactNode } from 'react'; + +interface ReaderModeContextValue { + readerMode: boolean; + toggleReaderMode: () => void; +} + +const ReaderModeContext = createContext({ + readerMode: false, + toggleReaderMode: () => {}, +}); + +export function ReaderModeProvider({ children }: { children: ReactNode }) { + const [readerMode, setReaderMode] = useState(false); + return ( + setReaderMode(v => !v) }} + > + {children} + + ); +} + +export function useReaderMode() { + return useContext(ReaderModeContext); +} From 8e10446433020b037b39ff21dbc3e05390db8af1 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 30 Apr 2026 10:05:57 +0530 Subject: [PATCH 08/15] feat: add optional description to content entry config MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add description field to contentEntrySchema - Pass through ContentRoot → LandingEntry Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/chronicle/src/lib/config.ts | 5 +++++ packages/chronicle/src/types/config.ts | 1 + 2 files changed, 6 insertions(+) diff --git a/packages/chronicle/src/lib/config.ts b/packages/chronicle/src/lib/config.ts index 78bd3b6..af6fbfe 100644 --- a/packages/chronicle/src/lib/config.ts +++ b/packages/chronicle/src/lib/config.ts @@ -35,6 +35,7 @@ export interface ContentRoot { versionLabel: string | null contentDir: string contentLabel: string + contentDescription?: string contentIcon?: string fsPath: string urlPrefix: string @@ -46,6 +47,7 @@ export function getLatestContentRoots(config: ChronicleConfig): ContentRoot[] { versionLabel: config.latest?.label ?? null, contentDir: c.dir, contentLabel: c.label, + contentDescription: c.description, contentIcon: c.icon, fsPath: `content/${c.dir}`, urlPrefix: `/${c.dir}`, @@ -64,6 +66,7 @@ export function getVersionContentRoots( versionLabel: version.label, contentDir: c.dir, contentLabel: c.label, + contentDescription: c.description, contentIcon: c.icon, fsPath: `versions/${version.dir}/${c.dir}`, urlPrefix: `/${version.dir}/${c.dir}`, @@ -79,6 +82,7 @@ export interface VersionDescriptor { export interface LandingEntry { label: string + description?: string href: string contentDir: string icon?: string @@ -95,6 +99,7 @@ export function getLandingEntries( return roots.map((r) => ({ label: r.contentLabel, + description: r.contentDescription, href: r.urlPrefix, contentDir: r.contentDir, icon: r.contentIcon, diff --git a/packages/chronicle/src/types/config.ts b/packages/chronicle/src/types/config.ts index ddbee7f..b99628e 100644 --- a/packages/chronicle/src/types/config.ts +++ b/packages/chronicle/src/types/config.ts @@ -84,6 +84,7 @@ const dirNameSchema = z const contentEntrySchema = z.object({ dir: dirNameSchema, label: z.string().min(1), + description: z.string().optional(), icon: z.string().optional(), }) From e70e0ccbafcb1ae33dbdf3455594e23312e6eccf Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 30 Apr 2026 11:11:57 +0530 Subject: [PATCH 09/15] feat: redesign landing page with Figma card layout - Header: large mono title + description side by side, border bottom - Cards: dotted grid bg, folder icon, edge labels (FIG_001, [ label ]) - Theme-aware fonts via --paper-font-mono/body with fallbacks - Card hover: icon scale + opacity + bg shift - Add 4 content dirs to versioned example with descriptions Co-Authored-By: Claude Opus 4.6 (1M context) --- examples/versioned/chronicle.yaml | 8 + examples/versioned/content/design/index.mdx | 9 ++ examples/versioned/content/ops/index.mdx | 9 ++ .../src/pages/LandingPage.module.css | 140 ++++++++++++++---- packages/chronicle/src/pages/LandingPage.tsx | 30 +++- 5 files changed, 164 insertions(+), 32 deletions(-) create mode 100644 examples/versioned/content/design/index.mdx create mode 100644 examples/versioned/content/ops/index.mdx diff --git a/examples/versioned/chronicle.yaml b/examples/versioned/chronicle.yaml index 5d41684..2a1c054 100644 --- a/examples/versioned/chronicle.yaml +++ b/examples/versioned/chronicle.yaml @@ -8,8 +8,16 @@ theme: content: - dir: docs label: Docs + description: A reference manual for the core platform and services. Covers authentication, data models, API integrations, deployment guides, and troubleshooting. Everything you need to get started with the platform and build production-ready applications. - dir: dev label: Dev Docs + description: Developer guides for building integrations and extensions + - dir: ops + label: Ops Guide + description: Operations handbook for deployment, monitoring, and incident response + - dir: design + label: Design System + description: Component library documentation, design tokens, and usage patterns latest: label: "3.0" diff --git a/examples/versioned/content/design/index.mdx b/examples/versioned/content/design/index.mdx new file mode 100644 index 0000000..74166c2 --- /dev/null +++ b/examples/versioned/content/design/index.mdx @@ -0,0 +1,9 @@ +--- +title: Design System +description: Component library docs +order: 1 +--- + +# Design System + +Design system documentation placeholder. diff --git a/examples/versioned/content/ops/index.mdx b/examples/versioned/content/ops/index.mdx new file mode 100644 index 0000000..1f415a3 --- /dev/null +++ b/examples/versioned/content/ops/index.mdx @@ -0,0 +1,9 @@ +--- +title: Ops Guide +description: Operations handbook +order: 1 +--- + +# Ops Guide + +Operations documentation placeholder. diff --git a/packages/chronicle/src/pages/LandingPage.module.css b/packages/chronicle/src/pages/LandingPage.module.css index a18659b..ff47156 100644 --- a/packages/chronicle/src/pages/LandingPage.module.css +++ b/packages/chronicle/src/pages/LandingPage.module.css @@ -1,56 +1,146 @@ .root { display: flex; flex-direction: column; - gap: var(--rs-space-8); - padding: var(--rs-space-9) var(--rs-space-7); - max-width: 960px; - margin: 0 auto; + padding: var(--rs-space-12) var(--rs-space-9); + width: 100%; +} + +.header { + display: flex; + align-items: center; + padding-bottom: var(--rs-space-10); + border-bottom: 0.5px solid var(--rs-color-border-base-primary); } .title { - font-size: var(--rs-font-size-h3); - font-weight: 600; - color: var(--rs-color-foreground-base-primary); + flex: 1; + font-family: var(--paper-font-mono, inherit); + font-size: 64px; + line-height: 1.1; + color: var(--rs-color-foreground-accent-primary); + text-transform: uppercase; margin: 0; + font-weight: 400; } .description { + width: 385px; + flex-shrink: 0; + font-family: var(--paper-font-body, inherit); font-size: var(--rs-font-size-regular); - color: var(--rs-color-foreground-base-secondary); + line-height: 1.4; + color: var(--rs-color-foreground-base-primary); margin: 0; } .grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - gap: var(--rs-space-6); + display: flex; + flex-wrap: wrap; + gap: var(--rs-space-7); + margin-top: var(--rs-space-9); } .card { display: flex; flex-direction: column; - gap: var(--rs-space-3); - padding: var(--rs-space-6); - border: 1px solid var(--rs-color-border-base-primary); - border-radius: var(--rs-radius-3); + gap: var(--rs-space-7); + padding: var(--rs-space-2); text-decoration: none; color: inherit; - background: var(--rs-color-background-base-primary); - transition: border-color 0.15s ease, background 0.15s ease; + width: 360px; +} + +.card:hover .cardImage { + border-color: var(--rs-color-foreground-accent-primary); +} + +.cardImage { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + aspect-ratio: 1.05; + min-height: 280px; + max-width: 360px; + background: var(--rs-color-background-accent-secondary); + border: 1px solid var(--rs-color-foreground-accent-primary); + overflow: hidden; + transition: border-color 0.15s ease; +} + +.cardImage::before { + content: ""; + position: absolute; + inset: 0; + background-image: + radial-gradient(circle, var(--rs-color-foreground-accent-primary) 1px, transparent 1px); + background-size: 10px 10px; + opacity: 0.3; + pointer-events: none; +} + +.cardImageLabel { + position: absolute; + font-family: var(--paper-font-mono, monospace); + font-size: 10px; + text-transform: uppercase; + color: var(--rs-color-foreground-base-secondary); + background: var(--rs-color-background-accent-secondary); + padding: var(--rs-space-1); + white-space: nowrap; +} + +.cardImageLabelTop { + top: 19px; + left: -1px; + writing-mode: vertical-rl; + transform: rotate(180deg); +} + +.cardImageLabelRight { + bottom: 19px; + right: -1px; + writing-mode: vertical-rl; +} + +.cardIcon { + width: 90%; + height: 90%; + min-width: 64px; + min-height: 64px; + color: var(--rs-color-foreground-accent-primary); + opacity: 0.3; + transition: opacity 0.2s ease, transform 0.2s ease; +} + +.card:hover .cardIcon { + opacity: 0.5; + transform: scale(1.05); +} + +.card:hover .cardImage { + background: var(--rs-color-background-accent-primary); } -.card:hover { - border-color: var(--rs-color-border-accent-primary); - background: var(--rs-color-background-neutral-secondary); +.cardBody { + display: flex; + flex-direction: column; + gap: 10px; + padding-bottom: var(--rs-space-4); } .cardLabel { - font-size: var(--rs-font-size-large); - font-weight: 500; + font-family: var(--paper-font-mono, inherit); + font-size: 16px; + line-height: 1.4; + text-transform: uppercase; + color: var(--rs-color-foreground-base-primary); } -.cardHref { +.cardDescription { + font-family: var(--paper-font-body, inherit); font-size: var(--rs-font-size-small); - color: var(--rs-color-foreground-base-secondary); - font-family: var(--rs-font-family-mono); + line-height: 1.4; + color: var(--rs-color-foreground-base-primary); } diff --git a/packages/chronicle/src/pages/LandingPage.tsx b/packages/chronicle/src/pages/LandingPage.tsx index 158840f..be066de 100644 --- a/packages/chronicle/src/pages/LandingPage.tsx +++ b/packages/chronicle/src/pages/LandingPage.tsx @@ -1,3 +1,4 @@ +import { FolderIcon } from '@heroicons/react/24/outline'; import { Link as RouterLink } from 'react-router'; import { getLandingEntries } from '@/lib/config'; import { usePageContext } from '@/lib/page-context'; @@ -13,15 +14,30 @@ export function LandingPage() { return (
-

{heading}

- {config.site.description ? ( -

{config.site.description}

- ) : null} +
+

{heading}

+ {config.site.description ? ( +

{config.site.description}

+ ) : null} +
- {entries.map((entry) => ( + {entries.map((entry, i) => ( - {entry.label} - {entry.href} +
+ + Fig_{String(i + 1).padStart(3, '0')} + + + [ {entry.label} ] + + +
+
+ {entry.label} + {entry.description ? ( + {entry.description} + ) : null} +
))}
From 70ca8fc85f3c3300006d9eec9578885ac89d9f03 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 30 Apr 2026 11:25:30 +0530 Subject: [PATCH 10/15] fix: replace hardcoded values with Apsara design tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - font-weight: 400 → --rs-font-weight-regular - font-size: 10px → --rs-font-size-micro - font-size: 16px → --rs-font-size-large - gap: 10px → --rs-space-3 Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/chronicle/src/pages/LandingPage.module.css | 8 ++++---- packages/chronicle/src/themes/paper/ChapterNav.module.css | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/chronicle/src/pages/LandingPage.module.css b/packages/chronicle/src/pages/LandingPage.module.css index ff47156..401fe9e 100644 --- a/packages/chronicle/src/pages/LandingPage.module.css +++ b/packages/chronicle/src/pages/LandingPage.module.css @@ -20,7 +20,7 @@ color: var(--rs-color-foreground-accent-primary); text-transform: uppercase; margin: 0; - font-weight: 400; + font-weight: var(--rs-font-weight-regular); } .description { @@ -83,7 +83,7 @@ .cardImageLabel { position: absolute; font-family: var(--paper-font-mono, monospace); - font-size: 10px; + font-size: var(--rs-font-size-micro); text-transform: uppercase; color: var(--rs-color-foreground-base-secondary); background: var(--rs-color-background-accent-secondary); @@ -126,13 +126,13 @@ .cardBody { display: flex; flex-direction: column; - gap: 10px; + gap: var(--rs-space-3); padding-bottom: var(--rs-space-4); } .cardLabel { font-family: var(--paper-font-mono, inherit); - font-size: 16px; + font-size: var(--rs-font-size-large); line-height: 1.4; text-transform: uppercase; color: var(--rs-color-foreground-base-primary); diff --git a/packages/chronicle/src/themes/paper/ChapterNav.module.css b/packages/chronicle/src/themes/paper/ChapterNav.module.css index b824e7a..bbf525c 100644 --- a/packages/chronicle/src/themes/paper/ChapterNav.module.css +++ b/packages/chronicle/src/themes/paper/ChapterNav.module.css @@ -39,7 +39,7 @@ gap: var(--rs-space-3); font-family: var(--paper-font-body); font-size: var(--rs-font-size-small); - font-weight: 400; + font-weight: var(--rs-font-weight-regular); line-height: var(--rs-line-height-small); letter-spacing: var(--rs-letter-spacing-small); color: var(--rs-color-foreground-base-primary); From c39c2589f123542d7e0db0cff3a48f70ed85e141 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 30 Apr 2026 11:28:50 +0530 Subject: [PATCH 11/15] =?UTF-8?q?fix:=20address=20CodeRabbit=20review=20?= =?UTF-8?q?=E2=80=94=20a11y,=20overflow,=20nested=20interactive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove nested /