feat(accordion): allow accordion active color customisation through n…

…ew cssprop

index.html

@@ -43,7 +43,9 @@
         sgds-sidenav {
             --sidenav-sticky-top: 1.5rem;
         }
-
+        sgds-accordion {
+            --accordion-active-color: blue;
+        }
         /* sgds-sidenav-item::part(sidenav-btn) {
             color: red;
             border-left-color: red;

src/components/Accordion/sgds-accordion-item.scss

@@ -19,6 +19,9 @@
 
 .accordion-button {
   line-height: var(--accordion-item-line-height);
+  &:not(.collapsed){
+    color: var(--accordion-active-color);
+  }
 }
 
 .accordion-button:not(.collapsed) {

src/components/Accordion/sgds-accordion.scss

@@ -0,0 +1,4 @@
+:host {
+    /** NEW in 1.2.4 */
+    --accordion-active-color: var(--sgds-primary);
+  }

src/components/Accordion/sgds-accordion.ts

@@ -3,14 +3,18 @@ import { property, queryAssignedNodes } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import SgdsElement from "../../base/sgds-element";
 import type SgdsAccordionItem from "./sgds-accordion-item";
+import styles from "./sgds-accordion.scss";
 
 /**
  * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
  * @slot default - slot for accordion-item
+ *
+ * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state
+ *
  */
 
 export class SgdsAccordion extends SgdsElement {
-  static styles = [SgdsElement.styles];
+  static styles = [SgdsElement.styles, styles];
 
   /** Allows multiple accordion items to be opened at the same time */
   @property({ type: Boolean, reflect: true }) allowMultiple = false;