@btravstack/theme 1.0.0

package/dist/fonts.css

@@ -0,0 +1,6 @@
+/*
+ * btravstack web fonts. Montserrat (display/UI) + JetBrains Mono (code).
+ * Loaded from Google Fonts so the system stays zero-asset and portable;
+ * the weights here match the --fw-* tokens in tokens.css.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import { Theme } from "vitepress";
+
+//#region src/index.d.ts
+/**
+ * The shared btravstack VitePress theme: VitePress's default theme with the
+ * btravstack design tokens layered on top. Use it from a site's
+ * `.vitepress/theme/index.ts`:
+ *
+ *   import Theme from "@btravstack/theme";
+ *   export default Theme;
+ */
+declare const theme: Theme;
+//#endregion
+export { theme as default };

package/dist/index.mjs

@@ -0,0 +1,14 @@
+import DefaultTheme from "vitepress/theme";
+import "./style.css";
+//#region src/index.ts
+/**
+* The shared btravstack VitePress theme: VitePress's default theme with the
+* btravstack design tokens layered on top. Use it from a site's
+* `.vitepress/theme/index.ts`:
+*
+*   import Theme from "@btravstack/theme";
+*   export default Theme;
+*/
+const theme = { extends: DefaultTheme };
+//#endregion
+export { theme as default };

package/dist/style.css

@@ -0,0 +1,82 @@
+/*
+ * @btravstack/theme — VitePress style entry.
+ *
+ * Maps the btravstack design tokens onto VitePress's own `--vp-*` theme
+ * variables so every btravstack site (this website + the docs sites) shares
+ * one look. Pulled in automatically by the theme's index.ts; consumers can
+ * also import it directly as `@btravstack/theme/style.css`.
+ *
+ * Theming covers BOTH color schemes, so it's safe to let VitePress follow
+ * the visitor's OS preference (its default, `appearance: true`):
+ *   - dark  → adopts the btravstack surface palette
+ *   - light → keeps VitePress's light surfaces, with the brand darkened to
+ *             the deep beetroot so links/headings pass WCAG-AA on white.
+ */
+@import "./fonts.css";
+@import "./tokens.css";
+
+/* ── Brand defaults + typography (both schemes) ────────────────── */
+/* `:root:root` / `:root.dark` raise specificity to (0,2,0) so these win
+   over VitePress's own `:root` / `.dark` defaults regardless of the order
+   the remote @import lands in the cascade. */
+:root:root {
+  --vp-c-brand-1: var(--accent);
+  --vp-c-brand-2: var(--bt-magenta);
+  --vp-c-brand-3: var(--accent-deep);
+  --vp-c-brand-soft: rgba(var(--accent-rgb), 0.14);
+  --vp-c-brand: var(--accent); /* legacy alias */
+
+  --vp-font-family-base: var(--sans);
+  --vp-font-family-mono: var(--mono);
+
+  /* Solid brand buttons — dark ink on the pink fill, readable in both schemes */
+  --vp-button-brand-bg: var(--accent);
+  --vp-button-brand-text: var(--accent-contrast);
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-hover-bg: var(--bt-magenta);
+  --vp-button-brand-hover-text: var(--accent-contrast);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-active-bg: var(--accent-deep);
+  --vp-button-brand-active-text: var(--bt-cream);
+  --vp-button-brand-active-border: transparent;
+
+  /* Home hero: gradient name + beetroot glow behind the logo */
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(120deg, var(--accent), var(--bt-pink-soft));
+  --vp-home-hero-image-background-image: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.30), transparent 72%);
+  --vp-home-hero-image-filter: blur(8px);
+}
+
+/* ── Light scheme: darken the brand so it passes WCAG-AA on white ── */
+:root:not(.dark) {
+  --vp-c-brand-1: var(--accent-deep);  /* link / active text — ~7:1 on white */
+  --vp-c-brand-2: var(--bt-deep-2);    /* hover, a touch darker */
+  --vp-c-brand-3: var(--accent-deep);
+  --vp-c-brand-soft: rgba(var(--accent-rgb), 0.10);
+  /* deeper gradient so the hero name reads on a light background */
+  --vp-home-hero-name-background: linear-gradient(120deg, var(--accent-deep), var(--bt-magenta));
+}
+
+/* ── Dark scheme: btravstack surfaces (matches the landing page) ── */
+:root.dark {
+  --vp-c-bg: var(--bg);
+  --vp-c-bg-alt: var(--card);
+  --vp-c-bg-soft: var(--card-soft);
+  --vp-c-bg-elv: var(--card);
+
+  --vp-c-text-1: var(--text);
+  --vp-c-text-2: var(--muted);
+  --vp-c-text-3: var(--faint);
+
+  --vp-c-divider: var(--border);
+  --vp-c-border: var(--border-2);
+  --vp-c-gutter: var(--border);
+
+  --vp-c-brand-1: var(--accent);       /* pink reads great on dark */
+  --vp-c-brand-2: var(--bt-pink-soft);
+  --vp-c-brand-soft: rgba(var(--accent-rgb), 0.16);
+
+  /* Inline + block code */
+  --vp-code-color: var(--bt-pink-soft);
+  --vp-code-bg: rgba(0, 0, 0, 0.35);
+}

