Merge pull request #239 from patternfly/typography-icon-variables

Update heading & icon sizes

Author: markcaron

themes/cp-theme/red-hat-sass/variables/_typography.scss

@@ -29,21 +29,21 @@ $pfe-global--FontFamily--monospace:     "Overpass Mono", Consolas, Monaco, 'Anda
 // ========================================================================
 
 // Heading sizes for Apps
-$pfe-global--FontSize--heading--xxl:     pfe-size-prem(32px) !default;
-$pfe-global--FontSize--heading--xl:      pfe-size-prem(28px) !default;
-$pfe-global--FontSize--heading--lg:      pfe-size-prem(24px) !default;
-$pfe-global--FontSize--heading--md:      pfe-size-prem(20px) !default;
-$pfe-global--FontSize--heading--sm:      pfe-size-prem(18px) !default;
-$pfe-global--FontSize--heading--xs:      pfe-size-prem(16px) !default;
-$pfe-global--FontSize--heading--xxs:     pfe-size-prem(14px) !default;
+$pfe-global--FontSize--heading--xxl:     pfe-size-prem($pfe-global--FontSize * 2)    !default;   // 32px
+$pfe-global--FontSize--heading--xl:      pfe-size-prem($pfe-global--FontSize * 1.75) !default;   // 28px
+$pfe-global--FontSize--heading--lg:      pfe-size-prem($pfe-global--FontSize * 1.5)  !default;   // 24px
+$pfe-global--FontSize--heading--md:      pfe-size-prem($pfe-global--FontSize * 1.25) !default;   // 20px
+$pfe-global--FontSize--heading--sm:      pfe-size-prem($pfe-global--FontSize * 1.125) !default;  // 18px
+$pfe-global--FontSize--heading--xs:      pfe-size-prem($pfe-global--FontSize * 1) !default;      // 16px
+$pfe-global--FontSize--heading--xxs:     pfe-size-prem($pfe-global--FontSize * 0.875) !default;  // 14px
 
 
 // ========================================================================
 // Icons Sizes
 // ========================================================================
 
-$pfe-global--icon-size--xl:              pfe-size-prem(64px) !default;
-$pfe-global--icon-size--lg:              pfe-size-prem(48px) !default;
-$pfe-global--icon-size--md:              pfe-size-prem(32px) !default;
-$pfe-global--icon-size--sm:              pfe-size-prem(16px) !default;
-$pfe-global--icon-size--xs:              pfe-size-prem(14px) !default;
+$pfe-global--icon-size--xl:              pfe-size-prem($pfe-global--FontSize * 4) !default;      // 64px
+$pfe-global--icon-size--lg:              pfe-size-prem($pfe-global--FontSize * 3) !default;      // 48px
+$pfe-global--icon-size--md:              pfe-size-prem($pfe-global--FontSize * 2) !default;      // 32px
+$pfe-global--icon-size--sm:              pfe-size-prem($pfe-global--FontSize * 1) !default;      // 16px
+$pfe-global--icon-size--xs:              pfe-size-prem($pfe-global--FontSize * 0.875) !default;  // 14px