Update components to use token values

[tarantilis]

https://taskman.eionet.europa.eu/issues/160247

All the border colors that had hex number or a color token are replaced.
https://62713c57bcbdf4004a3d99b8-ubqdlqnylz.chromatic.com/

Some things to discuss before merging to finalize borders:

• There are still a lot of semantic border color tokens in site.variables, if we want them removed now is the time (@strongBorderColor, @internalBorderColor, etc.). Some of them are used a lot in the code, mostly for things that we didn't need to override (@solidBorderColor) so deleting them all might be time consuming.
• Many components have custom rbga colors assign to their own border color tokens. (input.variables, button box shadows, etc.) If we need them gone, I should create a full list and ask the ux team.
• We have to create a white variable or override the (@whiteBorderColor: rgba(255, 255, 255, 0.1); We have white borders in the design (header menu items).
• For the checkbox border (main.variables in extras) the design team prefers if we don't assign the primary border color token, I left them as they were for now for you to check

PS: Latest commit: refactor(Borders): Update segment and label is separated because I took the liberty to assign the background color of the label to the border and changed the semantic dash border of the segment to a bit different token

[github-actions]

👋 @tarantilis

To generate the Storybook and Docusaurus websites, write comment with:

@eea-jenkins build all

To generate only Storybook write comment with:

@eea-jenkins build storybook

To generate only Docusaurus write comment with:

@eea-jenkins build docusaurus

[tarantilis]

@eea-jenkins build storybook

[jenkins-ci-eionet-europa-eu]

✔️ Storybook:

https://62713c57bcbdf4004a3d99b8-ubqdlqnylz.chromatic.com

🚀 @tarantilis