package/dist/tokens.css

@@ -0,0 +1,81 @@
+/*
+ * btravstack design tokens — the single source of truth.
+ * Every surface (this landing page + the VitePress docs sites) derives
+ * its look from these CSS custom properties. Change a value here, bump
+ * the version, and every consumer updates.
+ *
+ * Naming: semantic tokens (--bg, --text, --accent) are what you should
+ * reference in app code. The raw --bt-* brand palette underneath them is
+ * the provenance, exposed so adapters (e.g. VitePress) can remap freely.
+ */
+:root {
+  /* ── Brand palette (raw beetroot) ─────────────────────────────── */
+  --bt-pink:        #E0589A;   /* beetroot flesh — primary accent      */
+  --bt-pink-soft:   #EE9CC4;   /* highlight veins                      */
+  --bt-magenta:     #CE3D80;   /* mid root                             */
+  --bt-deep:        #8E1A52;   /* dark root                            */
+  --bt-deep-2:      #7A1646;   /* root tail                            */
+  --bt-leaf:        #3DAE62;   /* center leaf                          */
+  --bt-leaf-dark:   #2C8B4E;   /* side leaves                          */
+  --bt-green:       #46B86C;   /* "success" green (checks)             */
+  --bt-cream:       #F5EFF3;   /* near-white text                      */
+  --bt-ink:         #1a0c14;   /* near-black, for text on accent       */
+
+  /* ── Surfaces ─────────────────────────────────────────────────── */
+  --bg:             #15101c;
+  --bg-grad:        #1b1326;   /* radial hero glow inner stop          */
+  --card:           #1d1726;
+  --card-soft:      #241c31;
+
+  /* ── Borders / dividers ──────────────────────────────────────── */
+  --border:         rgba(255, 255, 255, 0.08);
+  --border-2:       rgba(255, 255, 255, 0.12);
+
+  /* ── Text ────────────────────────────────────────────────────── */
+  --text:           #F5EFF3;
+  --muted:          #AEA1BC;
+  --faint:          #7E7290;
+
+  /* ── Accent (semantic alias of the brand pink) ───────────────── */
+  --accent:         #E0589A;
+  --accent-deep:    #8E1A52;
+  --accent-contrast:#1a0c14;   /* readable text on an accent fill      */
+  --accent-rgb:     224, 88, 154; /* for rgba(var(--accent-rgb), .3)   */
+  --green:          #46B86C;
+
+  /* ── Typography ──────────────────────────────────────────────── */
+  --sans: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
+  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  --fw-medium:   500;
+  --fw-semibold: 600;
+  --fw-bold:     700;
+  --fw-extrabold:800;
+
+  /* ── Radii ───────────────────────────────────────────────────── */
+  --radius-sm:   9px;
+  --radius:      12px;
+  --radius-lg:   16px;
+  --radius-xl:   20px;
+  --radius-2xl:  24px;
+  --radius-pill: 999px;
+
+  /* ── Spacing scale ───────────────────────────────────────────── */
+  --space-1:  6px;
+  --space-2:  9px;
+  --space-3:  14px;
+  --space-4:  18px;
+  --space-5:  22px;
+  --space-6:  28px;
+
+  /* ── Shadows ─────────────────────────────────────────────────── */
+  --shadow-card:   0 24px 60px -28px rgba(0, 0, 0, 0.8);
+  --shadow-accent: 0 12px 30px -10px rgba(224, 88, 154, 0.6);
+  --shadow-toast:  0 18px 40px -16px rgba(0, 0, 0, 0.8);
+
+  /* ── Layout ──────────────────────────────────────────────────── */
+  --container: 1180px;
+
+  /* ── Motion ──────────────────────────────────────────────────── */
+  --speed-fast: 0.15s;
+  --speed:      0.2s;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@btravstack/theme",
+  "version": "1.0.0",
+  "description": "Shared VitePress theme and design tokens for btravstack sites",
+  "license": "MIT",
+  "author": "Benoit TRAVERS",
+  "type": "module",
+  "homepage": "https://btravstack.github.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/btravstack/btravstack.github.io.git",
+    "directory": "packages/theme"
+  },
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./tokens.css": "./dist/tokens.css"
+  },
+  "sideEffects": ["**/*.css"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown && cp src/*.css dist/",
+    "dev": "tsdown --watch",
+    "prepack": "pnpm run build"
+  },
+  "peerDependencies": {
+    "vitepress": "^1.6.0"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "vitepress": "catalog:"
+  }
+}