Merge pull request #414 from patternfly/pfe-accordion-border-fixes

PFE-accordion border fixes

Author: markcaron

elements/pfe-sass/mixins/_mixins.scss

@@ -261,12 +261,12 @@ $pfe-expand_chevron--placement:      #{$pfe-expand_button--LineHeight / 2 - $pfe
 }
 
 @mixin pfe-trigger-button-last($theme: light) {
-  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)};
   // @TODO Support differences based on theme
 }
 
 @mixin pfe-trigger-button-first($theme: light) {
-  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)};
   // @TODO Support differences based on theme
 }
 
@@ -286,9 +286,9 @@ $pfe-expand_chevron--placement:      #{$pfe-expand_button--LineHeight / 2 - $pfe
     --pfe-#{$component-name}--main:         transparent;
     --pfe-#{$component-name}--aux:          #{pfe-color(surface--lightest--text)};
 
-    --pfe-#{$component-name}--BorderLeft:  #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;
+    --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)};
+    --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)};
 
     --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};
   }
@@ -298,7 +298,7 @@ $pfe-expand_chevron--placement:      #{$pfe-expand_button--LineHeight / 2 - $pfe
   @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}--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)};
 
     --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};
@@ -307,8 +307,8 @@ $pfe-expand_chevron--placement:      #{$pfe-expand_button--LineHeight / 2 - $pfe
     --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)};
+    --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)};
   }
 }
 
@@ -390,8 +390,8 @@ $pfe-expand_chevron--placement:      #{$pfe-expand_button--LineHeight / 2 - $pfe
     box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);
     border-left-color: #{pfe-color(surface--lightest--link)};
     background-color: #{pfe-color(surface--lightest)};
-    border-right-color: #{pfe-color(surface--border--lightest)};
-    border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
+    border-right-color: #{pfe-color(surface--border)};
+    border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)};
   }
 }
 

elements/pfe-sass/variables/_colors.scss

@@ -127,7 +127,7 @@ $pfe-color--surface--accent--link--focus:       $pfe-color--ui-link--on-dark--fo
 
 
 /* Palette of Border Colors */
-$pfe-color--surface--border:                    $pfe-color--gray-200 !default;  // Was #ccc
+$pfe-color--surface--border:                    $pfelements--gray-light !default;  // Was #dfdfdf
 $pfe-color--surface--border--lightest:          $pfe-color--gray-100 !default;  // Was #e7e7e7
 $pfe-color--surface--border--lighter:           $pfe-color--gray-100 !default;
 $pfe-color--surface--border--darkest:           $pfe-color--gray-800 !default;