Overview
After implementing Radio error states (T363515), there's a need to create a new border color token: @border-color-error-active and a component-level 4px border width token.
We currently use @border-color-destructive-active (Red800) because @border-color-error-active doesn't exist in our design system. When this token becomes available, we can replace references to @border-color-destructive-active token with @border-color-error-active in Radio and Checkbox.
We need to create the @border-color-error-active in both Light and Dark modes, using the following tokens:
- Light mode: Red700
- Dark mode: Red700
NOTE: there is no need to create a different width for the focus state since the error focus uses the blue color.
Acceptance Criteria
Design:
- Decide on the need for this new token
- Include the token as Figma variable and update it in the Radio and Checkbox in Figma
Code:
- Create the new @border-color-error-active token in code using
- Light mode: Red700
- Dark mode: Red700
- Replace @border-color-destructive-active with @border-color-error-active in Radio.