jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make button labels visible on non-green buttons

Browse Source 
The global `button` rule pairs a green background with white text. Any
variant that overrode the background without also setting `color` kept
the white text and rendered invisible against a light background.

Four controls were affected, all measured white-on-white or
white-on-light-grey: the calendar header's prev/next arrows, the
calendar's override-mode toggle, the red-days list's year navigation,
and the modal close button.

Each now declares its own `color: var(--c-text)`. Using the variable
rather than a literal means the high-contrast media query in
responsive.css, which redefines --c-text to #000, still applies.

Also adds the hover and focus-visible states the Settings and
vacation-days Save buttons were missing entirely -- they were the only
green buttons in the app that did not react to the pointer. Hover is
scoped with :not(:disabled) so a button disabled mid-save stays inert.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RXMhc9nT6sNz1SL4j8dznL
This commit is contained in:
Jacob Hagstedt
2026-09-15 03:51:18 +02:00
parent 31a60a296f
commit da7ac84aca
3 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/calendar.css
+2
View File
@@ -16,6 +16,7 @@
min-height: 36px;
padding: 8px 12px;
background: none;
color: var(--c-text);
border: 1px solid #d0d0d0;
border-radius: 4px;
font-size: 18px;
@@ -373,6 +374,7 @@
border: 1px solid #d0d0d0;
border-radius: 4px;
background: #fff;
color: var(--c-text);
cursor: pointer;
font-size: 13px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
frontend/src/styles/components.css
+38
View File
@@ -371,18 +371,46 @@ button.ghost:hover:not(:disabled) {
font-size: var(--fs-sm);
}
.settings-page__button:not(:disabled):hover {
background-color: #1f5a3b;
}
.settings-page__button:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.settings-page__button--secondary {
background-color: transparent;
color: var(--c-text);
border: 1px solid var(--c-border);
}
.settings-page__button--secondary:not(:disabled):hover {
background-color: var(--c-bg);
}
.settings-page__button--secondary:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.settings-page__button--danger {
background-color: var(--c-danger-weak);
color: var(--c-danger);
border: 1px solid var(--c-danger);
}
.settings-page__button--danger:not(:disabled):hover {
background-color: var(--c-danger);
color: white;
}
.settings-page__button--danger:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Vacation Days Table (multi-year) */
.vacation-days-table {
width: 100%;
@@ -434,6 +462,15 @@ button.ghost:hover:not(:disabled) {
white-space: nowrap;
}
.vacation-days-table__save:not(:disabled):hover {
background-color: #1f5a3b;
}
.vacation-days-table__save:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.vacation-days-table__empty {
color: var(--c-text-muted);
font-size: var(--fs-sm);
@@ -705,6 +742,7 @@ legend {
border: 1px solid var(--c-border);
border-radius: var(--radius);
background-color: var(--c-surface);
color: var(--c-text);
cursor: pointer;
}
frontend/src/styles/modals.css
+1
View File
@@ -49,6 +49,7 @@
.modal__close {
background: none;
border: none;
color: var(--c-text);
font-size: var(--fs-lg);
cursor: pointer;
padding: 0;