How to use named space values with breakpoints?

[fwextensions]

I've been using named values in the space scale like:

...
space: { sm: "1rem", md: "2rem", ... }
...

That's been working fine. Then I wanted to add different values for different breakpoints, and tried to do this:

...
space: { sm: ["1rem", "2rem"], md: ["2rem", "4rem"], ... }
...

I thought it was working initially, as I think I was editing the wrong item in the arrays. But it looks like it's not doing the right thing, which would be to pick the value based on the current breakpoint, just like when supplying an array to an sx value, like { py: [10, 20] }.

What it seems to be doing instead is repeating the property with each of the values from the array, which seems pretty unhelpful. Why would you want to add a property and then immediately override it again with a different value?

Is this a bug? Is there any way to get the desired behavior of selecting the named space value based on the current breakpoint?

[hasparus]

Hey @fwextensions! Thanks for the issue.

Responsive tuples can be passed in sx prop when defining styles, but not when defining the theme, because the theme allows arrays as nested scales, and it's not possible to discern between them.

{
  colors: {
    gray: ['#111', '#333', '#aaa', '#eee'] // here a scale with gray.0, gray.1, gray.2, and gray.3
  },
  space: {
    sm: ['1rem', '2rem'] // here, a responsive tuple... or a scale with sm.0, and sm.1 design tokens?
  }
}

If you're sure you'll always want to use a value like this you can export it use it when defining styles.

export const Space = {
  sm: ["1rem", "2rem"],
  md: ["2rem", "3rem"],
};

<div sx={{ p: Space.sm }} />

[fwextensions]

I'm realizing that one advantage of using CSS variables is that you can edit the variable name in devtools to try out a different spacing size without having to figure out what the equivalent px or rem value is. You can just change var(--md) to var(--lg), for example, to see the effect.

You can also use different tokens for different breakpoints, like mb: ["md", "lg"]. If a responsive tuple was returned for each of those tokens, that would require some additional handling to extract the values from the arrays, but it works naturally with CSS variables.

[hasparus]

Well, if it's used like p: "sm" rather than p: "sm.1", then the array is likely not being used as a scale.

So scales can also be objects, and we support reading sm.__default as sm for the cases where you want to have primary primary.100 and primary.900.

I really like you CSS Variables solution.

[fwextensions]

So scales can also be objects, and we support reading sm.__default as sm for the cases where you want to have primary primary.100 and primary.900.

True, but if there's no __default key in the scale (as there wasn't in my case), then it currently adds one property for every item in the scale, or a joined string of all of them if it's a negative token. In that case, I think it should just ignore the whole property and log an error, or maybe even throw in dev mode.

[hasparus]

Multiple declarations of the same property in one rule are often used for backwards compatibility with old browsers

max-width: 25em; // <- will work everywhere `ch` is not supported
max-width: 60ch;

so while it's not entirely useless, it was definitely unintended. Logging an error or throwing in dev mode sounds good. @lachlanjc what do you think?

[lachlanjc]

Is that what #1263 is?

[fwextensions]

FWIW, this is the code I'm currently using, with a simple class added to track and encapsulate the variable creation, so it's easier to do in multiple places.

class Variables {
  constructor() {
    this.vars = new Map();
  }

  add(name, value) {
    const varName = `--${name}`;
    const varCall = `var(${varName})`;
    this.vars.set(varName, value);

    return varCall;
  }

  object() {
    return Object.fromEntries(this.vars);
  }
}

const remUnits = 1.5;
const vars = new Variables();

const space = [
  ["none",   [0,   0]],    // 0        0
  ["xs",     [.25, .5]],   // 3.75px   9px
  ["sm",     [.5,   1]],   // 7.5px    18px
  ["md",     [1,   2]],    // 15px     36px
  ["lg",     [2,   3]],    // 30px     54px
  ["xl",     [3,   5]],    // 45px     90px
  ["xxl",    [4,   8]],    // 60px     144px
]
  .reduce((result, [key, values]) => {
    const negKey = `neg-${key}`;
    const cssValues = values.map((value) => `${value * remUnits}rem`);
    const negativeCSSValues = cssValues.map((value) => `-${value}`);

    result[key] = vars.add(key, cssValues);
    result[negKey] = vars.add(negKey, negativeCSSValues);

    return result;
  }, {});

const fontSizes = [ ... ];
fontSizes.body = vars.add("body", [fontSizes[4], fontSizes[6]]);

const styles = makeStyles({
  root: {
    ...vars.object(),
  },
  ...