@treeseed/core 0.8.7 → 0.8.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/components/content/ContentStatusLegend.astro +4 -4
  2. package/dist/components/docs/BookFontControls.astro +9 -9
  3. package/dist/components/docs/DesktopSidebarToggle.astro +8 -8
  4. package/dist/components/docs/Footer.astro +6 -6
  5. package/dist/components/docs/PageTitle.astro +1 -1
  6. package/dist/components/docs/ThemeSelect.astro +3 -1
  7. package/dist/components/forms/ContactForm.astro +21 -21
  8. package/dist/components/forms/FooterSubscribeForm.astro +9 -9
  9. package/dist/components/site/BookList.astro +7 -7
  10. package/dist/components/site/CTASection.astro +4 -4
  11. package/dist/components/site/ChronicleList.astro +6 -6
  12. package/dist/components/site/Hero.astro +3 -3
  13. package/dist/components/site/PathCard.astro +5 -5
  14. package/dist/components/site/ProfileList.astro +5 -5
  15. package/dist/components/site/RouteNotFound.astro +5 -5
  16. package/dist/components/site/SectionIntro.astro +3 -3
  17. package/dist/components/site/StageBanner.astro +2 -2
  18. package/dist/components/site/TrustCallout.astro +3 -3
  19. package/dist/components/ui/data/ActionList.astro +51 -0
  20. package/dist/components/ui/data/Badge.astro +19 -0
  21. package/dist/components/ui/data/DataTable.astro +51 -0
  22. package/dist/components/ui/data/KeyValueList.astro +28 -0
  23. package/dist/components/ui/data/MetricCard.astro +25 -0
  24. package/dist/components/ui/data/MetricGrid.astro +27 -0
  25. package/dist/components/ui/data/StatusPill.astro +20 -0
  26. package/dist/components/ui/forms/Button.astro +52 -0
  27. package/dist/components/ui/forms/Field.astro +39 -0
  28. package/dist/components/ui/forms/FormActions.astro +12 -0
  29. package/dist/components/ui/forms/PasswordMeter.astro +80 -0
  30. package/dist/components/ui/forms/RadioGroup.astro +55 -0
  31. package/dist/components/ui/forms/Select.astro +44 -0
  32. package/dist/components/ui/forms/TextInput.astro +58 -0
  33. package/dist/components/ui/forms/Textarea.astro +45 -0
  34. package/dist/components/ui/layout/PageHeader.astro +45 -0
  35. package/dist/components/ui/shell/AppShell.astro +110 -0
  36. package/dist/components/ui/shell/BottomNav.astro +35 -0
  37. package/dist/components/ui/shell/ProjectHeader.astro +66 -0
  38. package/dist/components/ui/shell/PublicShell.astro +108 -0
  39. package/dist/components/ui/shell/RailNav.astro +35 -0
  40. package/dist/components/ui/shell/TopBar.astro +52 -0
  41. package/dist/components/ui/surface/Card.astro +46 -0
  42. package/dist/components/ui/surface/EmptyState.astro +45 -0
  43. package/dist/components/ui/surface/Panel.astro +54 -0
  44. package/dist/components/ui/theme/ThemeMenu.astro +32 -0
  45. package/dist/components/ui/theme/ThemePreviewSwatch.astro +18 -0
  46. package/dist/components/ui/theme/ThemeScript.astro +105 -0
  47. package/dist/components/ui/theme/ThemeSelector.astro +202 -0
  48. package/dist/components/ui/types.js +0 -0
  49. package/dist/dev.js +14 -2
  50. package/dist/layouts/AuthoredEntryLayout.astro +27 -27
  51. package/dist/layouts/BookLayout.astro +10 -10
  52. package/dist/layouts/ContentLayout.astro +4 -4
  53. package/dist/layouts/MainLayout.astro +27 -25
  54. package/dist/layouts/NoteLayout.astro +6 -6
  55. package/dist/layouts/ProfileLayout.astro +17 -17
  56. package/dist/pages/404.astro +6 -6
  57. package/dist/pages/contact.astro +4 -4
  58. package/dist/pages/docs-runtime/[...slug].astro +12 -12
  59. package/dist/pages/docs-runtime/index.astro +13 -13
  60. package/dist/pages/index.astro +28 -28
  61. package/dist/pages/ui/index.astro +216 -0
  62. package/dist/site.js +3 -2
  63. package/dist/styles/app-shell.css +398 -0
  64. package/dist/styles/forms.css +258 -0
  65. package/dist/styles/global.css +119 -119
  66. package/dist/styles/prose.css +11 -11
  67. package/dist/styles/theme.css +177 -0
  68. package/dist/styles/tokens.css +62 -22
  69. package/dist/styles/ui.css +551 -0
  70. package/dist/utils/content-status.js +5 -5
  71. package/dist/utils/site-config.js +2 -2
  72. package/dist/utils/theme.js +352 -40
  73. package/package.json +35 -2
@@ -6,6 +6,7 @@ import { SITE } from '../utils/seo';
6
6
  import { SITE_FOOTER_MENU, SITE_THEME_CSS } from '../utils/site-config';
