moved documentation table styles to the another file, used the existing theme colors, changed pills look, made some tweaks for better dark and light theme styling (#2081)

qdrant-landing/themes/qdrant-2024/assets/css/_theme-variables.scss

@@ -45,12 +45,14 @@ $success-10: #00210f;
 $success-30: #00522f;
 $success-50: #008a53;
 $success-70: #50bf83;
+$success-80: #7de2ad;
 $success-90: #befad6;
 
 $warning-10: #311300;
 $warning-30: #733501;
 $warning-50: #e0700d;
 $warning-70: #ff8d39;
+$warning-80: #ffb400;
 $warning-90: #ffdbc7;
 
 $error-10: #410002;

qdrant-landing/themes/qdrant-2024/assets/css/documentation.scss

@@ -14,68 +14,3 @@
 @import 'partials/documentation/docs-footer';
 @import 'partials/video';
 @import 'search/dark-theme';
-
-// Table Custom Styling
-.documentation {
-    table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 1rem 0;
-        
-        th {
-            text-align: left;
-            padding: 8px 10px;
-        }
-
-        td {
-            padding: 8px 10px;
-            vertical-align: middle;
-            line-height: 1.4;
-
-            // Link styling
-            a {
-                color: #DC244C; 
-                text-decoration: none;
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        tr {
-            // transition for the background color change
-            transition: background-color 0.2s ease;
-
-            &:hover {
-                // hover color highlight
-                background-color: rgba(59, 130, 246, 0.05); 
-                
-                // make the link slightly more prominent on hover
-                td a {
-                    color: darken(#ef4444, 10%);
-                }
-            }
-        }
-        
-        // Ensure the header row doesn't highlight on hover
-        thead tr:hover {
-            background-color: transparent;
-        }
-    }
-
-    // Stack Pill Styling
-    .pill {
-        display: inline-block;
-        padding: 1px 8px;
-        border-radius: 12px;
-        border: 1px solid #DC244C;
-        color: #DC244C;
-        //background-color: rgba(59, 130, 246, 0.1);
-        font-size: 0.85rem;
-    }
-
-    // Level Color-Coding
-    .text-green { color: #10b981 }
-    .text-yellow { color: #f59e0b }
-    .text-red { color: #ef4444 }
-}

qdrant-landing/themes/qdrant-2024/assets/css/partials/documentation/_documentation.scss

@@ -1,4 +1,5 @@
 @use '../../helpers/functions' as *;
+@use 'sass:color';
 
 .documentation {
   background-color: $neutral-10;
@@ -19,6 +20,68 @@
     flex-wrap: wrap;
   }
 
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+
+    th {
+      text-align: left;
+      padding: 8px 10px;
+    }
+
+    td {
+      padding: 8px 10px;
+      vertical-align: middle;
+      line-height: 1.4;
+
+      // Link styling
+      a {
+        color: $primary-50;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    tr {
+      // transition for the background color change
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        // hover color highlight
+        background-color: $neutral-20;
+
+        // make the link slightly more prominent on hover
+        td a {
+          color: darken($primary-60, 10%);
+        }
+      }
+    }
+
+    // Ensure the header row doesn't highlight on hover
+    thead tr:hover {
+      background-color: transparent;
+    }
+  }
+
+  // Stack Pill Styling
+  .pill {
+    display: inline-block;
+    padding: 1px 8px;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    background-color: $neutral-30;
+    color: $neutral-94;
+    border: 0;
+  }
+
+  // Level Color-Coding
+  .text-green { color: $success-80; }
+  .text-yellow { color: $warning-80; }
+  .text-red { color: $error-50; }
+
   @include media-breakpoint-up(xl) {
     &__container {
       max-width: 100vw !important;
@@ -52,5 +115,21 @@
         box-shadow: 0 0 0 2px $neutral-70;
       }
     }
+
+    table {
+      tr:hover {
+        background-color: $neutral-98;
+      }
+    }
+
+    .pill {
+      background-color: $neutral-70;
+      border: 0;
+      color: $neutral-100;
+    }
+
+    .text-green { color: color.adjust($success-50, $saturation: 5%, $lightness: 8%); }
+    .text-yellow { color: color.adjust($warning-50, $saturation: 5%, $lightness: 8%); }
+    .text-red { color: color.adjust($error-50, $lightness: 3%); }
   }
 }