feat: light theme

packages/website-ue/src/components/BaseStyles.astro

@@ -82,6 +82,6 @@ import "@fontsource-variable/roboto-flex";
     --duration-brief: 200ms;
     --duration-subtle: 2s;
 
-    /* --tank-card-width: 11rem; */
+    --tank-card-min-width: 11rem;
   }
 </style>

packages/website-ue/src/components/Navbar.astro

@@ -21,13 +21,17 @@ const { locale } = Astro.props;
     justify-content: center;
 
     z-index: 1;
-    background-color: var(--gray-a2);
     box-shadow: var(--shadow-none);
-    backdrop-filter: var(--blur-glass) brightness(10%);
+    backdrop-filter: var(--blur-glass);
     box-shadow: var(--shadow-subtle);
+    background-color: var(--black-a9);
 
     transition-duration: var(--duration-brief);
 
+    :root.light & {
+      background-color: var(--white-a9);
+    }
+
     &[data-sticky="true"] {
       transform: translateY(-100%);
       box-shadow: var(--shadow-none);

packages/website-ue/src/components/TankCard/index.module.css

@@ -25,7 +25,7 @@
     }
 
     .icon {
-      width: var(--tank-card-width);
+      min-width: var(--tank-card-min-width);
       height: 7rem;
       position: relative;
 

packages/website-ue/src/components/TankCards/index.module.css

@@ -1,6 +1,9 @@
 .tank-cards {
   display: grid;
   gap: var(--space-5) var(--space-4);
-  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(var(--tank-card-min-width), 1fr)
+  );
   justify-content: center;
 }

packages/website-ue/src/components/ToolBanner.astro

@@ -31,6 +31,10 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
       backdrop-filter: var(--blur-tint);
 
+      :root.light & {
+        backdrop-filter: var(--blur-tint) invert(1) hue-rotate(180deg);
+      }
+
       @media (width > 40rem) {
         padding: var(--space-6) var(--space-5);
       }
@@ -50,6 +54,10 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
         width: 100%;
         height: 100%;
 
+        :root.light & {
+          filter: invert(1) brightness(0);
+        }
+
         mask-image: linear-gradient(
           90deg,
           transparent 25%,