Modernizes visual appearance of tabs #751
Open
+122
−95
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
Unifies the banner and cta css styles used on multiple pages. Moves the element to a common location so the it can be found in the source easily and be reused across pages.
Removes figure-gray-secondary-alt in favor of figure-gray-tertiary which already had the exact same color values. Fixes fill-quaternary to have different colors in dark and light mode.
Updates the .interactive-tabs class to take a more layered appearance. Hover and selection states are visually distinct and rely on the existing color palette for layers. Adds support for "prefers-contrast: more" to use the previous higher contrast style. Moves the css for tabs to a common location so it can be easily found and reused between pages.
rauhul
requested review from
0xTim,
alexandersandberg,
daveverwer,
dempseyatgithub,
parispittman,
kaishin,
shahmishal,
timsneath and
federicobucchi
as code owners
After <- Before
Light Default
Light Increase Contrast
Dark Default
Dark Increase Contrast
|
|
@swift-ci test |
alexandersandberg
added
the
workgroup-to-discuss
|
From the screen shots, the contrast seems very low for the default in both light and dark mode. Possibly a higher contrast border on the selected item would make it more clear which item is selected. |
|
This PR looks like moving into the right direction to me. |
shahmishal
removed
the
workgroup-to-discuss
|
@rauhul As @dempseyatgithub asked, can we increase the contrast between active and inactive tabs? If you're unable to do it let me know and I'll make the change before merging. |
kaishin
reviewed
Aug 10, 2024
| border-radius: var(--border-radius); | ||
| color: var(--color-text); | ||
|
|
||
| // FIXME: Sink prefers-constrast lower into the color stack so each element doesn't need to |
There was a problem hiding this comment.
Suggested change
| // FIXME: Sink prefers-constrast lower into the color stack so each element doesn't need to | |
| // FIXME: Sink prefers-contrast lower into the color stack so each element doesn't need to |
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.
Updates the .interactive-tabs class to take a more layered appearance.
Hover and selection states are visually distinct and rely on the
existing color palette for layers.
Adds support for "prefers-contrast: more" to use the previous higher
contrast style.
Moves the css for tabs to a common location so it can be easily found
and reused between pages.
Builds on top of #743 and #749