spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard

Certain sizing should be based on REM instead of PX for accessibility

Open Westbrook opened this issue 4 years ago • 1 comments

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.

Westbrook avatar Jun 08 '21 23:06 Westbrook

@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... */
}

Responsive typography

castastrophe avatar Dec 13 '22 15:12 castastrophe