small fontSize rename, and 0-indexing arrays?

Example from Readme, regarding theme:

export default {
  ...
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
  fontSizes: [16, 20, 24, 32],
  text: {
    h1: {
      fontSize: 3, // this is 24px, taken from `fontSize` above
    },
    p: {
      fontSize: 1, // & this is 16px, taken from `fontSize` above
    },
  },
}

Might be an idea to rename some fields to:

export default {
   ...
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512], // in pixels, not em
  fontSizes: [16, 20, 24, 32], // in pixels, not em
  text: {
    h1: {
      fontSizeIndex: 2, // self-explaining, so no doc needed
    },
    p: {
      fontSizeIndex: 0,
    },
  },
}

So that you can’t confuse the index with a size, and to 0-index it since people are familiar with that when dealing with arrays. The following example in the Readme seems to be using 0-indexing, so either case might just be a Readme remnant.

<Text
  sx={{
    color: 'primary',
    padding: [1, 3], // [4px, 16px] from theme!
  }}
>
  Themed color!
</Text>

Alternatively also rename: padding → paddingIndex.

[nandorojo]

0-index is correct. There’s no magic, it just checks theme[key][value]

[nandorojo]

Oh yeah the readme is probably picking the wrong index, we can fix that