Skip to content

UI-badge: amber and default button hover uses bg-…-200 instead of -100 (inconsistent with all other colors) #14901

Description

@helloDanuk

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

  1. Render an interactive badge:
  2. Hover it → background becomes amber-200.
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions