feat: dark event colors resolve #16

compsci-adl · Oct 7, 2024 · a265e0a · a265e0a
1 parent 613078e
commit a265e0a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 64 deletions.
diff --git a/src/constants/course-colors.ts b/src/constants/course-colors.ts
@@ -1,69 +1,51 @@
-// Thanks to @Char2sGu for the help with types
-type CourseColor<Primary extends string> = {
-	border: `border-[#${Primary}]`;
-	bg: `bg-[#${string}]`;
-	text: `text-[#${string}]`;
-	dot: `bg-[#${NoInfer<Primary>}]`;
+const BLUE = {
+	bg: 'bg-apple-blue-300',
+	border: 'border-apple-blue-500',
+	text: 'text-apple-blue-700',
+	dot: 'bg-apple-blue-500',
 };
-
-/**
- * Enforces dot color to be the same as border color
- * @param color
- * @returns
- */
-const color = <Primary extends string>(color: CourseColor<Primary>) => {
-	return color;
+const PURPLE = {
+	bg: 'bg-apple-purple-300',
+	border: 'border-apple-purple-500',
+	text: 'text-apple-purple-700',
+	dot: 'bg-apple-purple-500',
+};
+const GREEN = {
+	bg: 'bg-apple-green-300',
+	border: 'border-apple-green-500',
+	text: 'text-apple-green-700',
+	dot: 'bg-apple-green-500',
+};
+const ORANGE = {
+	bg: 'bg-apple-orange-300',
+	border: 'border-apple-orange-500',
+	text: 'text-apple-orange-700',
+	dot: 'bg-apple-orange-500',
+};
+const YELLOW = {
+	bg: 'bg-apple-yellow-300',
+	border: 'border-apple-yellow-500',
+	text: 'text-apple-yellow-700',
+	dot: 'bg-apple-yellow-500',
+};
+const BROWN = {
+	bg: 'bg-apple-brown-300',
+	border: 'border-apple-brown-500',
+	text: 'text-apple-brown-700',
+	dot: 'bg-apple-brown-500',
+};
+const RED = {
+	bg: 'bg-apple-red-300',
+	border: 'border-apple-red-500',
+	text: 'text-apple-red-700',
+	dot: 'bg-apple-red-500',
 };
-
-const BLUE = color({
-	border: 'border-[#1D9BF6]',
-	bg: 'bg-[#C9E6FE]',
-	text: 'text-[#1D6AA1]',
-	dot: 'bg-[#1D9BF6]',
-});
-const PURPLE = color({
-	border: 'border-[#AF38D1]',
-	bg: 'bg-[#EACDF4]',
-	text: 'text-[#762C8B]',
-	dot: 'bg-[#AF38D1]',
-});
-const GREEN = color({
-	border: 'border-[#4AD321]',
-	bg: 'bg-[#D4F6C9]',
-	text: 'text-[#3E8522]',
-	dot: 'bg-[#4AD321]',
-});
-const ORANGE = color({
-	border: 'border-[#FA6D0D]',
-	bg: 'bg-[#FEDBC4]',
-	text: 'text-[#A75117]',
-	dot: 'bg-[#FA6D0D]',
-});
-const YELLOW = color({
-	border: 'border-[#FCB80F]',
-	bg: 'bg-[#FDEEC3]',
-	text: 'text-[#936E10]',
-	dot: 'bg-[#FCB80F]',
-});
-const BROWN = color({
-	border: 'border-[#7D5E3B]',
-	bg: 'bg-[#DFD8CF]',
-	text: 'text-[#5E4D39]',
-	dot: 'bg-[#7D5E3B]',
-});
-const RED = color({
-	border: 'border-[#F50445]',
-	bg: 'bg-[#FEBFD1]',
-	text: 'text-[#BB1644]',
-	dot: 'bg-[#F50445]',
-});
-const BLACK = color({
-	border: 'border-[#000000]',
-	bg: 'bg-[#D3D3D3]',
-	text: 'text-[#000000]',
-	dot: 'bg-[#000000]',
-});
 
 export const COURSE_COLORS = [BLUE, PURPLE, GREEN, ORANGE, YELLOW, RED, BROWN];
 
-export const NOT_FOUND_COLOR = BLACK;
+export const NOT_FOUND_COLOR = {
+	bg: 'bg-not-found-300',
+	border: 'border-not-found-500',
+	text: 'text-not-found-700',
+	dot: 'bg-not-found-500',
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -29,6 +29,16 @@ export default {
 					colors: {
 						primary: { DEFAULT: '#FC8500', foreground: '#FFFFFF' },
 						'apple-gray': { 300: '#DFDFDF', 500: '#AFAFAF' },
+						// Calendar Event Colors
+						// 300 - bg, 500 - border, 700 - text
+						'apple-blue': { 300: '#C9E6FE', 500: '#1D9BF6', 700: '#1D6AA1' },
+						'apple-purple': { 300: '#EACDF4', 500: '#AF38D1', 700: '#762C8B' },
+						'apple-green': { 300: '#D4F6C9', 500: '#4AD321', 700: '#3E8522' },
+						'apple-orange': { 300: '#FEDBC4', 500: '#FA6D0D', 700: '#A75117' },
+						'apple-yellow': { 300: '#FDEEC3', 500: '#FCB80F', 700: '#936E10' },
+						'apple-brown': { 300: '#DFD8CF', 500: '#7D5E3B', 700: '#5E4D39' },
+						'apple-red': { 300: '#FEBFD1', 500: '#F50445', 700: '#BB1644' },
+						'not-found': { 300: '#D3D3D3', 500: '#000000', 700: '#000000' },
 					},
 				},
 				dark: {
@@ -37,6 +47,14 @@ export default {
 						foreground: '#D5D5D5',
 						background: '#161718',
 						'apple-gray': { 300: '#313131', 500: '#434444' },
+						'apple-blue': { 300: '#19283B', 500: '#1D9BF6', 700: '#1D9BF6' },
+						'apple-purple': { 300: '#2F1E36', 500: '#BF58DA', 700: '#BF57DA' },
+						'apple-green': { 300: '#1D341F', 500: '#30D33B', 700: '#30D33B' },
+						'apple-orange': { 300: '#38271A', 500: '#FD8208', 700: '#FD8208' },
+						'apple-yellow': { 300: '#39341C', 500: '#FECE0F', 700: '#FED10E' },
+						'apple-brown': { 300: '#292621', 500: '#9B7C55', 700: '#9B7C55' },
+						'apple-red': { 300: '#391A21', 500: '#E51167', 700: '#E51166' },
+						'not-found': { 300: '#404040', 500: '#FFFFFF', 700: '#FFFFFF' },
 					},
 				},
 			},