fix(angular): make the field and page-parent pickers' ng-zorro chrome follow the host theme - #57
Merged
Merged
Conversation
… follow the host theme Two hardcoded light-mode defaults that a dark host exposes, both mirroring fixes made at the same time in @dignite/ng.flex-fields' Select control. - Both picker dropdown panels painted `var(--lpx-content-bg, #fff)`. --lpx-content-bg is a FULL LeptonX token (@volosoft/ngx-lepton-x: #f0f4f7 light, #121212 dark); this app runs LeptonX *Lite* via @abp/ng.theme.lepton-x, and Lite never defines it - it ships 11 --lpx-* tokens and this is not one of them. The chain fell straight through to the literal #fff, so both panels stayed white in every theme while their own items kept following --bs-body-color into light-grey-on-white. --bs-secondary-bg, redefined under [data-bs-theme=dark] by every Bootstrap-based theme, is now the second link. Light mode moves from pure white to #e9ecef. - The field picker runs nzMode="multiple", so each chosen field renders as a tag - and ng-zorro hardcodes that tag's entire chrome: `background: #f5f5f5`, `border: 1px solid #f0f0f0`, and `rgba(0, 0, 0, 0.45)` on the remove icon. The label, by contrast, does follow the host, since the block already sets `color: inherit` on .ant-select, so a dark host showed a light label on a near-white chip with an invisible remove icon. Now --bs-secondary-bg, --bs-border-color and --bs-secondary-color. The page-parent picker needs no equivalent tag rule: it is a single-select nz-tree-select, and its own selected-node styling was already themed.
duguankui
added a commit
that referenced
this pull request
Sep 4, 2026
Moves @dignite/ng.flex-fields, its -ckeditor and -file-explorer adapters and @dignite/ng.file-explorer from ^10.0.0-rc.13 to ^10.0.0-rc.14, in both the Host dev app and the published library. The library-side change in rc.14 is CSS only - the Tree control's config and search components stop painting hardcoded light-mode ng-zorro chrome and follow the host theme instead, matching what #57 and #58 did for this repository's own pickers. No API surface moved. The release-side change is the one that matters here. Through rc.13 the two adapter packages declared their intra-repo siblings at "^10.0.0-rc.4"; that range admits an older sibling, and Yarn Classic prefers the latest-tagged version for any range that admits it, so a plain install produced two copies of @dignite/ng.flex-fields - which, FLEX_FIELD_TYPES being a module-scoped InjectionToken, is two distinct DI keys and every field type absent at runtime. rc.14 declares those siblings at the released version. Verified rather than assumed, because abp-modules' own post-publish single-copy check never ran green against rc.14 - it failed on an unrelated npmrc bug in the release workflow, fixed after the tag was cut and never re-run against it. A full re-resolve here with no lockfile and the "resolutions" block removed installs exactly one copy of each of the four packages at rc.14, so the upstream fix does hold. yarn test (29 tests), ng build site and ng build Host all pass. The "resolutions" block is bumped rather than dropped: only the manifest half of the problem is gone. abp-modules still publishes pre-releases under the "next" dist-tag alone, so npmjs' "latest" keeps lagging, and the block makes the single-copy guarantee independent of a dist-tag this repository does not control. check-angular-package-duplicates.mjs is what will say when it has become redundant.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Two hardcoded ng-zorro light-mode defaults that a dark host exposes in the field picker and the
page-parent picker. Both mirror fixes made at the same time in
@dignite/ng.flex-fields'Selectcontrol — see dignite-projects/abp-modules#218.
Dropdown panels stayed white in every theme. Both painted
var(--lpx-content-bg, #fff), but--lpx-content-bgis a full LeptonX token(
@volosoft/ngx-lepton-x:#f0f4f7light,#121212dark). This app runs LeptonX Lite via@abp/ng.theme.lepton-x, and Lite never defines it — it ships 11--lpx-*tokens and this is notone of them. The chain fell straight through to the literal
#fff, so the panels stayed white whiletheir own items kept following
--bs-body-colorinto light-grey-on-white.--bs-secondary-bgis nowthe second link: the Bootstrap 5.3 "one step off the body surface" token, defined at
:rootby everyBootstrap-based theme and redefined under
[data-bs-theme=dark](#e9ecef→#343a40in Lite).Light mode moves from pure white to
#e9ecef.The field picker's multi-select tags were near-illegible. It runs
nzMode="multiple", andng-zorro hardcodes the tag's entire chrome —
background: #f5f5f5,border: 1px solid #f0f0f0,rgba(0, 0, 0, 0.45)on the remove icon. The label, by contrast, does follow the host, since theblock already sets
color: inheriton.ant-select, so a dark host showed a light label on anear-white chip with an invisible "×". Now
--bs-secondary-bg,--bs-border-colorand--bs-secondary-color.The page-parent picker needs no equivalent tag rule: it is a single-select
nz-tree-select, and itsselected-node styling was already themed.
How to test it?
Open the content-type editor's field picker with several fields chosen, and the page editor's
parent-page picker, in a dark theme. The tags should sit on the theme's secondary surface with a
visible remove icon, and both dropdown panels should follow the theme rather than staying white.
ng build sitepasses; the compiled output carries the new chains(
var(--lpx-content-bg, var(--bs-secondary-bg, #fff))) with novar(--lpx-content-bg, #fff)leftanywhere in the tree. No tests added — these are CSS custom-property fallback chains, and the repo
has no stylesheet coverage to extend.