fix: use frappe-ui theme colors and fixed tailwind config

frontend/src/components/Controls/ColorSwatches.vue

@@ -21,8 +21,7 @@
 								:style="
 									modelValue
 										? {
-												backgroundColor:
-													theme.backgroundColor[modelValue.toLowerCase()][400],
+												backgroundColor: getColor(modelValue.toLowerCase(), 400)
 										  }
 										: {}
 								"
@@ -55,8 +54,8 @@
 							:key="color"
 							class="size-5 rounded-full cursor-pointer"
 							:style="{
-								backgroundColor:
-									theme.backgroundColor[color.toLowerCase()][400],
+								backgroundColor: 
+									getColor(color.toLowerCase(), 400),
 							}"
 							@click="
 								(e) => {
@@ -79,7 +78,7 @@
 import { Button, FormControl, Popover } from 'frappe-ui'
 import { computed } from 'vue'
 import { Palette, X } from 'lucide-vue-next'
-import { theme } from '@/utils/theme'
+import { getColor } from '@/utils'
 
 const emit = defineEmits(['update:modelValue', 'change'])
 
@@ -105,4 +104,5 @@ const colors = computed(() => {
 		'Yellow',
 	]
 })
+
 </script>

frontend/src/components/CourseCard.vue

@@ -136,11 +136,11 @@
 import { Award, BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { Tooltip } from 'frappe-ui'
-import { theme } from '@/utils/theme'
 import { formatAmount } from '@/utils'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
+import colors from '@/utils/frappe-ui-colors.json'
 
 const { user } = sessionStore()
 
@@ -152,8 +152,9 @@ const props = defineProps({
 })
 
 const getGradientColor = () => {
+	let theme = localStorage.getItem('theme') == "light" ? "lightMode": "darkMode"
 	let color = props.course.card_gradient?.toLowerCase() || 'blue'
-	let colorMap = theme.backgroundColor[color]
+	let colorMap = colors[theme][color]
 	return `linear-gradient(to top right, black, ${colorMap[400]})`
 	/* return `bg-gradient-to-br from-${color}-100 via-${color}-200 to-${color}-400` */
 	/* return `linear-gradient(to bottom right, ${colorMap[100]}, ${colorMap[400]})` */

frontend/src/components/Modals/CourseProgressSummary.vue

@@ -114,11 +114,11 @@
 							categoryColumn: 'category',
 							valueColumn: 'count',
 							colors: [
-								theme.colors.red['400'],
-								theme.colors.amber['400'],
-								theme.colors.pink['400'],
-								theme.colors.blue['400'],
-								theme.colors.green['400'],
+								getColor('red', 400),
+								getColor('amber', 400),
+								getColor('pink', 400),
+								getColor('blue', 400),
+								getColor('green', 400),
 							],
 						}"
 					/>
@@ -146,7 +146,7 @@ import {
 	NumberChart,
 } from 'frappe-ui'
 import { computed, ref, watch } from 'vue'
-import { theme } from '@/utils/theme'
+import { getColor } from '@/utils'
 
 const show = defineModel<boolean>({ default: false })
 const searchFilter = ref<string | null>(null)

frontend/src/components/Notes/InlineLessonMenu.vue

@@ -20,7 +20,7 @@
 					<span
 						class="size-3 rounded-full"
 						:style="{
-							backgroundColor: theme.backgroundColor[color.toLowerCase()][400],
+							backgroundColor: getColor(color.toLowerCase(), 400),
 						}"
 					></span>
 					<span>
@@ -55,9 +55,8 @@
 <script setup lang="ts">
 import { computed, inject, ref, watch } from 'vue'
 import { NotepadText, Trash2 } from 'lucide-vue-next'
-import { theme } from '@/utils/theme'
 import type { Note, Notes } from '@/components/Notes/types'
-import { blockQuotesClick, highlightText } from '@/utils'
+import { blockQuotesClick, getColor, highlightText } from '@/utils'
 
 const user = inject<any>('$user')
 const show = defineModel()

frontend/src/components/StudentHeatmap.vue

@@ -17,7 +17,7 @@
 import { createResource } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import ApexChart from 'vue3-apexcharts'
-import { theme } from '@/utils/theme'
+import { getColor } from '@/utils'
 
 const user = inject('$user')
 const labels = ref([])
@@ -81,11 +81,11 @@ const chartOptions = computed(() => {
 				enableShades: true,
 				colorScale: {
 					ranges: [
-						{ from: 0, to: 0, color: theme.colors.gray[400] },
-						{ from: 1, to: 5, color: theme.colors.green[200] },
-						{ from: 6, to: 15, color: theme.colors.green[500] },
-						{ from: 16, to: 30, color: theme.colors.green[700] },
-						{ from: 31, to: 100, color: theme.colors.green[800] },
+						{ from: 0, to: 0, color: getColor("green", 400) },
+						{ from: 1, to: 5, color: getColor("green", 200) },
+						{ from: 6, to: 15, color: getColor("green", 500) },
+						{ from: 16, to: 30, color: getColor("green", 700) },
+						{ from: 31, to: 100, color: getColor("green", 800) },
 					],
 				},
 			},