Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: badge code_to_icon refactor + core variant-* → preset-* migration

Browse Source 
badge ae_comp__badge_obj_view_v2.svelte:
- Replace FA HTML string dict (code_to_html) with Lucide component map
  (code_to_icon) — no FontAwesome dependency for dietary/option icons
- option_1 maps: Biohazard (generic/allergy), Utensils (dietary), Bone,
  Fish, Carrot for specific diets
- option_2 maps: Asterisk (generic flag), Hand (first-time attendee)
- Template: replace {@html option_other_*} with {@const Icon}<Icon /> pattern
- Back-of-badge: shows text label + inline icon

core/ (21 files):
- variant-soft-* → preset-tonal-* (6 variants)
- variant-filled-* → preset-filled-* (6 variants)
- variant-glass-surface → preset-tonal-surface (Skeleton v4 has no glass)
- bare variant-soft → preset-tonal-surface

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-16 14:42:28 -04:00
parent 37c9d830f6
commit 80baaa9d91
22 changed files with 289 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/routes/core/lookups/+page.svelte
View File

@@ -68,7 +68,7 @@
</div>
</div>
<div class="flex gap-2">
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
{#if loading}
<RefreshCcw size={16} class="mr-2 animate-spin" /> Loading...
{:else}
@@ -85,11 +85,11 @@
{:else}
<div class="space-y-6 animate-fade-in">
<!-- 1. Countries -->
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Globe size={20} class="text-secondary-500" />
Country Reference
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
<span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
</h3>
<div class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
@@ -104,7 +104,7 @@
{#each lookups.countries as c (c.alpha_2_code)}
<tr class="transition-colors">
<td class="font-bold">{c.name || c.english_short_name}</td>
<td class="text-center"><span class="badge variant-soft-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
<td class="text-center"><span class="badge preset-tonal-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
</tr>
{/each}
</tbody>
@@ -113,11 +113,11 @@
</div>
<!-- 2. Subdivisions -->
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<MapPin size={20} class="text-primary-500" />
Country Subdivisions (States/Provinces)
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
<span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
</h3>
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
@@ -134,7 +134,7 @@
<tr class="transition-colors">
<td class="opacity-60">{s.country_alpha_2_code}</td>
<td class="font-bold">{s.name}</td>
<td class="text-center"><span class="badge variant-soft-surface font-mono">{s.code}</span></td>
<td class="text-center"><span class="badge preset-tonal-surface font-mono">{s.code}</span></td>
</tr>
{/each}
</tbody>
@@ -143,15 +143,15 @@
</div>
<!-- 3. Time Zones -->
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
<div class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
<h3 class="h4 font-bold flex items-center gap-2">
<Clock size={20} class="text-tertiary-500" />
Time Zone Reference
<span class="badge variant-soft-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
<span class="badge preset-tonal-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
</h3>
<button
class="btn btn-sm transition-all {tz_only_priority ? 'variant-filled-warning' : 'variant-soft-surface'}"
class="btn btn-sm transition-all {tz_only_priority ? 'preset-filled-warning' : 'preset-tonal-surface'}"
onclick={toggle_tz_priority}
disabled={loading}
>
@@ -172,7 +172,7 @@
{#each lookups.time_zones as tz (tz.name)}
<tr class="transition-colors">
<td class="font-bold">{tz.name}</td>
<td class="text-right"><span class="badge variant-soft-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
<td class="text-right"><span class="badge preset-tonal-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
</tr>
{/each}
</tbody>
@@ -181,7 +181,7 @@
</div>
</div>
<div class="card p-4 variant-soft-surface border border-surface-500/10 flex items-center gap-3">
<div class="card p-4 preset-tonal-surface border border-surface-500/10 flex items-center gap-3">
<Info size={16} class="text-primary-500" />
<p class="text-xs opacity-70">Lookup data is synchronized with the global system database and used for addresses, event scheduling, and localized displays.</p>
</div>