Update KDS Theme Tokens

[AlexVelezLl]

Description

Update KDS Theme Tokens to the latest specs in #775.

Issue addressed

Closes #775.

Before/after screenshots

Before	After

Changelog

• Description: Update Theme Tokens to the latest specs to comply material design specifications.
• Products impact: Updated API.
• Addresses: Update KDS Theme Token values #775.
• Components: -.
• Breaking: yes.
• Impacts a11y: no.
• Guidance: Please update all used v_* theme tokens using the mapping in Update KDS Theme Token values #775.

Steps to test

1. Look through components and see that there is no regression regarding colors
2. Check that all colors have been changed following the colors map in Update KDS Theme Token values #775.

Implementation notes

At a high level, how did you implement this?

Searched for all v_* colors and replaced all of them but gray.v_400 and gray.v_800 which remained the same.

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

[marcellamaki]

Thanks Alex, this looks great. I added just a couple of very small comments. I'm going to try testing this out with one of our custom themed plugins to confirm that everything is working, and then if everything looks good with that I'll approve

[marcellamaki]

I think these should both be v_200? Although looking at the docs, I'm not sure that this is meaningfully displayed to the user (not your changes, just in general I'm not sure how helpful it is or how much of a difference it makes)

[AlexVelezLl]

Whoops 😅 Fixed it!

Although looking at the docs, I'm not sure that this is meaningfully displayed to the user

Yes, I think the components specs pages are a little outdated. I just saw that in Appbars for example, we are still using the old palette for the examples.

[marcellamaki]

let's replace the

<p style="margin-left: 60px">
    …
</p>

with
<DocsColorBlock name="palette.green.v_400" />

(not strictly in scope of the palette changes, but I think there isn't really a need to skip the 400 value. I think the "break" was more about the larger gap in between)

[AlexVelezLl]

Done! I also updated the paragraph above "and segment colors into brightness levels, named <code>v_100</code>, <code>v_200</code>, <code>v_300</code>, <code>v_400</code>, <code>v_500</code>, <code>v_600</code>:"

[AlexVelezLl]

Thank you @marcellamaki! Just pushed the changes (:

[marcellamaki]

Looks great, thank you @AlexVelezLl.

When testing with our "cookiecutter" theme plugin, the current version of Kolibri develop breaks, and this fixes it! (Don't mind the ugly test colors :) )

Before	After

[AlexVelezLl]

Thank you @marcellamaki!