When hovering over a `checked` checkbox, the background color changes

[jamauro]

If I check a checkbox and then hover over it, the background changes from the primary color to transparent. In this image, the checkbox is checked and my mouse is hovering over it.

It looks like the background-color is being set to currentColor by tailwind and it's overriding the .checked\:bg-primary:checked

Any ideas?

[bluzky]

@jamauro I have tested on https://salad-storybook.fly.dev/salad_ui_component/checkbox Safari browser but didn't see that happen. Do you have sample code here?

[jamauro]

Hmm I added the checkbox with mix salad.add checkbox

Here's my app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* This file is for your main application CSS */

@layer base {
  :root {
  --background: 0 0% 100%;
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 224 71.4% 4.1%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 71.4% 4.1%;
  --primary: 220.9 39.3% 11%;
  --primary-foreground: 210 20% 98%;
  --secondary: 220 14.3% 95.9%;
  --secondary-foreground: 220.9 39.3% 11%;
  --muted: 220 14.3% 95.9%;
  --muted-foreground: 220 8.9% 46.1%;
  --accent: 220 14.3% 95.9%;
  --accent-foreground: 220.9 39.3% 11%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 20% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 224 71.4% 4.1%;
  --radius: 1rem;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
}

.dark {
  --background: 224 71.4% 4.1%;
  --foreground: 210 20% 98%;
  --card: 224 71.4% 4.1%;
  --card-foreground: 210 20% 98%;
  --popover: 224 71.4% 4.1%;
  --popover-foreground: 210 20% 98%;
  --primary: 210 20% 98%;
  --primary-foreground: 220.9 39.3% 11%;
  --secondary: 215 27.9% 16.9%;
  --secondary-foreground: 210 20% 98%;
  --muted: 215 27.9% 16.9%;
  --muted-foreground: 217.9 10.6% 64.9%;
  --accent: 215 27.9% 16.9%;
  --accent-foreground: 210 20% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 20% 98%;
  --border: 215 27.9% 16.9%;
  --input: 215 27.9% 16.9%;
  --ring: 216 12.2% 83.9%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

  * {
    @apply border-border !important;
  }
}

body { @apply bg-background text-foreground; }

here's the checkbox component that was added from salad-ui

defmodule HelloWeb.Component.Checkbox do
  @moduledoc false
  use HelloWeb.Component

  @doc """
  Implement checkbox input component

  ## Examples:
      <.checkbox class="!border-destructive" name="agree" value={true} />
  """
  attr :name, :any, default: nil
  attr :value, :any, default: nil
  attr :"default-value", :any, values: [true, false, "true", "false"], default: false
  attr :field, Phoenix.HTML.FormField
  attr :class, :string, default: nil
  attr :rest, :global

  def checkbox(assigns) do
    assigns =
      prepare_assign(assigns)

    assigns =
      assign_new(assigns, :checked, fn -> Phoenix.HTML.Form.normalize_value("checkbox", assigns.value) end)

    ~H"""
    <input type="hidden" name={@name} value="false" />
    <input
      type="checkbox"
      class={
        classes([
          "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground",
          @class
        ])
      }
      name={@name}
      value="true"
      checked={@checked}
      {@rest}
    />
    """
  end
end

here's how I'm using the component

<.checkbox phx-click="toggle_todo" phx-value-id={@todo.id} value={@todo.done} />

in the storybook you linked, I noticed that the order in which the background-color rules are being applied is flipped:

[jamauro]

Here's a screen recording of the behavior. Note that it isn't specific to Safari. I'm using Chrome in this recording.

To repro, I created a new Phoenix project and added salad ui with mix salad.init. Then I added the checkbox component with mix salad.add checkbox

https://github.com/user-attachments/assets/81d61289-304f-4b56-9c0f-0935550884ad

[jamauro]

If I add hover:checked:bg-primary to the class list for the checkbox component, it resolves the issue but this seems like it shouldn't be necessary. I would think that the specificity of the classes as is would be enough to override the [type=checkbox]:checked:hover as seen in the storybook.

[bluzky]

I don't know why it doesn't override, I've added checked:focus:bg-primary checked:hover:bg-primary to the class list. Thanks you