bug #3197 [Toolkit][Badge] Remove hover style to clearly distinguish from Button (Tassilo Gröper)

This PR was merged into the 2.x branch.

Discussion
----------

[Toolkit][Badge] Remove hover style to clearly distinguish from Button

| Q              | A
| -------------- | ---
| Bug fix?       | yes
| New feature?   | no
| Deprecations?  | no
| Documentation? | no
| Issues         |
| License        | MIT

Confusion may occur, if the badge shows a different style on mouse hover. As it is not a button, we need to remove it.

Additionally, the badge component on Shadcn does not hold hover styles, when interacted with a mouse. see  https://ui.shadcn.com/docs/components/badge

Commits
-------

f14635b [Toolkit][Badge] Remove hover style to clearly distinguish badge from button

Author: tassilogroeper

src/Toolkit/kits/shadcn/badge/templates/components/Badge.html.twig

@@ -5,9 +5,9 @@
     base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
     variants: {
         variant: {
-            default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-            secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+            default: 'border-transparent bg-primary text-primary-foreground',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground',
+            destructive: 'border-transparent bg-destructive text-destructive-foreground',
             outline: 'text-foreground',
         },
     },

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component badge, code 1__1.html

@@ -6,4 +6,4 @@
 <twig:Badge>Badge</twig:Badge>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">Badge</div>
+<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground">Badge</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component badge, code 2__1.html

@@ -8,5 +8,5 @@
 </twig:Badge>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">Badge
+<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground">Badge
 </div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component badge, code 4__1.html

@@ -8,5 +8,5 @@
 </twig:Badge>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80">Badge
+<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground">Badge
 </div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component badge, code 5__1.html

@@ -9,7 +9,7 @@
 </twig:Badge>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
+<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground">
 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="mr-1 h-3 w-3" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
     Verified
 </div>