Re: [PR] feat(config): customize branding, navigation and labels from a deployment overlay [fineract-backoffice-ui]

[via GitHub]

Aman-Mittal commented on PR #437:
URL: 
https://github.com/apache/fineract-backoffice-ui/pull/437#issuecomment-5385926544

   ## Colour profiles
   
   Four invented institutions, each one a `branding.tokens` block and a logo — 
no code, no rebuild,
   no CSP change. Note the corner radius moves with them: `--border-radius` is 
on the allow-list too,
   so density and shape travel with the palette, not just hue.
   
   | | Light | Dark |
   | --- | --- | --- |
   | **Any Community Bank** `#0b5f8a` | <img 
src="https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/assets/pr-437/pr-437/profiles/20-blue-light.png";
 width="330"> | <img 
src="https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/assets/pr-437/pr-437/profiles/20-blue-dark.png";
 width="330"> |
   | **Green Valley Credit Union** `#1b6b3a` | <img 
src="https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/assets/pr-437/pr-437/profiles/21-green-light.png";
 width="330"> | <img 
src="https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/assets/pr-437/pr-437/profiles/21-green-dark.png";
 width="330"> |
   | **Meridian Microfinance** `#6b3fa0` | <img 
src="https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/assets/pr-437/pr-437/profiles/22-violet-light.png";
 width="330"> | <img 
src="https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/assets/pr-437/pr-437/profiles/22-violet-dark.png";
 width="330"> |
   | **Sahel Rural Bank** `#9c4221` | <img 
src="https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/assets/pr-437/pr-437/profiles/23-clay-light.png";
 width="330"> | <img 
src="https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/assets/pr-437/pr-437/profiles/23-clay-dark.png";
 width="330"> |
   
   A worked profile, in full:
   
   ```json
   {
     "branding": {
       "appName": "Green Valley Credit Union",
       "logoUrl": "branding/logo.svg",
       "tokens": {
         "light": {
           "primary-color": "#1b6b3a",
           "primary-strong": "#14522c",
           "secondary-color": "#123524",
           "border-radius": "10px"
         },
         "dark": { "primary-color": "#5cc98a" }
       }
     },
     "nav": { "hidden": ["spm", "working-capital", "interop"] }
   }
   ```
   
   Each profile names a lighter accent for dark mode, and all eight palettes 
clear the contrast
   floor. The generator asserts `--ion-color-primary` actually equals the 
deployment's colour before
   capturing, so these cannot quietly become screenshots of the shipped blue.
   
   ### A correction to the dark-mode screenshot in the description
   
   The earlier dark capture showed a light header. Two things were behind that, 
and only one was a
   real defect:
   
   - **A capture artifact.** The header animates its background over `0.2s` and 
the screenshot fired
     before the transition settled. Measured after it settles, the header is 
`rgb(30,30,30)` as
     intended. The image in the description has been regenerated.
   - **A real bug, now fixed** (`f852fcd1`). The branding stylesheet is 
appended after the
     application's own, and `:root` ties with `[data-theme='dark']` on 
specificity — so any colour a
     deployment set for light and not for dark was also winning dark mode. That 
is worse than a wrong
     shade: `--secondary-color` is the sidebar ground in light and a near-white 
*foreground* in dark,
     so the reference deployment's navy was being painted as text on a 
near-black page.
   
     Colours the application re-themes are now emitted under 
`:root:not([data-theme='dark'])`, which
     outranks its `:root` block in light and does not match in dark. Lengths 
and the colours the
     application does not re-theme stay on `:root` and apply to both. 
`branded-deployment.spec.ts`
     now asserts the reference overlay's light-only `--secondary-color` does 
not reach dark mode
     while its `--border-radius` does.
   


-- 
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: issues-unsubscr...@fineract.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org