Add light mode CSS

blog/index.page.tsx

@@ -87,12 +87,7 @@ export default function Index() {
             <div className="col">
               <div className="text-bg">
                 <h4 className="mb-3 eyebrow text-uppercase font-weight-light">
-                  <span
-                    style={{
-                      textDecoration: "overline solid #32E685 10%",
-                      paddingBottom: "4px",
-                    }}
-                  >
+                  <span className="post-date pb-2">
                     {translate(`${moment(heroPost.date).format("MMM")}`)}
                   </span>
                   {translate(` ${moment(heroPost.date).format("DD YYYY")}`)}
@@ -128,13 +123,10 @@ export default function Index() {
             <div className="row-cols-lg-2 m-0 p-0 mt-2 d-none d-lg-block">
               {/* Filters Desktop*/}
               <div className="p-3 category_sidebar">
-                <p className="mb-3 category-header">Filter by Category:</p>
+                <p className="mb-2 category-header">Filter by Category:</p>
                 <div className="d-flex flex-column p-3">
                   {Object.keys(categories).map((item) => (
-                    <div
-                      key={item}
-                      className="cat_checkbox category-checkbox pb-2"
-                    >
+                    <div key={item} className="category-checkbox pb-2">
                       <input
                         className={`blog-filter input_${item}`}
                         type="checkbox"

static/img/blog/blog-check-light-mode.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1663_35630)">
+<path d="M12 5.75L7 10.75L4 7.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1663_35630">
+<rect width="16" height="16" fill="black"/>
+</clipPath>
+</defs>
+</svg>

styles/_blog.scss

@@ -43,7 +43,7 @@
   .category-badge {
     max-width: 180px;
     border-radius: 30px;
-    border: solid 1px;
+    border: solid 2px;
     padding: 1px;
     text-align: center;
     word-wrap: break-word;
@@ -51,6 +51,10 @@
     font-weight: bold;
   }
 
+  .post-date {
+    text-decoration: overline solid #32E685 10%;
+  }
+
   #general-badge {
     background-color: #343437;
     color: #FFFFFF;
@@ -127,7 +131,8 @@
   }
 
   .category-header {
-    font-weight: bold;
+    font-weight: normal;
+    width: 200px;
     color: $gray-100;
   }
 

styles/light/_light-theme.scss

@@ -404,6 +404,10 @@ article a.button,
     }
   }
 
+  #topnav-button {
+    background-color: $gray-200;
+  }
+
   // Top nav mobile
   @include media-breakpoint-down(md) {
     .navbar-toggler {
@@ -1234,3 +1238,90 @@ main article .card-grid {
       $gray-100 -2px -2px 3px, $gray-100 -2px -2px 4px;
   }
 }
+
+.dev-blog {
+  .text-bg {
+    background-color: $white;
+  }
+
+  #card-date {
+    color: $gray-600;
+  }
+
+  .category-header {
+    color: $gray-900;
+  }
+
+  label {
+    color: $gray-700;
+  }
+
+  .blog-filter[type="checkbox"]::before {
+    background: $gray-100;
+  }
+
+  .blog-filter[type="checkbox"]:checked::before {
+    background: $gray-100;
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):checked:hover::after {
+    background-image: url(../img/blog/blog-check-light-mode.svg);
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):hover::before {
+    background: $gray-100;
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):hover::after {
+    background: $gray-100;
+  }
+
+  .post-date {
+    text-decoration: overline solid #145C35 10%;
+  }
+
+  #general-badge {
+    background-color: #FFFFFF;
+    color: #343437; 
+  }
+
+  #release_notes-badge {
+    background-color: #32E685;
+    color: #145C35; 
+  }
+
+  #advisories-badge {
+    background-color: #FF6719;
+    color: #4C1A00;
+  }
+
+  #amendments-badge {
+    background-color: #FAFF19;
+    color: #4B4C00; 
+  }
+
+  #development-badge {
+    background-color: #7919FF;
+    color: #20004C;
+  }
+
+  #developer_reflections-badge {
+    background-color: #19A3FF;
+    color: #002E4C;
+  }
+
+  #gateway_bulletins-badge {
+    background-color: #D919FF;
+    color: #40004C;
+  }
+
+  #features-badge {
+    background-color: #32E685;
+    color: #145C35;
+  }
+
+  #security-badge {
+    background-color: #FF198B;
+    color: #4C0026;
+  }
+}