refactor: replace CSS @value with CSS custom properties

src/app/_auth/login_signup.module.css

@@ -1,20 +1,18 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .loginSignup {
     display: flex;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
     margin: auto;
     flex-direction: column;
     justify-content: center;
     height: 100%;
-    width: calc(gridBaseline * 35);
+    width: calc(var(--gridBaseline) * 35);
     max-width: 90%;
 }
 
 .submitContainer {
     display: flex;
     width: 100%;
-    margin-top: gridBaseline;
+    margin-top: var(--gridBaseline);
     align-items: center;
     justify-content: space-between;
 }

src/app/globals.css

@@ -1,3 +1,5 @@
+@import '../ui/base/design_system/design_system.css';
+
 @font-face {
     font-family: 'Futura Book';
     src: url('/futura-book.otf') format('opentype');

src/app/instructions/page.module.css

@@ -1,16 +1,13 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-@value colorPurple, colorGreyA5 from "ui/base/colors/colors.module.css";
-
 .instructions {
     margin: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    max-width: calc(gridBaseline * 120);
+    max-width: calc(var(--gridBaseline) * 120);
 }
 
 .section {
-    margin: calc(gridBaseline * 2) 0;
+    margin: calc(var(--gridBaseline) * 2) 0;
 }
 
 .instructionList li::marker {

src/app/layout.module.css

@@ -1,5 +1,3 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .skeleton {
     width: 100vw;
     height: 100vh;

src/app/layout.tsx

@@ -2,7 +2,7 @@ import { ApiProvider } from 'app/api/api_provider';
 import type { Metadata } from 'next';
 import { getFlags } from 'services/server_context';
 import { SessionProvider } from 'session/session_provider';
-import colorStyles from 'ui/base/colors/colors.module.css';
+import { colors } from 'ui/base/design_system/design_tokens';
 import { NavBar } from 'ui/nav_bar/nav_bar';
 import './globals.css';
 import styles from './layout.module.css';
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 };
 
 export const viewport = {
-  themeColor: colorStyles.colorPurple,
+  themeColor: colors.purple,
 };
 
 export const dynamic = 'force-dynamic';

src/app/maintenance_banner.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import colorStyles from 'ui/base/colors/colors.module.css';
-import { gridBaseline } from 'ui/base/metrics/metrics';
+import { colors, metrics } from 'ui/base/design_system/design_tokens';
 
 export const MaintenanceBanner = (props: { message: string }) => {
   return (
     <div
       style={{
-        backgroundColor: colorStyles.colorRed,
-        color: colorStyles.colorWhite,
+        backgroundColor: colors.red,
+        color: colors.white,
         width: '100vw',
-        height: gridBaseline * 6,
+        height: metrics.gridBaseline * 6,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',

src/app/map/_components/map_page.module.css

@@ -1,15 +1,14 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-@value colorGrey, colorGreyA15, colorGreyA30 from "ui/base/colors/colors.module.css";
-
-@value margins: calc(gridBaseline * 3);
-@value albumArtMaxWidth: 300px;
-@value gap: calc(gridBaseline * 3);
-@value minContentWidth: calc(gridBaseline * 80);
-@value breakpoint: calc(albumArtMaxWidth + gap + minContentWidth + margins);
+:root {
+  --margins: calc(var(--gridBaseline) * 3);
+  --albumArtMaxWidth: 300px;
+  --gap: calc(var(--gridBaseline) * 3);
+  --minContentWidth: calc(var(--gridBaseline) * 80);
+  --breakpoint: calc(var(--albumArtMaxWidth) + var(--gap) + var(--minContentWidth) + var(--margins));
+}
 
 .mapPage {
     height: 100%;
-    padding: margins;
+    padding: var(--margins);
     box-sizing: border-box;
 
     display: flex;
@@ -20,21 +19,21 @@
 .albumArt {
     position: relative;
     flex-shrink: 0;
-    height: albumArtMaxWidth;
-    width: albumArtMaxWidth;
+    height: var(--albumArtMaxWidth);
+    width: var(--albumArtMaxWidth);
     margin: auto;
-    margin-bottom: calc(gridBaseline * 3);
+    margin-bottom: calc(var(--gridBaseline) * 3);
     animation: 2s infinite loadingAlbumArt;
 }
 @keyframes loadingAlbumArt {
     0% {
-        background-color: colorGreyA15;
+        background-color: var(--colorGreyA15);
     }
     50% {
-        background-color: colorGreyA30;
+        background-color: var(--colorGreyA30);
     }
     100% {
-        background-color: colorGreyA15;
+        background-color: var(--colorGreyA15);
     }
 }
 
@@ -47,20 +46,20 @@
 .mapContent {
     display: flex;
     flex-direction: column;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
     height: 100%;
-    min-width: min(100%, calc(gridBaseline * 100));
-    max-width: max(calc(gridBaseline * 140));
+    min-width: min(100%, calc(var(--gridBaseline) * 100));
+    max-width: max(calc(var(--gridBaseline) * 140));
 }
 
 .difficulties {
     display: flex;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
 }
 .difficultyPill {
-    background: colorGrey;
-    padding: calc(gridBaseline * 0.5) calc(gridBaseline * 2);
-    border-radius: calc(gridBaseline * 2);
+    background: var(--colorGrey);
+    padding: calc(var(--gridBaseline) * 0.5) calc(var(--gridBaseline) * 2);
+    border-radius: calc(var(--gridBaseline) * 2);
 }
 
 .description {
@@ -74,20 +73,20 @@
 
 .actions {
     display: grid;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
     grid-auto-flow: column;
     width: min-content;
-    margin: gridBaseline 0;
+    margin: var(--gridBaseline) 0;
 }
 
-@media screen and (min-width: breakpoint) {
+@media screen and (min-width: var(--breakpoint)) {
     .mapPage {
         flex-direction: row;
         align-items: flex-start;
     }
 
     .albumArt {
         margin: inherit;
-        margin-right: calc(gridBaseline * 3);
+        margin-right: calc(var(--gridBaseline) * 3);
     }
 }

src/app/map/_components/submit_map.module.css

@@ -1,10 +1,7 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-@value colorPurple, colorRed, colorGreyA30, colorGreyA5 from "ui/base/colors/colors.module.css";
-
 .submitMap {
     height: 100%;
     margin: auto;
-    width: calc(gridBaseline * 130);
+    width: calc(var(--gridBaseline) * 130);
     max-width: 95%;
     display: flex;
     flex-direction: column;
@@ -14,19 +11,19 @@
 
 .fileContainer {
     position: relative;
-    min-height: calc(gridBaseline * 30);
-    min-width: calc(gridBaseline * 30);
+    min-height: calc(var(--gridBaseline) * 30);
+    min-width: calc(var(--gridBaseline) * 30);
     max-width: 90%;
-    padding: calc(gridBaseline * 2);
+    padding: calc(var(--gridBaseline) * 2);
     border-width: 2px;
     border-style: dashed;
-    border-color: colorGreyA30;
-    background: colorGreyA5;
+    border-color: var(--colorGreyA30);
+    background: var(--colorGreyA5);
     cursor: pointer;
 }
 
 .fileContainer.hasMapData {
-    border-color: colorPurple;
+    border-color: var(--colorPurple);
 }
 
 .fileContainer.isSubmitting {
@@ -59,30 +56,30 @@
 }
 
 .progressContainer {
-    margin-left: calc(gridBaseline * 2);
+    margin-left: calc(var(--gridBaseline) * 2);
     position: relative;
-    min-height: gridBaseline;
-    width: calc(gridBaseline * 40);
+    min-height: var(--gridBaseline);
+    width: calc(var(--gridBaseline) * 40);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .progressBar {
-    border-radius: calc(gridBaseline / 2);
+    border-radius: calc(var(--gridBaseline) / 2);
     overflow: hidden;
-    background: colorGreyA30;
+    background: var(--colorGreyA30);
 }
 
 .progressInner {
     position: absolute;
     height: 100%;
     left: 0;
     top: 0;
-    background: colorPurple;
+    background: var(--colorPurple);
 }
 
 .progressError {
-    min-height: calc(gridBaseline * 4);
-    border: 1px solid colorRed;
+    min-height: calc(var(--gridBaseline) * 4);
+    border: 1px solid var(--colorRed);
 }