feat: added dark styling for m-btn, minor clean up and refactoring of some names

Author: prolazydev

vue-m-ui/src/components/m-btn/m-btn.vue

@@ -21,17 +21,13 @@
 <script lang="ts" setup>
 import { ComputedRef, StyleValue, computed, ref, watch } from 'vue';
 import { dynamicSVG } from '@/utils';
-import { btnSizes, btnStyles, btnShapes, btnColors, createLighterShades } from './props';
+import { btnSizes, btnStyles, btnShapes, textColors, createLighterShades } from './props';
 
 const mBtn = ref<HTMLButtonElement | null>(null);
 const shades = ref<string[]>([]);
 const customColorTest = ref<StyleValue>();
 const mousedown = ref(false);
 
-watch(mousedown, () => {
-    console.log('watch: ', mousedown.value);
-});
-
 const btnProps = defineProps({
     text: {
         type: String,
@@ -78,7 +74,7 @@ const btnProps = defineProps({
 const handleBtnTextColor: ComputedRef<String> = computed(() => {
     if (!btnProps.textColor)
         return '';
-    return (btnColors as any)[ btnProps.textColor ];
+    return (textColors as any)[ btnProps.textColor ];
 });
 
 const handleBtnColor: ComputedRef<StyleValue | String[] | String | undefined> = computed(() => {
@@ -90,7 +86,7 @@ const handleBtnColor: ComputedRef<StyleValue | String[] | String | undefined> =
         mBtn.value?.addEventListener('mouseenter', () => mBtn.value!.style.backgroundColor = shades.value[ 0 ]);
         mBtn.value?.addEventListener('mouseleave', () => mBtn.value!.style.backgroundColor = btnProps.color);
 
-        mBtn.value?.addEventListener('mousedown', () => mBtn.value!.style.backgroundColor = shades.value[ 1 ]);
+        mBtn.value?.addEventListener('mousedown', () => { mBtn.value!.style.backgroundColor = shades.value[ 1 ]; mousedown.value = true; });
         mBtn.value?.addEventListener('mouseup', () => mBtn.value!.style.backgroundColor = shades.value[ 0 ]);
 
         mBtn.value?.addEventListener('focusin', () => {
@@ -129,9 +125,10 @@ const handleBtnTransparency = computed(() => {
 const isCustomColor: ComputedRef<boolean> = computed(() => {
     if (typeof handleBtnColor.value == 'string')
         return false;
-    const test: string = 'test';
 
-    return typeof handleBtnColor.value == 'object' && (handleBtnColor as any).value?.backgroundColor?.startsWith('#') || (handleBtnColor as any).value?.backgroundColor?.startsWith('#') || (handleBtnColor as any).value?.backgroundColor?.startsWith('rgb');
+    return typeof handleBtnColor.value == 'object'
+        && (handleBtnColor as any).value?.backgroundColor?.startsWith('#')
+        || (handleBtnColor as any).value?.backgroundColor?.startsWith('rgb');
 })
 
 </script>

vue-m-ui/src/components/m-btn/props.ts

@@ -7,6 +7,7 @@ export const btnStyles = {
     warning: 'm-btn m-btn-warning',
     info: 'm-btn m-btn-info',
     light: 'm-btn m-btn-light',
+    dark: 'm-btn m-btn-dark',
 
     indigo: 'm-btn m-btn-indigo',
     purple: 'm-btn m-btn-purple',
@@ -30,7 +31,7 @@ export const btnShapes = {
     pill: 'm-btn-shape-pill',
 };
 
-export const btnColors = {
+export const textColors = {
     default: '',
 
     dark: 'm-text-dark',

vue-m-ui/src/style.css

@@ -105,10 +105,13 @@
 }
 
 .m-btn-dark {
-	@apply m-text-light bg-neutral-800 hover:bg-gray-700 active:bg-gray-600;
-
-	background-color: rgb(30,32,35);
+	@apply m-text-light bg-neutral-800 hover:bg-neutral-700 active:bg-neutral-600
+}
+.m-btn-dark:focus-visible {
+	box-shadow: 0px 0px 0px white, 0px 0px 0px 1.5px rgb(38 38 38);
+	outline-color: rgb(229 229 229);
 }
+
 .m-btn-pink:focus-visible {
 	box-shadow: 0px 0px 0px white, 0px 0px 0px 1.5px rgb(219 39 119);
 }
@@ -248,7 +251,7 @@
 	@apply text-sky-400
 }
 .m-text-secondary {
-	@apply text-[#f4f4f4]
+	@apply text-[#bbbbbb]
 }
 .m-text-success {
 	@apply text-emerald-300;

vue-m-ui/src/utils/index.ts

@@ -1,6 +1,5 @@
 import { defineAsyncComponent } from "vue";
 
-
 export function dynamicSVG(name: String) {
 	if (name) 
         return defineAsyncComponent(() => import(`@/icons/${name}.vue`));