Table row hover doesn't work with themes

[jorgecasar]

I would like to suggest a change in normalize.src.css to follow surface pattern.

Using theme switcher you have to override this part to make it work.

:where(table tr:hover td),
:where(tbody tr:nth-child(even):hover td) {
  background-color: var(--gray-10);

  @media (prefers-color-scheme: light) {
    background-color: white;
  }
}

It should be use --surface-* variables, like other parts of the file table or td. I would like to suggest use --surface-3 because td currently is --surface-1 and th are --surface-2, then td on hover state will be different from other rows and header.

:where(table tr:hover td),
:where(tbody tr:nth-child(even):hover td) {
  background-color: var(--surface-3);
}

Here is an example for testing normalize with theme switcher. With the table fix applied. What do you thing @argyleink?

[argyleink]

I think this sounds reasonable and we should investigate! 🙏🏻

is this a good reproduction of the issue?

https://codepen.io/argyleink/pen/QwLYjBY?editors=1100

[jorgecasar]

Looks good, I forget adding the reproduction I did. 🤦

It uses data-theme attribute, but doesn't mind. Here you are if it helps: https://codepen.io/jorgecasar/pen/zxOLWqP

[argyleink]

you down to make the PR? then you'll get credit 🙂