Updatechangelog

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## [x.x.x] - xxxx-xx-xx
 
+## [2.1.0] - 2026-05-01
+- Fix glossy badge border colour
+- Change default badge style to be fully rounded
+- Reduce intensity of outline badge borders
+
 ## [2.0.0] - 2026-04-30
 - Add new colours
 - Update existing colours and styles slightly

compose.yml

@@ -5,4 +5,5 @@ services:
             dockerfile: Containerfile
         volumes:
             - ./:/code
-        network_mode: host
+        ports:
+            - "8000:8000"

config/definition.php

@@ -9,7 +9,7 @@ use Symfony\Component\Config\Definition\Configurator\DefinitionConfigurator;
 return static function (DefinitionConfigurator $definition): void {
     $definition->rootNode()
         ->children()
-            ->scalarNode('base_classes')->defaultValue('shadow-sm text-center rounded max-w-max text-xs px-2 py-1 border min-w-max')->end()
+            ->scalarNode('base_classes')->defaultValue('shadow-sm text-center rounded-full max-w-max text-xs px-2 py-1 border min-w-max')->end()
         ->end()
     ;
 };

justfile

@@ -15,5 +15,5 @@ tests:
 
 # Run the local Symfony preview app at http://localhost:8000
 serve:
-    @docker compose run --rm php sh -c "rm -rf dev/var/cache && php -S 0.0.0.0:8000 -t dev/public"
+    @docker compose run --rm --service-ports php sh -c "rm -rf dev/var/cache && php -S 0.0.0.0:8000 -t dev/public"
 

src/Enum/BadgeColour.php

