fix(tokens): import change of cyan/gold to teal/yellow

[mcoker]

fixes #62

[mcoker]

@lboehling after exporting from figma, I'm still seeing these cyan/gold tokens generated - looks like the nonstatus "base" colors are still referencing the old name? The left side is the file name and right side is the token declaration that contains "cyan" or "gold".

tokens-dark.scss:  --pf-t--global--dark--color--nonstatus--cyan--300: var(--pf-t--color--teal--10);
tokens-dark.scss:  --pf-t--global--dark--color--nonstatus--cyan--200: var(--pf-t--color--teal--20);
tokens-dark.scss:  --pf-t--global--dark--color--nonstatus--cyan--100: var(--pf-t--color--teal--30);
tokens-dark.scss:  --pf-t--global--dark--color--nonstatus--gold--300: var(--pf-t--color--yellow--10);
tokens-dark.scss:  --pf-t--global--dark--color--nonstatus--gold--200: var(--pf-t--color--yellow--20);
tokens-dark.scss:  --pf-t--global--dark--color--nonstatus--gold--100: var(--pf-t--color--yellow--30);
tokens-dark.scss:  --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--cyan--200);
tokens-dark.scss:  --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--cyan--200);
tokens-dark.scss:  --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--cyan--100);
tokens-dark.scss:  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--gold--200);
tokens-dark.scss:  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--gold--200);
tokens-dark.scss:  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--gold--100);
tokens-dark.scss:  --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--cyan--200);
tokens-dark.scss:  --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--cyan--200);
tokens-dark.scss:  --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--cyan--100);
tokens-dark.scss:  --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--gold--200);
tokens-dark.scss:  --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--gold--200);
tokens-dark.scss:  --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--gold--100);
tokens-default.scss:  --pf-t--global--color--nonstatus--cyan--300: var(--pf-t--color--teal--40);
tokens-default.scss:  --pf-t--global--color--nonstatus--cyan--200: var(--pf-t--color--teal--30);
tokens-default.scss:  --pf-t--global--color--nonstatus--cyan--100: var(--pf-t--color--teal--20);
tokens-default.scss:  --pf-t--global--color--nonstatus--gold--300: var(--pf-t--color--yellow--40);
tokens-default.scss:  --pf-t--global--color--nonstatus--gold--200: var(--pf-t--color--yellow--30);
tokens-default.scss:  --pf-t--global--color--nonstatus--gold--100: var(--pf-t--color--yellow--20);
tokens-default.scss:  --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--cyan--200);
tokens-default.scss:  --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--cyan--200);
tokens-default.scss:  --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--cyan--100);
tokens-default.scss:  --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--gold--200);
tokens-default.scss:  --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--gold--200);
tokens-default.scss:  --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--gold--100);
tokens-default.scss:  --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--cyan--300);
tokens-default.scss:  --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--cyan--300);
tokens-default.scss:  --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--cyan--200);
tokens-default.scss:  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--gold--300);
tokens-default.scss:  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--gold--300);
tokens-default.scss:  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--gold--200);

Not sure if this is the right place in figma, but confirmed the nonstatus base tokens look like they're still referencing cyan/gold here

[lboehling]

@mcoker fixed!

[lboehling]

lgtm!! 🌈

[mcoker]

@lboehling the way the font-family names are defined in the figma tokens are a bit different from the way they're defined in core. The difference is just that there are spaces in the name in figma, and in core there are no spaces:

• Figma - "Red Hat [Text/Display/Mono] VF"
• Core - "redhat[text/display/mono]vf"

It's really easy to fix core if the tokens in figma need the spaces, but wanted to check and see first if they need to be defined that way or if we could define them with no spaces?

[lboehling]

@mcoker yeah, if that's an easy fix, can we fix core? Figma automatically adds those spaces when the font files are pulled in, so I had to match the spaces in the string variable for it to match!

[srambach]

LGTM

[mcoker]

Closing, we'll run a new export to pick up any add'l changes.