diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html
index 6cdd76e0a2..3b69a02753 100644
--- a/elements/pfe-accordion/demo/index.html
+++ b/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;
       }
diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss
index 41e07f9eba..ef75c977d2 100644
--- a/elements/pfe-accordion/src/pfe-accordion-header.scss
+++ b/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;
-//     }
-//   }
-// }
diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss
index c9e0d7700b..28363830c1 100644
--- a/elements/pfe-accordion/src/pfe-accordion-panel.scss
+++ b/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;
-// }
-
diff --git a/elements/pfe-accordion/src/pfe-accordion.scss b/elements/pfe-accordion/src/pfe-accordion.scss
index fad404d8f2..699e5206ac 100644
--- a/elements/pfe-accordion/src/pfe-accordion.scss
+++ b/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");
-// }
-
diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss
index 8ca4354bd4..687d055505 100644
--- a/elements/pfe-sass/mixins/_mixins.scss
+++ b/elements/pfe-sass/mixins/_mixins.scss
@@ -40,58 +40,58 @@
 /// ===========================================================================
 
 @mixin pfe-theme($theme) {
+  // GENERAL CONTEXT-BASED UPDATES, ON="DARK"
   @if $theme == dark {
     --pfe-broadcasted--color--text:               #{pfe-color(text--on-dark)};
-    --pfe-broadcasted--color--ui-link:            #{pfe-color(link--on-dark)};
-    --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(link--visited--on-dark)};
-    --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(link--hover--on-dark)};
-    --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(link--focus--on-dark)};
+    --pfe-broadcasted--color--ui-link:            #{pfe-color(ui-link--on-dark)};
+    --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(ui-link--on-dark--visited)};
+    --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(ui-link--on-dark--hover)};
+    --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(ui-link--on-dark--focus)};
   }
-  @if $theme == light {
+  @else if $theme == light {
     --pfe-broadcasted--color--text:               #{pfe-color(text)};
-    --pfe-broadcasted--color--ui-link:            #{pfe-color(link)};
-    --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(link--visited)};
-    --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(link--hover)};
-    --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(link--focus)};
+    --pfe-broadcasted--color--ui-link:            #{pfe-color(ui-link)};
+    --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(ui-link--visited)};
+    --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(ui-link--hover)};
+    --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(ui-link--focus)};
   }
-  // THEMES:
-  @if $theme == darker {
+  // MORE SPECIFIC COLOR BASED UPDATES, COLOR="DARKER"
+  @else if $theme == darker {
     --pfe-broadcasted--color--text:               #{pfe-color(surface--darker--text)};
     --pfe-broadcasted--color--ui-link:            #{pfe-color(surface--darker--link)};
     --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(surface--darker--link--visited)};
     --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(surface--darker--link--hover)};
     --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(surface--darker--link--focus)};
   }
-  @if $theme == darkest {
+  @else if $theme == darkest {
     --pfe-broadcasted--color--text:               #{pfe-color(surface--darkest--text)};
     --pfe-broadcasted--color--ui-link:            #{pfe-color(surface--darkest--link)};
     --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(surface--darkest--link--visited)};
     --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(surface--darkest--link--hover)};
     --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(surface--darkest--link--focus)};
   }
-  @if $theme == accent {
+  @else if $theme == accent {
     --pfe-broadcasted--color--text:               #{pfe-color(surface--accent--text)};
     --pfe-broadcasted--color--ui-link:            #{pfe-color(surface--accent--link)};
     --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(surface--accent--link--visited)};
     --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(surface--accent--link--hover)};
     --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(surface--accent--link--focus)};
   }
-  @if $theme == complement {
+  @else if $theme == complement {
     --pfe-broadcasted--color--text:               #{pfe-color(surface--complement--text)};
     --pfe-broadcasted--color--ui-link:            #{pfe-color(surface--complement--link)};
     --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(surface--complement--link--visited)};
     --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(surface--complement--link--hover)};
     --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(surface--complement--link--focus)};
   }
-
-  @if $theme == lighter {
+  @else if $theme == lighter {
     --pfe-broadcasted--color--text:               #{pfe-color(surface--lighter--text)};
     --pfe-broadcasted--color--ui-link:            #{pfe-color(surface--lighter--link)};
     --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(surface--lighter--link--visited)};
     --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(surface--lighter--link--hover)};
     --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(surface--lighter--link--focus)};
   }
-  @if $theme == lightest {
+  @else if $theme == lightest {
     --pfe-broadcasted--color--text:               #{pfe-color(surface--lightest--text)};
     --pfe-broadcasted--color--ui-link:            #{pfe-color(surface--lightest--link)};
     --pfe-broadcasted--color--ui-link--visited:   #{pfe-color(surface--lightest--link--visited)};
@@ -176,38 +176,6 @@
   }
 }
 
-
-/// RH Define Vars
-/// Helps define the CSS Var madness, making it easier for devs!
-/// @param {String} $this-component-var - Component specific variable name
-/// @param {String} $this-theme-var - Theme variable name
-/// @param {String} $this-fallback - Fallback color
-///
-/// ---------------------------------------------------------------------------
-///
-/// SASS fallback based on PFElements style
-/// $pfe-global[--context][--state][--PropertyCamelCase]
-
-/// Theme level Var
-/// --pfe-theme[--context][--state][--PropertyCamelCase]
-/// --pfe-theme--heading--hover--BackgroundColor
-
-/// Component Var for theming specific cases
-/// --pfe-[component-block][__element][--context][--state][--PropertyCamelCase]
-/// --pfe-teaser__title--link-color--visited
-/// --pfe-teaser__subtitle--link-color--visited
-
-/// Defined locally for sanity
-/// --pfe-local-[component-block][__element][--context][--state][--PropertyCamelCase]
-/// --pfe-local-cta--link-color--inverted
-///
-/// ---------------------------------------------------------------------------
-///
-///                     ↓ component,         ↓ theme,         ↓ fallback
-@mixin pfe-define-vars($this-component-var, $this-theme-var, $this-fallback) {
-  --pfe-local-#{$this-component-var}: var(--pfe-#{$this-component-var}, var(--pfe-theme--#{$this-theme-var}, #{$this-fallback}));
-}
-
 // Mixin for building slot selectors
 @mixin pfe-slot($slot-name, $selector: "") {
   // This logic makes it much easier to style default slots in a loop
@@ -227,55 +195,49 @@
 /// ===========================================================================
 /// Accordion Specific SASS Vars
 /// ===========================================================================
-$pfe-expand-button--LineHeight:      1.5;
-$pfe-expand_chevron--size:           0.4em;
-$pfe-expand_chevron--weight:         0.1em;
+
+$pfe-expand_button--LineHeight:      1.5;
+$pfe-expand_button--padding:         #{pfe-var(container-spacer)};
+$pfe-expand_button--padding--factor: .75;
+$pfe-expand_button--padding--wide:   calc(#{$pfe-expand_button--padding} * 1.5);
+
+$pfe-expand_chevron--size:           .4em;
+$pfe-expand_chevron--weight:         .1em;
 $pfe-expand_chevron--padding:        3em;
-$pfe-expand_chevron--placement:      ($pfe-expand_button--LineHeight / 2) - ($pfe-expand_chevron--size / 2);
-$pfe-expand_button--padding-factor:  0.75;
-$pfe-expand_button--padding: #{pfe-var(container-spacer)};
-$pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5);
+$pfe-expand_chevron--placement:      #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};
 
 @mixin pfe-accordion-header {
   display: block;
-
-  button {
-    -webkit-appearance: button;
-  }
   > * {
     margin: 0;
   }
 }
 
-@mixin pfe-trigger-button($theme: light, $align: left, $type: accordion) {
-    --pfe-#{$type}--main:               transparent;
-    --pfe-#{$type}--aux:                #{pfe-color(surface--lightest--text)};
-    --pfe-#{$type}--focus:              #{pfe-color(surface--lightest--link)};
-    --pfe-#{$type}--border-left:        #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;
-    --pfe-#{$type}--border-right:       #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;
-    --pfe-#{$type}--border-bottom:  0px;
-
+@mixin pfe-trigger-button($align: left) {
+    -webkit-appearance: button;
     margin: 0;
     width: 100%;
     height: auto;
     font-family: inherit;
-    font-weight: 700;
-    font-size: calc((#{pfe-var(font-size)} * 1.1));
-    line-height: #{pfe-var(line-height)};
+    font-weight: #{pfe-var(font-weight--bold)};
     text-align: left;
     cursor: pointer;
-    color: var(--pfe-accordion--aux);
     z-index: 1;
     position: relative;
-    background: var(--pfe-accordion--main);
-    border-left:   var(--pfe-accordion--border-left);
-    border-right:  var(--pfe-accordion--border-right);
-    border-bottom: var(--pfe-accordion--border-bottom);
+
+    font-size:   calc(#{pfe-var(font-size)} * 1.1);
+    line-height: #{pfe-var(line-height)};
+
+    color:            #{pfe-local(aux)};
+    background-color: #{pfe-local(main)};
+    border-left:      #{pfe-local(BorderLeft)};
+    border-right:     #{pfe-local(BorderRight)};
+    border-bottom:    #{pfe-local(BorderBottom)};
     border-top: 0;
 
     &:hover {
         outline: none;
-        border-left-color:  var(--pfe-accordion--focus);
+        border-left-color: #{pfe-local(BorderLeftColor--focus)};
         z-index: 2;
     }
 
@@ -283,142 +245,107 @@ $pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5);
         outline: none;
         z-index: 2;
         text-decoration: underline;
-        text-decoration-color: pfe-color(surface--border--darker);
+        text-decoration-color: #{pfe-color(surface--border--darker)};
     }
 
     &::-moz-focus-inner {
         border: 0;
     }
-    @if $theme == right {
-        padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding-wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};
-    }
-    @else {
-        padding: #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding-wide};
+
+    @if $align == right {
+        padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;
+    } @else {
+        padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};
     }
-    //[scale="large"] & {  @TODO later, type scale support
-    //    font-size: calc((#{pfe-var(font-size)} * 1.3));
-    //}
 }
 
 @mixin pfe-trigger-button-last($theme: light) {
-    @if $theme == dark {
-        border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
-    }
-    @else {
-        border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
-    }
+  border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
+  // @TODO Support differences based on theme
 }
 
 @mixin pfe-trigger-button-first($theme: light) {
-    @if $theme == dark {
-        border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
-    }
-    @else {
-        border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
-    }
+  border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
+  // @TODO Support differences based on theme
 }
 
 @mixin pfe-trigger-expanded {
     position: relative;
     display: block;
-    border-bottom: 0px;
-}
-
-@mixin pfe-trigger-color-light($type: accordion) {
-    --pfe-#{$type}--main:               transparent;
-    --pfe-#{$type}--aux:                #{pfe-color(surface--lightest--text)};
-    --pfe-#{$type}--focus:              #{pfe-color(surface--lightest--link)};
-    --pfe-#{$type}--border-bottom:      #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
-}
-
-@mixin pfe-trigger-color-light-expanded($type: accordion) {
-    --pfe-#{$type}--main:              #{pfe-color(surface--lightest)};
-    --pfe-#{$type}--aux:               #{pfe-color(surface--lightest--text)};
-    --pfe-#{$type}--focus:             #{pfe-color(surface--lightest--link)};
-    --pfe-#{$type}--border-left:       #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};
-    --pfe-#{$type}--border-right:      #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
-}
-@mixin pfe-trigger-color-lightest($type: accordion) {
-  --pfe-#{$type}--main:                #{pfe-color(surface--lightest)};
-  --pfe-#{$type}--aux:                 #{pfe-color(surface--lightest--text)};
-  --pfe-#{$type}--focus:               #{pfe-color(surface--lightest--link)};
-  --pfe-#{$type}--border-bottom:       #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
+    border-bottom: 0;
 }
 
-//// DARK
+@mixin pfe-trigger-color($component-name, $theme: light) {
+  @if $theme == dark {
+    --pfe-#{$component-name}--main:         transparent;
+    --pfe-#{$component-name}--aux:          #{pfe-color(surface--darkest--text)};
+    --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};
+  }
+  @else {
+    --pfe-#{$component-name}--main:         transparent;
+    --pfe-#{$component-name}--aux:          #{pfe-color(surface--lightest--text)};
 
-@mixin pfe-trigger-color-dark($type) {
-    --pfe-#{$type}--main:         transparent;
-    --pfe-#{$type}--aux:          #{pfe-color(surface--darkest--text)};
-    --pfe-#{$type}--focus:        #{pfe-color(surface--lightest)};
-}
+    --pfe-#{$component-name}--BorderLeft:  #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;
+    --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;
+    --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
 
-@mixin pfe-trigger-color-dark-expanded($type) {
-    --pfe-#{$type}--main:         #{pfe-color(surface--darker)};
-    --pfe-#{$type}--aux:          #{pfe-color(surface--darkest--text)};
-    --pfe-#{$type}--focus:        #{pfe-color(surface--lightest)};
-    --pfe-#{$type}--border-left:  #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
-    --pfe-#{$type}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
+    --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};
+  }
 }
 
-@mixin pfe-trigger-color-darkest($type) {
-    --pfe-#{$type}--main:         #{pfe-color(surface--darkest)};
-    --pfe-#{$type}--aux:          #{pfe-color(surface--darkest--text)};
-    --pfe-#{$type}--focus:        #{pfe-color(surface--lightest)};
-}
+@mixin pfe-trigger-color-expanded($component-name, $theme: light) {
+  @if $theme == dark {
+    --pfe-#{$component-name}--main:         #{pfe-color(surface--darker)};
+    --pfe-#{$component-name}--aux:          #{pfe-color(surface--darkest--text)};
+    --pfe-#{$component-name}--BorderLeft:   #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
+    --pfe-#{$component-name}--BorderRight:  #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
 
-@mixin pfe-trigger-color-darkest-expanded($type) {
-    --pfe-#{$type}--main:         #{pfe-color(surface--darkest)};
-    --pfe-#{$type}--aux:          #{pfe-color(surface--darkest--text)};
-    --pfe-#{$type}--focus:        #{pfe-color(surface--darkest--link--focus)};
-    --pfe-#{$type}--border-left:  #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
-    --pfe-#{$type}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
+    --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};
+  }
+  @else {
+    --pfe-#{$component-name}--main:              #{pfe-color(surface--lightest)};
+    --pfe-#{$component-name}--aux:               #{pfe-color(surface--lightest--text)};
+    --pfe-#{$component-name}--focus:             #{pfe-color(surface--lightest--link)};
+    --pfe-#{$component-name}--BorderLeft:        #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};
+    --pfe-#{$component-name}--BorderRight:       #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
+  }
 }
 
-
 /// ===========================================================================
 /// Accordion chevrons
 /// ===========================================================================
 
-@mixin pfe-chevron-expanded-false($position: after) {
-    content: "";
-    position: absolute;
-    top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor}) + #{$pfe-expand_chevron--placement} );
-    display: block;
-    border-style: #{pfe-var(surface--border-style)};
-    border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;
-    height: #{$pfe-expand_chevron--size};
-    width: #{$pfe-expand_chevron--size};
-    text-align: center;
-    transition: transform 0.15s;
-    transform: rotate(45deg);
+@mixin pfe-chevron-expanded($state: true, $position: after) {
+  content: "";
+  position: absolute;
+  top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );
+  display: block;
+  border-style: #{pfe-var(surface--border-style)};
+  height: #{$pfe-expand_chevron--size};
+  width:  #{$pfe-expand_chevron--size};
+  text-align: center;
+  transition: transform 0.15s;
+  @if $state {
+    border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;
+    border-bottom: 0;
+    transform: rotate(-45deg);
     @if $position == before {
-      left: #{$pfe-expand_button--padding-wide};
+      left: #{$pfe-expand_button--padding--wide};
     }
     @else {
-      right: #{$pfe-expand_button--padding-wide};
+      right: #{$pfe-expand_button--padding--wide};
     }
-}
-
-@mixin pfe-chevron-expanded-true($position: after) {
-    content: "";
-    position: absolute;
-    top: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor} + #{$pfe-expand_chevron--placement});
-    display: block;
-    width: #{$pfe-expand_chevron--size};
-    height: #{$pfe-expand_chevron--size};
-    border-style: #{pfe-var(surface--border-style)};
-    border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;
-    text-align: center;
-    border-bottom: 0;
-    transition: all 0.15s;
-    transform: rotate(-45deg);
+  }
+  @else {
+    border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;
+    transform: rotate(45deg);
     @if $position == before {
-      left: #{$pfe-expand_button--padding-wide};
+      left: #{$pfe-expand_button--padding--wide};
     }
     @else {
-      right: #{$pfe-expand_button--padding-wide};
+      right: #{$pfe-expand_button--padding--wide};
     }
+  }
 }
 
 /// ===========================================================================
@@ -430,7 +357,7 @@ $pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5);
   display: block;
   width: 100%;
 
-  padding: calc(#{pfe-local(Padding--vertical)} / 2)  #{pfe-local(Padding--horizontal)};
+  padding: calc(#{pfe-local(padding--vertical)} / 2)  #{pfe-local(padding--horizontal)};
 
   @media (min-width: #{pfe-breakpoint(sm)}) {
      padding: #{pfe-local(Padding)};
@@ -442,7 +369,6 @@ $pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5);
   overflow: hidden;
   will-change: height;
   border-color: transparent;
-  overflow: hidden;
 }
 
 @mixin pfe-accordion-panel-expanded {
@@ -467,29 +393,15 @@ $pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5);
     border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
   }
 }
-@mixin pfe-accordion-panel-expanded-style-darkest {
-    background: #{pfe-color(surface--darkest)};
-}
-
-@mixin pfe-accordion-panel-expanded-style-lightest {
-    background: #{pfe-color(surface--lightest)};
-}
-
-@mixin pfe-accordion-panel-expanded-last-dark {
-    border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--darkest)};
-}
-@mixin pfe-accordion-panel-expanded-last {
-  margin-bottom: 0;
-}
 
 @mixin pfe-accordion-panel-container-inset($align: left)  {
   box-sizing: border-box;
   width: 100%;
 
   @if $align == left {
-    padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding-wide};
+    padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};
   }
   @else {
-    padding: 0 #{$pfe-expand_button--padding-wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};
+    padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};
   }
 }