Move useCssVariable into ui package

resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue

@@ -11,7 +11,7 @@ import {
     onUnmounted,
 } from 'vue';
 import { useLocalStorage } from '@vueuse/core';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVariable } from '../utils/useCssVariable';
 import { getLocalizedDayJs } from '../utils/time';
 import { LoadingSpinner, TimeEntryCreateModal, TimeEntryEditModal } from '..';
 import FullCalendarDayHeader from './FullCalendarDayHeader.vue';

resources/js/packages/ui/src/index.ts

@@ -20,6 +20,7 @@ export type { FieldVariants } from './field/index';
 export type { CalendarSettings } from './FullCalendar/calendarSettings';
 export type { ActivityPeriod } from './FullCalendar/activityTypes';
 export { cn } from './utils/cn';
+export { useCssVariable } from './utils/useCssVariable';
 
 import Badge from './Badge.vue';
 import Button from './Buttons/Button.vue';

resources/js/packages/ui/src/utils/useCssVariable.ts

@@ -0,0 +1,49 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export function useCssVariable(variableName: string) {
+    const value = ref('');
+    let observer: MutationObserver | null = null;
+    let mediaQuery: MediaQueryList | null = null;
+
+    const updateValue = () => {
+        const computedStyle = getComputedStyle(document.documentElement);
+        const cssValue = computedStyle.getPropertyValue(variableName).trim();
+        value.value = cssValue;
+    };
+
+    onMounted(() => {
+        // Initialize with current value
+        updateValue();
+
+        // Watch for class changes on document.documentElement (where theme classes are applied)
+        observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    updateValue();
+                }
+            });
+        });
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+
+        // Also watch for system color scheme changes
+        if (window.matchMedia) {
+            mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQuery.addEventListener('change', updateValue);
+        }
+    });
+
+    onUnmounted(() => {
+        if (observer) {
+            observer.disconnect();
+        }
+        if (mediaQuery) {
+            mediaQuery.removeEventListener('change', updateValue);
+        }
+    });
+
+    return value;
+}