Migrate Button component to semantic color tokens #1881
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
Hey @robinmetral, Thanks! |
Codecov Report
@@ Coverage Diff @@
## main #1881 +/- ##
==========================================
- Coverage 91.70% 91.68% -0.02%
==========================================
Files 172 172
Lines 3567 3572 +5
Branches 1198 1202 +4
==========================================
+ Hits 3271 3275 +4
- Misses 275 276 +1
Partials 21 21
|
connor-baer
reviewed
Dec 14, 2022
| @@ -157,34 +157,93 @@ const Content = styled.span<{ isLoading: boolean }>( | |||
| contentLoadingStyles, | |||
| ); | |||
|
|
|||
| const COLOR_MAP = { | |||
| const PRIMARY_COLOR_MAP = { | |||
There was a problem hiding this comment.
Now that we're using CSS variables, I'd refactor this code to move away from this object and replace it with a switch statement and explicit styles. Would help readability I think.
There was a problem hiding this comment.
Good idea! Just replaced the tokens for now, but you're right that this is a good opportunity to make this a bit clearer. Will address (in January)
There was a problem hiding this comment.
Was contemplating this again and realized it's actually a matrix between variant and destructive. Would keep it for now and refactor with the new button design.
connor-baer
force-pushed
the
button-semantic-tokens
branch
from
4c4e479 to
175177e
Compare
connor-baer
added a commit
that referenced
this pull request
Feb 10, 2023
connor-baer
added a commit
that referenced
this pull request
Feb 21, 2023
connor-baer
added a commit
that referenced
this pull request
Feb 22, 2023
kodiakhq bot
pushed a commit
that referenced
this pull request
Mar 1, 2023
* Add theme toggle * Migrate Button component to semantic color tokens (#1881) * Migrate Anchor component to semantic color tokens * Migrate Avatar component to semantic color tokens * Migrate Badge component to semantic color tokens * Migrate Body component to semantic color tokens * Migrate Card component to semantic color tokens * Migrate Checkbox component to semantic color tokens * Migrate field atoms to semantic color tokens * Migrate Grid stories to semantic color tokens * Migrate Header component to semantic color tokens * Migrate Headline component to semantic color tokens * Migrate Hr component to semantic color tokens * Migrate ImageInput component to semantic color tokens * Migrate InlineElements stories to semantic color tokens * Migrate Input component to semantic color tokens * Migrate ListItem component to semantic color tokens * Migrate Modal component to semantic color tokens * Migrate NotificationBanner component to semantic color tokens * Migrate NotificationInline component to semantic color tokens * Migrate NotificationModal component to semantic color tokens * Migrate NotificationToast component to semantic color tokens * Migrate Popover component to semantic color tokens * Migrate ProgressBar component to semantic color tokens * Migrate RadioButton component to semantic color tokens * Migrate Select component to semantic color tokens * Migrate SelectorGroup component to semantic color tokens * Migrate Navigation components to semantic color tokens * Migrate SidePanel component to semantic color tokens * Migrate Skeleton component to semantic color tokens * Migrate SubHeadline component to semantic color tokens * Migrate Table component to semantic color tokens * Migrate Tabs component to semantic color tokens * Migrate Tag component to semantic color tokens * Migrate Title component to semantic color tokens * Migrate Toggle component to semantic color tokens * Migrate Tooltip component to semantic color tokens * Migrate BaseStyles to semantic color tokens * Migrate Spinner stories to semantic color tokens * Migrate Carousel component to semantic color tokens * Migrate Storybook components to semantic color tokens * Migrate Calendar components to semantic color tokens * Migrate focusOutline style mixin to semantic color tokens * Migrate focusVisible style mixin to semantic color tokens * Migrate inputOutline style mixin to semantic color tokens * Migrate listItem style mixin to semantic color tokens * Migrate cx style mixin to semantic color tokens * Change input outline to border/normal * Update disabled styles for Button component * Update disabled styles for Checkbox component * Update disabled styles for ListItem component * Update disabled styles for Navigation component * Update disabled styles for Selector component * Address review comments * Update disabled styles for field atoms * Update disabled styles for RadioButton component * Deprecae the disableVisually style mixin * Update rogue unit test * Update disabled styles for Toggle component * Lighten Toggle background * Lighten Checkbox border * Fix Checkbox disabled styles * Fix bg/danger in Storybook theme * Refactor theme switcher * Disable dark theme for doc mode * Tweak Storybook Icons page * Add --cui-bg-elevated color * Replace bg-normal by bg-elevated in components * Remove unused imports from Icons page * Fix Icons page default state Co-authored-by: Connor Bär <[email protected]> * Add changesets * Add --cui-bg-elevated in blue.css and Storybook theme * Redesign Avatar component (#1961) * Redesign Avatar component * Remove Avatar from accessibility tree when alt='' This also improves the accessibility tests for the component. * Make alt optional in Avatar * Hide ImageInput underlying visual component from the accessibility tree * Require alt in Avatar and remove from ImageInput * Update ImageInput's prop interface * Use icon library asset for Avatar object variant * Clean up unnecessary CSS The icon size is set directly on the SVG assets coming from the icon library. * Add changesets --------- Co-authored-by: Robin Métral <[email protected]> --------- Co-authored-by: Robin Métral <[email protected]>
|
This PR was merged locally into #1944 and has been released as part of Circuit UI v6.3. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚧 POC 🚧
Depends on #1880
Purpose
For now, this is intended as a POC.
It migrates the
Buttoncomponent (quite color-heavy and used as an atom in many other components) to use semantic color tokens instead of the legacy theme.Approach and changes
Describe how you solved the problem
Definition of done