refactor(ui): btn-warning Button-Variante + gelb-Token statt inline-style
Deploy / verify (push) Successful in 1m18s
Deploy / deploy (push) Successful in 1m33s

gelb-Palette ins @theme (fixt auch bisher wirkungslose gelb-* Klassen im
Deadline-Banner), .btn-warning als wiederverwendbare Variante; Termin-melden-
Button nutzt sie statt inline-style/arbitrary utilities.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-06-29 12:47:44 +02:00
parent 2c61cc03b2
commit 4d45f56719
2 changed files with 24 additions and 3 deletions
+23 -1
View File
@@ -90,6 +90,18 @@
--color-fire-900: #981b18;
--color-fire-950: #5d0f0b;
/* Palette: Gelb (Signal / Warnung / Aufmerksamkeit) */
--color-gelb-50: #fefce8;
--color-gelb-100: #fef9c3;
--color-gelb-200: #fef08a;
--color-gelb-300: #fde047;
--color-gelb-400: #facc15;
--color-gelb-500: #eab308;
--color-gelb-600: #ca8a04;
--color-gelb-700: #a16207;
--color-gelb-800: #854d0e;
--color-gelb-900: #713f12;
/* Palette: Stein (Neutrals) */
--color-stein-0: #ffffff;
--color-stein-50: #f7f8f7;
@@ -351,7 +363,8 @@ main ol:not(.not-prose):where(:not(.not-prose *)) li {
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-outline {
.btn-outline,
.btn-warning {
@apply inline-flex items-center gap-1 no-underline whitespace-nowrap transition-colors duration-200 font-medium px-4 py-2 rounded-xs;
}
@@ -391,6 +404,15 @@ main ol:not(.not-prose):where(:not(.not-prose *)) li {
@apply bg-stein-100;
}
/* Buttons Gelb (Signal / Aufmerksamkeit, z. B. Termin melden) */
.btn-warning {
@apply border border-gelb-500 bg-gelb-300 text-gelb-900 shadow-sm;
}
.btn-warning:hover {
@apply bg-gelb-400;
}
/* Größen-Modifier — nach den btn-* definiert damit override greift */
.btn-sm {
@apply px-2 py-1 text-xs gap-1;
@@ -965,8 +965,7 @@
>
<a
href="/termin-melden"
class="btn-sm inline-flex items-center gap-1.5 min-h-[36px] rounded-md border px-3 font-semibold no-underline"
style="background:#fde047;border-color:#eab308;color:#713f12"
class="btn-warning btn-sm inline-flex items-center gap-1.5 min-h-[36px]"
>
<Icon icon="lucide:plus" class="size-3.5 shrink-0" aria-hidden="true" />
Termin melden