wip: refine dark mode component styling

Author: Madhurchandran

assets/scss/_community.scss

@@ -18,23 +18,20 @@
   --bs-primary: #{$white};
   --bs-primary-rgb: 255, 255, 255;
 
-  /* Count badges */
-  .badge, 
-  .btn .badge, 
-  .filter-topics .badge, 
-  .topics-list .badge,
-  span[class*="badge"] {
+  /* Navigation count badges */
+  .nav.nav-pills.shadow-sm.rounded.bg-body .nav-link > .badge.bg-primary {
     background-color: #0d6efd !important;
     color: $white !important;
     border: none !important;
     border-radius: $border-radius-pill !important;
   }
+
   /* Topic tags */
   .topic-tag,
   .badge.bg-secondary.bg-opacity-10,
   span[class*="topic-tag"] {
-    background-color: rgba($white, 0.12);
-    color: $white;
+    background-color: $dark !important;
+    color: $white !important;
     border: 1px solid rgba($white, 0.2);
     border-radius: $border-radius-pill;
     &.active {
@@ -78,6 +75,12 @@
     }
 
     /* Leadership badges */
+  .sig-card-wrapper a.badge.bg-primary.bg-opacity-10 {
+    background-color: $dark !important;
+    color: $white !important;
+    border: 1px solid rgba($white, 0.2) !important;
+  }
+
     .chair-tag,
     .tech-lead-tag,
     .sig-leader {

assets/scss/_kep_filter.scss

@@ -228,8 +228,8 @@
   font-size: 0.85rem;
   font-weight: 600;
   color: $primary;
-  background: #fff;
-  border: 1px solid $slate-200;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.15s ease;

assets/scss/_kep_page.scss

@@ -3,8 +3,8 @@
   padding: 0;
 
   .kep-banner-container {
-    background-color: #fff;
-    border: 1px solid #e0e4e8;
+    background-color: var(--bs-body-bg);
+    border: 1px solid var(--bs-border-color);
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
@@ -24,11 +24,11 @@
     position: relative;
 
     &.border-start-refined {
-      border-left: 1px solid #e0e4e8;
+      border-left: 1px solid var(--bs-border-color);
 
       @media (max-width: 991px) {
         border-left: none;
-        border-top: 1px solid #e0e4e8;
+        border-top: 1px solid var(--bs-border-color);
       }
     }
   }
@@ -38,7 +38,7 @@
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.15em;
-    color: #8a94a6;
+    color: var(--bs-secondary-color);
     margin-bottom: 2rem;
     display: block;
     font-weight: 600;
@@ -49,7 +49,7 @@
     font-size: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: #a0aec0;
+    color: var(--bs-secondary-color);
     margin-bottom: 0.75rem;
     font-weight: 600;
   }
@@ -89,9 +89,9 @@
     }
 
     &.kep-status-generic {
-      background-color: $slate-50;
-      color: $slate-600;
-      border: 1px solid $slate-200;
+      background-color: #198754;
+      color: #fff;
+      border: 1px solid #198754;
     }
   }
 
@@ -110,7 +110,7 @@
     padding: 0.25rem 0;
 
     .kep-data-label {
-      color: $slate-500;
+      color: var(--bs-secondary-color);
       display: flex;
       align-items: center;
 
@@ -144,13 +144,13 @@
 
     .kep-data-value {
       font-weight: 500;
-      color: $slate-800;
+      color: var(--bs-body-color);
 
       code {
-        background: $slate-100;
+        background: var(--bs-tertiary-bg);
         padding: 0.1rem 0.4rem;
         border-radius: 3px;
-        color: $slate-600;
+        color: var(--bs-body-color);
       }
     }
   }
@@ -159,7 +159,7 @@
   .kep-main-link {
     font-size: 1.25rem;
     font-weight: 700;
-    color: $slate-900;
+    color: var(--bs-body-color);
     text-decoration: none;
     transition: color 0.2s ease;
 
@@ -171,7 +171,7 @@
   .kep-tag-link {
     display: inline-block;
     padding: 0.25rem 0.5rem;
-    background-color: $slate-500;
+    background-color: var(--bs-secondary-color);
     border-radius: 4px;
     font-size: 0.75rem;
     font-weight: 500;
@@ -180,7 +180,7 @@
     transition: all 0.2s ease;
 
     &:hover {
-      background-color: $slate-600;
+      background-color: var(--bs-body-color);
       color: #ffffff;
       transform: translateY(-1px);
     }
@@ -194,7 +194,7 @@
 
   .kep-person-link {
     font-size: 0.85rem;
-    color: $slate-600;
+    color: var(--bs-body-color);
     text-decoration: none;
     display: flex;
     align-items: center;
@@ -281,7 +281,7 @@
 
     h2 {
       font-size: 1.5rem;
-      color: #1a1a1a;
+      color: var(--bs-body-color);
     }
 
     p {

assets/scss/_kep_table.scss

@@ -460,9 +460,10 @@
         // Required because DataTables overrides the active pagination background.
         &.current {
           &, &:hover {
-            color: var(--bs-light) !important;
-            background: var(--bs-primary) !important;
-            border-color: var(--bs-primary);
+            color: var(--bs-body-color) !important;
+            background: var(--bs-tertiary-bg) !important;
+            border-color: var(--bs-border-color) !important;
+            box-shadow: none !important;
           }
         }