feat: course color generation (#179)

* feat: course color generation

* feat: add proper TS for hex colors

* refactor: fix oklab and improve contrast ratios

* fix: update HexColor type

* refactor: update color switch point

* refactor: color-related functions and types

* fix: imports and TS issues

* fix: imports and TS issues

* chore: add no-restricted-syntax ForInStatement

* chore(docs): add jsdoc

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/debug/index.tsx

@@ -29,6 +29,8 @@ function JSONEditor(props: JSONEditorProps) {
             setIsEditing(false);
         } catch (e) {
             console.error(e);
+
+            // eslint-disable-next-line no-alert
             alert('Invalid JSON');
         }
     };

src/pages/background/lib/addCourse.ts

@@ -1,5 +1,6 @@
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import type { Course } from '@shared/types/Course';
+import { getUnusedColor } from '@shared/util/colors';
 
 /**
  * Adds a course to a user's schedule.
@@ -15,6 +16,7 @@ export default async function addCourse(scheduleId: string, course: Course): Pro
         throw new Error('Schedule not found');
     }
 
+    course.colors = getUnusedColor(activeSchedule, course);
     activeSchedule.courses.push(course);
     activeSchedule.updatedAt = Date.now();
 

src/pages/background/lib/deleteSchedule.ts

@@ -14,10 +14,10 @@ export default async function deleteSchedule(scheduleId: string): Promise<string
 
     const scheduleIndex = schedules.findIndex(schedule => schedule.id === scheduleId);
     if (scheduleIndex === -1) {
-        return `Schedule ${scheduleId} does not exist`;
+        throw new Error(`Schedule ${scheduleId} does not exist`);
     }
     if (scheduleIndex === activeIndex) {
-        return 'Cannot delete active schedule';
+        throw new Error('Cannot delete active schedule');
     }
 
     schedules.splice(scheduleIndex, 1);

src/pages/background/lib/renameSchedule.ts

@@ -17,7 +17,7 @@ export default async function renameSchedule(scheduleId: string, newName: string
     // }
 
     schedules[scheduleIndex].name = newName;
-    schedules[scheduleIndex].updatedAt = Date.now();
+    // schedules[scheduleIndex].updatedAt = Date.now();
 
     await UserScheduleStore.set('schedules', schedules);
     return undefined;

src/shared/types/Color.ts

@@ -0,0 +1,27 @@
+/**
+ * Represents a hexadecimal color value.
+ */
+export type HexColor = `#${string}`;
+
+/**
+ * Checks if a string is a valid hexadecimal color value.
+ *
+ * @param color - The color string to check.
+ * @returns A boolean indicating if the color is a valid hexadecimal color value.
+ */
+export const isHexColor = (color: string): color is HexColor => /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+
+/**
+ * Represents an RGB color value.
+ */
+export type RGB = [r: number, g: number, b: number];
+
+/**
+ * Represents a linear sRGB color value.
+ */
+export type sRGB = [r: number, g: number, b: number];
+
+/**
+ * Represents a Lab color value.
+ */
+export type Lab = [l: number, a: number, b: number];

src/shared/types/Course.ts

@@ -1,9 +1,10 @@
-import { type CourseColors, getCourseColors } from '@shared/util/colors';
+import { getCourseColors } from '@shared/util/colors';
 import type { Serialized } from 'chrome-extension-toolkit';
 
 import type { CourseMeeting } from './CourseMeeting';
 import { CourseSchedule } from './CourseSchedule';
 import Instructor from './Instructor';
+import type { CourseColors } from './ThemeColors';
 
 /**
  * Whether the class is taught online, in person, or a hybrid of the two

src/shared/types/ThemeColors.ts

@@ -0,0 +1,78 @@
+import type { theme } from 'unocss/preset-mini';
+
+import type { HexColor } from './Color';
+
+export const colors = {
+    ut: {
+        burntorange: '#BF5700',
+        black: '#333F48',
+        orange: '#F8971F',
+        yellow: '#FFD600',
+        lightgreen: '#A6CD57',
+        green: '#579D42',
+        teal: '#00A9B7',
+        blue: '#005F86',
+        gray: '#9CADB7',
+        offwhite: '#D6D2C4',
+        concrete: '#95A5A6',
+        red: '#B91C1C', //   Not sure if this should be here, but it's used for remove course, and add course is ut-green
+    },
+    theme: {
+        red: '#AF2E2D',
+        black: '#1A2024',
+    },
+} as const satisfies Record<string, Record<string, string>>;
+
+export const extendedColors = {
+    ...colors,
+    gradeDistribution: {
+        a: '#22C55E',
+        aminus: '#A3E635',
+        bplus: '#84CC16',
+        b: '#FDE047',
+        bminus: '#FACC15',
+        cplus: '#F59E0B',
+        c: '#FB923C',
+        cminus: '#F97316',
+        dplus: '#EF4444',
+        d: '#DC2626',
+        dminus: '#B91C1C',
+        f: '#B91C1C',
+    },
+} as const;
+
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends Record<string, any> ? `${string & K}-${string & keyof T[K]}` : never;
+}[keyof T];
+
+/**
+ * A union of all colors in the theme
+ */
+export type ThemeColor = NestedKeys<typeof colors>;
+
+/**
+ * Represents a Tailwind colorway: a colorway is a key in the theme.colors object that has an object as its value.
+ */
+export type TWColorway = {
+    [K in keyof typeof theme.colors]: (typeof theme.colors)[K] extends Record<string, unknown> ? K : never;
+}[keyof typeof theme.colors];
+
+/**
+ * Represents the colors for a course.
+ */
+export interface CourseColors {
+    primaryColor: HexColor;
+    secondaryColor: HexColor;
+}
+
+/**
+ * Adjusted colorway indexes for better *quality*
+ */
+export const colorwayIndexes = {
+    yellow: 300,
+    amber: 400,
+    emerald: 400,
+    lime: 400,
+    orange: 400,
+    sky: 600,
+} as const satisfies Record<string, number>;