commit de8692c72079bdc2cefb50a693b8d496a899770c
author Jamal Carvalho <jamal@golang.org> Thu Jun 10 11:55:26 2021 -0400
committer Jamal Carvalho <jamal@golang.org> Thu Jun 10 19:30:41 2021 +0000
tree 21e68f904ce8e6399be89cd9d26ba1bf9a8ab6f1
parent b208126254be1805ac7c45e50ae8ac1e64c97107

content/static: use color intents on homepage content

Switching color usage to color intents as a prerequisite
for dark mode.

Change-Id: Id958ba13cecfd7c07d88e4b331750bf270007bcc
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/326810
Trust: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>

content/static/_header/header.css

diff --git a/content/static/_header/header.css b/content/static/_header/header.css
index 14dc33b..be8b320 100644
--- a/content/static/_header/header.css
+++ b/content/static/_header/header.css
@@ -172,7 +172,7 @@
   transition: max-width 200ms;
 }
 .go-SearchForm--open {
-  background-color: var(--white);
+  background-color: var(--color-background);
   margin-left: 1.5rem;
   max-width: min(100%, 30rem);
 }
@@ -184,7 +184,7 @@
   width: 1.4375rem;
 }
 .go-SearchForm--open svg {
-  fill: var(--gray-3);
+  fill: var(--color-text-subtle);
   margin-right: 0.5rem;
 }
 .go-SearchForm-input {
@@ -207,7 +207,7 @@
   width: 100%;
 }
 .go-SearchForm-input::placeholder {
-  color: var(--gray-4);
+  color: var(--color-text-subtle);
 }
 .go-SearchForm-submit {
   background-color: transparent;
@@ -224,7 +224,7 @@
     width: 100%;
   }
   .go-SearchForm {
-    background-color: var(--white);
+    background-color: var(--color-background);
     margin: 0.6rem 1.4rem 0.6rem 0;
     max-width: none;
   }
@@ -234,7 +234,7 @@
     width: 100%;
   }
   .go-SearchForm svg {
-    fill: #555759;
+    fill: var(--color-text-subtle);
     margin-right: 0.5rem;
   }
 }

content/static/homepage/homepage.css

diff --git a/content/static/homepage/homepage.css b/content/static/homepage/homepage.css
index fdfe136..063640a 100644
--- a/content/static/homepage/homepage.css
+++ b/content/static/homepage/homepage.css
@@ -26,9 +26,9 @@
   background: url('/static/img/icon-search.svg') right no-repeat;
   background-position: left 0.75rem center;
   background-size: 1.5rem;
-  border: 0.0625rem solid var(--gray-8);
+  border: var(--border);
   border-radius: 0.5rem 0 0 0.5rem;
-  color: var(--gray-4);
+  color: var(--color-text);
   font-size: 1rem;
   height: 3rem;
   padding-left: 2.75rem;
@@ -40,10 +40,10 @@
   margin: 2.5rem auto auto 0;
 }
 .Homepage-searchButton {
-  background-color: var(--turq-dark);
+  background-color: var(--color-button);
   border: none;
   border-radius: 0 0.5rem 0.5rem 0;
-  color: var(--white);
+  color: var(--color-button-text);
   cursor: pointer;
   font-size: 1em;
   height: 3rem;
@@ -81,7 +81,7 @@
 }
 .Homepage-exampleSearches {
   align-items: center;
-  color: var(--gray-2);
+  color: var(--color-text-subtle);
   display: block;
   font-size: 0.875rem;
   font-weight: 500;
@@ -105,20 +105,20 @@
   }
 }
 .Homepage-exampleSearch {
-  color: var(--turq-dark);
+  color: var(--color-brand-primary);
   font-size: 1rem;
   font-weight: initial;
   padding: 0 0.625rem;
 }
 .Questions {
-  background: var(--gray-10);
-  color: var(--gray-2);
+  background: var(--color-background-accented);
+  color: var(--color-text);
   display: flex;
   padding-bottom: 1rem;
   padding-top: 0.5rem;
 }
 .Questions-header {
-  color: var(--gray-2);
+  color: var(--color-text);
   font-weight: bold;
   margin: 1rem 0;
 }