update primary color

common/constants.js

@@ -46,6 +46,7 @@ export const system = {
   lime: "hsl(76, 61.7%, 45.1%)",
   grass: "hsl(131, 41.0%, 46.5%)",
   mint: "hsl(168, 52.8%, 51.0%)",
+  highlighter: "#E2FF59",
 
   // .mint {
   //   --mint1: hsl(165, 80.0%, 98.8%);

components/core/WebsiteFooter.js

@@ -7,7 +7,7 @@ import { css } from "@emotion/react";
 const STYLES_ROOT = css`
   width: 100%;
   margin: 0 auto;
-  background-color: ${Constants.semantic.bgLight};
+  background-color: ${Constants.semantic.bgGrayLight};
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 `;

components/core/WebsiteHeader.js

@@ -65,8 +65,8 @@ const STYLES_BUTTON_PRIMARY_SMALL = css`
   ${STYLES_BUTTON};
   padding: 5px 16px 7px;
   border-radius: 12px;
-  background-color: ${Constants.system.lime};
-  color: ${Constants.semantic.textWhite};
+  background-color: ${Constants.system.highlighter};
+  color: ${Constants.semantic.textBlack};
 `;
 
 const STYLES_IMG = css`

pages/get-slate.js

@@ -165,8 +165,8 @@ const STYLES_BUTTON = css`
 
 const STYLES_PRIMARY_BUTTON = css`
   ${STYLES_BUTTON}
-  background-color: ${Constants.system.lime};
-  color: ${Constants.semantic.textWhite};
+  background-color: ${Constants.system.highlighter};
+  color: ${Constants.semantic.textBlack};
 `;
 
 const STYLES_SECONDARY_BUTTON = css`

pages/guide/guide.js

@@ -14,7 +14,7 @@ const STYLES_ROOT = css`
   width: 100%;
   height: 100%;
   min-height: 100vh;
-  background-color: ${Constants.semantic.bgLight};
+  background-color: ${Constants.semantic.bgGrayLight};
   color: ${Constants.semantic.textBlack};
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -94,17 +94,17 @@ const STYLES_BODY = css`
 `;
 
 const STYLES_JUMPER = css`
-@keyframes jumper-fade-in {
-  0% {
-    opacity: 95%;
+  @keyframes jumper-fade-in {
+    0% {
+      opacity: 95%;
+    }
+    100% {
+      opacity: 100%;
+    }
   }
-  100% {
-    opacity: 100%;
-  }
-}
-animation: jumper-fade-in 200ms ease-in-out;
+  animation: jumper-fade-in 200ms ease-in-out;
 
-}
+  }
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     display: none;
@@ -150,7 +150,7 @@ const STYLES_IMGGUIDE = css`
   border-radius: 8px;
   margin-left: -190px;
 
-  @keyframes jumper-fade-in {
+  @keyframes guide-fade-in {
     0% {
       opacity: 0%;
       transform: translateY(5%);
@@ -164,7 +164,7 @@ const STYLES_IMGGUIDE = css`
       transform: translateY(0%);
     }
   }
-  animation: jumper-fade-in 700ms ease-in-out;
+  animation: guide-fade-in 500ms ease-in-out;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     width: 100%;
@@ -183,7 +183,7 @@ const STYLES_MOBILEGUIDE = css`
     height: auto;
     margin: 20px 0 64px 0;
 
-    @keyframes jumper-fade-in {
+    @keyframes mobile-fade-in {
       0% {
         opacity: 0%;
         transform: translateY(5%);
@@ -197,7 +197,7 @@ const STYLES_MOBILEGUIDE = css`
         transform: translateY(0%);
       }
     }
-    animation: jumper-fade-in 700ms ease-in-out;
+    animation: mobile-fade-in 700ms ease-in-out;
   }
 `;
 

pages/index.js

@@ -13,7 +13,7 @@ const STYLES_ROOT = css`
   width: 100%;
   height: 100%;
   min-height: calc(100vh - 61px);
-  background-color: ${Constants.semantic.bgLight};
+  background-color: ${Constants.semantic.bgGrayLight};
   color: ${Constants.semantic.textBlack};
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;