https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38550
--- Comment #45 from Martin Renvoize (ashimema) <[email protected]> --- Created attachment 200767 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200767&action=edit Bug 38550: Token Vue SFC scoped styles Audits all Vue single-file components in the staff client whose scoped <style> blocks contain hardcoded hex colours, replacing them with the runtime --koha-* CSS custom properties. Vue scoped styles are emitted into the rendered CSS but with attribute-scoping selectors, so they participate in the [data-bs-theme="dark"] cascade exactly like the rest of the staff stylesheets — they just needed to actually use the tokens. Components touched: * LeftMenu.vue — disabled left-menu links use on-surface-muted, the active-disabled variant uses on-surface * SIP2/Main.vue — same disabled-link palette plus a left-border on the .current.disabled link routed through surface-accent * ModuleDashboard/ModuleDashboard.vue — the empty-placeholder uses surface-muted / on-surface-muted with a themed dotted border; the runtime drag-drop border (set via JS) uses var(--koha-border) * ModuleDashboard/WidgetDashboardWrapper.vue — .widget body and header surfaces with explicit on-surface text and themed dividers * ModuleDashboard/WidgetPickerWrapper.vue — picker .widget-header uses surface-muted with themed border * ModuleDashboard/Widgets/ERMCounts.vue — count-list pills use surface-accent with on-surface text; inactive-link uses on-surface-muted * ResourceFormSave.vue — the accordion-fieldset legend's resting border uses var(--koha-surface). The intentional Koha-green hover (#6faf44) and blue caret (#4c7aa8) are LEFT as hex literals — they are decorative brand accents, not surface colours, and are legible against both modes * ERM/UsageStatisticsReportsViewer.vue — the JS-set rowspan border uses var(--koha-border) instead of the hardcoded #BCBCBC The remaining Vue components scanned (ResourceShow, the ERM *-Widget/-LatestSUSHIJobs/-LicensesNeedingAction/-RunUsageReport, EHoldingsEBSCOPackageAgreements) flagged in the initial sweep turned out to contain only Vue template slot syntax (#default, actual hex colours — and are unaffected. Test plan: 1) Apply patch, rebuild Vue: yarn js:build 2) Light mode: load each touched view (Module dashboard incl. drag- drop reorder, SIP2 menu, the resource accordion, ERM counts widget, usage statistics reports). Confirm no visual regression 3) Dark mode: same views. Confirm: - Widget cards are dark surfaces with light text - Dashboard empty-drop placeholder reads as a dark dotted slot - Disabled left-menu links remain visibly muted but legible - ERM count pills are dark accent pills with legible text - Usage stats table rowspan border is visible against dark cells 4) Brand-coloured accents (the green legend hover and blue caret in ResourceFormSave) should look identical in both modes — they are decorative, not surface-derived -- You are receiving this mail because: You are watching all bug changes. _______________________________________________ Koha-bugs mailing list [email protected] https://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-bugs website : http://www.koha-community.org/ git : http://git.koha-community.org/ bugs : http://bugs.koha-community.org/