7
7
  import FooterSubscribeForm from '../components/forms/FooterSubscribeForm.astro';
8
8
  import DevWatchReload from '../components/DevWatchReload.astro';
9
+ import ThemeScript from '../components/ui/theme/ThemeScript.astro';
9
10
 
10
11
  const { title, description, currentPath = '/' } = Astro.props;
11
12
  ---
@@ -19,24 +20,25 @@ const { title, description, currentPath = '/' } = Astro.props;
19
20
  <meta name="description" content={description ?? SITE.description} />
20
21
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
21
22
  <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" />
23
+ <ThemeScript includeCss={false} />
22
24
  {SITE_THEME_CSS && <style is:global>{SITE_THEME_CSS}</style>}
23
25
  </head>
24
26
  <body>
25
27
  <div class="flex min-h-screen flex-col">
26
- <header class="sticky top-0 z-30 mb-12 bg-[color:rgba(244,237,224,0.92)]/95 backdrop-blur md:mb-16">
27
- <div class="border-y border-[color:var(--site-border-strong)] px-4 py-4 md:px-6">
28
- <div class="mx-auto flex max-w-[var(--site-max)] flex-col gap-4 sm:px-2 lg:flex-row lg:items-center lg:justify-between lg:px-4">
28
+ <header class="sticky top-0 z-30 mb-12 bg-[color:var(--ts-color-surface-overlay)] backdrop-blur md:mb-16">
29
+ <div class="border-y border-[color:var(--ts-color-border-strong)] px-4 py-4 md:px-6">
30
+ <div class="mx-auto flex max-w-[var(--ts-content-width)] flex-col gap-4 sm:px-2 lg:flex-row lg:items-center lg:justify-between lg:px-4">
29
31
  <a href="/" class="flex items-center gap-3">
30
32
  <div class="flex h-11 w-11 items-center justify-center tracking-[0.2em]">
31
33
  <img src={SITE.logo.src} alt={SITE.logo.alt} class="h-11 w-11" />
32
34
  </div>
33
35
  <div>
34
- <p class="text-xl font-bold text-[color:var(--site-text)]">{SITE.name}</p>
35
- <p class="text-sm text-[color:var(--site-text-soft)]">{SITE.statement}</p>
36
+ <p class="text-xl font-bold text-[color:var(--ts-color-text)]">{SITE.name}</p>
37
+ <p class="text-sm text-[color:var(--ts-color-text-subtle)]">{SITE.statement}</p>
36
38
  </div>
37
39
  </a>
38
40
  <div class="ml-auto flex w-full flex-wrap items-center justify-end gap-3 lg:w-auto lg:flex-nowrap">
39
- <nav class="flex w-full justify-end text-base text-[color:var(--site-text-muted)] lg:w-auto">
41
+ <nav class="flex w-full justify-end text-base text-[color:var(--ts-color-text-muted)] lg:w-auto">
40
42
  <ul class="js-site-nav-disclosures flex flex-wrap justify-end gap-3">
