a11y-theme-builder icon indicating copy to clipboard operation
a11y-theme-builder copied to clipboard

[TB] Implement color dependency identification logic for a design system

Open aaronreed708 opened this issue 7 months ago • 0 comments

Problem/Concern

Issues #918 and #919 depend on Theme Builder having the ability to determine what dependencies will be affected when a color is modified or deleted AND suggesting, when possible and appropriate, alternative colors to be applied downstream in order to keep the design system compliant with WCAG.

When implemented, this solution should allow Theme Builder UI to determine:

  • [ ] what downstream components will be affected by the given color change in such a way that the UI can represent each to the user
    • [ ] meaningful text should also be determined by Theme Builder that can be shown to the user to be displayed along with the affected component
  • [ ] a color recommendation for EACH downstream component that will maintain compliance. The UI displayed downstream component should be able to load this recommendation for rendering
  • [ ] Each set of information should be available for WCAG AA and WCAG AAA

I assume that this code would live in the a11y-theme-builder-sdk, but that is not a requirement.

Proposed Solution

The result should allow for wireframe https://www.figma.com/design/Co8gYdDmE64Wv90eWy9FwE/Mentorship---Edit-Theme-Builder-Colors-and-Themes?node-id=218-23469&t=tdJfBS9zcfeEDALq-4 to be built and rendered

aaronreed708 avatar Jul 24 '24 20:07 aaronreed708