fix(accordion): bold accordion headers (#1806)

* fix(accordion): bold `rh-accordion-header` text * fix(accordion): appease nanocss --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Benny Powers <[email protected]>
RedHat-UX · Sep 9, 2024 · da943f8 · da943f8
1 parent c9e724a
commit da943f8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/.changeset/forty-toes-exercise.md 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
@@ -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
@@ -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"