feat(heading): control text-shadow

src/components/header-logo.js

@@ -81,12 +81,7 @@ export default function HeaderLogo({ transition }) {
         <LogoArrows />
       </Top>
       <Middle visible={visible}>
-        <Heading
-          shadowRadius="15px"
-          shadowColor="rgba(255, 255, 255, 0.25)"
-          noMargin
-          noWrap
-        >
+        <Heading shadow="xl-white" noMargin noWrap>
           ABC Project Design Ltd
         </Heading>
         <Text size="lg" noMargin>

src/components/heading.js

@@ -5,8 +5,7 @@ import { css } from "@emotion/react";
 const Styles = styled.h1`
   margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
   font-size: ${props => `var(--font-size-${props.size})`};
-  text-shadow: 0 0 ${props => props.shadowRadius || `2px`}
-    ${props => props.shadowColor || `rgba(0, 0, 0, 0.25)`};
+  text-shadow: 0 0 ${props => props.shadowSize} ${props => props.shadowColor};
   ${props =>
     props.color &&
     css`
@@ -28,10 +27,33 @@ const sizes = {
   h6: "lg"
 };
 
-export default function Heading({ el = "h1", children, ...other }) {
+const shadowSizes = {
+  sm: "2px",
+  md: "5px",
+  lg: "10px",
+  xl: "15px"
+};
+
+const shadowColors = {
+  white: "rgba(255, 255, 255, 0.25)",
+  black: "rgba(0, 0, 0, 0.25)"
+};
+
+export default function Heading({
+  el = "h1",
+  shadow = "sm-black",
+  children,
+  ...other
+}) {
   const Container = Styles.withComponent(el);
+  const [size, color] = shadow.split("-");
   return (
-    <Container size={sizes[el]} {...other}>
+    <Container
+      size={sizes[el]}
+      shadowSize={shadowSizes[size]}
+      shadowColor={shadowColors[color]}
+      {...other}
+    >
       {children}
     </Container>
   );

src/pages/about.js

@@ -10,8 +10,8 @@ export default function Index({ data }) {
         image={data.headerImage.childImageSharp.fluid}
         position="bottom right"
       >
-        <Heading>
-          Slogan <em>or quote here</em>
+        <Heading shadow="xl-white">
+          <em>Easy as</em> ABC
         </Heading>
       </Header>
       <Section heading="About ABC Project Design">