In order to maintain visual consistency across our application and streamline our development process, we aim to create design token theme color-aligned Tailwind classnames. This follows our recent update of the Tailwind config brand colors to point to the design token brand colors. By aligning Tailwind classnames with our design tokens, we ensure a unified theme across our application and further bridge the gap between design and code as well as enable the brand evolution.
The task involves updating the Tailwind configuration to include new classnames that align with our theme color design tokens. This includes categories such as background, text, icon, border, overlay, shadow, primary, error, warning, success, and info. Existing classes with the same names should be updated to ensure alignment. This setup will pave the way for the subsequent replacement phase.
Acceptance Criteria
New design token theme-aligned Tailwind classnames have been created for all relevant categories.
Existing Tailwind classnames that match the new ones have been updated to align with the design tokens.
The Portfolio UI remains unaffected by these changes, ensuring no negative impact on the user experience.
Description
In order to maintain visual consistency across our application and streamline our development process, we aim to create design token theme color-aligned Tailwind classnames. This follows our recent update of the Tailwind config brand colors to point to the design token brand colors. By aligning Tailwind classnames with our design tokens, we ensure a unified theme across our application and further bridge the gap between design and code as well as enable the brand evolution.
Figma file mapping: https://www.figma.com/file/dUYfx3uDfibWXjClY5NxNb/Portfolio-Components?type=design&node-id=3130%3A52988&mode=design&t=zqL2kTCnDn1VlRwV-1
Technical Details
The task involves updating the Tailwind configuration to include new classnames that align with our theme color design tokens. This includes categories such as background, text, icon, border, overlay, shadow, primary, error, warning, success, and info. Existing classes with the same names should be updated to ensure alignment. This setup will pave the way for the subsequent replacement phase.
Acceptance Criteria