feat: allow styling header and selected tab color (#120)

Author: bashmish

docs/docs/api/styling.md

@@ -12,6 +12,7 @@ The following custom CSS properties are available:
 | `--ave-button-active-background` | Color of the `:focus` and `:hover` button       |
 | `--ave-button-background`        | Background of the button (code snippet, events) |
 | `--ave-button-color`             | Color of the button (code snippet, events)      |
+| `--ave-header-background`        | Background of the header used for tag name      |
 | `--ave-header-color`             | Header text color used for tag name             |
 | `--ave-item-color`               | API items content color (main text)             |
 | `--ave-label-color`              | API items labels color                          |
@@ -20,6 +21,7 @@ The following custom CSS properties are available:
 | `--ave-monospace-font`           | Monospace font stack for the API items          |
 | `--ave-primary-color`            | Primary color, used for header and active tab   |
 | `--ave-tab-color`                | Inactive tabs color                             |
+| `--ave-tab-selected-color`       | Selected tab color                              |
 | `--ave-tab-indicator-size`       | Size of the selected tab indicator              |
 
 ## CSS shadow parts

src/api-viewer-tab.ts

@@ -53,7 +53,7 @@ export class ApiViewerTab extends LitElement {
       }
 
       :host([selected]) {
-        color: var(--ave-primary-color);
+        color: var(--ave-tab-selected-color, var(--ave-primary-color));
       }
 
       :host([selected])::before {

src/styles/shared-styles.ts

@@ -38,7 +38,7 @@ export default css`
     align-items: center;
     justify-content: space-between;
     padding: 0.75rem;
-    background: var(--ave-primary-color);
+    background: var(--ave-header-background, var(--ave-primary-color));
     border-top-left-radius: var(--ave-border-radius);
     border-top-right-radius: var(--ave-border-radius);
   }