Use consistent link color, refactor text content and doc card compone…

…nts (#138)

src/components/Accordion/Item.tsx

@@ -32,6 +32,11 @@ const classNames = [
   "flex-col",
   "flex-wrap",
   "font-normal",
+
+  "prose-a:text-inherit",
+  "hover:prose-a:text-brand-700",
+  "dark:prose-a:text-inherit",
+  "dark:hover:prose-a:text-brand-500",
 ];
 
 const AccordionItem = ({

src/components/Button/index.tsx

@@ -6,18 +6,23 @@ type ButtonProps = Props & {
   variant: "primary" | "secondary";
 };
 
-export default function Button({ children, variant, className, ...rest }: ButtonProps) {
+export default function Button({
+  children,
+  variant,
+  className,
+  ...rest
+}: ButtonProps) {
   const Tag = "href" in rest ? Link : "button";
   return (
     <Tag
       {...rest}
       className={clsx(
         "border font-semibold h-12 px-6 flex items-center hover:no-underline transition-colors",
         variant === "primary" &&
-          "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600-hover hover:text-gray-900",
+          "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600 hover:text-gray-900",
         variant === "secondary" &&
           "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50",
-          className
+        className
       )}
     >
       {children}

src/components/Footer/index.tsx

@@ -22,7 +22,7 @@ function LinkItem({ item }: LinkItemProps) {
         : {
             to: toUrl,
           })}
-      className="hover:text-gray-900 hover:dark:text-gray-50"
+      className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500"
       {...props}
     >
       {label}

src/components/HowToContribute/index.tsx

@@ -15,7 +15,7 @@ export default function HowToContribute() {
           to contribute. This{" "}
           <Link
             href="https://github.com/opentofu/opentofu/blob/main/CONTRIBUTING.md"
-            className="underline text-gray-900 dark:text-gray-50"
+            className="underline text-gray-900 hover:text-brand-700 dark:text-gray-50 dark:hover:text-brand-500"
           >
             contribution guide
           </Link>{" "}

src/components/LatestNews/index.tsx

@@ -27,7 +27,12 @@ export default function LatestNews({ recentPosts }) {
               {formattedDate}
             </time>
             <h3 className="text-3xl font-bold leading-snug mt-2">
-              <Link href={permalink}>{title}</Link>
+              <Link
+                href={permalink}
+                className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500"
+              >
+                {title}
+              </Link>
             </h3>
 
             <div className="prose dark:prose-invert line-clamp-3 mt-2 mb-4 text-gray-600 dark:text-gray-500">

src/components/SocialIconLink/index.tsx

@@ -27,7 +27,7 @@ export default function SocialIconLink({
   return (
     <Link
       href={href}
-      className="flex items-center gap-3 text-gray-900 dark:text-gray-50 hover:text-gray-500 hover:dark:text-gray-500"
+      className="flex items-center gap-3 text-gray-900 hover:text-brand-700 dark:text-gray-50 dark:hover:text-brand-500"
       aria-label={label}
     >
       <svg
@@ -38,7 +38,10 @@ export default function SocialIconLink({
       >
         <path fill="currentColor" d={iconMap[name]} />
       </svg>
-      <span className={clsx("inline-flex xl:hidden", hiddenLabel && "hidden")} aria-hidden>
+      <span
+        className={clsx("inline-flex xl:hidden", hiddenLabel && "hidden")}
+        aria-hidden
+      >
         {label}
       </span>
     </Link>

src/components/SupportersList/index.tsx

@@ -25,7 +25,7 @@ export default function SupportersList({ list }: SupportersListProps) {
             href={supporter.url}
             target="_blank"
             rel="noopener noreferrer"
-            className="w-1/3 text-inherit font-bold text-gray-900 dark:text-gray-100"
+            className="w-1/3 text-inherit font-bold text-gray-900 hover:text-brand-700 dark:text-gray-100 dark:hover:text-brand-500"
             aria-label={`Go to ${supporter.name} website`}
           >
             {supporter.name}

src/components/TextContent/index.tsx

@@ -5,30 +5,52 @@ type TextContentProps = HTMLProps<HTMLDivElement>;
 
 const classNames = [
   "prose",
+  "dark:prose-invert",
   "lg:prose-lg",
+
   "text-gray-900",
   "dark:text-gray-100",
-  "mx-auto",
-  "mb-10",
-  "px-4",
-  "md:px-0",
-
-  // <h2>
-  "prose-h2:text-gray-900",
-  "dark:prose-h2:text-gray-50",
-  "prose-h2:text-2xl",
-  "prose-h2:leading-snug",
-  "md:prose-h2:text-4xl",
-  "md:prose-h2:leading-normal",
 
-  // <li>
-  "prose-li:marker:text-inherit",
+  "marker:text-gray-600",
+  "dark:marker:text-gray-400",
+
+  // <hr>
+  "prose-hr:my-6",
+  "prose-hr:border-gray-200",
+  "prose-hr:border-solid",
+  "dark:prose-hr:border-gray-800",
+
+  // <pre>
+  "prose-pre:bg-blue-900",
+
+  // <code>
+  "prose-code:px-1.5",
+  "prose-code:text-inherit",
+  "dark:prose-code:text-inherit",
+  "dark:prose-code:border-gray-600",
+  "prose-code:before:content-none",
+  "prose-code:after:content-none",
 
   // <a>
   "prose-a:text-inherit",
+  "hover:prose-a:text-brand-700",
+  "dark:prose-a:text-inherit",
+  "dark:hover:prose-a:text-brand-500",
 
   // <strong>
-  "prose-strong:text-inherit",
+  "prose-strong:text-current",
+  "dark:prose-strong:text-current",
+
+  // <h1>, <h2>, <h3>
+  "prose-h1:text-3xl",
+  "prose-h2:text-2xl",
+  "prose-h3:text-xl",
+  "prose-headings:text-gray-900",
+  "dark:prose-headings:text-gray-50",
+
+  // <th>, <td>
+  "prose-th:px-3",
+  "prose-td:px-3",
 ];
 
 export default function TextContent({

src/pages/manifesto.tsx

@@ -18,7 +18,7 @@ export default function Manifesto() {
       <Jumbotron>
         <Headline className="max-w-2xl">The OpenTofu Manifesto</Headline>
       </Jumbotron>
-      <TextContent className="max-w-2xl">
+      <TextContent className="mb-4 md:mb-10 mx-auto">
         <p>
           Terraform was open-sourced in 2014 under the Mozilla Public License
           (v2.0) (the “MPL”). Over the next ~9 years, it built up a community

src/theme/Admonition/index.tsx

@@ -44,19 +44,19 @@ type AdmonitionConfig = {
 const AdmonitionConfigs: Record<string, AdmonitionConfig> = {
   note: {
     className:
-      "bg-sky-100 border-sky-300 text-sky-700 dark:bg-sky-950 dark:border-sky-700 dark:text-sky-200",
+      "bg-sky-100 border-sky-300 text-sky-800 dark:bg-sky-950 dark:border-sky-700 dark:text-sky-100",
     iconComponent: NoteIcon,
     label: "Note",
   },
   danger: {
     className:
-      "bg-red-100 border-red-300 text-red-700 dark:bg-red-950 dark:border-red-700 dark:text-red-200",
+      "bg-red-100 border-red-300 text-red-800 dark:bg-red-950 dark:border-red-700 dark:text-red-100",
     iconComponent: DangerIcon,
     label: "Danger",
   },
   warning: {
     className:
-      "bg-yellow-100 border-yellow-500 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-700 dark:text-yellow-200",
+      "bg-yellow-100 border-yellow-500 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-700 dark:text-yellow-100",
     iconComponent: CautionIcon,
     label: "Warning",
   },
@@ -120,7 +120,7 @@ export default function Admonition(props: Props) {
   return (
     <div
       className={clsx(
-        "flex flex-col py-2 px-3 not-prose border [&+&]:mt-3",
+        "flex flex-col py-2 px-3 not-prose border gap-1 [&+&]:mt-3 [&_a:hover]:text-gray-900 dark:[&_a:hover]:text-gray-50",
         typeConfig.className
       )}
       role="alert"
@@ -131,7 +131,7 @@ export default function Admonition(props: Props) {
         </span>
         {titleLabel}
       </div>
-      <div>{children}</div>
+      <div className="leading-relaxed">{children}</div>
     </div>
   );
 }

src/theme/BlogLastPost/index.tsx

@@ -26,11 +26,15 @@ export default function BlogLastPost({ item }) {
               >
                 {formattedDate}
               </time>
-              <Link to={permalink}>
-                <h3 className="leading-snug text-3xl font-bold my-2 line-clamp-5">
+
+              <h3 className="leading-snug text-3xl font-bold my-2 line-clamp-5">
+                <Link
+                  to={permalink}
+                  className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500"
+                >
                   {title}
-                </h3>
-              </Link>
+                </Link>
+              </h3>
               <p className="text-gray-600 dark:text-gray-500 mb-4 line-clamp-3">
                 {description}
               </p>

src/theme/BlogListItem/index.tsx

@@ -21,11 +21,15 @@ export default function BlogListItem({ item }) {
         >
           {formattedDate}
         </time>
-        <Link to={permalink}>
-          <h3 className="leading-snug text-xl font-bold my-2 line-clamp-3">
+
+        <h3 className="leading-snug text-xl font-bold my-2 line-clamp-3">
+          <Link
+            to={permalink}
+            className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500"
+          >
             {title}
-          </h3>
-        </Link>
+          </Link>
+        </h3>
         <p className="text-gray-600 dark:text-gray-500 mb-4 line-clamp-3">
           {description}
         </p>

src/theme/BlogPostItem/Content/index.tsx

@@ -8,7 +8,7 @@ export default function BlogPostItemContent({ children }) {
   const { isBlogPostPage } = useBlogPost();
   return (
     <TextContent
-      className="my-4 md:my-10 dark:prose-invert prose-code:px-1.5 prose-code:before:content-none prose-code:after:content-none"
+      className="my-4 md:my-10 mx-auto"
       id={isBlogPostPage ? blogPostContainerID : undefined}
       itemProp="articleBody"
     >

src/theme/BlogPostItem/index.tsx

@@ -50,7 +50,7 @@ function ShareButton({ platform, title, url }) {
       href={href}
       target="_blank"
       rel="noopener"
-      className="rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-300 p-2 hover:bg-gray-150 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-150 transition-colors"
+      className="rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-300 p-2 hover:bg-brand-700 dark:hover:bg-brand-500 hover:text-gray-50 dark:hover:text-gray-900 transition-colors"
       aria-label={`Share on ${platform.name}`}
     >
       <div aria-hidden className="w-6">

src/theme/DocBreadcrumbs/index.tsx

@@ -24,7 +24,11 @@ function BreadcrumbsItemLink({
     );
   }
   return href ? (
-    <Link href={href} itemProp="item">
+    <Link
+      href={href}
+      className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500"
+      itemProp="item"
+    >
       <span itemProp="name">{children}</span>
     </Link>
   ) : (

src/theme/DocCard/index.js

@@ -1,45 +1,28 @@
 import React from "react";
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import {
   findFirstCategoryLink,
   useDocById,
 } from "@docusaurus/theme-common/internal";
-import isInternalUrl from "@docusaurus/isInternalUrl";
-import { translate } from "@docusaurus/Translate";
-import styles from "./styles.module.css";
-function CardContainer({ href, children }) {
+
+function CardLayout({ href, title, description }) {
   return (
-    <Link
-      href={href}
-      className={clsx(
-        "card padding--lg",
-        "rounded-none text-gray-800 dark:text-gray-100 hover:text-gray-900 hover:dark:text-gray-50",
-        styles.cardContainer
-      )}
-    >
-      {children}
-    </Link>
-  );
-}
-function CardLayout({ href, icon, title, description }) {
-  return (
-    <CardContainer href={href}>
-      <h2
-        className={clsx("text--truncate", styles.cardTitle, "mb-4")}
-        title={title}
-      >
-        {title}
+    <div className="not-prose relative group flex flex-col gap-2 border border-gray-900 dark:border-gray-50 rounded-md p-4">
+      <h2>
+        <Link
+          href={href}
+          className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500 font-bold"
+        >
+          <span aria-hidden class="absolute inset-0"></span>
+          {title}
+        </Link>
       </h2>
       {description && (
-        <p
-          className={clsx(styles.cardDescription, "line-clamp-2")}
-          title={description}
-        >
+        <p className="text-gray-700 dark:text-gray-300 text-base">
           {description}
         </p>
       )}
-    </CardContainer>
+    </div>
   );
 }
 function CardCategory({ item }) {
@@ -49,32 +32,14 @@ function CardCategory({ item }) {
     return null;
   }
   return (
-    <CardLayout
-      href={href}
-      icon="🗃️"
-      title={item.label}
-      description={
-        item.description ??
-        translate(
-          {
-            message: "{count} items",
-            id: "theme.docs.DocCard.categoryDescription",
-            description:
-              "The default description for a category card in the generated index about how many items this category includes",
-          },
-          { count: item.items.length }
-        )
-      }
-    />
+    <CardLayout href={href} title={item.label} description={item.description} />
   );
 }
 function CardLink({ item }) {
-  const icon = isInternalUrl(item.href) ? "📄️" : "🔗";
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout
       href={item.href}
-      icon={icon}
       title={item.label}
       description={item.description ?? doc?.description}
     />