kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(button): make sure button text color is always white

This commit is contained in:
kolaente 2026-01-10 18:31:10 +01:00
parent 84b733ec0c
commit cac2690fd6
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/input/Button.vue
View File

@ -73,6 +73,10 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
<style lang="scss" scoped>
.button {
// Button text must stay white regardless of theme, so we use a fixed value
// instead of var(--white) which changes in dark mode.
--button-text-color: #fff;
// Base structure (replaces Bulma's .button)
display: inline-flex;
align-items: center;
@ -97,7 +101,7 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
// Default/Primary variant colors
background-color: var(--primary);
color: var(--white);
color: var(--button-text-color);
border-radius: $radius;
[dir="rtl"] & {
@ -136,7 +140,7 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
// Primary variant (default, explicit)
&.is-primary {
background-color: var(--primary);
color: var(--white);
color: var(--button-text-color);
&:hover {
background-color: var(--primary-dark, color-mix(in srgb, var(--primary) 85%, black));
@ -241,7 +245,7 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
display: block;
block-size: 1em;
inline-size: 1em;
border: 2px solid var(--white);
border: 2px solid var(--button-text-color);
border-radius: 50%;
border-inline-end-color: transparent;
border-block-start-color: transparent;