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.

With the token changes mentioned above requiring we touch all components, we're also taking the time address a lot more changes, updates, and improvements. Some of those included efforts are listed below.

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

For a while now Spectrum has been evaluating and adding a 't-shirt size' option for certain components within the system. This is being implemented for components where a specification for t-shirt sizes is ready.

Windows High Contrast Mode (WHCM)

As noted in the Support for overrides section, component implementations are being validated in WHCM. Any outstanding problems are being corrected, with a --hicontrast- custom property prefix taking first priority in property declarations. This will allow more flexibility for downstream implementors to tweak WHCM settings on a per-app basis.

Design updates and Spectrum 2

The last year or two has thrown a lot churn at the Spectrum team, which led to some design updates getting missed in CSS. Part of the DoD for the current refactoring is catching up on all outstanding design work.

Spectrum is current studying a "Spectrum 2" refresh, though there won't be a separate release of Spectrum to implement this refresh. Instead, our refactoring is in part the "pre-work" that will ensure upcoming changes to the overall design of the system can be rolled out as updates, mainly through custom property changes.

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