feat(tabs): new light/dark mode colors #1843
Conversation
| const borderInlineColor = $isVertical ? borderColor : undefined; | ||
|
|
||
| const selectedColor = getColor({ theme, variable: 'foreground.primary' }); | ||
| const foregroundColor = $isSelected ? selectedColor : 'inherit'; |
There was a problem hiding this comment.
@steue @lucijanblagonic The default foreground color was originally set to inherit the TabsList's foreground.default. This has the benefit of showing a clear distinction between default and disabled tabs.
Should we keep it as such or use foreground.subtle as shown in Figma instead?
CC: @jzempel
There was a problem hiding this comment.
Inheriting feels OK here as long as the intent is preserved by the variable (e.g., disabled vs selected vs. default (inherited)). Hopefully I'm understanding this correctly. haha
There was a problem hiding this comment.
@ze-flo Yes, the foreground.default is the preferred color here. We corrected this in design, and we left a note for making the change in the inventory.
|
There seems to be a flash of black, when the selection indicator is changed. This is only visible for users who rely on keyboard to change the tab. I am assuming that the
|
The only reason we're not seeing this in the current is due to the fact that the contrast between the inherited foreground and primary blue is not as high. We might need to question whether the border |
The last commit removes the color flash when using the keyboard. ✅ |
Description
Adds new light/dark mode colors to
TabsDetail
TabsChecklist
npm start)⬅️ renders as expected with reversed (RTL) direction🤘 renders as expected with Bedrock CSS (?bedrock)