Replace remaining hardcoded hex values with design tokens

Author: tripledoublev

components/BillStatusCard/BillStatusCard.tsx

@@ -42,7 +42,7 @@ const HandleBranchStyle = (branchStyle: string) => {
       returnStyle = { backgroundColor: "var(--maple-brand-primary)" }
       break
     case "SENATE":
-      returnStyle = { backgroundColor: "#A92929" }
+      returnStyle = { backgroundColor: "var(--maple-brand-senate)" }
       break
     default:
       returnStyle = {
@@ -102,7 +102,7 @@ const ScrollStyle = styled.div`
 
   /* Handle */
   ::-webkit-scrollbar-thumb {
-    background: #d9d9d9;
+    background: var(--maple-border-default);
     border-radius: 10px;
   }
 `

components/Newsfeed/StyledNewsfeedComponents.tsx

@@ -24,7 +24,7 @@ export const HeaderTitle = styled(Col)`
   font-size: 40px;
   line-height: var(--maple-line-height-loose);
   letter-spacing: -0.03em;
-  color: #000000;
+  color: var(--maple-text-strong);
 `
 
 export const StyledContainer = styled(Container)`

components/TestimonyCard/Tabs.tsx

@@ -147,7 +147,7 @@ const TabStyle = styled.div<{
     props.variant === "ballotQuestion"
       ? props.active
         ? "var(--maple-brand-danger)"
-        : "#212529"
+        : "var(--maple-text-strong)"
       : props.active
       ? "var(--maple-brand-danger)"
       : "black"};

components/TestimonyCard/ViewTestimony.tsx

@@ -207,7 +207,7 @@ const ViewTestimony = (
 export default ViewTestimony
 
 const FeedShell = styled.div`
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--maple-border-default);
   border-radius: 0.75rem;
   padding: 1.5rem;
   box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.06);

components/ballotquestions/OverviewTab.tsx

@@ -141,25 +141,25 @@ function BallotGlyph() {
         height="2.7"
         rx="0.7"
         fill="rgba(94, 114, 228, 0.14)"
-        stroke="#3249b3"
+        stroke="var(--maple-brand-primary)"
         strokeWidth="1.2"
       />
       <path
         d="M9.1 11.45L9.8 12.15L10.95 10.95"
-        stroke="#3249b3"
+        stroke="var(--maple-brand-primary)"
         strokeWidth="1.25"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M12.6 10.9H15.95"
-        stroke="#3249b3"
+        stroke="var(--maple-brand-primary)"
         strokeWidth="1.35"
         strokeLinecap="round"
       />
       <path
         d="M8.3 15.2H15.95"
-        stroke="#94A3B8"
+        stroke="var(--maple-text-muted)"
         strokeWidth="1.35"
         strokeLinecap="round"
       />

components/bill/BillTracker.tsx

@@ -61,7 +61,7 @@ export const BillStageStrip = ({
   const color = isCurrentStage
     ? "var(--bs-green)"
     : isPastStage
-    ? "#8EBC81"
+    ? "var(--maple-brand-stage-past)"
     : "var(--bs-gray)"
 
   return (

components/bill/TestimonyCounts.tsx

@@ -31,7 +31,7 @@ const CountCategory = styled.div`
 
   letter-spacing: 0.03em;
 
-  color: #979797;
+  color: var(--maple-text-muted);
 `
 
 const CountIcon = styled(Image)`

components/hearing/HearingSidebar.tsx

@@ -85,7 +85,7 @@ const BillsBody = styled.div`
 `
 
 const ModalLine = styled.hr`
-  border-color: #000000;
+  border-color: currentColor;
   border-style: solid;
   border-width: 1px;
   opacity: 0.1;
@@ -103,7 +103,7 @@ const SidebarBottom = styled.div`
 `
 
 const SidebarHeader = styled.div`
-  background-color: #c0c4dc;
+  background-color: var(--maple-surface-hearing-header);
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
   padding-top: var(--maple-space-sm);
@@ -561,7 +561,7 @@ function VotesModal({
 
 const VoteRow = styled.div`
   &:nth-child(even) {
-    background-color: #eae7e7;
+    background-color: var(--maple-surface-page);
   &:nth-child(odd) {
     background-color: white;
   }

components/hearing/Transcriptions.tsx

@@ -34,7 +34,7 @@ const ResultNumText = styled.div`
   top: 50%;
   user-select: none;
   transform: translateY(-50%);
-  color: #979797;
+  color: var(--maple-text-muted);
 `
 
 const NoResultFound = styled.div`
@@ -54,12 +54,12 @@ const SearchInput = styled.input`
   outline: none;
   color: var(--maple-brand-primary);
   &:focus {
-    border-color: #999;
-    background-color: #fff;
+    border-color: var(--maple-border-default);
+    background-color: var(--maple-surface-base);
   }
 
   &::placeholder {
-    color: #aaa;
+    color: var(--maple-text-muted);
   }
 `
 
@@ -76,7 +76,7 @@ const SearchIcon = styled(FontAwesomeIcon)`
 const SearchWrapper = styled.div`
   position: relative;
   width: 100%;
-  background-color: #8c98c2;
+  background-color: var(--maple-surface-hearing-search);
   padding: 1.5rem 1rem;
 `
 
@@ -115,8 +115,8 @@ const TranscriptRow = styled(Row)`
     border-left-width: 5px;
   }
   &:nth-child(odd) {
-    background-color: #e8ecf4;
-    border-left-color: #e8ecf4;
+    background-color: var(--maple-surface-transcript-stripe);
+    border-left-color: var(--maple-surface-transcript-stripe);
     border-left-style: solid;
     border-left-width: 5px;
   }
@@ -125,7 +125,7 @@ const TranscriptRow = styled(Row)`
     border-bottom-right-radius: 0.75rem;
   }
   &:hover {
-    background-color: #d9dfea;
+    background-color: var(--maple-surface-transcript-hover);
     border-color: var(--maple-brand-primary);
     border-style: solid;
     border-width: 5px;
@@ -443,7 +443,10 @@ const TranscriptItem = forwardRef(function TranscriptItem(
               value={element.start}
             >
               {isHovered ? (
-                <ArrowRightAlt fontSize="large" style={{ color: "#737373" }} />
+                <ArrowRightAlt
+                  fontSize="large"
+                  style={{ color: "var(--maple-text-muted)" }}
+                />
               ) : (
                 <></>
               )}

components/layout.tsx

@@ -55,9 +55,7 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
               <a href="#main-content" className="skip-link">
                 Skip to main content
               </a>
-              <header>
-                <MainNavbar />
-              </header>
+              <MainNavbar />
               <AuthModal />
               <main id="main-content" className="col" tabIndex={-1}>
                 {children}