How to use "sizes" definition

[rgreenhalge]

I am trying to understand how the theme.sizes object should be used. The theme spec documentation indicates that values defined under "sizes" will be used for width and height properties (among others), but I have not figured out how to use it that way.

The only specific example I have found is the theme.sizes.container reference, which defines a key of "container" and also does not seem to support an array.

I was expecting to define an array of sizes similarly to the "space" array, and then use those for height/width values, something like this:

myTheme: {
  sizes: {
    height: ['2rem', '3rem', '4rem'], 
    container: ['100%', null, '55rem', '70rem'],  // responsive container max width would be nice too
  },
  forms: {
    input: {
      height: [1, 2, 3]  // input gets bigger with bigger viewport 
    }
  }
}

Can someone point me to an example or documentation of how the sizes object should be defined and used?

[rgreenhalge]

I figured it out, but this still doesn't support breakpoints the way I expected.

sizes: {
  baseHeight: '3rem'
},
forms: {
  input: {
    height: 'baseHeight'
  }
}