learningequality
Full theming support for toolbars
Product
Kolibri
Desired behavior
UiToolbar component is fully themed internally and can also accept theme tokens through the textColor prop.
Current behavior
UiToolbar accepts black or white values as text color
https://github.com/learningequality/kolibri-design-system/blob/b41e4f61ea05bd4f01b08f28f4cc10abb63d2d0f/lib/keen/UiToolbar.vue#L67-L69
These values are then translated into CSS classes
https://github.com/learningequality/kolibri-design-system/blob/b41e4f61ea05bd4f01b08f28f4cc10abb63d2d0f/lib/keen/UiToolbar.vue#L103
that have hardcoded colors
https://github.com/learningequality/kolibri-design-system/blob/b41e4f61ea05bd4f01b08f28f4cc10abb63d2d0f/lib/keen/UiToolbar.vue#L232
There is no straightforward way of setting the text color so that we could use tokens.text or tokens.textInverted.
Another hardcoded color is the white color used for the default background:
https://github.com/learningequality/kolibri-design-system/blob/b41e4f61ea05bd4f01b08f28f4cc10abb63d2d0f/lib/keen/UiToolbar.vue#L206
The Value Add
It is important to be able to use text tokens to ensure that themes have sufficient contrast of text against the background. This will make it possible in the following Kolibri toolbars:
- AppBar
- ImmersiveToolbar
- LearningActivityBar
- the toolbar in the custom channel content modal
- ProgressToolbar
Hi @nick2432, thank you for volunteering! I'm sorry for delayed response, I just returned from a long vacation, and the whole team had holidays too. I'm assigning you.
@MisRob , please correct me if I'm wrong. Currently, we only have two color options for text color. Should I modify UiToolbar to accept more colors?
@nick2432 Ah apologies, I should have linked our theming documentation. Please read https://design-system.learningequality.org/colors/
UiToolbar component is fully themed internally and can also accept theme tokens through the textColor prop.
"can also accept theme tokens through the textColor prop" means that textColor prop can accept for example $themeTokens.text or any other token and it will internally be used to set text color.
And "is fully themed internally" means that any hardcoded colors, for example 'white' here
https://github.com/learningequality/kolibri-design-system/blob/b41e4f61ea05bd4f01b08f28f4cc10abb63d2d0f/lib/keen/UiToolbar.vue#L205-L207
are removed in favor of using their corresponding theme token. For this particular 'white', it'd be 'tokens.surface'.
In both Kolibri and KDS, we never want to use hardcoded colors (unless we forget or some edge cases caused by technical limitations) to be able to support theming.
This means you will need to move away from CSS to Vue dynamic styling. In addition to the KDS resource I linked, it may be helpful to look into the Kolibri codebase as well to see how theme tokens are used.
It'd be also best to test your changes in Kolibri to make sure it works well. You could find few places where this component is used in Kolibri and preview them there. You could use Kolibri's devserver-with-kds command that will run your local Kolibri development server but with your local version of Kolibri Design System (KDS) https://github.com/learningequality/kolibri/blob/release-v0.16.x/package.json#L29 . You need to provide the command with the path to your local KDS folder. For example, if you have kolibri and kolibri-design-system directories next to each other, from the kolibri directory and virtual environment, you'd run yarn run devserver-with-kds --kds-path="../kolibri-design-system"
Hi @nick2432. I don't think so. Please preview your changes on the Kolibri development server to see if they work. In the issue, there's a list of components that you can find.
In regards to textColor, we want to achieve the following:
UiToolbar still accepts textColor, but newly we can pass any of the theme tokens listed in the KDS documentation I referenced rather than just 'black' or 'white' strings. Any color passed will then be used for text color. For example, here using the orange $tokens.document
<UiToolbar
:textColor=$themeTokens.document
...
/>
will cause the toolbar text to appear orange.
To achieve this, you will need to refactor several places using textColor prop inside the UiToolbar to use computed styles or classes (also referenced in the KDS documentation page)
I think it'd be helpful to spend some time studying how tokens are used by previewing the Kolibri and KDS codebase, and documentation page I linked. There is no such token as $themeTokens.textColor.
Closing since UiToolbar wont' really be exposed for public use anymore - we're gradually removing direct usage of all Ui.. components in Kolibri. It may possibly become KToolbar and on that opportunity refactored, however the API suggested here is obsolete. Details will be decided as I work on defining issues for the post-rebrand milestone focusing on the full theming support in the whole KDS.