From d92f7ca4462cbc943d48635e0a0568b209134006 Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Sat, 4 Apr 2026 06:50:19 +0200
Subject: [PATCH] fix(design): replace hardcoded values with design tokens

Audit found ~35 violations against the token system. Fixed:
- Hardcoded shadows in layout.css replaced with --shadow-sm/md
- 8 rgba colors extracted to new glass tokens (--color-glass-*)
- border-radius: 50% replaced with var(--radius-full)
- ~25 off-grid spacing values (5px, 6px, 7px, 14px, 15px, 22px,
  26px, 34px) aligned to 4px grid using space tokens
---
 public/styles/budget.css    |  2 +-
 public/styles/calendar.css  | 18 +++++++++---------
 public/styles/dashboard.css | 26 +++++++++++++-------------
 public/styles/layout.css    | 22 +++++++++++-----------
 public/styles/shopping.css  | 18 +++++++++---------
 public/styles/tasks.css     | 12 ++++++------
 public/styles/tokens.css    |  6 ++++++
 7 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/public/styles/budget.css b/public/styles/budget.css
index 56f268f..f1146c3 100644
--- a/public/styles/budget.css
+++ b/public/styles/budget.css
@@ -151,7 +151,7 @@
 
 .budget-bar-row__track {
   flex: 1;
-  height: 10px;
+  height: var(--space-2);
   background-color: var(--color-surface-2);
   border-radius: var(--radius-full);
   overflow: hidden;
diff --git a/public/styles/calendar.css b/public/styles/calendar.css
index a5ec30e..1a04153 100644
--- a/public/styles/calendar.css
+++ b/public/styles/calendar.css
@@ -161,8 +161,8 @@
   font-size: var(--text-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
-  width: 26px;
-  height: 26px;
+  width: var(--space-6);
+  height: var(--space-6);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -183,9 +183,9 @@
 .month-day__event {
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
-  padding: 1px 5px;
+  padding: var(--space-px) var(--space-1);
   border-radius: var(--radius-xs);
-  margin-bottom: 2px;
+  margin-bottom: var(--space-0h);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -325,7 +325,7 @@
   top: -4px;
   width: 10px;
   height: 10px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   background-color: var(--color-danger);
 }
 
@@ -334,7 +334,7 @@
   left: 2px;
   right: 2px;
   border-radius: var(--radius-xs);
-  padding: 2px 5px;
+  padding: var(--space-0h) var(--space-1);
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
   color: #ffffff;
@@ -467,7 +467,7 @@
   height: 10px;
   border-radius: var(--radius-full);
   flex-shrink: 0;
-  margin-top: 5px;
+  margin-top: var(--space-1);
 }
 
 .agenda-event__body {
@@ -629,12 +629,12 @@
 .allday-event {
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
-  padding: 1px 6px;
+  padding: var(--space-px) var(--space-1);
   border-radius: var(--radius-xs);
   color: #ffffff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: 2px;
+  margin-bottom: var(--space-0h);
   cursor: pointer;
 }
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index 9c87dbc..b01ed61 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -130,8 +130,8 @@
 .greeting-chip {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  background: rgba(255, 255, 255, 0.18);
+  gap: var(--space-1);
+  background: var(--color-glass);
   color: #ffffff;
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
@@ -140,7 +140,7 @@
 }
 
 .greeting-chip--warn {
-  background: rgba(255, 59, 48, 0.35);
+  background: var(--color-danger-translucent);
 }
 
 /* --------------------------------------------------------
@@ -266,11 +266,11 @@
 }
 
 .task-item__priority {
-  width: 7px;
-  height: 7px;
+  width: var(--space-2);
+  height: var(--space-2);
   border-radius: var(--radius-full);
   flex-shrink: 0;
-  margin-top: 5px;
+  margin-top: var(--space-1);
 }
 
 .task-item__priority--urgent { background-color: var(--color-priority-urgent); }
@@ -305,8 +305,8 @@
 }
 
 .task-item__avatar {
-  width: 22px;
-  height: 22px;
+  width: var(--space-5);
+  height: var(--space-5);
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
@@ -374,7 +374,7 @@
 .event-time-badge {
   font-size: var(--text-xs);
   font-weight: var(--font-weight-semibold);
-  padding: 1px 5px;
+  padding: var(--space-px) var(--space-1);
   border-radius: var(--radius-full);
   background-color: var(--color-surface-3);
   color: var(--color-text-secondary);
@@ -559,7 +559,7 @@
   width: 28px;
   height: 28px;
   border: none;
-  background: rgba(255,255,255,0.2);
+  background: var(--color-glass);
   color: #fff;
   border-radius: var(--radius-full);
   cursor: pointer;
@@ -568,7 +568,7 @@
 }
 
 .weather-widget__refresh:hover {
-  background: rgba(255,255,255,0.35);
+  background: var(--color-glass-hover);
 }
 
 .weather-widget__refresh:disabled {
@@ -626,7 +626,7 @@
 
 .weather-forecast {
   display: flex;
-  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  border-top: 1px solid var(--color-glass-border);
   padding: var(--space-2) var(--space-4);
   gap: var(--space-3);
 }
@@ -687,7 +687,7 @@
 
   .weather-forecast {
     border-top: none;
-    border-left: 1px solid rgba(255, 255, 255, 0.15);
+    border-left: 1px solid var(--color-glass-border);
     flex: 1;
     align-items: center;
     padding: var(--space-3) var(--space-4);
diff --git a/public/styles/layout.css b/public/styles/layout.css
index d85a0aa..2f73859 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -129,14 +129,14 @@
 .nav-bottom__dots {
   display: flex;
   justify-content: center;
-  gap: 6px;
-  padding: 5px 0 2px;
+  gap: var(--space-2);
+  padding: var(--space-1) 0 var(--space-0h);
 }
 
 .nav-bottom__dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
+  width: var(--space-1);
+  height: var(--space-1);
+  border-radius: var(--radius-full);
   background-color: var(--color-text-tertiary);
   opacity: 0.25;
   transition: opacity 0.2s ease, transform 0.2s ease;
@@ -196,8 +196,8 @@
 }
 
 .nav-item__icon {
-  width: 22px;
-  height: 22px;
+  width: var(--space-5);
+  height: var(--space-5);
   flex-shrink: 0;
 }
 
@@ -394,8 +394,8 @@
     content: '';
     position: absolute;
     left: 0;
-    top: 6px;
-    bottom: 6px;
+    top: var(--space-2);
+    bottom: var(--space-2);
     width: 3px;
     border-radius: 0 var(--radius-full) var(--radius-full) 0;
     background: var(--active-module-accent, var(--color-accent));
@@ -776,12 +776,12 @@
 .btn--primary {
   background-color: var(--color-btn-primary);
   color: #ffffff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn--primary:hover {
   background-color: var(--color-btn-primary-hover);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-md);
 }
 
 .btn--secondary {
diff --git a/public/styles/shopping.css b/public/styles/shopping.css
index 6d0931b..3fa499a 100644
--- a/public/styles/shopping.css
+++ b/public/styles/shopping.css
@@ -72,14 +72,14 @@
 }
 
 .list-tab__count {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(--color-glass);
   border-radius: var(--radius-full);
-  padding: 1px 6px;
+  padding: var(--space-px) var(--space-1);
   font-size: var(--text-xs);
 }
 
 .list-tab--active .list-tab__count {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: var(--color-glass-hover);
 }
 
 .list-tab__new {
@@ -126,8 +126,8 @@
 }
 
 .list-header__edit-icon {
-  width: 15px;
-  height: 15px;
+  width: var(--space-4);
+  height: var(--space-4);
   color: var(--color-text-disabled);
 }
 
@@ -301,8 +301,8 @@
 }
 
 .item-category__icon {
-  width: 14px;
-  height: 14px;
+  width: var(--space-3);
+  height: var(--space-3);
 }
 
 /* --------------------------------------------------------
@@ -360,8 +360,8 @@
 }
 
 .item-check__icon {
-  width: 14px;
-  height: 14px;
+  width: var(--space-3);
+  height: var(--space-3);
   color: #ffffff;
   display: none;
 }
diff --git a/public/styles/tasks.css b/public/styles/tasks.css
index 0b9d01a..48c3464 100644
--- a/public/styles/tasks.css
+++ b/public/styles/tasks.css
@@ -110,7 +110,7 @@
   background-color: var(--color-surface);
   color: var(--color-text-secondary);
   transition: all var(--transition-fast);
-  min-height: 34px;
+  min-height: 32px;
 }
 
 .filter-chip:hover:not(.filter-chip--active) {
@@ -227,8 +227,8 @@
 
 /* Status-Checkbox */
 .task-status-btn {
-  width: 22px;
-  height: 22px;
+  width: var(--space-5);
+  height: var(--space-5);
   border-radius: var(--radius-full);
   border: 2px solid var(--color-border);
   background: none;
@@ -315,8 +315,8 @@
 .priority-badge--urgent  { color: var(--color-priority-urgent); background-color: var(--color-priority-urgent-bg); }
 
 .priority-dot {
-  width: 6px;
-  height: 6px;
+  width: var(--space-1);
+  height: var(--space-1);
   border-radius: var(--radius-full);
   flex-shrink: 0;
 }
@@ -332,7 +332,7 @@
   color: var(--color-text-secondary);
   display: flex;
   align-items: center;
-  gap: 3px;
+  gap: var(--space-1);
 }
 
 .due-date--overdue { color: var(--color-danger); font-weight: var(--font-weight-semibold); }
diff --git a/public/styles/tokens.css b/public/styles/tokens.css
index d5b1950..5eb8ef6 100644
--- a/public/styles/tokens.css
+++ b/public/styles/tokens.css
@@ -131,6 +131,12 @@
   --color-overlay: rgba(0, 0, 0, 0.45);
   --color-overlay-light: rgba(0, 0, 0, 0.2);
 
+  /* Glass-Overlays (fuer Elemente auf farbigen Hintergruenden) */
+  --color-glass:       rgba(255, 255, 255, 0.18);
+  --color-glass-hover: rgba(255, 255, 255, 0.3);
+  --color-glass-border: rgba(255, 255, 255, 0.15);
+  --color-danger-translucent: rgba(255, 59, 48, 0.35);
+
   /* --------------------------------------------------------
    * 8. Schatten
    *    3 Stufen: subtle (Karten), medium (Dropdowns, Hover),