Use variable in cunningham-tokens.ts

[AntoLC]

Bug Report

When we build the theme, cunningham-tokens.ts is generated, the problem is that is gives directly the hex value of the elements.
Users complains that is a problem when they want to override theme at runtime, because overriding the global colors will not work because cunningham-tokens.ts does not use directly the global color.

https://github.com/suitenumerique/docs/blob/7475b7c3bc7a86a6500e3b07793b9dcaa1fa0a3e/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts#L466-L473

Solution

It would be nice to find a way to have cunningham-tokens.ts using tokens instead of directly the exa values, like it is in the cunningham-tokens.css: https://github.com/suitenumerique/docs/blob/7475b7c3bc7a86a6500e3b07793b9dcaa1fa0a3e/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css#L1491-L1503

---

That:
https://github.com/suitenumerique/docs/blob/7475b7c3bc7a86a6500e3b07793b9dcaa1fa0a3e/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts#L466-L473

Should gives:

...
            brand: {
              primary: 'var(--c--globals--colors--brand-550)',
              'primary-hover':  'var(--c--globals--colors--brand-650)',
              secondary:  'var(--c--globals--colors--brand-700)',
              'secondary-hover': 'var(--c--globals--colors--brand-750)',
              tertiary: 'var(--c--globals--colors--brand-750)',
              'tertiary-hover':  'var(--c--globals--colors--brand-800)',
            },
...