add light mode

resources/js/packages/ui/src/Input/BillableToggleButton.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
 
 const iconColorClasses = computed(() => {
     if (active.value) {
-        return 'text-accent-300 focus:text-accent-200 hover:text-accent-200';
+        return 'text-input-select-active focus:text-input-select-active-hover hover:text-input-select-active-hover';
     } else {
         return 'text-icon-default focus:text-icon-active hover:text-icon-active';
     }

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -54,7 +54,7 @@ const emit = defineEmits(['changed']);
             :tabindex="tabindex"
             :class="
                 twMerge(
-                    'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
+                    'bg-input-background border text-text-primary border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
                     props.class
                 )
             "

resources/js/packages/ui/src/Input/DateRangePicker.vue

@@ -107,7 +107,7 @@ function setLastYear() {
             <button
                 class="px-2 py-1 bg-input-background border border-input-border font-medium rounded-lg flex items-center space-x-2">
                 <CalendarIcon class="w-5"></CalendarIcon>
-                <div class="text-white">
+                <div class="text-text-primary">
                     {{ formatDateLocalized(start) }}
                     <span class="px-1.5 text-muted">-</span>
                     {{ formatDateLocalized(end) }}
@@ -119,7 +119,7 @@ function setLastYear() {
                 <div
                     class="flex divide-x divide-border-secondary justify-between">
                     <div
-                        class="text-white text-sm flex flex-col space-y-0.5 items-start py-2 [&_button:hover]:bg-tertiary [&_button]:rounded [&_button]:px-2 [&_button]:py-1">
+                        class="text-text-primary text-sm flex flex-col space-y-0.5 items-start py-2 [&_button:hover]:bg-tertiary [&_button]:rounded [&_button]:px-2 [&_button]:py-1">
                         <button @click="setToday">Today</button>
                         <button @click="setThisWeek">This Week</button>
                         <button @click="setLastWeek">Last Week</button>

resources/js/packages/ui/src/Input/Dropdown.vue

@@ -118,7 +118,7 @@ const { floatingStyles } = useFloating(reference, floating, {
                     :style="floatingStyles"
                     @click="onContentClick">
                     <div
-                        class="rounded-lg ring-1 relative ring-black ring-opacity-5 border border-card-border overflow-none shadow-dropdown bg-card-background">
+                        class="rounded-lg overflow-hidden relative border border-card-border overflow-none shadow-dropdown bg-card-background">
                         <slot name="content" />
                     </div>
                 </div>

resources/js/packages/ui/src/Input/InputLabel.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
     <label
-        :class="twMerge('block font-medium text-sm text-white', props.class)">
+        :class="twMerge('block font-medium text-sm text-text-primary', props.class)">
         <span v-if="value">{{ value }}</span>
         <span v-else><slot /></span>
     </label>

resources/js/packages/ui/src/Input/MultiselectDropdown.vue

@@ -159,7 +159,7 @@ const highlightedItem = computed(() => {
             <input
                 ref="searchInput"
                 :value="searchValue"
-                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                class="bg-card-background border-0 placeholder-muted text-sm text-text-primary py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
                 :placeholder="searchPlaceholder"
                 @input="updateSearchValue"
                 @keydown.up.prevent="moveHighlightUp"

resources/js/packages/ui/src/Input/MultiselectDropdownItem.vue

@@ -10,16 +10,16 @@ const props = defineProps<{
 
 const iconClasses = computed(() => {
     if (props.selected) {
-        return 'text-accent-200';
+        return 'text-input-select-active';
     } else {
-        return 'text-white/10';
+        return 'text-text-quaternary opacity-50';
     }
 });
 </script>
 
 <template>
     <div
-        class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+        class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
         <CheckCircleIcon :class="twMerge(iconClasses, 'w-5')"></CheckCircleIcon>
         <span class="flex-1 min-w-0 overflow-ellipsis overflow-hidden">{{
             name

resources/js/packages/ui/src/Input/SelectDropdownItem.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
         <div
             :class="
                 twMerge(
-                    'flex items-center space-x-3 w-full px-1.5 py-1.5 rounded text-start text-sm font-medium leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out cursor-pointer ',
+                    'flex items-center space-x-3 w-full px-1.5 py-1.5 rounded text-start text-sm font-medium leading-5 text-text-primary focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out cursor-pointer ',
                     props.highlighted && 'bg-card-background-active',
                     props.selected
                         ? 'bg-accent-300/20'

resources/js/packages/ui/src/Input/TextInput.vue

@@ -25,7 +25,7 @@ const model = defineModel();
         v-model="model"
         :class="
             twMerge(
-                'border-input-border border bg-input-background text-white focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
+                'border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
                 props.class
             )
         "

resources/js/packages/ui/src/Input/TimePicker.vue

@@ -141,7 +141,7 @@ const closestValue = computed({
 </script>
 
 <template>
-    <div class="flex min-w-0 items-center justify-center text-white">
+    <div class="flex min-w-0 items-center justify-center text-text-primary">
         <SelectDropdown
             v-model="closestValue"
             v-model:open="open"

resources/js/packages/ui/src/Input/TimeRangeSelector.vue

@@ -58,7 +58,7 @@ watch(focused, (newValue, oldValue) => {
         <div
             class="px-2"
             @keydown.enter.prevent="nextTick(() => emit('close'))">
-            <div class="font-bold text-white text-sm pb-2">Start</div>
+            <div class="font-semibold text-text-primary text-sm pb-2">Start</div>
             <div class="space-y-2">
                 <TimePickerSimple
                     v-model="tempStart"
@@ -75,7 +75,7 @@ watch(focused, (newValue, oldValue) => {
             </div>
         </div>
         <div class="px-2">
-            <div class="font-bold text-white text-sm pb-2">End</div>
+            <div class="font-semibold text-text-primary text-sm pb-2">End</div>
             <div v-if="tempEnd !== null" class="space-y-2">
                 <TimePickerSimple
                     v-model="tempEnd"