[Proposal]: Variable Breakpoints

[jd-carroll]

What are people's thoughts around making breakpoint variables?

If amenable, I think the solution would be fairly straight forward. The breakpoints.css file could be updated to something like:

.radix-themes {
  --breakpoint-xs: 520px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1640px;
}

@custom-media --xs (min-width: var(--breakpoint-xs));
@custom-media --sm (min-width: var(--breakpoint-sm));
@custom-media --md (min-width: var(--breakpoint-md));
@custom-media --lg (min-width: var(--breakpoint-lg));
@custom-media --xl (min-width: var(--breakpoint-xl));

Long term, my hope is that Container could move from the following sizes:

.radix-themes {
  --container-1: 448px;
  --container-2: 688px;
  --container-3: 880px;
  --container-4: 1136px;
}

To something like:

.radix-themes {
  --container-xs: var(--breakpoint-xs);
  --container-sm: var(--breakpoint-sm);
  --container-md: var(--breakpoint-md);
  --container-lg: var(--breakpoint-lg);
  --container-xl: var(--breakpoint-xl);
}

[andy-hook]

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.

[jd-carroll]

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.

[jd-carroll]

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