<LESS Variables>: breakpoint variables are different than CSS variables.

[pcanella]

I verified there's no existing issue for this bug.

• There are no existing issues

Current behavior

I have an issue where we'd love to use the native CSS variable breakpoints in our project (like --breakpoint-extra-large). However, CSS does not allow CSS vars to be used in media queries.

Anyway, I found we have LESS variables that are similar in https://github.com/eBay/evo-web/blob/main/packages/skin/dist/variables/variables.less

But the values are different than the CSS breakpoint vars (the names/values do not align with Playbook).

For reference, here's the Evo Web Playbook:

https://playbook.ebay.com/design-system/tokens/breakpoint

Note: it seems that LESS variables do not "convert" CSS variables to their assigned values, so just setting them like @breakpoint-large: var(--breakpoint-large) will work.

Expected behavior

No response

Package and version

No response

Device/OS/Browser info

No response

Steps to reproduce

1.
2.
3.
...

Relevant code block

No response

Additional context

No response

[LuLaValva]

Let's see if copilot has improved at all 🤞. I'll pick this up if we don't like what it does.

[ArtBlue]

We did not use CSS props when we were setting up the breakpoints during the Page Grid build for at least a couple of reasons I can remember:

1. CSS props can't be used in media/container queries so they're useless.
2. We did not want teams overriding them.

I don't think we need to deal with CSS props at all and the LESS vars are already there, so no changes are needed there.

Most likely, we need to close this issue and the PR. The Playbook values being out of alignment is the core issue here. Everything else works as it was originally intended.

If Playbook is out of alignment (likely, checking...), it simply needs to be updated.

If Evo CSS is out of alignment, we need a feature request to change both the SASS and LESS vars, and that should come with a full fledged testing of the responsive implications.

[ArtBlue]

For reference, this is how we use the SASS vars in breakpoints:

@media (min-width: variables.$screen-size-SM) {
    nav.breadcrumbs {
        margin: 16px 0;
    }
}