varvara-typedoc-theme 0.1.3 → 0.2.1

package/README.md

@@ -4,7 +4,7 @@ _View a_ [_live example here_](https://marcmarine.github.io/western-signs).
 
 Varvara TypeDoc Theme is a custom theme for TypeDoc, designed to provide a seamless documentation experience for TypeScript projects.
 
-![NPM Version](https://img.shields.io/npm/v/varvara-typedoc-theme)
+[![NPM Version](https://img.shields.io/npm/v/varvara-typedoc-theme)](https://www.npmjs.com/package/varvara-typedoc-theme)
 [![GitHub License](https://img.shields.io/github/license/marcmarine/varvara-js)](https://github.com/marcmarine/varvara-js/blob/main/LICENSE)
 
 ## Installation
@@ -56,6 +56,53 @@ export default config
 > [!IMPORTANT]
 > The theme must be explicitly specified. If not set, the plugin will not be loaded by default.
 
+### Customization
+
+Add custom styling by specifying an extra CSS file using the [customCss](https://typedoc.org/documents/Options.Output.html#customcss) option:
+
+```bash
+npx typedoc --customCss ./styles/custom.css
+```
+
+Varvara CSS provides variables to customize the theme appearance:
+
+```css
+/* custom.css */
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --va-color-foreground: DimGray;
+    --va-color-background: WhiteSmoke;
+    --va-border-color: Gainsboro;
+    --va-space-ratio: 0.5;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --va-color-foreground: Silver;
+    --va-color-background: MidnightBlue;
+    --va-border-color: RoyalBlue;
+    --va-space-ratio: 0.5;
+  }
+}
+
+[data-theme='light'] {
+  --va-color-foreground: DimGray;
+  --va-color-background: WhiteSmoke;
+  --va-border-color: Gainsboro;
+  --va-space-ratio: 0.5;
+}
+
+[data-theme='dark'] {
+  --va-color-foreground: Silver;
+  --va-color-background: MidnightBlue;
+  --va-border-color: RoyalBlue;
+  --va-space-ratio: 0.5;
+}
+```
+
+See the [documentation](https://varvara.js.org/variables) for the complete list of available properties.
+
 ## Contributing
 
 Feel free to explore, test, and provide feedback. Your contribution is highly appreciated as we work towards improving and stabilizing the project.

package/assets/overrides.css

@@ -1,22 +1,9 @@
-:root {
-  --va-collapse-tree-indentation: var(--va-space-4);
-}
-
-html[data-theme='light'] {
-  --va-color-foreground: #29353d;
-  --va-color-background: #f3f5f7;
-  --va-border-color: lightgray;
-}
-html[data-theme='dark'] {
-  --va-color-foreground: #b3ccd6;
-  --va-color-background: #2a303c;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     --va-color-foreground: #29353d;
     --va-color-background: #f3f5f7;
-    --va-border-color: lightgray;
+    --va-border-color: LightGray;
+    --va-color-primary: RoyalBlue;
   }
 }
 
@@ -24,14 +11,34 @@ html[data-theme='dark'] {
   :root {
     --va-color-foreground: #b3ccd6;
     --va-color-background: #2a303c;
+    --va-border-color: LightSlateGray;
+    --va-color-primary: LightSkyBlue;
   }
 }
 
+[data-theme='light'] {
+  --va-color-foreground: #29353d;
+  --va-color-background: #f3f5f7;
+  --va-border-color: LightGray;
+  --va-color-primary: RoyalBlue;
+}
+
+[data-theme='dark'] {
+  --va-color-foreground: #b3ccd6;
+  --va-color-background: #2a303c;
+  --va-border-color: LightSlateGray;
+  --va-color-primary: LightSkyBlue;
+}
+
 body {
   background-color: var(--va-color-background);
   color: var(--va-color-foreground);
 }
 
+a {
+  color: var(--va-color-primary);
+}
+
 .va-button:has(.version-badge) {
   position: relative;
 }
@@ -125,12 +132,12 @@ body {
 
 .settings .va-select {
   width: 100%;
-  border-left: 0;
+  border-left-color: transparent;
   border-right: 0;
   border-bottom: 0;
 }
 
-.settings .va-select-group {
+.settings label:has(.va-select) {
   padding-left: 0 !important;
 }
 
@@ -162,7 +169,7 @@ footer {
 }
 
 .container {
-  padding: 0 1.5rem;
+  padding: 0 var(--va-space-8);
 }
 
 @media (max-width: 769px) {
@@ -187,9 +194,10 @@ footer {
   .container-main {
     grid-template-areas: 'header content' 'sidebar content';
     grid-auto-rows: auto 1fr;
+    margin: var(--va-space-8) auto;
   }
   .container {
-    padding: 0 2rem;
+    padding: 0 var(--va-space-8);
   }
 }
 
@@ -202,8 +210,8 @@ footer {
   }
   .page-menu,
   .site-menu {
-    top: 2rem;
-    max-height: calc(100vh - 4rem);
+    top: var(--va-space-8);
+    max-height: calc(100vh - calc(var(--va-space-8) * 2));
   }
 }
 

package/dist/index.js

@@ -90,10 +90,7 @@ function sidebar(context) {
 }
 
 // src/partials/navigation.tsx
-import {
-  JSX as JSX3,
-  ReflectionFlag
-} from "typedoc";
+import { JSX as JSX3, ReflectionFlag } from "typedoc";
 function pageSidebar(context) {
   return (props) => {
     return /* @__PURE__ */ JSX3.createElement("div", {
@@ -128,9 +125,7 @@ function settings(context) {
       class: "settings-label"
     }, context.i18n.theme_member_visibility()), /* @__PURE__ */ JSX3.createElement("ul", {
       id: "tsd-filter-options"
-    }, ...visibilityOptions)), /* @__PURE__ */ JSX3.createElement("div", {
-      class: "va-select-group"
-    }, /* @__PURE__ */ JSX3.createElement("label", null, context.i18n.theme_theme()), /* @__PURE__ */ JSX3.createElement("select", {
+    }, ...visibilityOptions)), /* @__PURE__ */ JSX3.createElement("label", null, /* @__PURE__ */ JSX3.createElement("span", null, context.i18n.theme_theme()), /* @__PURE__ */ JSX3.createElement("select", {
       id: "tsd-theme",
       class: "va-select"
     }, /* @__PURE__ */ JSX3.createElement("option", {
@@ -342,15 +337,9 @@ function layout(context) {
   }), /* @__PURE__ */ JSX5.createElement("link", {
     rel: "stylesheet",
     href: context.relativeURL("assets/highlight.css", true)
-  }), context.options.getValue("customCss") && /* @__PURE__ */ JSX5.createElement("link", {
-    rel: "stylesheet",
-    href: context.relativeURL("assets/custom.css", true)
   }), /* @__PURE__ */ JSX5.createElement("script", {
     defer: true,
     src: context.relativeURL("assets/main.js", true)
-  }), context.options.getValue("customJs") && /* @__PURE__ */ JSX5.createElement("script", {
-    defer: true,
-    src: context.relativeURL("assets/custom.js", true)
   }), /* @__PURE__ */ JSX5.createElement("script", {
     async: true,
     src: context.relativeURL("assets/icons.js", true),
@@ -367,7 +356,13 @@ function layout(context) {
     async: true,
     src: context.relativeURL("assets/hierarchy.js", true),
     id: "tsd-hierarchy-script"
-  }), context.hook("head.end", context)), /* @__PURE__ */ JSX5.createElement("body", null, context.hook("body.begin", context), /* @__PURE__ */ JSX5.createElement("script", null, /* @__PURE__ */ JSX5.createElement(JSX5.Raw, {
+  }), context.hook("head.end", context), context.options.getValue("customCss") && /* @__PURE__ */ JSX5.createElement("link", {
+    rel: "stylesheet",
+    href: context.relativeURL("assets/custom.css", true)
+  }), context.options.getValue("customJs") && /* @__PURE__ */ JSX5.createElement("script", {
+    defer: true,
+    src: context.relativeURL("assets/custom.js", true)
+  })), /* @__PURE__ */ JSX5.createElement("body", null, context.hook("body.begin", context), /* @__PURE__ */ JSX5.createElement("script", null, /* @__PURE__ */ JSX5.createElement(JSX5.Raw, {
     html: 'document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";'
   })), /* @__PURE__ */ JSX5.createElement("div", {
     class: "container container-main"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "varvara-typedoc-theme",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "author": "Marc Mariné <shenobi@gmail.com>",
   "repository": {
     "type": "git",
@@ -8,14 +8,14 @@
     "directory": "packages/typedoc-theme"
   },
   "type": "module",
-  "description": "Seamless documentation experience for TypeScript projects.",
+  "description": "Varvara theme for TypeDoc.",
   "keywords": [
     "typedoc-theme",
     "varvara-css"
   ],
   "license": "MIT",
   "dependencies": {
-    "varvara-css": "^0.4.1"
+    "varvara-css": "latest"
   },
   "devDependencies": {
     "@types/bun": "latest"