varvara-typedoc-theme 0.3.1 → 0.3.3

package/README.md

@@ -6,6 +6,7 @@ Varvara TypeDoc Theme is a custom theme for TypeDoc, designed to provide a seaml
 
 [![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)
+[![TypeDoc](https://img.shields.io/badge/view-CHANGELOG.md-blue.svg)](https://github.com/marcmarine/varvara-js/blob/main/packages/typedoc-theme/CHANGELOG.md)
 
 ## Installation
 
@@ -24,7 +25,7 @@ npm install varvara-typedoc-theme --save-dev
 Use the following command to generate documentation with the Varvara theme:
 
 ```bash
-npx typedoc --plugin varvara-typedoc-theme --theme varvara
+npx typedoc --plugin varvara-typedoc-theme --theme varvara-css
 ```
 
 ### Method 2: Configuration File
@@ -41,7 +42,7 @@ const config = {
   plugin: ['varvara-typedoc-theme'],
 
   // Set the theme to Varvara
-  theme: 'varvara',
+  theme: 'varvara-css',
 
   // Optional: Include version information
   includeVersion: true
@@ -71,31 +72,31 @@ Varvara CSS provides variables to customize the theme appearance:
 
 @media (prefers-color-scheme: light) {
   :root {
-    --va-color-foreground: DimGray;
-    --va-color-background: WhiteSmoke;
+    --va-foreground-color-default: DimGray;
+    --va-background-color-default: 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-foreground-color-default: Silver;
+    --va-background-color-default: MidnightBlue;
     --va-border-color: RoyalBlue;
     --va-space-ratio: 0.5;
   }
 }
 
 [data-theme='light'] {
-  --va-color-foreground: DimGray;
-  --va-color-background: WhiteSmoke;
+  --va-foreground-color-default: DimGray;
+  --va-background-color-default: WhiteSmoke;
   --va-border-color: Gainsboro;
   --va-space-ratio: 0.5;
 }
 
 [data-theme='dark'] {
-  --va-color-foreground: Silver;
-  --va-color-background: MidnightBlue;
+  --va-foreground-color-default: Silver;
+  --va-background-color-default: MidnightBlue;
   --va-border-color: RoyalBlue;
   --va-space-ratio: 0.5;
 }

package/assets/overrides.css

@@ -1,3 +1,7 @@
+:root {
+  --va-link-color: var(--va-color-primary);
+}
+
 [data-theme='light'] {
   color-scheme: light;
 }
@@ -23,11 +27,6 @@
   flex: 1;
 }
 
-body {
-  background-color: var(--va-color-background);
-  color: var(--va-color-foreground);
-}
-
 a {
   color: var(--va-color-primary);
 }
@@ -40,8 +39,8 @@ a {
   position: absolute;
   right: 0;
   bottom: 0;
-  background-color: var(--va-surface-primary-alt);
-  color: var(--va-color-background);
+  background-color: var(--va-foreground-color-muted);
+  color: var(--va-background-color-default);
   padding: var(--va-space-1);
   font-size: var(--va-font-size-0);
 }
@@ -61,7 +60,7 @@ a {
 }
 
 dialog {
-  background-color: var(--va-color-background);
+  background-color: var(--va-background-color-default);
 }
 
 .navigation-links a span {
@@ -95,7 +94,7 @@ footer {
 }
 
 .container {
-  padding: 0 var(--va-space-8);
+  padding: 0 var(--va-space-4);
 }
 
 @media (max-width: 769px) {
@@ -109,7 +108,7 @@ footer {
     flex-direction: column;
   }
   html .col-sidebar {
-    background-color: var(--va-color-background);
+    background-color: var(--va-background-color-default);
   }
 }
 
@@ -117,30 +116,37 @@ footer {
   .container-main {
     grid-template-areas: 'header content' 'sidebar content';
     grid-auto-rows: auto 1fr;
-    margin: var(--va-space-8) auto;
+    margin: var(--va-space-6) auto;
   }
+
   .container {
-    padding: 0 var(--va-space-8);
+    padding: 0 var(--va-space-6);
+  }
+
+  #tsd-toolbar-menu-trigger {
+    display: none;
   }
 }
 
 @media (min-width: 1200px) {
   .container-main {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 20rem);
+    grid-template-columns: minmax(0, 20rem) minmax(0, 2.5fr) minmax(0, 20rem);
     grid-template-areas:
       'header content toc'
       'sidebar content toc';
   }
   .page-menu,
   .site-menu {
-    top: var(--va-space-8);
-    max-height: calc(100vh - calc(var(--va-space-8) * 2));
+    top: var(--va-space-6);
+    max-height: calc(100vh - calc(var(--va-space-6) * 2));
   }
 }
 
 @media (min-width: 770px) and (max-width: 1399px) {
   .col-sidebar {
+    top: var(--va-space-6);
     padding-top: 0;
+    max-height: calc(100vh - calc(var(--va-space-6) * 2));
   }
   .page-menu {
     margin-bottom: 1rem;

package/dist/index.js

@@ -29,9 +29,11 @@ function footer(context) {
         class: "tsd-generator"
       }, pre, /* @__PURE__ */ JSX.createElement("a", {
         href: "https://typedoc.org/",
+        class: "va-link",
         target: "_blank"
       }, "TypeDoc"), " & ", /* @__PURE__ */ JSX.createElement("a", {
         href: "https://varvara.js.org/",
+        class: "va-link",
         target: "_blank"
       }, "Varvara CSS"), post);
     }
@@ -221,6 +223,22 @@ function toolbar(context) {
     stroke: "currentColor"
   }, /* @__PURE__ */ JSX4.createElement("path", {
     d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+  }))), /* @__PURE__ */ JSX4.createElement("a", {
+    href: "#",
+    class: "va-button",
+    id: "tsd-toolbar-menu-trigger",
+    "data-toggle": "menu",
+    "aria-label": i18n4.theme_menu()
+  }, /* @__PURE__ */ JSX4.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "2.5",
+    width: "16",
+    height: "16",
+    stroke: "currentColor"
+  }, /* @__PURE__ */ JSX4.createElement("path", {
+    d: "M3.75 9h16.5m-16.5 6.75h16.5"
   })))), /* @__PURE__ */ JSX4.createElement("div", {
     class: "navigation-links va-button-group"
   }, Object.entries(context.options.getValue("navigationLinks")).map(([label, url]) => /* @__PURE__ */ JSX4.createElement("a", {
@@ -458,7 +476,7 @@ class VarvaraTheme extends DefaultTheme2 {
 
 // src/index.tsx
 function load(app) {
-  app.renderer.defineTheme("varvara", VarvaraTheme);
+  app.renderer.defineTheme("varvara-css", VarvaraTheme);
 }
 export {
   load

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "varvara-typedoc-theme",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "author": "Marc Mariné <shenobi@gmail.com>",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "varvara-css": "^0.6.0"
+    "varvara-css": "^0.7.0"
   },
   "devDependencies": {
     "@types/bun": "latest"