-
Notifications
You must be signed in to change notification settings - Fork 195
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.
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.
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.
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.
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.
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.
We noticed the need for a better mechanism within the project for managing deprecated components, as well as deprecations within the API of the published custom properties (which is an extension of the Spectrum design data system). During this refactoring work a few components will be marked as deprecated, and we'll be making changes to how deprecation are managed and communicated.
We're moving away from Gulp as a build system in favor of vanilla javascript and Node.js based task scripts. During this effort we're also reviewing all our PostCSS functions to see what is still needed. Some functions focused on support for Internet Exploder and polyfills that are no longer needed are being removed.
Regarding documentation, we're moving away from a custom solution in favor of an 'off the shelf' system based on the 11ty project.
The intent behind these changes is to make our stack more approachable to outsiders and easier to maintain.
Another ongoing change is to implement Storybook as supplemental documentation for all components. This allows us to implement a more detailed set of visual regression tests (VRT). A benefit here is to bring our test suite closer to the tests in Spectrum Web Components, which is a primary consumer of Spectrum-CSS packages, allowing for less overhead submitting updates to that project.
Related to the Storybook work, we're in progress on switching our VRT stack to use Chromatic for test automation.
If you need more detail on any of these efforts, please reach out to @castastrophe or pfulton