DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: course color generation (#179)

Browse Source 
* 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>
This commit is contained in:
Razboy20
2024-03-19 18:54:11 -05:00
committed by GitHub
parent c5fc6219e1
commit 5ed81e4be9
30 changed files with 424 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/shared/types/Color.ts Normal file
View File

@@ -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];

3
src/shared/types/Course.ts
View File

@@ -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

78
src/shared/types/ThemeColors.ts Normal file
View File

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

254
src/shared/util/colors.ts
View File

@@ -1,58 +1,232 @@
import type { Serialized } from 'chrome-extension-toolkit';
import { theme } from 'unocss/preset-mini';
/**
* Represents the colors for a course.
*/
export interface CourseColors {
primaryColor: string;
secondaryColor: string;
}
import type { HexColor, Lab, RGB, sRGB } from '../types/Color';
import { isHexColor } from '../types/Color';
import type { Course } from '../types/Course';
import type { CourseColors, TWColorway } from '../types/ThemeColors';
import { colorwayIndexes } from '../types/ThemeColors';
import type { UserSchedule } from '../types/UserSchedule';
/**
* Calculates the luminance of a given hexadecimal color.
* Converts a hexadecimal color value to RGB format. (adapted from https://stackoverflow.com/a/5624139/8022866)
*
* @param hex - The hexadecimal color value.
* @returns The luminance value between 0 and 1.
* @returns An array containing the RGB values.
*/
export function getLuminance(hex: string): number {
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
export function hexToRGB(hex: HexColor): RGB {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
let shorthandRegex: RegExp = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
const parsedHex: string = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
[r, g, b] = [r, g, b].map(color => {
let c = color / 255;
c = c > 0.03928 ? ((c + 0.055) / 1.055) ** 2.4 : (c /= 12.92);
return c;
});
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
let result: RegExpExecArray = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(parsedHex);
return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
}
// calculates contrast ratio between two hex strings
function contrastRatioPair(hex1: string, hex2: string) {
const lum1 = getLuminance(hex1);
const lum2 = getLuminance(hex2);
export const useableColorways = Object.keys(theme.colors)
// check that the color is a colorway (is an object)
.filter(color => typeof theme.colors[color] === 'object')
.slice(0, 17) as TWColorway[];
return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
/**
* Generate a Tailwind classname for the font color based on the background color
* @param bgColor the hex color of the background
*/
export function pickFontColor(bgColor: HexColor): 'text-white' | 'text-black' | 'text-theme-black' {
const coefficients = [0.2126729, 0.7151522, 0.072175];
const flipYs = 0.342; // based on APCA™ 0.98G middle contrast BG color
const trc = 2.4; // 2.4 exponent for emulating actual monitor perception
let Ys = hexToRGB(bgColor).reduce((acc, c, i) => acc + (c / 255.0) ** trc * coefficients[i], 0);
if (Ys < flipYs) {
return 'text-white';
}
return Ys < 0.365 ? 'text-black' : 'text-theme-black';
}
/**
* Generate a tailwind classname for the font color based on the background color
* @param bgColor the tailwind classname for background ex. "bg-emerald-500"
* Get primary and secondary colors from a Tailwind colorway
* @param colorway the Tailwind colorway ex. "emerald"
*/
export function pickFontColor(bgColor: string): 'text-white' | 'text-black' {
return contrastRatioPair(bgColor, '#606060') > contrastRatioPair(bgColor, '#ffffff') ? 'text-black' : 'text-white';
}
export function getCourseColors(colorway: TWColorway, index?: number, offset: number = 300): CourseColors {
if (index === undefined) {
// eslint-disable-next-line no-param-reassign
index = colorway in colorwayIndexes ? colorwayIndexes[colorway] : 500;
}
/**
* Get primary and secondary colors from a tailwind colorway
* @param colorway the tailwind colorway ex. "emerald"
*/
export function getCourseColors(colorway: keyof typeof theme.colors, index = 600, offset = 200): CourseColors {
return {
primaryColor: theme.colors[colorway][index] as string,
secondaryColor: theme.colors[colorway][index + offset] as string,
};
primaryColor: theme.colors[colorway][index],
secondaryColor: theme.colors[colorway][index + offset],
} satisfies CourseColors;
}
/**
* Get the Tailwind colorway from a given color.
*
* @param color - The hexadecimal color value.
* @returns The Tailwind colorway.
*/
export function getColorwayFromColor(color: HexColor): TWColorway {
for (const colorway of useableColorways) {
if (Object.values(theme.colors[colorway]).includes(color)) {
return colorway as TWColorway;
}
}
// not a direct match, get the closest color
let closestColor = '';
let closestDistance = Infinity;
for (const colorway of useableColorways) {
for (const [shade, shadeColor] of Object.entries(theme.colors[colorway])) {
// type guard
if (!isHexColor(shadeColor)) {
continue;
}
const distance = oklabDistance(rgbToOKlab(hexToRGB(shadeColor)), rgbToOKlab(hexToRGB(color)));
if (distance < closestDistance) {
closestDistance = distance;
closestColor = shade;
}
}
}
// type guard
if (!isHexColor(closestColor)) {
throw new Error("closestColor isn't a valid hex color");
}
return getColorwayFromColor(closestColor);
}
/**
* Get next unused color in a tailwind colorway for a given schedule
* @param schedule the schedule which the course is in
* @param course the course to get the color for
*/
export function getUnusedColor(
schedule: Serialized<UserSchedule>,
course: Course,
index?: number,
offset?: number
): CourseColors {
// strategy: First, check if any of the course's in schedule have the same department as the current course,
// if so, use a colorway near the color of that course if possible.
// Otherwise, find a colorway that is not used in the schedule and at least two hues away from any other color in the schedule.
// wrapping helper functions
function getPreviousColorway(colorway: TWColorway): TWColorway {
const colorwayIndex = useableColorways.indexOf(colorway);
return useableColorways[(colorwayIndex - 1 + useableColorways.length) % useableColorways.length] as TWColorway;
}
function getNextColorway(colorway: TWColorway): TWColorway {
const colorwayIndex = useableColorways.indexOf(colorway);
return useableColorways[(colorwayIndex + 1) % useableColorways.length] as TWColorway;
}
const scheduleCourses = schedule.courses.map(c => ({
...c,
colorway: getColorwayFromColor(c.colors.primaryColor),
}));
const usedColorways = new Set(scheduleCourses.map(c => c.colorway));
const availableColorways = new Set(useableColorways.filter(c => !usedColorways.has(c)));
if (availableColorways.size > 0) {
let sameDepartment = scheduleCourses.filter(c => c.department === course.department);
sameDepartment.sort((a, b) => {
const aIndex = useableColorways.indexOf(a.colorway);
const bIndex = useableColorways.indexOf(b.colorway);
return aIndex - bIndex;
});
if (sameDepartment.length > 0) {
// check to see if any adjacent colorways are available
const centerCourse = sameDepartment[Math.floor(Math.random() * sameDepartment.length)];
let nextColorway = getNextColorway(centerCourse.colorway);
let prevColorway = getPreviousColorway(centerCourse.colorway);
// eslint-disable-next-line no-constant-condition
while (true) {
if (availableColorways.has(nextColorway)) {
return getCourseColors(nextColorway, index, offset);
}
if (availableColorways.has(prevColorway)) {
return getCourseColors(prevColorway, index, offset);
}
nextColorway = getNextColorway(nextColorway);
prevColorway = getPreviousColorway(prevColorway);
}
}
const shortenedColorways = new Set(availableColorways);
// no courses in the same department, restrict colorways to those which are at least 2 indexes away from any used colors
for (const colorway of usedColorways) {
shortenedColorways.delete(getPreviousColorway(colorway));
shortenedColorways.delete(getNextColorway(colorway));
}
if (shortenedColorways.size > 0) {
// TODO: make this go by 3's to leave future spaces open
const randomColorway = Array.from(shortenedColorways)[Math.floor(Math.random() * shortenedColorways.size)];
return getCourseColors(randomColorway, index, offset);
}
// no colorways are at least 2 indexes away from any used colors, just get a random colorway
const randomColorway = Array.from(availableColorways)[Math.floor(Math.random() * availableColorways.size)];
return getCourseColors(randomColorway, index, offset);
}
// TODO: get just a random color idk
return getCourseColors('emerald', index, offset);
}
// OKLab helper functions (https://github.com/bottosson/bottosson.github.io/blob/master/misc/colorpicker/colorconversion.js)
function srgbTransferFunction(a: number): number {
return a <= 0.0031308 ? 12.92 * a : 1.055 * a ** 0.4166666666666667 - 0.055;
}
function srgbTransferFunctionInv(a: number): number {
return a > 0.04045 ? ((a + 0.055) / 1.055) ** 2.4 : a / 12.92;
}
function rgbToSrgb(rgb: RGB): sRGB {
return rgb.map(c => srgbTransferFunctionInv(c / 255)) as sRGB;
}
/**
* Convert an RGB color to the OKLab color space
* @param rgb the RGB color
* @returns the color in the OKLab color space
*/
function srgbToOKlab([r, g, b]: sRGB): Lab {
let l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
let m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
let s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
let lc = Math.cbrt(l);
let mc = Math.cbrt(m);
let sc = Math.cbrt(s);
return [
0.2104542553 * lc + 0.793617785 * mc - 0.0040720468 * sc,
1.9779984951 * lc - 2.428592205 * mc + 0.4505937099 * sc,
0.0259040371 * lc + 0.7827717662 * mc - 0.808675766 * sc,
];
}
function rgbToOKlab(rgb: RGB): Lab {
return srgbToOKlab(rgbToSrgb(rgb));
}
/**
* Calculate the distance between two colors in the OKLab color space
*/
function oklabDistance([l1, a1, b1]: Lab, [l2, a2, b2]: Lab): number {
return Math.sqrt((l2 - l1) ** 2 + (a2 - a1) ** 2 + (b2 - b1) ** 2);
}

9
src/shared/util/storybook.ts
View File

@@ -1,8 +1,3 @@
import { getCourseColors } from '@shared/util/colors';
import { theme } from 'unocss/preset-mini';
import { getCourseColors, useableColorways } from '@shared/util/colors';
export const tailwindColorways = Object.keys(theme.colors)
// check that the color is a colorway (is an object)
.filter(color => typeof theme.colors[color] === 'object')
.slice(0, 17)
.map(color => getCourseColors(color as keyof typeof theme.colors));
export const tailwindColorways = useableColorways.map(color => getCourseColors(color));

21
src/shared/util/tests/colors.test.ts
View File

@@ -1,21 +0,0 @@
import { getLuminance } from '@shared/util/colors';
import { describe, expect, it } from 'vitest';
describe('getLuminance', () => {
it('should return the correct luminance value for a given hex color', () => {
// Test case 1: Hex color #FFFFFF (white)
expect(getLuminance('#FFFFFF')).toBeCloseTo(1);
// Test case 2: Hex color #000000 (black)
expect(getLuminance('#000000')).toBeCloseTo(0);
// Test case 3: Hex color #FF0000 (red)
expect(getLuminance('#FF0000')).toBeCloseTo(0.2126);
// Test case 4: Hex color #00FF00 (green)
expect(getLuminance('#00FF00')).toBeCloseTo(0.7152);
// Test case 5: Hex color #0000FF (blue)
expect(getLuminance('#0000FF')).toBeCloseTo(0.0722);
});
});

32
src/shared/util/tests/themeColors.test.ts
View File

@@ -1,36 +1,6 @@
import { getThemeColorHexByName, getThemeColorRgbByName, hexToRgb } from '@shared/util/themeColors';
import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
import { describe, expect, it } from 'vitest';
describe('hexToRgb', () => {
it('should convert hex color to RGB', () => {
expect(hexToRgb('#BF5700')).toEqual([191, 87, 0]);
expect(hexToRgb('#333F48')).toEqual([51, 63, 72]);
expect(hexToRgb('#f8971f')).toEqual([248, 151, 31]);
expect(hexToRgb('#ffd600')).toEqual([255, 214, 0]);
expect(hexToRgb('#a6cd57')).toEqual([166, 205, 87]);
expect(hexToRgb('#579d42')).toEqual([87, 157, 66]);
expect(hexToRgb('#00a9b7')).toEqual([0, 169, 183]);
expect(hexToRgb('#005f86')).toEqual([0, 95, 134]);
expect(hexToRgb('#9cadb7')).toEqual([156, 173, 183]);
expect(hexToRgb('#d6d2c4')).toEqual([214, 210, 196]);
expect(hexToRgb('#95a5a6')).toEqual([149, 165, 166]);
expect(hexToRgb('#B91C1C')).toEqual([185, 28, 28]);
expect(hexToRgb('#af2e2d')).toEqual([175, 46, 45]);
expect(hexToRgb('#1a2024')).toEqual([26, 32, 36]);
expect(hexToRgb('#22c55e')).toEqual([34, 197, 94]);
expect(hexToRgb('#a3e635')).toEqual([163, 230, 53]);
expect(hexToRgb('#84CC16')).toEqual([132, 204, 22]);
expect(hexToRgb('#FDE047')).toEqual([253, 224, 71]);
expect(hexToRgb('#FACC15')).toEqual([250, 204, 21]);
expect(hexToRgb('#F59E0B')).toEqual([245, 158, 11]);
expect(hexToRgb('#FB923C')).toEqual([251, 146, 60]);
expect(hexToRgb('#F97316')).toEqual([249, 115, 22]);
expect(hexToRgb('#EA580C')).toEqual([234, 88, 12]);
expect(hexToRgb('#DC2626')).toEqual([220, 38, 38]);
expect(hexToRgb('#B91C1C')).toEqual([185, 28, 28]);
});
});
describe('getThemeColorHexByName', () => {
it('should return the hex color value by name', () => {
expect(getThemeColorHexByName('ut-burntorange')).toEqual('#BF5700');

63
src/shared/util/themeColors.ts
View File

@@ -1,50 +1,7 @@
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>;
import type { HexColor } from '../types/Color';
import type { ThemeColor } from '../types/ThemeColors';
import { colors } from '../types/ThemeColors';
import { hexToRGB } from './colors';
/**
* Flattened colors object.
@@ -60,21 +17,13 @@ export const colorsFlattened = Object.entries(colors).reduce(
{} as Record<ThemeColor, string>
);
/**
* Converts a hexadecimal color code to an RGB color array.
* @param hex The hexadecimal color code to convert.
* @returns An array representing the RGB color values.
*/
export const hexToRgb = (hex: string) =>
hex.match(/[0-9a-f]{2}/gi).map(partialHex => parseInt(partialHex, 16)) as [number, number, number];
/**
* Represents the flattened RGB values of the colors.
* @type {Record<ThemeColor, ReturnType<typeof hexToRgb>>}
*/
const colorsFlattenedRgb = Object.fromEntries(
Object.entries(colorsFlattened).map(([name, hex]) => [name, hexToRgb(hex)])
) as Record<ThemeColor, ReturnType<typeof hexToRgb>>;
Object.entries(colorsFlattened).map(([name, hex]) => [name, hexToRGB(hex as HexColor)])
) as Record<ThemeColor, ReturnType<typeof hexToRGB>>;
/**
* Retrieves the hexadecimal color value by name from the theme.

2
src/shared/util/updateBadgeText.ts
View File

@@ -1,4 +1,4 @@
import { colors } from './themeColors';
import { colors } from '../types/ThemeColors';
import { MILLISECOND } from './time';
/** How long should we flash the badge when it changes value */