Light theme: set concrete status colors and increase avatar accent tint #49

Merged

Christoph merged 0 commits from refs/pull/49/head into main

2026-09-18 09:02:34 +00:00

Christoph commented

2026-09-18 09:02:30 +00:00

(Migrated from git.cbsk-tech.de)

This change replaces theme-referential status color variables with concrete color values and increases the avatar accent tint used in the Review Center.

What changed

In src/app.css (:root):
- --color-sync-ahead was changed from var(--color-warning) to #e0a040.
- --color-success was changed from var(--color-success) (self-referential) to #4eca76.
- --color-warning was changed from var(--color-warning) (self-referential) to #e0a040.
- --color-on-status was changed from #141820 to #ffffff.
  These replace references to other variables with explicit hex values for the status palette and set the text-on-status color to white.
In src/lib/components/ReviewCenter.svelte:
- The background mix for author/avatar/collaborator chips was increased from color-mix(..., var(--color-accent) 35%, ...) to color-mix(..., var(--color-accent) 45%, ...). This increases the visible tint of the accent in avatar backgrounds/borders.

Why this matters (supported by the diff)

Status-related CSS variables are now explicit hex values instead of relying on other variables. The diff shows the concrete values assigned in :root.
Avatar chips will show a stronger accent tint because the color-mix percentage for var(--color-accent) was raised from 35% to 45%.
The on-status color is now white, which will change contrast for text placed on status-colored backgrounds.

Testing

No test execution results were provided.

Recommended manual checks (suggested):

Build the frontend and verify the Review Center UI:
- Status badges/indicators (success, warning, danger, info) render with the updated colors.
- Text placed on status backgrounds uses white (--color-on-status) and remains legible.
- Avatars/collaborator chips show the increased accent tint (visibly stronger accent background).
Run an accessibility contrast check on the updated status colors against their typical backgrounds to confirm they meet expected contrast ratios.

Compatibility / risk notes

These are CSS-only changes that affect theme variables globally. Expect visible color differences wherever these variables are used.
If other theme code relied on the previous variable indirection, those visual results will change because the variables are now fixed hex values; review other components that render status colors.

Reviewer action

Perform a visual review in the app (light theme) and run a contrast/a11y check on status badges. If the new visuals are acceptable, no code-level changes are required.

This change replaces theme-referential status color variables with concrete color values and increases the avatar accent tint used in the Review Center. What changed - In src/app.css (:root): - --color-sync-ahead was changed from var(--color-warning) to #e0a040. - --color-success was changed from var(--color-success) (self-referential) to #4eca76. - --color-warning was changed from var(--color-warning) (self-referential) to #e0a040. - --color-on-status was changed from #141820 to #ffffff. These replace references to other variables with explicit hex values for the status palette and set the text-on-status color to white. - In src/lib/components/ReviewCenter.svelte: - The background mix for author/avatar/collaborator chips was increased from color-mix(..., var(--color-accent) 35%, ...) to color-mix(..., var(--color-accent) 45%, ...). This increases the visible tint of the accent in avatar backgrounds/borders. Why this matters (supported by the diff) - Status-related CSS variables are now explicit hex values instead of relying on other variables. The diff shows the concrete values assigned in :root. - Avatar chips will show a stronger accent tint because the color-mix percentage for var(--color-accent) was raised from 35% to 45%. - The on-status color is now white, which will change contrast for text placed on status-colored backgrounds. Testing - No test execution results were provided. Recommended manual checks (suggested): - Build the frontend and verify the Review Center UI: - Status badges/indicators (success, warning, danger, info) render with the updated colors. - Text placed on status backgrounds uses white (--color-on-status) and remains legible. - Avatars/collaborator chips show the increased accent tint (visibly stronger accent background). - Run an accessibility contrast check on the updated status colors against their typical backgrounds to confirm they meet expected contrast ratios. Compatibility / risk notes - These are CSS-only changes that affect theme variables globally. Expect visible color differences wherever these variables are used. - If other theme code relied on the previous variable indirection, those visual results will change because the variables are now fixed hex values; review other components that render status colors. Reviewer action - Perform a visual review in the app (light theme) and run a contrast/a11y check on status badges. If the new visuals are acceptable, no code-level changes are required.