Ongoing updates and refactoring

The CSS project has taken on a set of updates and refactors of the last several months. The underlying motive of the work was to align with changes to Spectrum's token system. This page briefly describes all the efforts that are underway.

Token migration

Spectrum moved to a new system for capturing and sharing design data. In this new system, the hope is to escape trying to maintain a value for all aspects of each component individually, due to the way adding color theme, scale, variants, and interaction states causes an exponential explosion of data. The new system relies more on share global and semantic values. This requires re-mapping many of the custom properties used in implementing CSS components.

Support for overrides

Part of the CSS refactoring adds more ability to override custom properties within a component. The overrides rely on establishing a fallback chain when properties are assigned a value. As an example, the code below allows for WHCM and a customization to be applied, with the default Spectrum value as the final fallback.

background: var(--highcontrast-background-color, var(--mod-background-color, var(--spectrum-background-color)));

Note the --mod prefix is used above to indicate a modification (or customization) to the component. This code is a general example. We intend to add more specific documentation on what customizations are supported per-component as the refactoring takes place.

T-shirt sizes

. . . todo . . .

Windows High Contrast Mode (WHCM)

. . . todo . . .

Design updates

. . . todo . . .

Component deprecations

. . . todo . . .

Build and docs stack change

. . . todo . . .

Storybook implementation

. . . todo . . .

Switching to Chromatic

. . . todo . . .

If you need more detail on any of these efforts, please reach out to @castastrophe or pfulton