Use css variables and tailwind styles in custom components (#804)

Author: ntotten

scripts/generate-cli-docs.ts

@@ -268,7 +268,8 @@ async function createCommandPage(
   }
 
   if (command.usage) {
-    props.push(formatJsxProp("usage", command.usage));
+    // Wrap long usage commands for better readability
+    props.push(formatJsxProp("usage", wrapCliCommand(command.usage)));
   }
 
   // Get custom content from partial files

src/components.tsx

@@ -61,21 +61,21 @@ export const mdxComponents = {
         <Framed size={props.size}>
           <Image
             {...props}
-            className="border border-[#eaecef] overflow-hidden rounded-sm"
+            className="border border-border overflow-hidden rounded-sm"
           />
         </Framed>
       );
     }
     return (
       <Image
         {...props}
-        className="border border-[#eaecef] overflow-hidden rounded-sm"
+        className="border border-border overflow-hidden rounded-sm"
       />
     );
   },
   Framed,
   CodeType: (props: PropsWithChildren) => (
-    <code className="text-green-600">&lt;{props.children}&gt;</code>
+    <code className="text-primary">&lt;{props.children}&gt;</code>
   ),
   DocusaurusDocsLicense,
   GithubButton,

src/components/BrowserScreenshot.tsx

@@ -1,12 +1,7 @@
-import type { CSSProperties, PropsWithChildren, ReactElement } from "react";
+import type { PropsWithChildren, ReactElement } from "react";
 
 interface BrowserScreenshotProps {
   url?: string;
-  browserTheme?: "light" | "dark";
-  browserShadow?: string;
-  borderRadius?: number;
-  className?: string;
-  style?: CSSProperties;
   size?: "sm" | "md" | "lg";
 }
 
