refactor(accordion): themable tokens

RedHat-UX · Aug 28, 2024 · 090a791 · 090a791
1 parent 00b9c3b
commit 090a791
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 70 deletions.
diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css
@@ -3,22 +3,19 @@
   --_padding-inline-end: var(--rh-space-xl, 24px);
   --_padding-block-end: var(--rh-space-lg, 16px);
   --_padding-inline-start: var(--rh-space-xl, 24px);
-  --_text-color: var(--rh-color-text-primary-on-light, #151515);
-  --_active-text-color: var(--rh-color-text-primary-on-light, #151515);
-  --_background-color: var(--rh-color-surface-lightest, #ffffff);
-  --_active-background-color: var(--_rhds-background-color, #f2f2f2);
+  --_active-text-color: var(--rh-color-text-primary);
   --_font-size: var(--rh-font-size-body-text-lg, 1.125rem);
   --_after-background-color: transparent;
-  --_expanded-background-color: var(--rh-color-accent-brand-on-light, #ee0000);
+  --_expanded-background-color: var(--rh-color-accent-brand);
   --_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));
+  color: var(--rh-color-text-primary);
+  background-color: var(--rh-color-surface);
   font-weight: var(--rh-font-weight-heading-medium, 500);
 }
 
@@ -27,14 +24,6 @@ a {
   cursor: pointer;
 }
 
-.dark {
-  --_text-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_background-color: var(--rh-color-surface-darkest, #151515);
-  --_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);
-}
-
 .rtl {
   --_isRTL: 1;
 }
@@ -50,19 +39,19 @@ a {
   border-inline-end:
     var(--rh-border-width-sm, 1px)
     solid
-    var(--_border-color, var(--rh-color-border-subtle-on-dark, #707070));
+    var(--rh-color-border-subtle);
 }
 
 :host(.animating) #button,
 :host([expanded]) #button {
-  border-inline-end-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
-  border-inline-start-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  border-inline-end-color: var(--rh-color-border-subtle);
+  border-inline-start-color: var(--rh-color-border-subtle);
 }
 
 #button,
 #button:before,
 #button:after {
-  background-color: var(--_background-color, transparent);
+  background-color: var(--rh-surface-color);
 }
 
 #icon {
@@ -82,11 +71,11 @@ a {
   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);
+  color: var(--rh-color-text-primary);
 }
 
 #button #icon {
-  fill: var(--_text-color);
+  fill: currentcolor;
 }
 
 #button:after {
@@ -122,7 +111,7 @@ span {
 }
 
 .expanded #button {
-  --_after-background-color: var(--_expanded-background-color);
+  --_after-background-color: var(--rh-color-accent-brand);
 }
 
 .expanded #button #icon {
@@ -132,7 +121,7 @@ span {
 #button:hover,
 #button:active,
 #button:focus {
-  background-color: var(--_active-background-color);
+  background-color: var(--rh-color-surface);
 }
 
 #button:hover span,

diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
@@ -87,7 +87,7 @@ export class RhAccordionHeader extends LitElement {
     const { accents, large = false } = this.ctx ?? {};
     const rtl = this.#dir.dir === 'rtl';
     return html`
-      <div id="container" class="${classMap({ [on]: !!on, rtl, large, expanded })}">
+      <div id="container" class="${classMap({ on: true, [on]: !!on, rtl, large, expanded })}">
         <button id="button"
                 class="toggle"
                 @click="${this.#onClick}">

diff --git a/elements/rh-accordion/rh-accordion-panel.css b/elements/rh-accordion/rh-accordion-panel.css
@@ -2,25 +2,14 @@
   display: none;
   overflow: hidden;
   will-change: height;
-  color: var(--rh-color-surface-darkest, #151515);
 
-  --_background-color: var(--rh-color-surface-lightest, #ffffff);
-  --_panel-color: var(--rh-color-surface-darkest, #151515);
   --_panel-font-size: var(--rh-font-size-body-text-md, 1rem);
-  --_panel-content-body-accent-color: var(--rh-color-accent-brand-on-light, #ee0000);
   --_panel-body-padding-block-start: var(--rh-space-lg, 16px);
   --_panel-body-padding-inline-end: var(--rh-space-xl, 24px);
   --_panel-body-padding-block-end: var(--rh-space-lg, 16px);
   --_panel-body-padding-inline-start: var(--rh-space-xl, 24px);
 }
 
-.dark {
-  --_background-color: var(--rh-color-surface-darkest, #151515);
-  --_panel-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_panel-content-body-accent-color: var(--rh-color-accent-brand-on-dark, #ee0000);
-  --_panel-border-inline-end-color: var(--rh-color-border-subtle-on-dark, #707070);
-}
-
 :host ::slotted(*) {
   display: block;
   margin: unset;
@@ -62,22 +51,8 @@
 }
 
 #container {
-  border-inline-end:
-    1px
-    solid
-    var(
-        --_panel-border-inline-end-color,
-        var(--rh-color-border-subtle-on-light, #c7c7c7)
-      );
-  background-color: var(--_background-color);
-}
-
-.content.expanded {
-  --_panel-body--before-background-color:
-    var(
-        --_panel-content-body-accent-color,
-        var(--rh-color-accent-base-on-light, #0066cc)
-      );
+  border-inline-end: 1px solid var(--rh-color-border-subtle);
+  background-color: var(--rh-color-surface);
 }
 
 .body:after {
@@ -86,13 +61,13 @@
   top: 0;
   bottom: 0;
   left: 0;
-  width: var(--_panel-body--before--Width, var(--rh-border-width-lg, 3px));
-  background-color: var(--_panel-body--before-background-color, transparent);
+  width: var(--rh-border-width-lg, 3px);
+  background-color: var(--rh-color-accent-brand);
   inset-block: 0;
   inset-inline-start: 0;
 }
 
 .content {
-  color: var(--_panel-color, var(--rh-color-surface-darkest, #151515));
+  color: var(--rh-color-text-primary);
   font-size: var(--_panel-font-size, var(--rh-font-size-body-text-sm, 0.875rem));
 }
diff --git a/elements/rh-accordion/rh-accordion-panel.ts b/elements/rh-accordion/rh-accordion-panel.ts
@@ -48,7 +48,7 @@ export class RhAccordionPanel extends LitElement {
     const { large = false } = this.ctx ?? {};
     return html`
       <div id="container"
-           class="${classMap({ [on]: !!on, large, expanded, content: true })}"
+           class="${classMap({ on: true, [on]: !!on, large, expanded, content: true })}"
            part="container"
            tabindex="-1">
         <slot class="body"></slot>

diff --git a/elements/rh-accordion/rh-accordion.css b/elements/rh-accordion/rh-accordion.css
@@ -1,24 +1,18 @@
-:host {
-  --_border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
-
-  color: var(--rh-color-text-primary-on-light, #151515);
-  background-color: var(--rh-color-surface-lightest, #ffffff);
-}
-
-.dark {
-  --_border-color: var(--rh-color-border-subtle-on-dark, #707070);
+#container {
+  height: 100%;
+  width: 100%;
+  color: var(--rh-color-text-primary);
+  background-color: var(--rh-color-surface);
 }
 
-#container { display: contents; }
-
 ::slotted(rh-accordion-header:first-child) {
   display: block;
-  border-block: 1px solid var(--_border-color);
+  border-block: 1px solid var(--rh-color-border-subtle);
 }
 
 ::slotted(rh-accordion-header:not(:first-child)) {
   display: block;
-  border-block-end: 1px solid var(--_border-color);
+  border-block-end: 1px solid var(--rh-color-border-subtle);
 }
 
 ::slotted(rh-accordion-header:is([expanded])) {
@@ -29,6 +23,6 @@
 
 ::slotted(rh-accordion-panel:is([expanded])) {
   display: block;
-  border-block-end: 1px solid var(--_border-color);
+  border-block-end: 1px solid var(--rh-color-border-subtle);
   box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
 }
diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts
@@ -151,7 +151,7 @@ export class RhAccordion extends LitElement {
   override render(): TemplateResult {
     const { on = '' } = this;
     return html`
-      <div id="container" class="${classMap({ [on]: !!on })}"><slot></slot></div>
+      <div id="container" class="${classMap({ on: true, [on]: !!on })}"><slot></slot></div>
     `;
   }