@johnstonphilip Thanks for getting this issue started! You've provided a wonderful breakdown, which will be helpful as we consider the more difficult challenges of Global Styling 😅

One approach to deal with this might be to make the value of the style an object, with each key being the max-screen-width where that value would be used. Something like this:

That's a great approach. I've seen this strategy applied in various Sass implementation. A similar strategy would be to use Array values, like what's happening with Theme spec.

The tricky part is that without context of why, the values feel very cryptic. The Array values of Theme Spec feel super cryptic. Your Object example less so, as the px values provide some ideas.

This leads me nicely into another aspect of designing the Global Styling system.

The system's foundations have to work/render as expected. On top of that, the code used to customize/define these styles must feel intuitive + easy to write as well

🤗

The reason theme specs don't use this object form is that breakpoints are the same for every property. Having the numbers as keys to every responsive value for every responsive property would be pretty unnecessary data duplication and make it harder to change the breakpoints without changing the values.

@epiqueras Thanks for shedding some light on that. It looks like breakpoints are added in a breakpoints array in the Theme spec here.

To clarify my understanding from "Skipping breakpoints", adding a new breakpoint after-the-fact would require adding a new value to each propertty's breakpoints array, and essentially defaulting those to null. Is that correct?

For example, if my breakpoints array was this

{
  breakpoints: [
    '40em', '56em', '64em',
  ],
}

And my property's breakpoint settings were this:

width: [10%, 15%, '25%'],

But then I update my breakpoints array to have a new breakpoint after-the-fact like this:

{
  breakpoints: [
    '10em', '40em', '56em', '64em',
  ],
}

My property's breakpoint settings would need to be updated as well like this:

width: [null, 10%, 15%, '25%'],

Is that accurate?

Yes, but we could smoothly interpolate the missing value until the user fills it.