subhranshudash13-dotcom opened a new pull request, #601:
URL: https://github.com/apache/fineract-backoffice-ui/pull/601
## What and why
Fixes light mode WCAG 2.1 AA contrast failures across status pills
(Pending/Active), table entity links, active navigation tabs, empty-state
placeholders, solid-filled action buttons, form subheadings, and record headers.
Closes #587
### Summary of Changes:
1. **Semantic Tokens**:
- Added `--primary-text: #1f6391` (light mode, 6.54:1 on white) and
`--primary-text: #5dade2` (dark mode, 7.41:1 on #1e1e1e) to `_common.scss`.
- Global `a`, `.clickable-link`, and `ion-segment-button --color-checked`
resolve through `--primary-text`.
- `--ion-color-primary` maps to `var(--primary-strong, #2471a3)` ensuring
white text on solid buttons/chips achieves 5.30:1 contrast.
2. **Status Pills**:
- `Pending`: Updated text to `#8A5300` on `#FEF7E0` (5.93:1, previously
2.10:1).
- `Active`: Updated text to `#126330` on `#E6F4EA` (6.12:1, previously
3.70:1).
3. **Record Headers & Empty States**:
- Tokenized account numbers (`#000000020`), subtitles, and empty-state
placeholders with `var(--text-muted)` (#666666, 5.74:1 on white).
4. **Branding Safeguard**:
- Registered `primary-text` in `BRANDABLE_TOKENS` and `THEME_SCOPED`.
- Enforces light-mode contrast validation against white (>= 4.5:1) and
dark-mode contrast validation against dark surface `#1e1e1e` (>= 4.5:1).
## Verification
- `npm run check:icons`: Passed (117 registered icons).
- `npm run check:a11y-names`: Passed.
- `npm run check:branding-path`: Passed.
- `npm run test:unit --
--include="src/app/core/services/branding.service.test.ts"`: Passed (23/23
tests passed).
- Tested across routes: `/loans`, `/clients`, `/tasks/approval-queues`,
`/transfers/account-transfers`, `/profile`.
## Screenshots
### 1. Loans Portfolio (Status Pills, Links & Chips)
before -- <img width="487" height="306" alt="image"
src="https://github.com/user-attachments/assets/ba0d6738-5b48-441b-aba5-3e6a03880e6c";
/>
after --
<img width="486" height="307" alt="image"
src="https://github.com/user-attachments/assets/2ba644cb-daa3-4513-995d-1c8c786a5c6e";
/>
### 2. Approval Queues (Active Tabs & Empty States)
before -- <img width="489" height="308" alt="image"
src="https://github.com/user-attachments/assets/5d42e79e-a6bc-4dc8-a87f-913bc7b8f1af";
/>
after -- <img width="488" height="308" alt="image"
src="https://github.com/user-attachments/assets/33d94866-fe1b-4604-ba82-0e2133643ed7";
/>
## Checklist :
- [x] I did not hand-edit generated files under `src/app/api/`.
- [x] New component or service code uses the adapter boundary in
`src/app/core/adapters/` instead of direct browser globals or imperative
third-party APIs.
- [x] User-facing strings use translation keys.
- [x] I added or updated tests appropriate to this change, or explained why
tests were not needed.
- [x] UI workflow changes include suitable e2e coverage, including
real-backend testing where relevant.
- [x] Commits are signed — see [Commit
Signing](CONTRIBUTING.md#commit-signing) in CONTRIBUTING.md.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
