Update Semantic Color Tokens in the Flagship App - Implementation

[ajsarkar28]

Monthly Update for Stakeholders

Date	Progress & Key Accomplishments	Issues/Risks/Blockers
9/9/24	Not started
9/17/24	Not started

---

Project Objective:
The Design System team has built new Semantic Color tokens as part of department-of-veterans-affairs/va-mobile-library#78. This Epic covers the Flagship Global team implementing the new Semantic Color Tokens in the Global sections of the app. The Flagship team will give feedback on the process to the Design System team to help them improve the Design System.

Suggested process

Step 1: Designer updates Figma with semantic tokens.

1. In the Flagship Library, the designer updates the components with semantic tokens.
   • The DS team recommends splitting up the work by section (Alerts and progress, Buttons and links, etc.) and tackling the smallest components first. This will prevent any accidental overrides in the larger components.
   • Each section should be edited in its own branch.
     • Branch should be reviewed/approved by Jessica.
     • If an appropriate semantic token does not exist, notify the DS team and they will provide a recommendation or next step.
2. In the shipped files, the designer updates the components.
   • Each file should be edited in its own branch.
     • After updating the components, the designer should verify that there are no primitive tokens used in the shipped files.
     • If an appropriate semantic token does not exist, notify the DS team and they will provide a recommendation or next step.
     • Dark mode can then be removed from the shipped files.
     • Designer will ensure that color contrast meets minimum requirements in light/dark mode.
     • Branch should be reviewed/approved by Jessica.
3. Designer archives Foundations Library.
4. Designer removes Colors page from Flagship Library.

Step 2: Engineer updates mobile app based on Figma mockups.

• If a Figma mockup does not exist for a screen in the app, the engineer will need to consult with a designer.

Step 3: Designer completes visual QA in the mobile app.

• If there are issues with how the semantic tokens appear in light/dark mode in the app, reach out to Jessica (and possibly Brea).

[jennb33]

12/19/2024: Per Ryan we can de-prioritize the Semantic Color token update work until we know "the right way" to implement in Figma. Removing from Sprint 8, will reschedule.