https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38550
--- Comment #49 from Martin Renvoize (ashimema) <[email protected]> --- Created attachment 200771 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200771&action=edit Bug 38550: Token table status rows and DataTable chrome Finishes the table audit: every hex literal in _tables.scss is replaced with a token (Koha --koha-* surfaces or Bootstrap --bs-*-bg-subtle / --bs-*-text-emphasis status pairs), and three table Sass variables in _variables.scss that were shadowing themselves with literal-hex values are reverted to var()-based forms so they re-skin in dark mode. Sass variable redefinitions (_variables.scss): $table-border-color: #BCBCBC → var(--bs-border-color) $table-header-background: #FFF → var(--koha-surface-muted) $table-odd-row: #f3f4f4 → var(--koha-surface-muted) These three were defined twice in _variables.scss — once as var()-based forms higher up (matching Bootstrap defaults) and again ~1000 lines later as literal-hex overrides. The literal overrides won the cascade, so every <th>, every odd-stripe row and every cell border was pinned to the light-mode value. The new values mean the staff client's table grid flips in lockstep with the body bg. DataTables runtime token (_tables.scss top): Adds a [data-bs-theme="dark"] block that re-emits --dt-row-selected, --dt-row-selected-text and --dt-row-selected-link with dark-mode-friendly RGB triplets. DataTables consumes these via rgb()/rgba() to paint selected rows; previously the light-mode triplet stayed pinned in dark mode, producing pale-green selections on dark cells with black-on-near-black text. Status rows (semantic colours): Mapped to Bootstrap 5.3's *-bg-subtle / *-text-emphasis token pairs. They flip automatically — pale bg + dark text in light, dark bg + pale text in dark — and preserve each colour's semantic identity. .ok / .onissue / .odd.onissue / .selections-table:hover / td input.approve / .onissue:nth-child(odd) → warning-bg-subtle + warning-text-emphasis .reserved → success-bg-subtle + success-text-emphasis .transferred → info-bg-subtle + info-text-emphasis .warn → danger-bg-subtle + danger-text-emphasis The "loud" flag rows that should stand out — .highlighted-row, .warned-row, .high-warned-row, .selected-row — keep solid --bs-warning / --bs-danger / --bs-success backgrounds rather than the subtle variants, paired with their text-emphasis token so legibility holds in either mode. DataTable chrome: .dt-processing overlay → surface-overlay + on-surface .dt-buttons > .dt-button:hover → surface-muted + border-strong .dt-paging-button.current → on-surface-muted .dt-button-collection .buttons-columnVisibility:hover → surface-muted .buttons-csv/excel/html5/print → surface + on-surface :hover → surface-muted .dt-button-down-arrow → on-surface-muted .pager input[type="search"] → input-bg / input-color / input-border .filter_column input[type="text"] → on-surface-muted .table_controls border-top → border-muted caption → on-surface The brand-coloured icons inside DataTable export buttons (.buttons-html5/.buttons-print ::before) and the link-coloured .dt-paging-button + .dt-button-active::after still reference $background-color-primary / $green-text-color directly. They are brand identity, not surface colour, so they are deliberately left as constants. stylelint: _tables.scss is removed from the dirty-files override block in .stylelintrc.json. The color-no-hex rule now actively guards it, so any future hex literal regresses CI as a warning. Test plan: 1) Apply patch, rebuild: yarn css:build 2) Light mode — load: - the issues table on a patron page (rows with .onissue, .reserved, .transferred should still look pale yellow, pale green, pale blue; with dark text) - any DataTable with a paging footer; click a column to sort, hover a column-visibility button, click an export button - a circulation page that paints .warn rows - the selections-table on a virtual shelf (hover should highlight pale yellow) 3) Dark mode — same pages. Confirm: - status rows now use *dark* bg with pale text and remain visually distinct from each other - the active table-paging button stays muted - the export buttons inside the column-visibility menu have dark surfaces with legible text - DataTables row-select highlight is dark-olive, not pale green-on-dark 4) Spot-check WCAG contrast on each status row's text (Bootstrap 5.3's text-emphasis is tuned for AA on its bg-subtle pair). -- 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/
