docs: increase text contrast and refactor js tabs functions

Author: JavierMtzRdz

docs/_sass/custom/custom.scss

@@ -34,8 +34,7 @@ h2,
 h3,
 h4,
 h5,
-h6,
-h7 {
+h6 {
     font-family: 'Source Serif Pro', serif !important;
     color: #002676 !important;
     line-height: 1.15;
@@ -69,13 +68,13 @@ aside {
 
         &:hover {
             background-color: rgba(0, 38, 118, 0.05);
-            color: #C41230;
+            color: #941120;
             text-decoration: none;
         }
 
         &.active {
             font-weight: 600;
-            color: #C41230;
+            color: #941120;
             background-color: rgba(196, 18, 48, 0.03);
         }
     }
@@ -177,10 +176,10 @@ pre code {
 .note {
     background-color: rgba(0, 123, 192, 0.05);
     border-left-color: #007BC0;
-    color: #007BC0;
+    color: #005F95;
 
     >p:first-child strong:first-child {
-        color: #007BC0;
+        color: #005F95;
     }
 }
 
@@ -201,10 +200,11 @@ pre code {
     color: #941120;
 
     >p:first-child strong:first-child {
-        color: #C41230;
+        color: #941120;
     }
 }
 
+
 .tip {
     background-color: rgba(54, 143, 51, 0.05);
     border-left-color: #368f33;

docs/_sass/custom/tabs.scss

@@ -23,7 +23,7 @@
             transition: all 0.2s ease;
 
             &:hover {
-                color: #007BC0;
+                color: #005F95;
                 background-color: rgba(0, 123, 192, 0.05);
             }
 

docs/assets/js/tabs.js

@@ -1,25 +1,31 @@
 // Simple Tab Switching Logic
-document.addEventListener('DOMContentLoaded', function () {
-    const tabContainers = document.querySelectorAll('.code-tabs');
+function activateTab(clickedButton, container) {
+    const buttons = container.querySelectorAll('.tab-header button');
+    const contents = container.querySelectorAll('.tab-content');
 
-    tabContainers.forEach(container => {
-        const headers = container.querySelector('.tab-header');
-        const buttons = headers.querySelectorAll('button');
-        const contents = container.querySelectorAll('.tab-content');
+    // Deactivate all
+    buttons.forEach(btn => btn.classList.remove('active'));
+    contents.forEach(content => content.classList.remove('active'));
 
-        buttons.forEach(button => {
-            button.addEventListener('click', () => {
-                buttons.forEach(btn => btn.classList.remove('active'));
-                contents.forEach(content => content.classList.remove('active'));
+    // Activate clicked button
+    clickedButton.classList.add('active');
 
-                button.classList.add('active');
+    // Activate corresponding content
+    const tabId = clickedButton.getAttribute('data-tab');
+    const content = container.querySelector(`.tab-content[data-tab="${tabId}"]`);
+    if (content) {
+        content.classList.add('active');
+    }
+}
 
-                const tabId = button.getAttribute('data-tab');
-                const content = container.querySelector(`.tab-content[data-tab="${tabId}"]`);
-                if (content) {
-                    content.classList.add('active');
-                }
-            });
-        });
+function initTabContainer(container) {
+    const buttons = container.querySelectorAll('.tab-header button');
+    buttons.forEach(button => {
+        button.addEventListener('click', () => activateTab(button, container));
     });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const tabContainers = document.querySelectorAll('.code-tabs');
+    tabContainers.forEach(initTabContainer);
 });