Home page updates (#1235)

* feat: changes

* fix: overlay

* feat: update photography tile image

* Change name

Author: Palke

gatsby-config.js

@@ -23,6 +23,10 @@ module.exports = {
             'https://github.com/carbon-design-system/design-language-website',
           branch: 'master',
         },
+        theme: {
+          homepage: 'g10',
+          interior: 'g10',
+        },
       },
     },
     `gatsby-transformer-yaml`,

src/components/VideoInternal/_video-internal.scss

@@ -16,7 +16,7 @@
 }
 
 .#{$prefix}--video-internal-overlay {
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(0, 0, 0, 0.5);
   z-index: 1;
   position: absolute;
   top: 0;

src/gatsby-theme-carbon/templates/Homepage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { HomepageCallout } from 'gatsby-theme-carbon';
 import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
 import HomepageVideo from '../../components/HomepageVideo';
-import { gray100 } from '@carbon/colors';
+import { gray10 } from '@carbon/colors';
 
 // Component to be shadowed
 
@@ -31,7 +31,8 @@ const customProps = {
   ),
   FirstCallout: (
     <HomepageCallout
-      backgroundColor={gray100}
+      backgroundColor={gray10}
+      color={"#191919"}
       leftText={FirstLeftText}
       rightText={FirstRightText}
     />

src/images/homepage/2306_2x_Grid_IDL_home.png

@@ -15,13 +15,13 @@ export default HomepageTemplate;
       title="Typeface"
       href="/typography/typeface"
       actionIcon="arrowRight"
-      titleColor="light"
-      iconColor="light"
+      titleColor="dark"
+      iconColor="dark"
       className="card-background"
       >
 
 
-![presentational animation of plex font](../images/homepage/landing-plex-animation.gif)
+![presentational of plex font](../images/homepage/2306_Typface_IDL_home.svg)
 
   </ImageCard>
   </Column>
@@ -37,7 +37,7 @@ export default HomepageTemplate;
         >
 
 
-![IBM rebus logo](../images/homepage/philosophy-rebus.png)
+![IBM rebus logo](../images/homepage/2306_Philosphy_IDL_home.svg)
 
   </ImageCard>
   </Column>
@@ -47,13 +47,13 @@ export default HomepageTemplate;
         aspectRatio="1:1"
         href="/color"
         actionIcon="arrowRight"
-        iconColor="light"
-        titleColor="light"
+        iconColor="dark"
+        titleColor="dark"
         className="card-background"
         >
 
 
-![IBM rebus logo](../images/homepage/landing-color-grid.svg)
+![IBM rebus logo](../images/homepage/2306_Color_IDL_home.png)
 
   </ImageCard>
   </Column>
@@ -64,12 +64,12 @@ export default HomepageTemplate;
         href="/photography/overview"
         actionIcon="arrowRight"
         iconColor="light"
-        titleColor="dark"
+        titleColor="light"
         className="card-background"
         >
 
 
-![grid of ibm colors](../images/homepage/photography_divers.jpg)
+![grid of ibm colors](../images/homepage/2306_Photography_IDL_home_v2.jpg)
 
   </ImageCard>
   </Column>
@@ -79,26 +79,26 @@ export default HomepageTemplate;
         aspectRatio="1:1"
         href="/illustration/overview"
         actionIcon="arrowRight"
-        iconColor="light"
-        titleColor="light"
+        iconColor="dark"
+        titleColor="dark"
         className="card-background"
         >
 
 
-![grid of ibm colors](../images/homepage/illustration_isometric.png)
+![isometric illustration](../images/homepage/2306_Illustration_IDL_home.png)
 
   </ImageCard>
   <ImageCard
     title="2x Grid"
     href="/2x-grid"
     actionIcon="arrowRight"
-    titleColor="light"
-    iconColor="light"
+    titleColor="dark"
+    iconColor="dark"
     className="card-background"
     >
 
 
-![IBM 2x grid](../images/homepage/grid-temp.png)
+![IBM 2x grid](../images/homepage/2306_2x_Grid_IDL_home.png)
 
 </ImageCard>
 </Column>
@@ -114,7 +114,7 @@ export default HomepageTemplate;
       title="IBM Plex® typeface latest release"
       actionIcon="arrowRight"
       aspectRatio="2:1"
-      color="dark"
+      color="light"
     />
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
@@ -123,7 +123,7 @@ export default HomepageTemplate;
       title="IBM color specifications"
       actionIcon="arrowRight"
       aspectRatio="2:1"
-      color="dark"
+      color="light"
     />
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
@@ -132,25 +132,25 @@ export default HomepageTemplate;
       title="2x Grid for video"
       actionIcon="arrowRight"
       aspectRatio="2:1"
-      color="dark"
+      color="light"
     />
   </Column>
-  <Column colMd={4} colLg={4} noGutterSm>
+  <Column colMd={4} colLg={4} noGutterSm className="no-left-border">
     <ResourceCard
       href="/iconography/ui-icons/design#resources"
       title="UI icon resources"
       actionIcon="arrowRight"
       aspectRatio="2:1"
-      color="dark"
+      color="light"
     />
   </Column>
-  <Column colMd={4} colLg={4} noGutterSm>
+  <Column colMd={4} colLg={4} noGutterSm className="left-border">
     <ResourceCard
       href="/iconography/pictograms/design#resources"
       title="Pictogram resources"
       actionIcon="arrowRight"
       aspectRatio="2:1"
-      color="dark"
+      color="light"
     />
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
@@ -159,25 +159,16 @@ export default HomepageTemplate;
       title="Illustration starter kits"
       actionIcon="arrowRight"
       aspectRatio="2:1"
-      color="dark"
-    />
-  </Column>
-  <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceCard
-      href="https://www.sketch.com/s/4f1cbe6c-6626-405e-8c46-a9ae41a30cba"
-      title="IDL Sketch design kit"
-      actionIcon="launch"
-      aspectRatio="2:1"
-      color="dark"
+      color="light"
     />
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
-      href="https://www.carbondesignsystem.com/designing/kits/sketch"
+      href="https://carbondesignsystem.com/designing/kits/figma"
       title="Carbon design kits"
       actionIcon="launch"
       aspectRatio="2:1"
-      color="dark"
+      color="light"
     />
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
@@ -186,7 +177,7 @@ export default HomepageTemplate;
       title="Questions?"
       actionIcon="arrowRight"
       aspectRatio="2:1"
-      color="dark"
+      color="light"
     />
   </Column>
 </Row>
@@ -200,7 +191,7 @@ export default HomepageTemplate;
       date="June 2022"
       href="/whats-new#technical-diagrams"
       actionIcon="arrowRight"
-      color="dark"
+      color="light"
     >
 
 ![Technical diagrams illustration](../images/homepage/whatsnew-tech-diagrams.svg)
@@ -213,7 +204,7 @@ export default HomepageTemplate;
       date="June 2022"
       href="/whats-new#infograms"
       actionIcon="arrowRight"
-      color="dark"
+      color="light"
     >
 
 ![Infograms illustration](../images/homepage/whatsnew-infograms.png)
@@ -226,7 +217,7 @@ export default HomepageTemplate;
       date="May 2022"
       href="/whats-new#people-illustration"
       actionIcon="arrowRight"
-      color="dark"
+      color="light"
     >
 
 ![Illustration Person walking right direction](../images/homepage/PeoplePage_Announcement_Final_v1.jpeg)

src/images/homepage/2306_Color_IDL_home.png

@@ -32,28 +32,18 @@
     margin-right: 0 !important;
   }
 
-  .bx--resource-card--dark {
-    border-color: transparent !important;
-    border-top-width: 0;
-  }
-
-  .bx--col-lg-4:nth-child(2n) .bx--resource-card--dark {
-    border-left-color: transparent !important;
-  }
-
-  .bx--col-lg-4:nth-child(n + 4) .bx--resource-card--dark {
-    border-top-width: 1px !important;
-  }
+  @include carbon--breakpoint-up('lg') {
+    .bx--col-lg-4:nth-child(3) .bx--resource-card {
+      border-top: 0;
+      border-left: 1px solid var(--cds-ui-03, #e0e0e0);
+    }
 
-  @include carbon--breakpoint-down('lg') {
-    .bx--col-lg-4:nth-child(n + 3) .bx--resource-card--dark {
-      border-top-width: 1px !important;
+    .left-border .bx--resource-card {
+      border-left: 1px solid var(--cds-ui-03, #e0e0e0);
     }
-  }
 
-  @include carbon--breakpoint-down('lg') {
-    .bx--col-lg-4:nth-child(n + 1) .bx--resource-card--dark {
-      border-top-width: 1px !important;
+    .no-left-border .bx--resource-card {
+      border-left-color: transparent !important;
     }
   }
 }