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/views/components/calendar/Calendar/Calendar.tsx

@@ -76,8 +76,8 @@ export default function Calendar(): JSX.Element {
                         <CalendarFooter />
                     </div>
                 )}
-                <div className='h-full min-w-3xl flex flex-grow flex-col overflow-y-auto' ref={calendarRef}>
-                    <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-2xl'>
+                <div className='h-full min-w-4xl flex flex-grow flex-col overflow-y-auto' ref={calendarRef}>
+                    <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6'>
                         <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
                     </div>
                     <CalendarBottomBar calendarRef={calendarRef} />

src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx

@@ -1,6 +1,6 @@
 import type { StatusType } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
-import type { CourseColors } from '@shared/util/colors';
+import type { CourseColors } from '@shared/types/ThemeColors';
 import { pickFontColor } from '@shared/util/colors';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
@@ -51,7 +51,7 @@ export default function CalendarCourseCell({
         rightIcon = <CancelledIcon className='h-5 w-5' />;
     }
 
-    // whiteText based on secondaryColor
+    // text-white or text-black based on secondaryColor
     const fontColor = pickFontColor(colors.primaryColor);
 
     return (
@@ -73,14 +73,19 @@ export default function CalendarCourseCell({
             >
                 <Text
                     variant='h1-course'
+                    as='p'
                     className={clsx('leading-tight! truncate', {
-                        '-my-0.8': timeAndLocation,
+                        '-mt-0.8 -mb-0.2': timeAndLocation,
                         'text-wrap': !timeAndLocation,
                     })}
                 >
                     {courseDeptAndInstr}
                 </Text>
-                {timeAndLocation && <Text variant='h3-course'>{timeAndLocation}</Text>}
+                {timeAndLocation && (
+                    <Text variant='h3-course' as='p'>
+                        {timeAndLocation}
+                    </Text>
+                )}
             </div>
             {rightIcon && (
                 <div

src/views/components/calendar/utils.ts

@@ -75,7 +75,7 @@ export const saveAsCal = async () => {
             console.log(icsDays);
 
             // Assuming course has date started and ended, adapt as necessary
-            const year = new Date().getFullYear(); // Example year, adapt accordingly
+            // const year = new Date().getFullYear(); // Example year, adapt accordingly
             // Example event date, adapt startDate according to your needs
             const startDate = `20240101T${formattedStartTime}`;
             const endDate = `20240101T${formattedEndTime}`;