41
43
  {
42
44
  SITE_NAV_GROUPS.map((group) => {
@@ -45,24 +47,24 @@ const { title, description, currentPath = '/' } = Astro.props;
45
47
  <details class="group js-site-nav-disclosure">
46
48
  <summary
47
49
  class:list={[
48
- 'flex cursor-pointer list-none items-center gap-2 border-b-2 border-transparent px-1 py-2 font-medium transition marker:content-none hover:border-[color:var(--site-blue)] hover:text-[color:var(--site-text)]',
50
+ 'flex cursor-pointer list-none items-center gap-2 border-b-2 border-transparent px-1 py-2 font-medium transition marker:content-none hover:border-[color:var(--ts-color-info)] hover:text-[color:var(--ts-color-text)]',
49
51
  group.items.some((item) => isCurrentSitePath(currentPath, item.href)) &&
50
- 'border-[color:var(--site-accent)] text-[color:var(--site-text)]',
52
+ 'border-[color:var(--ts-color-accent)] text-[color:var(--ts-color-text)]',
51
53
  ]}
52
54
  >
53
55
  {group.label}
54
56
  <span class="text-xs transition group-open:rotate-180">▾</span>
55
57
  </summary>
56
- <div class="absolute right-0 top-full z-40 mt-2 min-w-56 border border-[color:var(--site-border-strong)] bg-[color:rgba(244,237,224,0.98)] p-2 shadow-[0_12px_30px_rgba(52,37,19,0.12)] backdrop-blur">
58
+ <div class="absolute right-0 top-full z-40 mt-2 min-w-56 border border-[color:var(--ts-color-border-strong)] bg-[color:var(--ts-color-surface-overlay)] p-2 shadow-[var(--ts-color-shadow)] backdrop-blur">
57
59
  <ul class="flex flex-col gap-1">
58
60
  {group.items.map((item) => (
59
61
  <li>
60
62
  <a
61
63
  href={item.href}
62
64
  class:list={[
63
- 'block px-3 py-2 text-sm transition hover:bg-[color:var(--site-blue-soft)] hover:text-[color:var(--site-text)]',
65
+ 'block px-3 py-2 text-sm transition hover:bg-[color:var(--ts-color-info-soft)] hover:text-[color:var(--ts-color-text)]',
64
66
  isCurrentSitePath(currentPath, item.href) &&
65
- 'bg-[color:var(--site-surface-strong)] text-[color:var(--site-text)]',
67
+ 'bg-[color:var(--ts-color-surface-muted)] text-[color:var(--ts-color-text)]',
66
68
  ]}
67
69
  >
68
70
  {item.label}
@@ -83,7 +85,7 @@ const { title, description, currentPath = '/' } = Astro.props;
83
85
  target="_blank"
84
86
  rel="noreferrer"
85
87
  aria-label={`${SITE.name} GitHub repository`}
86
- class="inline-flex h-12 w-12 shrink-0 items-center justify-center border-2 border-transparent bg-transparent text-[color:var(--site-text)] transition hover:-translate-y-0.5 hover:text-[color:var(--site-blue)] focus-visible:border-[color:var(--site-blue)] focus-visible:outline-none"
88
+ class="inline-flex h-12 w-12 shrink-0 items-center justify-center border-2 border-transparent bg-transparent text-[color:var(--ts-color-text)] transition hover:-translate-y-0.5 hover:text-[color:var(--ts-color-info)] focus-visible:border-[color:var(--ts-color-info)] focus-visible:outline-none"
87
89
  >
88
90
  <svg
89
91
  xmlns="http://www.w3.org/2000/svg"
@@ -99,7 +101,7 @@ const { title, description, currentPath = '/' } = Astro.props;
99
101
  target="_blank"
100
102
  rel="noreferrer"
101
103
  aria-label={`${SITE.name} Discord`}
102
- class="inline-flex h-12 w-12 shrink-0 items-center justify-center border-2 border-transparent bg-transparent text-[color:var(--site-text)] transition hover:-translate-y-0.5 hover:text-[color:var(--site-blue)] focus-visible:border-[color:var(--site-blue)] focus-visible:outline-none"
104
+ class="inline-flex h-12 w-12 shrink-0 items-center justify-center border-2 border-transparent bg-transparent text-[color:var(--ts-color-text)] transition hover:-translate-y-0.5 hover:text-[color:var(--ts-color-info)] focus-visible:border-[color:var(--ts-color-info)] focus-visible:outline-none"
103
105
  >
104
106
  <svg
105
107
  xmlns="http://www.w3.org/2000/svg"
@@ -113,7 +115,7 @@ const { title, description, currentPath = '/' } = Astro.props;
113
115
  <a
114
116
  href="/contact/"
115
117
  aria-label={`Contact ${SITE.name}`}
116
- class="inline-flex h-12 w-12 shrink-0 items-center justify-center border-2 border-transparent bg-transparent text-[color:var(--site-text)] transition hover:-translate-y-0.5 hover:text-[color:var(--site-blue)] focus-visible:border-[color:var(--site-blue)] focus-visible:outline-none"
118
+ class="inline-flex h-12 w-12 shrink-0 items-center justify-center border-2 border-transparent bg-transparent text-[color:var(--ts-color-text)] transition hover:-translate-y-0.5 hover:text-[color:var(--ts-color-info)] focus-visible:border-[color:var(--ts-color-info)] focus-visible:outline-none"
117
119
  >
118
120
  <svg
119
121
  xmlns="http://www.w3.org/2000/svg"
@@ -130,30 +132,30 @@ const { title, description, currentPath = '/' } = Astro.props;
130
132
  </div>
131
133
  </header>
132
134
 
133
- <main class="mx-auto flex-1 max-w-[var(--site-max)] px-4 pb-12 sm:px-6 lg:px-8">
135
+ <main class="mx-auto flex-1 max-w-[var(--ts-content-width)] px-4 pb-12 sm:px-6 lg:px-8">
134
136
  <slot />
135
137
  </main>
136
138
 
137
- <footer class="mt-20 border-t-2 border-[color:var(--site-border-strong)] pt-8">
138
- <div class="mb-15 mx-auto max-w-[var(--site-max)] px-4 sm:px-6 lg:px-8">
139
+ <footer class="mt-20 border-t-2 border-[color:var(--ts-color-border-strong)] pt-8">
140
+ <div class="mb-15 mx-auto max-w-[var(--ts-content-width)] px-4 sm:px-6 lg:px-8">
139
141
  <div class="flex flex-wrap justify-center gap-8 pb-8">
140
142
  <div class="w-64">
141
- <p class="text-xl font-bold text-[color:var(--site-text)]">{SITE.name}</p>
142
- <p class="mt-3 text-base leading-8 text-[color:var(--site-text-muted)]">
143
+ <p class="text-xl font-bold text-[color:var(--ts-color-text)]">{SITE.name}</p>
144
+ <p class="mt-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
143
145
  {SITE.summary}
144
146
  </p>
145
147
  </div>
146
148
  <div class="w-64">
147
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-accent-strong)]">Project stage</p>
148
- <p class="mt-3 text-base font-semibold text-[color:var(--site-text)]">{PROJECT_STAGE.label}</p>
149
- <p class="mt-2 text-base leading-8 text-[color:var(--site-text-muted)]">{PROJECT_STAGE.description}</p>
149
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-accent-strong)]">Project stage</p>
150
+ <p class="mt-3 text-base font-semibold text-[color:var(--ts-color-text)]">{PROJECT_STAGE.label}</p>
151
+ <p class="mt-2 text-base leading-8 text-[color:var(--ts-color-text-muted)]">{PROJECT_STAGE.description}</p>
150
152
  </div>
151
153
  {SITE_FOOTER_MENU.map((group) => (
152
154
  <div class="w-64">
153
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">{group.label}</p>
154
- <div class="mt-3 flex flex-col gap-2 text-base text-[color:var(--site-text-muted)]">
155
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">{group.label}</p>
156
+ <div class="mt-3 flex flex-col gap-2 text-base text-[color:var(--ts-color-text-muted)]">
155
157
  {group.items.map((item) => (
156
- <a href={item.href} class="hover:text-[color:var(--site-text)]">{item.label}</a>
158
+ <a href={item.href} class="hover:text-[color:var(--ts-color-text)]">{item.label}</a>
157
159
  ))}
158
160
  </div>
159
161
  </div>
@@ -7,16 +7,16 @@ const { note } = Astro.props;
7
7
 
8
8
  <MainLayout title={note.title} description={note.description} currentPath="/notes/">
9
9
  <article class="max-w-4xl space-y-8">
10
- <div class="space-y-4 border-b border-[color:var(--site-border)] pb-8">
10
+ <div class="space-y-4 border-b border-[color:var(--ts-color-border)] pb-8">
11
11
  <div class="flex flex-wrap items-center gap-3">
12
12
  <StatusBadge status={note.status} />
13
- <p class="text-sm font-medium text-[color:var(--site-text-soft)]">{note.date.toISOString().slice(0, 10)}</p>
14
- <p class="text-sm text-[color:var(--site-text-soft)]">{note.author}</p>
13
+ <p class="text-sm font-medium text-[color:var(--ts-color-text-subtle)]">{note.date.toISOString().slice(0, 10)}</p>
14
+ <p class="text-sm text-[color:var(--ts-color-text-subtle)]">{note.author}</p>
15
15
  </div>
16
- <h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">{note.title}</h1>
17
- <p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">{note.summary}</p>
16
+ <h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">{note.title}</h1>
17
+ <p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{note.summary}</p>
18
18
  {note.tags.length > 0 && (
19
- <p class="text-sm uppercase tracking-[0.14em] text-[color:var(--site-accent-strong)]">{note.tags.join(' / ')}</p>
19
+ <p class="text-sm uppercase tracking-[0.14em] text-[color:var(--ts-color-accent-strong)]">{note.tags.join(' / ')}</p>
20
20
  )}
21
21
  </div>
22
22
  <div class="prose-karyon">
@@ -33,15 +33,15 @@ const {
33
33
 
34
34
  <MainLayout title={entry.name} description={entry.description} currentPath={currentPath}>
35
35
  <article class="max-w-4xl space-y-8">
36
- <div class="space-y-4 border-b border-[color:var(--site-border)] pb-8">
36
+ <div class="space-y-4 border-b border-[color:var(--ts-color-border)] pb-8">
37
37
  <div class="flex flex-wrap items-center gap-3">
38
38
  {'status' in entry && entry.status && <StatusBadge status={entry.status} />}
39
- <p class="text-sm font-medium text-[color:var(--site-text-soft)]">{metaLabel}: {metaValue}</p>
39
+ <p class="text-sm font-medium text-[color:var(--ts-color-text-subtle)]">{metaLabel}: {metaValue}</p>
40
40
  </div>
41
- <h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">{entry.name}</h1>
42
- <p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">{entry.summary}</p>
41
+ <h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">{entry.name}</h1>
42
+ <p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{entry.summary}</p>
43
43
  {entry.tags.length > 0 && (
44
- <p class="text-sm uppercase tracking-[0.14em] text-[color:var(--site-accent-strong)]">{entry.tags.join(' / ')}</p>
44
+ <p class="text-sm uppercase tracking-[0.14em] text-[color:var(--ts-color-accent-strong)]">{entry.tags.join(' / ')}</p>
45
45
  )}
46
46
  </div>
47
47
  <div class="grid gap-6 md:grid-cols-[1.3fr_0.7fr]">
@@ -50,31 +50,31 @@ const {
50
50
  </div>
51
51
  <div class="space-y-6">
52
52
  {entry.links.length > 0 && (
53
- <div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-5">
54
- <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Links</p>
55
- <ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
53
+ <div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-5">
54
+ <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Links</p>
55
+ <ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
56
56
  {entry.links.map((link) => (
57
- <li><a href={link.href} class="hover:text-[color:var(--site-text)]">{link.label}</a></li>
57
+ <li><a href={link.href} class="hover:text-[color:var(--ts-color-text)]">{link.label}</a></li>
58
58
  ))}
59
59
  </ul>
60
60
  </div>
61
61
  )}
62
62
  {relatedQuestions.length > 0 && (
63
- <div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-5">
64
- <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Questions</p>
65
- <ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
63
+ <div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-5">
64
+ <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Questions</p>
65
+ <ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
66
66
  {relatedQuestions.map((question) => (
67
- <li><a href={`/questions/${question.id}/`} class="hover:text-[color:var(--site-text)]">{entryTitle(question)}</a></li>
67
+ <li><a href={`/questions/${question.id}/`} class="hover:text-[color:var(--ts-color-text)]">{entryTitle(question)}</a></li>
68
68
  ))}
69
69
  </ul>
70
70
  </div>
71
71
  )}
72
72
  {relatedObjectives.length > 0 && (
73
- <div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-5">
74
- <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Objectives</p>
75
- <ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
73
+ <div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-5">
74
+ <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Objectives</p>
75
+ <ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
76
76
  {relatedObjectives.map((objective) => (
77
- <li><a href={`/objectives/${objective.id}/`} class="hover:text-[color:var(--site-text)]">{entryTitle(objective)}</a></li>
77
+ <li><a href={`/objectives/${objective.id}/`} class="hover:text-[color:var(--ts-color-text)]">{entryTitle(objective)}</a></li>
78
78
  ))}
79
79
  </ul>
80
80
  </div>
@@ -8,20 +8,20 @@ import MainLayout from '../layouts/MainLayout.astro';
8
8
  currentPath="/404/"
9
9
  >
10
10
  <section class="mx-auto max-w-3xl space-y-6 py-20">
11
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-accent-strong)]">404</p>
12
- <h1 class="font-serif text-5xl text-[color:var(--site-text)]">Page not found</h1>
13
- <p class="text-lg leading-9 text-[color:var(--site-text-muted)]">
11
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-accent-strong)]">404</p>
12
+ <h1 class="font-serif text-5xl text-[color:var(--ts-color-text)]">Page not found</h1>
13
+ <p class="text-lg leading-9 text-[color:var(--ts-color-text-muted)]">
14
14
  The page you requested is not available in this Treeseed. Try the homepage, the knowledge
15
15
  library, or the current project status page instead.
16
16
  </p>
17
17
  <div class="flex flex-wrap gap-4">
18
- <a href="/" class="border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">
18
+ <a href="/" class="border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">
19
19
  Go home
20
20
  </a>
21
- <a href="/knowledge/" class="border border-[color:var(--site-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">
21
+ <a href="/knowledge/" class="border border-[color:var(--ts-color-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">
22
22
  Open knowledge
23
23
  </a>
24
- <a href="/status/" class="border border-[color:var(--site-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">
24
+ <a href="/status/" class="border border-[color:var(--ts-color-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">
25
25
  View status
26
26
  </a>
27
27
  </div>
@@ -12,12 +12,12 @@ const code = Astro.url.searchParams.get('formCode');
12
12
  currentPath="/contact/"
13
13
  >
14
14
  <div class="space-y-6">
15
- <section class="max-w-3xl space-y-4 border-b border-[color:var(--site-border)] pb-6">
16
- <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[color:var(--site-accent-strong)]">Contact</p>
17
- <h1 class="max-w-3xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">
15
+ <section class="max-w-3xl space-y-4 border-b border-[color:var(--ts-color-border)] pb-6">
16
+ <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[color:var(--ts-color-accent-strong)]">Contact</p>
17
+ <h1 class="max-w-3xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">
18
18
  Get in touch...
19
19
  </h1>
20
- <p class="max-w-2xl text-lg leading-9 text-[color:var(--site-text-muted)]">
20
+ <p class="max-w-2xl text-lg leading-9 text-[color:var(--ts-color-text-muted)]">
21
21
  We welcome questions, feedback, collaboration, and issue reports. Messages are routed by topic so they land in the right inbox.
22
22
  </p>
23
23
  </section>
@@ -46,32 +46,32 @@ const download = activeBook
46
46
  currentPath={currentPath}
47
47
  >
48
48
  <div class="grid gap-8 lg:grid-cols-[0.75fr_1.25fr]">
49
- <aside class="space-y-6 border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
49
+ <aside class="space-y-6 border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
50
50
  <div class="space-y-3">
51
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">
51
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">
52
52
  {activeBook?.sectionLabel ?? 'Knowledge'}
53
53
  </p>
54
- <a href="/knowledge/" class="block text-sm font-medium text-[color:var(--site-text-muted)] hover:text-[color:var(--site-text)]">Knowledge home</a>
54
+ <a href="/knowledge/" class="block text-sm font-medium text-[color:var(--ts-color-text-muted)] hover:text-[color:var(--ts-color-text)]">Knowledge home</a>
55
55
  {activeBook?.landingPath && (
56
- <a href={activeBook.landingPath} class="block text-sm font-medium text-[color:var(--site-text-muted)] hover:text-[color:var(--site-text)]">Open book landing page</a>
56
+ <a href={activeBook.landingPath} class="block text-sm font-medium text-[color:var(--ts-color-text-muted)] hover:text-[color:var(--ts-color-text)]">Open book landing page</a>
57
57
  )}
58
58
  {download && (
59
59
  <a
60
60
  href={download.href}
61
- class="inline-flex border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]"
61
+ class="inline-flex border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]"
62
62
  >
63
63
  {download.title}
64
64
  </a>
65
65
  )}
66
66
  </div>
67
- <ul class="space-y-2 text-sm text-[color:var(--site-text-muted)]">
67
+ <ul class="space-y-2 text-sm text-[color:var(--ts-color-text-muted)]">
68
68
  {sidebarEntries.map((entry) => (
69
69
  <li>
70
70
  <a
71
71
  href={entry.path}
72
72
  class:list={[
73
- 'hover:text-[color:var(--site-text)]',
74
- entry.path === currentPath && 'font-semibold text-[color:var(--site-text)]',
73
+ 'hover:text-[color:var(--ts-color-text)]',
74
+ entry.path === currentPath && 'font-semibold text-[color:var(--ts-color-text)]',
75
75
  ]}
76
76
  >
77
77
  {entry.title ?? entry.slug}
@@ -81,15 +81,15 @@ const download = activeBook
81
81
  </ul>
82
82
  </aside>
83
83
  <article class="space-y-6">
84
- <header class="space-y-4 border-b border-[color:var(--site-border)] pb-6">
85
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">
84
+ <header class="space-y-4 border-b border-[color:var(--ts-color-border)] pb-6">
85
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">
86
86
  {activeBook?.sectionLabel ?? 'Knowledge'}
87
87
  </p>
88
- <h1 class="font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">
88
+ <h1 class="font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">
89
89
  {document.entry.data.title ?? document.entry.slug}
90
90
  </h1>
91
91
  {document.entry.data.summary && (
92
- <p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">{document.entry.data.summary}</p>
92
+ <p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{document.entry.data.summary}</p>
93
93
  )}
94
94
  </header>
95
95
  <div class="prose-karyon max-w-none">
@@ -36,13 +36,13 @@ const ungroupedEntries = (docsTree ?? []).filter((entry) =>
36
36
  currentPath="/knowledge/"
37
37
  >
38
38
  <div class="grid gap-8 lg:grid-cols-[0.75fr_1.25fr]">
39
- <aside class="space-y-6 border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
39
+ <aside class="space-y-6 border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
40
40
  <div class="space-y-3">
41
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Knowledge hub</p>
41
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Knowledge hub</p>
42
42
  {runtime?.TREESEED_LIBRARY_DOWNLOAD && (
43
43
  <a
44
44
  href={runtime.TREESEED_LIBRARY_DOWNLOAD.downloadHref}
45
- class="inline-flex border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]"
45
+ class="inline-flex border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]"
46
46
  >
47
47
  {runtime.TREESEED_LIBRARY_DOWNLOAD.downloadTitle}
48
48
  </a>
@@ -50,33 +50,33 @@ const ungroupedEntries = (docsTree ?? []).filter((entry) =>
50
50
  </div>
51
51
  {bookGroups.map((group) => (
52
52
  <div class="space-y-3">
53
- <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">{group.book.sectionLabel}</p>
54
- <ul class="space-y-2 text-sm text-[color:var(--site-text-muted)]">
53
+ <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">{group.book.sectionLabel}</p>
54
+ <ul class="space-y-2 text-sm text-[color:var(--ts-color-text-muted)]">
55
55
  {group.entries.map((entry) => (
56
- <li><a href={entry.path} class="hover:text-[color:var(--site-text)]">{entry.title ?? entry.slug}</a></li>
56
+ <li><a href={entry.path} class="hover:text-[color:var(--ts-color-text)]">{entry.title ?? entry.slug}</a></li>
57
57
  ))}
58
58
  </ul>
59
59
  </div>
60
60
  ))}
61
61
  {ungroupedEntries.length > 0 && (
62
62
  <div class="space-y-3">
63
- <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">More knowledge</p>
64
- <ul class="space-y-2 text-sm text-[color:var(--site-text-muted)]">
63
+ <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">More knowledge</p>
64
+ <ul class="space-y-2 text-sm text-[color:var(--ts-color-text-muted)]">
65
65
  {ungroupedEntries.map((entry) => (
66
- <li><a href={entry.path} class="hover:text-[color:var(--site-text)]">{entry.title ?? entry.slug}</a></li>
66
+ <li><a href={entry.path} class="hover:text-[color:var(--ts-color-text)]">{entry.title ?? entry.slug}</a></li>
67
67
  ))}
68
68
  </ul>
69
69
  </div>
70
70
  )}
71
71
  </aside>
72
72
  <article class="space-y-6">
73
- <header class="space-y-4 border-b border-[color:var(--site-border)] pb-6">
74
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Published docs</p>
75
- <h1 class="font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">
73
+ <header class="space-y-4 border-b border-[color:var(--ts-color-border)] pb-6">
74
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Published docs</p>
75
+ <h1 class="font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">
76
76
  {document.entry.data.title ?? 'Knowledge'}
77
77
  </h1>
78
78
  {document.entry.data.summary && (
79
- <p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">{document.entry.data.summary}</p>
79
+ <p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{document.entry.data.summary}</p>
80
80
  )}
81
81
  </header>
82
82
  <div class="prose-karyon max-w-none">
@@ -155,12 +155,12 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
155
155
  <StageBanner />
156
156
  </div>
157
157
  <div slot="title">
158
- <h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-7xl">
158
+ <h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-7xl">
159
159
  A small TreeSeed site that doubles as documentation and a real test ground.
160
160
  </h1>
161
161
  </div>
162
162
  <div slot="body">
163
- <p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">
163
+ <p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">
164
164
  TreeSeed works best when contributors can understand the package, inspect the
165
165
  tenant surface, and verify real workflows without reconstructing everything from
166
166
  source code alone. This fixture keeps those paths visible by combining pages,
@@ -168,12 +168,12 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
168
168
  </p>
169
169
  </div>
170
170
  <div slot="actions">
171
- <a href="/status/" class="border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">See what exists today</a>
172
- <a href="/vision/" class="border border-[color:var(--site-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">Read the vision</a>
171
+ <a href="/status/" class="border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">See what exists today</a>
172
+ <a href="/vision/" class="border border-[color:var(--ts-color-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">Read the vision</a>
173
173
  </div>
174
174
  <div slot="aside" class="space-y-4">
175
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Right now</p>
176
- <ul class="space-y-4 text-base leading-8 text-[color:var(--site-text-muted)]">
175
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Right now</p>
176
+ <ul class="space-y-4 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
177
177
  <li>A full TreeSeed content surface with pages, notes, questions, objectives, proposals, decisions, people, agents, books, and docs.</li>
178
178
  <li>Package defaults exercised through a realistic tenant instead of isolated unit tests alone.</li>
179
179
  <li>Forms, book exports, and navigation paths that participate in release verification.</li>
@@ -189,7 +189,7 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
189
189
  title="A working site for documentation, management, and verification"
190
190
  description="TreeSeed is easiest to understand when the package runtime and the tenant experience are visible together. The fixture exists to make that relationship concrete."
191
191
  />
192
- <div class="space-y-4 text-lg leading-9 text-[color:var(--site-text-muted)]">
192
+ <div class="space-y-4 text-lg leading-9 text-[color:var(--ts-color-text-muted)]">
193
193
  <p>
194
194
  The site is intentionally generic. It is not here to tell one project’s story.
195
195
  It is here to show how TreeSeed can organize content, contributor roles, inquiry,
@@ -209,25 +209,25 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
209
209
  />
210
210
  </section>
211
211
 
212
- <section class="space-y-6 border-t border-[color:var(--site-border)] pt-10">
212
+ <section class="space-y-6 border-t border-[color:var(--ts-color-border)] pt-10">
213
213
  <SectionIntro
214
214
  eyebrow="What Makes It Useful"
215
215
  title="The site keeps docs, inquiry, and operations in the same surface"
216
216
  description="The fixture is designed to show how TreeSeed can turn scattered workflow concepts into one inspectable tenant."
217
217
  />
218
218
  <div class="grid gap-6 md:grid-cols-2">
219
- <div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
220
- <h2 class="font-serif text-2xl text-[color:var(--site-text)]">Content commitments</h2>
221
- <ul class="mt-4 space-y-3 text-base leading-8 text-[color:var(--site-text-muted)]">
219
+ <div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
220
+ <h2 class="font-serif text-2xl text-[color:var(--ts-color-text)]">Content commitments</h2>
221
+ <ul class="mt-4 space-y-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
222
222
  <li>Questions, objectives, proposals, and decisions stay visible instead of disappearing into process notes.</li>
223
223
  <li>Books and docs remain queryable content, not only navigation configuration.</li>
224
224
  <li>People and agents are explicit contributors rather than invisible supporting actors.</li>
225
225
  <li>Notes can still capture evidence and rationale without replacing proposal and decision records.</li>
226
226
  </ul>
227
227
  </div>
228
- <div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
229
- <h2 class="font-serif text-2xl text-[color:var(--site-text)]">Execution posture</h2>
230
- <ul class="mt-4 space-y-3 text-base leading-8 text-[color:var(--site-text-muted)]">
228
+ <div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
229
+ <h2 class="font-serif text-2xl text-[color:var(--ts-color-text)]">Execution posture</h2>
230
+ <ul class="mt-4 space-y-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
231
231
  <li>The fixture participates directly in `check`, `build`, and smoke verification.</li>
232
232
  <li>Shared defaults should read clearly in a generic tenant, not only in package code.</li>
233
233
  <li>Generated book exports and forms flows are part of the package contract.</li>
@@ -237,14 +237,14 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
237
237
  </div>
238
238
  </section>
239
239
 
240
- <section class="space-y-6 border-t border-[color:var(--site-border)] pt-10">
240
+ <section class="space-y-6 border-t border-[color:var(--ts-color-border)] pt-10">
241
241
  <SectionIntro
242
242
  eyebrow="What Exists Today"
243
243
  title="A realistic tenant that stays intentionally generic"
244
244
  description="The fixture is broad enough to exercise the package meaningfully, but it stays small enough to remain maintainable and easy to read."
245
245
  />
246
246
  <div class="grid gap-6 lg:grid-cols-[1fr_1fr]">
247
- <div class="space-y-4 text-base leading-8 text-[color:var(--site-text-muted)]">
247
+ <div class="space-y-4 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
248
248
  <p>
249
249
  The current fixture demonstrates the full TreeSeed surface: pages, notes, questions,
250
250
  objectives, proposals, decisions, people, agents, books, docs, and forms. That gives package changes a
@@ -256,14 +256,14 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
256
256
  possible downstream use case.
257
257
  </p>
258
258
  </div>
259
- <div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
260
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-accent-strong)]">Best current shorthand</p>
261
- <p class="mt-4 font-serif text-3xl text-[color:var(--site-text)]">
259
+ <div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
260
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-accent-strong)]">Best current shorthand</p>
261
+ <p class="mt-4 font-serif text-3xl text-[color:var(--ts-color-text)]">
262
262
  Documentation-first example, real enough to break usefully.
263
263
  </p>
264
- <p class="mt-4 text-base leading-8 text-[color:var(--site-text-muted)]">
264
+ <p class="mt-4 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
265
265
  If you want the evidence behind that judgment, the{' '}
266
- <a href="/status/" class="text-[color:var(--site-text)] underline decoration-[color:var(--site-accent)] underline-offset-4">
266
+ <a href="/status/" class="text-[color:var(--ts-color-text)] underline decoration-[color:var(--ts-color-accent)] underline-offset-4">
267
267
  Project Status
268
268
  </a>{' '}
269
269
  page is the right next step.
@@ -272,14 +272,14 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
272
272
  </div>
273
273
  </section>
274
274
 
275
- <section class="grid gap-10 border-t border-[color:var(--site-border)] pt-10 lg:grid-cols-[1.2fr_0.8fr]">
275
+ <section class="grid gap-10 border-t border-[color:var(--ts-color-border)] pt-10 lg:grid-cols-[1.2fr_0.8fr]">
276
276
  <div class="space-y-6">
277
277
  <SectionIntro
278
278
  eyebrow="How To Read The Site"
279
279
  title="Follow the path that matches the question you have"
280
280
  description="Each public page has a single job: explain the platform, ground it in implementation reality, define active work, or make collaboration legible."
281
281
  />
282
- <div class="border-b border-[color:var(--site-border)]">
282
+ <div class="border-b border-[color:var(--ts-color-border)]">
283
283
  <PathCard href="/vision/" title="Vision" meta="Why this fixture exists" description="Start with the reason TreeSeed keeps a generic working site in the repo." />
284
284
  <PathCard href="/status/" title="Status" meta="What the fixture proves today" description="See which package surfaces the fixture is expected to exercise and why that matters." />
285
285
  <PathCard href="/research-direction/" title="Research Direction" meta="What questions organize the work" description="Follow the implementation-facing questions that keep the fixture useful." />
@@ -287,9 +287,9 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
287
287
  <PathCard href="/contribute/" title="Contribute" meta="How to help usefully" description="Find the most useful contribution lanes for a documentation-first TreeSeed site." />
288
288
  </div>
289
289
  </div>
290
- <div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
291
- <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Useful feedback</p>
292
- <p class="mt-4 text-base leading-8 text-[color:var(--site-text-muted)]">
290
+ <div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
291
+ <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Useful feedback</p>
292
+ <p class="mt-4 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
293
293
  The most helpful feedback is concrete: which defaults still feel confusing, which
294
294
  workflows are hard to infer, and which parts of the fixture are too thin or too heavy
295
295
  to serve as a reliable test ground.
@@ -298,7 +298,7 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
298
298
  </section>
299
299
 
300
300
  {notesRendered && (
301
- <section class="space-y-6 border-t border-[color:var(--site-border)] pt-10">
301
+ <section class="space-y-6 border-t border-[color:var(--ts-color-border)] pt-10">
302
302
  <SectionIntro
303
303
  eyebrow="Notes"
304
304
  title="Working notes instead of polished announcements"
@@ -309,7 +309,7 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
309
309
  )}
310
310
 
311
311
  {(questionsRendered || objectivesRendered || proposalsRendered || decisionsRendered || peopleRendered || agentsRendered || booksRendered) && (
312
- <section class="space-y-8 border-t border-[color:var(--site-border)] pt-10">
312
+ <section class="space-y-8 border-t border-[color:var(--ts-color-border)] pt-10">
313
313
  <SectionIntro
314
314
  eyebrow="TreeSeed"
315
315
  title="Questions, objectives, proposals, decisions, contributors, and books form one connected working surface"