@meddleware/dev 0.0.2 → 0.0.3

package/docs/.vitepress/config.ts

@@ -23,9 +23,20 @@ export default defineConfig({
     search: { provider: 'local' },
 
     nav: [
-      { text: 'Getting started', link: '/getting-started/' },
-      { text: 'Design system', link: '/design-system/' },
-      { text: 'Sui', link: '/sui/' },
+      {
+        text: 'Web',
+        items: [
+          { text: 'Getting started', link: '/getting-started/' },
+          { text: 'Design system', link: '/design-system/' },
+        ],
+      },
+      {
+        text: 'Blockchain',
+        items: [
+          { text: 'Active', items: [{ text: 'Sui', link: '/sui/' }] },
+          { text: 'Coming soon', items: [{ text: 'More blockchains', link: '/blockchain/' }] },
+        ],
+      },
       { text: 'API reference →', link: 'https://docs.meddleware.co.uk/blockchain/sui/' },
       // TODO white-label: { text: 'Operator guides', link: '/operator/' }
     ],

package/docs/.vitepress/theme/custom.css

@@ -1,63 +1,56 @@
 /*
  * Meddleware brand overrides for the VitePress default theme.
- * Brand = the functional primaries from @meddleware/design-tokens (red accent + blue), so the
- * dev docs track the apps. No gold/purple (design philosophy: primary/rainbow accents as human
- * universals, not royalty/priesthood signalling).
+ * Brand = the naturalistic triadic palette from @meddleware/design-tokens (terracotta accent,
+ * moss primary, slate secondary), so the dev docs track the apps. Breaking the red/blue binary
+ * with earth-derived colours that appear together in nature.
  */
 
 :root {
-  /* Brand = primary red (mirrors --accent in the apps). */
-  --vp-c-brand-1: var(--mw-red-500);
-  --vp-c-brand-2: var(--mw-red-300);
-  --vp-c-brand-3: var(--mw-red-300);
-  --vp-c-brand-soft: color-mix(in srgb, var(--mw-red-500) 14%, transparent);
+  /* Brand = primary terracotta (mirrors --accent in the apps). */
+  --vp-c-brand-1: var(--mw-terracotta-500);
+  --vp-c-brand-2: var(--mw-terracotta-300);
+  --vp-c-brand-3: var(--mw-terracotta-600);
+  --vp-c-brand-soft: rgba(184, 69, 39, 0.14);
 
-  /* Home hero: red → blue wash, warm (orange) glow — no gold. */
+  /* Home hero: terracotta → moss wash (earth-derived triad). */
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: linear-gradient(
-    120deg,
-    var(--mw-red-500),
-    var(--mw-blue-500)
+    135deg,
+    var(--mw-terracotta-500),
+    var(--mw-moss-500)
   );
   --vp-home-hero-image-background-image: linear-gradient(
-    120deg,
-    var(--mw-red-300),
-    var(--mw-orange-500)
+    135deg,
+    var(--mw-terracotta-300),
+    var(--mw-moss-500)
   );
   --vp-home-hero-image-filter: blur(44px);
 }
 
 .dark {
-  /* Dark mode: lightened red for legibility (mirrors --accent dark stop in tokens). */
-  --vp-c-brand-1: var(--mw-red-300);
-  --vp-c-brand-2: var(--mw-red-300);
-  --vp-c-brand-3: var(--mw-red-500);
-  --vp-c-brand-soft: color-mix(in srgb, var(--mw-red-500) 30%, transparent);
+  /* Dark mode: lightened terracotta for legibility (mirrors --accent dark stop in tokens). */
+  --vp-c-brand-1: var(--mw-terracotta-300);
+  --vp-c-brand-2: var(--mw-terracotta-500);
+  --vp-c-brand-3: var(--mw-terracotta-600);
+  --vp-c-brand-soft: rgba(224, 120, 80, 0.16);
 
   --vp-home-hero-name-background: linear-gradient(
-    120deg,
-    var(--mw-red-300),
-    var(--mw-blue-300)
+    135deg,
+    var(--mw-terracotta-300),
+    var(--mw-moss-300)
   );
   --vp-home-hero-image-background-image: linear-gradient(
-    120deg,
-    var(--mw-red-500),
-    var(--mw-orange-500)
+    135deg,
+    var(--mw-terracotta-500),
+    var(--mw-moss-300)
   );
 }
 
-/* "tip" custom blocks use the info (blue) role — functional, not gold. */
+/* "tip" custom blocks use the info (slate) role — functional, naturalistic. */
 .vp-doc .custom-block.tip {
-  border-color: var(--mw-blue-500);
+  border-color: var(--mw-slate-500);
 }
 
-/* Encouraging prompt rendered below the hero tagline on the home page (home-hero-actions-after slot). */
-.home-explore-prompt {
-  margin: 0 auto 2rem;
-  max-width: 480px;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--vp-c-brand-1);
-  line-height: 1.5;
+.dark .vp-doc .custom-block.tip {
+  border-color: var(--mw-slate-300);
 }

package/docs/.vitepress/theme/index.ts

@@ -5,15 +5,20 @@ import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import type { Theme } from 'vitepress'
 import '@meddleware/design-tokens/tokens.css'
+import '@meddleware/design-tokens/seasons.css'
 import './custom.css'
 
 const theme: Theme = {
   extends: DefaultTheme,
-  Layout: () =>
-    h(DefaultTheme.Layout, null, {
-      'home-hero-actions-after': () =>
-        h('p', { class: 'home-explore-prompt' }, 'Choose a topic above to start building.'),
-    }),
+  enhanceApp({ app: _app, router: _router, siteData: _siteData }) {
+    if (typeof document !== 'undefined') {
+      const m = new Date().getMonth();
+      document.documentElement.dataset.season =
+        m >= 2 && m <= 4 ? 'spring' :
+        m >= 5 && m <= 7 ? 'summer' :
+        m >= 8 && m <= 10 ? 'autumn' : 'winter';
+    }
+  },
 }
 
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dev",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Meddleware developer documentation site (dev.meddleware.co.uk) — VitePress. Integration guides, design system usage, and Sui development patterns.",
   "homepage": "https://dev.meddleware.co.uk/",
   "author": "Meddleware <dev@meddleware.co.uk>",