jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(css): extract .tint-candle / .tint-ember utility classes

Browse source 
The candle tint (color-mix accent fill + matching solid border) was inlined
as style="" in five spots across SeriesPassPurchase and EventSeriesTicketCard.
Promote to .tint-candle / .tint-ember utility classes in main.css and replace
the inline styles with the class.
This commit is contained in:
Jennie Robinson Faber 2026-05-24 22:18:26 +01:00
parent dac423afcd
commit 53f81b3605
3 changed files with 16 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/components/EventSeriesTicketCard.vue
View file

@ -63,8 +63,7 @@
class="flex items-start gap-3 p-3"
>
<div
class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 tint-candle"
>
<span class="text-sm font-bold" style="color: var(--candle)">{{ index + 1 }}</span>
</div>
@ -86,8 +85,7 @@
<!-- Member Benefit Callout -->
<div
v-if="ticket.isFree && isMember"
class="p-4 mb-6"
style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
class="p-4 mb-6 tint-candle"
>
<div class="flex items-start gap-3">
<Icon name="heroicons:sparkles" class="w-5 h-5 flex-shrink-0 mt-0.5" style="color: var(--candle)" />
@ -103,8 +101,7 @@
<!-- Public vs Member Pricing -->
<div
v-if="!ticket.isFree && publicPrice && ticket.type === 'member'"
class="p-4 mb-6"
style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
class="p-4 mb-6 tint-candle"
>
<div class="flex items-start gap-3">
<Icon name="heroicons:tag" class="w-5 h-5 flex-shrink-0 mt-0.5" style="color: var(--candle)" />
@ -162,8 +159,7 @@
<!-- Already Registered -->
<div
v-else-if="alreadyRegistered"
class="p-4"
style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
class="p-4 tint-candle"
>
<div class="flex items-start gap-3">
<Icon name="heroicons:check-badge" class="w-6 h-6 flex-shrink-0" style="color: var(--candle)" />

3
app/components/SeriesPassPurchase.vue
View file

@ -100,8 +100,7 @@
<!-- Member Benefits Notice -->
<div
v-if="passInfo.ticket.isFree && passInfo.memberInfo?.isMember"
class="p-4"
style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
class="p-4 tint-candle"
>
<div class="flex items-start gap-3">
<Icon