Align docs theme with brand-book Default variant

docusaurus.config.ts

@@ -130,9 +130,8 @@ const config: Config = {
   ],
 
   themes: ["docusaurus-theme-openapi-docs", "@docusaurus/theme-mermaid"],
-  stylesheets: ["https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"],
 
-  clientModules: [require.resolve("./src/theme/Openapi-Store.tsx")],
+  clientModules: [require.resolve("./src/client/load-fonts.ts"), require.resolve("./src/theme/Openapi-Store.tsx")],
 
   themeConfig: {
     image: "img/tago-social-card.png",
@@ -187,8 +186,8 @@ const config: Config = {
         alt: "TagoIO Logo",
         src: "img/tagoio-official-logo.svg",
         srcDark: "img/tagoio-official-logo-white.svg",
-        width: 110,
-        height: 26,
+        width: 99,
+        height: 28,
       },
       items: [
         {
@@ -252,14 +251,14 @@ const config: Config = {
       },
       options: {
         themeVariables: {
-          primaryColor: "#2cb1bc",
-          primaryTextColor: "#ffffff",
+          primaryColor: "#0067C0",
+          primaryTextColor: "#FCFCFC",
           primaryBorderColor: "transparent",
-          lineColor: "#707070",
+          lineColor: "#A1A1A1",
           edgeLabelBackground: "transparent",
           clusterBkg: "transparent",
-          clusterBorder: "#2a2a2a",
-          fontFamily: "Menlo, Consolas, 'Liberation Mono', Courier, monospace",
+          clusterBorder: "#404040",
+          fontFamily: "'Monaspace Neon', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
           fontSize: "16px",
         },
       },

package.json

@@ -32,6 +32,8 @@
     "@docusaurus/core": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
     "@docusaurus/theme-mermaid": "^3.9.2",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource/monaspace-neon": "^5.2.5",
     "@mdx-js/react": "^3.1.0",
     "clsx": "^2.0.0",
     "docusaurus-plugin-openapi-docs": "^4.7.1",

src/client/load-fonts.ts

@@ -0,0 +1,6 @@
+/* oxlint-disable import/no-unassigned-import -- font side-effect imports */
+import "@fontsource-variable/inter";
+import "@fontsource/monaspace-neon/400.css";
+import "@fontsource/monaspace-neon/500.css";
+import "@fontsource/monaspace-neon/700.css";
+/* oxlint-enable import/no-unassigned-import */

src/components/HomepageFeatures/index.tsx

@@ -1,29 +1,32 @@
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import Heading from "@theme/Heading";
+import ThemedImage from "@theme/ThemedImage";
 import type { ReactNode } from "react";
 import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;
-  imgSrc: string;
+  imgLight: string;
+  imgDark: string;
   href: string;
   description: ReactNode;
 };
 
-function Feature({ title, imgSrc, href, description }: FeatureItem) {
+function Feature({ title, imgLight, imgDark, href, description }: FeatureItem) {
   return (
     <div className={styles.featureCol}>
       <Link to={href} className={styles.featureLink}>
         <div className={styles.featureCard}>
           <div className="text--center">
-            <img
-              src={useBaseUrl(imgSrc)}
+            <ThemedImage
+              sources={{
+                light: useBaseUrl(imgLight),
+                dark: useBaseUrl(imgDark),
+              }}
               alt={title}
               width={80}
               height={80}
-              loading="lazy"
-              decoding="async"
               className={styles.featureImg}
             />
           </div>
@@ -41,7 +44,8 @@ export default function HomepageFeatures(): ReactNode {
   const FeatureList: FeatureItem[] = [
     {
       title: "TagoIO Platform",
-      imgSrc: "/img/tagoio-icon-original.png",
+      imgLight: "/img/tagoio-mark-black.svg",
+      imgDark: "/img/tagoio-mark-white.svg",
       href: "/docs/tagoio/getting-started",
       description: (
         <>
@@ -53,7 +57,8 @@ export default function HomepageFeatures(): ReactNode {
     },
     {
       title: "TagoRUN",
-      imgSrc: "/img/tagorun-icon-original.png",
+      imgLight: "/img/tagorun-mark-black.svg",
+      imgDark: "/img/tagorun-mark-white.svg",
       href: "/docs/tagoio/tagorun",
       description: (
         <>
@@ -65,7 +70,8 @@ export default function HomepageFeatures(): ReactNode {
     },
     {
       title: "TagoDeploy",
-      imgSrc: "/img/tagodeploy-icon-original.png",
+      imgLight: "/img/tagodeploy-mark-black.svg",
+      imgDark: "/img/tagodeploy-mark-white.svg",
       href: "/docs/tagodeploy",
       description: (
         <>
@@ -77,7 +83,8 @@ export default function HomepageFeatures(): ReactNode {
     },
     {
       title: "TagoCore",
-      imgSrc: "/img/tagocore-icon-original.png",
+      imgLight: "/img/tagocore-mark-black.svg",
+      imgDark: "/img/tagocore-mark-white.svg",
       href: "/docs/tagocore",
       description: (
         <>
@@ -89,7 +96,8 @@ export default function HomepageFeatures(): ReactNode {
     },
     {
       title: "TagoTiP",
-      imgSrc: "/img/tip-logo.png",
+      imgLight: "/img/tagotip-mark-black.svg",
+      imgDark: "/img/tagotip-mark-white.svg",
       href: "/docs/tagotip",
       description: (
         <>

src/components/HomepageFeatures/styles.module.css

@@ -7,30 +7,29 @@
   background: var(--home-features-bg);
 }
 
-/* Feature card icons with stronger shadows for light mode */
+/* Monochrome SVG logomarks — color follows the active theme */
 .featureImg {
   height: 80px;
   width: 80px;
   object-fit: contain;
-  transition: filter 0.3s ease;
-  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.15));
+  transition: transform 0.3s ease;
 }
 
-/* Icon container with stronger gradient for light mode visibility */
+/* Icon container — neutral info tint */
 .featureCard > :first-child {
   min-height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(44, 177, 188, 0.08) 0%, rgba(44, 177, 188, 0.04) 100%);
+  background: linear-gradient(135deg, rgba(0, 103, 192, 0.06) 0%, rgba(0, 103, 192, 0.03) 100%);
   border-radius: 16px;
   margin-bottom: 1.5rem;
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(44, 177, 188, 0.1);
+  border: 1px solid rgba(0, 103, 192, 0.1);
 }
 
-/* Light mode specific stronger shine effect */
+/* Light mode shine effect */
 .featureCard > :first-child::before {
   content: "";
   position: absolute;
@@ -41,18 +40,18 @@
   background: linear-gradient(
     135deg,
     transparent 0%,
-    rgba(44, 177, 188, 0.2) 30%,
+    rgba(0, 103, 192, 0.15) 30%,
     rgba(255, 255, 255, 0.3) 50%,
-    rgba(44, 177, 188, 0.15) 70%,
+    rgba(0, 103, 192, 0.1) 70%,
     transparent 100%
   );
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
-/* Dark mode keeps the original subtle white shine */
+/* Dark mode keeps a subtle white shine */
 html[data-theme="dark"] .featureCard > :first-child::before {
-  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
+  background: linear-gradient(135deg, transparent 0%, rgba(250, 250, 250, 0.08) 50%, transparent 100%);
 }
 
 /* Row layout for feature cards */
@@ -128,7 +127,7 @@ html[data-theme="dark"] .featureCard > :first-child::before {
 /* Dark theme specific adjustments */
 html[data-theme="dark"] .featureCard {
   background: var(--surface-elevated);
-  border-color: #363749;
+  border-color: var(--border-visible);
   box-shadow:
     0 2px 20px rgba(0, 0, 0, 0.3),
     0 1px 3px rgba(0, 0, 0, 0.4);
@@ -139,42 +138,32 @@ html[data-theme="dark"] .featureCard {
   box-shadow:
     0 12px 40px rgba(0, 0, 0, 0.16),
     0 8px 24px rgba(0, 0, 0, 0.12);
-  border-color: rgba(44, 177, 188, 0.25);
+  border-color: rgba(0, 103, 192, 0.3);
 }
 
-/* More visible icon shadows on hover */
+/* Subtle lift on hover */
 .featureCard:hover .featureImg {
-  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.25));
+  transform: translateY(-2px);
 }
 
 /* Show shine effect on icon container */
 .featureCard:hover > :first-child::before {
   opacity: 1;
 }
 
-/* Dark theme - stronger gradient for icon containers */
+/* Dark theme - info gradient for icon containers */
 html[data-theme="dark"] .featureCard > :first-child {
-  background: linear-gradient(135deg, rgba(44, 177, 188, 0.08) 0%, rgba(44, 177, 188, 0.03) 100%);
-}
-
-/* Enhanced dark theme icon shadows */
-html[data-theme="dark"] .featureImg {
-  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+  background: linear-gradient(135deg, rgba(40, 166, 250, 0.1) 0%, rgba(40, 166, 250, 0.04) 100%);
 }
 
 /* Dark theme hover effects - enhanced lighting only */
 html[data-theme="dark"] .featureCard:hover {
-  border-color: rgba(44, 177, 188, 0.3);
+  border-color: rgba(40, 166, 250, 0.4);
   box-shadow:
     0 8px 32px rgba(0, 0, 0, 0.4),
     0 4px 16px rgba(0, 0, 0, 0.3);
 }
 
-/* Enhanced dark theme icon shadows on hover */
-html[data-theme="dark"] .featureCard:hover .featureImg {
-  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
-}
-
 /* Card title styling with improved typography */
 .featureCard h3 {
   color: var(--ifm-heading-color);
@@ -187,7 +176,7 @@ html[data-theme="dark"] .featureCard:hover .featureImg {
 
 /* Title color change on hover */
 .featureCard:hover h3 {
-  color: #2cb1bc;
+  color: var(--info);
 }
 
 /* Card description text styling */

src/css/api-docs.css

@@ -305,3 +305,11 @@ details.openapi-explorer__details-container {
 .openapi-params__list-item {
   padding-bottom: 0.5rem;
 }
+
+/* The OpenAPI theme paints its <details> arrow as a black SVG and relies on
+   --ifm-menu-link-sublist-icon-filter to invert it in dark mode. We set that
+   variable to `none` globally because our sidebar arrow already has the right
+   stroke baked in, so invert the OpenAPI arrow explicitly in dark mode. */
+html[data-theme="dark"] .openapi-markdown__details > summary::before {
+  filter: invert(1) !important;
+}