Update graphics to the latest state of the design system

[Dierk]

wait for "go" from @affolter

[affolter]

So cool to see the progress on Kolibri. I have also made some small steps. I updated the basis for the "new" design. The naming and also colors match with Figma. It is located in the " design-updates " branch.

[Dierk]

cool. The branch is merged onto main and pushed. I now consider updating the overview page that lists and uses all the design elements.
We can now either delete the design-updates branch or keep it open for future work (in which case we have to rebase the branch before applying more changes).

[Dierk]

update
src/examples/style/styleOverview.html
src/examples/style/useStyles.js

[Dierk]

I wonder if in

Kolibri/docs/src/kolibri/style/kolibriStyle.js

Line 38 in e9f0af1

*/

we should define accentColor etc. in terms of primaryAccent etc.

[affolter]

I wonder if in

Kolibri/docs/src/kolibri/style/kolibriStyle.js

Line 38 in e9f0af1

*/

we should define accentColor etc. in terms of primaryAccent etc.

Very good and interesting point. For simplicity and unity, you are right. In terms of Kolibri the accentColor as primaryAccent will work for our cases. I was thinking about a situation in which you would actually like to have a separate variable like accentColor. Let's say normally accentColor is equal primaryAccent but what if the primaryAccent doesn't work visually in a specific situation?

But I am happy with your suggestion as well.

[Dierk]

the new colors are now visible under https://webengineering-fhnw.github.io/Kolibri/src/examples/style/styleOverview.html

I guess we should also show the fonts in a similar way.

[affolter]

the new colors are now visible under https://webengineering-fhnw.github.io/Kolibri/src/examples/style/styleOverview.html

I guess we should also show the fonts in a similar way.

Nice, that's cool. Yes, the fonts would be useful also. I wish I could help you, but I could only help on Sunday at earliest this week :-/