Refine MAPLE visual system and shared surfaces

components/AnnouncementBanner/AnnouncementBanner.tsx

@@ -30,7 +30,11 @@ function AnnouncementBanner({
         >
           <FontAwesomeIcon
             icon={faXmark}
-            style={{ color: "white", fontSize: "18px", paddingRight: "8px" }}
+            style={{
+              color: "var(--maple-text-inverse)",
+              fontSize: "18px",
+              paddingRight: "8px"
+            }}
           />
         </button>
 

components/AnnouncementBanner/TranscriptAnnouncement.tsx

@@ -11,7 +11,7 @@ function TranscriptAnnouncement() {
           {t("announcement.headingBody")}
           <br />
           {t("announcement.description")}{" "}
-          <a href="/hearings" style={{ color: "white" }}>
+          <a href="/hearings" style={{ color: "var(--maple-text-inverse)" }}>
             {t("announcement.link")}
           </a>
         </span>

components/BillStatusCard/BillStatusCard.tsx

@@ -39,10 +39,10 @@ const HandleBranchStyle = (branchStyle: string) => {
   var returnStyle
   switch (branchStyle) {
     case "HOUSE":
-      returnStyle = { backgroundColor: "#1a3185" }
+      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/Card/Card.tsx

@@ -1,9 +1,18 @@
 import { ReactElement, useState } from "react"
 import CardBootstrap from "react-bootstrap/Card"
+import styled from "styled-components"
 import { CardListItems, ListItem } from "./CardListItem"
 import { CardTitle } from "./CardTitle"
 import { SeeMore } from "./SeeMore"
 
+const SurfaceCard = styled(CardBootstrap)`
+  background-color: var(--maple-surface-base);
+  border: 1px solid var(--maple-surface-border);
+  border-radius: var(--maple-radius-lg);
+  box-shadow: var(--maple-shadow-sm);
+  overflow: hidden;
+`
+
 interface CardItem {
   billName: string
   billNameElement?: ReactElement | undefined
@@ -92,13 +101,13 @@ export const Card = (CardProps: CardProps) => {
   const shown = showAll ? allItems : allItems.slice(0, initialRowCount)
 
   return (
-    <CardBootstrap className={`bg-white overflow-hidden rounded-3`}>
+    <SurfaceCard className={className}>
       {headerContent}
       {<CardListItems items={shown} />}
       {bodyContent}
       {allItems.length > initialRowCount && (
         <SeeMore onClick={handleSeeMoreClick} />
       )}
-    </CardBootstrap>
+    </SurfaceCard>
   )
 }

components/EditProfilePage/StyledEditProfileComponents.tsx

@@ -23,7 +23,7 @@ export const StyledTabNav = styled(Nav).attrs(props => ({
   color: var(--bs-dark);
 
   .nav-link.active {
-    color: #c71e32;
+    color: var(--maple-brand-danger);
   }
 
   .nav-link {
@@ -53,7 +53,7 @@ export const TabNavLink = styled(Nav.Link).attrs(props => ({
   className: `rounded-top m-0 p-0 ${props.className}`
 }))`
   &.active {
-    color: #c71e32;
+    color: var(--maple-brand-danger);
   }
 `
 

components/Footer/Footer.tsx

@@ -24,37 +24,37 @@ export type PageFooterProps = {
 const TextHeader = styled.h6`
   font-size: 1rem;
   font-weight: bold;
-  color: #fff;
+  color: var(--maple-text-inverse);
   padding: 0.5rem 1rem 0 0;
   margin: 0;
 `
 
 const BrowseHeader = styled(NavLink)`
   font-size: 1rem;
-  color: #fff;
+  color: var(--maple-text-inverse);
   padding: 0.5rem 1rem 0 0;
   margin: 0 0 10px 0;
 
   @media (max-width: 768px) {
     padding-bottom: 0.6rem;
-    border-bottom: solid 1.5px rgba(255, 255, 255, 0.75);
+    border-bottom: solid 1.5px var(--maple-border-inverse-soft);
     margin: 0;
   }
 
   &:hover {
-    color: white;
+    color: var(--maple-text-inverse);
     text-decoration: underline 1.5px;
   }
 `
 
 const StyledInternalLink = styled(NavLink)`
-  color: rgba(255, 255, 255, 0.55);
+  color: var(--maple-text-inverse-muted);
   letter-spacing: -0.63px;
   padding-top: 4;
   margin: 5px 0;
 
   &:hover {
-    color: white;
+    color: var(--maple-text-inverse);
     text-decoration: none;
   }
 `
@@ -64,13 +64,19 @@ function MapleContainer({ className }: { className?: string }) {
   return (
     <div style={{ maxWidth: "220px" }} className={className}>
       <Row style={{ textAlign: "center" }}>
-        <p style={{ fontSize: "1em", color: "#fff" }}>{t("headers.follow")}</p>
+        <p style={{ fontSize: "1em", color: "var(--maple-text-inverse)" }}>
+          {t("headers.follow")}
+        </p>
       </Row>
       <Row style={{ justifyContent: "center" }}>
         <Col style={{ display: "flex", justifyContent: "center" }}>
           <Button
             variant="light"
-            style={{ borderRadius: 50, padding: 8, margin: 5 }}
+            style={{
+              borderRadius: "var(--maple-radius-pill)",
+              padding: "var(--maple-space-md)",
+              margin: "var(--maple-space-sm)"
+            }}
             href="https://twitter.com/MapleTestimony"
             target="_blank"
             rel="noopener noreferrer"
@@ -85,7 +91,11 @@ function MapleContainer({ className }: { className?: string }) {
           <Button
             variant="light"
             href="https://www.instagram.com/mapletestimony/?hl=en"
-            style={{ borderRadius: 50, padding: 8, margin: 5 }}
+            style={{
+              borderRadius: "var(--maple-radius-pill)",
+              padding: "var(--maple-space-md)",
+              margin: "var(--maple-space-sm)"
+            }}
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -98,7 +108,11 @@ function MapleContainer({ className }: { className?: string }) {
           </Button>
           <Button
             variant="light"
-            style={{ borderRadius: 50, padding: 8, margin: 5 }}
+            style={{
+              borderRadius: "var(--maple-radius-pill)",
+              padding: "var(--maple-space-md)",
+              margin: "var(--maple-space-sm)"
+            }}
             href="https://www.linkedin.com/company/maple-testimony"
             target="_blank"
             rel="noopener noreferrer"
@@ -236,7 +250,8 @@ const PageFooter = (props: PageFooterProps) => {
   return (
     <FooterContainer
       fluid
-      className="bg-black d-flex flex-wrap flex-column-reverse flex-md-row align-items-center align-items-md-stretch p-2 p-md-5"
+      className="d-flex flex-wrap flex-column-reverse flex-md-row align-items-center align-items-md-stretch p-2 p-md-5"
+      style={{ backgroundColor: "var(--maple-brand-dark)" }}
     >
       <Navbar
         variant="dark"
@@ -282,12 +297,15 @@ const PageFooter = (props: PageFooterProps) => {
         </Col>
       </div>
       <MapleContainer className={`col-auto order-md-2 justify-self-end `} />
-      <div className={`col-12 order-md-3 text-center text-md-start text-white`}>
+      <div
+        className={`col-12 order-md-3 text-center text-md-start`}
+        style={{ color: "var(--maple-text-inverse)" }}
+      >
         {t("legal.disclaimer")}
         {" - "}
         <a
           href={NEWSLETTER_SIGNUP_URL}
-          style={{ color: "white" }}
+          style={{ color: "var(--maple-text-inverse)" }}
           target="_blank"
           rel="noopener noreferrer"
         >

components/Footer/FooterContainer.tsx

@@ -15,7 +15,7 @@ export const FooterContainer = styled(Container)`
     display: flex;
     flex-grow: 1;
     justify-content: space-between;
-    color: (var(--bs-white));
+    color: var(--maple-text-inverse);
   }
 
   .navbar-dark .navbar-nav .nav-link {
@@ -49,7 +49,7 @@ export const FooterContainer = styled(Container)`
   }
 
   .dropdown-menu.show {
-    background-color: #000;
+    background-color: var(--maple-brand-dark);
     transition-timing-function: ease;
   }
 `

components/HeroHeader/HeroHeader.module.css

@@ -1,6 +1,6 @@
 .container {
   color: white;
-  background-color: #1a3185;
+  background-color: var(--maple-brand-primary);
   overflow: hidden;
 }
 

components/InTheNews/NewsCard.tsx

@@ -12,7 +12,7 @@ export const NewsCard = ({ newsItem }: NewsCardProps) => {
     <div
       className="d-flex flex-row flex-fill gap-5 p-4"
       style={{
-        backgroundColor: "#F6F7FF",
+        backgroundColor: "var(--maple-color-blue-subtle-bg)",
         borderTop: "6px solid var(--bs-secondary)"
       }}
     >
@@ -33,7 +33,7 @@ export const NewsCard = ({ newsItem }: NewsCardProps) => {
             style={{
               width: "1px",
               height: "1em",
-              backgroundColor: "black",
+              backgroundColor: "var(--maple-border-default)",
               alignSelf: "center"
             }}
           />
@@ -57,7 +57,7 @@ export const NewsCard = ({ newsItem }: NewsCardProps) => {
           href={newsItem.url}
           target="_blank"
           rel="noopener noreferrer"
-          style={{ color: "#1587D3", fontWeight: 800 }}
+          style={{ color: "var(--maple-brand-primary)", fontWeight: 800 }}
         >
           {t("readMoreButton")}
           <ArrowForward />

components/Navbar.tsx

@@ -29,30 +29,17 @@ import {
   NavbarLinkWhyUse
 } from "./NavbarComponents"
 
+const MobileCollapse = styled(Navbar.Collapse)`
+  background-color: var(--maple-brand-primary);
+`
+
 export const MainNavbar: React.FC<React.PropsWithChildren<unknown>> = () => {
   const isMobile = useMediaQuery("(max-width: 768px)")
 
   return <>{isMobile ? <MobileNav /> : <DesktopNav />}</>
 }
 
 const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
-  const BlackCollapse = styled(() => {
-    return (
-      <Navbar.Collapse id="basic-navbar-nav" className="bg-black mt-2 ps-4">
-        {/* while MAPLE is trying to do away with inline styling,   *
-         *  both styled-components and bootstrap classes have been  *
-         *  ignoring height properties for some reason              */}
-        <div style={{ height: "100vh" }}>
-          {whichMenu == "site" ? <SiteLinks /> : <ProfileLinks />}
-        </div>
-      </Navbar.Collapse>
-    )
-  })`
-    .bg-black {
-      background-color: black;
-    }
-  `
-
   const ProfileLinks = () => {
     return (
       <Nav className="my-4 d-flex align-items-start">
@@ -134,8 +121,8 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
 
   return (
     <Navbar
-      bg="secondary"
       className={`w-100 ${isExpanded ? "pb-0" : ""}`}
+      style={{ backgroundColor: "var(--maple-brand-primary)" }}
       data-bs-theme="dark"
       expand="lg"
       expanded={isExpanded}
@@ -184,7 +171,10 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
             }
             className="mobile-nav-trigger"
           >
-            <span className="p-0 text-white d-inline-flex">
+            <span
+              className="p-0 d-inline-flex"
+              style={{ color: "var(--maple-text-inverse)" }}
+            >
               {isExpanded && whichMenu == "profile" ? (
                 <Image
                   src="/Union.svg"
@@ -203,7 +193,14 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
         )}
       </Col>
 
-      <BlackCollapse />
+      <MobileCollapse id="basic-navbar-nav" className="mt-2 ps-4">
+        {/* while MAPLE is trying to do away with inline styling,   *
+         *  both styled-components and bootstrap classes have been  *
+         *  ignoring height properties for some reason              */}
+        <div style={{ height: "100vh" }}>
+          {whichMenu == "site" ? <SiteLinks /> : <ProfileLinks />}
+        </div>
+      </MobileCollapse>
     </Navbar>
   )
 }
@@ -215,7 +212,8 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <Container
       fluid
-      className={`desktop-navbar bg-secondary d-flex py-2 sticky-top justify-content-end gap-2`}
+      className={`desktop-navbar d-flex py-2 sticky-top justify-content-end gap-2`}
+      style={{ backgroundColor: "var(--maple-brand-primary)" }}
     >
       <div className={`me-auto`}>
         <NavbarLinkLogo />
@@ -251,9 +249,7 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
 
       <div className={`align-self-center px-2`}>
         <Dropdown>
-          <Dropdown.Toggle
-            className={`desktop-navbar-dropdown btn-secondary text-white`}
-          >
+          <Dropdown.Toggle className={`desktop-navbar-dropdown btn-secondary`}>
             {t("about")}
           </Dropdown.Toggle>
           <Dropdown.Menu>
@@ -269,9 +265,7 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
 
       <div className={`align-self-center px-2`}>
         <Dropdown>
-          <Dropdown.Toggle
-            className={`desktop-navbar-dropdown btn-secondary text-white`}
-          >
+          <Dropdown.Toggle className={`desktop-navbar-dropdown btn-secondary`}>
             {t("learn")}
           </Dropdown.Toggle>
           <Dropdown.Menu>