search

adobe / spectrum-css

The standard CSS implementation of the Spectrum design language.
http://opensource.adobe.com/spectrum-css/
Apache License 2.0
1.18k stars 194 forks source link

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

Open Westbrook opened 3 years ago

Westbrook commented 3 years ago

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.

castastrophe commented 1 year ago

@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