fix(accordion): CSS is now pulling in correct borders for dark mode (#…

…1408) * fix(accordion): CSS is now pulling in correct borders for dark mode * Update .changeset/stupid-drinks-own.md Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(accordion): linting errors --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
RedHat-UX · Jan 10, 2024 · baa3820 · baa3820
1 parent 108bb96
commit baa3820
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/stupid-drinks-own.md b/.changeset/stupid-drinks-own.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-accordion>`: fixed border color for dark color palettes
diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css
@@ -33,7 +33,6 @@ a {
   --_active-background-color: var(--rh-color-surface-darkest, #151515);
   --_active-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
   --_expanded-background-color: var(--rh-color-accent-brand-on-dark, #ee0000);
-  --_border-inline-end-color: var(--rh-color-border-subtle-on-dark, #707070);
 }
 
 .rtl {
@@ -49,7 +48,10 @@ a {
 }
 
 :host([expanded]) {
-  border-inline-end: var(--rh-border-width-sm, 1px) solid var(--_border-inline-end-color, #c7c7c7);
+  border-inline-end:
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--_border-color, var(--rh-color-border-subtle-on-dark, #707070));
 }
 
 :host(.animating) #button,

diff --git a/elements/rh-accordion/rh-accordion.css b/elements/rh-accordion/rh-accordion.css
@@ -5,7 +5,7 @@
   background-color: var(--rh-color-surface-lightest, #ffffff);
 }
 
-:host([on="dark"]) {
+.dark {
   --_border-color: var(--rh-color-border-subtle-on-dark, #707070);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ @@
       background-color: var(--rh-color-surface-lightest, #ffffff);
     }
-    :host([on="dark"]) {
+    .dark {
       --_border-color: var(--rh-color-border-subtle-on-dark, #707070);
     }
@@ Expand Down @@