Merge pull request #10875 from hashicorp/ks.style/branding-refresh

style(website): upgrade react-components, colors, logos

website/package.json

@@ -4,23 +4,24 @@
   "version": "1.0.0",
   "author": "HashiCorp",
   "dependencies": {
-    "@hashicorp/mktg-global-styles": "2.1.0",
-    "@hashicorp/nextjs-scripts": "16.3.0",
-    "@hashicorp/react-button": "4.0.0",
-    "@hashicorp/react-docs-page": "12.0.0",
-    "@hashicorp/react-hashi-stack-menu": "1.2.1-canary.0",
-    "@hashicorp/react-head": "1.1.6",
-    "@hashicorp/react-inline-svg": "5.0.0",
-    "@hashicorp/react-markdown-page": "^0.1.0",
+    "@hashicorp/mktg-global-styles": "3.0.1",
+    "@hashicorp/mktg-logos": "1.0.2",
+    "@hashicorp/nextjs-scripts": "17.1.0",
+    "@hashicorp/react-button": "5.0.0",
+    "@hashicorp/react-docs-page": "13.0.3",
+    "@hashicorp/react-hashi-stack-menu": "2.0.0",
+    "@hashicorp/react-head": "2.0.0",
+    "@hashicorp/react-inline-svg": "6.0.0",
+    "@hashicorp/react-markdown-page": "1.0.0",
     "@hashicorp/react-product-downloader": "4.0.2",
-    "@hashicorp/react-search": "^4.2.0",
-    "@hashicorp/react-section-header": "4.0.0",
-    "@hashicorp/react-subnav": "7.1.0",
-    "@hashicorp/react-vertical-text-block-list": "4.0.1",
+    "@hashicorp/react-search": "5.0.1",
+    "@hashicorp/react-section-header": "5.0.0",
+    "@hashicorp/react-subnav": "8.0.0",
+    "@hashicorp/react-vertical-text-block-list": "5.0.0",
     "adm-zip": "^0.5.4",
     "gray-matter": "^4.0.2",
     "next": "10.0.6",
-    "next-mdx-remote": "1.0.1",
+    "next-mdx-remote": "^1.0.1",
     "next-remote-watch": "0.3.0",
     "react": "16.13.1",
     "react-dom": "16.13.1"

website/pages/community/style.css

@@ -1,5 +1,5 @@
 #p-community {
-  --brand: var(--packer-text);
+  --brand-link: var(--packer-link);
 
   max-width: var(--site-max-width);
   margin: 72px auto;

website/pages/downloads/style.css

@@ -1,4 +1,18 @@
 #p-downloads {
+  /** DEBT: short-term color override until we upgrade to the most recent product downloader.
+  This will be handled as part of the "Redesigned Downloads Pages" project:
+  https://app.asana.com/0/1179659922742997/1199639822462636 */
+  --brand: var(--packer);
+
+  color: black !important;
   margin-top: 72px;
   margin-bottom: 72px;
+
+  & .g-type-buttons-and-standalone-links {
+    color: black;
+  }
+
+  & .g-product-downloader.product-packer {
+    --highlight-color: var(--packer-link);
+  }
 }

website/pages/home/index.jsx

@@ -5,7 +5,10 @@ export default function Homepage() {
   return (
     <div id="p-home">
       <section id="hero">
-        <img src="/img/logo-hashicorp.svg" alt="HashiCorp Packer Logo" />
+        <img
+          src={require('@hashicorp/mktg-logos/product/packer/primary/attributed_color.svg')}
+          alt="HashiCorp Packer Logo"
+        />
         <h1 className="g-type-display-3">Build Automated Machine Images</h1>
         <div className="buttons">
           <Button

website/pages/home/style.css

@@ -12,7 +12,7 @@
     }
 
     & img {
-      max-width: 358px;
+      width: 300px;
       margin: 0 30px;
     }
 
@@ -115,6 +115,10 @@
       margin: 20px 0 10px 0;
     }
 
+    & .text {
+      color: var(--packer-text-on-primary);
+    }
+
     & .logos,
     & .text {
       width: calc(50%);

website/pages/style.css

@@ -5,7 +5,7 @@
 @import '~@hashicorp/mktg-global-styles/_temporary-to-remove/tables.css';
 
 :root {
-  --highlight-color: var(--packer);
+  --highlight-color: var(--packer-link);
 }
 
 @import '~@hashicorp/react-button/styles/index.css';