diff --git a/index.html b/index.html
index 79335716..e3b8a8fc 100644
--- a/index.html
+++ b/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;
diff --git a/src/components/Accordion/sgds-accordion-item.scss b/src/components/Accordion/sgds-accordion-item.scss
index bd4e5f83..4a678cc7 100644
--- a/src/components/Accordion/sgds-accordion-item.scss
+++ b/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) {
diff --git a/src/components/Accordion/sgds-accordion.scss b/src/components/Accordion/sgds-accordion.scss
new file mode 100644
index 00000000..8c506da9
--- /dev/null
+++ b/src/components/Accordion/sgds-accordion.scss
@@ -0,0 +1,4 @@
+:host {
+ /** NEW in 1.2.4 */
+ --accordion-active-color: var(--sgds-primary);
+ }
\ No newline at end of file
diff --git a/src/components/Accordion/sgds-accordion.ts b/src/components/Accordion/sgds-accordion.ts
index d85f926e..fbad0db7 100644
--- a/src/components/Accordion/sgds-accordion.ts
+++ b/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;