Add semantic color tokens to BaseStyles #1880
Conversation
robinmetral
requested review from
connor-baer
and removed request for
a team
🦋 Changeset detectedLatest commit: a7f0dd2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
robinmetral
changed the title
All colors are now named directly as their aliases. The 4-part token structure only serves as a mental model but is omitted in code (it will be detailed in documentation). This makes things more consistent, reduces the number of variables in global styles, and aligns closely to Figma.
| --cui-bg-strong: #000000; | ||
| --cui-bg-strong-hovered: #000000; | ||
| --cui-bg-strong-pressed: #000000; |
There was a problem hiding this comment.
How will users perceive/differentiate these different states?
There was a problem hiding this comment.
In this case it looks like there is no differentiation. This could for instance be used in the ODL black buttons. From a standards perspective (WCAG 2.1 AA), nothing states that hovered or pressed states should be visually different from a UI element's idle state.
So we fall back to a design question—I'm happy to raise this with design again in the context of ODL (which introduces a lot of these black and white styles) but in the meantime I'd suggest moving forward here (no blocker and this is a design decision).
There was a problem hiding this comment.
I'm surprised this isn't an accessibility failure. I would at least classify it as a usability issue. Do you know if there's any other indicator planned in the new button design?
I agree that this shouldn't block this PR, but I'd like to question this decision and improve it in the future.
Codecov Report
@@ Coverage Diff @@
## main #1880 +/- ##
=======================================
Coverage 91.69% 91.69%
=======================================
Files 172 172
Lines 3565 3565
Branches 1152 1198 +46
=======================================
Hits 3269 3269
Misses 276 276
Partials 20 20
|
|
@connor-baer re-requesting a quick review for the documentation (preview). I plan on expanding on it in the future—for now the colors are simply listed on the Theme page, and there's a convenient button to copy the custom property name. |
Purpose
This PR adds semantic color tokens to the Circuit UI BaseStyles.
The variables and color values are defined in Figma (internal ref).
Approach and changes
:rootpseudo-class inBaseStyles(injected as global styles by Emotion)Definition of done
Unit and integration testsMeets accessibility requirements