spectrum-css
spectrum-css copied to clipboard
Certain sizing should be based on REM instead of PX for accessibility
Description
Update type relative sizing to be delivered in REM instead of PX.
Why do you need this feature or component?
To better support the accessible delivery of applications leveraging Spectrum CSS for both components and layout tokens.
@pfulton Would this likely require an update to the page package as well to define a base font size of which our values could be relative? And maybe adding a new variable: --spectrum-global-dimension-static-font-size-root mapping to the root px value then updating the static dimensions to rems.
body {
font-size: var(--spectrum-global-dimension-static-font-size-root);
/* equivalent to --spectrum-global-dimension-static-font-size-75, aka 12px at medium scale, 15px at large */
}
.spectrum {
--spectrum-global-dimension-static-font-size-50: 0.92rem;
--spectrum-global-dimension-static-font-size-75: 1rem;
--spectrum-global-dimension-static-font-size-100: 1.17rem;
/* etc... */
}