docs(core): Fix dark theme and improve spacing

docs/src/css/theme.css

@@ -56,6 +56,9 @@ html[data-theme='dark'] {
     --ifm-footer-background-color: var(--ifm-background-color);
     --color-docsearch-border: #232347;
     --ifm-footer-title-color: #ffffff;
+
+    /* Adjust primary color variants for dark mode */
+    --ifm-color-primary-lightest: rgba(23, 193, 255, 0.1);
 }
 
 /* Light mode specific */

docs/src/pages/index.module.css

@@ -37,7 +37,7 @@
     padding: 12px;
     border-radius: 6px;
     border: 1px solid var(--ifm-color-warning-darkest);
-    background-color: #d99e0022;
+    background-color: var(--ifm-color-warning-lightest);
 }
 
 .description {
@@ -67,8 +67,8 @@
 }
 
 .mainCard {
-    background: white;
-    border: 1px solid #e1e5e9;
+    background: var(--ifm-card-background-color);
+    border: 1px solid var(--border-color);
     border-radius: 12px;
     padding: 2rem;
     text-decoration: none;
@@ -80,8 +80,8 @@
 }
 
 .mainCard:hover {
-    border-color: #17c1ff;
-    box-shadow: 0 4px 12px rgba(23, 193, 255, 0.15);
+    border-color: var(--ifm-color-primary);
+    box-shadow: 0 2px 16px var(--ifm-color-primary-lightest);
     text-decoration: none;
     color: inherit;
     transform: translateY(-2px);
@@ -91,23 +91,23 @@
     width: 48px;
     height: 48px;
     margin-bottom: 1.5rem;
-    color: #17c1ff;
+    color: var(--ifm-color-primary);
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(23, 193, 255, 0.1);
+    background: var(--ifm-color-primary-lightest);
     border-radius: 8px;
 }
 
 .cardTitle {
     font-size: 1.25rem;
     font-weight: 600;
-    color: #1c1e21;
+    color: var(--ifm-heading-color);
     margin-bottom: 0.75rem;
 }
 
 .cardDescription {
-    color: #656d76;
+    color: var(--ifm-color-content);
     line-height: 1.5;
     flex-grow: 1;
 }
@@ -115,7 +115,7 @@
 .sectionTitle {
     font-size: 2rem;
     font-weight: 700;
-    color: #1c1e21;
+    color: var(--ifm-heading-color);
     margin-bottom: 2rem;
 }
 
@@ -131,16 +131,25 @@
 
 .conceptItem {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 1rem;
-    padding: 0rem 1rem;
+    padding: 1rem;
+    border-radius: 8px;
+    text-decoration: none;
+    color: inherit;
+    transition: all 0.2s ease;
+}
+
+.conceptItem:hover {
+    text-decoration: none;
+    color: inherit;
+    transform: translateY(-1px);
 }
 
 .conceptIcon {
     width: 24px;
     height: 24px;
-    color: #17c1ff;
-    margin-top: 2px;
+    color: var(--ifm-color-primary);
     flex-shrink: 0;
 }
 
@@ -151,70 +160,26 @@
 .conceptTitle {
     font-size: 1rem;
     font-weight: 600;
-    color: #1c1e21;
-    margin-bottom: 0.5rem;
+    color: var(--ifm-heading-color);
+    margin-bottom: 0.25rem;
     text-decoration: none;
 }
 
 .conceptTitle:hover {
-    color: #17c1ff;
     text-decoration: none;
 }
 
 .conceptDescription {
-    color: #656d76;
+    color: var(--ifm-color-content);
     font-size: 0.875rem;
     line-height: 1.4;
+    margin-bottom: 0;
 }
 
 .recipesSection {
     margin-bottom: 4rem;
 }
 
