refactor(tokens): move less variables to css props

[saiponnada]

Fixes #1992, #2138

• This PR contains CSS changes
• This PR does not contain CSS changes

Description

Refactored following less variables to css variables

• @font-size-*
• @font-size-{variant}
• @font-weight-*
• @spacing-*

Left the rest(@_screen-size-, @_page-grid-, @marketsans-*) as the first two are constants and we don't want to allow overrides and the later due to restriction in css vars.

Notes

• For font-size, we have flexibility with defining sizes(12, 14, 16...) and variants(like small, med, large..). It makes perfect sense using it in less. Assuming components use only variants, I personally feel there is no advantage of having that flexibility in css vars because its just a 1:1 mapping in tokens file. Besides that we will be sending all these tokens (more lines of code). While review, please state your preference to leave both as is or to simplify it. If we simplify it we need to identify the right variant tokens for combobox and select which are currently using --font-size-18

Checklist

• I verify the build is in a non-broken state
• I verify all changes are within scope of the linked issue

• I regenerated all CSS files under dist folder
• I tested the UI in all supported browsers
• I did a visual regression check of the components impacted by doing a Percy build and approved the build
• I tested the UI in dark mode and RTL mode
• I added/updated/removed Storybook coverage as appropriate

[ianmcburnie]

One thing worthy of discussion is whether we want to continue with the token shorthand mixin that we were using for colors. or move away from that, e.g.

.color-token(filter-menu-item-foreground-color, color-foreground-primary);

FYI the first parameter here is intended as a component-level override (e.g. if we needed a version of the component on the page that needed to differ from the colour system). I also use this on MIND and Makeup to easily apply different non-ebay colors. There are probably different (and better?) ways to achieve the same goal though.

Here's example of the component-level API documented for switch: https://opensource.ebay.com/skin/#switch-variables

[saiponnada]

One thing worthy of discussion is whether we want to continue with the token shorthand mixin that we were using for colors. or move away from that

Team has discussed internally and decided to continue with the token mixin the way we are using for now. Need to have a separate discussion later on how we would like to define or expose API for component level by aligning with skin's long term vision.

[ArtBlue]

Looks good. Assuming we resolve the conflict in the branch and things still look good, this is approved.