+
+
-
+
-### SDKs & CLI
+Network details
-- All SDKs
-- TypeScript
-- Rust
-- Go
-- Python
-- Foundry
-- Tempo CLI
+RPC endpoints, chain IDs, and explorers.
-
+
-
-
-
+
-### Protocol & infrastructure
+Testnet faucet
-- Protocol reference
-- Stablecoins on Tempo
-- JSON-RPC reference
-- Run a node
-- Changelog
+Get free test stablecoins on testnet.
-
+
-
-
-
-
-
-
+
+
+API reference
+
+Endpoints, authentication, and conventions.
-### APIs & partners
+
+
+
+
-- Tempo API
-- API keys
-- Console guide
-- Partners
-- Open source on GitHub
+SDKs & CLI
+
+TypeScript, Rust, Go, Python, Foundry, and the Tempo CLI.
+
diff --git a/src/styles/contract.ts b/src/styles/contract.ts
index f2ce44ecd..be53dbc75 100644
--- a/src/styles/contract.ts
+++ b/src/styles/contract.ts
@@ -84,6 +84,9 @@ export const design = extendVars(palette, {
code: 'var(--font-jetbrains-mono)',
sansFallback: 'var(--font-pilat-book), sans-serif',
system: 'var(--font-pilat-book), ui-sans-serif, system-ui, sans-serif',
+ // DS Web copy (Inter, loaded by @tempoxyz/ds): docs prose and the chrome around it, which DS
+ // components share. Titles keep Pilat (`book`).
+ ui: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
},
letterSpacing: {
normal: '0',
diff --git a/src/styles/copyFeedback.ts b/src/styles/copyFeedback.ts
index 043e67466..da2a9c66d 100644
--- a/src/styles/copyFeedback.ts
+++ b/src/styles/copyFeedback.ts
@@ -9,7 +9,7 @@ const iconIn = keyframes({
})
global({
- '.tempo-agent-start-copy, .docs-header-agent-panel, .docs-header-mobile-agents': {
+ '.tempo-agent-start-copy': {
'--tempo-check-color': 'var(--vocs-text-color-primary)',
},
'.tempo-icon-swap': {
diff --git a/src/styles/docsGetStarted.ts b/src/styles/docsGetStarted.ts
index f2daec449..12e01c26d 100644
--- a/src/styles/docsGetStarted.ts
+++ b/src/styles/docsGetStarted.ts
@@ -1,27 +1,16 @@
import { global } from 'zyzz/web'
-import { vars as tokens } from './theme'
// GS1: the Get Started hero. The page opens with its own #get-started anchor,
-// which scopes these rules to it. The lede is narrower and in the primary color,
-// and the page actions sit closer to the lede and to the quickstart line below.
-// At 400px the lede ran four lines and left its last word alone; 560px sets it in
-// three, and pretty wrapping keeps the last line from being a single word.
+// which scopes this rule to it. The lead keeps the shared lead colour (secondary)
+// and rhythm (lead → first content 32); it is only narrower. At 400px it ran four
+// lines and left its last word alone; 560px sets it in three, and pretty wrapping
+// keeps the last line from being a single word.
global({
'@layer utilities': {
- 'article[data-v-content]:has(> [id="get-started"]:first-child) > h1[data-v] + p[data-v]': {
- maxWidth: '560px',
- textWrap: 'pretty',
- marginBottom: tokens.spacing['4'],
- color: tokens.color.foreground,
- },
+ 'article[data-v-content]:has(> [id="get-started"]:is(:first-child, .docs-breadcrumbs + *)) > h1[data-v] + p[data-v]':
+ {
+ maxWidth: '560px',
+ textWrap: 'pretty',
+ },
},
})
-
-// The page-actions recipe is unlayered, so this override is too. Without the
-// recipe's bottom padding, its own margin sets the gap to the quickstart line.
-global({
- 'article[data-v-content]:has(> [id="get-started"]:first-child) > .docs-page-actions-host > .docs-page-actions':
- {
- paddingBottom: tokens.spacing['0'],
- },
-})
diff --git a/src/styles/docsSearch.ts b/src/styles/docsSearch.ts
index 3deb150b9..c3ca8528a 100644
--- a/src/styles/docsSearch.ts
+++ b/src/styles/docsSearch.ts
@@ -19,7 +19,7 @@ global({
// width that globals.ts gives docs layouts (--vocs-spacing-content there, 985.7px at
// 16px Pilat). The dialog is portalled to , outside that layout, so the same
// expression is repeated here.
-// It takes the smoothed panel radius. G4: the light dialog matches the page and
+// It takes the dialog radius (16). G4: the light dialog matches the page and
// keeps a hairline; the dark one is lifted to neutral 088 (above the #141414
// panels it covers) and drops it.
global({
@@ -27,8 +27,8 @@ global({
'[data-base-ui-portal] > [role="dialog"]:has(input[role="combobox"])': {
maxWidth: 'calc(84ch + (var(--vocs-spacing-content-px) * 2))',
borderColor: tokens.color.hairline,
- borderRadius: tokens.radius.panel,
- '--corner-radius': tokens.radius.panel,
+ borderRadius: tokens.radius.xl,
+ '--corner-radius': tokens.radius.xl,
// design-exception: TDS shadow.primary (shade 008) under the lighter scrim; Vocs used shadow-2xl.
boxShadow: '0 16px 48px rgb(0 0 0 / 0.08) !custom',
},
diff --git a/src/styles/docsSteps.ts b/src/styles/docsSteps.ts
index 60ca30144..6d8fc0bc5 100644
--- a/src/styles/docsSteps.ts
+++ b/src/styles/docsSteps.ts
@@ -1,13 +1,19 @@
import { global } from 'zyzz/web'
import { vars as tokens } from './theme'
-// QS2: every step after the first starts 48px below the previous one (Vocs
-// spaces them 24px). Each step is a wrapper that opens with its heading, and
-// sibling margins collapse, so this sets the full gap above steps 2 onward.
+// Steps follow the block rhythm: 24 between steps and 8 from a step's title to its
+// body. Vocs spaces the steps 24 apart; its title sits 24 above a body that pulls up
+// 8, so both margins are set here. The connector (the steps' left rule) is unchanged.
global({
'@layer utilities': {
'[data-v-steps] > * + *': {
- marginTop: tokens.spacing['12'],
+ marginTop: tokens.spacing['6'],
+ },
+ '[data-v-steps] > * > [data-v-step-title]': {
+ marginBottom: tokens.spacing['2'],
+ },
+ '[data-v-steps] > * > [data-v-step-content]': {
+ marginTop: tokens.spacing['0'],
},
},
})
diff --git a/src/styles/globals.ts b/src/styles/globals.ts
index b8845986f..5fa62f7bf 100644
--- a/src/styles/globals.ts
+++ b/src/styles/globals.ts
@@ -112,15 +112,13 @@ global({
'@layer utilities': {
':root': {
'--tempo-docs-outline-width': '240px',
- '--tempo-docs-primary-nav-height': '65px',
- '--tempo-docs-section-nav-height': '44px',
+ '--tempo-docs-primary-nav-height': '56px',
'--tempo-docs-shell-width': '100%',
'--tempo-docs-sidebar-width': '256px',
'--tempo-hub-width': '1168px',
'--tempo-font-display': 'var(--font-pilat-book)',
'--tempo-font-body': 'var(--font-pilat-book)',
- '--vocs-spacing-topNav':
- 'calc( var(--tempo-docs-primary-nav-height) + var(--tempo-docs-section-nav-height) )',
+ '--vocs-spacing-topNav': 'var(--tempo-docs-primary-nav-height)',
},
},
})
@@ -252,53 +250,12 @@ global({
// G11 callouts: see the TDS Callout and Alert treatment at the end of this file.
+// The outline is the rail on wide screens only. Below it, the menu drawer holds the section's
+// pages and the page has no outline, so Vocs' mobile row ("Menu", "On this page") stays hidden.
global({
'@layer utilities': {
- '[data-docs-sidebar-toggle]': {
- display: 'inline-flex',
- },
- '[data-docs-sidebar-toggle]:not([data-docs-sidebar-fallback])': {
- marginInlineEnd: tokens.spacing['2'],
- },
- },
-})
-
-global({
- '@layer utilities': {
- '@media (width >= 1080px)': {
- '[data-docs-sidebar-toggle]': {
- display: 'none',
- },
- },
- },
-})
-
-global({
- '@layer utilities': {
- '[data-docs-sidebar-fallback]': {
- position: 'sticky',
- zIndex: tokens.zIndex.raised,
- top: 'calc(var(--vocs-spacing-topNav) + var(--vocs-spacing-banner))',
- display: 'flex',
- alignItems: 'center',
- height: '48px',
- // design-exception: Preserve the inherited component/framework scope at the point of use.
- paddingInline: 'var(--vocs-spacing-content-px) !custom',
- borderBottomWidth: tokens.borderWidth.hairline,
- borderBottomStyle: 'solid',
- borderBottomColor: inherited.color.vocsBorderColorPrimary,
- backgroundColor: inherited.color.vocsBackgroundColorPrimary,
- fontSize: tokens.fontSize.compact,
- },
- },
-})
-
-global({
- '@layer utilities': {
- '@media (width >= 1080px)': {
- '[data-docs-sidebar-fallback]': {
- display: 'none',
- },
+ '[data-v-outline-mobile]': {
+ display: 'none',
},
},
})
@@ -367,7 +324,7 @@ global({
global({
'@layer utilities': {
'@media (width >= 1376px)': {
- '[data-v-sidebar] [data-v-content], [data-v-sidebar] [data-v-footer]': {
+ '[data-v-sidebar] [data-v-content]': {
marginLeft: 'auto !custom',
marginRight: 'auto !custom',
},
@@ -424,7 +381,7 @@ global({
'@layer utilities': {
'[data-v-sidebar-container] [data-v-sidebar]': {
gap: tokens.spacing['6'],
- fontFamily: tokens.fontFamily.system,
+ fontFamily: tokens.fontFamily.ui,
},
},
})
@@ -439,61 +396,64 @@ global({
global({
'@layer utilities': {
+ // Groups sit 24 apart (the sidebar gap) with no dividers.
'[data-v-sidebar] > [data-v-sidebar-section] + [data-v-sidebar-section]': {
- borderTopWidth: tokens.borderWidth.hairline,
- borderTopStyle: 'solid',
- borderTopColor: inherited.color.colorMixInSrgbForeground12Transparent,
- paddingTop: tokens.spacing['6'],
+ borderTopWidth: tokens.borderWidth.none,
+ paddingTop: tokens.spacing['0'],
},
},
})
-// SB2: a single-section sidebar's header is its title, set like the right rail's
-// "On this page" label in the secondary color. In multi-section sidebars every
-// header is a group label (for example Accounts, Payments, Fees): entry type and
-// spacing in the secondary color. Collapsible headers are interactive, so they
-// keep the entry (primary) color. Entries use the primary color.
+// SB2: every section header is a group label (for example Accounts, Payments,
+// Fees), quieter than its items like DS SidebarMenu's GroupLabel: 12/16 in the
+// tertiary color, 4 above its first item. Labels start on the gutter with the items
+// (sidebar padding 12 + item padding 12). Collapsible headers are controls, so they
+// keep the 32px item height and the item style.
global({
'@layer utilities': {
'[data-v-sidebar] > [data-v-sidebar-section]:only-child > [data-v-sidebar-section-header]': {
height: 'auto',
minHeight: 0,
- // design-exception: Preserve this component’s existing geometry; it is not a shared scale step.
- margin: '0 -8px 12px !custom',
+ // design-exception: Items bleed 12px into the sidebar padding so labels sit on the gutter.
+ margin: '0 -12px 4px !custom',
paddingBlock: tokens.spacing['0'],
- paddingInline: tokens.spacing['2'],
+ paddingInline: tokens.spacing['3'],
backgroundColor: 'transparent !custom',
- color: tokens.color.muted,
- fontSize: tokens.fontSize.compact,
- fontWeight: tokens.fontWeight.medium,
+ color: tokens.color.tertiary,
+ fontFamily: tokens.fontFamily.ui,
+ fontSize: tokens.fontSize.xs,
+ fontWeight: tokens.fontWeight.normal,
letterSpacing: tokens.letterSpacing.normal,
- lineHeight: tokens.lineHeight.normal,
+ lineHeight: tokens.lineHeight.caption,
textTransform: 'none',
},
'[data-v-sidebar] > [data-v-sidebar-section]:not(:only-child) > [data-v-sidebar-section-header], [data-v-sidebar] [data-v-sidebar-section-content] [data-v-sidebar-section-header]:not([data-collapsable="true"])':
{
height: 'auto',
- minHeight: '34px',
- // design-exception: Matches the sidebar entries' geometry below.
- margin: '0 -8px !custom',
+ minHeight: 0,
+ // design-exception: Matches the sidebar entries' 12px bleed below.
+ margin: '0 -12px 4px !custom',
- paddingBlock: tokens.spacing['1_5'],
- paddingInline: tokens.spacing['2'],
+ paddingBlock: tokens.spacing['0'],
+ paddingInline: tokens.spacing['3'],
backgroundColor: 'transparent !custom',
- color: tokens.color.muted,
- fontSize: tokens.fontSize.sm,
+ color: tokens.color.tertiary,
+ fontFamily: tokens.fontFamily.ui,
+ fontSize: tokens.fontSize.xs,
fontWeight: tokens.fontWeight.normal,
letterSpacing: tokens.letterSpacing.normal,
- lineHeight: tokens.lineHeight.normal,
+ lineHeight: tokens.lineHeight.caption,
textTransform: 'none',
},
'[data-v-sidebar] > [data-v-sidebar-section] > [data-v-sidebar-section-header][data-collapsable="true"]':
{
+ minHeight: '32px',
+ paddingBlock: tokens.spacing['1_5'],
color: tokens.color.foreground,
},
},
@@ -522,24 +482,24 @@ global({
global({
'@layer utilities': {
- '[data-v-sidebar] [data-v-sidebar-section-content] [data-v-sidebar-section-header]': {
- minHeight: '34px',
- // design-exception: Preserve this component’s existing geometry; it is not a shared scale step.
- margin: '0 -8px !custom',
+ '[data-v-sidebar] [data-v-sidebar-section-content] [data-v-sidebar-section-header][data-collapsable="true"]':
+ {
+ minHeight: '32px',
+ // design-exception: Items bleed 12px into the sidebar padding so labels sit on the gutter.
+ margin: '0 -12px !custom',
- paddingBlock: tokens.spacing['1_5'],
- paddingInline: tokens.spacing['2'],
- // SB3: one radius step rounder than before, smoothed.
- borderRadius: tokens.radius.md,
- '--corner-radius': tokens.radius.md,
- backgroundColor: 'transparent !custom',
+ paddingBlock: tokens.spacing['1_5'],
+ paddingInline: tokens.spacing['3'],
+ borderRadius: tokens.radius.md,
+ '--corner-radius': tokens.radius.md,
+ backgroundColor: 'transparent !custom',
- color: tokens.color.foreground,
- fontSize: tokens.fontSize.sm,
- fontWeight: tokens.fontWeight.normal,
- letterSpacing: tokens.letterSpacing.normal,
- lineHeight: tokens.lineHeight.normal,
- },
+ color: tokens.color.muted,
+ fontSize: tokens.fontSize.sm,
+ fontWeight: tokens.fontWeight.normal,
+ letterSpacing: tokens.letterSpacing.normal,
+ lineHeight: tokens.lineHeight.control,
+ },
},
})
@@ -547,7 +507,7 @@ global({
'@layer utilities': {
'[data-v-sidebar] [data-v-sidebar-section-content] [data-v-sidebar-section-header][data-collapsable="true"]:hover':
{
- backgroundColor: inherited.color.colorMixInSrgbForeground4Transparent,
+ backgroundColor: tokens.color.containerSubtle,
color: tokens.color.foreground,
},
},
@@ -558,41 +518,47 @@ global({
'[data-v-sidebar] [data-v-sidebar-section-content]': {
display: 'flex',
flexDirection: 'column',
- gap: 0,
+ gap: tokens.spacing['0_5'],
},
},
})
global({
'@layer utilities': {
+ // Nested items indent 12, with no guide line.
'[data-v-sidebar] [data-v-sidebar-section-content] [data-v-sidebar-section-content]': {
marginTop: tokens.spacing['0_5'],
- marginBottom: tokens.spacing['0_5'],
-
- borderLeftColor: inherited.color.colorMixInSrgbForeground10Transparent,
- gap: 0,
+ marginBottom: tokens.spacing['0'],
+ paddingInlineStart: tokens.spacing['3'],
+ borderLeftWidth: tokens.borderWidth.none,
+ gap: tokens.spacing['0_5'],
},
},
})
global({
'@layer utilities': {
+ // Items: 32 high, radius 8, label in the secondary color on the gutter.
'[data-v-sidebar] [data-v-sidebar-item][data-link]': {
- minHeight: '34px',
- // design-exception: Preserve this component’s existing geometry; it is not a shared scale step.
- margin: '0 -8px !custom',
+ minHeight: '32px',
+ // design-exception: Items bleed 12px into the sidebar padding so labels sit on the gutter.
+ margin: '0 -12px !custom',
paddingBlock: tokens.spacing['1_5'],
- paddingInline: tokens.spacing['2'],
- // SB3: one radius step rounder than before, smoothed.
+ paddingInline: tokens.spacing['3'],
borderRadius: tokens.radius.md,
'--corner-radius': tokens.radius.md,
- color: tokens.color.foreground,
+ color: tokens.color.muted,
+ fontFamily: tokens.fontFamily.ui,
fontSize: tokens.fontSize.sm,
fontWeight: tokens.fontWeight.normal,
letterSpacing: tokens.letterSpacing.normal,
- lineHeight: tokens.lineHeight.normal,
+ lineHeight: tokens.lineHeight.control,
+ },
+ // Collapsible headers read as items, in the same UI font.
+ '[data-v-sidebar] [data-v-sidebar-section-header][data-collapsable="true"]': {
+ fontFamily: tokens.fontFamily.ui,
},
},
})
@@ -619,7 +585,7 @@ global({
},
'[data-v-sidebar] > [data-v-sidebar-section] + [data-v-sidebar-section] > [data-v-sidebar-section-header][data-collapsable="true"]:hover':
{
- backgroundColor: inherited.color.colorMixInSrgbForeground4Transparent,
+ backgroundColor: tokens.color.containerSubtle,
color: tokens.color.foreground,
},
'@media (prefers-reduced-motion: reduce)': {
@@ -633,8 +599,9 @@ global({
global({
'@layer utilities': {
+ // Hover: the container/subtle chip.
'[data-v-sidebar] a[data-v-sidebar-item][data-link]:hover': {
- backgroundColor: inherited.color.colorMixInSrgbForeground4Transparent,
+ backgroundColor: tokens.color.containerSubtle,
color: tokens.color.foreground,
},
},
@@ -642,8 +609,9 @@ global({
global({
'@layer utilities': {
+ // Current: the container/regular chip, primary and medium (one active state everywhere).
'[data-v-sidebar] a[data-v-sidebar-item][data-active]': {
- backgroundColor: inherited.color.colorMixInSrgbForeground5Transparent,
+ backgroundColor: tokens.color.container,
color: tokens.color.foreground,
fontWeight: tokens.fontWeight.medium,
boxShadow: 'none',
@@ -651,46 +619,56 @@ global({
},
})
-// SB1: the current page has no hover state; hovering it keeps its fill.
+// A collapsible group whose own page is current takes the same chip as a current item. The
+// selectors out-rank the nested-header rules above, which reset the header's fill.
global({
'@layer utilities': {
- '[data-v-sidebar] a[data-v-sidebar-item][data-active]:hover': {
- backgroundColor: inherited.color.colorMixInSrgbForeground5Transparent,
- },
+ '[data-v-sidebar] [data-v-sidebar-section-content] [data-v-sidebar-section-header][data-collapsable][data-active]:has(> a[aria-current="page"]), [data-v-sidebar] > [data-v-sidebar-section] > [data-v-sidebar-section-header][data-collapsable][data-active]:has(> a[aria-current="page"])':
+ {
+ borderRadius: tokens.radius.md,
+ '--corner-radius': tokens.radius.md,
+ backgroundColor: tokens.color.container,
+ color: tokens.color.foreground,
+ fontWeight: tokens.fontWeight.medium,
+ },
+ '[data-v-sidebar] [data-v-sidebar-section-content] [data-v-sidebar-section-header][data-collapsable][data-active]:has(> a[aria-current="page"]):hover, [data-v-sidebar] > [data-v-sidebar-section] > [data-v-sidebar-section-header][data-collapsable][data-active]:has(> a[aria-current="page"]):hover':
+ {
+ backgroundColor: tokens.color.container,
+ },
},
})
+// SB1: the current page has no hover state; hovering it keeps its fill.
global({
'@layer utilities': {
- '[data-v-sidebar] [data-v-sidebar-item][data-condensed="true"]': {
- minHeight: '28px',
- fontSize: tokens.fontSize.compact,
+ '[data-v-sidebar] a[data-v-sidebar-item][data-active]:hover': {
+ backgroundColor: tokens.color.container,
},
},
})
global({
'@layer utilities': {
- '[data-v-sidebar] [data-v-sidebar-section-header] svg': {
- color: inherited.color.colorMixInSrgbForeground38Transparent,
+ '[data-v-sidebar] [data-v-sidebar-item][data-condensed="true"]': {
+ minHeight: '32px',
+ fontSize: tokens.fontSize.sm,
},
},
})
global({
'@layer utilities': {
- '[data-v-sidebar-footer-content] [data-v-socials] a[aria-label="GitHub"] svg': {
- width: '19px',
- height: '19px',
+ '[data-v-sidebar] [data-v-sidebar-section-header] svg': {
+ color: tokens.color.muted,
},
},
})
global({
'@layer utilities': {
- '[data-v-sidebar-footer-content] [data-v-socials] a[aria-label="X (Twitter)"] svg': {
- width: '16px',
- height: '16px',
+ // GitHub and X live in the site footer; the sidebar footer keeps only the theme control.
+ '[data-v-sidebar-footer-content] [data-v-socials]': {
+ display: 'none',
},
},
})
@@ -717,41 +695,11 @@ global({
},
})
+// Ask AI lives in each page's header row (DocsPageActions), which also takes its ⌘I shortcut.
global({
'@layer utilities': {
- '@media (width < 1376px)': {
- '[data-v-ask-ai-container]': {
- display: 'none',
- },
- },
- },
-})
-
-global({
- '@layer utilities': {
- '@media (width >= 1376px)': {
- '[data-v-ask-ai-container]': {
- position: 'fixed',
- top: 'auto',
- bottom: '24px',
- left: 'auto',
- right: 'max(24px, calc((100% - var(--tempo-docs-shell-width)) * 0.5 + 24px))',
- width: 'calc(var(--tempo-docs-outline-width) - 48px)',
- translate: 0,
- transform: 'none',
- },
- },
- },
-})
-
-global({
- '@layer vocs_utilities': {
- '@media (width >= 1376px)': {
- '[data-v-ask-ai-container] > button': {
- minWidth: 0,
- width: '100%',
- maxWidth: '100%',
- },
+ '[data-v-ask-ai-container]': {
+ display: 'none',
},
},
})
@@ -1023,7 +971,7 @@ global({
})
global({
- 'html:has(.docs-section-nav), body:has(.docs-section-nav)': {
+ 'html:has(.docs-site-header), body:has(.docs-site-header)': {
backgroundColor: tokens.color.shell,
},
})
@@ -1042,6 +990,18 @@ global({
},
})
+// Docs pages set copy in Inter, like DS Body: Vocs' prose, lists, tables and callouts, and
+// everything that inherits the body font. Titles keep Pilat (--tempo-font-display), code the
+// mono. Scoped to the docs shell, so the marketing pages keep Pilat.
+global({
+ ':root:has(.docs-site-header)': {
+ '--vocs-font-family': tokens.fontFamily.ui,
+ },
+ 'body:has(.docs-site-header)': {
+ fontFamily: tokens.fontFamily.ui,
+ },
+})
+
global({
':where( a[href], button:not(:disabled), summary, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] )':
{
@@ -1232,38 +1192,74 @@ global({
global({
'@layer utilities': {
- 'article[data-v-content] :is(h1, h2, h3)[data-v]': {
+ // Headings: Pilat Book, regular, tight tracking, primary. H2 24, H3 18, H4 16.
+ 'article[data-v-content] :is(h1, h2, h3, h4)[data-v]': {
+ color: tokens.color.foreground,
fontFamily: inherited.fontFamily.tempoFontDisplay,
- fontWeight: tokens.fontWeight.medium,
+ fontWeight: tokens.fontWeight.normal,
- letterSpacing: tokens.letterSpacing.heading,
+ letterSpacing: tokens.letterSpacing.tight,
textWrap: 'balance',
},
+ 'article[data-v-content] h2[data-v]': {
+ fontSize: tokens.fontSize.title,
+ lineHeight: tokens.lineHeight.heading,
+ },
+ 'article[data-v-content] h3[data-v]': {
+ fontSize: tokens.fontSize.lead,
+ lineHeight: tokens.lineHeight.snug,
+ },
+ 'article[data-v-content] h4[data-v]': {
+ fontSize: tokens.fontSize.body,
+ lineHeight: tokens.lineHeight.normal,
+ },
},
})
global({
'@layer utilities': {
- 'article[data-v-content] > h1[data-v]': {
- maxWidth: '24ch',
+ // H1 32 (28 below 768), with the Copy page control floated on its first line.
+ 'article[data-v-content] h1[data-v]': {
+ maxWidth: 'none',
border: 0,
paddingBottom: 0,
- // design-exception: Preserve this responsive geometry across viewport sizes.
- fontSize: 'clamp(32px, 3vw, 42px) !custom',
- letterSpacing: tokens.letterSpacing.display,
+ fontSize: tokens.fontSize.displaySmall,
+ letterSpacing: tokens.letterSpacing.tight,
- lineHeight: tokens.lineHeight.display,
+ lineHeight: tokens.lineHeight.heading,
+ },
+ '@media (width < 768px)': {
+ 'article[data-v-content] h1[data-v]': {
+ fontSize: tokens.fontSize.heading,
+ },
+ },
+ // H1 to lead 12; H2 16 below; H3 12 below; H4 8 below.
+ 'article[data-v-content] > h1[data-v]:has(+ p[data-v])': {
+ marginBottom: tokens.spacing['3'],
+ },
+ 'article[data-v-content] > h2[data-v]': {
+ marginBottom: tokens.spacing['4'],
+ },
+ 'article[data-v-content] > h3[data-v]': {
+ marginBottom: tokens.spacing['3'],
+ },
+ 'article[data-v-content] > h4[data-v]': {
+ marginBottom: tokens.spacing['2'],
+ },
+ // Lists: 8 between items.
+ 'article[data-v-content] :is(ul, ol)[data-v] > li + li': {
+ marginTop: tokens.spacing['2'],
},
},
})
global({
'@layer utilities': {
+ // Lead at body size in the secondary color, 32 above the first content.
'article[data-v-content] > h1[data-v] + p[data-v]': {
- color: inherited.color.colorMixInSrgbForeground68Transparent,
-
+ marginBottom: tokens.spacing['8'],
+ color: tokens.color.muted,
fontSize: tokens.fontSize.body,
- lineHeight: tokens.lineHeight.prose,
},
},
})
@@ -1288,16 +1284,44 @@ global({
},
})
+// The rail holds the outline only: "On this page" 14/20 secondary, items 14/20
+// secondary, the current one primary with a 2px indicator in content/primary on a
+// hairline track. Feedback moves to the page end; Copy page sits on the H1's row.
global({
'@layer utilities': {
+ '[data-v-outline]:not([data-v-outline-mobile]) > :not([data-v-outline-nav])': {
+ display: 'none',
+ },
+ '[data-v-outline-nav]': {
+ gap: tokens.spacing['3'],
+ fontSize: tokens.fontSize.sm,
+ lineHeight: tokens.lineHeight.control,
+ },
+ '[data-v-outline-nav] > div:first-child': {
+ color: tokens.color.muted,
+ fontSize: tokens.fontSize.sm,
+ fontWeight: tokens.fontWeight.normal,
+ lineHeight: tokens.lineHeight.control,
+ },
+ '[data-v-outline-nav] > div:first-child > svg': {
+ display: 'none',
+ },
+ '[data-v-outline-items]': {
+ borderInlineStartColor: tokens.color.hairline,
+ fontSize: tokens.fontSize.sm,
+ },
+ '[data-v-outline-item] a': {
+ paddingBlock: tokens.spacing['1'],
+ color: tokens.color.muted,
+ fontWeight: tokens.fontWeight.normal,
+ lineHeight: tokens.lineHeight.control,
+ },
+ '[data-v-outline-item] a:hover': {
+ color: tokens.color.foreground,
+ },
'[data-v-outline-indicator]': {
backgroundColor: tokens.color.foreground,
},
- },
-})
-
-global({
- '@layer utilities': {
'[data-v-outline-item] a[data-active="true"]': {
color: tokens.color.foreground,
},
@@ -1307,7 +1331,7 @@ global({
global({
'@layer utilities': {
// The docs-local SegmentedControl and Tabs keep their own TDS rings (inset for segments).
- 'body:has(.docs-section-nav) :is(a, button, input, summary):not([data-tds-control]):focus-visible':
+ 'body:has(.docs-site-header) :is(a, button, input, summary):not([data-tds-control]):focus-visible':
{
outlineWidth: tokens.borderWidth.emphasis,
outlineStyle: 'solid',
@@ -1333,7 +1357,7 @@ global({
global({
'@layer utilities': {
- '[data-layout]:has(.tempo-docs-home) [data-v-gutter-left], [data-layout]:has(.tempo-docs-home) [data-v-gutter-right], [data-layout]:has(.tempo-docs-home) [data-v-outline-mobile], [data-layout]:has(.tempo-docs-home) [data-v-outline], [data-layout]:has(.tempo-docs-home) [data-v-content-footer], [data-layout]:has(.tempo-docs-home) [data-v-footer]':
+ '[data-layout]:has(.tempo-docs-home) [data-v-gutter-left], [data-layout]:has(.tempo-docs-home) [data-v-gutter-right], [data-layout]:has(.tempo-docs-home) [data-v-outline-mobile], [data-layout]:has(.tempo-docs-home) [data-v-outline], [data-layout]:has(.tempo-docs-home) [data-v-content-footer]':
{
display: 'none',
},
@@ -1342,11 +1366,22 @@ global({
global({
'@layer utilities': {
+ // Home sits on the gutter (16, 24 from 768) with 32 above the hero (48 from 1080).
'article[data-v-content]:has(.tempo-docs-home)': {
- maxWidth: 'calc(var(--tempo-hub-width) + 96px)',
+ maxWidth: 'calc(var(--tempo-hub-width) + 48px)',
marginInline: 'auto !custom',
- // design-exception: Preserve this responsive geometry across viewport sizes.
- padding: 'clamp(24px, 4vw, 48px) !custom',
+ paddingBlock: tokens.spacing['8'],
+ paddingInline: tokens.spacing['4'],
+ },
+ '@media (width >= 768px)': {
+ 'article[data-v-content]:has(.tempo-docs-home)': {
+ paddingInline: tokens.spacing['6'],
+ },
+ },
+ '@media (width >= 1080px)': {
+ 'article[data-v-content]:has(.tempo-docs-home)': {
+ paddingBlock: tokens.spacing['12'],
+ },
},
},
})
@@ -1435,10 +1470,50 @@ global({
borderWidth: tokens.borderWidth.none,
backgroundColor: tokens.color.block,
},
- // Vocs pulls the active tab's underline over the header border it no longer has;
- // keep it inside the tab list, which clips vertically.
+ // Code header tabs sit 4 inside the 12px block, so they take radius 8 (12 - 4): 32
+ // high, 14/20, secondary; the current tab is the container/regular chip.
+ '[data-v-code-group-list]': {
+ gap: tokens.spacing['1'],
+ paddingInline: tokens.spacing['1'],
+ },
'[data-v-code-group-tab]': {
+ height: '32px',
marginBottom: tokens.spacing['0'],
+ paddingInline: tokens.spacing['3'],
+ borderBottomWidth: tokens.borderWidth.none,
+ borderRadius: tokens.radius.md,
+ '--corner-radius': tokens.radius.md,
+ color: tokens.color.muted,
+ fontSize: tokens.fontSize.sm,
+ fontWeight: tokens.fontWeight.normal,
+ letterSpacing: tokens.letterSpacing.normal,
+ lineHeight: tokens.lineHeight.control,
+ },
+ '[data-v-code-group-tab]:hover': {
+ backgroundColor: tokens.color.containerSubtle,
+ color: tokens.color.foreground,
+ },
+ '[data-v-code-group-tab][data-active]': {
+ backgroundColor: tokens.color.container,
+ color: tokens.color.foreground,
+ fontWeight: tokens.fontWeight.medium,
+ },
+ '[data-v-code-title]': {
+ fontSize: tokens.fontSize.sm,
+ fontWeight: tokens.fontWeight.normal,
+ letterSpacing: tokens.letterSpacing.normal,
+ lineHeight: tokens.lineHeight.control,
+ },
+ // Table headers 12/16; kbd 4.
+ 'div[data-v-table-wrapper] th': {
+ fontSize: tokens.fontSize.xs,
+ lineHeight: tokens.lineHeight.caption,
+ },
+ 'article[data-v-content] kbd': {
+ borderRadius: tokens.radius.sm,
+ '--corner-radius': tokens.radius.sm,
+ fontSize: tokens.fontSize.xs,
+ lineHeight: tokens.lineHeight.caption,
},
// The API reference overview pane sits on its own fill.
'[data-v-openapi-overview]': {
@@ -1460,9 +1535,21 @@ global({
'@layer base': {
':is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide]) > :not(:is(hgroup[data-v], h1[data-v])) + h2:not(:only-child)':
{
- // design-exception: Vocs sets this margin !important; the section token replaces it.
- marginTop: 'var(--tempo-section-space) !custom !important',
+ // design-exception: Vocs sets this margin !important; system-v2 puts 48 above an H2.
+ marginTop: '48px !custom !important',
},
+ 'article[data-v-content] > :not(:is(h1, h2))[data-v] + h3[data-v]': {
+ // design-exception: Vocs pulls prose siblings up 8px with !important; system-v2 puts 32 above an H3.
+ marginTop: '32px !custom !important',
+ },
+ 'article[data-v-content] > :not(:is(h1, h2, h3))[data-v] + h4[data-v]': {
+ // design-exception: Vocs pulls prose siblings up 8px with !important; system-v2 puts 24 above an H4.
+ marginTop: '24px !custom !important',
+ },
+ 'article[data-v-content] > :is(h3, h4)[data-v] + :is(p, ul, ol)[data-v]': {
+ // design-exception: Vocs pulls prose siblings up 8px with !important; the heading's own margin sets the gap.
+ marginTop: '0px !custom !important',
+ },
},
'@layer vocs_utilities': {
':is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide]) > :not(:is(hgroup[data-v], h1[data-v])) + h2:not(:only-child)':
@@ -1483,27 +1570,124 @@ global({
paddingTop: tokens.spacing['0'],
borderTopWidth: tokens.borderWidth.none,
},
- // The page footer (feedback, edit link, pager) starts a section's space below the body.
+ // Page end: 64 above one row with "Was this helpful?" on the left and "Edit this
+ // page" on the right; 16 to the divider; 24 to the Previous / Next pager. Vocs
+ // renders feedback here only below 1376px (the rail has it above) and adds a
+ // Last updated line and a second Copy for AI, which the page header replaces.
'article[data-v-content] > [data-v-content-footer]': {
- marginTop: tokens.spacing.section,
+ display: 'grid',
+ gridTemplateColumns: 'minmax(0, 1fr) auto',
+ alignItems: 'center',
+ columnGap: tokens.spacing['4'],
+ rowGap: tokens.spacing['4'],
+ marginTop: tokens.spacing['16'],
+ },
+ '[data-v-content-footer] > *': {
+ gridColumn: '1 / -1',
+ marginBlock: tokens.spacing['0'],
+ },
+ '[data-v-content-footer] > :first-child': {
+ display: 'block',
+ gridColumn: 1,
+ gridRow: 1,
+ },
+ '[data-v-content-footer] > :nth-child(2)': {
+ gridColumn: 2,
+ gridRow: 1,
+ flexDirection: 'row',
+ },
+ '[data-v-content-footer] > :first-child:empty, [data-v-content-footer] > :nth-child(2):empty': {
+ display: 'none',
+ },
+ '[data-layout]:has(.docs-page-actions) [data-v-content-footer] > :nth-child(3), [data-v-last-updated]':
+ {
+ display: 'none',
+ },
+ '[data-v-content-footer] > :last-child': {
+ paddingTop: tokens.spacing['6'],
+ borderTopColor: tokens.color.hairline,
+ },
+ '[data-v-content-footer] div[data-v-feedback]': {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: tokens.spacing['2'],
+ color: tokens.color.muted,
+ fontSize: tokens.fontSize.sm,
+ lineHeight: tokens.lineHeight.control,
+ },
+ '[data-v-content-footer] div[data-v-feedback] > p': {
+ color: tokens.color.muted,
+ fontWeight: tokens.fontWeight.normal,
+ },
+ '[data-v-content-footer] div[data-v-feedback] > div': {
+ gap: tokens.spacing['2'],
+ },
+ '[data-v-content-footer] div[data-v-feedback] button': {
+ borderRadius: tokens.radius.md,
+ '--corner-radius': tokens.radius.md,
+ color: tokens.color.muted,
+ },
+ '[data-v-content-footer] form[data-v-feedback]': {
+ fontSize: tokens.fontSize.sm,
+ lineHeight: tokens.lineHeight.control,
+ },
+ // Edit this page: a tertiary button with a pencil.
+ '[data-v-edit-link]': {
+ gap: tokens.spacing['2'],
+ height: '32px',
+ paddingInline: tokens.spacing['2'],
+ borderRadius: tokens.radius.md,
+ '--corner-radius': tokens.radius.md,
+ color: tokens.color.muted,
+ fontSize: tokens.fontSize.sm,
+ lineHeight: tokens.lineHeight.control,
+ textDecoration: 'none',
+ },
+ '@media (hover: hover)': {
+ ':is([data-v-content-footer] div[data-v-feedback] button, [data-v-edit-link]):hover': {
+ backgroundColor: tokens.color.containerSubtle,
+ color: tokens.color.foreground,
+ },
+ '[data-v-pagination] > a:hover': {
+ backgroundColor: tokens.color.containerSubtle,
+ transitionDuration: 'var(--tempo-enter)',
+ },
+ },
+ // Previous and Next are surface cards: radius 12, padding 16 20, title 16, label 12.
+ '[data-v-pagination]': {
+ gap: tokens.spacing['4'],
},
- // Pager links dim on hover instead of turning accent.
'[data-v-pagination] > a': {
- transitionProperty: 'opacity',
+ flexGrow: 1,
+ flexBasis: 0,
+ gap: tokens.spacing['1'],
+ paddingBlock: tokens.spacing['4'],
+ paddingInline: tokens.spacing['5'],
+ borderWidth: tokens.borderWidth.hairline,
+ borderStyle: 'solid',
+ borderColor: tokens.color.hairline,
+ borderRadius: tokens.radius.lg,
+ '--corner-radius': tokens.radius.lg,
+ backgroundColor: tokens.color.background,
+ transitionProperty: 'color, background-color, border-color, opacity, transform',
transitionDuration: 'var(--tempo-exit)',
transitionTimingFunction: 'var(--tempo-ease)',
},
'[data-v-pagination] > a > span': {
transitionProperty: 'none',
},
- '[data-v-pagination] > a:hover > span:first-child': {
- color: inherited.color.vocsTextColorHeading,
- },
- '@media (hover: hover)': {
- '[data-v-pagination] > a:hover': {
- opacity: 0.56,
- transitionDuration: 'var(--tempo-enter)',
+ // Vocs puts the page title first and the Previous / Next label second.
+ '[data-v-pagination] > a > span:first-child, [data-v-pagination] > a:hover > span:first-child':
+ {
+ color: tokens.color.foreground,
+ fontSize: tokens.fontSize.body,
+ fontWeight: tokens.fontWeight.medium,
+ lineHeight: tokens.lineHeight.body,
},
+ '[data-v-pagination] > a > span:last-child': {
+ color: tokens.color.muted,
+ fontSize: tokens.fontSize.xs,
+ lineHeight: tokens.lineHeight.caption,
},
},
})
@@ -1523,18 +1707,19 @@ global({
},
})
-// G11: callouts follow TDS Platform. Notes and info use Callout (subtle fill, no
-// icon); tip, warning, danger and success use Alert (tone fill, an 8px tone
-// square in place of the icon). Neither has a border, and text stays primary.
+// G11: callouts follow the TDS Platform Alert in four quiet tones: neutral (note,
+// info), tip, warning and negative (danger), plus positive for success. Each has a
+// subtle tinted fill, no border and a leading icon in its tone; text stays primary.
global({
'@layer utilities': {
'aside[data-v][data-v-callout]': {
+ '--tempo-alert-tone': 'var(--foreground-secondary)',
+ position: 'relative',
marginInline: tokens.spacing['0'],
- paddingBlock: tokens.spacing['6'],
- paddingInline: tokens.spacing['8'],
+ padding: tokens.spacing['4'],
borderWidth: tokens.borderWidth.none,
- '--corner-radius': tokens.radius.xl,
- borderRadius: tokens.radius.xl,
+ '--corner-radius': tokens.radius.lg,
+ borderRadius: tokens.radius.lg,
backgroundColor: tokens.color.containerSubtle,
color: inherited.color.vocsTextColorPrimary,
fontSize: tokens.fontSize.sm,
@@ -1544,23 +1729,10 @@ global({
{
color: inherited.color.vocsTextColorPrimary,
},
- // TDS B2 lines (14/20) inside callouts, so the indicator centers on the first line.
+ // TDS B2 lines (14/20) inside callouts, so the icon centers on the first line.
'aside[data-v][data-v-callout] :is(p, li)[data-v]': {
lineHeight: tokens.lineHeight.control,
},
- 'aside[data-v][data-v-callout] > [data-v-callout-icon]': {
- display: 'none',
- },
- 'aside[data-v][data-v-callout][data-v-content] > :not(:is([data-v-callout-icon], [data-v-code-container]))':
- {
- paddingInlineStart: tokens.spacing['0'],
- },
- 'aside[data-v][data-v-callout]:is([data-v-context="tip"], [data-v-context="warning"], [data-v-context="danger"], [data-v-context="success"])':
- {
- padding: tokens.spacing['4'],
- '--corner-radius': tokens.radius.lg,
- borderRadius: tokens.radius.lg,
- },
'aside[data-v][data-v-callout][data-v-context="tip"]': {
'--tempo-alert-tone': 'var(--info)',
backgroundColor: tokens.color.infoContainer,
@@ -1577,36 +1749,27 @@ global({
'--tempo-alert-tone': 'var(--positive)',
backgroundColor: tokens.color.positiveContainer,
},
- 'aside[data-v][data-v-callout]:is([data-v-context="tip"], [data-v-context="warning"], [data-v-context="danger"], [data-v-context="success"]) > [data-v-callout-icon]':
- {
- display: 'block',
- width: tokens.spacing['2'],
- height: tokens.spacing['2'],
- // design-exception: Centres the 8px square on the 20px first line (20 − 8) / 2.
- marginTop: '6px !custom',
- marginInlineStart: tokens.spacing['1'],
- // The TDS indicator's 2px corner, smoothed.
- borderRadius: tokens.radius.xs,
- '--corner-radius': tokens.radius.xs,
- // design-exception: The tone is set per context above from the status tokens.
- backgroundColor: 'var(--tempo-alert-tone) !custom',
- },
+ 'aside[data-v][data-v-callout] > [data-v-callout-icon]': {
+ position: 'absolute',
+ // Centres the 16px icon on the 20px first line inside the 16px inset.
+ insetBlockStart: '18px',
+ insetInlineStart: '16px',
+ width: '16px',
+ height: '16px',
+ marginTop: tokens.spacing['0'],
+ // design-exception: The tone is set per context above from the status tokens.
+ color: 'var(--tempo-alert-tone) !custom',
+ },
'aside[data-v][data-v-callout] > [data-v-callout-icon] > svg': {
- display: 'none',
+ display: 'block',
+ width: '16px',
+ height: '16px',
},
- 'aside[data-v][data-v-callout]:is([data-v-context="tip"], [data-v-context="warning"], [data-v-context="danger"], [data-v-context="success"])[data-v-content] > :not(:is([data-v-callout-icon], [data-v-code-container]))':
+ 'aside[data-v][data-v-callout][data-v-content] > :not(:is([data-v-callout-icon], [data-v-code-container]))':
{
paddingInlineStart: tokens.spacing['7'],
},
},
- '@media (width < 768px)': {
- '@layer utilities': {
- 'aside[data-v][data-v-callout]': {
- paddingBlock: tokens.spacing['5'],
- paddingInline: tokens.spacing['5'],
- },
- },
- },
})
// G8: Vocs-owned buttons follow the same rule: gray secondary fill, no outline,
@@ -1638,14 +1801,67 @@ global({
})
// Body text takes TDS Platform B1's size and tracking (16px, 0.12px) in docs
-// articles. B1's 22px line height is set for UI text; long-form prose keeps the
-// Vocs 26px leading. Card descriptions keep their own 14px size, and callouts
-// keep B2 (utilities layer above). Home keeps its own scale.
+// articles. B1's 22px line height is set for UI text; long-form prose keeps a
+// 26px leading. Card descriptions keep their own 14px size, and callouts keep
+// B2 (utilities layer above). Home keeps its own scale.
global({
'@layer vocs_utilities': {
'article[data-v-content] :is(p, li)[data-v]:not(a *)': {
fontSize: tokens.fontSize.body,
+ lineHeight: tokens.lineHeight.relaxed,
letterSpacing: tokens.letterSpacing.b1,
},
},
})
+
+// Prose keeps a readable measure of about 72 characters; code blocks, tables,
+// callouts and cards still use the full content column.
+global({
+ '@layer utilities': {
+ ':is(article[data-v-content]:not(:has(.tempo-docs-home)), [data-v-openapi-intro], [data-v-openapi-guide]) > :is(p, ul, ol, dl, blockquote, hgroup)[data-v]':
+ {
+ maxWidth: '720px',
+ },
+ },
+})
+
+// The site footer is a band under the article. It starts at the sidebar's edge,
+// runs under the right rail to the page edge, and keeps its columns in line with
+// the article. Above 1376px it rises over the fixed outline rail as it scrolls in.
+global({
+ // Vocs caps API landing and guide footers at the content width with !important.
+ '@layer base': {
+ '[data-v-main] > [data-v-footer]': {
+ maxWidth: 'none !important',
+ },
+ },
+ '@layer utilities': {
+ '[data-v-main]:has(> [data-v-footer])': {
+ paddingBottom: tokens.spacing['0'],
+ },
+ '[data-v-main] > [data-v-footer]': {
+ width: 'auto',
+ maxWidth: 'none',
+ // The article's bottom padding sets the gap; the footer brings its own hairline.
+ marginTop: tokens.spacing['0'],
+ paddingInline: tokens.spacing['0'],
+ paddingBottom: tokens.spacing['0'],
+ },
+ '@media (width >= 1376px)': {
+ '[data-v-main] > [data-v-footer]': {
+ position: 'relative',
+ zIndex: tokens.zIndex.overlay,
+ },
+ '[data-layout][data-v-sidebar]:not(:has(.tempo-docs-home)):not([data-v-content-width="full"]:has([data-v-openapi]:not([data-v-openapi-landing]))) > [data-v-main] > [data-v-footer]':
+ {
+ // design-exception: Extend the band under the outline rail that the main column pads for.
+ marginInlineEnd: 'calc(var(--tempo-docs-outline-width) * -1) !custom',
+ },
+ '[data-layout][data-v-sidebar]:not(:has(.tempo-docs-home)):not([data-v-content-width="full"]:has([data-v-openapi]:not([data-v-openapi-landing]))) > [data-v-main] > [data-v-footer] > .docs-site-footer':
+ {
+ // design-exception: Keep the footer columns clear of the outline rail.
+ paddingInlineEnd: 'var(--tempo-docs-outline-width) !custom',
+ },
+ },
+ },
+})
diff --git a/src/styles/surfaces.styles.ts b/src/styles/surfaces.styles.ts
index 18a208551..2efcebd20 100644
--- a/src/styles/surfaces.styles.ts
+++ b/src/styles/surfaces.styles.ts
@@ -137,186 +137,6 @@ export const featureDiagramMark = style({
filter: 'var(--feature-diagram-mark-filter, url("#feature-diagram-glow"))',
})
-export const heading64 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.hero,
- fontWeight: tokens.fontWeight.semibold,
- lineHeight: tokens.lineHeight.display,
- letterSpacing: tokens.letterSpacing.normal,
- },
-})
-
-export const heading48 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.displayLarge,
- fontWeight: tokens.fontWeight.semibold,
-
- lineHeight: tokens.lineHeight.display,
- letterSpacing: tokens.letterSpacing.normal,
- },
-})
-
-export const heading40 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.display,
- fontWeight: tokens.fontWeight.semibold,
- lineHeight: tokens.lineHeight.heading,
- letterSpacing: tokens.letterSpacing.normal,
- },
-})
-
-export const heading32 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.displaySmall,
- fontWeight: tokens.fontWeight.medium,
-
- lineHeight: tokens.lineHeight.heading,
- letterSpacing: tokens.letterSpacing.normal,
- },
-})
-
-export const heading24 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.title,
- fontWeight: tokens.fontWeight.medium,
-
- lineHeight: tokens.lineHeight.snug,
- letterSpacing: tokens.letterSpacing.normal,
- },
-})
-
-export const heading20 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.subheading,
- fontWeight: tokens.fontWeight.medium,
- lineHeight: tokens.lineHeight.snug,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const heading16 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.body,
- fontWeight: tokens.fontWeight.medium,
- lineHeight: tokens.lineHeight.normal,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const copy16 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.body,
- fontWeight: tokens.fontWeight.normal,
- lineHeight: tokens.lineHeight.relaxed,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const copy15 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.bodySmall,
- fontWeight: tokens.fontWeight.normal,
- lineHeight: tokens.lineHeight.relaxed,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const copy14 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.sm,
- fontWeight: tokens.fontWeight.normal,
- lineHeight: tokens.lineHeight.relaxed,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const copy13 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.compact,
- fontWeight: tokens.fontWeight.normal,
-
- lineHeight: tokens.lineHeight.normal,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const label16 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.body,
- fontWeight: tokens.fontWeight.normal,
- lineHeight: tokens.lineHeight.normal,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const label15 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.bodySmall,
- fontWeight: tokens.fontWeight.normal,
-
- lineHeight: tokens.lineHeight.snug,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const label14 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.sm,
- fontWeight: tokens.fontWeight.normal,
-
- lineHeight: tokens.lineHeight.snug,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const label13 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.compact,
- fontWeight: tokens.fontWeight.normal,
- lineHeight: tokens.lineHeight.snug,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const label12 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.xs,
- fontWeight: tokens.fontWeight.normal,
-
- lineHeight: tokens.lineHeight.snug,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const button16 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.body,
- fontWeight: tokens.fontWeight.medium,
- lineHeight: tokens.lineHeight.normal,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const button14 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.sm,
- fontWeight: tokens.fontWeight.medium,
-
- lineHeight: tokens.lineHeight.snug,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
-export const button12 = style({
- '@layer utilities': {
- fontSize: tokens.fontSize.xs,
- fontWeight: tokens.fontWeight.medium,
-
- lineHeight: tokens.lineHeight.snug,
- letterSpacing: tokens.letterSpacing.wide,
- },
-})
-
export const indicatorFlow = style({
'@layer utilities': {
backgroundImage:
@@ -430,9 +250,8 @@ export const docsZoneDiagram = style({
'& figcaption': {
marginTop: tokens.spacing['3'],
color: tokens.color.muted,
-
- fontSize: tokens.fontSize.compact,
- lineHeight: tokens.lineHeight.normal,
+ fontSize: tokens.fontSize.sm,
+ lineHeight: tokens.lineHeight.control,
textAlign: 'center',
},
},
diff --git a/vocs.config.ts b/vocs.config.ts
index 67f12a5d1..d91974b63 100644
--- a/vocs.config.ts
+++ b/vocs.config.ts
@@ -9,6 +9,7 @@ import {
docsRouteDestination,
proxiedLegacyDocsRoutes,
} from './src/lib/docs-routing'
+import { docsSearch } from './src/lib/docs-search'
import { docsSections, docsUtilitySections } from './src/lib/docs-sections'
import { docsStructuredDataHead } from './src/lib/docs-structured-data'
import { createFeedbackAdapter } from './src/lib/feedback-adapter'
@@ -24,8 +25,6 @@ import { loadTempoOpenApi } from './src/lib/tempo-openapi'
const baseUrl = resolveBaseUrl()
const openApiSpecUrl = process.env.OPENAPI_SPEC_URL ?? 'https://api.tempo.xyz/openapi.json'
-const searchIndexFields = ['title', 'titles', 'subtitle', 'path', 'excerpt']
-const searchBoost = { title: 5, subtitle: 3, titles: 2, path: 3, excerpt: 3 }
// Page renders, Markdown exports, and builds share one GitHub request per cache window.
const tempoChangelog = cacheChangelog(
Changelog.github({ prereleases: true, repo: 'tempoxyz/tempo' }),
@@ -70,36 +69,6 @@ const changelog = Changelog.from({
},
})
-function extractSearchField(document: Record
, fieldName: string) {
- if (fieldName === 'path') {
- return String(document.href ?? '')
- .split('#')[0]
- .replace(/^\/docs\//, '/')
- .replaceAll('/', ' ')
- }
- if (fieldName === 'excerpt') {
- return String(document.text ?? '')
- .trim()
- .split(/\s+/)
- .slice(0, 24)
- .join(' ')
- }
- return document[fieldName]
-}
-
-function boostSearchDocument(
- _documentId: unknown,
- _term: string,
- storedFields?: Record,
-) {
- const priority = (storedFields?.searchPriority as number | undefined) ?? 1
- const href = storedFields?.href as string | undefined
- const segments = href ? href.split('/').filter(Boolean).length : 1
- const depth = href?.startsWith('/docs/') ? Math.max(segments - 1, 1) : segments
- const docsBoost = href?.startsWith('/docs/') ? 1.5 : 1
- return priority * (1 / Math.max(depth, 1)) * docsBoost
-}
-
// Proposed API reference grouping (IA comp). Product sections are named
// " API", chain reads sit in Data API, and the Console section follows
// the console.tempo.xyz sidebar.
@@ -207,7 +176,7 @@ export default defineConfig({
checkDeadlinks: true,
editLink: {
link: 'https://github.com/tempoxyz/docs/edit/main/src/pages/:path',
- text: 'Suggest changes to this page',
+ text: 'Edit this page',
},
title: 'Tempo Docs',
titleTemplate: (path, { frontmatter, title }) => {
@@ -249,20 +218,7 @@ export default defineConfig({
})
: undefined,
},
- search: {
- index: {
- fields: searchIndexFields,
- storeFields: ['path', 'excerpt'],
- extractField: extractSearchField,
- },
- query: {
- combineWith: 'OR',
- fuzzy: 0.1,
- prefix: true,
- boost: searchBoost,
- boostDocument: boostSearchDocument,
- },
- },
+ search: docsSearch,
sitemap: {
include: (path) =>
(path === '/' || /^\/(?:get-started|docs)(?:\/|$)/.test(path)) &&
@@ -306,7 +262,7 @@ export default defineConfig({
build: 'BUILD',
cli: 'CLI',
'developer-tools': 'DEVELOPER TOOLS',
- development: 'TEMPO EVM',
+ development: 'NETWORK',
earn: 'EARN',
ecosystem: 'ECOSYSTEM',
'get-started': 'GET STARTED',
@@ -351,10 +307,22 @@ export default defineConfig({
zones: 'ZONES',
}
+ // Network owns the node and upgrade pages that live under the guide and protocol paths.
+ const sectionPrefixMap: Record = {
+ '/guide/node': 'NETWORK',
+ '/protocol/upgrades': 'NETWORK',
+ }
+
const segments = docsPath.split('/').filter(Boolean)
const firstSeg = segments[0] || ''
const secondSeg = segments[1] || ''
- const section = sectionMap[firstSeg] || firstSeg.toUpperCase().replace(/-/g, ' ')
+ const sectionPrefix = Object.keys(sectionPrefixMap).find(
+ (prefix) => docsPath === prefix || docsPath.startsWith(`${prefix}/`),
+ )
+ const section =
+ (sectionPrefix && sectionPrefixMap[sectionPrefix]) ||
+ sectionMap[firstSeg] ||
+ firstSeg.toUpperCase().replace(/-/g, ' ')
const subsection =
segments.length >= 3 && subsectionMap[secondSeg]
? subsectionMap[secondSeg]
@@ -385,7 +353,7 @@ export default defineConfig({
groupItems: {
'JSON-RPC': [{ text: 'Guide', link: '/docs/api/json-rpc' }],
Indexer: [{ text: 'Guide', link: '/docs/api/indexer-api' }],
- 'API keys': [{ text: 'Guide', link: '/docs/api/console/api-keys' }],
+ 'API keys': [{ text: 'Create and manage API keys', link: '/docs/api/console/api-keys' }],
Projects: [{ text: 'Guide', link: '/docs/api/console/projects-and-environments' }],
Team: [{ text: 'Guide', link: '/docs/api/console/team' }],
'Billing and usage': [{ text: 'Guide', link: '/docs/api/console/usage-and-billing' }],
@@ -452,32 +420,17 @@ export default defineConfig({
{
text: 'Get Started',
items: [
- { text: 'Start building', link: '/get-started' },
+ { text: 'Build on Tempo', link: '/get-started' },
{ text: 'Quickstart', link: '/get-started/quickstart' },
{ text: 'Testnet faucet', link: '/docs/quickstart/faucet' },
+ { text: 'Network details', link: '/docs/quickstart/connection-details' },
{ text: 'Build with AI', link: '/docs/guide/using-tempo-with-ai' },
{ text: 'Stablecoins on Tempo', link: '/get-started/stablecoins' },
{ text: 'Use cases', link: '/get-started/use-cases' },
],
},
- {
- text: 'Tempo CLI',
- items: [
- { text: 'Overview', link: '/docs/cli' },
- { text: 'API', link: '/docs/cli/api' },
- {
- text: 'Wallet',
- collapsed: true,
- items: [
- { text: 'Overview', link: '/docs/cli/wallet' },
- { text: 'Recipes', link: '/docs/wallet/recipes' },
- ],
- },
- { text: 'Request', link: '/docs/cli/request' },
- { text: 'Download', link: '/docs/cli/download' },
- { text: 'Node', link: '/docs/cli/node' },
- ],
- },
+ ]
+ const toolsSidebar = [
{
text: 'Tempo SDK',
items: [
@@ -508,127 +461,142 @@ export default defineConfig({
],
},
{
- text: 'Resources',
+ text: 'Tempo CLI',
items: [
+ { text: 'Overview', link: '/docs/cli' },
+ { text: 'API', link: '/docs/cli/api' },
{
- text: 'Guides',
+ text: 'Wallet',
+ collapsed: true,
+ items: [
+ { text: 'Overview', link: '/docs/cli/wallet' },
+ { text: 'Recipes', link: '/docs/wallet/recipes' },
+ ],
+ },
+ { text: 'Request', link: '/docs/cli/request' },
+ { text: 'Download', link: '/docs/cli/download' },
+ { text: 'Node', link: '/docs/cli/node' },
+ ],
+ },
+ { text: 'Explorer', link: 'https://explore.tempo.xyz' },
+ ]
+ const resourcesSidebar = [
+ {
+ text: 'Guides',
+ items: [
+ { text: 'All guides', link: '/docs/resources/guides' },
+ {
+ text: 'Payment infrastructure',
collapsed: true,
items: [
- { text: 'All guides', link: '/docs/resources/guides' },
{
- text: 'Payment infrastructure',
- collapsed: true,
- items: [
- {
- text: 'Blockchain payment flows',
- link: '/docs/resources/guides/blockchain-payments',
- },
- {
- text: 'Stablecoins for business',
- link: '/docs/resources/guides/stablecoins-for-business',
- },
- {
- text: 'Plan a payment stack',
- link: '/docs/resources/guides/stablecoin-payment-infrastructure-enterprise-scale',
- },
- {
- text: 'Stablecoin settlement',
- link: '/docs/resources/guides/stablecoin-settlement',
- },
- { text: 'Compare payment rails', link: '/docs/resources/guides/payment-rails' },
- { text: 'Estimate payment fees', link: '/docs/resources/guides/stablecoin-fees' },
- ],
+ text: 'Blockchain payment flows',
+ link: '/docs/resources/guides/blockchain-payments',
},
{
- text: 'Payment workflows',
- collapsed: true,
- items: [
- {
- text: 'Accept stablecoin payments',
- link: '/docs/resources/guides/how-to-accept-stablecoin-payments',
- },
- { text: 'Create payment links', link: '/docs/resources/guides/payment-links' },
- { text: 'Handle refunds', link: '/docs/resources/guides/refunds' },
- {
- text: 'Reconcile payments',
- link: '/docs/resources/guides/payment-reconciliation',
- },
- { text: 'Plan batch payments', link: '/docs/resources/guides/batch-payments' },
- { text: 'Global payouts', link: '/docs/resources/guides/global-payouts' },
- {
- text: 'Global payroll',
- link: '/docs/resources/guides/stablecoin-payroll-for-global-teams',
- },
- {
- text: 'Cross-border payments',
- link: '/docs/resources/guides/cross-border-payments',
- },
- {
- text: 'Latin America payment routes',
- link: '/docs/resources/guides/cross-border-payments-latin-america',
- },
- { text: 'Remittance operations', link: '/docs/resources/guides/remittances' },
- {
- text: 'Recurring payments',
- link: '/docs/resources/guides/subscriptions-on-tempo',
- },
- ],
+ text: 'Stablecoins for business',
+ link: '/docs/resources/guides/stablecoins-for-business',
},
{
- text: 'Liquidity and issuance',
- collapsed: true,
- items: [
- { text: 'Corporate treasury', link: '/docs/resources/guides/corporate-treasury' },
- {
- text: 'Nostro and vostro accounts',
- link: '/docs/resources/guides/nostro-vostro-accounts',
- },
- { text: 'Plan prefunding', link: '/docs/resources/guides/prefunding' },
- { text: 'FBO accounts', link: '/docs/resources/guides/fbo-accounts' },
- { text: 'The GENIUS Act', link: '/docs/resources/guides/genius-act' },
- ],
+ text: 'Plan a payment stack',
+ link: '/docs/resources/guides/stablecoin-payment-infrastructure-enterprise-scale',
},
{
- text: 'Machine payment models',
- collapsed: true,
- items: [
- {
- text: 'HTTP 402 payment flows',
- link: '/docs/resources/guides/402-payment-required',
- },
- {
- text: 'Microtransactions and sessions',
- link: '/docs/resources/guides/microtransactions',
- },
- ],
+ text: 'Stablecoin settlement',
+ link: '/docs/resources/guides/stablecoin-settlement',
},
+ { text: 'Compare payment rails', link: '/docs/resources/guides/payment-rails' },
+ { text: 'Estimate payment fees', link: '/docs/resources/guides/stablecoin-fees' },
+ ],
+ },
+ {
+ text: 'Payment workflows',
+ collapsed: true,
+ items: [
{
- text: 'Wallets and funding',
- collapsed: true,
- items: [
- {
- text: 'Choose embedded wallets',
- link: '/docs/resources/guides/embedded-wallets',
- },
- {
- text: 'Choose funding and payouts',
- link: '/docs/resources/guides/funding-and-payouts',
- },
- ],
+ text: 'Accept stablecoin payments',
+ link: '/docs/resources/guides/how-to-accept-stablecoin-payments',
},
+ { text: 'Create payment links', link: '/docs/resources/guides/payment-links' },
+ { text: 'Handle refunds', link: '/docs/resources/guides/refunds' },
{
- text: 'Compliance and security',
- collapsed: true,
- items: [
- {
- text: 'Screen blockchain payments',
- link: '/docs/resources/guides/payment-screening',
- },
- {
- text: 'Design payment controls',
- link: '/docs/resources/guides/compliance-controls',
- },
- ],
+ text: 'Reconcile payments',
+ link: '/docs/resources/guides/payment-reconciliation',
+ },
+ { text: 'Plan batch payments', link: '/docs/resources/guides/batch-payments' },
+ { text: 'Global payouts', link: '/docs/resources/guides/global-payouts' },
+ {
+ text: 'Global payroll',
+ link: '/docs/resources/guides/stablecoin-payroll-for-global-teams',
+ },
+ {
+ text: 'Cross-border payments',
+ link: '/docs/resources/guides/cross-border-payments',
+ },
+ {
+ text: 'Latin America payment routes',
+ link: '/docs/resources/guides/cross-border-payments-latin-america',
+ },
+ { text: 'Remittance operations', link: '/docs/resources/guides/remittances' },
+ {
+ text: 'Recurring payments',
+ link: '/docs/resources/guides/subscriptions-on-tempo',
+ },
+ ],
+ },
+ {
+ text: 'Liquidity and issuance',
+ collapsed: true,
+ items: [
+ { text: 'Corporate treasury', link: '/docs/resources/guides/corporate-treasury' },
+ {
+ text: 'Nostro and vostro accounts',
+ link: '/docs/resources/guides/nostro-vostro-accounts',
+ },
+ { text: 'Plan prefunding', link: '/docs/resources/guides/prefunding' },
+ { text: 'FBO accounts', link: '/docs/resources/guides/fbo-accounts' },
+ { text: 'The GENIUS Act', link: '/docs/resources/guides/genius-act' },
+ ],
+ },
+ {
+ text: 'Machine payment models',
+ collapsed: true,
+ items: [
+ {
+ text: 'HTTP 402 payment flows',
+ link: '/docs/resources/guides/402-payment-required',
+ },
+ {
+ text: 'Microtransactions and sessions',
+ link: '/docs/resources/guides/microtransactions',
+ },
+ ],
+ },
+ {
+ text: 'Wallets and funding',
+ collapsed: true,
+ items: [
+ {
+ text: 'Choose embedded wallets',
+ link: '/docs/resources/guides/embedded-wallets',
+ },
+ {
+ text: 'Choose funding and payouts',
+ link: '/docs/resources/guides/funding-and-payouts',
+ },
+ ],
+ },
+ {
+ text: 'Compliance and security',
+ collapsed: true,
+ items: [
+ {
+ text: 'Screen blockchain payments',
+ link: '/docs/resources/guides/payment-screening',
+ },
+ {
+ text: 'Design payment controls',
+ link: '/docs/resources/guides/compliance-controls',
},
],
},
@@ -768,6 +736,8 @@ export default defineConfig({
},
],
},
+ // The product switcher's Wallet link now lives with the accounts it signs for.
+ { text: 'Tempo Wallet', link: 'https://wallet.tempo.xyz' },
],
},
]
@@ -790,6 +760,7 @@ export default defineConfig({
{ text: 'One-time payments', link: '/docs/guide/machine-payments/one-time-payments' },
{ text: 'Payment sessions', link: '/docs/guide/machine-payments/pay-as-you-go' },
{ text: 'Streamed payments', link: '/docs/guide/machine-payments/streamed-payments' },
+ { text: 'MPP spec', link: 'https://mpp.dev' },
],
},
]
@@ -901,7 +872,16 @@ export default defineConfig({
{ text: 'Wallets', link: '/docs/partners/wallets' },
{ text: 'Smart accounts', link: '/docs/partners/smart-accounts' },
{ text: 'Exchanges', link: '/docs/partners/exchanges' },
- { text: 'Bridges', link: '/docs/partners/bridges' },
+ {
+ text: 'Bridges',
+ collapsed: false,
+ items: [
+ { text: 'Overview', link: '/docs/partners/bridges' },
+ { text: 'LayerZero', link: '/docs/guide/bridge-layerzero' },
+ { text: 'Relay', link: '/docs/guide/bridge-relay' },
+ { text: 'Bungee', link: '/docs/guide/bridge-bungee' },
+ ],
+ },
{ text: 'Payments & ramps', link: '/docs/partners/payments-and-ramps' },
{ text: 'Cards', link: '/docs/partners/cards' },
{ text: 'Partner with Tempo', link: '/docs/partners/join' },
@@ -919,7 +899,6 @@ export default defineConfig({
]
const nodeSidebar = {
text: 'Run a node',
- collapsed: true,
items: [
{
text: 'Overview',
@@ -943,6 +922,7 @@ export default defineConfig({
},
{
text: 'Run a validator',
+ collapsed: true,
items: [
{
text: 'Overview',
@@ -996,130 +976,74 @@ export default defineConfig({
},
],
}
- const changelogSidebar = [
- { text: '← Back to Tempo EVM', link: '/docs/development' },
- {
- text: 'Changelog',
- items: [
- { text: 'Overview', link: '/docs/protocol/upgrades' },
- {
- text: 'Network upgrades',
- collapsed: false,
- items: [
- {
- text: 'T14',
- badge: { text: 'Planned', variant: 'note' as const },
- link: '/docs/protocol/upgrades/t14',
- },
- {
- text: 'T13',
- badge: { text: 'Mainnet', variant: 'info' as const },
- link: '/docs/protocol/upgrades/t13',
- },
- {
- text: 'T12',
- link: '/docs/protocol/upgrades/t12',
- },
- {
- text: 'T11',
- link: '/docs/protocol/upgrades/t11',
- },
- {
- text: 'T10',
- link: '/docs/protocol/upgrades/t10',
- },
- {
- text: 'T9',
- link: '/docs/protocol/upgrades/t9',
- },
- {
- text: 'T8',
- link: '/docs/protocol/upgrades/t8',
- },
- {
- text: 'T7',
- link: '/docs/protocol/upgrades/t7',
- },
- {
- text: 'T6',
- link: '/docs/protocol/upgrades/t6',
- },
- {
- text: 'T5',
- link: '/docs/protocol/upgrades/t5',
- },
- {
- text: 'T4',
- link: '/docs/protocol/upgrades/t4',
- },
- {
- text: 'T3',
- link: '/docs/protocol/upgrades/t3',
- },
- {
- text: 'T2',
- link: '/docs/protocol/upgrades/t2',
- },
- ],
- },
- { text: 'Node releases', link: '/docs/changelog' },
- { text: 'Operator updates', link: '/docs/guide/node/network-upgrades' },
- ],
- },
- ]
- const developerToolsSidebar = [
- {
- text: 'SDKs & CLI',
- items: [
- {
- text: 'Overview',
- link: '/docs/sdk',
- },
- {
- text: 'SDKs',
- collapsed: false,
- items: [
- { text: 'Overview', link: '/docs/sdk' },
- {
- text: 'TypeScript',
- collapsed: false,
- items: [
- { text: 'Overview', link: '/docs/sdk/typescript' },
- { text: 'Local testing with Prool', link: '/docs/sdk/typescript/prool/setup' },
- { text: 'Viem reference', link: 'https://viem.sh/tempo' },
- { text: 'Wagmi reference', link: 'https://wagmi.sh/tempo' },
- ],
- },
- { text: 'Rust', link: '/docs/sdk/rust' },
- { text: 'Go', link: '/docs/sdk/go' },
- { text: 'Python', link: '/docs/sdk/python' },
- {
- text: 'Foundry',
- collapsed: false,
- items: [
- { text: 'Overview', link: '/docs/sdk/foundry' },
- { text: 'Use MPP with Foundry', link: '/docs/sdk/foundry/mpp' },
- { text: 'Signature verification', link: '/docs/sdk/foundry/signature-verifier' },
- ],
- },
- ],
- },
- {
- text: 'CLI',
- collapsed: false,
- items: [
- { text: 'Overview', link: '/docs/cli' },
- { text: 'Wallet', link: '/docs/cli/wallet' },
- { text: 'Wallet recipes', link: '/docs/wallet/recipes' },
- { text: 'Request', link: '/docs/cli/request' },
- { text: 'Download', link: '/docs/cli/download' },
- { text: 'Node', link: '/docs/cli/node' },
- ],
- },
- { text: 'Explorer', link: 'https://explore.tempo.xyz' },
- ],
- },
- ]
+ const changelogSidebar = {
+ text: 'Changelog',
+ items: [
+ { text: 'Overview', link: '/docs/protocol/upgrades' },
+ {
+ text: 'Network upgrades',
+ collapsed: false,
+ items: [
+ {
+ text: 'T14',
+ badge: { text: 'Planned', variant: 'note' as const },
+ link: '/docs/protocol/upgrades/t14',
+ },
+ {
+ text: 'T13',
+ badge: { text: 'Mainnet', variant: 'info' as const },
+ link: '/docs/protocol/upgrades/t13',
+ },
+ {
+ text: 'T12',
+ link: '/docs/protocol/upgrades/t12',
+ },
+ {
+ text: 'T11',
+ link: '/docs/protocol/upgrades/t11',
+ },
+ {
+ text: 'T10',
+ link: '/docs/protocol/upgrades/t10',
+ },
+ {
+ text: 'T9',
+ link: '/docs/protocol/upgrades/t9',
+ },
+ {
+ text: 'T8',
+ link: '/docs/protocol/upgrades/t8',
+ },
+ {
+ text: 'T7',
+ link: '/docs/protocol/upgrades/t7',
+ },
+ {
+ text: 'T6',
+ link: '/docs/protocol/upgrades/t6',
+ },
+ {
+ text: 'T5',
+ link: '/docs/protocol/upgrades/t5',
+ },
+ {
+ text: 'T4',
+ link: '/docs/protocol/upgrades/t4',
+ },
+ {
+ text: 'T3',
+ link: '/docs/protocol/upgrades/t3',
+ },
+ {
+ text: 'T2',
+ link: '/docs/protocol/upgrades/t2',
+ },
+ ],
+ },
+ { text: 'Node releases', link: '/docs/changelog' },
+ { text: 'Operator updates', link: '/docs/guide/node/network-upgrades' },
+ ],
+ }
// Keep guides and specifications in one chapter per topic. Group controls
// disclose pages; Vocs opens the active chapter without replacing the tree.
@@ -1280,7 +1204,7 @@ export default defineConfig({
collapsed: true,
items: [
{ text: 'Introduction', link: '/docs/network' },
- { text: 'Connection details', link: '/docs/quickstart/connection-details' },
+ { text: 'Network details', link: '/docs/quickstart/connection-details' },
{ text: 'EVM differences', link: '/docs/quickstart/evm-compatibility' },
{ text: 'Integrate an existing app', link: '/docs/quickstart/integrate-tempo' },
{ text: 'JSON-RPC reference', link: '/docs/protocol/rpc' },
@@ -1293,43 +1217,82 @@ export default defineConfig({
{ text: 'TIPs', link: 'https://tips.sh/' },
],
},
- {
- text: 'Run a node',
- collapsed: true,
- items: nodeSidebar.items.map((item) => ({
- ...item,
- ...(item.text === 'Overview' ? { text: 'Introduction' } : {}),
- ...(item.items ? { collapsed: true } : {}),
- })),
- },
{ text: 'All specifications', link: '/docs/protocol' },
- { ...changelogSidebar[1], collapsed: true },
+ { text: 'Explorer', link: 'https://explore.tempo.xyz' },
],
},
]
- const toolsSidebar = developerToolsSidebar
+ // Network merges Tempo EVM and Operate: build on the chain, then run a node, then the changelog.
+ const networkSidebar = [...developersSidebar, nodeSidebar, changelogSidebar]
const partnerResourcesSidebar = [...ecosystemSidebar]
+ // Each product's sidebar ends with its API reference: the pages of its OpenAPI tags (see
+ // `apiTagGroups`). The API reference itself keeps the full sidebar generated from the spec.
+ const apiReference = (items: { text: string; link: string }[]) => ({
+ text: 'API reference',
+ items,
+ })
const productSidebars = {
- overview: getStartedSidebar,
- accounts: accountsSidebar,
- earn: earnSidebar,
- routes: routesSidebar,
- zones: zonesSidebar,
- developers: developersSidebar,
- 'machine-payments': machinePaymentsSidebar,
+ overview: [
+ ...getStartedSidebar,
+ apiReference([
+ { text: 'Overview', link: '/docs/api' },
+ { text: 'Authentication', link: '/docs/api/authentication' },
+ { text: 'API keys', link: '/docs/api/api-keys' },
+ { text: 'Faucet', link: '/docs/api/faucet' },
+ ]),
+ ],
+ accounts: [
+ ...accountsSidebar,
+ apiReference([
+ { text: 'Balances', link: '/docs/api/balances' },
+ { text: 'Activities', link: '/docs/api/activities' },
+ { text: 'Transactions', link: '/docs/api/transactions' },
+ { text: 'Transfers', link: '/docs/api/transfers' },
+ { text: 'Fee payer', link: '/docs/api/fee-payer-usage' },
+ ]),
+ ],
+ earn: [...earnSidebar, apiReference([{ text: 'Earn API', link: '/docs/api/earn' }])],
+ routes: [
+ ...routesSidebar,
+ apiReference([
+ { text: 'Supported routes', link: '/docs/api/routes/routes' },
+ { text: 'Deposits', link: '/docs/api/routes/deposit-addresses' },
+ { text: 'Transfers', link: '/docs/api/routes/transfers' },
+ { text: 'Exchange', link: '/docs/api/exchange' },
+ ]),
+ ],
+ zones: [...zonesSidebar, apiReference([{ text: 'Zones API', link: '/docs/api/zones' }])],
+ developers: [
+ ...networkSidebar,
+ apiReference([
+ { text: 'JSON-RPC', link: '/docs/api/rpc' },
+ { text: 'Blocks', link: '/docs/api/blocks' },
+ { text: 'Tokens', link: '/docs/api/tokens' },
+ { text: 'Verified tokens', link: '/docs/api/verified-tokens' },
+ { text: 'Indexer', link: '/docs/api/indexer' },
+ { text: 'Webhooks', link: '/docs/api/webhooks' },
+ { text: 'Fee AMM', link: '/docs/api/fee-amm' },
+ { text: 'CoinGecko', link: '/docs/api/coingecko' },
+ ]),
+ ],
+ 'machine-payments': [
+ ...machinePaymentsSidebar,
+ apiReference([{ text: 'MPP', link: '/docs/api/mpp' }]),
+ ],
api: [{ text: 'API reference', items: [{ text: 'Introduction', link: '/docs/api' }] }],
tools: toolsSidebar,
+ resources: resourcesSidebar,
ecosystem: partnerResourcesSidebar,
}
return {
- '/docs': getStartedSidebar,
+ '/docs': productSidebars.overview,
...Object.fromEntries(
[...docsSections, ...docsUtilitySections].flatMap((section) =>
section.matches.map((path) => [path, productSidebars[section.id]]),
),
),
- '/docs/guide/private-zones': zonesSidebar,
+ '/docs/guide/private-zones': productSidebars.zones,
'/docs/partners': partnerResourcesSidebar,
'/docs/partners/join': partnerResourcesSidebar,
'/docs/guide/ousd': partnerResourcesSidebar,