-.recipesGrid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 1rem;
-}
-
-.recipeItem {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 0rem 1rem;
-}
-
-.recipeIcon {
-    width: 24px;
-    height: 24px;
-    color: #17c1ff;
-    margin-top: 2px;
-    flex-shrink: 0;
-}
-
-.recipeContent {
-    flex: 1;
-}
-
-.recipeTitle {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #1c1e21;
-    margin-bottom: 0.5rem;
-    text-decoration: none;
-}
-
-.recipeTitle:hover {
-    color: #17c1ff;
-    text-decoration: none;
-}
-
-.recipeDescription {
-    color: #656d76;
-    font-size: 0.875rem;
-    line-height: 1.4;
-}
-
 @media screen and (max-width: 996px) {
     .heroBanner {
         padding: 2rem;
@@ -233,8 +198,7 @@
         gap: 1rem;
     }
 
-    .conceptsGrid,
-    .recipesGrid {
+    .conceptsGrid {
         grid-template-columns: 1fr;
         gap: 1rem;
     }

docs/src/pages/index.tsx

@@ -259,85 +259,85 @@ export default function Home(): JSX.Element {
                     <section className={styles.conceptsSection}>
                         <h2 className={styles.sectionTitle}>Core Concepts</h2>
                         <div className={styles.conceptsGrid}>
-                            <div className={styles.conceptItem}>
+                            <Link to="/guides/developer-guide/custom-fields/" className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
                                     <SettingsIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/developer-guide/custom-fields/" className={styles.conceptTitle}>
+                                    <h3 className={styles.conceptTitle}>
                                         Custom Fields
-                                    </Link>
+                                    </h3>
                                     <p className={styles.conceptDescription}>Adding custom data to any Vendure entity.</p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.conceptItem}>
+                            <Link to="/guides/developer-guide/plugins/" className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
                                     <PluginIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/developer-guide/plugins/" className={styles.conceptTitle}>
+                                    <h3 className={styles.conceptTitle}>
                                         Plugins
-                                    </Link>
+                                    </h3>
                                     <p className={styles.conceptDescription}>The core of Vendure's extensibility.</p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.conceptItem}>
+                            <Link to="/guides/core-concepts/products/" className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
                                     <ProductIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/products/" className={styles.conceptTitle}>
+                                    <h3 className={styles.conceptTitle}>
                                         Products
-                                    </Link>
+                                    </h3>
                                     <p className={styles.conceptDescription}>Configure catalog.</p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.conceptItem}>
+                            <Link to="/guides/core-concepts/customers/" className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
                                     <UsersIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/customers/" className={styles.conceptTitle}>
+                                    <h3 className={styles.conceptTitle}>
                                         Customers
-                                    </Link>
+                                    </h3>
                                     <p className={styles.conceptDescription}>Multi customer configuration.</p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.conceptItem}>
+                            <Link to="/guides/core-concepts/payment/" className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
                                     <PaymentIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/payment/" className={styles.conceptTitle}>
+                                    <h3 className={styles.conceptTitle}>
                                         Payments
-                                    </Link>
+                                    </h3>
                                     <p className={styles.conceptDescription}>Payment integrations and API.</p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.conceptItem}>
+                            <Link to="/guides/core-concepts/orders/" className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
                                     <CheckoutIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/orders/" className={styles.conceptTitle}>
+                                    <h3 className={styles.conceptTitle}>
                                         Orders
-                                    </Link>
+                                    </h3>
                                     <p className={styles.conceptDescription}>Business logic of checkout.</p>
                                 </div>
-                            </div>
+                            </Link>
                         </div>
                     </section>
 
                     <section className={styles.recipesSection}>
                         <h2 className={styles.sectionTitle}>How-To Guides</h2>
-                        <div className={styles.recipesGrid}>
-                            <div className={styles.recipeItem}>
-                                <div className={styles.recipeIcon}>
+                        <div className={styles.conceptsGrid}>
+                            <Link to="/guides/how-to/publish-plugin/" className={styles.conceptItem}>
+                                <div className={styles.conceptIcon}>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="20"
@@ -353,18 +353,18 @@ export default function Home(): JSX.Element {
                                         <polygon points="16.24,7.76 14.12,14.12 7.76,16.24 9.88,9.88"/>
                                     </svg>
                                 </div>
-                                <div className={styles.recipeContent}>
-                                    <Link to="/guides/how-to/publish-plugin/" className={styles.recipeTitle}>
+                                <div className={styles.conceptContent}>
+                                    <h3 className={styles.conceptTitle}>
                                         Publish Plugin
-                                    </Link>
-                                    <p className={styles.recipeDescription}>
+                                    </h3>
+                                    <p className={styles.conceptDescription}>
                                         Learn how to publish your custom plugin to npm.
                                     </p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.recipeItem}>
