diff --git a/.changeset/stupid-drinks-own.md b/.changeset/stupid-drinks-own.md new file mode 100644 index 0000000000..6ee6d47612 --- /dev/null +++ b/.changeset/stupid-drinks-own.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: 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 index 51f8732669..a87afee5b6 100644 --- 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 index db86daeb2f..ee9fd671cd 100644 --- 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); }