fix: pfe-cta simplify and fix font sizing (#1377)

* Simplify and fix font sizing which should be default:18px, priority:16px, disabled: 16px. - remove math which left us with uneven font sizes. We have plenty of hooks to override as needed:  custom properties for default, priority, and disabled

Co-authored-by: [ Cassondra ] <[email protected]>
Co-authored-by: [ Cassondra ] <[email protected]>

Author: 3 people

CHANGELOG-1.x.md

@@ -1,10 +1,11 @@
-# 1.3.0 (2021-02-17)
+# 1.3.0 (2021-02-18)
 
 ### Features
 - [e7c0f3a](https://github.com/patternfly/patternfly-elements/commit/e7c0f3a45648f26c87bc3447f7c6a47c8c00c1a0) feat: adding a $custom-prop-prefix variable to relieve naming conflict risk ($repo is too generic).
 
 ### Fixes
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-content-set requires light DOM styles in panels
+- [51bee47](https://github.com/patternfly/patternfly-elements/commit/51bee47d7ef6515b59b2e49b424985088248b4d5) fix: pfe-content-set requires light DOM styles in panels
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: update sizing on pfe-cta component which was too small
 
 ## 1.2.0 ( 2021-02-12 )
 

elements/pfe-cta/src/pfe-cta.scss

@@ -25,9 +25,11 @@ $LOCAL-VARIABLES: (
   TextDecoration: none,
   TextDecoration--hover: none,
   TextDecoration--focus: none,
-  FontWeight: pfe-var(font-weight--semi-bold),
+  FontWeight: pfe-var(font-weight--bold),
   FontFamily: pfe-var(font-family--heading),
-  FontSize:   pfe-var(FontSize--md),
+  FontSize:   pfe-var(FontSize--lg),
+  // @deprecated | FontSize--priority will be deprecated in 2.0
+  FontSize--priority: pfe-var(FontSize--md), 
   LineHeight: pfe-var(line-height),
   MaxWidth: max-content,
   arrow: (
@@ -43,11 +45,6 @@ $LOCAL-VARIABLES: (
   )
 );
 
-// Nested internal variables (pfe-local calls), maps cannot "self-reference"
-$LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
-  FontSize--priority: calc(#{pfe-local(FontSize) / 1.125})
-));
-
 // Look here for the variant maps
 @import "shared-assets";
 
@@ -56,18 +53,14 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
   position: relative;
   z-index: 0;
   vertical-align: middle;
-
   max-width: pfe-local(MaxWidth);
-
   background-color: pfe-local(BackgroundColor);
   border-radius: pfe-local(BorderRadius);
   border: pfe-var(ui--border-width) pfe-var(ui--border-style) pfe-local(BorderColor);
-
   cursor: pointer;
 }
 
 ::slotted(*) {
-  --pf-c--FontSize: #{pfe-local(FontSize)};
   white-space: normal; 
   display: inline; 
   padding: pfe-local(Padding) !important;
@@ -77,13 +70,10 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
   font-weight: pfe-local(FontWeight);
   line-height: pfe-local(LineHeight);
   text-decoration: pfe-local(TextDecoration) !important;
-  
-  // cursor: pointer;
 
   :host([priority]) & {
-    --pf-c--FontSize: #{pfe-local(FontSize--priority)};
-    text-align: center;
     font-size: pfe-local(FontSize--priority);
+    text-align: center;
     @include browser-query(ie11) {
       a {
         color: pfe-local(Color) !important;
@@ -93,6 +83,7 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
 
   :host([aria-disabled="true"]) & {
     cursor: default !important;
+    font-size: pfe-local(FontSize, $fallback: pfe-var(FontSize--md));
   }
 
   :host([priority]) &,
@@ -286,4 +277,4 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
   --pfe-cta--TextDecoration:  #{pfe-local(TextDecoration--hover)};
   --pfe-cta__inner--BorderColor: #{pfe-local(BorderColor--hover, $region: inner)};
   --pfe-cta__arrow--Padding:     #{$arrow-hover};
-}
+}