From da943f8215bbbe171b0fe57be5b87dd6a6932c89 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adjohnso@redhat.com>
Date: Mon, 9 Sep 2024 14:48:28 -0400
Subject: [PATCH] fix(accordion): bold accordion headers (#1806)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(accordion): bold `rh-accordion-header` text

* fix(accordion): appease nanocss

---------

Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
Co-authored-by: Benny Powers <web@bennypowers.com>
---
 .changeset/forty-toes-exercise.md             |  5 +++++
 elements/rh-accordion/rh-accordion-header.css | 20 +++++++------------
 elements/rh-accordion/rh-accordion-header.ts  |  2 +-
 3 files changed, 13 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/forty-toes-exercise.md

diff --git a/.changeset/forty-toes-exercise.md b/.changeset/forty-toes-exercise.md
new file mode 100644
index 0000000000..5ee0ed4b2f
--- /dev/null
+++ b/.changeset/forty-toes-exercise.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-accordion>`: Make `<rh-accordion-header>`'s bold.
diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css
index 9c0bd63894..a5c74a2cbc 100644
--- a/elements/rh-accordion/rh-accordion-header.css
+++ b/elements/rh-accordion/rh-accordion-header.css
@@ -13,15 +13,6 @@
   --_isRTL: -1;
 }
 
-#heading {
-  font-size: 100%;
-  padding: 0;
-  margin: 0;
-  color: var(--rh-color-text-primary-on-light, #151515);
-  background-color: var(--_rhds-background-color, var(--rh-color-surface-lightest, #ffffff));
-  font-weight: var(--rh-font-weight-heading-medium, 500);
-}
-
 button,
 a {
   cursor: pointer;
@@ -81,7 +72,6 @@ a {
     var(--_padding-inline-start);
   font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
   font-size: var(--_font-size);
-  font-weight: var(--rh-font-weight-body-text-medium, 500);
   color: var(--_text-color);
 }
 
@@ -109,10 +99,14 @@ span {
 #header-container {
   display: flex;
   gap: var(--rh-space-md, 8px);
+}
 
-  &.bottom {
-    flex-direction: column;
-  }
+#header-container.bottom {
+  flex-direction: column;
+}
+
+#header-text {
+  font-weight: var(--rh-font-weight-heading-bold, 700);
 }
 
 [part="accents"] {
diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
index d22193107f..ddf0191270 100644
--- a/elements/rh-accordion/rh-accordion-header.ts
+++ b/elements/rh-accordion/rh-accordion-header.ts
@@ -92,7 +92,7 @@ export class RhAccordionHeader extends LitElement {
                 class="toggle"
                 @click="${this.#onClick}">
           <span id="header-container" class="${classMap({ [accents ?? '']: !!accents })}">
-            <span part="text"><slot></slot></span>
+            <span id="header-text" part="text"><slot></slot></span>
             <span part="accents"><slot name="accents"></slot></span>
           </span>
           <svg id="icon"