@@ -19,162 +14,51 @@ const marginClasses = {
 export function BrowserScreenshot({
   children,
   url = "https://example.com",
-  browserTheme = "light",
-  browserShadow = "0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04)",
-  borderRadius = 8,
-  className = "",
-  style,
   size,
 }: PropsWithChildren<BrowserScreenshotProps>): ReactElement {
-  const isDark = browserTheme === "dark";
-
-  const browserWindowStyle: CSSProperties = {
-    borderRadius: `${borderRadius}px`,
-    overflow: "hidden",
-    boxShadow: browserShadow,
-    backgroundColor: isDark ? "#1a1a1a" : "#fafafa",
-    border: `1px solid ${isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)"}`,
-    margin: "0 auto",
-    maxWidth: "90%",
-    ...style,
-  };
-
-  const browserBarStyle: CSSProperties = {
-    height: "40px",
-    backgroundColor: isDark ? "#262626" : "#f6f6f6",
-    display: "flex",
-    alignItems: "center",
-    padding: "0 16px",
-    gap: "16px",
-    position: "relative" as const,
-  };
-
-  const trafficLightStyle: CSSProperties = {
-    display: "flex",
-    gap: "8px",
-    alignItems: "center",
-  };
-
-  const dotStyle: CSSProperties = {
-    width: "12px",
-    height: "12px",
-    borderRadius: "50%",
-  };
-
-  const navigationStyle: CSSProperties = {
-    display: "flex",
-    gap: "16px",
-    alignItems: "center",
-  };
-
-  const navButtonStyle: CSSProperties = {
-    width: "14px",
-    height: "14px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    opacity: 0.6,
-  };
-
-  const urlBarStyle: CSSProperties = {
-    flex: 1,
-    maxWidth: "320px",
-    height: "28px",
-    backgroundColor: isDark ? "#1a1a1a" : "#fafafa",
-    border: `1px solid ${isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"}`,
-    borderRadius: "20px",
-    padding: "0 12px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "13px",
-    color: isDark ? "#888888" : "#666666",
-    fontFamily:
-      "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  };
-
-  const contentStyle: CSSProperties = {
-    backgroundColor: "#ffffff",
-    display: "block",
-  };
-
-  const marginClass = size
-    ? marginClasses[size]
-      ? marginClasses[size]
-      : "mx-auto"
-    : "mx-auto";
+  const marginClass = size ? (marginClasses[size] ?? "mx-auto") : "mx-auto";
 
   return (
     <div
       className={`[&>p]:m-0 [&>p]:p-0 [&>p>img]:m-0 [&>p>img]:p-0 my-8 ${marginClass}`}
     >
-      <div
-        className={`browser-screenshot-wrapper ${className}`}
-        style={browserWindowStyle}
-      >
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-          .browser-screenshot-wrapper img {
-            border: 0 !important;
-            border-radius: 0 !important;
-            padding: 0 !important;
-            margin: 0 !important;
-            display: block !important;
-            max-width: 100% !important;
-            height: auto !important;
-          }
-          .browser-screenshot-wrapper p {
-            margin: 0 !important;
-            padding: 0 !important;
-            line-height: 0 !important;
-          }
-        `,
-          }}
-        />
-        <div style={browserBarStyle}>
-          <div style={trafficLightStyle}>
+      <div className="overflow-hidden mx-auto max-w-[90%] rounded-lg shadow-lg border border-border bg-card [&_img]:!border-0 [&_img]:!rounded-none [&_img]:!p-0 [&_img]:!m-0 [&_img]:!block [&_img]:!max-w-full [&_img]:!h-auto [&_p]:!m-0 [&_p]:!p-0 [&_p]:!leading-[0]">
+        <div className="h-10 flex items-center px-4 gap-4 relative bg-gray-100 dark:bg-gray-900">
+          <div className="flex gap-2 items-center">
             <div
-              style={{
-                ...dotStyle,
-                backgroundColor: "#FE5F57",
-              }}
+              className="w-3 h-3 rounded-full"
+              style={{ backgroundColor: "#FE5F57" }}
             />
             <div
-              style={{
-                ...dotStyle,
-                backgroundColor: "#FEBB2E",
-              }}
+              className="w-3 h-3 rounded-full"
+              style={{ backgroundColor: "#FEBB2E" }}
             />
             <div
-              style={{
-                ...dotStyle,
-                backgroundColor: "#26C941",
-              }}
+              className="w-3 h-3 rounded-full"
+              style={{ backgroundColor: "#26C941" }}
             />
           </div>
-          <div style={navigationStyle}>
-            <div style={navButtonStyle}>
-              <svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
+          <div className="flex gap-4 items-center">
+            <div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
+              <svg viewBox="0 0 16 16" fill="currentColor">
                 <path
                   fillRule="evenodd"
                   clipRule="evenodd"
                   d="M6.46966 13.7803L6.99999 14.3107L8.06065 13.25L7.53032 12.7197L3.56065 8.75001H14.25H15V7.25001H14.25H3.56065L7.53032 3.28034L8.06065 2.75001L6.99999 1.68935L6.46966 2.21968L1.39644 7.2929C1.00592 7.68342 1.00592 8.31659 1.39644 8.70711L6.46966 13.7803Z"
                 />
               </svg>
             </div>
-            <div style={navButtonStyle}>
-              <svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
+            <div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
+              <svg viewBox="0 0 16 16" fill="currentColor">
                 <path
                   fillRule="evenodd"
                   clipRule="evenodd"
                   d="M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z"
                 />
               </svg>
             </div>
-            <div style={navButtonStyle}>
-              <svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
+            <div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
+              <svg viewBox="0 0 16 16" fill="currentColor">
                 <path
                   fillRule="evenodd"
                   clipRule="evenodd"
@@ -183,20 +67,13 @@ export function BrowserScreenshot({
               </svg>
             </div>
           </div>
-          <div style={urlBarStyle}>
-            <span
-              style={{
-                fontSize: "13px",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}
-            >
+          <div className="flex-1 max-w-xs h-7 rounded-full px-3 flex items-center justify-center text-[13px] font-sans bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400">
+            <span className="text-[13px] whitespace-nowrap overflow-hidden text-ellipsis">
               {url}
             </span>
           </div>
         </div>
-        <div style={contentStyle}>{children}</div>
+        <div className="bg-card block">{children}</div>
       </div>
     </div>
   );

src/components/BundlesTable.tsx

@@ -29,17 +29,19 @@ export const BundlesTable = () => {
 
   return (
     <table className="w-full border-collapse text-sm">
-      <tr className="bg-gray-50 border-b">
-        <th className="px-3 py-2 text-left font-medium text-gray-600">
+      <tr className="bg-secondary border-b">
+        <th className="px-3 py-2 text-left font-medium text-muted-foreground">
           Module
         </th>
-        <th className="px-3 py-2 text-left font-medium text-gray-600">
+        <th className="px-3 py-2 text-left font-medium text-muted-foreground">
           Status
         </th>
-        <th className="px-3 py-2 text-left font-medium text-gray-600">
+        <th className="px-3 py-2 text-left font-medium text-muted-foreground">
           Version
         </th>{" "}
-        <th className="px-3 py-2 text-left font-medium text-gray-600">Notes</th>
+        <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+          Notes
+        </th>
       </tr>
       {data?.bundles
         .filter((bundle) => bundle.isPublic)
@@ -52,16 +54,17 @@ export const BundlesTable = () => {
           let status = issue?.status ?? "Unknown";
 
           const statusClass = {
-            Unknown: "bg-gray-200 text-gray-700",
-            Issues: "bg-red-100 text-red-800",
-            Working: "bg-green-200 text-green-800",
+            Unknown: "bg-secondary text-foreground",
+            Issues: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+            Working:
+              "bg-green-200 text-green-800 dark:bg-green-900 dark:text-green-200",
           };
 
           return (
-            <tr className="border-b hover:bg-gray-50" key={i}>
+            <tr className="border-b hover:bg-accent" key={i}>
               <td className="px-3 py-2 align-top">
                 <a
-                  className="text-blue-600 hover:underline font-medium"
+                  className="text-primary hover:underline font-medium"
                   href={
                     bundle.url ?? `https://www.npmjs.com/package/${bundle.name}`
                   }
@@ -80,7 +83,7 @@ export const BundlesTable = () => {
                 {bundle.version}
               </td>
 
-              <td className="px-3 py-2 align-top text-gray-700 text-xs">
+              <td className="px-3 py-2 align-top text-foreground text-xs">
                 {notes}
               </td>
             </tr>

src/components/CliCommand.tsx

@@ -165,7 +165,7 @@ export const CliCommand: React.FC<CliCommandProps> = ({
           <h2 className="text-2xl font-bold mb-6">Examples</h2>
           {examples.map(([cmd, desc], index) => (
             <div key={index} className="mb-6">
-              <p className="mb-2 text-gray-700">{desc}</p>
+              <p className="mb-2 text-foreground">{desc}</p>
               <SyntaxHighlight language="bash">
                 {cmd.replace(/\$0/g, "zuplo")}
               </SyntaxHighlight>
@@ -184,53 +184,51 @@ export const CliCommand: React.FC<CliCommandProps> = ({
                 <code>--{option.name}</code>
               </h3>
               {option.description && (
-                <p className="mb-3 text-gray-700">{option.description}</p>
+                <p className="mb-3 text-foreground">{option.description}</p>
               )}
-              <div className="text-sm text-gray-600">
+              <div className="text-sm text-muted-foreground">
                 {option.type && (
                   <span className="mr-3">
                     Type:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
-                      {option.type}
-                    </code>
+                    <code className="bg-muted px-1 rounded">{option.type}</code>
                   </span>
                 )}
                 {option.default !== undefined && (
                   <span className="mr-3">
                     Default:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       {JSON.stringify(option.default)}
                     </code>
                   </span>
                 )}
                 {option.choices && option.choices.length > 0 && (
                   <span className="mr-3">
                     Choices:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       {option.choices.join(", ")}
                     </code>
                   </span>
                 )}
                 {option.alias && option.alias.length > 0 && (
                   <span className="mr-3">
                     Alias:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       -{option.alias.join(", -")}
                     </code>
                   </span>
                 )}
                 {option.envVar && (
                   <span className="mr-3">
                     Env:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       {option.envVar}
                     </code>
                   </span>
                 )}
                 {option.conflicts && option.conflicts.length > 0 && (
                   <span className="mr-3">
                     Conflicts:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       --{option.conflicts.join(", --")}
                     </code>
                   </span>