Theme links in top navigation bars

Due to technical limitations, we couldn’t utilize theme colors fully for links in top navigation bars in the past, e.g. Home, Library, and Bookmarks links in Learn:

When a link is active, we use hardcoded white colors

https://github.com/learningequality/kolibri/blob/9048d77029e622b57d95009ab8b968f12dd5d99a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue#L111-L112

where we should use textInverted token.

It should be now possible to refactor NavbarLink to use router-link scoped slot API that’s been released meanwhile. That should allow us to use textInverted token instead of hardcoded white.

User-facing consequences

textInverted token is used to create sufficient contrast when used on dark backgrounds such as tokens.primary. Using hardcoded color instead of the token increases the risk of not having the proper contrast in theme plugins.

[marcellamaki]

Hi @amitpanwar789 - confirming that I’ve reviewed the current version of NavbarLink.vue and the scope of this issue is up to date and it should be ready to work on!

If you have questions as you are working, please add a comment here and tag me in it, and I will be working reduced hours over the upcoming holidays and New Year, but I will get back to you as soon as possible. Thanks again for offering to contribute to Kolibri 😃

[marcellamaki]

Hi @amitpanwar789! Thank you for your interest in contributing! I’ve done a little bit of refactoring work on the App bar in recent months, so I’m going to review and this issue as necessary to make sure it’s fully up to date and ready to work on. It should be ready by next week. After that, we would welcome your contributions! I’ll assign us both to the issue so we can keep track of it, and then I’ll follow up with you early next week to confirm it should be ready to work on. 😊