[pfe-accordion]: Updating stylesheets, package.json exports, and gap

.changeset/smooth-chefs-listen.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-accordion": patch
+---
+
+Moving variable specific styles directly into pfe-accordion/header/panel.scss. Updating package exports to include Base Classes.

elements/pfe-accordion/BaseAccordion.scss

@@ -1,4 +0,0 @@
-:host {
-  color: var(--pf-global--Color--100, #151515);
-  background-color: var(--pf-global--BackgroundColor--100, #ffffff);
-}

elements/pfe-accordion/BaseAccordionHeader.scss

@@ -1,15 +1,7 @@
-:host {
-  --pfe-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);
-
-  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
-  background-color: var(--pf-global--BackgroundColor--100, #ffffff);
-}
-
 #heading {
   font-size: 100%;
   padding: 0;
   margin: 0;
-  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
 }
 
 button,
@@ -22,11 +14,6 @@ a {
 .toggle:after {
   padding: 0;
   margin: 0;
-  background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);
-}
-
-.icon {
-  transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);
 }
 
 .toggle {
@@ -36,54 +23,17 @@ a {
   justify-content: space-between;
   width: 100%;
   border: 0;
-  padding:
-    var(--pf-c-accordion__toggle--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
-    var(--pf-c-accordion__toggle--PaddingRight, var(--pf-global--spacer--md, 1rem))
-    var(--pf-c-accordion__toggle--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
-    var(--pf-c-accordion__toggle--PaddingLeft, var(--pf-global--spacer--md, 1rem));
-  font-family: var(--pf-c-accordion__toggle--FontFamily, var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatTextUpdated", helvetica, arial, sans-serif));
-  font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));
-  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
-  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
-}
-
-.toggle[aria-expanded="true"] {
-  --pf-c-accordion__toggle--after--BackgroundColor: var(--pf-c-accordion__toggle--expanded--before--BackgroundColor, var(--pf-global--primary-color--100, #0066cc));
 }
 
 .toggle:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
-  top: var(--pf-c-accordion__toggle--before--Top, 0);
-  width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));
-  background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);
 }
 
 span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: var(--pf-c-accordion__toggle-text--MaxWidth, calc(100% - var(--pf-global--spacer--lg, 1.5rem)));
-}
-
-.toggle[aria-expanded="true"] .icon {
-  rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);
-}
-
-.toggle:hover,
-.toggle:active,
-.toggle:focus {
-  background-color: var(--pf-c-accordion__toggle--active--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));
-}
-.toggle:hover span,
-.toggle:focus span,
-.toggle:active span {
-  color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));
-}
-
-.toggle:focus span,
-.toggle:active span  {
-  font-weight: var(--pf-c-accordion__toggle--active-text--FontWeight, var(--pf-global--FontWeight--semi-bold, 700));
 }

elements/pfe-accordion/BaseAccordionPanel.scss

@@ -2,9 +2,6 @@
   display: none;
   overflow: hidden;
   will-change: height;
-
-  color: var(--pf-global--Color--100, #151515);
-  background-color: var(--pf-c-accordion--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #ffffff));
 }
 
 :host([expanded]) {
@@ -17,28 +14,12 @@
   transition: height 0.3s ease-in-out;
 }
 
-.content {
-  color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));
-  font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
-}
-
 :host([fixed]) {
-  max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
   overflow-y: auto;
 }
 
-.content[expanded],
-:host([expanded]) .content {
-  --pf-c-accordion__panel-body--before--BackgroundColor: var(--pf-c-accordion__panel--content-body--before--BackgroundColor, var(--pf-global--primary-color--100, #0066cc));
-}
-
 .body {
   position: relative;
-  padding: 
-    var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem)) 
-    var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem)) 
-    var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem)) 
-    var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));
 }
 
 .body:after {
@@ -47,6 +28,4 @@
   top: 0;
   bottom: 0;
   left: 0;
-  width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
-  background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
-}
+}

elements/pfe-accordion/package.json

@@ -12,6 +12,9 @@
     ".": "./pfe-accordion.js",
     "./pfe-accordion-header.js": "./pfe-accordion-header.js",
     "./pfe-accordion-panel.js": "./pfe-accordion-panel.js",
+    "./BaseAccordion.js": "./BaseAccordion.js",
+    "./BaseAccordionHeader.js": "./BaseAccordionHeader.js",
+    "./BaseAccordionPanel.js": "./BaseAccordionPanel.js",
     "./*": "./*.js"
   },
   "publishConfig": {

elements/pfe-accordion/pfe-accordion-header.scss

@@ -1,9 +1,25 @@
+:host {
+  --pfe-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);
+
+  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
+  background-color: var(--pf-global--BackgroundColor--100, #ffffff);
+}
+
 :host([large]) {
   --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
   --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
   --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
   --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
-  --pf-c-accordion__toggle--FontFamily: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  --pf-c-accordion__toggle--FontFamily:
+    var(
+      --pf-global--FontFamily--redhat-updated--heading--sans-serif,
+      "RedHatDisplayUpdated",
+      "Overpass",
+      overpass,
+      helvetica,
+      arial,
+      sans-serif
+    );
   --pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
   --pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515);
   --pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515);
