From 3ab58a015cd66c63cd79839c7634e3e28aa52140 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 15 Aug 2022 23:08:18 +0200
Subject: [PATCH] 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       | 16 +++++++++-------
 src/styles/custom-properties/colors.scss |  4 +++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index c617c30e..306e21b6 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -7,7 +7,7 @@
 		:disabled="disabled || undefined"
 		ref="button"
 	>
-		<slot />
+		<slot/>
 	</component>
 </template>
 
@@ -16,7 +16,7 @@ import {defineComponent} from 'vue'
 
 // see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
 export default defineComponent({
-  inheritAttrs: false,
+	inheritAttrs: false,
 })
 </script>
 
@@ -30,11 +30,11 @@ 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',
-  submit: 'submit',
+const BASE_BUTTON_TYPES_MAP = Object.freeze({
+	button: 'button',
+	submit: 'submit',
 })
 
 type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP
@@ -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;
 	}
 
diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
index bcb23d32..da58d248 100644
--- a/src/styles/custom-properties/colors.scss
+++ b/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);