Updated theme

Moonlight.Client/Styles/additions/buttons.css

@@ -26,31 +26,31 @@
 /* Colors */
 
 .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600;
+    @apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600 text-diffcolor;
 }
 
 .btn-secondary {
-    @apply bg-secondary-800 hover:bg-secondary-700 focus-visible:outline-secondary-800;
+    @apply bg-secondary-800 hover:bg-secondary-700 focus-visible:outline-secondary-800 text-diffcolor;
 }
 
 .btn-tertiary {
-    @apply bg-tertiary-600 hover:bg-tertiary-500 focus-visible:outline-tertiary-600;
+    @apply bg-tertiary-600 hover:bg-tertiary-500 focus-visible:outline-tertiary-600 text-diffcolor;
 }
 
 .btn-danger {
-    @apply bg-danger-600 hover:bg-danger-500 focus-visible:outline-danger-600;
+    @apply bg-danger-600 hover:bg-danger-500 focus-visible:outline-danger-600 text-diffcolor;
 }
 
 .btn-warning {
-    @apply bg-warning-500 hover:bg-warning-400 focus-visible:outline-warning-500;
+    @apply bg-warning-500 hover:bg-warning-400 focus-visible:outline-warning-500 text-diffcolor;
 }
 
 .btn-info {
-    @apply bg-info-600 hover:bg-info-500 focus-visible:outline-info-600;
+    @apply bg-info-600 hover:bg-info-500 focus-visible:outline-info-600 text-diffcolor;
 }
 
 .btn-success {
-    @apply bg-success-600 hover:bg-success-500 focus-visible:outline-success-600;
+    @apply bg-success-600 hover:bg-success-500 focus-visible:outline-success-600 text-diffcolor;
 }
 
 /* Outline */
@@ -78,3 +78,68 @@
 .btn-outline-success {
     @apply bg-gray-800 hover:border-gray-600 text-success-500;
 }
+
+/* Disabled Buttons */
+
+.btn:disabled,
+.btn-lg:disabled,
+.btn-sm:disabled,
+.btn-xs:disabled {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+}
+
+/* Colors for Disabled States */
+
+.btn-primary:disabled {
+    @apply bg-primary-600 text-gray-300;
+}
+
+.btn-secondary:disabled {
+    @apply bg-secondary-800 text-gray-400;
+}
+
+.btn-tertiary:disabled {
+    @apply bg-tertiary-600 text-gray-300;
+}
+
+.btn-danger:disabled {
+    @apply bg-danger-600 text-gray-300;
+}
+
+.btn-warning:disabled {
+    @apply bg-warning-500 text-gray-400;
+}
+
+.btn-info:disabled {
+    @apply bg-info-600 text-gray-300;
+}
+
+.btn-success:disabled {
+    @apply bg-success-600 text-gray-300;
+}
+
+/* Outline Disabled States */
+
+.btn-outline-primary:disabled {
+    @apply bg-gray-800 border-gray-700 text-gray-500;
+}
+
+.btn-outline-tertiary:disabled {
+    @apply bg-gray-800 border-gray-700 text-gray-500;
+}
+
+.btn-outline-danger:disabled {
+    @apply bg-gray-800 border-gray-700 text-gray-500;
+}
+
+.btn-outline-warning:disabled {
+    @apply bg-gray-800 border-gray-700 text-gray-500;
+}
+
+.btn-outline-info:disabled {
+    @apply bg-gray-800 border-gray-700 text-gray-500;
+}
+
+.btn-outline-success:disabled {
+    @apply bg-gray-800 border-gray-700 text-gray-500;
+}

Moonlight.Client/Styles/tailwind.config.js

@@ -117,6 +117,9 @@ module.exports = {
                 white: 'rgb(var(--color-light))',
                 black: 'rgb(var(--color-dark))'
             },
+            textColor:{
+                diffcolor: 'rgb(var(--color-diffcolor, var(--color-light)))'
+            },
             animation: {
                 'shimmer': 'shimmer 2s linear infinite',
             }