Breakpoint design tokens are unusable when exported as ready-to-use CSS custom properties

[markus-walther]

https://drafts.csswg.org/css-variables/#defining-variables makes it clear that CSS custom property values cannot be concatenated with fixed strings such as 'px'. The workaround with calc(...) is way too cumbersome.

Hence

:root {
    --breakpoints-base-xxl: 1440;
    --breakpoints-base-xl-max: 1439.98;
    --breakpoints-base-xl: 1200;
    --breakpoints-base-lg-max: 1199.98;
    --breakpoints-base-lg: 992;
    --breakpoints-base-md-max: 991.98;
    --breakpoints-base-md: 768;
    --breakpoints-base-sm-max: 767.98;
    --breakpoints-base-sm: 576;
    --breakpoints-base-xs-max: 575.98;
    --breakpoints-base-xs: 0;
}

all don't work in real CSS media queries as-is.

Could they instead be exported with 'px' suffixed?

[GianlucaGuarini]

These values were never meant to be used directly in css. You should use the media queries instead https://axa-ch.github.io/design-tokens/?path=/story/media-queries--media-queries

Storing these values as plain numbers improves their interoperability with other tools like Tailwind or MUI since they can be directly linked via javascript to the corresponding configuration files.

The direct use of these variables is not recommended, could you please explain a use case where we might patch the CSS export?

[markus-walther]

Yes, as per your request the unchanged design token export as CSS custom properties is included on every page in axa.ch in global CSS. I started trying to actually use it - and would like to recommend that in the Pod Developer's Guide, then ran into the problem in this issue...

[markus-walther]

The immediate use case is AEM components, whose styling would use CSS directly.

[GianlucaGuarini]

We might consider exporting these variables with px values avoiding breaking changes:

--breakpoints-xxl: 1440px;
--breakpoints-xl: 1200px;
--breakpoints-lg: 992px;
--breakpoints-md: 768px;
--breakpoints-sm: 576px;
--breakpoints-xs: 0;

For this we might add just another json file here https://github.com/axa-ch/design-tokens/tree/main/tokens/platforms/web/breakpoints

[markus-walther]

Unfortunately the spec currently implemented by browsers does not allow custom property values in @media queries, cf. https://www.w3.org/TR/css-variables-1/#using-variables.

We have to wait till https://drafts.csswg.org/css-env-1/ is implemented widely in browsers to finally ditch CSS preprocessors here.

Sorry for the noise, mea culpa.