Merge pull request #374 from patternfly/set-accordion-placeholders-fork

Suggested mixin updates

Author: chrisdo1

elements/pfe-accordion/demo/index.html

@@ -33,6 +33,18 @@
       section {
         padding: 2rem;
       }
+      a {
+        color: var(--pfe-broadcasted--color--ui-link);
+      }
+      a:hover {
+        color: var(--pfe-broadcasted--color--ui-link--hover);
+      }
+      a:visited {
+        color: var(--pfe-broadcasted--color--ui-link--visited);
+      }
+      a:focus {
+        color: var(--pfe-broadcasted--color--ui-link--focus);
+      }
       .dark-background {
         background-color: #191e84;
       }

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

@@ -1,5 +1,7 @@
 @import "../../pfe-sass/pfe-sass";
 
+$LOCAL: accordion;
+
 /// ===========================================================================
 /// DEFAULT ACCORDION HEADING
 /// ===========================================================================
@@ -8,52 +10,24 @@
   @include  pfe-accordion-header;
 
   button {
-    @include pfe-trigger-button($type: accordion); // border 3px
-    @include pfe-trigger-color-light($type: accordion);
+    @include pfe-trigger-color($component-name: accordion);
+    @include pfe-trigger-button;
 
     &[aria-expanded="true"] {
-        @include pfe-trigger-color-light-expanded($type: accordion);
-        @include pfe-trigger-expanded;
-    }
-
-    &[aria-expanded="true"]::after {
-        @include pfe-chevron-expanded-true;
+      @include pfe-trigger-color-expanded($component-name: accordion);
+      @include pfe-trigger-expanded;
+      &::after {
+        @include pfe-chevron-expanded;
+      }
     }
 
     &[aria-expanded="false"]::after {
-        @include pfe-chevron-expanded-false;
+        @include pfe-chevron-expanded($state: false);
     }
   }
 }
 
-////////// last child
-
-// @TODO: add lighter/lightest and darker/darkest colors.
-
-// :host([color="darker"]:last-of-type),
-// :host([color="darkest"]:last-of-type) {
-//   button[aria-expanded="false"] {
-//     @include pfe-trigger-button-last($theme: dark);
-//   }  
-// }
-
-// :host([color="lighter"]:last-of-type),
-// :host([color="lightest"]:last-of-type) {
-//   button[aria-expanded="false"] {
-//     @include pfe-trigger-button-last($theme: light);
-//   }  
-// }
-
-// :host([color="darker"]:first-child),
-// :host([color="darkest"]:first-child) {
-//   button {
-//     @include pfe-trigger-button-first($theme: dark);
-//   }  
-// }
-
-:host(:first-child),
-:host([color="lighter"]:first-child),
-:host([color="lightest"]:first-child) {
+:host(:first-child) {
   button {
     @include pfe-trigger-button-first($theme: light);
   }  
@@ -72,39 +46,15 @@
 }
 
 /// ===========================================================================
-/// COLOR OVERRIDES
+/// CONTEXT STYLES, ON=DARK
 /// ===========================================================================
 
 :host([on="dark"]) {
   button {
-    @include pfe-trigger-color-dark($type: accordion);
+    @include pfe-trigger-color($theme: dark, $component-name: accordion);
 
     &[aria-expanded="true"] {
-      @include pfe-trigger-color-dark-expanded($type: accordion);
+      @include pfe-trigger-color-expanded($theme: dark, $component-name: accordion);
     }
   }
 }
-
-// @TODO: add lighter/lightest and darker/darkest colors.
-
-// :host([color="lighter"]),
-// :host([color="lightest"]) {
-//     button {
-//       @include pfe-trigger-color-lightest;
-
-//       &[aria-expanded="true"] {
-//         @include pfe-trigger-color-light-expanded;
-//       }
-//     }
-// }
-
-// :host([color="darker"]),
-// :host([color="darkest"]) {
-//   button {
-//     @include pfe-trigger-color-darkest;
-
-//     &[aria-expanded="true"] {
-//       @include pfe-trigger-color-darkest-expanded;
-//     }
-//   }
-// }

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

@@ -1,5 +1,7 @@
 @import "../../pfe-sass/pfe-sass";
 
+$LOCAL: accordion;
+
 /// ===========================================================================
 /// DEFAULT ACCORDION PANEL
 /// ===========================================================================
@@ -14,6 +16,7 @@
 }
 
 :host([on="dark"][expanded]) {
+  @include pfe-theme($theme: "dark");
   @include pfe-accordion-panel-expanded-style($theme: dark);
 }
 
@@ -25,27 +28,8 @@
 .container {
   @include pfe-accordion-panel-container-inset($align: left);
 }
- 
+
 :host(:last-of-type[expanded]) {
-  @include pfe-accordion-panel-expanded-last;
+  margin-bottom: 0;
 }
 
-// @TODO: add lighter/lightest and darker/darkest colors.
-
-// :host([color="lighter"][expanded]),
-// :host([color="lightest"][expanded]) {
-//   @include pfe-accordion-panel-expanded-style;
-//   @include pfe-accordion-panel-expanded-style-lightest;
-// }
-
-// :host([color="darker"][expanded]),
-// :host([color="darkest"][expanded]) {
-//   @include pfe-accordion-panel-expanded-style($theme: dark);
-//   @include pfe-accordion-panel-expanded-style-darkest;
-//  }
-
-// :host(:last-of-type[color="darker"][expanded]),
-// :host(:last-of-type[color="darkest"][expanded]) {
-//    @include pfe-accordion-panel-expanded-last-dark;
-// }
-

elements/pfe-accordion/src/pfe-accordion.scss

@@ -1,11 +1,13 @@
 @import "../../pfe-sass/pfe-sass";
 
+$LOCAL: accordion;
+
 :host {
   display: block;
   position: relative;
   overflow: hidden;
   margin: 0;
-  color: var(--pfe-broadcasted--color--text);
+  color: #{pfe-radio(color--text)};
 }
 
 :host([on="dark"]) {
@@ -16,19 +18,3 @@
   @include pfe-theme($theme: "light");
 }
 
-// @TODO: add lighter/lightest and darker/darkest colors.
-
-// :host([color="darker"]) {
-//   @include pfe-theme($theme: "darker");
-// }
-// :host([color="darkest"]) {
-//   @include pfe-theme($theme: "darkest");
-// }
-
-// :host([color="lighter"]) {
-//   @include pfe-theme($theme: "lighter");
-// }
-// :host([color="lightest"]) {
-//   @include pfe-theme($theme: "lightest");
-// }
-