Support for responsive values in size props

[aweell]

Support for responsive values

Add responsive behavior to the size props following the different breakpoints defined in the system in order to provide different gutter, margin, or padding for the different responsiveSizes.

The implementation can follow the model:

vertical={{ mobileSmall: 'small', mobileMedium: 'medium', tablet: 'large', desktop: 'xlarge' }}

Reference: https://seek-oss.github.io/braid-design-system/components/Bleed#design-considerations

[aweell]

The naming used in the responsiveSizes can overlap with the naming variables used in other properties of the elements, the proposal for new names is:

Name	px	rem
mobile	0	0
tablet	720	45
desktop	1056	66
wide	1440	90

Translated to media queries:

/* Mobile */
/ No media query necessary for mobile breakpoint as it's effectively `@media (min-width: 0) { ... }

/* Tablet and up */
@media only screen and (min-width: 45rem) {...}

/* Desktop and up */
@media only screen and (min-width: 66rem) {...}

/* Wide and up */
@media only screen and (min-width: 90rem) {...}

[github-actions[bot]]

This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed.

[github-actions[bot]]

This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed.