fix: Rework variants to use nested objects.

[milesj]

Summary

Changes the former structure of:

'@variants': {
  size_sm: css.mixin('text-sm', {
    minWidth: css.unit(4),
    padding: {
      leftRight: css.var('spacing-sm'),
      topBottom: css.var('spacing-xs'),
    },
  }),
  size_df: css.mixin('text-df', {
    minWidth: css.unit(6),
    padding: {
      leftRight: css.var('spacing-df'),
      topBottom: css.var('spacing-sm'),
    },
  }),
  size_lg: css.mixin('text-lg', {
    minWidth: css.unit(8),
    padding: {
      leftRight: css.var('spacing-md'),
      topBottom: css.var('spacing-df'),
    },
  }),
},

To:

'@variants': {
  size: {
    sm: css.mixin('text-sm', {
      minWidth: css.unit(4),
      padding: {
        leftRight: css.var('spacing-sm'),
        topBottom: css.var('spacing-xs'),
      },
    }),
    df: css.mixin('text-df', {
      minWidth: css.unit(6),
      padding: {
        leftRight: css.var('spacing-df'),
        topBottom: css.var('spacing-sm'),
      },
    }),
    lg: css.mixin('text-lg', {
      minWidth: css.unit(8),
      padding: {
        leftRight: css.var('spacing-md'),
        topBottom: css.var('spacing-df'),
      },
    }),
  },
},

Since it's easier to read and naturally groups related variants.

Screenshots

Checklist

• [x] Build passes with yarn test.
• [x] Code is formatted with yarn format.
• [x] Tests have been added for my changes.
• [x] Code coverage for my change is 100%.
• [x] Documentation has been updated for my changes.