feat: bundle shared OpenClaw design tokens

scripts/docs-site/assets.mjs

@@ -1,11 +1,19 @@
 import fs from "node:fs";
 
 const maturityCss = fs.readFileSync(new URL("./maturity.css", import.meta.url), "utf8");
+const designSystemCss = [
+  "@openclaw/design-system/tokens.css",
+  "@openclaw/design-system/themes.css",
+  "@openclaw/design-system/typography.css",
+]
+  .map((specifier) => fs.readFileSync(new URL(import.meta.resolve(specifier)), "utf8"))
+  .join("\n");
 
 export function siteCss() {
   return `
-:root{--bg:#101012;--paper:#19191c;--paper-2:#202024;--ink:#ededed;--text:#bcbcc4;--muted:#9a9aa2;--line:#232327;--line-strong:#2f2f34;--soft:#33211d;--brand:#f5654a;--brand-2:#b23a28;--accent-2:#4fc8ae;--on-brand:#101012;--code:#141416;--code-inline:#232328;--code-block:#0e0e10;--code-text:#e9e9ee;--code-border:#2a2a30;--code-shadow:0 18px 56px rgba(0,0,0,.30);--tok-comment:#7e7e88;--tok-command:#ff8f78;--tok-option:#79c0ff;--tok-string:#8fd4bd;--tok-literal:#d2a8ff;--tok-key:#f2a37c;--tok-number:#79c0ff;--tok-punct:#8b949e;--shadow:0 20px 70px rgba(0,0,0,.34);color-scheme:dark}
-:root[data-theme="light"]{--bg:#f6f5f3;--paper:#ffffff;--paper-2:#f0eeea;--ink:#17171a;--text:#46464e;--muted:#63636c;--line:#e3e1dc;--line-strong:#cfccc5;--soft:#fae8e3;--brand:#d84a31;--brand-2:#9c3222;--accent-2:#14806e;--on-brand:#ffffff;--code:#f2f0ec;--code-inline:#ecebe6;--code-block:#fffefc;--code-text:#26262c;--code-border:#dbd8d1;--code-shadow:none;--tok-comment:#6d6d77;--tok-command:#bb3f28;--tok-option:#2365a8;--tok-string:#0f6355;--tok-literal:#7b3fb4;--tok-key:#a63c22;--tok-number:#1a5fb4;--tok-punct:#75707a;--shadow:0 20px 70px rgba(23,23,26,.10);color-scheme:light}
+${designSystemCss}
+:root{--bg:var(--oc-bg-page);--paper:var(--oc-bg-surface);--paper-2:var(--oc-bg-elevated);--ink:var(--oc-text-primary);--text:var(--oc-text-secondary);--muted:var(--oc-text-muted);--line:#232327;--line-strong:#2f2f34;--soft:#33211d;--brand:var(--oc-accent-primary);--brand-2:var(--oc-accent-primary-deep);--accent-2:var(--oc-accent-secondary);--on-brand:var(--oc-text-on-accent);--code:#141416;--code-inline:#232328;--code-block:#0e0e10;--code-text:#e9e9ee;--code-border:#2a2a30;--code-shadow:0 18px 56px rgba(0,0,0,.30);--tok-comment:#7e7e88;--tok-command:#ff8f78;--tok-option:#79c0ff;--tok-string:#8fd4bd;--tok-literal:#d2a8ff;--tok-key:#f2a37c;--tok-number:#79c0ff;--tok-punct:#8b949e;--shadow:0 20px 70px rgba(0,0,0,.34);color-scheme:dark}
+:root[data-theme="light"]{--paper:var(--oc-bg-elevated);--paper-2:#f0eeea;--line:#e3e1dc;--line-strong:#cfccc5;--soft:#fae8e3;--code:#f2f0ec;--code-inline:#ecebe6;--code-block:#fffefc;--code-text:#26262c;--code-border:#dbd8d1;--code-shadow:none;--tok-comment:#6d6d77;--tok-command:#bb3f28;--tok-option:#2365a8;--tok-string:#0f6355;--tok-literal:#7b3fb4;--tok-key:#a63c22;--tok-number:#1a5fb4;--tok-punct:#75707a;--shadow:0 20px 70px rgba(23,23,26,.10);color-scheme:light}
 :root{--tooltip-bg:#ededed;--tooltip-text:#17171a;--tooltip-border:#ededed;--sticky-header-h:121px}:root[data-theme="light"]{--tooltip-bg:#17171a;--tooltip-text:#f6f5f3;--tooltip-border:#17171a}
 .oc-table-wrap{max-width:100%;overflow:auto;margin:22px 0 28px;border:1px solid var(--line-strong);border-radius:0;background:color-mix(in srgb,var(--paper) 72%,transparent)}.doc .oc-table{margin:0;width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:13px}.doc .oc-table th,.doc .oc-table td{border:0;border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}.doc .oc-table th{position:sticky;top:0;background:color-mix(in srgb,var(--paper-2) 86%,var(--soft) 14%);color:var(--ink);font:780 12px/1.35 Switzer,ui-sans-serif,system-ui,sans-serif}.doc .oc-table tr:last-child td{border-bottom:0}.doc .oc-table td:first-child{color:var(--ink);font-weight:720}.oc-lead{margin:18px 0 28px;color:var(--text);font:500 17px/1.72 Switzer,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.oc-lead p{margin:0}.oc-pullquote{margin:30px 0;padding:3px 0 3px 24px;border-left:3px solid var(--brand);color:var(--ink)}.oc-pullquote blockquote{margin:0;padding:0;border:0;font:400 21px/1.55 Sentient,Georgia,serif;font-style:italic}.oc-pullquote figcaption{margin-top:10px;color:var(--muted);font-size:12px}.oc-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:12px;margin:24px 0}.oc-stat{border:1px solid var(--line-strong);border-radius:0;background:color-mix(in srgb,var(--paper) 72%,transparent);padding:15px 16px}.oc-stat strong{display:block;color:var(--ink);font:780 24px/1 Switzer,ui-sans-serif,system-ui,sans-serif;margin:0 0 8px}.oc-stat>span{display:block;color:var(--muted);font-size:12px;line-height:1.35}.oc-stat-delta{display:inline-block!important;width:max-content;margin-top:10px;padding:2px 7px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line-strong));border-radius:2px;background:color-mix(in srgb,var(--brand) 10%,var(--paper));color:var(--brand)!important}.oc-stat div p{margin:.8em 0 0}.oc-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;margin:32px 0;padding:22px;border:1px solid color-mix(in srgb,var(--brand) 34%,var(--line-strong));border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 82%,var(--brand) 18%),color-mix(in srgb,var(--paper-2) 92%,transparent));box-shadow:var(--shadow)}.oc-cta-copy>span{display:block;color:var(--brand);font:780 12px/1.2 Switzer,ui-sans-serif,system-ui,sans-serif;margin:0 0 7px}.oc-cta-copy strong{display:block;color:var(--ink);font:780 19px/1.28 Switzer,ui-sans-serif,system-ui,sans-serif;margin:0 0 8px}.oc-cta-copy p{margin:0;color:var(--text)}.oc-cta-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.oc-cta-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:10px 20px;border:1px solid var(--line-strong);border-radius:0;font:600 13px/1 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;transition:background .16s ease,border-color .16s ease,color .16s ease,filter .16s ease}.oc-cta-link-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.oc-cta-link-secondary{background:color-mix(in srgb,var(--paper) 78%,transparent);color:var(--ink)}.oc-cta-link:after{content:"→";margin-left:8px}.oc-cta-link:hover{filter:brightness(1.04)}.oc-cta-link-primary:hover{background:color-mix(in srgb,var(--brand) 86%,white 14%);border-color:color-mix(in srgb,var(--brand) 86%,white 14%);color:var(--on-brand)}.oc-cta-link-secondary:hover{background:color-mix(in srgb,var(--soft) 62%,var(--paper) 38%);border-color:color-mix(in srgb,var(--brand) 44%,var(--line-strong));color:var(--ink)}.oc-cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px;margin:24px 0}.oc-cta-card{display:block;min-height:160px;border:1px solid var(--line-strong);border-radius:0;background:color-mix(in srgb,var(--paper) 78%,transparent);padding:18px 20px;color:var(--text);transition:border-color .16s ease,background .16s ease}.oc-cta-card:hover,.oc-cta-card:focus-visible{border-color:var(--brand);background:color-mix(in srgb,var(--soft) 38%,transparent);outline:0}.oc-cta-card .oc-card-icon{margin-bottom:14px}.oc-cta-card strong{display:block;color:var(--ink);font:760 16px/1.3 Switzer,ui-sans-serif,system-ui,sans-serif;margin:0 0 4px}.oc-cta-kicker{display:block;color:var(--brand);font:760 12px/1.35 Switzer,ui-sans-serif,system-ui,sans-serif;margin:0 0 9px}.oc-cta-card p{margin:0 0 14px;color:var(--muted)}.oc-cta-card .oc-cta-actions{margin-top:16px}.oc-chart{margin:28px 0;padding:16px;border:1px solid var(--line-strong);border-radius:0;background:color-mix(in srgb,var(--paper) 76%,transparent)}.oc-chart figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 16px}.oc-chart figcaption strong{color:var(--ink);font:780 15px/1.25 Switzer,ui-sans-serif,system-ui,sans-serif}.oc-chart figcaption span{color:var(--muted);font-size:12px}.oc-chart-bars{display:grid;gap:10px}.oc-chart-row{display:grid;grid-template-columns:minmax(86px,150px) minmax(120px,1fr) auto;gap:10px;align-items:center}.oc-chart-row>span{color:var(--text);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-chart-row strong{color:var(--ink);font:760 12px/1 Switzer,ui-sans-serif,system-ui,sans-serif}.oc-chart-track{height:10px;border-radius:0;background:color-mix(in srgb,var(--line-strong) 62%,transparent);overflow:hidden}.oc-chart-track i{display:block;width:var(--oc-chart-value);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-2),var(--brand))}.oc-chart-line-wrap{display:grid;gap:10px}.oc-chart-line-svg{display:block;width:100%;height:auto;overflow:visible}.oc-chart-line-svg polyline{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.oc-chart-line-svg circle{fill:var(--paper);stroke:var(--brand);stroke-width:3}.oc-chart-gridline{stroke:var(--line-strong);stroke-width:1}.oc-chart-axis{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.oc-chart-axis span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-chart-data{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}@media(max-width:820px){.oc-cta{grid-template-columns:1fr}.oc-chart-row{grid-template-columns:minmax(74px,110px) minmax(90px,1fr) auto}.doc .oc-table{min-width:0;table-layout:fixed}}
 *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}body{margin:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--text);font:15px/1.7 Switzer,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}::selection{background:var(--brand);color:var(--on-brand)}a{color:inherit;text-decoration:none}a:hover{color:var(--ink)}img{max-width:100%;height:auto}button,input,select{font:inherit}.hidden{display:none!important}.oc-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:root[data-theme="dark"] .dark\\:hidden{display:none!important}:root[data-theme="dark"] .dark\\:block{display:block!important}:root[data-theme="light"] .dark\\:block{display:none!important}

scripts/docs-site/smoke.mjs

@@ -365,7 +365,10 @@ if (!/\.nav-section h2\{[^}]*ui-monospace[^}]*text-transform:uppercase/.test(sit
   || !/\.toc h2\{[^}]*ui-monospace[^}]*text-transform:uppercase/.test(siteCss)) {
   throw new Error("assets: mono label accents drifted from the reference skin");
 }
-if (!/--bg:#101012;--paper:#19191c;--paper-2:#202024;[^}]*--soft:#33211d/.test(siteCss)
+if (!/--oc-palette-ink-950:\s*#101012/.test(siteCss)
+  || !/--bg:var\(--oc-bg-page\);--paper:var\(--oc-bg-surface\);--paper-2:var\(--oc-bg-elevated\)/.test(siteCss)
+  || !/--brand:var\(--oc-accent-primary\);--brand-2:var\(--oc-accent-primary-deep\)/.test(siteCss)
+  || !/--soft:#33211d/.test(siteCss)
   || !/\.nav-link\.active\{border-left-color:var\(--brand\);color:var\(--brand\);font-weight:650\}/.test(siteCss)) {
   throw new Error("assets: dark sidebar surface is not reference-aligned");
 }