Remove dark: style overrides from base button

[teamdandelion]

This PR removes the dark: style overrides from base button.

The way I am using the UI system, there is generally not a need for dark: overrides, because the color variables themselves update in dark mode. For example, in dark, the accent color shifts to better harmonize with a dark background.

Specifying dark: classes on the base button disrupts this usage, since the dark: marker gets additional specificity and may interfere with overrides that are being applied, basically forcing the "special case dark mode" logic to bubble up to components that inherit it.

As a specific case, consider the TabsTrigger, which inherits button styling:

function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        buttonVariants({
          variant: "ghost",
          size: "sm",
        }),
        "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground cursor-pointer",
        className
      )}
      {...props}
    />
  );
}

In light mode, the data-[state=active]:bg-primary overrides the hover: from button, which is desirable — we don't the active tab to become less intense when hovered. However, in the current implementation, the dark:hover:bg-accent/50 is more specific and overrides it, which means that tabs would need to have dark:data-[state=active]:bg-primary too, and so forth.

Hence, while it's still fine for downstream users to set custom dark: overrides if desired, I don't want to do so in the base ui components.

To see this in action, try hovering over the active tab in dark mode on the tab storybook (https://ui.mirascope.com/?path=/story/ui-tabs--default) and compare with the better behavior from this PR.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	ui-storybook	823e296	Visit preview	Jun 04 2025, 01:28 AM

[brenkao]

I am not a fan until the styles.css file is unified because it will have downstream effects to lilypad app. Is this urgent? I have a PR that is switching to using bun with mirascope-ui. We can then test these changes once that PR is merged in to make sure there are no regression issues

[teamdandelion]

It's important that this get merged eventually (since this is the version of the code that I currently have used/committed in mirascope/website), however it's not urgent. I'll just ask that we don't merge any further changes to button outside of this PR, so that whatever we finalize on, I can easily make sure it's well integrated to mirascope/website too.