Merge pull request #151 from ASU/UDS-489-Fix-Buttons-colors-Card-Header-H4-Font-size

fix(components-library): uds-489 - buttons / card header(h4) preact

Author: mlsamuelson

packages/components-library/src/components/Button/styles.js

@@ -79,12 +79,10 @@ const Button = forwardRef(
             }
 
             ${disabled &&
-            css`
-              opacity: ${ComponentButtonDisabledOpacity};
-            `}
+            `opacity: ${ComponentButtonDisabledOpacity};`}
 
             ${small &&
-            css`
+            `
               font-size: ${ComponentButtonSmallFontSize};
               height: ${ComponentButtonSmallHeight};
               min-width: ${ComponentButtonSmallMinWidth};
@@ -93,20 +91,20 @@ const Button = forwardRef(
             `}
 
         ${medium &&
-            css`
+            `
               font-size: 0.875rem;
               padding: 0.5rem 1rem;
             `}
 
         ${large &&
-            css`
+            `
               font-size: ${ComponentButtonLargeFontSize};
               height: ${ComponentButtonLargeHeight};
               min-width: ${ComponentButtonLargeMinWidth};
             `}
 
         ${gold &&
-            css`
+            `
               color: ${ComponentButtonGoldColor};
               background-color: ${ComponentButtonGoldBackgroundColor};
 
@@ -116,7 +114,7 @@ const Button = forwardRef(
             `}
 
         ${maroon &&
-            css`
+            `
               color: #ffffff;
               background-color: #8c1d40;
               border-color: #8c1d40;
@@ -127,7 +125,7 @@ const Button = forwardRef(
             `}
 
         ${dark &&
-            css`
+            `
               color: ${ComponentButtonDarkColor};
               background-color: ${ComponentButtonDarkBackgroundColor};
 
@@ -137,7 +135,7 @@ const Button = forwardRef(
             `}
 
         ${light &&
-            css`
+            `
               color: ${ComponentButtonLightColor};
               background-color: ${ComponentButtonLightBackgroundColor};
             `}

packages/components-library/src/components/Card/styles.js

@@ -78,7 +78,7 @@ const CardBody = ({ show, id, ...props }) => {
           min-height: 1px;
           padding: 1.25rem;
           ${!show &&
-          css`
+          `
             display: none;
           `}
         `,
@@ -125,7 +125,7 @@ const FoldableCardBody = ({ show, id, ...props }) => {
       class={cx(
         css`
           ${show &&
-          css`
+          `
             border-top: 1px solid #d0d0d0;
           `}
         `,
@@ -181,7 +181,7 @@ const FoldableCardHeader = ({ show, id, ...props }) => {
 
         ${
           show
-            ? css`
+            ? `
                 .fa-chevron-down {
                   transform: rotate(-180deg);
                 }

packages/components-library/src/components/Heading/styles.js

@@ -1,6 +1,6 @@
 import { cx, css } from "@emotion/css";
 
-const sharedStyle = css`
+const sharedStyle = `
   font-weight: 700;
   text-align: left;
   opacity: 1;