diff --git a/docs/ui/supplemental/css/arcadedb.css b/docs/ui/supplemental/css/arcadedb.css
index 9b42f3bb6..861fe3f05 100644
--- a/docs/ui/supplemental/css/arcadedb.css
+++ b/docs/ui/supplemental/css/arcadedb.css
@@ -10,23 +10,167 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
- --color-primary: #0066CC;
- --color-primary-dark: #004C99;
- --color-text-primary: #1A1D23;
- --color-text-secondary: #4A5568;
+ --color-bg: #FFFFFF;
--color-bg-secondary: #F5F6F7;
--color-bg-accent: #F0F4F8;
+ --color-card: #FFFFFF;
+ --color-surface: #FAFBFC;
--color-border: #E2E8F0;
--color-border-light: #EDF2F7;
+ --color-border-strong: #718096;
+ --color-text-primary: #1A1D23;
+ --color-text-secondary: #4A5568;
+ --color-primary: #0066CC;
+ --color-primary-dark: #004C99;
+ --color-on-primary: #FFFFFF;
+ --color-link: #1565C0;
+ --color-link-hover: #104D92;
+ --color-focus: #0066CC;
+ --color-danger: #D32F2F;
--color-code-bg: #1A1D23;
--color-code-text: #E4E8EE;
+ --color-code-comment: #8B95A5;
--color-inline-code-bg: #F0F4F8;
--color-inline-code-text: #0066CC;
+ --color-scrollbar: #C1C1C1;
+ --hero-1: #F0F4F8;
+ --hero-2: #E2EAF2;
+ --hero-3: #D9E5F0;
+ --c-blue: #0066CC;
+ --c-green: #10B981;
+ --c-green-text: #047857;
+ --c-purple: #7C3AED;
+ --c-amber: #F59E0B;
+ --c-amber-text: #B45309;
+ --c-red: #EF4444;
+ --c-red-text: #B91C1C;
+ --c-lime: #65A30D;
+ --c-lime-bright: #84CC16;
+ --c-teal-text: #0F766E;
+ --c-fuchsia-text: #A21CAF;
+ --c-indigo-text: #1D4ED8;
+ --c-pink-text: #BE185D;
+ --c-gray-text: #4B5563;
+ --c-blue-soft: #93C5FD;
+ --c-purple-soft: #C4B5FD;
+ --c-green-soft: #6EE7B7;
+ --c-amber-soft: #FCD34D;
+ --c-red-soft: #FCA5A5;
+ --c-blue-bg: #F7FAFE;
+ --c-amber-bg: #FFFBEB;
+ color-scheme: light;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
--font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-code: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
+/* Dark theme: the reader's system setting unless the toggle chose light. */
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --color-bg: #0F1217;
+ --color-bg-secondary: #151920;
+ --color-bg-accent: #1C222C;
+ --color-card: #1A1F27;
+ --color-surface: #1D232C;
+ --color-border: #2C3440;
+ --color-border-light: #232A34;
+ --color-border-strong: #6B7788;
+ --color-text-primary: #E8ECF2;
+ --color-text-secondary: #AEB8C6;
+ --color-primary: #5AAEFF;
+ --color-primary-dark: #8CC8FF;
+ --color-on-primary: #0A1220;
+ --color-link: #6DB3FF;
+ --color-link-hover: #9CCBFF;
+ --color-focus: #8CC8FF;
+ --color-danger: #FF8A80;
+ --color-code-bg: #0B0D11;
+ --color-code-text: #E4E8EE;
+ --color-code-comment: #8B95A5;
+ --color-inline-code-bg: #232A36;
+ --color-inline-code-text: #8CC8FF;
+ --color-scrollbar: #4B5563;
+ --hero-1: #1A212C;
+ --hero-2: #18202B;
+ --hero-3: #161D27;
+ --c-blue: #5AAEFF;
+ --c-green: #34D399;
+ --c-green-text: #34D399;
+ --c-purple: #B79CFF;
+ --c-amber: #FBBF24;
+ --c-amber-text: #FBBF24;
+ --c-red: #F87171;
+ --c-red-text: #FCA5A5;
+ --c-lime: #A3E635;
+ --c-lime-bright: #A3E635;
+ --c-teal-text: #5EEAD4;
+ --c-fuchsia-text: #F0ABFC;
+ --c-indigo-text: #93B4FF;
+ --c-pink-text: #F9A8D4;
+ --c-gray-text: #C0C7D2;
+ --c-blue-soft: #3B6EA8;
+ --c-purple-soft: #6B58A8;
+ --c-green-soft: #2F8F6B;
+ --c-amber-soft: #9A7A1E;
+ --c-red-soft: #A04646;
+ --c-blue-bg: #18212F;
+ --c-amber-bg: #2A2415;
+ color-scheme: dark;
+ }
+}
+/* Dark theme chosen with the toggle. */
+:root[data-theme="dark"] {
+ --color-bg: #0F1217;
+ --color-bg-secondary: #151920;
+ --color-bg-accent: #1C222C;
+ --color-card: #1A1F27;
+ --color-surface: #1D232C;
+ --color-border: #2C3440;
+ --color-border-light: #232A34;
+ --color-border-strong: #6B7788;
+ --color-text-primary: #E8ECF2;
+ --color-text-secondary: #AEB8C6;
+ --color-primary: #5AAEFF;
+ --color-primary-dark: #8CC8FF;
+ --color-on-primary: #0A1220;
+ --color-link: #6DB3FF;
+ --color-link-hover: #9CCBFF;
+ --color-focus: #8CC8FF;
+ --color-danger: #FF8A80;
+ --color-code-bg: #0B0D11;
+ --color-code-text: #E4E8EE;
+ --color-code-comment: #8B95A5;
+ --color-inline-code-bg: #232A36;
+ --color-inline-code-text: #8CC8FF;
+ --color-scrollbar: #4B5563;
+ --hero-1: #1A212C;
+ --hero-2: #18202B;
+ --hero-3: #161D27;
+ --c-blue: #5AAEFF;
+ --c-green: #34D399;
+ --c-green-text: #34D399;
+ --c-purple: #B79CFF;
+ --c-amber: #FBBF24;
+ --c-amber-text: #FBBF24;
+ --c-red: #F87171;
+ --c-red-text: #FCA5A5;
+ --c-lime: #A3E635;
+ --c-lime-bright: #A3E635;
+ --c-teal-text: #5EEAD4;
+ --c-fuchsia-text: #F0ABFC;
+ --c-indigo-text: #93B4FF;
+ --c-pink-text: #F9A8D4;
+ --c-gray-text: #C0C7D2;
+ --c-blue-soft: #3B6EA8;
+ --c-purple-soft: #6B58A8;
+ --c-green-soft: #2F8F6B;
+ --c-amber-soft: #9A7A1E;
+ --c-red-soft: #A04646;
+ --c-blue-bg: #18212F;
+ --c-amber-bg: #2A2415;
+ color-scheme: dark;
+}
+
/* Typography */
body, .doc {
font-family: var(--font-body) !important;
@@ -59,7 +203,7 @@ a:hover, a:focus {
}
/* Antora chrome — header/toolbar */
-.navbar { background: #fff; border-bottom: 1px solid var(--color-border); }
+.navbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.navbar-brand .navbar-item { color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 700; padding: 0 1rem; }
.navbar-brand-link { display: flex; align-items: center; }
.navbar-logo { height: 32px; max-height: 32px; width: auto; }
@@ -68,7 +212,7 @@ a:hover, a:focus {
.navbar-end .button.is-primary {
background: var(--color-primary);
border-color: var(--color-primary);
- color: #fff;
+ color: var(--color-on-primary);
font-family: var(--font-body);
font-weight: 600;
padding: 0 1.1em;
@@ -79,9 +223,9 @@ a:hover, a:focus {
.navbar-end .button.is-primary:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
- color: #fff;
+ color: var(--color-on-primary);
}
-.toolbar { background: #fff; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
+.toolbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.toolbar a, .crumbs a { color: var(--color-text-secondary); }
.toolbar a:hover, .crumbs a:hover { color: var(--color-primary); }
@@ -143,7 +287,7 @@ a:hover, a:focus {
--pagefind-ui-scale: 0.85;
--pagefind-ui-primary: var(--color-primary);
--pagefind-ui-text: var(--color-text-primary);
- --pagefind-ui-background: #ffffff;
+ --pagefind-ui-background: var(--color-card);
--pagefind-ui-border: var(--color-border);
--pagefind-ui-tag: var(--color-bg-secondary);
--pagefind-ui-border-width: 1px;
@@ -174,7 +318,7 @@ a:hover, a:focus {
font-family: var(--font-body);
}
.pagefind-ui__search-input:focus {
- background: #ffffff;
+ background: var(--color-card);
border-color: var(--color-primary);
}
/* The clear ("✕") button sits inside the shorter input. */
@@ -186,7 +330,7 @@ a:hover, a:focus {
.pagefind-ui__drawer {
position: absolute;
z-index: 40;
- background: #ffffff;
+ background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(26, 29, 35, 0.12);
@@ -196,8 +340,10 @@ a:hover, a:focus {
min-width: 360px;
}
-/* Antora right TOC ("On this page") */
-aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid var(--color-border-light); }
+/* Antora right TOC ("On this page"). One rule line, on the menu, with room before the links:
+ the aside and the menu both drew it, and the links started 1px from it. */
+aside.toc.sidebar { background: transparent; }
+.toc-menu { background: transparent; border-left: 1px solid var(--color-border-light); padding-left: 0.75rem; }
.toc-menu .title, aside.toc .title { font-family: var(--font-heading); color: var(--color-text-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75em; }
.toc-menu a { color: var(--color-text-secondary); }
.toc-menu a:hover, .toc-menu li.is-active > a { color: var(--color-primary); }
@@ -253,14 +399,14 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
/* highlight.js dark theme — palette matches the legacy docinfo.html. */
.doc .hljs { background: transparent !important; color: var(--color-code-text); }
-.doc .hljs-comment, .doc .hljs-quote { color: #6B7280; font-style: italic; }
+.doc .hljs-comment, .doc .hljs-quote { color: var(--color-code-comment); font-style: italic; }
.doc .hljs-keyword, .doc .hljs-selector-tag, .doc .hljs-literal,
.doc .hljs-section, .doc .hljs-doctag, .doc .hljs-meta { color: #7DD3FC; font-weight: 600; }
.doc .hljs-type, .doc .hljs-class .hljs-title, .doc .hljs-title.class_, .doc .hljs-built_in { color: #93C5FD; }
.doc .hljs-string, .doc .hljs-regexp, .doc .hljs-attr,
.doc .hljs-template-tag { color: #6EE7B7; }
/* f-string / template substitutions — must NOT blend with the string color
- that surrounds them (#6EE7B7), so use the default code text colour. */
+ that surrounds them (var(--c-green-soft)), so use the default code text colour. */
.doc .hljs-subst, .doc .hljs-template-variable { color: var(--color-code-text); }
.doc .hljs-number, .doc .hljs-symbol, .doc .hljs-bullet { color: #5EEAD4; }
.doc .hljs-name, .doc .hljs-tag { color: #7DD3FC; }
@@ -279,36 +425,49 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
- overflow: hidden;
- width: 100%;
+ /* As wide as the content needs, up to the content column; wider content scrolls sideways
+ (the GitHub markdown pattern) instead of running under the "On this page" sidebar. */
+ display: block;
+ width: max-content;
max-width: 100%;
+ overflow-x: auto;
}
-/* Allow long identifiers and inline code to wrap inside table cells.
- Without this, names like `arcadedb.ha.stopServerOnReplicationFailure`
- force a column wider than the content area and the table overflows
- under the right-side "On this page" sidebar. */
+/* Text wraps at spaces and splits a word only when it cannot fit on its own line; no automatic
+ hyphenation (it split words such as "Pack-age"). Long inline code, such as
+ `arcadedb.ha.stopServerOnReplicationFailure`, may still wrap anywhere. */
.doc table.tableblock td,
.doc table.tableblock th {
- word-break: break-word;
- overflow-wrap: anywhere;
+ word-break: normal;
+ overflow-wrap: break-word;
+ hyphens: manual;
}
.doc table.tableblock td code,
.doc table.tableblock th code {
white-space: normal;
- word-break: break-all;
+ word-break: normal;
overflow-wrap: anywhere;
}
+/* On a phone or a small tablet a multi-column table scrolls sideways instead of squeezing
+ every column to a few characters. */
+@media (max-width: 768px) {
+ .doc table.tableblock td,
+ .doc table.tableblock th { min-width: 7.5rem; }
+ /* The last column usually holds the prose (description, notes): give it a reading width, so a phone
+ scrolls the table sideways instead of folding the text into a column a few words wide. */
+ .doc table.tableblock td:last-child,
+ .doc table.tableblock th:last-child { min-width: 14rem; }
+}
.doc table.tableblock thead tr th {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
font-weight: 600;
font-family: var(--font-body);
- padding: 12px 16px;
+ padding: 12px;
border-bottom: 1px solid var(--color-border);
}
.doc table.tableblock tbody tr td,
.doc table.tableblock tbody tr th {
- padding: 12px 16px;
+ padding: 12px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
@@ -328,18 +487,18 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
}
.doc .admonitionblock.note > table td.content { border-left-color: var(--color-primary); background: rgba(0, 102, 204, 0.05); }
.doc .admonitionblock td.icon .icon-note::before { color: var(--color-primary) !important; }
-.doc .admonitionblock.tip > table td.content { border-left-color: #10B981; background: rgba(16, 185, 129, 0.05); }
-.doc .admonitionblock td.icon .icon-tip::before { color: #10B981 !important; }
-.doc .admonitionblock.warning > table td.content { border-left-color: #F59E0B; background: rgba(245, 158, 11, 0.05); }
-.doc .admonitionblock td.icon .icon-warning::before { color: #F59E0B !important; }
+.doc .admonitionblock.tip > table td.content { border-left-color: var(--c-green); background: rgba(16, 185, 129, 0.05); }
+.doc .admonitionblock td.icon .icon-tip::before { color: var(--c-green) !important; }
+.doc .admonitionblock.warning > table td.content { border-left-color: var(--c-amber); background: rgba(245, 158, 11, 0.05); }
+.doc .admonitionblock td.icon .icon-warning::before { color: var(--c-amber) !important; }
.doc .admonitionblock.caution > table td.content,
-.doc .admonitionblock.important > table td.content { border-left-color: #EF4444; background: rgba(239, 68, 68, 0.05); }
+.doc .admonitionblock.important > table td.content { border-left-color: var(--c-red); background: rgba(239, 68, 68, 0.05); }
.doc .admonitionblock td.icon .icon-caution::before,
-.doc .admonitionblock td.icon .icon-important::before { color: #EF4444 !important; }
+.doc .admonitionblock td.icon .icon-important::before { color: var(--c-red) !important; }
/* Sidebar / example / quote blocks */
.doc .sidebarblock { background: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; border-radius: 8px; }
-.doc .exampleblock > .content { border-color: var(--color-border); background: #fff; border-radius: 8px; }
+.doc .exampleblock > .content { border-color: var(--color-border); background: var(--color-card); border-radius: 8px; }
.doc .quoteblock { border-left-color: var(--color-primary); }
/* Landing page (home) */
@@ -354,7 +513,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
}
.landing-card {
display: block;
- background: #fff;
+ background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 28px 20px;
@@ -390,7 +549,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
flex-direction: column;
align-items: center;
gap: 8px;
- background: #fff;
+ background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 20px 14px;
@@ -413,7 +572,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
/get-started.html. Tinted background card with a primary CTA
on the left and a secondary on the right. Inspired by neo4j.com/docs. */
.docs-hero {
- background: linear-gradient(135deg, #F0F4F8 0%, #E2EAF2 60%, #D9E5F0 100%);
+ background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--hero-3) 100%);
border: 1px solid var(--color-border-light);
border-radius: 12px;
padding: 48px 40px;
@@ -451,7 +610,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
}
.docs-hero-button {
background: var(--color-primary);
- color: #fff !important;
+ color: var(--color-on-primary) !important;
border: 1px solid var(--color-primary);
}
.docs-hero-button:hover {
@@ -526,109 +685,109 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
}
.haw-app-link { cursor: pointer; }
-.haw-app-window rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; }
+.haw-app-window rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; }
.haw-app-link:hover .haw-app-window > rect:first-of-type { stroke: var(--color-primary); stroke-width: 2; }
.haw-app-link:hover .haw-section-label { fill: var(--color-primary); }
.haw-app-stack { font-size: 12px; fill: var(--color-text-secondary); font-weight: 500; }
.haw-app-caption { font-size: 11px; fill: var(--color-text-secondary); letter-spacing: 0.04em; }
.haw-lang { cursor: pointer; }
-.haw-lang rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; }
+.haw-lang rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; }
.haw-lang text { font-size: 14px; font-weight: 600; }
-.haw-lang:hover rect { stroke-width: 2; fill: #FAFBFC; }
-.haw-lang-sql text { fill: #0066CC; } .haw-lang-sql:hover rect { stroke: #0066CC; }
-.haw-lang-cypher text { fill: #10B981; } .haw-lang-cypher:hover rect { stroke: #10B981; }
-.haw-lang-gremlin text { fill: #7C3AED; } .haw-lang-gremlin:hover rect { stroke: #7C3AED; }
-.haw-lang-graphql text { fill: #F59E0B; } .haw-lang-graphql:hover rect { stroke: #F59E0B; }
-.haw-lang-mongo text { fill: #84CC16; } .haw-lang-mongo:hover rect { stroke: #84CC16; }
-.haw-lang-java text { fill: #1A1D23; } .haw-lang-java:hover rect { stroke: #1A1D23; }
+.haw-lang:hover rect { stroke-width: 2; fill: var(--color-surface); }
+.haw-lang-sql text { fill: var(--c-blue); } .haw-lang-sql:hover rect { stroke: var(--c-blue); }
+.haw-lang-cypher text { fill: var(--c-green); } .haw-lang-cypher:hover rect { stroke: var(--c-green); }
+.haw-lang-gremlin text { fill: var(--c-purple); } .haw-lang-gremlin:hover rect { stroke: var(--c-purple); }
+.haw-lang-graphql text { fill: var(--c-amber); } .haw-lang-graphql:hover rect { stroke: var(--c-amber); }
+.haw-lang-mongo text { fill: var(--c-lime-bright); } .haw-lang-mongo:hover rect { stroke: var(--c-lime-bright); }
+.haw-lang-java text { fill: var(--color-text-primary); } .haw-lang-java:hover rect { stroke: var(--color-text-primary); }
-.haw-server-box { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; }
+.haw-server-box { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; }
.haw-feature { cursor: pointer; }
-.haw-feature rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; }
+.haw-feature rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; }
.haw-feature:hover rect { stroke-width: 2; }
.haw-feature text { font-size: 14px; font-weight: 600; }
.haw-feature .haw-feature-title { font-size: 14px; font-weight: 700; }
.haw-feature .haw-feature-sub { font-size: 11px; font-weight: 500; fill: var(--color-text-secondary); }
.haw-bullet { fill: none; stroke-width: 2; }
-.haw-feature-query rect { stroke: #93C5FD; }
-.haw-feature-query .haw-feature-title { fill: #0066CC; }
-.haw-feature-query .haw-bullet { stroke: #0066CC; }
-.haw-feature-query:hover rect { stroke: #0066CC; }
+.haw-feature-query rect { stroke: var(--c-blue-soft); }
+.haw-feature-query .haw-feature-title { fill: var(--c-blue); }
+.haw-feature-query .haw-bullet { stroke: var(--c-blue); }
+.haw-feature-query:hover rect { stroke: var(--c-blue); }
-.haw-feature-http rect { stroke: #6EE7B7; }
-.haw-feature-http .haw-feature-title { fill: #10B981; }
-.haw-feature-http .haw-bullet { stroke: #10B981; }
-.haw-feature-http:hover rect { stroke: #10B981; }
+.haw-feature-http rect { stroke: var(--c-green-soft); }
+.haw-feature-http .haw-feature-title { fill: var(--c-green); }
+.haw-feature-http .haw-bullet { stroke: var(--c-green); }
+.haw-feature-http:hover rect { stroke: var(--c-green); }
-.haw-feature-acid rect { stroke: #C4B5FD; } .haw-feature-acid text { fill: #7C3AED; } .haw-feature-acid:hover rect { stroke: #7C3AED; }
-.haw-feature-ha rect { stroke: #6EE7B7; } .haw-feature-ha text { fill: #10B981; } .haw-feature-ha:hover rect { stroke: #10B981; }
-.haw-feature-security rect { stroke: #FCD34D; } .haw-feature-security text { fill: #F59E0B; } .haw-feature-security:hover rect { stroke: #F59E0B; }
-.haw-feature-indexing rect { stroke: #FCA5A5; } .haw-feature-indexing text { fill: #EF4444; } .haw-feature-indexing:hover rect { stroke: #EF4444; }
-.haw-feature-schema rect { stroke: #93C5FD; } .haw-feature-schema text { fill: #0066CC; } .haw-feature-schema:hover rect { stroke: #0066CC; }
-.haw-feature-clustering rect { stroke: #6EE7B7; } .haw-feature-clustering text { fill: #10B981; } .haw-feature-clustering:hover rect { stroke: #10B981; }
+.haw-feature-acid rect { stroke: var(--c-purple-soft); } .haw-feature-acid text { fill: var(--c-purple); } .haw-feature-acid:hover rect { stroke: var(--c-purple); }
+.haw-feature-ha rect { stroke: var(--c-green-soft); } .haw-feature-ha text { fill: var(--c-green); } .haw-feature-ha:hover rect { stroke: var(--c-green); }
+.haw-feature-security rect { stroke: var(--c-amber-soft); } .haw-feature-security text { fill: var(--c-amber); } .haw-feature-security:hover rect { stroke: var(--c-amber); }
+.haw-feature-indexing rect { stroke: var(--c-red-soft); } .haw-feature-indexing text { fill: var(--c-red); } .haw-feature-indexing:hover rect { stroke: var(--c-red); }
+.haw-feature-schema rect { stroke: var(--c-blue-soft); } .haw-feature-schema text { fill: var(--c-blue); } .haw-feature-schema:hover rect { stroke: var(--c-blue); }
+.haw-feature-clustering rect { stroke: var(--c-green-soft); } .haw-feature-clustering text { fill: var(--c-green); } .haw-feature-clustering:hover rect { stroke: var(--c-green); }
-.haw-feature-storage rect { fill: #F0F4F8; stroke: #93C5FD; stroke-dasharray: 4 4; }
-.haw-feature-storage .haw-feature-title { fill: #0066CC; }
-.haw-feature-storage:hover rect { stroke: #0066CC; }
+.haw-feature-storage rect { fill: var(--color-bg-accent); stroke: var(--c-blue-soft); stroke-dasharray: 4 4; }
+.haw-feature-storage .haw-feature-title { fill: var(--c-blue); }
+.haw-feature-storage:hover rect { stroke: var(--c-blue); }
.haw-model { cursor: pointer; }
-.haw-model rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; }
-.haw-model:hover rect { stroke-width: 2; fill: #FAFBFC; }
+.haw-model rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; }
+.haw-model:hover rect { stroke-width: 2; fill: var(--color-surface); }
.haw-model .haw-model-title { font-size: 18px; font-weight: 700; }
.haw-model .haw-model-sub { font-size: 12px; fill: var(--color-text-secondary); }
.haw-model .haw-model-icon { font-size: 16px; font-weight: 600; }
-.haw-model-graph .haw-model-title { fill: #0066CC; }
-.haw-model-graph circle, .haw-model-graph line { stroke: #0066CC; fill: #0066CC; }
+.haw-model-graph .haw-model-title { fill: var(--c-blue); }
+.haw-model-graph circle, .haw-model-graph line { stroke: var(--c-blue); fill: var(--c-blue); }
.haw-model-graph circle[fill="none"] { fill: none; }
-.haw-model-graph:hover rect { stroke: #0066CC; }
+.haw-model-graph:hover rect { stroke: var(--c-blue); }
-.haw-model-document .haw-model-title { fill: #10B981; }
-.haw-model-document .haw-model-icon { fill: #10B981; }
-.haw-model-document:hover rect { stroke: #10B981; }
+.haw-model-document .haw-model-title { fill: var(--c-green); }
+.haw-model-document .haw-model-icon { fill: var(--c-green); }
+.haw-model-document:hover rect { stroke: var(--c-green); }
-.haw-model-kv .haw-model-title { fill: #7C3AED; }
-.haw-model-kv .haw-model-icon { fill: #7C3AED; }
-.haw-model-kv:hover rect { stroke: #7C3AED; }
+.haw-model-kv .haw-model-title { fill: var(--c-purple); }
+.haw-model-kv .haw-model-icon { fill: var(--c-purple); }
+.haw-model-kv:hover rect { stroke: var(--c-purple); }
-.haw-model-fts .haw-model-title { fill: #F59E0B; }
-.haw-model-fts circle, .haw-model-fts line { stroke: #F59E0B; }
-.haw-model-fts:hover rect { stroke: #F59E0B; }
+.haw-model-fts .haw-model-title { fill: var(--c-amber); }
+.haw-model-fts circle, .haw-model-fts line { stroke: var(--c-amber); }
+.haw-model-fts:hover rect { stroke: var(--c-amber); }
-.haw-model-vector .haw-model-title { fill: #EF4444; }
-.haw-model-vector:hover rect { stroke: #EF4444; }
+.haw-model-vector .haw-model-title { fill: var(--c-red); }
+.haw-model-vector:hover rect { stroke: var(--c-red); }
-.haw-model-ts .haw-model-title { fill: #10B981; }
-.haw-model-ts polyline { stroke: #10B981; }
-.haw-model-ts:hover rect { stroke: #10B981; }
+.haw-model-ts .haw-model-title { fill: var(--c-green); }
+.haw-model-ts polyline { stroke: var(--c-green); }
+.haw-model-ts:hover rect { stroke: var(--c-green); }
/* Connectors and animated dot pulses */
.haw-conn { stroke-width: 2; fill: none; stroke-linecap: round; }
-.haw-conn-http { stroke: #0066CC; }
-.haw-conn-json { stroke: #10B981; stroke-dasharray: 5 5; }
-.haw-conn-pg { stroke: #7C3AED; opacity: 0.6; }
-.haw-conn-rm { stroke: #EF4444; opacity: 0.6; }
-.haw-conn-graph { stroke: #0066CC; opacity: 0.7; }
-.haw-conn-document { stroke: #10B981; opacity: 0.7; }
-.haw-conn-kv { stroke: #7C3AED; opacity: 0.7; }
-.haw-conn-fts { stroke: #F59E0B; opacity: 0.7; }
-.haw-conn-vector { stroke: #EF4444; opacity: 0.7; }
-.haw-conn-ts { stroke: #10B981; opacity: 0.7; }
-
-.haw-dot { stroke: #fff; stroke-width: 1; }
-.haw-dot-http { fill: #0066CC; }
-.haw-dot-json { fill: #10B981; }
-.haw-dot-pg { fill: #7C3AED; }
-.haw-dot-rm { fill: #EF4444; }
-.haw-dot-graph { fill: #0066CC; }
-.haw-dot-document { fill: #10B981; }
-.haw-dot-kv { fill: #7C3AED; }
-.haw-dot-fts { fill: #F59E0B; }
-.haw-dot-vector { fill: #EF4444; }
-.haw-dot-ts { fill: #10B981; }
+.haw-conn-http { stroke: var(--c-blue); }
+.haw-conn-json { stroke: var(--c-green); stroke-dasharray: 5 5; }
+.haw-conn-pg { stroke: var(--c-purple); opacity: 0.6; }
+.haw-conn-rm { stroke: var(--c-red); opacity: 0.6; }
+.haw-conn-graph { stroke: var(--c-blue); opacity: 0.7; }
+.haw-conn-document { stroke: var(--c-green); opacity: 0.7; }
+.haw-conn-kv { stroke: var(--c-purple); opacity: 0.7; }
+.haw-conn-fts { stroke: var(--c-amber); opacity: 0.7; }
+.haw-conn-vector { stroke: var(--c-red); opacity: 0.7; }
+.haw-conn-ts { stroke: var(--c-green); opacity: 0.7; }
+
+.haw-dot { stroke: var(--color-card); stroke-width: 1; }
+.haw-dot-http { fill: var(--c-blue); }
+.haw-dot-json { fill: var(--c-green); }
+.haw-dot-pg { fill: var(--c-purple); }
+.haw-dot-rm { fill: var(--c-red); }
+.haw-dot-graph { fill: var(--c-blue); }
+.haw-dot-document { fill: var(--c-green); }
+.haw-dot-kv { fill: var(--c-purple); }
+.haw-dot-fts { fill: var(--c-amber); }
+.haw-dot-vector { fill: var(--c-red); }
+.haw-dot-ts { fill: var(--c-green); }
.haw-conn-label { font-size: 11px; fill: var(--color-text-secondary); font-weight: 500; }
@@ -672,88 +831,88 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
.ppd-caption { font-size: 17px; fill: var(--color-text-secondary); font-style: italic; }
.ppd-divider { stroke: var(--color-border-light); stroke-width: 1; stroke-dasharray: 4 6; }
-.ppd-app rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; }
+.ppd-app rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; }
.ppd-app-title { font-size: 22px; font-weight: 700; }
.ppd-app-sub { font-size: 16px; fill: var(--color-text-secondary); }
-.ppd-db rect { fill: #fff; stroke-width: 1.5; }
+.ppd-db rect { fill: var(--color-card); stroke-width: 1.5; }
.ppd-db text { font-size: 20px; font-weight: 600; }
-.ppd-db-pg rect { stroke: #93C5FD; }
-.ppd-db-pg text { fill: #0066CC; }
-.ppd-db-mongo rect { stroke: #84CC16; }
-.ppd-db-mongo text { fill: #65A30D; }
-.ppd-db-neo4j rect { stroke: #C4B5FD; }
-.ppd-db-neo4j text { fill: #7C3AED; }
+.ppd-db-pg rect { stroke: var(--c-blue-soft); }
+.ppd-db-pg text { fill: var(--c-blue); }
+.ppd-db-mongo rect { stroke: var(--c-lime-bright); }
+.ppd-db-mongo text { fill: var(--c-lime); }
+.ppd-db-neo4j rect { stroke: var(--c-purple-soft); }
+.ppd-db-neo4j text { fill: var(--c-purple); }
.ppd-latency { font-size: 18px; font-weight: 600; fill: var(--color-text-secondary); }
/* Sequence-diagram classes for the polyglot panel:
actor heads, vertical lifelines below them, and message labels
that sit above (request) or below (response) each horizontal arrow. */
-.ppd-actor rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; }
+.ppd-actor rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; }
.ppd-actor-title { font-size: 21px; font-weight: 700; fill: var(--color-text-primary); }
-.ppd-actor-pg rect { stroke: #93C5FD; } .ppd-actor-pg .ppd-actor-title { fill: #0066CC; }
-.ppd-actor-mongo rect { stroke: #84CC16; } .ppd-actor-mongo .ppd-actor-title { fill: #65A30D; }
-.ppd-actor-neo4j rect { stroke: #C4B5FD; } .ppd-actor-neo4j .ppd-actor-title { fill: #7C3AED; }
+.ppd-actor-pg rect { stroke: var(--c-blue-soft); } .ppd-actor-pg .ppd-actor-title { fill: var(--c-blue); }
+.ppd-actor-mongo rect { stroke: var(--c-lime-bright); } .ppd-actor-mongo .ppd-actor-title { fill: var(--c-lime); }
+.ppd-actor-neo4j rect { stroke: var(--c-purple-soft); } .ppd-actor-neo4j .ppd-actor-title { fill: var(--c-purple); }
.ppd-lifeline { stroke: var(--color-text-secondary); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.4; fill: none; }
-.ppd-lifeline-pg { stroke: #93C5FD; opacity: 0.55; }
-.ppd-lifeline-mongo { stroke: #84CC16; opacity: 0.55; }
-.ppd-lifeline-neo4j { stroke: #C4B5FD; opacity: 0.55; }
+.ppd-lifeline-pg { stroke: var(--c-blue-soft); opacity: 0.55; }
+.ppd-lifeline-mongo { stroke: var(--c-lime-bright); opacity: 0.55; }
+.ppd-lifeline-neo4j { stroke: var(--c-purple-soft); opacity: 0.55; }
.ppd-msg-label { font-size: 16px; fill: var(--color-text-secondary); font-style: italic; }
.ppd-msg-latency { font-style: normal; font-weight: 700; fill: var(--color-text-primary); }
-.ppd-arcade rect { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; }
+.ppd-arcade rect { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; }
.ppd-arcade-title { font-size: 26px; font-weight: 700; fill: var(--color-primary); }
.ppd-arcade-sub { font-size: 16px; fill: var(--color-text-secondary); }
/* The big ArcadeDB engine box that holds the internal model boxes
and their bouncing-data animation. */
-.ppd-arcade-engine rect:first-of-type { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; }
+.ppd-arcade-engine rect:first-of-type { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; }
.ppd-engine-label { font-size: 17px; font-weight: 600; fill: var(--color-text-secondary); letter-spacing: 0.02em; }
/* Internal model boxes inside the ArcadeDB engine. */
-.ppd-model rect { fill: #fff; stroke-width: 1.5; }
+.ppd-model rect { fill: var(--color-card); stroke-width: 1.5; }
.ppd-model .ppd-model-title { font-size: 19px; font-weight: 700; }
.ppd-model .ppd-model-sub { font-size: 14px; fill: var(--color-text-secondary); font-style: italic; }
-.ppd-model-graph rect { stroke: #93C5FD; } .ppd-model-graph .ppd-model-title { fill: #0066CC; }
-.ppd-model-document rect { stroke: #6EE7B7; } .ppd-model-document .ppd-model-title { fill: #10B981; }
-.ppd-model-vector rect { stroke: #FCA5A5; } .ppd-model-vector .ppd-model-title { fill: #EF4444; }
-.ppd-model-kv rect { stroke: #C4B5FD; } .ppd-model-kv .ppd-model-title { fill: #7C3AED; }
-.ppd-model-ts rect { stroke: #6EE7B7; } .ppd-model-ts .ppd-model-title { fill: #047857; }
-.ppd-model-fts rect { stroke: #FCD34D; } .ppd-model-fts .ppd-model-title { fill: #F59E0B; }
+.ppd-model-graph rect { stroke: var(--c-blue-soft); } .ppd-model-graph .ppd-model-title { fill: var(--c-blue); }
+.ppd-model-document rect { stroke: var(--c-green-soft); } .ppd-model-document .ppd-model-title { fill: var(--c-green); }
+.ppd-model-vector rect { stroke: var(--c-red-soft); } .ppd-model-vector .ppd-model-title { fill: var(--c-red); }
+.ppd-model-kv rect { stroke: var(--c-purple-soft); } .ppd-model-kv .ppd-model-title { fill: var(--c-purple); }
+.ppd-model-ts rect { stroke: var(--c-green-soft); } .ppd-model-ts .ppd-model-title { fill: var(--c-green-text); }
+.ppd-model-fts rect { stroke: var(--c-amber-soft); } .ppd-model-fts .ppd-model-title { fill: var(--c-amber); }
/* Internal connectors between model boxes — dashed and faint so the
data dots stand out as they hop between models. */
.ppd-conn-int { stroke: var(--color-text-secondary); stroke-width: 1.5; fill: none; opacity: 0.45; stroke-dasharray: 3 3; }
/* Per-model dot colours for the internal bounce animation. */
-.ppd-dot-graph { fill: #0066CC; stroke: #fff; stroke-width: 1; }
-.ppd-dot-document { fill: #10B981; stroke: #fff; stroke-width: 1; }
-.ppd-dot-vector { fill: #EF4444; stroke: #fff; stroke-width: 1; }
-.ppd-dot-kv { fill: #7C3AED; stroke: #fff; stroke-width: 1; }
-.ppd-dot-ts { fill: #047857; stroke: #fff; stroke-width: 1; }
-.ppd-dot-fts { fill: #F59E0B; stroke: #fff; stroke-width: 1; }
+.ppd-dot-graph { fill: var(--c-blue); stroke: var(--color-card); stroke-width: 1; }
+.ppd-dot-document { fill: var(--c-green); stroke: var(--color-card); stroke-width: 1; }
+.ppd-dot-vector { fill: var(--c-red); stroke: var(--color-card); stroke-width: 1; }
+.ppd-dot-kv { fill: var(--c-purple); stroke: var(--color-card); stroke-width: 1; }
+.ppd-dot-ts { fill: var(--c-green-text); stroke: var(--color-card); stroke-width: 1; }
+.ppd-dot-fts { fill: var(--c-amber); stroke: var(--color-card); stroke-width: 1; }
.ppd-conn { stroke-width: 2; fill: none; stroke-linecap: round; }
.ppd-conn-back { stroke-dasharray: 5 5; opacity: 0.7; }
-.ppd-conn-pg { stroke: #0066CC; opacity: 0.55; }
-.ppd-conn-mongo { stroke: #65A30D; opacity: 0.55; }
-.ppd-conn-neo4j { stroke: #7C3AED; opacity: 0.55; }
-.ppd-conn-arcade { stroke: #0066CC; opacity: 0.7; }
+.ppd-conn-pg { stroke: var(--c-blue); opacity: 0.55; }
+.ppd-conn-mongo { stroke: var(--c-lime); opacity: 0.55; }
+.ppd-conn-neo4j { stroke: var(--c-purple); opacity: 0.55; }
+.ppd-conn-arcade { stroke: var(--c-blue); opacity: 0.7; }
-.ppd-dot { stroke: #fff; stroke-width: 1; }
-.ppd-dot-pg { fill: #0066CC; }
-.ppd-dot-mongo { fill: #65A30D; }
-.ppd-dot-neo4j { fill: #7C3AED; }
-.ppd-dot-arcade { fill: #0066CC; }
+.ppd-dot { stroke: var(--color-card); stroke-width: 1; }
+.ppd-dot-pg { fill: var(--c-blue); }
+.ppd-dot-mongo { fill: var(--c-lime); }
+.ppd-dot-neo4j { fill: var(--c-purple); }
+.ppd-dot-arcade { fill: var(--c-blue); }
.ppd-total rect { stroke-width: 1.5; }
.ppd-total text { font-size: 19px; font-weight: 700; }
-.ppd-total-bad rect { fill: rgba(239, 68, 68, 0.08); stroke: #EF4444; }
-.ppd-total-bad text { fill: #B91C1C; }
-.ppd-total-good rect { fill: rgba(16, 185, 129, 0.08); stroke: #10B981; }
-.ppd-total-good text { fill: #047857; }
+.ppd-total-bad rect { fill: rgba(239, 68, 68, 0.08); stroke: var(--c-red); }
+.ppd-total-bad text { fill: var(--c-red-text); }
+.ppd-total-good rect { fill: rgba(16, 185, 129, 0.08); stroke: var(--c-green); }
+.ppd-total-good text { fill: var(--c-green-text); }
@media (max-width: 700px) {
.ppd-svg { display: none; }
@@ -780,15 +939,15 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
position: relative;
top: -0.15em;
}
-.fn-badge-graph { background: rgba(0, 102, 204, 0.10); color: #0066CC; border-color: rgba(0, 102, 204, 0.25); }
-.fn-badge-math { background: rgba(124, 58, 237, 0.10); color: #7C3AED; border-color: rgba(124, 58, 237, 0.25); }
-.fn-badge-collections { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.30); }
-.fn-badge-geo { background: rgba(13, 148, 136, 0.12); color: #0F766E; border-color: rgba(13, 148, 136, 0.30); }
-.fn-badge-vector { background: rgba(217, 70, 239, 0.10); color: #A21CAF; border-color: rgba(217, 70, 239, 0.25); }
-.fn-badge-text { background: rgba(245, 158, 11, 0.12); color: #B45309; border-color: rgba(245, 158, 11, 0.30); }
-.fn-badge-date { background: rgba(59, 130, 246, 0.10); color: #1D4ED8; border-color: rgba(59, 130, 246, 0.25); }
-.fn-badge-search { background: rgba(236, 72, 153, 0.10); color: #BE185D; border-color: rgba(236, 72, 153, 0.25); }
-.fn-badge-misc { background: rgba(107, 114, 128, 0.12); color: #4B5563; border-color: rgba(107, 114, 128, 0.30); }
+.fn-badge-graph { background: rgba(0, 102, 204, 0.10); color: var(--c-blue); border-color: rgba(0, 102, 204, 0.25); }
+.fn-badge-math { background: rgba(124, 58, 237, 0.10); color: var(--c-purple); border-color: rgba(124, 58, 237, 0.25); }
+.fn-badge-collections { background: rgba(16, 185, 129, 0.12); color: var(--c-green-text); border-color: rgba(16, 185, 129, 0.30); }
+.fn-badge-geo { background: rgba(13, 148, 136, 0.12); color: var(--c-teal-text); border-color: rgba(13, 148, 136, 0.30); }
+.fn-badge-vector { background: rgba(217, 70, 239, 0.10); color: var(--c-fuchsia-text); border-color: rgba(217, 70, 239, 0.25); }
+.fn-badge-text { background: rgba(245, 158, 11, 0.12); color: var(--c-amber-text); border-color: rgba(245, 158, 11, 0.30); }
+.fn-badge-date { background: rgba(59, 130, 246, 0.10); color: var(--c-indigo-text); border-color: rgba(59, 130, 246, 0.25); }
+.fn-badge-search { background: rgba(236, 72, 153, 0.10); color: var(--c-pink-text); border-color: rgba(236, 72, 153, 0.25); }
+.fn-badge-misc { background: rgba(107, 114, 128, 0.12); color: var(--c-gray-text); border-color: rgba(107, 114, 128, 0.30); }
/* Bucket-selection-strategy diagram (concepts/basics page).
Three stacked panels animating round-robin, thread, and partitioned
@@ -812,30 +971,30 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
.bss-section-sub { font-size: 21px; fill: var(--color-text-secondary); font-style: italic; }
.bss-divider { stroke: var(--color-border-light); stroke-width: 1; stroke-dasharray: 4 6; }
-.bss-producer rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; }
+.bss-producer rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; }
.bss-producer-title { font-size: 21px; font-weight: 600; fill: var(--color-text-secondary); letter-spacing: 0.04em; }
-.bss-record rect { fill: #fff; stroke-width: 1.5; }
+.bss-record rect { fill: var(--color-card); stroke-width: 1.5; }
.bss-record text { font-size: 20px; font-weight: 600; fill: var(--color-text-primary); }
-.bss-bucket rect { fill: #fff; stroke-width: 1.5; }
+.bss-bucket rect { fill: var(--color-card); stroke-width: 1.5; }
.bss-bucket-title { font-size: 20px; font-weight: 700; }
.bss-bucket-sub { font-size: 17px; fill: var(--color-text-secondary); }
-.bss-bucket-0 rect { stroke: #93C5FD; } .bss-bucket-0 .bss-bucket-title { fill: #0066CC; }
-.bss-bucket-1 rect { stroke: #C4B5FD; } .bss-bucket-1 .bss-bucket-title { fill: #7C3AED; }
-.bss-bucket-2 rect { stroke: #6EE7B7; } .bss-bucket-2 .bss-bucket-title { fill: #047857; }
+.bss-bucket-0 rect { stroke: var(--c-blue-soft); } .bss-bucket-0 .bss-bucket-title { fill: var(--c-blue); }
+.bss-bucket-1 rect { stroke: var(--c-purple-soft); } .bss-bucket-1 .bss-bucket-title { fill: var(--c-purple); }
+.bss-bucket-2 rect { stroke: var(--c-green-soft); } .bss-bucket-2 .bss-bucket-title { fill: var(--c-green-text); }
.bss-conn { stroke: var(--color-text-secondary); stroke-width: 1.5; fill: none; opacity: 0.35; stroke-dasharray: 4 4; stroke-linecap: round; }
-.bss-conn-0 { stroke: #93C5FD; opacity: 0.55; }
-.bss-conn-1 { stroke: #C4B5FD; opacity: 0.55; }
-.bss-conn-2 { stroke: #6EE7B7; opacity: 0.55; }
+.bss-conn-0 { stroke: var(--c-blue-soft); opacity: 0.55; }
+.bss-conn-1 { stroke: var(--c-purple-soft); opacity: 0.55; }
+.bss-conn-2 { stroke: var(--c-green-soft); opacity: 0.55; }
-.bss-dot { stroke: #fff; stroke-width: 1; }
-.bss-dot-0 { fill: #0066CC; }
-.bss-dot-1 { fill: #7C3AED; }
-.bss-dot-2 { fill: #10B981; }
+.bss-dot { stroke: var(--color-card); stroke-width: 1; }
+.bss-dot-0 { fill: var(--c-blue); }
+.bss-dot-1 { fill: var(--c-purple); }
+.bss-dot-2 { fill: var(--c-green); }
-.bss-hash rect { fill: #FAFBFC; stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 5 4; }
+.bss-hash rect { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bss-hash-title { font-size: 20px; font-weight: 700; fill: var(--color-primary); font-family: var(--font-code); }
.bss-thread-label { font-size: 18px; font-weight: 700; fill: var(--color-text-secondary); letter-spacing: 0.05em; }
@@ -872,28 +1031,28 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
.rel-field-link { fill: var(--color-primary); font-weight: 700; }
.rel-field-note { font-size: 15px; fill: var(--color-text-secondary); font-style: italic; }
-.rel-vertex circle, .rel-record rect, .rel-edge rect { fill: #fff; stroke-width: 1.5; }
-.rel-vertex-a circle { stroke: #93C5FD; }
-.rel-vertex-a .rel-node-title { fill: #0066CC; }
-.rel-vertex-b circle { stroke: #6EE7B7; }
-.rel-vertex-b .rel-node-title { fill: #047857; }
-.rel-edge-x rect { stroke: #FCD34D; fill: #FFFBEB; }
-.rel-edge-x .rel-node-title { fill: #B45309; }
+.rel-vertex circle, .rel-record rect, .rel-edge rect { fill: var(--color-card); stroke-width: 1.5; }
+.rel-vertex-a circle { stroke: var(--c-blue-soft); }
+.rel-vertex-a .rel-node-title { fill: var(--c-blue); }
+.rel-vertex-b circle { stroke: var(--c-green-soft); }
+.rel-vertex-b .rel-node-title { fill: var(--c-green-text); }
+.rel-edge-x rect { stroke: var(--c-amber-soft); fill: var(--c-amber-bg); }
+.rel-edge-x .rel-node-title { fill: var(--c-amber-text); }
-.rel-record-a rect { stroke: #93C5FD; }
-.rel-record-a .rel-node-title { fill: #0066CC; }
-.rel-record-b rect { stroke: #C4B5FD; }
-.rel-record-b .rel-node-title { fill: #7C3AED; }
+.rel-record-a rect { stroke: var(--c-blue-soft); }
+.rel-record-a .rel-node-title { fill: var(--c-blue); }
+.rel-record-b rect { stroke: var(--c-purple-soft); }
+.rel-record-b .rel-node-title { fill: var(--c-purple); }
-.rel-record-container rect { stroke: #93C5FD; fill: #F7FAFE; }
-.rel-record-container .rel-node-title { fill: #0066CC; }
-.rel-record-embedded rect { stroke: #6EE7B7; fill: #fff; }
-.rel-record-embedded .rel-node-title-sm { fill: #047857; }
+.rel-record-container rect { stroke: var(--c-blue-soft); fill: var(--c-blue-bg); }
+.rel-record-container .rel-node-title { fill: var(--c-blue); }
+.rel-record-embedded rect { stroke: var(--c-green-soft); fill: var(--color-card); }
+.rel-record-embedded .rel-node-title-sm { fill: var(--c-green-text); }
.rel-conn { stroke: var(--color-text-secondary); stroke-width: 2; fill: none; stroke-linecap: round; }
-.rel-conn-ref { stroke: #0066CC; }
+.rel-conn-ref { stroke: var(--c-blue); }
#rel-arrow-graph .rel-arrowhead { fill: var(--color-text-secondary); }
-#rel-arrow-ref .rel-arrowhead { fill: #0066CC; }
+#rel-arrow-ref .rel-arrowhead { fill: var(--c-blue); }
.rel-edge-label { font-size: 18px; font-weight: 700; fill: var(--color-text-primary); }
.rel-edge-sub { font-size: 16px; fill: var(--color-text-secondary); font-family: var(--font-code); }
@@ -917,18 +1076,18 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
}
.dgm-svg text { fill: var(--color-text-primary); }
-.dgm-box rect, .dgm-circle circle { fill: #fff; stroke-width: 1.5; }
+.dgm-box rect, .dgm-circle circle { fill: var(--color-card); stroke-width: 1.5; }
.dgm-title { font-size: 20px; font-weight: 700; }
.dgm-sub { font-size: 17px; fill: var(--color-text-secondary); }
-.dgm-box-blue rect, .dgm-circle-blue circle { stroke: #93C5FD; }
-.dgm-box-blue .dgm-title, .dgm-circle-blue .dgm-title { fill: #0066CC; }
-.dgm-box-purple rect, .dgm-circle-purple circle { stroke: #C4B5FD; }
-.dgm-box-purple .dgm-title, .dgm-circle-purple .dgm-title { fill: #7C3AED; }
-.dgm-box-green rect, .dgm-circle-green circle { stroke: #6EE7B7; }
-.dgm-box-green .dgm-title, .dgm-circle-green .dgm-title { fill: #047857; }
-.dgm-box-yellow rect, .dgm-circle-yellow circle { stroke: #FCD34D; fill: #FFFBEB; }
-.dgm-box-yellow .dgm-title, .dgm-circle-yellow .dgm-title { fill: #B45309; }
+.dgm-box-blue rect, .dgm-circle-blue circle { stroke: var(--c-blue-soft); }
+.dgm-box-blue .dgm-title, .dgm-circle-blue .dgm-title { fill: var(--c-blue); }
+.dgm-box-purple rect, .dgm-circle-purple circle { stroke: var(--c-purple-soft); }
+.dgm-box-purple .dgm-title, .dgm-circle-purple .dgm-title { fill: var(--c-purple); }
+.dgm-box-green rect, .dgm-circle-green circle { stroke: var(--c-green-soft); }
+.dgm-box-green .dgm-title, .dgm-circle-green .dgm-title { fill: var(--c-green-text); }
+.dgm-box-yellow rect, .dgm-circle-yellow circle { stroke: var(--c-amber-soft); fill: var(--c-amber-bg); }
+.dgm-box-yellow .dgm-title, .dgm-circle-yellow .dgm-title { fill: var(--c-amber-text); }
.dgm-box-gray rect, .dgm-circle-gray circle { stroke: var(--color-border); }
.dgm-box-gray .dgm-title, .dgm-circle-gray .dgm-title { fill: var(--color-text-primary); }
.dgm-box-dashed rect { stroke-dasharray: 5 4; }
@@ -974,7 +1133,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
.tutorial-card {
display: flex;
flex-direction: column;
- background: #fff;
+ background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 20px 18px;
@@ -1025,7 +1184,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
display: flex;
flex-direction: column;
position: relative;
- background: #fff;
+ background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 22px 20px 18px;
@@ -1087,7 +1246,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
.usecase-card {
display: flex;
flex-direction: column;
- background: #fff;
+ background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 22px 20px;
@@ -1151,7 +1310,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
transition: background 0.15s ease, border-color 0.15s ease;
}
.resource-card:hover {
- background: #fff;
+ background: var(--color-card);
border-color: var(--color-primary);
}
.resource-card h3 {
@@ -1178,7 +1337,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
.chapter-card {
display: block;
padding: 14px 16px;
- background: #fff;
+ background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 8px;
text-decoration: none !important;
@@ -1244,43 +1403,189 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v
.obs-svg text { fill: var(--color-text-primary); }
/* Request-path pill */
-.obs-path rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; }
+.obs-path rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; }
.obs-path-label { font-size: 20px; font-weight: 700; fill: var(--color-text-secondary); font-family: var(--font-code); }
/* The single Observation source box (ArcadeDB-branded path) */
-.obs-source rect { fill: #FAFBFC; stroke: var(--color-primary); stroke-width: 1.5; }
+.obs-source rect { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; }
.obs-source-title { font-size: 21px; font-weight: 700; fill: var(--color-primary); }
.obs-source-sub { font-size: 17px; fill: var(--color-text-secondary); }
/* The three sinks — colour-coded per output */
-.obs-sink rect { fill: #fff; stroke-width: 1.5; }
+.obs-sink rect { fill: var(--color-card); stroke-width: 1.5; }
.obs-sink-title { font-size: 21px; font-weight: 700; }
.obs-sink-sub { font-size: 17px; fill: var(--color-text-secondary); }
-.obs-sink-timer rect { stroke: #93C5FD; } .obs-sink-timer .obs-sink-title { fill: #0066CC; }
-.obs-sink-span rect { stroke: #C4B5FD; } .obs-sink-span .obs-sink-title { fill: #7C3AED; }
-.obs-sink-log rect { stroke: #6EE7B7; } .obs-sink-log .obs-sink-title { fill: #047857; }
+.obs-sink-timer rect { stroke: var(--c-blue-soft); } .obs-sink-timer .obs-sink-title { fill: var(--c-blue); }
+.obs-sink-span rect { stroke: var(--c-purple-soft); } .obs-sink-span .obs-sink-title { fill: var(--c-purple); }
+.obs-sink-log rect { stroke: var(--c-green-soft); } .obs-sink-log .obs-sink-title { fill: var(--c-green-text); }
/* Collector and pull/log targets */
-.obs-collector rect { fill: #FAFBFC; stroke: var(--color-text-secondary); stroke-width: 1.5; }
+.obs-collector rect { fill: var(--color-surface); stroke: var(--color-text-secondary); stroke-width: 1.5; }
.obs-collector-title { font-size: 19px; font-weight: 700; fill: var(--color-text-primary); }
.obs-collector-sub { font-size: 16px; fill: var(--color-text-secondary); font-style: italic; }
-.obs-target rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; }
+.obs-target rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; }
.obs-target-title { font-size: 18px; font-weight: 700; fill: var(--color-text-secondary); }
.obs-target-sub { font-size: 15px; fill: var(--color-text-secondary); }
/* Connectors and dots */
.obs-conn { stroke: var(--color-text-secondary); stroke-width: 2; fill: none; opacity: 0.45; stroke-linecap: round; }
-.obs-conn-timer { stroke: #93C5FD; }
-.obs-conn-span { stroke: #C4B5FD; }
-.obs-conn-log { stroke: #6EE7B7; }
+.obs-conn-timer { stroke: var(--c-blue-soft); }
+.obs-conn-span { stroke: var(--c-purple-soft); }
+.obs-conn-log { stroke: var(--c-green-soft); }
.obs-conn-pull { stroke-dasharray: 4 4; }
-.obs-arrowhead-pull { fill: #0066CC; }
+.obs-arrowhead-pull { fill: var(--c-blue); }
-.obs-dot { stroke: #fff; stroke-width: 1; }
-.obs-dot-timer { fill: #0066CC; }
-.obs-dot-span { fill: #7C3AED; }
-.obs-dot-log { fill: #10B981; }
+.obs-dot { stroke: var(--color-card); stroke-width: 1; }
+.obs-dot-timer { fill: var(--c-blue); }
+.obs-dot-span { fill: var(--c-purple); }
+.obs-dot-log { fill: var(--c-green); }
@media (max-width: 700px) {
.obs-svg { display: none; }
}
+
+/* ============================================================
+ Theme and accessibility layer.
+ The tokens in :root above carry every colour; the dark values live
+ in the two dark blocks next to them. The rules below point the
+ default UI's hard-coded colours (site.css) at those tokens, so a
+ theme change needs no per-component code. The theme toggle
+ (js/theme-toggle.js) sets data-theme on .
+ ============================================================ */
+html { background: var(--color-bg); scrollbar-color: var(--color-scrollbar) var(--color-bg-secondary); }
+body { background: var(--color-bg); }
+body * { scrollbar-color: var(--color-scrollbar) transparent; }
+html::-webkit-scrollbar { background-color: var(--color-bg-secondary); }
+::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar); }
+
+/* Navbar and the phone menu */
+.navbar-burger span { background-color: var(--color-text-primary); }
+.navbar-menu { background: var(--color-bg); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); }
+.navbar-dropdown { background: var(--color-bg); border-color: var(--color-border); }
+.navbar-menu .navbar-link:hover, .navbar-menu a.navbar-item:hover,
+.navbar-dropdown a.navbar-item:hover { background: var(--color-bg-secondary); }
+
+/* Left navigation */
+.nav { box-shadow: none; }
+.nav-menu h3.title { color: var(--color-text-primary); }
+.nav-panel-explore { background: var(--color-surface); }
+.nav-panel-explore .context { color: var(--color-text-secondary); box-shadow: 0 -1px 0 var(--color-border); }
+.nav-panel-explore .components { background: var(--color-bg-secondary); box-shadow: inset 0 1px 5px var(--color-border); }
+.nav-panel-explore .component .version a { background: var(--color-border); color: var(--color-text-primary); opacity: 1; }
+.nav-panel-explore .component .is-current a { background: var(--color-primary); color: var(--color-on-primary); }
+.toolbar { box-shadow: 0 1px 0 var(--color-border); }
+.toolbar .edit-this-page a, .page-versions .version.is-missing { color: var(--color-text-secondary); }
+
+/* Right-hand "On this page" */
+.toc-menu, .toc .toc-menu h3 { color: var(--color-text-secondary); }
+.toc .toc-menu h3 { color: var(--color-text-primary); }
+.toc .toc-menu a { border-left-color: var(--color-border); }
+.toc .toc-menu a:hover { color: var(--color-primary); }
+.toc .toc-menu a.is-active { border-left-color: var(--color-primary); color: var(--color-text-primary); }
+.sidebar.toc .toc-menu a:focus { background: var(--color-bg-secondary); }
+
+/* Page content */
+.doc a { color: var(--color-link); }
+.doc a:hover { color: var(--color-link-hover); }
+.doc a.unresolved { color: var(--color-danger); }
+.doc h1.sect0 { background: var(--color-bg-secondary); }
+.doc h2:not(.discrete) { border-bottom-color: var(--color-border); }
+.doc hr { border-color: var(--color-border); }
+.doc .colist > table code, .doc p code, .doc thead code { color: var(--color-inline-code-text); background: var(--color-inline-code-bg); }
+.doc table.tableblock, .doc table.tableblock > * > tr > * { border-color: var(--color-border); }
+.doc table.stripes-all > tbody > tr, .doc table.stripes-even > tbody > tr:nth-of-type(2n),
+.doc table.stripes-odd > tbody > tr:nth-of-type(odd), .doc table.tableblock > tfoot { background: var(--color-bg-secondary); }
+.doc .admonitionblock .title, .doc .exampleblock .title, .doc .imageblock .title, .doc .listingblock .title,
+.doc .literalblock .title, .doc .openblock .title, .doc .videoblock .title, .doc .tableblock > caption,
+.doc details.result > summary { color: var(--color-text-secondary); }
+.doc .quoteblock, .doc .verseblock { background: var(--color-bg-secondary); border-left-color: var(--color-border-strong); color: var(--color-text-secondary); }
+.doc .quoteblock .attribution { color: var(--color-text-secondary); }
+#preamble .abstract blockquote { background: var(--color-bg-secondary); border-left-color: var(--color-border); color: var(--color-text-secondary); }
+.doc details.result > .content { background: var(--color-card); border-color: var(--color-border-strong); }
+.doc kbd { background: var(--color-bg-secondary); border-color: var(--color-border-strong); color: var(--color-text-primary);
+ box-shadow: 0 1px 0 var(--color-border-strong), 0 0 0 0.1em var(--color-card) inset; }
+nav.pagination { border-top-color: var(--color-border); }
+nav.pagination span::before, nav.pagination a::before, nav.pagination a::after { color: var(--color-text-secondary); }
+nav.pagination a { color: var(--color-link); }
+nav.pagination a:hover { color: var(--color-link-hover); }
+footer.footer { background: none; border-top-color: var(--color-border); color: var(--color-text-secondary); }
+.footer a { color: var(--color-text-primary); }
+
+/* Search: the field and its controls are UI components, so the border is the strong token (3:1). */
+.pagefind-ui__search-input { border-color: var(--color-border-strong); color: var(--color-text-primary); }
+.pagefind-ui__search-input::placeholder { color: var(--color-text-secondary); opacity: 1; }
+
+/* Images with a transparent background (diagrams exported for a white page) stay readable on the dark page. */
+:root[data-theme="dark"] .doc .imageblock img { background: #fff; border-radius: 6px; }
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) .doc .imageblock img { background: #fff; border-radius: 6px; }
+}
+
+/* Icons the default UI draws as dark SVG backgrounds (home, menu, folding) need inverting on the dark page. */
+:root[data-theme="dark"] .home-link, :root[data-theme="dark"] .nav-toggle, :root[data-theme="dark"] .nav-menu-toggle,
+:root[data-theme="dark"] .page-versions .version-menu-toggle { filter: invert(1); }
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) .home-link, :root:not([data-theme="light"]) .nav-toggle,
+ :root:not([data-theme="light"]) .nav-menu-toggle, :root:not([data-theme="light"]) .page-versions .version-menu-toggle { filter: invert(1); }
+}
+
+/* Theme toggle (partials/header-content.hbs, js/theme-toggle.js). It cycles system, light, dark. */
+.theme-toggle {
+ align-self: center;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ margin: 0 0.5rem;
+ padding: 0;
+ background: transparent;
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border-strong);
+ border-radius: 6px;
+ cursor: pointer;
+ flex: none;
+}
+.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
+.theme-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.theme-toggle .icon-light, .theme-toggle .icon-dark { display: none; }
+.theme-toggle[data-mode="light"] .icon-system, .theme-toggle[data-mode="dark"] .icon-system { display: none; }
+.theme-toggle[data-mode="light"] .icon-light, .theme-toggle[data-mode="dark"] .icon-dark { display: block; }
+
+/* Keyboard focus: one visible ring for everything focusable. The default UI removes the outline on some
+ controls (outline: none), so this is !important. Mouse clicks do not show it (:focus-visible). */
+a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible,
+textarea:focus-visible, [tabindex]:focus-visible {
+ outline: 2px solid var(--color-focus) !important;
+ outline-offset: 2px !important;
+}
+
+/* Tap targets of at least 24 by 24 CSS pixels (WCAG 2.2, 2.5.8) on small and touch screens. Links inside
+ running text are exempt in the standard and are not changed. */
+@media (max-width: 768px), (pointer: coarse) {
+ .navbar-burger { min-height: 2.75rem; }
+ .navbar-end .navbar-item, .navbar-menu .navbar-item { min-height: 2.75rem; display: flex; align-items: center; }
+ .nav-link, .nav-text { display: inline-block; padding-top: 0.15rem; padding-bottom: 0.15rem; min-height: 24px; box-sizing: border-box; }
+ .nav-item-toggle { width: max(1.35em, 24px); height: max(1.35em, 24px); margin-left: max(-1.35em, -24px); background-size: 60%; }
+ .nav-tab { min-height: 24px; }
+ .home-link { width: max(1.25rem, 24px); height: max(1.25rem, 24px); margin: 0.5rem 0.625rem; }
+ .toc .toc-menu a, .crumbs a, .toolbar a, nav.pagination a { display: inline-block; min-height: 24px; box-sizing: border-box; padding-top: 0.15rem; padding-bottom: 0.15rem; }
+ .theme-toggle { width: 2.75rem; height: 2.75rem; }
+}
+
+/* On a phone the brand row (logo, search, theme toggle, menu button) must fit the screen: the search field
+ shrinks instead of pushing the buttons off the right edge. */
+@media (max-width: 768px) {
+ #search { min-width: 0; }
+ .navbar-brand .navbar-item.search { flex: 1 1 0; min-width: 0; padding: 0 0.25rem; }
+ .navbar-brand .navbar-item:first-child { padding-right: 0.5rem; }
+ .theme-toggle { margin: 0 0.25rem; }
+}
+
+/* Reduced motion: no transitions, no hover lift, no smooth scrolling. The animated dots in the inline SVG
+ diagrams are SMIL, which CSS cannot stop; js/theme-toggle.js pauses them for these readers. */
+@media (prefers-reduced-motion: reduce) {
+ html { scroll-behavior: auto; }
+ *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
+ .logo-card:hover, .tutorial-card:hover, .academy-card:hover, .usecase-card:hover { transform: none; }
+}
diff --git a/docs/ui/supplemental/js/theme-toggle.js b/docs/ui/supplemental/js/theme-toggle.js
new file mode 100644
index 000000000..1352b9d2c
--- /dev/null
+++ b/docs/ui/supplemental/js/theme-toggle.js
@@ -0,0 +1,71 @@
+// Theme toggle and reduced-motion handling.
+// The toggle cycles system -> light -> dark. "System" removes data-theme from , so the CSS
+// follows prefers-color-scheme; "light" and "dark" set it and are remembered in localStorage.
+// The saved value is applied before first paint by the inline script in partials/head-styles.hbs
+// (same key). localStorage can be blocked (private window, site data off): every access is guarded
+// and the toggle then works for the current page only.
+;(function () {
+ 'use strict'
+
+ var KEY = 'arcadedb-docs-theme'
+ var ORDER = ['system', 'light', 'dark']
+ var NAMES = { system: 'follows the system', light: 'light', dark: 'dark' }
+ var root = document.documentElement
+
+ function current () {
+ var t = root.getAttribute('data-theme')
+ return t === 'light' || t === 'dark' ? t : 'system'
+ }
+
+ function apply (mode, save) {
+ if (mode === 'system') root.removeAttribute('data-theme')
+ else root.setAttribute('data-theme', mode)
+ if (save) {
+ try {
+ if (mode === 'system') localStorage.removeItem(KEY)
+ else localStorage.setItem(KEY, mode)
+ } catch (e) { /* storage unavailable: the choice lasts for this page only */ }
+ }
+ }
+
+ function label (btn, mode) {
+ var next = ORDER[(ORDER.indexOf(mode) + 1) % ORDER.length]
+ btn.setAttribute('data-mode', mode)
+ btn.setAttribute('title', 'Color theme: ' + NAMES[mode])
+ btn.setAttribute('aria-label', 'Color theme: ' + NAMES[mode] + '. Activate to switch to ' + NAMES[next] + '.')
+ }
+
+ function ready (fn) {
+ if (document.readyState !== 'loading') fn()
+ else document.addEventListener('DOMContentLoaded', fn)
+ }
+
+ ready(function () {
+ var btn = document.querySelector('.theme-toggle')
+ if (btn) {
+ label(btn, current())
+ btn.addEventListener('click', function () {
+ var mode = ORDER[(ORDER.indexOf(current()) + 1) % ORDER.length]
+ apply(mode, true)
+ label(btn, mode)
+ })
+ }
+
+ // The dots that travel along the lines of the inline SVG diagrams are SMIL animations, which CSS
+ // cannot switch off. Readers who ask for reduced motion get the still diagram.
+ var rm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)')
+ function stillDiagrams () {
+ var svgs = document.querySelectorAll('svg')
+ for (var i = 0; i < svgs.length; i++) {
+ try {
+ if (rm.matches) svgs[i].pauseAnimations()
+ else svgs[i].unpauseAnimations()
+ } catch (e) {}
+ }
+ }
+ if (rm) {
+ stillDiagrams()
+ if (rm.addEventListener) rm.addEventListener('change', stillDiagrams)
+ }
+ })
+})()
diff --git a/docs/ui/supplemental/partials/footer-scripts.hbs b/docs/ui/supplemental/partials/footer-scripts.hbs
index 6929091a7..5875ef38d 100644
--- a/docs/ui/supplemental/partials/footer-scripts.hbs
+++ b/docs/ui/supplemental/partials/footer-scripts.hbs
@@ -1,6 +1,7 @@
+
diff --git a/docs/ui/supplemental/partials/header-content.hbs b/docs/ui/supplemental/partials/header-content.hbs
index 8af19649d..882f2ab02 100644
--- a/docs/ui/supplemental/partials/header-content.hbs
+++ b/docs/ui/supplemental/partials/header-content.hbs
@@ -7,6 +7,11 @@
+