01 — Logo
@@ -77,11 +77,11 @@ The **symbol** is the standalone Sei mark. Use it on its own only when the wordm
The **token mark** appears in Maroon. Black and white are fallbacks for constrained environments.
-
+
## Powered by Sei
@@ -121,7 +121,7 @@ For ecosystem and partner surfaces. Keep the lockup intact and match the clearsp
---
-
+
-
02 — Color
@@ -177,9 +177,9 @@ Black and white carry the brand. Maroon and Gold are heritage accents — use th
50
#CCCCCC
+
-100
- #999999
+ #999999
200
@@ -199,7 +199,7 @@ Black and white carry the brand. Maroon and Gold are heritage accents — use th
+
03 — Typography
@@ -207,22 +207,22 @@ Black and white carry the brand. Maroon and Gold are heritage accents — use th
**Lateral** is our primary typeface. Use it for headlines, product UI, and anything that needs presence. Give it room when setting editorially.
-
+
-
+
Lateral
-
+
-
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?&@*
- Condensed Bold · Display
- Regular · Body
- Light · Subtext
+
+ Condensed Bold · Display
+ Regular · Body
+ Light · Subtext
-
+
@@ -231,35 +231,35 @@ Black and white carry the brand. Maroon and Gold are heritage accents — use th
## Secondary Typefaces
Primary font · Headlines · Body · Copy
-
-
+
+
Items Text
-
+
-
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?&@*
- Book
+
+ Book
-
+
-
Secondary font · Editorial · Quotes · Foundation
-
+
+
ABC Repro Mono
-
+
-
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?&@*
- Regular
+
+ Regular
-
+
@@ -267,7 +267,7 @@ Black and white carry the brand. Maroon and Gold are heritage accents — use th
---
-
Tertiary font · Data · Tickers · Captions
+
04 — Usage
@@ -275,14 +275,14 @@ Black and white carry the brand. Maroon and Gold are heritage accents — use th
To maintain the logo's clarity and prominence, follow the clearspace guidelines. A certain amount of space is required around the lockup to prevent surrounding artwork, imagery, or the edge of a page from crowding it.
-
-
+
+
-
diff --git a/scripts/check-snippet-theme-default.mjs b/scripts/check-snippet-theme-default.mjs
new file mode 100644
index 0000000..36104f5
--- /dev/null
+++ b/scripts/check-snippet-theme-default.mjs
@@ -0,0 +1,109 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const repoDir = fileURLToPath(new URL('../', import.meta.url));
+const snippetsDir = fileURLToPath(new URL('../snippets/', import.meta.url));
+const docsConfigPath = fileURLToPath(new URL('../docs.json', import.meta.url));
+const themeSeedFiles = new Set([
+ 'changelog.jsx',
+ 'ecosystem-app-grid.jsx',
+ 'ecosystem-contracts.jsx',
+ 'rpc-methods-viewer.jsx',
+ 'sandbox-embed.jsx',
+ 'sip-index.jsx',
+ 'sstore-gas-live.jsx'
+]);
+
+// Theme-aware snippets need a deterministic server/hydration seed. Keep the
+// runtime literals local because Mintlify evaluates each snippet in isolation,
+// and use this check as the single link to docs.json → appearance.default.
+const docsConfig = JSON.parse(await readFile(docsConfigPath, 'utf8'));
+const defaultAppearance = docsConfig.appearance?.default;
+
+if (!['dark', 'light'].includes(defaultAppearance)) {
+ console.error(
+ `docs.json appearance.default is ${JSON.stringify(defaultAppearance)}; `
+ + 'theme-aware snippets require an explicit dark or light hydration seed.'
+ );
+ process.exit(1);
+}
+
+const files = (await readdir(snippetsDir))
+ .filter((file) => file.endsWith('.jsx'))
+ .sort();
+const failures = [];
+let checkedSeeds = 0;
+
+for (const file of files) {
+ const path = `${snippetsDir}/${file}`;
+ const source = await readFile(path, 'utf8');
+ const relativePath = relative(repoDir, path);
+ const seeds = [
+ ...source.matchAll(
+ /const\s*\[\s*isDark\s*,\s*([A-Za-z_$][\w$]*)\s*\]\s*=\s*useState\(\s*(true|false)\s*\)/g
+ )
+ ].map((match) => ({
+ index: match.index,
+ setter: match[1],
+ actual: match[2],
+ expected: defaultAppearance === 'dark' ? 'true' : 'false'
+ }));
+
+ seeds.push(
+ ...[...source.matchAll(
+ /const\s*\[\s*theme\s*,\s*([A-Za-z_$][\w$]*)\s*\]\s*=\s*useState\(\s*(['"])(dark|light)\2\s*\)/g
+ )].map((match) => ({
+ index: match.index,
+ setter: match[1],
+ actual: match[3],
+ expected: defaultAppearance
+ }))
+ );
+
+ if (themeSeedFiles.has(file) && seeds.length !== 1) {
+ failures.push(
+ `${relativePath}: expected exactly one registered theme seed, found ${seeds.length}`
+ );
+ }
+
+ for (const seed of seeds) {
+ checkedSeeds += 1;
+ const line = source.slice(0, seed.index).split('\n').length;
+
+ if (seed.actual !== seed.expected) {
+ failures.push(
+ `${relativePath}:${line} initial theme ${seed.actual} does not match `
+ + `docs.json appearance.default (${defaultAppearance})`
+ );
+ }
+
+ const escapedSetter = seed.setter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const layoutSync = new RegExp(
+ `useLayoutEffect\\s*\\([\\s\\S]*?\\b${escapedSetter}\\s*\\(`
+ );
+ if (!layoutSync.test(source.slice(seed.index))) {
+ failures.push(
+ `${relativePath}:${line} synchronize ${seed.setter} in useLayoutEffect `
+ + 'so the saved theme is applied before paint'
+ );
+ }
+ }
+}
+
+for (const file of themeSeedFiles) {
+ if (!files.includes(file)) {
+ failures.push(`snippets/${file}: registered theme-aware snippet is missing`);
+ }
+}
+
+if (failures.length) {
+ console.error('Theme-aware snippet defaults are out of sync:\n');
+ console.error(failures.map((failure) => `- ${failure}`).join('\n'));
+ process.exit(1);
+}
+
+console.log(
+ `Checked ${checkedSeeds} theme seeds against docs.json appearance.default `
+ + `(${defaultAppearance}); each synchronizes before paint.`
+);
diff --git a/snippets/add-sei-button.jsx b/snippets/add-sei-button.jsx
index e5036f4..aaa76a5 100644
--- a/snippets/add-sei-button.jsx
+++ b/snippets/add-sei-button.jsx
@@ -80,11 +80,15 @@ export const AddSeiButton = ({ network = 'mainnet', label = 'Add Sei to MetaMask
{isBusy ? 'Adding…' : label}
{status && (
-
- {status.message}
-
+ status.type === 'error' ? (
+
+ {status.message}
+
+ ) : (
+
+ {status.message}
+
+ )
)}
);
diff --git a/snippets/changelog.jsx b/snippets/changelog.jsx
index 860386a..a57c105 100644
--- a/snippets/changelog.jsx
+++ b/snippets/changelog.jsx
@@ -543,9 +543,11 @@ sei-tendermint
const [dynamicVersions, setDynamicVersions] = useState([]);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
- const [isDark, setIsDark] = useState(false);
+ // This deterministic seed is CI-checked against docs.json appearance.default
+ // by scripts/check-snippet-theme-default.mjs.
+ const [isDark, setIsDark] = useState(true);
- useEffect(() => {
+ useLayoutEffect(() => {
const el = document.documentElement;
const update = () => setIsDark(el.classList.contains('dark'));
update();
@@ -635,14 +637,18 @@ sei-tendermint
return repoMap[compName] || 'sei-protocol/sei-chain';
};
- const renderLink = (key, href, text, marginClass = 'ml-1') => (
+ const renderLink = (key, href, text, marginSide = 'left') => (
applyLinkHover(e, true)}
onMouseLeave={(e) => applyLinkHover(e, false)}>
{text}
@@ -723,7 +729,7 @@ sei-tendermint
const inlineComponentMatch = prevParts.match(/\b(sei-chain|sei-tendermint|sei-cosmos|sei-db|sei-wasmd|sei-iavl|sei-ibc-go|tm-db)\s*$/i);
const effectiveComponent = inlineComponentMatch ? inlineComponentMatch[1] : componentName;
const repoPath = getRepoUrl(effectiveComponent);
- return renderLink(`${key}-${j}`, `https://github.com/${repoPath}/pull/${trimmedPart}`, `#${trimmedPart}`, 'mr-1');
+ return renderLink(`${key}-${j}`, `https://github.com/${repoPath}/pull/${trimmedPart}`, `#${trimmedPart}`, 'right');
}
}
return {subPart};
@@ -793,8 +799,8 @@ sei-tendermint
{sectionComponents.map((comp, i) => (
-
-
- Use only approved colors. Black, white, Maroon 100, or Gold 100 — nothing else. -
- Keep proportions locked. Symbol and wordmark ship as one unit. Don't rescale their relationship. -
- Respect clearspace and minimum size. X on all sides, 25 px tall minimum. +
- Use only approved colors. Black, white, Maroon 100, or Gold 100 — nothing else. +
- Keep proportions locked. Symbol and wordmark ship as one unit. Don't rescale their relationship. +
- Respect clearspace and minimum size. X on all sides, 25 px tall minimum.
-
+
-
-
+
@@ -853,9 +859,9 @@ sei-tendermint
{components.map((comp, i) => (
+
{comp.name}
-
-
- {comp.name}
+
+
+ {comp.name}
@@ -918,7 +924,7 @@ sei-tendermint
@@ -959,7 +965,7 @@ sei-tendermint
View on GitHub
{loading && (
-
+
Checking for the latest releases…
@@ -971,7 +977,7 @@ sei-tendermint
diff --git a/snippets/ecosystem-app-grid.jsx b/snippets/ecosystem-app-grid.jsx
index 6a273f8..4233fc1 100644
--- a/snippets/ecosystem-app-grid.jsx
+++ b/snippets/ecosystem-app-grid.jsx
@@ -13,8 +13,10 @@ export const EcosystemAppGrid = (props) => {
};
// --- Dark mode detection (Mintlify toggles a `dark` class on ) ---
- const [isDark, setIsDark] = useState(false);
- useEffect(() => {
+ // See scripts/check-snippet-theme-default.mjs for the shared SSR theme
+ // invariant. Layout sync applies a saved preference before paint.
+ const [isDark, setIsDark] = useState(true);
+ useLayoutEffect(() => {
const el = document.documentElement;
const update = () => setIsDark(el.classList.contains('dark'));
update();
@@ -207,7 +209,7 @@ export const EcosystemAppGrid = (props) => {
) : (
{version.version}
- Release + Release{renderContent(version.body)}
{version.version}
- Release + Release{renderContent(version.body)}
+
Couldn’t load {category} integrations right now. Please refresh to try again.
);
@@ -283,7 +285,7 @@ export const EcosystemAppGrid = (props) => {
const apps = data.filter((app) => app && app.fieldData && app.fieldData['docs-category'] === category);
if (!apps || apps.length === 0) {
- return No {category} integrations published yet.
;
+ return No {category} integrations published yet.
;
}
return (
diff --git a/snippets/ecosystem-contracts.jsx b/snippets/ecosystem-contracts.jsx
index 3a4ed73..f57d0e5 100644
--- a/snippets/ecosystem-contracts.jsx
+++ b/snippets/ecosystem-contracts.jsx
@@ -592,8 +592,10 @@ export const EcosystemContracts = () => {
const addressKey = 'Contract Address';
// --- Dark mode detection (Mintlify toggles a `dark` class on ) ---
- const [isDark, setIsDark] = useState(false);
- useEffect(() => {
+ // See scripts/check-snippet-theme-default.mjs for the shared SSR theme
+ // invariant. Layout sync applies a saved preference before paint.
+ const [isDark, setIsDark] = useState(true);
+ useLayoutEffect(() => {
const el = document.documentElement;
const update = () => setIsDark(el.classList.contains('dark'));
update();
@@ -787,13 +789,13 @@ export const EcosystemContracts = () => {
{group.contractCount} contract{group.contractCount !== 1 ? 's' : ''}
-