docs: Use theme's variables to define tab colors

This makes it look nice for the dark themes too [doc only]
mozilla · Nov 11, 2024 · b7a98c7 · b7a98c7
1 parent c01df7b
commit b7a98c7
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/docs/shared/glean.css b/docs/shared/glean.css
@@ -15,6 +15,25 @@ a.header code:hover {
     background-color: rgba(230, 230, 230, 1);
 }
 
+:root {
+    --tab-bg: #f1f1f1;
+    --tab-fg: #000;
+    --tab-bg-disabled: var(--tab-bg);
+    --tab-fg-disabled: #ccc;
+    --tab-border: #ccc;
+    --tab-bg-active: #ccc;
+    --tab-fg-active: #000;
+}
+
+.coal, .navy, .ayu {
+    --tab-bg: var(--bg);
+    --tab-fg: var(--fg);
+    --tab-bg-disabled: var(--tab-bg);
+    --tab-fg-disabled: #505254;
+    --tab-bg-active: #e6e6e6;
+    --tab-fg-active: #000;
+}
+
 /* Style the tab */
 .tabs {
     display: flex;
@@ -23,15 +42,17 @@ a.header code:hover {
 }
 
 .tabbar {
-    border: 1px solid #ccc;
-    background-color: #f1f1f1;
+    border: 1px solid var(--tab-border);
+    background-color: var(--tab-bg);
+    color: var(--tab-fg);
     width: 100%;
     box-sizing: border-box;
 }
 
 /* Style the buttons that are used to open the tab content */
 .tabbar button {
     background-color: inherit;
+    color: var(--tab-fg);
     float: left;
     border: none;
     outline: none;
@@ -42,7 +63,8 @@ a.header code:hover {
 
 /* Change background color of buttons on hover */
 .tabbar button:hover {
-    background-color: #ddd;
+    background-color: var(--tab-bg-active);
+    color: var(--tab-fg-active);
 }
 
 .tabbar button.disabled:hover {
@@ -51,11 +73,13 @@ a.header code:hover {
 
 /* Create an active/current tablink class */
 .tabbar button.active {
-    background-color: #ccc;
+    background-color: var(--tab-bg-active);
+    color: var(--tab-fg-active);
 }
 
 .tabbar button.disabled {
-    color: #ccc;
+    background-color: var(--tab-bg-disabled);
+    color: var(--tab-fg-disabled);
     cursor: default;
 }
 
@@ -68,7 +92,7 @@ a.header code:hover {
 .tab {
     display: none;
     width: 100%;
-    border: 1px solid #ccc;
+    border: 1px solid var(--tab-border);
     border-top: none;
     padding: 6px 12px;
     box-sizing: border-box;