From 5a291a53dd0c71f86b6e9264ec5163327d86b7cb Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 11:43:19 +0200
Subject: [PATCH] refactor(ui): --pill-radius CSS-Variable (Item F)

border-radius: 999px war 15x im CSS dupliziert. Ausgelagert als
:root --pill-radius Variable im globalen :root-Block in +layout.svelte,
Call-Sites auf var(--pill-radius) umgestellt.

Bewusst NICHT angefasst (plan war "nur Werte die mehrfach vorkommen"):
- z-index: 10 Distinct Values in 14 Sites, bilden ein implizites
  Layer-System. Konsolidieren = behavior-change-Risiko ohne konkreten
  Nutzen. Wenn kuenftig einheitliche Modal-/Popover-Layer noetig,
  separate Phase.
- setTimeout(): 3 Sites, jeder mit eigener Semantik (Debounce/Print/
  Spinner). Kein DRY-Nutzen durch Extraktion.

Gate: svelte-check 0 Warnings, 184/184 Tests, Build clean, kein
sichtbarer Unterschied (einzige Aenderung: selber Wert ueber Variable).

Refs docs/superpowers/plans/2026-04-19-post-review-roadmap.md Item F.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/ProfileSwitcher.svelte | 2 +-
 src/lib/components/RecipeView.svelte      | 2 +-
 src/lib/components/SyncIndicator.svelte   | 2 +-
 src/lib/components/UpdateToast.svelte     | 6 +++---
 src/routes/+layout.svelte                 | 9 ++++++---
 src/routes/+page.svelte                   | 4 ++--
 src/routes/admin/+layout.svelte           | 2 +-
 src/routes/admin/profiles/+page.svelte    | 2 +-
 src/routes/recipes/+page.svelte           | 2 +-
 src/routes/wishlist/+page.svelte          | 2 +-
 10 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/ProfileSwitcher.svelte b/src/lib/components/ProfileSwitcher.svelte
index d68db80..9f674d6 100644
--- a/src/lib/components/ProfileSwitcher.svelte
+++ b/src/lib/components/ProfileSwitcher.svelte
@@ -99,7 +99,7 @@
     align-items: center;
     gap: 0.4rem;
     padding: 0.5rem 0.9rem;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     border: 1px solid #cfd9d1;
     background: white;
     font-size: 0.95rem;
diff --git a/src/lib/components/RecipeView.svelte b/src/lib/components/RecipeView.svelte
index d4938b5..e9ef736 100644
--- a/src/lib/components/RecipeView.svelte
+++ b/src/lib/components/RecipeView.svelte
@@ -204,7 +204,7 @@
   .pill {
     padding: 0.15rem 0.55rem;
     background: #eaf4ed;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.8rem;
     color: #2b6a3d;
   }
diff --git a/src/lib/components/SyncIndicator.svelte b/src/lib/components/SyncIndicator.svelte
index e3b7354..df97167 100644
--- a/src/lib/components/SyncIndicator.svelte
+++ b/src/lib/components/SyncIndicator.svelte
@@ -77,7 +77,7 @@
     padding: 0.3rem 0.65rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #555;
     font-size: 0.78rem;
     cursor: pointer;
diff --git a/src/lib/components/UpdateToast.svelte b/src/lib/components/UpdateToast.svelte
index bcf383b..6634345 100644
--- a/src/lib/components/UpdateToast.svelte
+++ b/src/lib/components/UpdateToast.svelte
@@ -28,7 +28,7 @@
     padding: 0.6rem 0.85rem 0.6rem 1.1rem;
     background: #1a1a1a;
     color: white;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     z-index: 500;
     max-width: calc(100% - 2rem);
@@ -58,7 +58,7 @@
     background: #2b6a3d;
     color: white;
     border: 0;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.88rem;
     cursor: pointer;
     font-weight: 600;
@@ -75,7 +75,7 @@
     padding: 4px;
     display: inline-flex;
     align-items: center;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     flex-shrink: 0;
   }
   .dismiss:hover {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6450400..bf32315 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -386,6 +386,9 @@
 </main>
 
 <style>
+  :global(:root) {
+    --pill-radius: 999px;
+  }
   :global(html, body) {
     margin: 0;
     padding: 0;
@@ -429,7 +432,7 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     text-decoration: none;
     flex-shrink: 0;
@@ -621,7 +624,7 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     text-decoration: none;
     font-size: 1.15rem;
     position: relative;
@@ -636,7 +639,7 @@
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     background: #c53030;
     color: white;
     font-size: 0.7rem;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 504923e..e906e02 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -653,7 +653,7 @@
     padding: 0.4rem 0.85rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     font-size: 0.88rem;
     cursor: pointer;
@@ -760,7 +760,7 @@
     right: 0.4rem;
     width: 28px;
     height: 28px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     border: 0;
     background: rgba(255, 255, 255, 0.9);
     color: #444;
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index febb7ed..31d0377 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -42,7 +42,7 @@
     padding: 0.5rem 0.95rem 0.5rem 0.8rem;
     background: white;
     border: 1px solid #e4eae7;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     text-decoration: none;
     color: #444;
     font-size: 0.95rem;
diff --git a/src/routes/admin/profiles/+page.svelte b/src/routes/admin/profiles/+page.svelte
index b398589..528822e 100644
--- a/src/routes/admin/profiles/+page.svelte
+++ b/src/routes/admin/profiles/+page.svelte
@@ -185,7 +185,7 @@
     padding: 0.15rem 0.5rem;
     background: #eaf4ed;
     color: #2b6a3d;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.75rem;
   }
   .actions {
diff --git a/src/routes/recipes/+page.svelte b/src/routes/recipes/+page.svelte
index 35422a1..a4015d6 100644
--- a/src/routes/recipes/+page.svelte
+++ b/src/routes/recipes/+page.svelte
@@ -441,7 +441,7 @@
     padding: 0.6rem 0.9rem;
     font-size: 0.95rem;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     background: white;
     min-height: 44px;
   }
diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 20d9f2b..448ef33 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -185,7 +185,7 @@
     padding: 0.4rem 0.85rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     font-size: 0.88rem;
     cursor: pointer;