docs: align visuals

Author: zettca

apps/docs/src/app/globals.css

@@ -4,79 +4,50 @@
   @apply bg-[#151c26];
 }
 
-body,
-.nextra-nav-container-blur,
-.nextra-sidebar-footer,
-.nextra-toc-footer {
-  @apply bg-transparent;
+html,
+body {
+  height: auto;
 }
 
 pre {
-  @apply mt-4 mb-4;
+  @apply my-4;
 }
 
-.nextra-content,
-.nextra-content.x\:w-full {
+article main,
+article main.x\:w-full {
   font-size: 1rem;
 }
 
-.nextra-content h2,
-.nextra-content.x\:w-full h2 {
-  font-size: 1.7rem !important;
-  @apply !border-none;
-}
-
-.nextra-content h2 + p,
-.nextra-content h3 + p {
-  @apply !mt-2;
-}
-
-.nextra-content.x\:w-full {
-  @apply max-w-5xl mx-auto;
-}
-
-.nextra-sidebar-container .active a {
-  @apply light:bg-slate-100;
-}
-
-.nextra-sidebar-container {
-  @apply w-224px;
-}
-
-.nextra-nav-container nav,
-.nextra-nav-container + div {
-  @apply max-w-1408px;
-}
-
-.nextra-nav-container a:last-of-type svg {
-  @apply w-20px;
-}
-
-.nextra-nav-container button div svg {
-  @apply size-16px;
+header {
+  & a:last-of-type svg {
+    @apply size-20px;
+  }
+  & button svg {
+    @apply size-16px;
+  }
 }
 
 .nextra-toc {
   @apply w-224px;
-}
 
-.nextra-toc a {
-  @apply font-normal;
-}
-
-.nextra-toc p {
-  @apply shadow-none;
-}
+  & a {
+    @apply font-normal;
+  }
 
-.nextra-scrollbar a.x\:text-primary-800 {
-  @apply font-medium text-slate-800 dark:text-slate-200;
+  & p {
+    @apply shadow-none;
+  }
 }
 
 .nextra-sidebar-footer,
 .nextra-toc-footer {
   display: none;
 }
 
+.nextra-breadcrumb {
+  @apply mb-sm;
+}
+
 .nextra-code {
   @apply !my-0;
 }
@@ -85,26 +56,12 @@ pre {
   @apply bg-slate-50;
 }
 
-.nextra-breadcrumb {
-  @apply !mb-4;
-}
-
-@media only screen and (max-width: 768px) {
-  .nextra-sidebar-container {
-    @apply w-full;
+.nextra-scrollbar {
+  & [aria-current="true"] {
+    @apply text-text;
   }
-}
 
-@media only screen and (max-width: 1024px) {
-  .nextra-toc {
-    display: none !important;
+  & [aria-current="false"] {
+    @apply text-textSubtle;
   }
 }
-
-[aria-current="true"].nextra-focus {
-  @apply font-medium text-text;
-}
-
-[aria-current="false"].nextra-focus {
-  @apply text-textSubtle;
-}

apps/docs/src/app/layout.tsx

@@ -37,7 +37,10 @@ export const metadata = {
 } satisfies NextraMetadata;
 
 const navbar = (
-  <Navbar logo={<UIKitLogo />}>
+  <Navbar
+    logo={<UIKitLogo />}
+    projectLink="https://github.com/lumada-design/hv-uikit-react"
+  >
     <ThemeSwitch lite />
     <ThemeSwitcher />
   </Navbar>

apps/docs/src/components/Footer.tsx

@@ -48,7 +48,7 @@ export const Footer = () => {
   const year = new Date().getFullYear();
 
   return (
-    <footer className="py-lg border-t border-bgPage">
+    <footer className="py-lg border-t border-border">
       <div className="max-w-1400px mx-auto px-md">
         <div className="flex flex-col md:flex-row md:justify-between space-y-md md:space-y-0">
           {/* Logo Section with More Space */}

apps/docs/src/components/Header.tsx

@@ -17,7 +17,7 @@ export async function Header({ params, ...playgroundProps }: HeaderProps) {
   const meta = await getComponentData(params);
 
   return (
-    <div>
+    <div className="[&:not(:has([data-tab=usage]))_~_*]:hidden">
       <Description meta={meta} />
       <Suspense fallback={null}>
         <Tabs meta={meta} playgroundProps={{ ...playgroundProps, meta }} />

apps/docs/src/components/code/Playground.tsx

@@ -112,7 +112,7 @@ export const Playground = ({
       {/* Component preview and controls */}
       <div className="grid grid-cols-[2fr_1fr] border rounded-t-round">
         {/* Preview Area */}
-        <DocsProvider className="grid place-items-center p-sm h-full">
+        <DocsProvider className="grid place-items-center rounded-inherit p-sm h-full">
           {decoratorClassName ? (
             <div className={decoratorClassName}>{componentElement}</div>
           ) : (

apps/docs/src/components/usage/Classes.tsx

@@ -28,7 +28,7 @@ export const Classes = ({ meta }: { meta: ComponentMeta }) => {
   );
 
   return (
-    <div className="flex flex-col">
+    <div className="grid">
       <HvTypography variant="title3">{meta.component} classes</HvTypography>
       <HvTypography className="mt-xs mb-md">
         The following classes are available in the component{" "}

apps/docs/src/components/usage/Tabs.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { HvContainer, HvTab, HvTabs } from "@hitachivantara/uikit-react-core";
+import { HvTab, HvTabs } from "@hitachivantara/uikit-react-core";
 
 import { ComponentMeta } from "../../utils/component";
 import { Playground, PlaygroundProps } from "../code/Playground";
@@ -24,7 +24,7 @@ export function Tabs({
   const tab = (searchParams.get("tab") as TabId) || "usage";
 
   return (
-    <div className="pt-md">
+    <>
       <HvTabs
         variant="fullWidth"
         value={tab}
@@ -39,13 +39,13 @@ export function Tabs({
         <HvTab value="props" label="Props" />
         <HvTab value="classes" label="Classes" />
       </HvTabs>
-      <HvContainer disableGutters className="mb-lg">
+      <div className="mb-lg" data-tab={tab}>
         {tab === "usage" && playgroundProps && (
           <Playground {...playgroundProps} />
         )}
         {tab === "props" && <Props meta={meta} />}
         {tab === "classes" && <Classes meta={meta} />}
-      </HvContainer>
-    </div>
+      </div>
+    </>
   );
 }