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

Merged
Christoph merged 1 commits from LightMode into main 2026-09-18 09:02:34 +00:00
Owner

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.
Christoph added 1 commit 2026-09-18 09:02:30 +00:00
Replace self-referential CSS variables with explicit hex values for status tokens (--color-sync-ahead, --color-success, --color-warning) and change --color-on-status to white. This makes the theme colors deterministic (avoids circular var() references) and ensures consistent contrast.

Also increase the accent mix used for avatar backgrounds in the review center from 35% to 45% so avatars have a stronger accent tint.
Christoph merged commit 910fac2626 into main 2026-09-18 09:02:34 +00:00
Sign in to join this conversation.
No Reviewers
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Christoph/GitLite#49