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/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>;