@@ -43,37 +43,37 @@ enum BadgeColour
     public function getPalette(): BadgePalette
     {
         return match ($this) {
-            $this::ACCENT  => new BadgePalette('text-accent', 'border-accent/50', 'bg-accent'),
-            $this::AMBER   => new BadgePalette('text-amber-600', 'border-amber-600/50', 'bg-amber-600'),
-            $this::BLACK   => new BadgePalette('text-zinc-900', 'border-zinc-900/50', 'bg-zinc-900'),
-            $this::BLUE    => new BadgePalette('text-blue-700', 'border-blue-700/50', 'bg-blue-700'),
-            $this::BROWN   => new BadgePalette('text-stone-700', 'border-stone-700/50', 'bg-stone-700'),
-            $this::CYAN    => new BadgePalette('text-cyan-600', 'border-cyan-600/50', 'bg-cyan-600'),
-            $this::DEFAULT => new BadgePalette('text-primary', 'border-primary/50', 'bg-primary'),
-            $this::EMERALD => new BadgePalette('text-emerald-600', 'border-emerald-600/50', 'bg-emerald-600'),
-            $this::FOREST  => new BadgePalette('text-green-800', 'border-green-800/50', 'bg-green-800'),
-            $this::FUCHSIA => new BadgePalette('text-fuchsia-600', 'border-fuchsia-600/50', 'bg-fuchsia-600'),
-            $this::GOLD    => new BadgePalette('text-amber-500', 'border-amber-500/50', 'bg-amber-500'),
-            $this::GREEN   => new BadgePalette('text-green-600', 'border-green-600/50', 'bg-green-600'),
-            $this::GREY    => new BadgePalette('text-neutral-500', 'border-neutral-500/50', 'bg-neutral-500'),
-            $this::INDIGO  => new BadgePalette('text-indigo-700', 'border-indigo-700/50', 'bg-indigo-700'),
-            $this::LIME    => new BadgePalette('text-lime-600', 'border-lime-600/50', 'bg-lime-600'),
-            $this::MAROON  => new BadgePalette('text-red-900', 'border-red-900/50', 'bg-red-900'),
-            $this::NAVY    => new BadgePalette('text-blue-900', 'border-blue-900/50', 'bg-blue-900'),
-            $this::OCHRE   => new BadgePalette('text-yellow-800', 'border-yellow-800/50', 'bg-yellow-800'),
-            $this::ORANGE  => new BadgePalette('text-orange-500', 'border-orange-500/50', 'bg-orange-500'),
-            $this::PINK    => new BadgePalette('text-pink-500', 'border-pink-500/50', 'bg-pink-500'),
-            $this::PURPLE  => new BadgePalette('text-purple-600', 'border-purple-600/50', 'bg-purple-600'),
-            $this::RED     => new BadgePalette('text-red-600', 'border-red-600/50', 'bg-red-600'),
-            $this::ROSE    => new BadgePalette('text-rose-600', 'border-rose-600/50', 'bg-rose-600'),
-            $this::SKY     => new BadgePalette('text-sky-600', 'border-sky-600/50', 'bg-sky-600'),
-            $this::SLATE   => new BadgePalette('text-slate-600', 'border-slate-600/50', 'bg-slate-600'),
-            $this::STONE   => new BadgePalette('text-stone-500', 'border-stone-500/50', 'bg-stone-500'),
-            $this::STRIPE  => new BadgePalette('text-indigo-500', 'border-indigo-500/50', 'bg-indigo-500'),
-            $this::TEAL    => new BadgePalette('text-teal-600', 'border-teal-600/50', 'bg-teal-600'),
-            $this::VIOLET  => new BadgePalette('text-violet-600', 'border-violet-600/50', 'bg-violet-600'),
-            $this::YELLOW  => new BadgePalette('text-yellow-600', 'border-yellow-600/50', 'bg-yellow-600'),
-            $this::ZINC    => new BadgePalette('text-zinc-500', 'border-zinc-500/50', 'bg-zinc-500'),
+            $this::ACCENT  => new BadgePalette('text-accent', 'border-accent/30', 'bg-accent'),
+            $this::AMBER   => new BadgePalette('text-amber-600', 'border-amber-600/30', 'bg-amber-600'),
+            $this::BLACK   => new BadgePalette('text-zinc-900', 'border-zinc-900/30', 'bg-zinc-900'),
+            $this::BLUE    => new BadgePalette('text-blue-700', 'border-blue-700/30', 'bg-blue-700'),
+            $this::BROWN   => new BadgePalette('text-stone-700', 'border-stone-700/30', 'bg-stone-700'),
+            $this::CYAN    => new BadgePalette('text-cyan-600', 'border-cyan-600/30', 'bg-cyan-600'),
+            $this::DEFAULT => new BadgePalette('text-primary', 'border-primary/30', 'bg-primary'),
+            $this::EMERALD => new BadgePalette('text-emerald-600', 'border-emerald-600/30', 'bg-emerald-600'),
+            $this::FOREST  => new BadgePalette('text-green-800', 'border-green-800/30', 'bg-green-800'),
+            $this::FUCHSIA => new BadgePalette('text-fuchsia-600', 'border-fuchsia-600/30', 'bg-fuchsia-600'),
+            $this::GOLD    => new BadgePalette('text-amber-500', 'border-amber-500/30', 'bg-amber-500'),
+            $this::GREEN   => new BadgePalette('text-green-600', 'border-green-600/30', 'bg-green-600'),
+            $this::GREY    => new BadgePalette('text-neutral-500', 'border-neutral-500/30', 'bg-neutral-500'),
+            $this::INDIGO  => new BadgePalette('text-indigo-700', 'border-indigo-700/30', 'bg-indigo-700'),
+            $this::LIME    => new BadgePalette('text-lime-600', 'border-lime-600/30', 'bg-lime-600'),
+            $this::MAROON  => new BadgePalette('text-red-900', 'border-red-900/30', 'bg-red-900'),
+            $this::NAVY    => new BadgePalette('text-blue-900', 'border-blue-900/30', 'bg-blue-900'),
+            $this::OCHRE   => new BadgePalette('text-yellow-800', 'border-yellow-800/30', 'bg-yellow-800'),
+            $this::ORANGE  => new BadgePalette('text-orange-500', 'border-orange-500/30', 'bg-orange-500'),
+            $this::PINK    => new BadgePalette('text-pink-500', 'border-pink-500/30', 'bg-pink-500'),
+            $this::PURPLE  => new BadgePalette('text-purple-600', 'border-purple-600/30', 'bg-purple-600'),
+            $this::RED     => new BadgePalette('text-red-600', 'border-red-600/30', 'bg-red-600'),
+            $this::ROSE    => new BadgePalette('text-rose-600', 'border-rose-600/30', 'bg-rose-600'),
+            $this::SKY     => new BadgePalette('text-sky-600', 'border-sky-600/30', 'bg-sky-600'),
+            $this::SLATE   => new BadgePalette('text-slate-600', 'border-slate-600/30', 'bg-slate-600'),
+            $this::STONE   => new BadgePalette('text-stone-500', 'border-stone-500/30', 'bg-stone-500'),
+            $this::STRIPE  => new BadgePalette('text-indigo-500', 'border-indigo-500/30', 'bg-indigo-500'),
+            $this::TEAL    => new BadgePalette('text-teal-600', 'border-teal-600/30', 'bg-teal-600'),
+            $this::VIOLET  => new BadgePalette('text-violet-600', 'border-violet-600/30', 'bg-violet-600'),
+            $this::YELLOW  => new BadgePalette('text-yellow-600', 'border-yellow-600/30', 'bg-yellow-600'),
+            $this::ZINC    => new BadgePalette('text-zinc-500', 'border-zinc-500/30', 'bg-zinc-500'),
         };
     }
 }

src/Twig/Component/Badge.php

@@ -82,9 +82,9 @@ final class Badge
         if (true === $outline) {
             $classes = sprintf('bg-white %s %s %s %s', $palette->borderColourClass, $palette->textColourClass, $this->baseClasses, $class);
         } else {
-            $glossyClass = $glossy ? 'bg-[image:radial-gradient(ellipse_at_top_left,rgba(255,255,255,0.25),transparent_65%),linear-gradient(to_bottom,rgba(255,255,255,0.05),rgba(0,0,0,0.12))]' : '';
+            $glossyClass = $glossy ? 'bg-origin-border bg-[image:radial-gradient(ellipse_at_-10%_-50%,rgba(255,255,255,0.35),transparent_70%),linear-gradient(to_bottom,rgba(255,255,255,0.05),rgba(0,0,0,0.12))]' : '';
 
-            $classes = sprintf('text-white %s %s %s %s', $palette->backgroundColourClass, $glossyClass, $this->baseClasses, $class);
+            $classes = sprintf('text-white %s %s %s [border-color:transparent] %s', $palette->backgroundColourClass, $glossyClass, $this->baseClasses, $class);
         }
 
         if ($this->icon !== null) {