Responsive Context
a means of providing different rendering behavior based on the screen resolution
medium
The possible breakpoints that could affect border, direction, gap, margin, pad, and round. The default values help to optimize content for mobile, tablet, and computer.
{
"small": {
"value": 768,
"borderSize": {
"xsmall": "1px",
"small": "2px",
"medium": "4px",
"large": "6px",
"xlarge": "12px"
},
"edgeSize": {
"none": "0px",
"hair": "1px",
"xxsmall": "2px",
"xsmall": "3px",
"small": "6px",
"medium": "12px",
"large": "24px",
"xlarge": "48px"
},
"size": {
"xxsmall": "24px",
"xsmall": "48px",
"small": "96px",
"medium": "192px",
"large": "384px",
"xlarge": "768px",
"full": "100%"
}
},
"medium": {"value": 1536},
"large": {}
}