@treeseed/core 0.8.8 → 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
@@ -4,21 +4,21 @@
4
4
  @import "./prose.css";
5
5
 
6
6
  @theme {
7
- --font-sans: "IBM Plex Sans", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
8
- --font-serif: "Source Serif 4", "Palatino Linotype", "Iowan Old Style", serif;
9
- --font-mono: "IBM Plex Mono", ui-monospace, monospace;
7
+ --font-sans: "Aptos", "SF Pro Text", "Segoe UI Variable", "Segoe UI", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
8
+ --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", ui-serif, Georgia, serif;
9
+ --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", "IBM Plex Mono", ui-monospace, monospace;
10
10
  }
11
11
 
12
12
  html {
13
- background: var(--site-bg);
14
- color: var(--site-text);
13
+ background: var(--ts-color-canvas);
14
+ color: var(--ts-color-text);
15
15
  scroll-behavior: smooth;
16
16
  }
17
17
 
18
18
  body {
19
19
  min-height: 100vh;
20
- background: var(--site-bg);
21
- color: var(--site-text);
20
+ background: var(--ts-color-canvas);
21
+ color: var(--ts-color-text);
22
22
  font-family: var(--font-sans);
23
23
  font-size: 18px;
24
24
  line-height: 1.75;
@@ -32,19 +32,19 @@ a {
32
32
 
33
33
  button,
34
34
  a {
35
- outline-color: var(--site-blue);
35
+ outline-color: var(--ts-color-info);
36
36
  }
37
37
 
38
38
  a:focus-visible,
39
39
  button:focus-visible {
40
- outline: 3px solid color-mix(in srgb, var(--site-blue) 74%, white 26%);
40
+ outline: 3px solid var(--ts-color-focus);
41
41
  outline-offset: 3px;
42
42
  border-radius: 0.2rem;
43
43
  }
44
44
 
45
45
  ::selection {
46
- background: rgba(95, 141, 164, 0.22);
47
- color: var(--site-text);
46
+ background: var(--ts-color-info-soft);
47
+ color: var(--ts-color-text);
48
48
  }
49
49
 
50
50
  :root,
@@ -57,52 +57,52 @@ button:focus-visible {
57
57
  --sl-font-system: var(--font-sans);
58
58
  --sl-font-system-mono: var(--font-mono);
59
59
 
60
- --sl-color-white: var(--site-text);
61
- --sl-color-gray-1: var(--site-text);
62
- --sl-color-gray-2: var(--site-text-muted);
63
- --sl-color-gray-3: var(--site-text-soft);
64
- --sl-color-gray-4: #8c816d;
65
- --sl-color-gray-5: #cabda8;
66
- --sl-color-gray-6: var(--site-bg-elevated);
67
- --sl-color-gray-7: var(--site-bg-soft);
68
- --sl-color-black: var(--site-bg-soft);
69
-
70
- --sl-color-orange-high: #7c4d24;
71
- --sl-color-orange: var(--site-warm);
72
- --sl-color-orange-low: rgba(194, 139, 91, 0.14);
73
- --sl-color-green-high: var(--site-blue-strong);
74
- --sl-color-green: var(--site-blue);
75
- --sl-color-green-low: var(--site-blue-soft);
76
- --sl-color-blue-high: var(--site-blue-strong);
77
- --sl-color-blue: var(--site-blue);
78
- --sl-color-blue-low: var(--site-blue-soft);
79
- --sl-color-purple-high: #5f5743;
80
- --sl-color-purple: #7d7358;
81
- --sl-color-purple-low: rgba(125, 115, 88, 0.12);
82
- --sl-color-red-high: #7b3d36;
83
- --sl-color-red: #b96555;
84
- --sl-color-red-low: rgba(185, 101, 85, 0.12);
85
-
86
- --sl-color-accent-high: var(--site-blue-strong);
87
- --sl-color-accent: var(--site-blue);
88
- --sl-color-accent-low: var(--site-blue-soft);
89
-
90
- --sl-color-text: var(--site-text-muted);
91
- --sl-color-text-accent: var(--site-blue-strong);
92
- --sl-color-text-invert: var(--site-text);
93
- --sl-color-bg: var(--site-bg-soft);
94
- --sl-color-bg-nav: color-mix(in srgb, var(--site-bg-soft) 92%, white 8%);
95
- --sl-color-bg-sidebar: color-mix(in srgb, var(--site-bg-elevated) 70%, white 30%);
96
- --sl-color-bg-inline-code: color-mix(in srgb, var(--site-blue-soft) 60%, white 40%);
97
- --sl-color-bg-accent: var(--site-blue-soft);
98
- --sl-color-hairline-light: color-mix(in srgb, var(--site-border) 80%, white 20%);
99
- --sl-color-hairline: var(--site-border);
100
- --sl-color-hairline-shade: var(--site-border-strong);
101
- --sl-color-backdrop-overlay: rgba(78, 67, 49, 0.28);
102
-
103
- --sl-shadow-sm: var(--site-shadow);
104
- --sl-shadow-md: var(--site-shadow);
105
- --sl-shadow-lg: var(--site-shadow);
60
+ --sl-color-white: var(--ts-color-text);
61
+ --sl-color-gray-1: var(--ts-color-text);
62
+ --sl-color-gray-2: var(--ts-color-text-muted);
63
+ --sl-color-gray-3: var(--ts-color-text-subtle);
64
+ --sl-color-gray-4: var(--ts-color-border-strong);
65
+ --sl-color-gray-5: var(--ts-color-border);
66
+ --sl-color-gray-6: var(--ts-color-canvas-subtle);
67
+ --sl-color-gray-7: var(--ts-color-canvas-subtle);
68
+ --sl-color-black: var(--ts-color-canvas-subtle);
69
+
70
+ --sl-color-orange-high: var(--ts-color-warning-text);
71
+ --sl-color-orange: var(--ts-color-warning);
72
+ --sl-color-orange-low: var(--ts-color-warning-soft);
73
+ --sl-color-green-high: var(--ts-color-info-text);
74
+ --sl-color-green: var(--ts-color-info);
75
+ --sl-color-green-low: var(--ts-color-info-soft);
76
+ --sl-color-blue-high: var(--ts-color-info-text);
77
+ --sl-color-blue: var(--ts-color-info);
78
+ --sl-color-blue-low: var(--ts-color-info-soft);
79
+ --sl-color-purple-high: var(--ts-color-accent-strong);
80
+ --sl-color-purple: var(--ts-color-accent);
81
+ --sl-color-purple-low: var(--ts-color-accent-soft);
82
+ --sl-color-red-high: var(--ts-color-danger-text);
83
+ --sl-color-red: var(--ts-color-danger);
84
+ --sl-color-red-low: var(--ts-color-danger-soft);
85
+
86
+ --sl-color-accent-high: var(--ts-color-info-text);
87
+ --sl-color-accent: var(--ts-color-info);
88
+ --sl-color-accent-low: var(--ts-color-info-soft);
89
+
90
+ --sl-color-text: var(--ts-color-text-muted);
91
+ --sl-color-text-accent: var(--ts-color-info-text);
92
+ --sl-color-text-invert: var(--ts-color-text);
93
+ --sl-color-bg: var(--ts-color-canvas-subtle);
94
+ --sl-color-bg-nav: color-mix(in srgb, var(--ts-color-canvas-subtle) 92%, var(--ts-color-surface) 8%);
95
+ --sl-color-bg-sidebar: color-mix(in srgb, var(--ts-color-canvas-subtle) 70%, var(--ts-color-surface) 30%);
96
+ --sl-color-bg-inline-code: color-mix(in srgb, var(--ts-color-info-soft) 60%, var(--ts-color-surface) 40%);
97
+ --sl-color-bg-accent: var(--ts-color-info-soft);
98
+ --sl-color-hairline-light: color-mix(in srgb, var(--ts-color-border) 80%, var(--ts-color-surface) 20%);
99
+ --sl-color-hairline: var(--ts-color-border);
100
+ --sl-color-hairline-shade: var(--ts-color-border-strong);
101
+ --sl-color-backdrop-overlay: var(--ts-color-surface-overlay);
102
+
103
+ --sl-shadow-sm: var(--ts-color-shadow);
104
+ --sl-shadow-md: var(--ts-color-shadow);
105
+ --sl-shadow-lg: var(--ts-color-shadow);
106
106
 
107
107
  --sl-text-body: 1.05rem;
108
108
  --sl-text-body-sm: 0.95rem;
@@ -117,7 +117,7 @@ button:focus-visible {
117
117
  }
118
118
 
119
119
  .content-panel + .content-panel {
120
- border-top: 1px solid var(--site-border);
120
+ border-top: 1px solid var(--ts-color-border);
121
121
  }
122
122
 
123
123
  :root[data-docs-book-page='true'] .content-panel:has(.docs-page-title--book) {
@@ -126,8 +126,8 @@ button:focus-visible {
126
126
  z-index: calc(var(--sl-z-index-navbar) - 1);
127
127
  padding-top: 0.95rem;
128
128
  padding-bottom: 0.9rem;
129
- background: color-mix(in srgb, var(--site-bg-soft) 94%, white 6%);
130
- border-bottom: 1px solid var(--site-border);
129
+ background: color-mix(in srgb, var(--ts-color-canvas-subtle) 94%, var(--ts-color-surface) 6%);
130
+ border-bottom: 1px solid var(--ts-color-border);
131
131
  }
132
132
 
133
133
  :root[data-docs-book-page='true'] .content-panel:has(.docs-page-title--book) .sl-container {
@@ -166,7 +166,7 @@ button:focus-visible {
166
166
  }
167
167
 
168
168
  .sidebar-pane {
169
- background-color: color-mix(in srgb, var(--site-bg-elevated) 78%, white 22%) !important;
169
+ background-color: color-mix(in srgb, var(--ts-color-canvas-subtle) 78%, var(--ts-color-surface) 22%) !important;
170
170
  }
171
171
 
172
172
  .sidebar-content {
@@ -177,54 +177,54 @@ button:focus-visible {
177
177
  .right-sidebar-panel :where(a),
178
178
  .pagination-links a,
179
179
  .pagination-links span {
180
- color: var(--site-text-muted);
180
+ color: var(--ts-color-text-muted);
181
181
  }
182
182
 
183
183
  .sidebar-content a[aria-current='page'],
184
184
  .sidebar-content a:hover,
185
185
  .right-sidebar-panel :where(a:hover),
186
186
  .pagination-links a:hover {
187
- color: var(--site-text);
187
+ color: var(--ts-color-text);
188
188
  }
189
189
 
190
190
  .sidebar-content :is(summary, h2, h3, [aria-current='page']) {
191
- color: var(--site-blue-strong) !important;
191
+ color: var(--ts-color-info-text) !important;
192
192
  }
193
193
 
194
194
  .sidebar-content :is(summary:hover, h2:hover, h3:hover, [aria-current='page']:hover) {
195
- color: var(--site-text) !important;
195
+ color: var(--ts-color-text) !important;
196
196
  }
197
197
 
198
198
  .sidebar-content a[aria-current='page'] {
199
- background: color-mix(in srgb, var(--site-blue-soft) 64%, white 36%) !important;
199
+ background: color-mix(in srgb, var(--ts-color-info-soft) 64%, var(--ts-color-surface) 36%) !important;
200
200
  border-radius: 0.35rem;
201
201
  }
202
202
 
203
203
  .sl-link-button.primary {
204
- background: var(--site-accent) !important;
205
- border-color: var(--site-accent) !important;
206
- color: var(--site-text) !important;
204
+ background: var(--ts-color-accent) !important;
205
+ border-color: var(--ts-color-accent) !important;
206
+ color: var(--ts-color-text) !important;
207
207
  }
208
208
 
209
209
  .sl-link-button.primary:hover,
210
210
  .sl-link-button.primary:focus-visible {
211
- background: color-mix(in srgb, var(--site-accent) 74%, var(--site-blue-soft) 26%) !important;
212
- border-color: var(--site-blue) !important;
213
- color: var(--site-text) !important;
211
+ background: color-mix(in srgb, var(--ts-color-accent) 74%, var(--ts-color-info-soft) 26%) !important;
212
+ border-color: var(--ts-color-info) !important;
213
+ color: var(--ts-color-text) !important;
214
214
  }
215
215
 
216
216
  .sl-link-button.secondary,
217
217
  .sl-link-button.minimal {
218
- color: var(--site-text) !important;
219
- border-color: var(--site-border-strong) !important;
218
+ color: var(--ts-color-text) !important;
219
+ border-color: var(--ts-color-border-strong) !important;
220
220
  background: transparent !important;
221
221
  }
222
222
 
223
223
  .sl-link-card,
224
224
  .card,
225
225
  .content-panel .card {
226
- background: color-mix(in srgb, var(--site-bg-soft) 86%, white 14%) !important;
227
- border-color: var(--site-border) !important;
226
+ background: color-mix(in srgb, var(--ts-color-canvas-subtle) 86%, var(--ts-color-surface) 14%) !important;
227
+ border-color: var(--ts-color-border) !important;
228
228
  border-radius: 0.55rem !important;
229
229
  box-shadow: none !important;
230
230
  }
@@ -241,13 +241,13 @@ button:focus-visible {
241
241
  }
242
242
 
243
243
  .sl-markdown-content {
244
- color: var(--site-text-muted);
244
+ color: var(--ts-color-text-muted);
245
245
  font-size: 1.08rem;
246
246
  line-height: 1.9;
247
247
  }
248
248
 
249
249
  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
250
- color: var(--site-text) !important;
250
+ color: var(--ts-color-text) !important;
251
251
  font-weight: 700 !important;
252
252
  letter-spacing: -0.02em;
253
253
  }
@@ -278,7 +278,7 @@ button:focus-visible {
278
278
  }
279
279
 
280
280
  .sl-markdown-content :is(p, li, dd):not(:where(.not-content *)) {
281
- color: var(--site-text-muted);
281
+ color: var(--ts-color-text-muted);
282
282
  line-height: 1.9;
283
283
  }
284
284
 
@@ -417,41 +417,41 @@ button:focus-visible {
417
417
  }
418
418
 
419
419
  .sl-markdown-content :is(ul, ol) > li:not(:where(.not-content *))::marker {
420
- color: var(--site-text);
420
+ color: var(--ts-color-text);
421
421
  font-weight: 600;
422
422
  }
423
423
 
424
424
  .sl-markdown-content a:not(:where(.not-content *)) {
425
- color: var(--site-accent-strong) !important;
425
+ color: var(--ts-color-accent-strong) !important;
426
426
  text-decoration: underline;
427
427
  text-underline-offset: 0.16em;
428
428
  font-weight: 600;
429
429
  }
430
430
 
431
431
  .sl-markdown-content a:hover:not(:where(.not-content *)) {
432
- color: var(--site-blue) !important;
432
+ color: var(--ts-color-info) !important;
433
433
  }
434
434
 
435
435
  .sl-markdown-content code:not(:where(.not-content *)) {
436
- background-color: rgba(95, 141, 164, 0.12) !important;
437
- border: 1px solid rgba(95, 141, 164, 0.22);
436
+ background-color: var(--ts-color-info-soft) !important;
437
+ border: 1px solid var(--ts-color-info-border);
438
438
  border-radius: 0.4rem;
439
- color: var(--site-text);
439
+ color: var(--ts-color-text);
440
440
  padding: 0.12rem 0.38rem;
441
441
  font-size: 0.92em;
442
442
  }
443
443
 
444
444
  .sl-markdown-content pre:not(:where(.not-content *)),
445
445
  .expressive-code {
446
- border-color: var(--site-border) !important;
446
+ border-color: var(--ts-color-border) !important;
447
447
  box-shadow: none !important;
448
448
  }
449
449
 
450
450
  .sl-markdown-content pre:not(:where(.not-content *)) {
451
451
  margin: 1.4rem 0 1.7rem !important;
452
- border: 1px solid color-mix(in srgb, var(--site-border) 82%, var(--site-blue) 18%) !important;
452
+ border: 1px solid color-mix(in srgb, var(--ts-color-border) 82%, var(--ts-color-info) 18%) !important;
453
453
  border-radius: 0.9rem !important;
454
- background: color-mix(in srgb, var(--site-bg-elevated) 82%, white 18%) !important;
454
+ background: color-mix(in srgb, var(--ts-color-canvas-subtle) 82%, var(--ts-color-surface) 18%) !important;
455
455
  overflow-x: auto;
456
456
  }
457
457
 
@@ -468,9 +468,9 @@ button:focus-visible {
468
468
  --ec-uiPadInl: 1rem;
469
469
  --ec-codePadBlk: 0.95rem;
470
470
  --ec-codePadInl: 1rem;
471
- --ec-codeBg: color-mix(in srgb, var(--site-bg-elevated) 84%, white 16%);
471
+ --ec-codeBg: color-mix(in srgb, var(--ts-color-canvas-subtle) 84%, var(--ts-color-surface) 16%);
472
472
  --ec-frameBoxShdCssVal: none;
473
- --ec-brdCol: color-mix(in srgb, var(--site-border) 78%, var(--site-blue) 22%);
473
+ --ec-brdCol: color-mix(in srgb, var(--ts-color-border) 78%, var(--ts-color-info) 22%);
474
474
  }
475
475
 
476
476
  .expressive-code :is(pre, code) {
@@ -490,12 +490,12 @@ button:focus-visible {
490
490
  font-size: 0.84rem;
491
491
  font-weight: 600;
492
492
  letter-spacing: 0.01em;
493
- color: var(--site-text-soft);
493
+ color: var(--ts-color-text-subtle);
494
494
  }
495
495
 
496
496
  .expressive-code [data-language],
497
497
  .expressive-code .ec-section summary {
498
- color: var(--site-text-soft);
498
+ color: var(--ts-color-text-subtle);
499
499
  }
500
500
 
501
501
  .expressive-code button {
@@ -514,13 +514,13 @@ button:focus-visible {
514
514
 
515
515
  .sl-markdown-content pre:not(:where(.not-content *))::-webkit-scrollbar-thumb,
516
516
  .katex-display::-webkit-scrollbar-thumb {
517
- background: color-mix(in srgb, var(--site-border-strong) 72%, var(--site-blue) 28%);
517
+ background: color-mix(in srgb, var(--ts-color-border-strong) 72%, var(--ts-color-info) 28%);
518
518
  border-radius: 999px;
519
519
  }
520
520
 
521
521
  .sl-markdown-content .katex {
522
522
  font-size: 1.04em;
523
- color: var(--site-text);
523
+ color: var(--ts-color-text);
524
524
  }
525
525
 
526
526
  .sl-markdown-content .katex-display {
@@ -541,21 +541,21 @@ button:focus-visible {
541
541
 
542
542
  .sl-markdown-content blockquote:not(:where(.not-content *)),
543
543
  .sl-markdown-content details:not(:where(.not-content *)) {
544
- border-inline-start-color: var(--site-accent) !important;
544
+ border-inline-start-color: var(--ts-color-accent) !important;
545
545
  }
546
546
 
547
547
  .sl-markdown-content summary:not(:where(.not-content *)),
548
548
  .right-sidebar-panel :global(h2) {
549
- color: var(--site-text) !important;
549
+ color: var(--ts-color-text) !important;
550
550
  }
551
551
 
552
552
  .sl-markdown-content :is(th, td):not(:where(.not-content *)),
553
553
  .sl-markdown-content hr:not(:where(.not-content *)) {
554
- border-color: var(--site-border) !important;
554
+ border-color: var(--ts-color-border) !important;
555
555
  }
556
556
 
557
557
  .sl-markdown-content th:not(:where(.not-content *)) {
558
- color: var(--site-text) !important;
558
+ color: var(--ts-color-text) !important;
559
559
  }
560
560
 
561
561
  .site-header-custom {
@@ -565,7 +565,7 @@ button:focus-visible {
565
565
  }
566
566
 
567
567
  .site-header-custom a {
568
- color: var(--site-accent-strong);
568
+ color: var(--ts-color-accent-strong);
569
569
  }
570
570
 
571
571
  .site-footer-cta {
@@ -574,8 +574,8 @@ button:focus-visible {
574
574
  margin-left: calc(50% - 50vw);
575
575
  margin-right: calc(50% - 50vw);
576
576
  margin-bottom: -8rem;
577
- background: var(--site-bg-soft);
578
- border-top: 1px solid color-mix(in srgb, var(--site-blue) 36%, white 12%);
577
+ background: var(--ts-color-canvas-subtle);
578
+ border-top: 1px solid color-mix(in srgb, var(--ts-color-info) 36%, var(--ts-color-surface) 12%);
579
579
  }
580
580
 
581
581
  .site-footer-cta::before {
@@ -589,7 +589,7 @@ button:focus-visible {
589
589
  .site-footer-cta__inner {
590
590
  position: relative;
591
591
  z-index: 1;
592
- width: min(100%, var(--site-max));
592
+ width: min(100%, var(--ts-content-width));
593
593
  margin: 0 auto;
594
594
  padding: 3rem 1.5rem 3.5rem;
595
595
  text-align: center;
@@ -617,10 +617,10 @@ button:focus-visible {
617
617
  min-width: 12.75rem;
618
618
  min-height: 3rem;
619
619
  padding: 0.65rem 1.2rem;
620
- background-color: var(--site-accent-soft);
621
- color: var(--site-accent-strong);
620
+ background-color: var(--ts-color-accent-soft);
621
+ color: var(--ts-color-accent-strong);
622
622
  text-decoration: none;
623
- border: 1px solid var(--site-border-strong);
623
+ border: 1px solid var(--ts-color-border-strong);
624
624
  border-radius: 0.4rem;
625
625
  font-weight: 600;
626
626
  font-size: 1rem;
@@ -630,14 +630,14 @@ button:focus-visible {
630
630
  }
631
631
 
632
632
  .download-button:hover {
633
- background-color: var(--site-blue-soft);
634
- border-color: var(--site-blue);
635
- color: var(--site-accent-strong);
633
+ background-color: var(--ts-color-info-soft);
634
+ border-color: var(--ts-color-info);
635
+ color: var(--ts-color-accent-strong);
636
636
  }
637
637
 
638
638
  .download-button:focus-visible,
639
639
  .download-button:active {
640
- color: var(--site-accent-strong);
640
+ color: var(--ts-color-accent-strong);
641
641
  }
642
642
 
643
643
  .docs-header-search {
@@ -651,9 +651,9 @@ button:focus-visible {
651
651
  min-width: 17rem !important;
652
652
  min-height: 3rem !important;
653
653
  padding: 0.65rem 1.2rem !important;
654
- background: var(--site-accent-soft) !important;
655
- border-color: var(--site-border-strong) !important;
656
- color: var(--site-text) !important;
654
+ background: var(--ts-color-accent-soft) !important;
655
+ border-color: var(--ts-color-border-strong) !important;
656
+ color: var(--ts-color-text) !important;
657
657
  font-size: 1rem !important;
658
658
  line-height: 1 !important;
659
659
  white-space: nowrap;
@@ -661,23 +661,23 @@ button:focus-visible {
661
661
 
662
662
  .docs-header-search button[data-open-modal]:hover,
663
663
  .docs-header-search button[data-open-modal]:focus-visible {
664
- background: var(--site-blue-soft) !important;
665
- border-color: var(--site-blue) !important;
666
- color: var(--site-text) !important;
664
+ background: var(--ts-color-info-soft) !important;
665
+ border-color: var(--ts-color-info) !important;
666
+ color: var(--ts-color-text) !important;
667
667
  }
668
668
 
669
669
  .docs-header-search button[data-open-modal] > span {
670
670
  font-size: 1rem;
671
- color: var(--site-text) !important;
671
+ color: var(--ts-color-text) !important;
672
672
  }
673
673
 
674
674
  .docs-header-search button[data-open-modal] > kbd {
675
675
  font-size: 0.82rem;
676
- color: var(--site-text-soft) !important;
677
- border-color: color-mix(in srgb, var(--site-border-strong) 70%, white 30%) !important;
676
+ color: var(--ts-color-text-subtle) !important;
677
+ border-color: color-mix(in srgb, var(--ts-color-border-strong) 70%, var(--ts-color-surface) 30%) !important;
678
678
  }
679
679
 
680
680
  .docs-header-search button[data-open-modal] :where(svg, path) {
681
- color: var(--site-text) !important;
681
+ color: var(--ts-color-text) !important;
682
682
  stroke: currentColor;
683
683
  }
@@ -1,12 +1,12 @@
1
1
  .prose-karyon {
2
- color: var(--site-text);
2
+ color: var(--ts-color-text);
3
3
  font-size: 1.08rem;
4
4
  }
5
5
 
6
6
  .prose-karyon h1,
7
7
  .prose-karyon h2,
8
8
  .prose-karyon h3 {
9
- color: var(--site-text);
9
+ color: var(--ts-color-text);
10
10
  line-height: 1.12;
11
11
  font-weight: 700;
12
12
  }
@@ -31,7 +31,7 @@
31
31
 
32
32
  .prose-karyon p,
33
33
  .prose-karyon li {
34
- color: var(--site-text-muted);
34
+ color: var(--ts-color-text-muted);
35
35
  line-height: 1.85;
36
36
  }
37
37
 
@@ -44,14 +44,14 @@
44
44
  }
45
45
 
46
46
  .prose-karyon a {
47
- color: var(--site-accent-strong);
47
+ color: var(--ts-color-accent-strong);
48
48
  text-decoration: underline;
49
49
  text-underline-offset: 0.16em;
50
50
  font-weight: 600;
51
51
  }
52
52
 
53
53
  .prose-karyon strong {
54
- color: var(--site-text);
54
+ color: var(--ts-color-text);
55
55
  }
56
56
 
57
57
  .prose-karyon ul,
@@ -60,20 +60,20 @@
60
60
  }
61
61
 
62
62
  .prose-karyon blockquote {
63
- border-left: 4px solid var(--site-accent);
63
+ border-left: 4px solid var(--ts-color-accent);
64
64
  padding-left: 1rem;
65
- color: var(--site-text-muted);
65
+ color: var(--ts-color-text-muted);
66
66
  }
67
67
 
68
68
  .prose-karyon code {
69
- background: rgba(95, 141, 164, 0.12);
70
- border: 1px solid rgba(95, 141, 164, 0.22);
69
+ background: var(--ts-color-info-soft);
70
+ border: 1px solid var(--ts-color-info-border);
71
71
  border-radius: 0.5rem;
72
72
  padding: 0.1rem 0.35rem;
73
73
  }
74
74
 
75
75
  .prose-karyon hr {
76
- border-color: var(--site-border);
76
+ border-color: var(--ts-color-border);
77
77
  margin: 2.4rem 0;
78
78
  }
79
79
 
@@ -83,7 +83,7 @@
83
83
  }
84
84
 
85
85
  .prose-karyon :where(th, td) {
86
- border-bottom: 1px solid var(--site-border);
86
+ border-bottom: 1px solid var(--ts-color-border);
87
87
  padding: 0.85rem 0.75rem;
88
88
  text-align: left;
89
89
  }