UI improvements to dataTables

[alistair3149]

• Make searchBuilder and searchPanes title more consistent
• Redesign search pane layout
• Change pagination buttons into icon buttons
• Use Codex icons when applicable
• Update button styles to match with current Codex standards
• Add i18n for searchBuilder and searchPanes title
• Update token.less to Codex Design Tokens v1.18.0 and polyfill new LESS variables

Recording.2024-12-18.020126.1.mp4

[JeroenDeDauw]

Does this have to be in the same file? I'm worried that having this section at the bottom is easy to overlook when updating the preceding copied codex token code.

[JeroenDeDauw]

Then again, maybe we never need to update it? Can we drop these copies once we require MW 43 or later?

[alistair3149]

Does this have to be in the same file? I'm worried that having this section at the bottom is easy to overlook when updating the preceding copied codex token code.

It can be in a separate LESS file and imported through token.less. Will reorganize it in the same PR.

Then again, maybe we never need to update it? Can we drop these copies once we require MW 43 or later?

I would suggest keeping a copy so that we can keep compatibility across MW versions. Design systems like Codex are often an evolving standard (and it did move much quicker than OOUI) and each MW version bundles with a different version of Codex. There are many fixes and improvements that are useful in the newer version of Codex, and having the newer version of Codex means that we can decouple UI development from the oldest Codex/MW version that we have to support.

We might be able to drop these copies somewhat in 1.43 if we switch to use Codex for HTML generation in PHP, but even Codex PHP is a relatively new thing so that is probably years down the line until it gets somewhat stable for SMW to use.

[alistair3149]

It can be in a separate LESS file and imported through token.less. Will reorganize it in the same PR.

Done. I have separated the tokens into three files.

• tokens.less serves as the entry point that is used to be imported by other LESS files if needed, or any other SRF tokens in the future.
• tokens-codex.less is a copy of the current Codex Design Tokens
• tokens-codex-polyfill.less contains the polyfill needed for Codex since MW 1.43.