Bug description
Amber
The Badge component's color map in resources/js/components/ui/Badge.vue (line 55) defines the amber variant's interactive [button] hover as bg-amber-200, while:
- its own link hover uses
[a]:hover:bg-amber-100, and
- every other chromatic color (blue, cyan, emerald, green, indigo, lime, orange, pink, purple, red, rose, sky, teal, violet, yellow, fuchsia) uses
bg-{color}-100 for both [a] and [button] hover.
So amber is the only chromatic color whose button hover jumps two shades (50 → 200) instead of one (50 → 100), and the only one where [a] and [button] hover differ. This looks like a typo.
amber: '… [a]:hover:bg-amber-100 … [button]:hover:bg-amber-200 …' ← outlier
sky: '… [a]:hover:bg-sky-100 … [button]:hover:bg-sky-100 …' ← all others
Default (gray)
The default option behaves the same way:
- its own link hover uses
[a]:hover:bg-gray-100
- but as a button ist uses
[button]:hover:bg-gray-200
There are other differences as well. But I suspect these were chosen intentionally to create a better contrast. To give you a complete overview, I'll list the changes anyway:
pink: text-pink-800
purple: text-purple-800
rose: text-rose-800
=> default is 700
and border-Shade-Split:
border-…-300: blue, fuchsia, indigo, pink, purple, rose, sky, violet
border-…-400: amber, cyan, emerald, green, lime, orange, red, teal, yellow
How to reproduce
- Render an interactive badge:
- Hover it → background becomes amber-200.
- Compare with color="sky" (or any other chromatic color) → hover stays at -100. Amber's hover is visibly stronger/inconsistent.
Expected: amber button hover should be bg-amber-100, matching its [a] hover and all other chromatic colors.
Logs
Environment
Environment
Laravel Version: 12.62.0
PHP Version: 8.4.22
Composer Version: 2.9.5
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: de_CH
Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED
Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: log
Queue: background
Session: file
Storage
public/storage: NOT LINKED
Statamic
Addons: 4
License Key: Not set
Sites: 1
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.23.0 PRO
Statamic Addons
daun/statamic-original-filename: 1.1.1
mitydigital/statamic-llms-txt: 1.0.0
statamic/seo-pro: 7.12.1
swiftmade/statamic-clear-assets: 3.4.0
Installation
Fresh statamic/statamic site via CLI
Additional details
No response
Bug description
Amber
The Badge component's color map in
resources/js/components/ui/Badge.vue(line 55) defines theambervariant's interactive[button]hover asbg-amber-200, while:[a]:hover:bg-amber-100, andbg-{color}-100for both[a]and[button]hover.So
amberis the only chromatic color whose button hover jumps two shades (50 → 200) instead of one (50 → 100), and the only one where[a]and[button]hover differ. This looks like a typo.amber: '… [a]:hover:bg-amber-100 … [button]:hover:bg-amber-200 …' ← outlier
sky: '… [a]:hover:bg-sky-100 … [button]:hover:bg-sky-100 …' ← all others
Default (gray)
The default option behaves the same way:
[a]:hover:bg-gray-100[button]:hover:bg-gray-200There are other differences as well. But I suspect these were chosen intentionally to create a better contrast. To give you a complete overview, I'll list the changes anyway:
pink: text-pink-800
purple: text-purple-800
rose: text-rose-800
=> default is 700
and border-Shade-Split:
border-…-300: blue, fuchsia, indigo, pink, purple, rose, sky, violet
border-…-400: amber, cyan, emerald, green, lime, orange, red, teal, yellow
How to reproduce
Expected: amber button hover should be bg-amber-100, matching its [a] hover and all other chromatic colors.
Logs
Environment
Installation
Fresh statamic/statamic site via CLI
Additional details
No response