fix(driver-versions): make shimmer visible in light mode#700
Conversation
Use mix-blend-mode: overlay as the default for all 8 driver bump card ::after shimmer rules so the foil effect is visible on the near-white backgrounds of light mode. Add a [data-theme="dark"] override block that restores color-dodge for the full holographic shimmer on dark backgrounds. Assisted-by: Claude Sonnet 4.6 via GitHub Copilot Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the mix-blend-mode for several driver bump classes from color-dodge to overlay, while adding a dark mode override to maintain the original effect. The review feedback suggests using a CSS variable to centralize the blend mode logic. This would improve maintainability and simplify the dark mode implementation by avoiding the repetition of multiple class selectors.
| border-radius: inherit; | ||
| pointer-events: none; | ||
| mix-blend-mode: color-dodge; | ||
| mix-blend-mode: overlay; |
There was a problem hiding this comment.
Instead of hardcoding overlay in multiple places, consider using a CSS variable. This centralizes the theme logic and makes the code much more maintainable. This change should be applied to all 8 occurrences of mix-blend-mode in this file.
mix-blend-mode: var(--shimmer-blend-mode, overlay);| border-radius: inherit; | ||
| pointer-events: none; | ||
| mix-blend-mode: color-dodge; | ||
| mix-blend-mode: overlay; |
There was a problem hiding this comment.
Use the CSS variable approach here as well to ensure consistency and maintainability across all card types.
mix-blend-mode: var(--shimmer-blend-mode, overlay);| border-radius: inherit; | ||
| pointer-events: none; | ||
| mix-blend-mode: color-dodge; | ||
| mix-blend-mode: overlay; |
There was a problem hiding this comment.
Use the CSS variable approach here as well to ensure consistency and maintainability across all card types.
mix-blend-mode: var(--shimmer-blend-mode, overlay);| border-radius: inherit; | ||
| pointer-events: none; | ||
| mix-blend-mode: color-dodge; | ||
| mix-blend-mode: overlay; |
There was a problem hiding this comment.
Use the CSS variable approach here as well to ensure consistency and maintainability across all card types.
mix-blend-mode: var(--shimmer-blend-mode, overlay);| border-radius: inherit; | ||
| pointer-events: none; | ||
| mix-blend-mode: color-dodge; | ||
| mix-blend-mode: overlay; |
There was a problem hiding this comment.
Use the CSS variable approach here as well to ensure consistency and maintainability across all card types.
mix-blend-mode: var(--shimmer-blend-mode, overlay);| border-radius: inherit; | ||
| pointer-events: none; | ||
| mix-blend-mode: color-dodge; | ||
| mix-blend-mode: overlay; |
There was a problem hiding this comment.
Use the CSS variable approach here as well to ensure consistency and maintainability across all card types.
mix-blend-mode: var(--shimmer-blend-mode, overlay);| border-radius: inherit; | ||
| pointer-events: none; | ||
| mix-blend-mode: color-dodge; | ||
| mix-blend-mode: overlay; |
There was a problem hiding this comment.
Use the CSS variable approach here as well to ensure consistency and maintainability across all card types.
mix-blend-mode: var(--shimmer-blend-mode, overlay);| border-radius: inherit; | ||
| pointer-events: none; | ||
| mix-blend-mode: color-dodge; | ||
| mix-blend-mode: overlay; |
There was a problem hiding this comment.
Use the CSS variable approach here as well to ensure consistency and maintainability across all card types.
mix-blend-mode: var(--shimmer-blend-mode, overlay);| [data-theme="dark"] .majorBump::after, | ||
| [data-theme="dark"] .nvidiaMajorBump::after, | ||
| [data-theme="dark"] .nvidiaMinorBump::after, | ||
| [data-theme="dark"] .minorBump::after, | ||
| [data-theme="dark"] .mesaMajorBump::after, | ||
| [data-theme="dark"] .mesaMinorBump::after, | ||
| [data-theme="dark"] .gnomeMajorBump::after, | ||
| [data-theme="dark"] .gnomeMinorBump::after { | ||
| mix-blend-mode: color-dodge; | ||
| } |
There was a problem hiding this comment.
The current approach of listing all 8 bump classes in a separate dark mode override block is fragile. If a new driver bump type is added in the future, it would be easy to forget to update this list. By using a CSS variable, you can replace this entire block with a single, robust override.
:global([data-theme="dark"]) {
--shimmer-blend-mode: color-dodge;
}1 participant
Use mix-blend-mode: overlay as the default for all 8 driver bump card ::after shimmer rules so the foil effect is visible on the near-white backgrounds of light mode. Add a [data-theme="dark"] override block that restores color-dodge for the full holographic shimmer on dark backgrounds.
Assisted-by: Claude Sonnet 4.6 via GitHub Copilot