va-checkbox: add normalized font size token to label #1513
Conversation
| --vads-input-suffix-color-text-on-light: #757575; | ||
| --vads-input-tile-background-active-on-light: rgba(0, 94, 162, 0.1); | ||
| --vads-input-tile-border-active-on-light: #005ea2; | ||
| --vads-input-tile-border-on-light: rgba(27, 27, 27, 0.03); |
There was a problem hiding this comment.
All of these tokens are already being imported globally for the web-component files so just doing a little cleanup.
| } | ||
|
|
||
| .va-checkbox__container--tile { | ||
| border-radius: 0.25rem; | ||
| background-color: var(--vads-input-background-color-on-light); | ||
| border: 2px solid var(--vads-input-tile-border-override); | ||
| border: 2px solid #c9c9c9; |
There was a problem hiding this comment.
This was assigned a token value originally but that token name & color is not one that exists in the VA color palette. I'm reverting it back to the hex value because it's confusing to have a new token created and assigned just specifically in a single component.
If we want to create a semantically named token for this value #c9c9c9 which is gray-20 in the USWDS system, then we should create a follow-up ticket to do that in the CSS-Library.
But I'm not sure that we really need this to be a VA token. If the original accessibility issue gets fixed upstream, we will remove this style and import again from the USWDS checkbox package. So a new VA token for #c9c9c9 may never be needed outside of this specific use case.
There was a problem hiding this comment.
A ticket for a #c9c9c9 token was already created 🚀
Chromatic
https://checkbox-label-font-size--65a6e2ed2314f7b8f98609d8.chromatic.com
Description
I noticed that the label font size was calculating to
16pxbut we want it to be the normalized font size (1.06rem/16.96px) as verified in Figma.Closes - No ticket
Screenshots
before
after
QA Checklist
Acceptance criteria
Definition of done