docs: Update styling (#1831)

documentation/src/css/custom.css

@@ -300,37 +300,3 @@ html[data-theme="light"] .hide-in-light {
 .iconExternalLink_nPIU {
   margin-left: 8px !important;
 }
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-.container {
-  width: 100%;
-}

documentation/src/css/extensions.css

@@ -8,6 +8,12 @@
   }
 }
 
+*, :after, :before {
+  border: 0 solid #e5e7eb;
+}
+
+
+
 /* Search styling */
 .search-container {
   position: relative;
@@ -88,6 +94,12 @@
   align-items: center;
 }
 
+.card-header a {
+  text-decoration: none;
+  color: var(--text-standard);
+  transition: color 0.2s;
+}
+
 .card-header-content {
   display: flex;
   align-items: center;

documentation/src/css/tailwind.css

@@ -1,75 +1,4 @@
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    /* start arcade colors */
-    --constant-white: #ffffff;
-    --constant-black: #000000;
-    --grey-10: #101010;
-    --grey-20: #1e1e1e;
-    --grey-50: #666666;
-    --grey-60: #959595;
-    --grey-80: #cccccc;
-    --grey-85: #dadada;
-    --grey-90: #e8e8e8;
-    --grey-95: #f0f0f0;
-    --dark-grey-15: #1a1a1a;
-    --dark-grey-25: #232323;
-    --dark-grey-30: #2a2a2a;
-    --dark-grey-40: #333333;
-    --dark-grey-45: #595959;
-    --dark-grey-60: #878787;
-    --dark-grey-90: #e1e1e1;
 
-    --background-app: var(--constant-white);
-    --background-prominent: var(--grey-80);
-    --background-standard: var(--grey-90);
-    --background-subtle: var(--grey-95);
-
-    --border-divider: var(--grey-90);
-    --border-inverse: var(--constant-white);
-    --border-prominent: var(--grey-10);
-    --border-standard: var(--grey-60);
-    --border-subtle: var(--grey-90);
-
-    --icon-disabled: var(--grey-60);
-    --icon-extra-subtle: var(--grey-60);
-    --icon-inverse: var(--constant-white);
-    --icon-prominent: var(--grey-10);
-    --icon-standard: var(--grey-20);
-    --icon-subtle: var(--grey-50);
-
-    --text-placeholder: var(--grey-60);
-    --text-prominent: var(--grey-10);
-    --text-standard: var(--grey-20);
-    --text-subtle: var(--grey-50);
-
-    &.dark {
-      --background-app: var(--constant-black);
-      --background-prominent: var(--dark-grey-40);
-      --background-standard: var(--dark-grey-25);
-      --background-subtle: var(--dark-grey-15);
-
-      --border-divider: var(--dark-grey-25);
-      --border-inverse: var(--constant-black);
-      --border-prominent: var(--constant-white);
-      --border-standard: var(--dark-grey-45);
-      --border-subtle: var(--dark-grey-25);
-
-      --icon-disabled: var(--dark-grey-45);
-      --icon-extra-subtle: var(--dark-grey-45);
-      --icon-inverse: var(--constant-black);
-      --icon-prominent: var(--constant-white);
-      --icon-standard: var(--dark-grey-90);
-      --icon-subtle: var(--dark-grey-60);
-
-      --text-placeholder: var(--dark-grey-45);
-      --text-prominent: var(--constant-white);
-      --text-standard: var(--dark-grey-90);
-      --text-subtle: var(--dark-grey-60);
-    }
-    /* end arcade colors */
-  }
-}

documentation/src/pages/extensions/detail.tsx

@@ -18,9 +18,8 @@ function ExtensionDetail({ server }: { server: MCPServer }) {
             <div>
               <Link to="/extensions" className="no-underline">
                 <Button
-                  variant="ghost"
+                    className="flex items-center gap-2 hover:cursor-pointer"
-                  className="flex items-center gap-2 text-textSubtle hover:text-textProminent"
+                  >
-                >
                   <ArrowLeft className="h-4 w-4" />
                   Back
                 </Button>
@@ -200,8 +199,7 @@ export default function DetailPage(): JSX.Element {
               <div>
                 <Link to="/extensions" className="no-underline">
                   <Button
-                    variant="ghost"
+                    className="flex items-center gap-2 hover:text-textProminent hover:cursor-pointer"
-                    className="flex items-center gap-2 text-textSubtle hover:text-textProminent"
                   >
                     <ArrowLeft className="h-4 w-4" />
                     Back
@@ -234,7 +232,7 @@ export default function DetailPage(): JSX.Element {
                 <Link to="/extensions" className="no-underline">
                   <Button
                     variant="ghost"
-                    className="flex items-center gap-2 text-textSubtle hover:text-textProminent"
+                    className="flex items-center gap-2 hover:text-textProminent hover:cursor-pointer"
                   >
                     <ArrowLeft className="h-4 w-4" />
                     Back

documentation/src/pages/extensions/index.tsx

@@ -1,6 +1,3 @@
-import { Search } from "lucide-react";
-import { Button } from "@site/src/components/ui/button";
-import { Input } from "@site/src/components/ui/input";
 import { ServerCard } from "@site/src/components/server-card";
 import { useState, useEffect } from "react";
 import type { MCPServer } from "@site/src/types/server";

documentation/tailwind.config.js

@@ -2,6 +2,9 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   darkMode: "class",
+  corePlugins: {
+    preflight: false,
+  },
   theme: {
     extend: {
       colors: {