Expose Kolibri theme and palette tokens via CSS Variables

[rtibbles]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Allow developers a much more intuitive API for using theme or palette based styling using CSS variables

• Currently to use any theme or palette tokens, all styles that leverage them must be handled via Javascript based styles. This adds additional overhead, and also for styles using pseudoselectors, results in additional complexity using the computedClass helpers.
• Our current browser support is nearly good enough to support css variables, and it seems likely that we will be able to drop support for the last few browsers that do not.
• Maintaining our aphrodite fork is problematic, as it conflicts with the version is used by the Khan Academy perseus renderer that we bundle in Kolibri - in addition, the overall developer experience of having to use inline styles is not great, with the added issue that the use of inline styles can also result in poorly handled RTL interactions (https://github.com/learningequality/kolibri/issues/12452)

Contributors

[Fill this out as people are assigned]

• Technical lead: [github handle]
• Individual contributors: [list all github handles]
• Designer: [if a specific designer is leading]
• Other relevant LE team members: [optional, i.e. imps point person]

Goals

• This feature aims to simplify and improve the developer experience.