Skip to content

[6.x] Opaque badges #13586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JayGeorge wants to merge 8 commits into
base: master
Choose a base branch
from
+87 −21
Open

[6.x] Opaque badges #13586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7ab565a
Playground - add some spacing between sections and various badge vari…
JayGeorge Jan 16, 2026
f9c5d17
Playground - add some badge variations to test
JayGeorge Jan 16, 2026
e9720f9
Badges - start making opaque values
JayGeorge Jan 16, 2026
e2cc962
Badges - convert everything to use opaque values
JayGeorge Jan 16, 2026
3a4f8a2
Badges - ensure AA hover state
JayGeorge Jan 16, 2026
4465fb6
Badges - try fixing dark mode
JayGeorge Jan 16, 2026
1eee82a
Badges / dark mode - consistent hover colors
JayGeorge Jan 16, 2026
e52e996
Badges / dark mode / hover - fix black
JayGeorge Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions resources/js/components/ui/Badge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,26 +49,26 @@ const badgeClasses = computed(() => {
lg: 'font-medium text-sm leading-7 px-2.5 rounded-lg [&_svg]:size-4 gap-2',
},
color: {
amber: 'bg-amber-100 dark:bg-amber-300/6 border-amber-400 dark:border-amber-400/25 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-200/70 [button]:hover:bg-amber-200/70 dark:[button]:hover:bg-amber-200/9',
black: 'bg-gray-900 dark:bg-gray-300/6 border-black dark:border-black/25 text-white dark:text-gray-300 [a]:hover:bg-black/90 [button]:hover:bg-black/90 dark:[button]:hover:bg-black/9',
blue: 'bg-blue-100/80 dark:bg-blue-300/6 border-blue-300 dark:border-blue-300/25 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-200/60 [button]:hover:bg-blue-200/60 dark:[button]:hover:bg-blue-200/9',
cyan: 'bg-cyan-100/80 dark:bg-cyan-300/6 border-cyan-400 dark:border-cyan-400/25 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-200/60 [button]:hover:bg-cyan-200/60 dark:[button]:hover:bg-cyan-200/9',
default: 'bg-gray-800/5 dark:bg-gray-800 border-gray-300 dark:border-gray-300/25 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-800/10 dark:[a]:hover:bg-gray-700/50 [button]:hover:bg-gray-200/50 dark:[button]:hover:bg-gray-200/9',
emerald: 'bg-emerald-100/80 border-emerald-400 dark:border-emerald-400/25 text-emerald-700 dark:bg-emerald-300/6 dark:text-emerald-300 [a]:hover:bg-emerald-200/60 [button]:hover:bg-emerald-200/60 dark:[button]:hover:bg-emerald-200/9',
fuchsia: 'bg-fuchsia-100/80 dark:bg-fuschia-300/6 border-fuchsia-300 dark:border-fuchsia-300/25 text-fuchsia-700 dark:text-fuschia-300 [a]:hover:bg-fuchsia-200/60 dark:[a]:hover:bg-fuchsia-300/15 [button]:hover:bg-fuchsia-200/60 dark:[button]:hover:bg-fuchsia-200/9',
green: 'bg-green-100/80 border-green-400 dark:border-green-400/25 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15 [button]:hover:bg-green-200/60 dark:[button]:hover:bg-green-200/9',
indigo: 'bg-indigo-100/80 border-indigo-300 dark:border-indigo-300/25 text-indigo-700 dark:bg-indigo-300/6 dark:text-indigo-300 [a]:hover:bg-indigo-200/60 dark:[a]:hover:bg-indigo-300/15 [button]:hover:bg-indigo-200/60 dark:[button]:hover:bg-indigo-200/9',
lime: 'bg-lime-100 dark:bg-lime-300/6 border-lime-400 dark:border-lime-400/25 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-200/80 dark:[a]:hover:bg-lime-300/15 [button]:hover:bg-lime-200/80 dark:[button]:hover:bg-lime-200/9',
orange: 'bg-orange-100 dark:bg-orange-300/6 border-orange-400 dark:border-orange-400/25 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-200/60 [button]:hover:bg-orange-200/60 dark:[a]:hover:bg-orange-300/15 dark:[button]:hover:bg-orange-200/9',
pink: 'bg-pink-100/80 dark:bg-pink-300/6 border-pink-300 dark:border-pink-300/25 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-200/60 dark:[a]:hover:bg-pink-300/15 [button]:hover:bg-pink-200/60 dark:[button]:hover:bg-pink-200/9',
purple: 'bg-purple-100/80 dark:bg-purple-300/6 border-purple-300 dark:border-purple-300/25 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-200/60 dark:[a]:hover:bg-purple-300/15 [button]:hover:bg-purple-200/60 dark:[button]:hover:bg-purple-200/9',
red: 'bg-red-100/80 dark:bg-red-300/6 border-red-400 dark:border-red-400/25 text-red-700 dark:text-red-300 [a]:hover:bg-red-200/60 dark:[a]:hover:bg-red-300/15 [button]:hover:bg-red-200/60 dark:[button]:hover:bg-red-200/9',
rose: 'bg-rose-100/80 dark:bg-rose-300/6 border-rose-300 dark:border-rose-300/25 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-200/60 dark:[a]:hover:bg-rose-300/15 [button]:hover:bg-rose-200/60 dark:[button]:hover:bg-rose-200/9',
sky: 'bg-sky-100/80 dark:bg-sky-300/6 border-sky-300 dark:border-sky-300/25 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-200/60 dark:[a]:hover:bg-sky-300/15 [button]:hover:bg-sky-200/60 dark:[button]:hover:bg-sky-200/10',
teal: 'bg-teal-100 dark:bg-teal-300/6 border-teal-400 dark:border-teal-400/25 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-200/70 [button]:hover:bg-teal-200/70 dark:[a]:hover:bg-teal-300/15 dark:[button]:hover:bg-teal-200/9',
violet: 'bg-violet-100/80 dark:bg-violet-300/6 border-violet-300 dark:border-violet-300/25 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-200/60 [button]:hover:bg-violet-200/60 dark:[a]:hover:bg-violet-300/15 dark:[button]:hover:bg-violet-200/9',
white: 'bg-white border-gray-300 dark:border-gray-300/25 text-gray-700 dark:bg-gray-300/6 dark:text-gray-300 [a]:hover:bg-gray-200/30 [button]:hover:bg-gray-200/30 dark:[a]:hover:bg-gray-300/15 dark:[button]:hover:bg-gray-200/9',
yellow: 'bg-yellow-100 dark:bg-yellow-300/6 border-yellow-400 dark:border-yellow-400/25 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 dark:[a]:hover:bg-yellow-300/15 [button]:hover:bg-yellow-200/80 dark:[button]:hover:bg-yellow-200/9',
amber: 'bg-amber-50 dark:bg-gray-800 border-amber-400 dark:border-amber-700 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-amber-200 dark:[button]:hover:bg-gray-700',
black: 'bg-gray-900 dark:bg-black border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 dark:[a]:hover:bg-gray-800 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
blue: 'bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-blue-100 dark:[button]:hover:bg-gray-700',
cyan: 'bg-cyan-50 dark:bg-gray-800 border-cyan-400 dark:border-cyan-700 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-cyan-100 dark:[button]:hover:bg-gray-700',
default: 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-200 dark:[button]:hover:bg-gray-700',
emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-700 text-emerald-700 dark:bg-gray-800 dark:text-emerald-300 [a]:hover:bg-emerald-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-emerald-100 dark:[button]:hover:bg-gray-700',
fuchsia: 'bg-fuchsia-50 dark:bg-gray-800 border-fuchsia-300 dark:border-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-300 [a]:hover:bg-fuchsia-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-fuchsia-100 dark:[button]:hover:bg-gray-700',
green: 'bg-green-50 border-green-400 dark:border-green-700 text-green-700 dark:bg-gray-800 dark:text-green-300 [a]:hover:bg-green-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-green-100 dark:[button]:hover:bg-gray-700',
indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:bg-gray-800 dark:text-indigo-300 [a]:hover:bg-indigo-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-indigo-100 dark:[button]:hover:bg-gray-700',
lime: 'bg-lime-50 dark:bg-gray-800 border-lime-400 dark:border-lime-700 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-lime-100 dark:[button]:hover:bg-gray-700',
orange: 'bg-orange-50 dark:bg-gray-800 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-orange-100 dark:[button]:hover:bg-gray-700',
pink: 'bg-pink-50 dark:bg-gray-800 border-pink-300 dark:border-pink-700 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-pink-100 dark:[button]:hover:bg-gray-700',
purple: 'bg-purple-50 dark:bg-gray-800 border-purple-300 dark:border-purple-700 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-purple-100 dark:[button]:hover:bg-gray-700',
red: 'bg-red-50 dark:bg-gray-800 border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 [a]:hover:bg-red-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-red-100 dark:[button]:hover:bg-gray-700',
rose: 'bg-rose-50 dark:bg-gray-800 border-rose-300 dark:border-rose-700 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-rose-100 dark:[button]:hover:bg-gray-700',
sky: 'bg-sky-50 dark:bg-gray-800 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-sky-100 dark:[button]:hover:bg-gray-700',
teal: 'bg-teal-50 dark:bg-gray-800 border-teal-400 dark:border-teal-700 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-teal-100 dark:[button]:hover:bg-gray-700',
violet: 'bg-violet-50 dark:bg-gray-800 border-violet-300 dark:border-violet-700 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-violet-100 dark:[button]:hover:bg-gray-700',
white: 'bg-white border-gray-300 dark:border-gray-700 text-gray-700 dark:bg-gray-800 dark:text-gray-300 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-100 dark:[button]:hover:bg-gray-700',
yellow: 'bg-yellow-50 dark:bg-gray-800 border-yellow-400 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-yellow-100 dark:[button]:hover:bg-gray-700',
},
pill: { true: 'rounded-full' },
asButton: { true: 'shadow-ui-sm no-underline!' }
Expand Down
68 changes: 67 additions & 1 deletion resources/js/pages/Playground.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ defineProps(['icons']);
<ui-dropdown-footer text="Logout" icon="arrow-right" />
</ui-dropdown>

<div v-cloak>
<div v-cloak class="space-y-12">
<div class="space-y-12 prose starting-style-transition starting-style-transition-children">
<h1>Typography <strong>Test</strong> Document</h1>
<p class="lead">This comprehensive document tests all typography elements supported by both tw-prose and @tailwindcss/typography plugins.</p>
Expand Down Expand Up @@ -193,6 +193,72 @@ defineProps(['icons']);
<ui-badge size="sm" text="Cyan" color="cyan" />
<ui-badge size="sm" text="Purple" color="purple" />
<ui-badge size="sm" text="Gray" color="gray" />
<ui-badge size="sm" text="Default" />
<ui-badge size="sm" text="Rose" color="rose" />
<ui-badge size="sm" text="Emerald" color="emerald" />
<ui-badge size="sm" text="Fuchsia" color="fuchsia" />
<ui-badge size="sm" text="Indigo" color="indigo" />
<ui-badge size="sm" text="Lime" color="lime" />
<ui-badge size="sm" text="Orange" color="orange" />
<ui-badge size="sm" text="Sky" color="sky" />
<ui-badge size="sm" text="Teal" color="teal" />
<ui-badge size="sm" text="Violet" color="violet" />
<ui-badge size="sm" text="White" color="white" />
<ui-badge size="sm" text="Yellow" color="yellow" />
</div>
</section>

<section class="space-y-4">
<ui-heading size="lg">Badges as Links</ui-heading>
<div class="mb-4 flex gap-2 sm:gap-3 items-end flex-wrap">
<ui-badge size="lg" text="Green Link" color="green" href="#" />
<ui-badge size="lg" text="Red Link" color="red" href="#" />
<ui-badge size="lg" text="Black Link" color="black" href="#" />
<ui-badge text="Blue Link" color="blue" href="#" />
<ui-badge text="Amber Link" color="amber" href="#" />
<ui-badge text="Pink Link" color="pink" href="#" />
<ui-badge size="sm" text="Cyan Link" color="cyan" href="#" />
<ui-badge size="sm" text="Purple Link" color="purple" href="#" />
<ui-badge size="sm" text="Gray Link" color="gray" href="#" />
<ui-badge size="sm" text="Default Link" href="#" />
<ui-badge size="sm" text="Rose Link" color="rose" href="#" />
<ui-badge size="sm" text="Emerald Link" color="emerald" href="#" />
<ui-badge size="sm" text="Fuchsia Link" color="fuchsia" href="#" />
<ui-badge size="sm" text="Indigo Link" color="indigo" href="#" />
<ui-badge size="sm" text="Lime Link" color="lime" href="#" />
<ui-badge size="sm" text="Orange Link" color="orange" href="#" />
<ui-badge size="sm" text="Sky Link" color="sky" href="#" />
<ui-badge size="sm" text="Teal Link" color="teal" href="#" />
<ui-badge size="sm" text="Violet Link" color="violet" href="#" />
<ui-badge size="sm" text="White Link" color="white" href="#" />
<ui-badge size="sm" text="Yellow Link" color="yellow" href="#" />
</div>
</section>

<section class="space-y-4">
<ui-heading size="lg">Badges as Buttons</ui-heading>
<div class="mb-4 flex gap-2 sm:gap-3 items-end flex-wrap">
<ui-badge size="lg" text="Green Button" color="green" as="button" />
<ui-badge size="lg" text="Red Button" color="red" as="button" />
<ui-badge size="lg" text="Black Button" color="black" as="button" />
<ui-badge text="Blue Button" color="blue" as="button" />
<ui-badge text="Amber Button" color="amber" as="button" />
<ui-badge text="Pink Button" color="pink" as="button" />
<ui-badge size="sm" text="Cyan Button" color="cyan" as="button" />
<ui-badge size="sm" text="Purple Button" color="purple" as="button" />
<ui-badge size="sm" text="Gray Button" color="gray" as="button" />
<ui-badge size="sm" text="Default Button" as="button" />
<ui-badge size="sm" text="Rose Button" color="rose" as="button" />
<ui-badge size="sm" text="Emerald Button" color="emerald" as="button" />
<ui-badge size="sm" text="Fuchsia Button" color="fuchsia" as="button" />
<ui-badge size="sm" text="Indigo Button" color="indigo" as="button" />
<ui-badge size="sm" text="Lime Button" color="lime" as="button" />
<ui-badge size="sm" text="Orange Button" color="orange" as="button" />
<ui-badge size="sm" text="Sky Button" color="sky" as="button" />
<ui-badge size="sm" text="Teal Button" color="teal" as="button" />
<ui-badge size="sm" text="Violet Button" color="violet" as="button" />
<ui-badge size="sm" text="White Button" color="white" as="button" />
<ui-badge size="sm" text="Yellow Button" color="yellow" as="button" />
</div>
</section>

Expand Down