fix(accordion): missing styles on hover and toggle buttons

emulsify-ds · Aug 8, 2024 · 555489a · 555489a
1 parent e1cce0f
commit 555489a
Showing 1 changed file with 27 additions and 4 deletions.
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -63,10 +63,10 @@ $accordion_padding_y: calc(var(--spacing-lg) * 1.25);
   }
 
   &:hover {
-    color: var(--accordion-color-header-hover);
+    color: var(--accordion-color-header);
 
     .accordion__icon {
-      fill: var(--accordion-color-header-hover);
+      fill: var(--accordion-color-header);
     }
   }
 }
@@ -95,16 +95,38 @@ $accordion_padding_y: calc(var(--spacing-lg) * 1.25);
   color: var(--accordion-color-header);
   margin: 0 0 $accordion_padding_y;
 
+  [data-accordion-expanded='false'] & {
+    color: var(--accordion-color-body);
+  }
+
   &:hover {
     color: var(--accordion-color-header-hover);
 
+    [data-accordion-expanded='false'] {
+      color: var(--accordion-color-header);
+
+      .accordion-item__toggle {
+        color: var(--accordion-color-header);
+      }
+    }
+
     .accordion-item__icon {
       fill: var(--accordion-color-header-hover);
+
+      [data-accordion-expanded='false'] & {
+        fill: var(--accordion-color-header);
+      }
     }
   }
+}
 
-  [data-accordion-expanded='false'] & {
-    color: var(--accordion-color-body);
+[data-accordion-expanded='false'] {
+  .accordion-item__heading:hover {
+    color: var(--accordion-color-header);
+
+    .accordion-item__toggle {
+      color: var(--accordion-color-header);
+    }
   }
 }
 
@@ -117,6 +139,7 @@ $accordion_padding_y: calc(var(--spacing-lg) * 1.25);
 
   [aria-expanded='true'] > & {
     transform: rotate(180deg);
+    fill: var(--accordion-color-header);
   }
 }