fix(dark mode): make a focused text only button actually readable

Resolves https://github.com/go-vikunja/api/issues/41

src/components/base/BaseButton.vue

@@ -7,7 +7,7 @@
 		:disabled="disabled || undefined"
 		ref="button"
 	>
-		<slot />
+		<slot/>
 	</component>
 </template>
 
@@ -30,7 +30,7 @@ export default defineComponent({
 
 // NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
 
-import { ref, watchEffect, computed, useAttrs, PropType } from 'vue'
+import {ref, watchEffect, computed, useAttrs, PropType} from 'vue'
 
 const BASE_BUTTON_TYPES_MAP = Object.freeze({
 	button: 'button',
@@ -52,6 +52,7 @@ const props = defineProps({
 
 
 const componentNodeName = ref<Node['nodeName']>('button')
+
 interface ElementBindings {
 	type?: string;
 	rel?: string;
@@ -92,6 +93,7 @@ watchEffect(() => {
 const isButton = computed(() => componentNodeName.value === 'button')
 
 const button = ref()
+
 function focus() {
 	button.value.focus()
 }
@@ -123,7 +125,7 @@ defineExpose({
 	user-select: none;
 	pointer-events: auto; // disable possible resets
 
-	&:focus {
+	&:focus, &.is-focused {
 		outline: transparent;
 	}
 

src/styles/custom-properties/colors.scss

@@ -291,9 +291,11 @@
       --table-row-hover-background-color: var(--grey-100);
       --dropdown-item-hover-background-color: var(--grey-100);
       --dropdown-item-hover-color: var(--text);
+      --pre-background: var(--grey-200);
       --button-text-hover-background-color: var(--grey-200);
       --button-hover-color: var(--grey-600);
-      --pre-background: var(--grey-200);
+      --button-active-color: var(--grey-600);
+      --button-focus-color: var(--grey-600);
 
       // Custom color variables we need to override
       --card-border-color: hsla(var(--grey-100-hsl), 0.3);