fix invalid state class in dark mode

resources/scripts/components/base/BaseBreadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset dark:text-gray-400">
+    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
       <slot />
     </ol>
   </nav>

resources/scripts/components/base/BaseBreadcrumbItem.vue

@@ -8,9 +8,7 @@
         font-medium
         leading-5
         text-gray-900
-        dark:text-gray-400
         outline-none
-        dark:focus:ring-offset-gray-900
         focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
       "
       :to="to"

resources/scripts/components/base/BaseButton.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
-
 const props = defineProps({
   contentLoading: {
     type: Boolean,
@@ -10,7 +9,7 @@ const props = defineProps({
   defaultClass: {
     type: String,
     default:
-      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
+      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
   },
   tag: {
     type: String,
@@ -28,10 +27,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  loadingRight: {
-    type: Boolean,
-    default: false,
-  },
   size: {
     type: String,
     default: 'md',
@@ -86,17 +81,17 @@ const placeHolderSize = computed(() => {
 
 const variantClass = computed(() => {
   return {
-    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
+    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
       props.variant === 'primary',
     'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
       props.variant === 'secondary',
-    'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
+    'border-transparent  border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
       props.variant == 'primary-outline',
-    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
+    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
       props.variant == 'white',
     'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
       props.variant === 'danger',
-    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
+    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
       props.variant === 'gray',
   }
 })
@@ -129,13 +124,6 @@ const iconRightClass = computed(() => {
     'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
   }
 })
-
-const buttonDisabledClass = computed(() => {
-  if (props.disabled || props.loading)
-    return 'cursor-not-allowed bg-opacity-70 dark:!bg-opacity-40 hover:!bg-opacity-70 pointer-event-none'
-
-  return ''
-})
 </script>
 
 <template>
@@ -153,17 +141,15 @@ const buttonDisabledClass = computed(() => {
   <BaseCustomTag
     v-else
     :tag="tag"
-    :disabled="disabled || loading"
+    :disabled="disabled"
-    :class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
+    :class="[defaultClass, sizeClass, variantClass, roundedClass]"
   >
-    <SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
+    <SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
 
-    <slot v-else name="left" :class="iconLeftClass" />
+    <slot v-else name="left" :class="iconLeftClass"></slot>
 
     <slot />
 
-    <SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
+    <slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
-
-    <slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
   </BaseCustomTag>
 </template>

resources/scripts/components/base/BaseCard.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
+  <div class="bg-white rounded-lg shadow">
-    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
-  >
-    <BaseDarkHighlight class="z-[-1] mt-10" />
-
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"

resources/scripts/components/base/BaseContentPlaceholders.vue

@@ -39,8 +39,6 @@ $base-content-placeholders-border-radius: 6px !default;
 $base-content-placeholders-line-height: 15px !default;
 $base-content-placeholders-spacing: 10px !default;
 
-$base-content-placeholders-primary-color-dark: rgb(71, 85, 105) !default;
-$base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
 // Animations
 @keyframes vueContentPlaceholdersAnimation {
   0% {
@@ -59,10 +57,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
-  .dark & {
-    background: $base-content-placeholders-secondary-color-dark;
-  }
-
   .base-content-placeholders-is-rounded & {
     border-radius: $base-content-placeholders-border-radius;
   }
@@ -92,15 +86,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
     animation-name: vueContentPlaceholdersAnimation;
     animation-timing-function: linear;
   }
-
-  .dark .base-content-placeholders-is-animated &::before {
-    background: linear-gradient(
-      to right,
-      transparent 0%,
-      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
-      transparent 30%
-    );
-  }
 }
 
 @mixin base-content-placeholders-spacing {
@@ -171,10 +156,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
-  .dark & {
-    background: $base-content-placeholders-secondary-color-dark;
-  }
-  
   .base-content-placeholders-is-animated &::before {
     content: '';
     position: absolute;
@@ -196,14 +177,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
     animation-timing-function: linear;
   }
 
-    .dark .base-content-placeholders-is-animated &::before {
-      background: linear-gradient(
-      to right,
-      transparent 0%,
-      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
-      transparent 30%
-    );
-  }
   // @include base-content-placeholders-spacing;
 }
 

resources/scripts/components/base/BaseDarkHighlight.vue

@@ -1,21 +0,0 @@
-<template>
-  <div
-    class="
-      hidden
-      top-0
-      w-full
-      absolute
-      ml-auto
-      mr-auto
-      left-0
-      right-0
-      text-center
-      h-full
-      rounded-full
-      bg-highlight/[.10]
-      blur-2xl
-      dark:block
-      z-[-1]
-    "
-  />
-</template>

resources/scripts/components/base/BaseDialog.vue

@@ -30,13 +30,8 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
-          >
-           <BaseDarkHighlight
-            class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
-            :class="dialogSizeClasses"
           />
-          </DialogOverlay>
         </TransitionChild>
 
         <!-- This element is to trick the browser into centering the modal contents. -->
@@ -69,11 +64,6 @@
               shadow-xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative
-              dark:backdrop-blur-xl
-              dark:shadow-glass
-              dark:border
-              dark:border-white/10
-              dark:bg-gray-800
             "
             :class="dialogSizeClasses"
           >
@@ -90,31 +80,31 @@
                   rounded-full
                 "
                 :class="{
-                  'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
+                  'bg-green-100': dialogStore.variant === 'primary',
-                  'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
+                  'bg-red-100': dialogStore.variant === 'danger',
                 }"
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
                   name="CheckIcon"
-                  class="w-6 h-6 text-green-600 dark:text-white"
+                  class="w-6 h-6 text-green-600"
                 />
                 <BaseIcon
                   v-else
                   name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600 dark:text-white"
+                  class="w-6 h-6 text-red-600"
                   aria-hidden="true"
                 />
               </div>
               <div class="mt-3 text-center sm:mt-5">
                 <DialogTitle
                   as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
+                  class="text-lg font-medium leading-6 text-gray-900"
                 >
                   {{ dialogStore.title }}
                 </DialogTitle>
                 <div class="mt-2">
-                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                  <p class="text-sm text-gray-500">
                     {{ dialogStore.message }}
                   </p>
                 </div>

resources/scripts/components/base/BaseFilterWrapper.vue

@@ -7,7 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded dark:bg-gray-800">
+    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
       <slot name="filter-header" />
 
       <label
@@ -20,7 +20,6 @@
           hover:text-gray-700
           top-2.5
           right-3.5
-          dark:text-gray-300
         "
         @click="$emit('clear')"
       >

resources/scripts/components/base/BasePageHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-wrap justify-between">
     <div>
-      <h3 class="text-2xl font-bold text-left text-black dark:text-white">
+      <h3 class="text-2xl font-bold text-left text-black">
         {{ title }}
       </h3>
       <slot />

resources/scripts/components/base/BaseSwitch.vue

@@ -7,7 +7,7 @@
 
       <Switch
         v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
+        :class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
         class="
           relative
           inline-flex
@@ -21,11 +21,7 @@
         v-bind="$attrs"
       >
         <span
-          :class="
+          :class="enabled ? 'translate-x-6' : 'translate-x-1'"
-            enabled
-              ? 'translate-x-6 dark:bg-white'
-              : 'translate-x-1 dark:bg-gray-500'
-          "
           class="
             inline-block
             w-4

resources/scripts/components/base/BaseSwitchSection.vue

@@ -5,12 +5,12 @@
     <div class="flex flex-col">
       <SwitchLabel
         as="p"
-        class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
+        class="p-0 mb-1 text-sm leading-snug text-black font-medium"
         passive
       >
         {{ title }}
       </SwitchLabel>
-      <SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
+      <SwitchDescription class="text-sm text-gray-500">
         {{ description }}
       </SwitchDescription>
     </div>
@@ -18,7 +18,7 @@
       :disabled="disabled"
       :model-value="modelValue"
       :class="[
-        modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
+        modelValue ? 'bg-primary-500' : 'bg-gray-200',
         'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
       ]"
       @update:modelValue="onUpdate"
@@ -26,7 +26,7 @@
       <span
         aria-hidden="true"
         :class="[
-          modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
+          modelValue ? 'translate-x-5' : 'translate-x-0',
           'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
         ]"
       />

resources/scripts/components/notifications/NotificationItem.vue

@@ -1,8 +1,6 @@
 <template>
   <div
-    :class="success || info
+    :class="success || info ? 'bg-white' : 'bg-red-50'"
-      ? 'bg-white dark:border dark:border-white/10 dark:text-white dark:bg-gray-800/[.80] dark:shadow-glass dark:backdrop-blur-sm'
-      : 'bg-red-50 dark:bg-red-400/[.70] dark:shadow-glass dark:backdrop-blur-sm'"
     class="
       max-w-sm
       mb-3
@@ -50,7 +48,7 @@
             </svg>
             <svg
               v-if="error"
-              class="w-6 h-6 text-red-400 dark:text-white"
+              class="w-6 h-6 text-red-400"
               fill="currentColor"
               viewBox="0 0 24 24"
             >
@@ -64,9 +62,7 @@
           <div class="flex-1 w-0 ml-3 text-left">
             <p
               :class="`text-sm leading-5 font-medium ${
-                success || info
+                success || info ? 'text-gray-900' : 'text-red-800'
-                  ? 'text-gray-900 dark:text-white'
-                  : 'text-red-800 dark:text-white'
               }`"
             >
               {{
@@ -79,9 +75,7 @@
             </p>
             <p
               :class="`mt-1 text-sm leading-5 ${
-                success || info
+                success || info ? 'text-gray-500' : 'text-red-700'
-                  ? 'text-gray-500 dark:text-gray-400'
-                  : 'text-red-700 dark:text-red-200'
               }`"
             >
               {{
@@ -98,7 +92,7 @@
               :class="
                 success || info
                   ? ' text-gray-400 focus:text-gray-500'
-                  : 'text-red-400 focus:text-red-500 dark:text-red-100'
+                  : 'text-red-400 focus:text-red-500'
               "
               class="
                 inline-flex

tailwind.config.js

@@ -36,7 +36,6 @@ module.exports = {
           900: withOpacityValue('--color-primary-900'),
         },
         black: '#040405',
-        highlight: 'rgb(56, 189, 248)',
         red: colors.red,
         teal: colors.teal,
         gray: colors.slate,