local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
Resolves https://github.com/go-vikunja/api/issues/41
This commit is contained in:
kolaente 2022-08-15 23:08:18 +02:00
parent 45b7434bda
commit 3ab58a015c
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/base/BaseButton.vue
View file

@ -7,7 +7,7 @@
:disabled="disabled || undefined" :disabled="disabled || undefined"
ref="button" ref="button"
> >
<slot /> <slot/>
</component> </component>
</template> </template>
@ -16,7 +16,7 @@ import {defineComponent} from 'vue'
// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script // see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
export default defineComponent({ export default defineComponent({
inheritAttrs: false, inheritAttrs: false,
}) })
</script> </script>
@ -30,11 +30,11 @@ export default defineComponent({
// NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead! // 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({ const BASE_BUTTON_TYPES_MAP = Object.freeze({
button: 'button', button: 'button',
submit: 'submit', submit: 'submit',
}) })
type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP
@ -52,6 +52,7 @@ const props = defineProps({
const componentNodeName = ref<Node['nodeName']>('button') const componentNodeName = ref<Node['nodeName']>('button')
interface ElementBindings { interface ElementBindings {
type?: string; type?: string;
rel?: string; rel?: string;
@ -92,6 +93,7 @@ watchEffect(() => {
const isButton = computed(() => componentNodeName.value === 'button') const isButton = computed(() => componentNodeName.value === 'button')
const button = ref() const button = ref()
function focus() { function focus() {
button.value.focus() button.value.focus()
} }
@ -123,7 +125,7 @@ defineExpose({
user-select: none; user-select: none;
pointer-events: auto; // disable possible resets pointer-events: auto; // disable possible resets
&:focus { &:focus, &.is-focused {
outline: transparent; outline: transparent;
} }

4
src/styles/custom-properties/colors.scss
View file

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