-                                <div className={styles.recipeIcon}>
+                            <Link to="/guides/how-to/digital-products/" className={styles.conceptItem}>
+                                <div className={styles.conceptIcon}>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="20"
@@ -379,18 +379,18 @@ export default function Home(): JSX.Element {
                                         <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
                                     </svg>
                                 </div>
-                                <div className={styles.recipeContent}>
-                                    <Link to="/guides/how-to/digital-products/" className={styles.recipeTitle}>
+                                <div className={styles.conceptContent}>
+                                    <h3 className={styles.conceptTitle}>
                                         Digital Products
-                                    </Link>
-                                    <p className={styles.recipeDescription}>
+                                    </h3>
+                                    <p className={styles.conceptDescription}>
                                         Sell licenses, services, and other non-physical goods.
                                     </p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.recipeItem}>
-                                <div className={styles.recipeIcon}>
+                            <Link to="/guides/how-to/configurable-products/" className={styles.conceptItem}>
+                                <div className={styles.conceptIcon}>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="20"
@@ -408,18 +408,18 @@ export default function Home(): JSX.Element {
                                         <circle cx="17" cy="20" r="1"/>
                                     </svg>
                                 </div>
-                                <div className={styles.recipeContent}>
-                                    <Link to="/guides/how-to/configurable-products/" className={styles.recipeTitle}>
+                                <div className={styles.conceptContent}>
+                                    <h3 className={styles.conceptTitle}>
                                         Configurable Products
-                                    </Link>
-                                    <p className={styles.recipeDescription}>
+                                    </h3>
+                                    <p className={styles.conceptDescription}>
                                         Create products with multiple variants and options.
                                     </p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.recipeItem}>
-                                <div className={styles.recipeIcon}>
+                            <Link to="/guides/how-to/paginated-list/" className={styles.conceptItem}>
+                                <div className={styles.conceptIcon}>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="20"
@@ -435,18 +435,18 @@ export default function Home(): JSX.Element {
                                         <polyline points="9,22 9,12 15,12 15,22"/>
                                     </svg>
                                 </div>
-                                <div className={styles.recipeContent}>
-                                    <Link to="/guides/how-to/paginated-list/" className={styles.recipeTitle}>
+                                <div className={styles.conceptContent}>
+                                    <h3 className={styles.conceptTitle}>
                                         Paginated Lists
-                                    </Link>
-                                    <p className={styles.recipeDescription}>
+                                    </h3>
+                                    <p className={styles.conceptDescription}>
                                         Implement efficient pagination for large datasets.
                                     </p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.recipeItem}>
-                                <div className={styles.recipeIcon}>
+                            <Link to="/guides/how-to/codegen/" className={styles.conceptItem}>
+                                <div className={styles.conceptIcon}>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="20"
@@ -463,18 +463,18 @@ export default function Home(): JSX.Element {
                                         <rect x="14" y="7" width="3" height="5"/>
                                     </svg>
                                 </div>
-                                <div className={styles.recipeContent}>
-                                    <Link to="/guides/how-to/codegen/" className={styles.recipeTitle}>
+                                <div className={styles.conceptContent}>
+                                    <h3 className={styles.conceptTitle}>
                                         Code Generation
-                                    </Link>
-                                    <p className={styles.recipeDescription}>
+                                    </h3>
+                                    <p className={styles.conceptDescription}>
                                         Generate TypeScript types from your GraphQL schema.
                                     </p>
                                 </div>
-                            </div>
+                            </Link>
 
-                            <div className={styles.recipeItem}>
-                                <div className={styles.recipeIcon}>
+                            <Link to="/guides/how-to/multi-vendor-marketplaces/" className={styles.conceptItem}>
+                                <div className={styles.conceptIcon}>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="20"
@@ -491,15 +491,15 @@ export default function Home(): JSX.Element {
                                         <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
                                     </svg>
                                 </div>
-                                <div className={styles.recipeContent}>
-                                    <Link to="/guides/how-to/multi-vendor-marketplaces/" className={styles.recipeTitle}>
+                                <div className={styles.conceptContent}>
+                                    <h3 className={styles.conceptTitle}>
                                         Multi-vendor Marketplaces
-                                    </Link>
-                                    <p className={styles.recipeDescription}>
+                                    </h3>
+                                    <p className={styles.conceptDescription}>
                                         Create a marketplace platform where multiple sellers can sell their products.
                                     </p>
                                 </div>
-                            </div>
+                            </Link>
                         </div>
                     </section>
                 </div>