Can't get button hovers working correctly

[bradbart]

When I try to use variant-surface-xx for a button or any other variant than primary my buttons still apply the primary variant on hover. Basic example below. In the code I switched from anchor tags to buttons, but I am still seeing the same behavior. Anything I need to consider in set up to get the hover state working properly? I did need to do a manual set up.

Skeleton version: 2.10.2

<nav class="list-nav">
<ul>
  {#each data.portfolios as { id, name }}
  <li class="py-2">
    <button class="btn variant-filled-error">Test</button>
  </li>
  <li class="py-2">
    <button class="btn variant-filled-primary">Test 2</button>
  </li>
  {/each}
</ul>
</nav>

[endigo9740]

Hey @bradbart, we may need more information here. From what the snippet you presented, I would expect hover states to be working.

To explain how it works with buttons, you typically pair two classes:

1. The btn class to establish the foundation of the button styles
2. The variant class, which provides background, text, and color styles

The only hover style applied by default is provided by btn. Here's the source for what that's doing specifically:
https://github.com/skeletonlabs/skeleton/blob/master/packages/plugin/src/styles/components/buttons.css#L14

When you hover, it's increasing the brightness of the button by about 15%. So I would expect both buttons to reflect this change visibly.

The only thing that gives me pause is the fact that both of your buttons have outlines. That's not provided by Skeleton by default. Is that a custom override you've set locally within your project by chance?

Unless you can provide either a video, gif, or minimal reproduction that demonstrates the issue you're facing, we don't have enough to go on here. Everything implemented should operate as expected.

I did need to do a manual set up.

Sometimes folks miss a step when doing this or misconfigure their Tailwind config. I might suggest you at least share the contents of you Tailwind config and we can provide a quick review if all is well here.

[bradbart]

Thanks @endigo9740 I was able to get the screen recording working to describe the issue better. Using variant-filled-error since I think it makes the issue more obvious. Rather than using a pinkish hue, it is using a greenish hue on hover (the same as for the primary button below it). Is there more to do to get set up other than this guide: https://www.skeleton.dev/docs/get-started?

Code for below experience

<script>
  export let data; 
</script>

<h1 class="h3">Title</h1>

<nav class="list-nav">
<ul>
  {#each data.portfolios as { id, name }}
  <li class="py-2">
    <a href="/#" class="btn variant-filled-error">Test</a>
    <button class="btn variant-filled-error">Test</button>
  </li>
  <li class="py-2">
    <a href="/#" class="btn variant-filled-primary">Test 2</a>
  </li>
  {/each}
</ul>
</nav>

Tailwind config

import { join } from 'path';
import type { Config } from 'tailwindcss';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
// 1. Import the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';

const config = {
	// 2. Opt for dark mode to be handled via the class method
	darkMode: 'class',
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		// 3. Append the path to the Skeleton package
		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
	],
	theme: {
		extend: {}
	},
	plugins: [
		forms,
		typography,
		// 4. Append the Skeleton plugin (after other plugins)
		skeleton({
			themes: { preset: [{ name: 'skeleton', enhancements: true }] }
		})
	]
} satisfies Config;

export default config;

localhost_5173.-.Google.Chrome.2024-08-05.13-34-28.mp4

[bradbart]

Okay, I was able to narrow this down, the issue only occurs if I use a <nav class="list-nav"> as documented here: https://www.skeleton.dev/elements/lists

[endigo9740]

Ahh that's the issue Brad - the list-nav has it's own opinionated hover styles built in. If you wish to use your own custom styles then you have two options:

• Create your own list of buttons (which is very easy)
• Override the list-nav style that affect this (fairly difficult; don't recommended)

You can see where hover styles are set here if you wish to build your own local overrides:
https://github.com/skeletonlabs/skeleton/blob/master/packages/plugin/src/styles/components/lists.css#L41

In this case though, if you just want a vertical list of buttons that you control the style of, I'd recommend just creating your own "List" on demand:

<div class="space-y-2">
  {#each data.portfolios as { id, name }}
  <div class="space-y-2">
    <a href="/#" class="btn variant-filled-error">Test</a>
    <button class="btn variant-filled-error">Test</button>
  </div>
  <div class="space-y-2">
    <a href="/#" class="btn variant-filled-primary">Test 2</a>
  </div>
  {/each}
</div>

This is mostly handled via this Tailwind utility:
https://tailwindcss.com/docs/space