Breakpoint sizes are inconsistent with sizing elsewhere?

[altano]

Let's say I have a div and I want it to expand to 64rem, and if it's 64+rem I want it to have a different color. I would have to currently do this:

const styles = css({
  maxWidth: "5xl",
  color: {
    base: "red.100",
    lg: "red.500", 
  }
});

The problem here is that lg means 64rem in a media query breakpoint context, but for maxWidth you have to specify 5xl to get the same value. (1) this can be confusing and hard to maintain and (2) sizings don't always match up to breakpoints (e.g. there are sizings for 28rem and 32rem but breakpoints at 30rem and 48rem).

Is this intentional? Would it make more sense to either line breakpoints up with sizings (and just have more of them at the large end) or maybe even just not use the same tokens for media query breakpoints?

[altano]

I guess an alternative is to know that sizes are contextual and if you want them to be consistent in multiple contexts, use variables:

const styles = css({
  maxWidth: "var(--breakpoints-lg)",
  color: {
    base: "red.100",
    lg: "red.500", 
  }
});

[segunadebayo]

You can also use maxWidth: 'breakpoint-lg'