[Proposal]: Variable Breakpoints about themes HOT 3 CLOSED

Agree with the request, though the biggest blocker is native @custom-media support. Without it we'd need to provide a build configuration / step for compiling the polyfill, which prompts DX and technical questions.

from themes.

Not sure I follow, if you try building themes with the breakpoints.css as listed above I believe the @custom-media correctly picks up the breakpoint variables.

For example, this:

@media (min-width: 520px) {
    .rt-AvatarRoot.xs\:rt-r-size-1 {
      --avatar-size: var(--space-5);
      border-radius: max(var(--radius-2), var(--radius-full));
      --avatar-font-size-one-letter: var(--font-size-2);
      --avatar-font-size-two-letters: var(--font-size-1);
      letter-spacing: var(--letter-spacing-1);
    }

Becomes this:

@media (min-width: var(--breakpoint-xs)) {
    .rt-AvatarRoot.xs\:rt-r-size-1 {
      --avatar-size: var(--space-5);
      border-radius: max(var(--radius-2), var(--radius-full));
      --avatar-font-size-one-letter: var(--font-size-2);
      --avatar-font-size-two-letters: var(--font-size-1);
      letter-spacing: var(--letter-spacing-1);
    }

But I have been very wrong before, so I may likely be missing something.

from themes.

Wrong yet again...

Turns out this isn't valid syntax:

@media (min-width: var(--breakpoint-xs)) {

There is a proposal to support a version of this syntax:
https://drafts.csswg.org/css-env-1/

But alas, I understand your comment now 😅

Closing for now, as any build changes to support this are beyond my original intent

from themes.