@@ -14,3 +30,99 @@
   --pf-c-accordion__toggle--expanded-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
   --pfe-icon--size: var(--pf-c-accordion__toggle--IconSize, 12px);
 }
+
+#heading {
+  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
+}
+
+.toggle,
+.toggle:before,
+.toggle:after {
+  background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);
+}
+
+.icon {
+  transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);
+}
+
+.toggle {
+  padding:
+    var(--pf-c-accordion__toggle--PaddingTop, var(--pf-global--spacer--md, 0.5rem))
+    var(--pf-c-accordion__toggle--PaddingRight, var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-accordion__toggle--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-accordion__toggle--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  font-family:
+    var(
+      --pf-c-accordion__toggle--FontFamily,
+      var(
+        --pf-global--FontFamily--redhat-updated--heading--sans-serif,
+        "RedHatTextUpdated",
+        helvetica,
+        arial,
+        sans-serif
+      )
+    );
+  font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));
+  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
+  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
+}
+
+.toggle[aria-expanded="true"] {
+  --pf-c-accordion__toggle--after--BackgroundColor:
+    var(
+      --pf-c-accordion__toggle--expanded--before--BackgroundColor,
+      var(
+        --pf-global--primary-color--100,
+        #0066cc
+      )
+    );
+}
+
+.toggle:after {
+  top: var(--pf-c-accordion__toggle--before--Top, -1px);
+  width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));
+  background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);
+}
+
+span {
+  max-width:
+    var(
+      --pf-c-accordion__toggle-text--MaxWidth,
+      calc(100% - var(--pf-global--spacer--lg, 1.5rem))
+    );
+}
+
+.toggle[aria-expanded="true"] .icon {
+  rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);
+}
+
+.toggle:hover,
+.toggle:active,
+.toggle:focus {
+  background-color:
+    var(
+      --pf-c-accordion__toggle--active--BackgroundColor,
+      var(
+        --pf-global--BackgroundColor--200,
+        #f0f0f0
+      )
+    );
+}
+
+.toggle:hover span,
+.toggle:focus span,
+.toggle:active span {
+  color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));
+}
+
+.toggle:focus span,
+.toggle:active span {
+  font-weight:
+    var(
+      --pf-c-accordion__toggle--active-text--FontWeight,
+      var(
+        --pf-global--FontWeight--semi-bold,
+        700
+      )
+    );
+}

elements/pfe-accordion/pfe-accordion-panel.scss

@@ -1,12 +1,80 @@
+:host {
+  color: var(--pf-global--Color--100, #151515);
+  background-color:
+    var(
+      --pf-c-accordion--BackgroundColor,
+      var(--pf-global--BackgroundColor--light-100, #ffffff)
+    );
+}
+
+.body {
+  padding:
+    var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+}
+
+.body:after {
+  width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
+  background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
+}
+
 :host([large]) {
-  --pf-c-accordion__panel-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);
-  --pf-c-accordion__panel-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);
-  --pf-c-accordion__panel-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);
-  --pf-c-accordion__panel-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);
-  --pf-c-accordion__panel--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);
-  --pf-c-accordion__panel--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515);
+  --pf-c-accordion__panel-body--PaddingTop:
+    var(
+      --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop,
+      0
+    );
+  --pf-c-accordion__panel-body--PaddingRight:
+    var(
+      --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight,
+      1rem
+    );
+  --pf-c-accordion__panel-body--PaddingBottom:
+    var(
+      --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom,
+      1.5rem
+    );
+  --pf-c-accordion__panel-body--PaddingLeft:
+    var(
+      --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft,
+      1.5rem
+    );
+  --pf-c-accordion__panel--FontSize:
+    var(
+      --pf-c-accordion--m-display-lg__expanded-content--FontSize,
+      1rem
+    );
+  --pf-c-accordion__panel--Color:
+    var(
+      --pf-c-accordion--m-display-lg__expanded-content--Color,
+      #151515
+    );
 }
 
 :host([large]) .body:last-child {
-  --pf-c-accordion__panel-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem);
+  --pf-c-accordion__panel-body--PaddingBottom:
+    var(
+      --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom,
+      1.5rem
+    );
+}
+
+.content {
+  color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));
+  font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
+}
+
+:host([fixed]) {
+  max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
+}
+
+.content[expanded],
+:host([expanded]) .content {
+  --pf-c-accordion__panel-body--before--BackgroundColor:
+    var(
+      --pf-c-accordion__panel--content-body--before--BackgroundColor,
+      var(--pf-global--primary-color--100, #0066cc)
+    );
 }

elements/pfe-accordion/pfe-accordion.scss

@@ -1,5 +1,8 @@
 :host {
   --accordion__bordered--Color: var(--rh-color-black-300, #d2d2d2);
+
+  color: var(--pf-global--Color--100, #151515);
+  background-color: var(--pf-global--BackgroundColor--100, #ffffff);
 }
 
 :host([bordered]) ::slotted(pfe-accordion-header:first-child),