fix: update callout shadows

carbon-design-system · May 7, 2019 · 3aef207 · 3aef207
1 parent cee7c22
commit 3aef207
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 12 deletions.
diff --git a/packages/example/src/gatsby-theme-carbon/templates/Home.js b/packages/example/src/gatsby-theme-carbon/templates/Home.js
@@ -58,7 +58,7 @@ const customProps = {
       leftText={SecondLeftText}
       rightText={SecondRightText}
       color="white"
-      backgroundColor="activePrimary"
+      backgroundColor="#061f80"
     />
   ),
 };

diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js b/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js
@@ -7,6 +7,7 @@ const StyledGrid = styled(Grid)`
   background-size: cover;
   background-image: url(${props => props.image});
   height: 50vh;
+  max-height: 560px;
   width: 100%;
   background-position: left bottom;
   ${mq.lg} {
@@ -32,7 +33,7 @@ const StyledColumn = styled(Column)`
 const columCss = ({ typeStyles }) => typeStyles.quotation01;
 
 const HomepageBanner = ({ image, renderText }) => (
-  <StyledGrid style={{ maxWidth: '100%', width: '100%' }} image={image}>
+  <StyledGrid image={image}>
     <StyledRow>
       <StyledColumn css={columCss}>{renderText()}</StyledColumn>
     </StyledRow>

diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js b/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js
@@ -7,11 +7,11 @@ const StyledGrid = styled(Grid)`
   background-color: ${props =>
     props.theme.colors[props.backgroundColor] ||
     props.backgroundColor ||
-    props.theme.colors.black100};
+    props.theme.colors.interactive02};
   color: ${props =>
     props.theme.colors[props.color] ||
     props.color ||
-    props.theme.colors.black100};};
+    props.theme.colors.inverse01}};
   width: 100%;
 `;
 
@@ -35,6 +35,7 @@ const firstColumn = ({ typeStyles, layout }) => [
     padding: '0 1rem',
     paddingBottom: layout[2],
     width: '100%',
+    fontSize: '1.5rem',
     [mq.md]: {
       width: '33%',
     },
@@ -45,6 +46,7 @@ const secondColumn = ({ typeStyles }) => [
   typeStyles.expressiveParagraph01,
   {
     padding: '0 1rem',
+    fontSize: '1.75rem',
     width: '100%',
     [mq.md]: {
       width: '66%',
@@ -55,12 +57,8 @@ const secondColumn = ({ typeStyles }) => [
 const Callout = ({ leftText, rightText, ...rest }) => (
   <StyledGrid {...rest}>
     <StyledRow>
-      <div style={{ fontSize: '1.5rem' }} css={firstColumn}>
-        {leftText()}
-      </div>
-      <div style={{ fontSize: '1.75rem' }} css={secondColumn}>
-        {rightText()}
-      </div>
+      <div css={firstColumn}>{leftText()}</div>
+      <div css={secondColumn}>{rightText()}</div>
     </StyledRow>
   </StyledGrid>
 );

diff --git a/packages/gatsby-theme-carbon/src/templates/Default.js b/packages/gatsby-theme-carbon/src/templates/Default.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { WebsiteBackToTopBtn } from '@carbon/addons-website';
-import styled from '@emotion/styled';
 import Layout from '../components/Layout';
 import PageHeader from '../components/PageHeader';
 // import EditLink from '../components/EditLink';

diff --git a/packages/gatsby-theme-carbon/src/templates/Home.js b/packages/gatsby-theme-carbon/src/templates/Home.js
@@ -36,7 +36,7 @@ Homepage.defaultProps = {
     />
   ),
   FirstCallout: <Callout />,
-  SecondCallout: <Callout color="white" backgroundColor="activePrimary" />,
+  SecondCallout: <Callout color="inverse01" backgroundColor="#061f80" />,
 };
 
 export default Homepage;