Move colors into CSS Modules (#290)

Since we can use these classes in multiple places, this moves them to a
CSS Modules file that can be imported. This is natively supported with
Vite.

Author: dtemkin1

package-lock.json

@@ -68,7 +68,6 @@
     "globals": "^17.1.0",
     "jsdom": "^27.4.0",
     "prettier": "^3.8.1",
-    "sass-embedded": "^1.97.3",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",

package.json

@@ -2,10 +2,6 @@
 .fc .fc-scrollgrid-section > td,
 .fc .fc-timegrid-axis {
   border-color: transparent;
-
-  .dark & {
-    border-color: transparent;
-  }
 }
 
 .fc .fc-timegrid-slot {

src/components/Calendar.scss src/components/Calendar.csssrc/components/Calendar.scss renamed to src/components/Calendar.css

@@ -14,7 +14,7 @@ import { Slot } from "../lib/dates";
 import { Class } from "../lib/class";
 import { HydrantContext } from "../lib/hydrant";
 
-import "./Calendar.scss";
+import "./Calendar.css";
 
 /**
  * Calendar showing all the activities, including the buttons on top that

src/components/Calendar.tsx

@@ -0,0 +1,7 @@
+.row {
+  cursor: pointer;
+}
+
+.row:hover .underline-on-hover {
+  text-decoration: underline;
+}

src/components/ClassTable.module.css

@@ -17,6 +17,7 @@ import {
   ExternalFilterModule,
   RenderApiModule,
   CellStyleModule,
+  RowStyleModule,
   themeQuartz,
   type IRowNode,
   type ColDef,
@@ -41,9 +42,11 @@ import type { Class, Flags } from "../lib/class";
 import { DARK_IMAGES, getFlagImg } from "../lib/class";
 import { classNumberMatch, classSort, simplifyString } from "../lib/utils";
 import type { TSemester } from "../lib/dates";
-import "./ClassTable.scss";
 import { HydrantContext } from "../lib/hydrant";
 import type { State } from "../lib/state";
+import { ColorStyles } from "../lib/colors";
+
+import styles from "./ClassTable.module.css";
 
 const hydrantTheme = themeQuartz.withParams({
   accentColor: "var(--chakra-colors-fg)",
@@ -62,25 +65,18 @@ const GRID_MODULES: Module[] = [
   ExternalFilterModule,
   CellStyleModule,
   RenderApiModule,
+  RowStyleModule,
   ...(import.meta.env.DEV ? [ValidationModule] : []),
 ];
 
 ModuleRegistry.registerModules(GRID_MODULES);
 
-enum ColorEnum {
-  Muted = "ag-cell-muted-text",
-  Success = "ag-cell-success-text",
-  Warning = "ag-cell-warning-text",
-  Error = "ag-cell-error-text",
-  Normal = "ag-cell-normal-text",
-}
-
 const getRatingColor = (rating?: string | null) => {
-  if (!rating || rating === "N/A") return ColorEnum.Muted;
+  if (!rating || rating === "N/A") return ColorStyles.Muted;
   const ratingNumber = Number(rating);
-  if (ratingNumber >= 6) return ColorEnum.Success;
-  if (ratingNumber >= 5) return ColorEnum.Warning;
-  return ColorEnum.Error;
+  if (ratingNumber >= 6) return ColorStyles.Success;
+  if (ratingNumber >= 5) return ColorStyles.Warning;
+  return ColorStyles.Error;
 };
 
 const getHoursColor = (
@@ -89,9 +85,9 @@ const getHoursColor = (
   term: TSemester,
   half: number | undefined,
 ) => {
-  if (!hours || hours === "N/A") return ColorEnum.Muted;
-  if (totalUnits === undefined) return ColorEnum.Muted;
-  if (totalUnits === 0) return ColorEnum.Normal;
+  if (!hours || hours === "N/A") return ColorStyles.Muted;
+  if (totalUnits === undefined) return ColorStyles.Muted;
+  if (totalUnits === 0) return ColorStyles.Normal;
 
   const hoursNumber = Number(hours);
   let weeksInTerm = 0;
@@ -115,9 +111,9 @@ const getHoursColor = (
   const expectedHours = totalUnits * (weeksInTerm / 14) * (half ? 2 : 1);
   const proportion = hoursNumber / expectedHours;
 
-  if (proportion < 0.8) return ColorEnum.Success;
-  if (proportion >= 0.8 && proportion <= 1.2) return ColorEnum.Warning;
-  return ColorEnum.Error;
+  if (proportion < 0.8) return ColorStyles.Success;
+  if (proportion >= 0.8 && proportion <= 1.2) return ColorStyles.Warning;
+  return ColorStyles.Error;
 };
 
 /** A single row in the class table. */
@@ -538,6 +534,7 @@ export function ClassTable() {
         comparator: classSort,
         initialSort,
         maxWidth: 93,
+        cellClass: styles["underline-on-hover"],
         ...sortProps,
       },
       {
@@ -617,6 +614,7 @@ export function ClassTable() {
         <AgGridReact<ClassTableRow>
           theme={hydrantTheme}
           ref={gridRef}
+          rowClass={styles.row}
           defaultColDef={defaultColDef}
           columnDefs={columnDefs}
           rowData={rowData}

src/components/ClassTable.scss

@@ -18,6 +18,7 @@ import {
   ExternalFilterModule,
   RenderApiModule,
   CellStyleModule,
+  RowStyleModule,
   themeQuartz,
   type IRowNode,
   type ColDef,
@@ -37,9 +38,11 @@ import { LuPlus, LuMinus, LuSearch, LuStar } from "react-icons/lu";
 
 import { type PEFlags, type PEClass, getPEFlagEmoji } from "../lib/pe";
 import { classNumberMatch, classSort, simplifyString } from "../lib/utils";
-import "./ClassTable.scss";
 import { HydrantContext } from "../lib/hydrant";
 import type { State } from "../lib/state";
+import { ColorStyles } from "../lib/colors";
+
+import styles from "./ClassTable.module.css";
 
 const hydrantTheme = themeQuartz.withParams({
   accentColor: "var(--chakra-colors-fg)",
@@ -57,25 +60,18 @@ const GRID_MODULES: Module[] = [
   ClientSideRowModelModule,
   ExternalFilterModule,
   CellStyleModule,
+  RowStyleModule,
   RenderApiModule,
   ...(import.meta.env.DEV ? [ValidationModule] : []),
 ];
 
 ModuleRegistry.registerModules(GRID_MODULES);
 
-enum ColorEnum {
-  Muted = "ag-cell-muted-text",
-  Success = "ag-cell-success-text",
-  Warning = "ag-cell-warning-text",
-  Error = "ag-cell-error-text",
-  Normal = "ag-cell-normal-text",
-}
-
 const getFeeColor = (fee: number) => {
-  if (isNaN(fee)) return ColorEnum.Muted;
-  if (fee == 0) return ColorEnum.Success;
-  if (fee <= 20) return ColorEnum.Warning;
-  return ColorEnum.Error;
+  if (isNaN(fee)) return ColorStyles.Muted;
+  if (fee == 0) return ColorStyles.Success;
+  if (fee <= 20) return ColorStyles.Warning;
+  return ColorStyles.Error;
 };
 
 /** A single row in the class table. */
@@ -418,6 +414,7 @@ export function PEClassTable() {
         comparator: classSort,
         initialSort,
         maxWidth: 93,
+        cellClass: styles["underline-on-hover"],
         ...sortProps,
       },
       {
@@ -496,6 +493,7 @@ export function PEClassTable() {
         <AgGridReact<ClassTableRow>
           theme={hydrantTheme}
           ref={gridRef}
+          rowClass={styles.row}
           defaultColDef={defaultColDef}
           columnDefs={columnDefs}
           rowData={rowData}

src/components/ClassTable.tsx

@@ -0,0 +1,19 @@
+.muted {
+  color: var(--chakra-colors-fg-muted);
+}
+
+.success {
+  color: var(--chakra-colors-fg-success);
+}
+
+.warning {
+  color: var(--chakra-colors-fg-warning);
+}
+
+.error {
+  color: var(--chakra-colors-fg-error);
+}
+
+.normal {
+  color: var(--chakra-colors-fg);
+}

src/components/PEClassTable.tsx

@@ -1,6 +1,16 @@
 import type { ColorMode } from "../components/ui/color-mode";
 import type { Activity } from "./activity";
 
+import styles from "./colors.module.css";
+
+export const ColorStyles = {
+  Muted: styles.muted,
+  Success: styles.success,
+  Warning: styles.warning,
+  Error: styles.error,
+  Normal: styles.normal,
+} as const;
+
 /** The type of color schemes. */
 export interface ColorScheme {
   name: string;