Refactor: Renamed fe->ui

fe/src/components/base/ButtonComp.vue

@@ -1,189 +0,0 @@
-<!--
-Macrame is a program that enables the user to create keyboard macros and button panels. 
-The macros are saved as simple JSON files and can be linked to the button panels. The panels can 
-be created with HTML and CSS.
-
-Copyright (C) 2025 Jesse Malotaux
-
-This program is free software: you can redistribute it and/or modify 
-it under the terms of the GNU General Public License as published by 
-the Free Software Foundation, either version 3 of the License, or 
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful, 
-but WITHOUT ANY WARRANTY; without even the implied warranty of 
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License 
-along with this program. If not, see <https://www.gnu.org/licenses/>.
--->
-
-<template>
-  <template v-if="href">
-    <RouterLink :to="href" :class="classString">
-      <slot />
-    </RouterLink>
-  </template>
-  <template v-else>
-    <button :class="classString">
-      <slot />
-    </button>
-  </template>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  href: String,
-  variant: String,
-  size: String,
-})
-
-const classString = computed(() => {
-  let classes = 'btn'
-  if (props.variant) classes += ` btn__${props.variant}`
-  if (props.size) classes += ` btn__${props.size}`
-
-  return classes
-})
-</script>
-
-<style>
-@reference "@/assets/main.css";
-
-button,
-.btn {
-  @apply flex 
-  items-center 
-  gap-3
-  h-fit 
-  px-4 py-2
-  border
-  border-solid
-  rounded-lg
-  tracking-wide
-  font-normal
-  transition-all
-  cursor-pointer
-  no-underline;
-
-  transition:
-    border-color 0.1s ease-in-out,
-    background-color 0.2s ease;
-
-  &:not(.button__subtle, .button__ghost):hover {
-    @apply shadow-black;
-  }
-
-  &[disabled],
-  &.disabled {
-    @apply opacity-50 pointer-events-none cursor-not-allowed;
-  }
-
-  svg {
-    @apply size-5 transition-[stroke] duration-400 ease-in-out;
-  }
-
-  &.btn__sm {
-    @apply px-3 py-1
-    text-sm;
-
-    svg {
-      @apply size-4;
-    }
-  }
-
-  &.btn__lg {
-    @apply px-6 py-3
-    text-lg;
-
-    svg {
-      @apply size-6;
-    }
-  }
-
-  &:hover {
-    @apply text-white;
-
-    svg {
-      @apply stroke-current;
-    }
-  }
-
-  &.btn__primary {
-    @apply bg-sky-100/10 border-sky-100 text-sky-100;
-
-    svg {
-      @apply stroke-sky-200;
-    }
-
-    &:hover {
-      @apply bg-sky-400/40 border-sky-300;
-    }
-  }
-
-  &.btn__secondary {
-    @apply bg-amber-100/10 border-amber-100 text-amber-100;
-
-    svg {
-      @apply stroke-amber-300;
-    }
-
-    &:hover {
-      @apply bg-amber-400/40 border-amber-400;
-    }
-  }
-
-  &.btn__danger {
-    @apply bg-rose-200/20 border-rose-100 text-rose-200;
-
-    svg {
-      @apply stroke-rose-400;
-    }
-
-    &:hover {
-      @apply bg-rose-400/40 border-rose-500 text-white;
-    }
-  }
-
-  &.btn__dark {
-    /* @apply bg-slate-700/80 hover:bg-slate-700 text-white border-slate-600; */
-    @apply bg-slate-200/10 border-slate-400 text-slate-100;
-
-    svg {
-      @apply stroke-slate-300;
-    }
-
-    &:hover {
-      @apply bg-slate-400/40 border-slate-200 text-white;
-    }
-  }
-
-  &.btn__success {
-    /* @apply bg-lime-500/80 hover:bg-lime-500 text-white border-lime-600; */
-    @apply bg-lime-200/10 border-lime-100 text-lime-100;
-
-    svg {
-      @apply stroke-lime-400;
-    }
-
-    &:hover {
-      @apply bg-lime-400/40 border-lime-500 text-white;
-    }
-  }
-
-  &.btn__subtle {
-    @apply bg-transparent hover:bg-white/10 text-white border-transparent;
-
-    &:hover {
-      @apply bg-white/20 to-white/30 border-white/40;
-    }
-  }
-
-  &.btn__ghost {
-    @apply bg-transparent text-white/80 border-transparent hover:text-white;
-  }
-}
-</style>