openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design): replace hardcoded values with design tokens

Browse Source 
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
This commit is contained in:
Ulas
2026-04-04 06:50:19 +02:00
parent 364d029950
commit d92f7ca446
7 changed files with 55 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/budget.css
+1 -1
View File
@@ -151,7 +151,7 @@
.budget-bar-row__track { .budget-bar-row__track {
flex: 1; flex: 1;
height: 10px; height: var(--space-2);
background-color: var(--color-surface-2); background-color: var(--color-surface-2);
border-radius: var(--radius-full); border-radius: var(--radius-full);
overflow: hidden; overflow: hidden;
public/styles/calendar.css
+9 -9
View File
@@ -161,8 +161,8 @@
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--color-text-secondary); color: var(--color-text-secondary);
width: 26px; width: var(--space-6);
height: 26px; height: var(--space-6);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -183,9 +183,9 @@
.month-day__event { .month-day__event {
font-size: var(--text-xs); font-size: var(--text-xs);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
padding: 1px 5px; padding: var(--space-px) var(--space-1);
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
margin-bottom: 2px; margin-bottom: var(--space-0h);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -325,7 +325,7 @@
top: -4px; top: -4px;
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: var(--radius-full);
background-color: var(--color-danger); background-color: var(--color-danger);
} }
@@ -334,7 +334,7 @@
left: 2px; left: 2px;
right: 2px; right: 2px;
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
padding: 2px 5px; padding: var(--space-0h) var(--space-1);
font-size: var(--text-xs); font-size: var(--text-xs);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: #ffffff; color: #ffffff;
@@ -467,7 +467,7 @@
height: 10px; height: 10px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
flex-shrink: 0; flex-shrink: 0;
margin-top: 5px; margin-top: var(--space-1);
} }
.agenda-event__body { .agenda-event__body {
@@ -629,12 +629,12 @@
.allday-event { .allday-event {
font-size: var(--text-xs); font-size: var(--text-xs);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
padding: 1px 6px; padding: var(--space-px) var(--space-1);
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
color: #ffffff; color: #ffffff;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-bottom: 2px; margin-bottom: var(--space-0h);
cursor: pointer; cursor: pointer;
} }
public/styles/dashboard.css
+13 -13
View File
@@ -130,8 +130,8 @@
.greeting-chip { .greeting-chip {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: var(--space-1);
background: rgba(255, 255, 255, 0.18); background: var(--color-glass);
color: #ffffff; color: #ffffff;
font-size: var(--text-xs); font-size: var(--text-xs);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
@@ -140,7 +140,7 @@
} }
.greeting-chip--warn { .greeting-chip--warn {
background: rgba(255, 59, 48, 0.35); background: var(--color-danger-translucent);
} }
/* -------------------------------------------------------- /* --------------------------------------------------------
@@ -266,11 +266,11 @@
} }
.task-item__priority { .task-item__priority {
width: 7px; width: var(--space-2);
height: 7px; height: var(--space-2);
border-radius: var(--radius-full); border-radius: var(--radius-full);
flex-shrink: 0; flex-shrink: 0;
margin-top: 5px; margin-top: var(--space-1);
} }
.task-item__priority--urgent { background-color: var(--color-priority-urgent); } .task-item__priority--urgent { background-color: var(--color-priority-urgent); }
@@ -305,8 +305,8 @@
} }
.task-item__avatar { .task-item__avatar {
width: 22px; width: var(--space-5);
height: 22px; height: var(--space-5);
border-radius: var(--radius-full); border-radius: var(--radius-full);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -374,7 +374,7 @@
.event-time-badge { .event-time-badge {
font-size: var(--text-xs); font-size: var(--text-xs);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
padding: 1px 5px; padding: var(--space-px) var(--space-1);
border-radius: var(--radius-full); border-radius: var(--radius-full);
background-color: var(--color-surface-3); background-color: var(--color-surface-3);
color: var(--color-text-secondary); color: var(--color-text-secondary);
@@ -559,7 +559,7 @@
width: 28px; width: 28px;
height: 28px; height: 28px;
border: none; border: none;
background: rgba(255,255,255,0.2); background: var(--color-glass);
color: #fff; color: #fff;
border-radius: var(--radius-full); border-radius: var(--radius-full);
cursor: pointer; cursor: pointer;
@@ -568,7 +568,7 @@
} }
.weather-widget__refresh:hover { .weather-widget__refresh:hover {
background: rgba(255,255,255,0.35); background: var(--color-glass-hover);
} }
.weather-widget__refresh:disabled { .weather-widget__refresh:disabled {
@@ -626,7 +626,7 @@
.weather-forecast { .weather-forecast {
display: flex; 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); padding: var(--space-2) var(--space-4);
gap: var(--space-3); gap: var(--space-3);
} }
@@ -687,7 +687,7 @@
.weather-forecast { .weather-forecast {
border-top: none; border-top: none;
border-left: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid var(--color-glass-border);
flex: 1; flex: 1;
align-items: center; align-items: center;
padding: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4);
public/styles/layout.css
+11 -11
View File
@@ -129,14 +129,14 @@
.nav-bottom__dots { .nav-bottom__dots {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 6px; gap: var(--space-2);
padding: 5px 0 2px; padding: var(--space-1) 0 var(--space-0h);
} }
.nav-bottom__dot { .nav-bottom__dot {
width: 5px; width: var(--space-1);
height: 5px; height: var(--space-1);
border-radius: 50%; border-radius: var(--radius-full);
background-color: var(--color-text-tertiary); background-color: var(--color-text-tertiary);
opacity: 0.25; opacity: 0.25;
transition: opacity 0.2s ease, transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease;
@@ -196,8 +196,8 @@
} }
.nav-item__icon { .nav-item__icon {
width: 22px; width: var(--space-5);
height: 22px; height: var(--space-5);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -394,8 +394,8 @@
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
top: 6px; top: var(--space-2);
bottom: 6px; bottom: var(--space-2);
width: 3px; width: 3px;
border-radius: 0 var(--radius-full) var(--radius-full) 0; border-radius: 0 var(--radius-full) var(--radius-full) 0;
background: var(--active-module-accent, var(--color-accent)); background: var(--active-module-accent, var(--color-accent));
@@ -776,12 +776,12 @@
.btn--primary { .btn--primary {
background-color: var(--color-btn-primary); background-color: var(--color-btn-primary);
color: #ffffff; color: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.btn--primary:hover { .btn--primary:hover {
background-color: var(--color-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 { .btn--secondary {
public/styles/shopping.css
+9 -9
View File
@@ -72,14 +72,14 @@
} }
.list-tab__count { .list-tab__count {
background-color: rgba(255, 255, 255, 0.25); background-color: var(--color-glass);
border-radius: var(--radius-full); border-radius: var(--radius-full);
padding: 1px 6px; padding: var(--space-px) var(--space-1);
font-size: var(--text-xs); font-size: var(--text-xs);
} }
.list-tab--active .list-tab__count { .list-tab--active .list-tab__count {
background-color: rgba(255, 255, 255, 0.3); background-color: var(--color-glass-hover);
} }
.list-tab__new { .list-tab__new {
@@ -126,8 +126,8 @@
} }
.list-header__edit-icon { .list-header__edit-icon {
width: 15px; width: var(--space-4);
height: 15px; height: var(--space-4);
color: var(--color-text-disabled); color: var(--color-text-disabled);
} }
@@ -301,8 +301,8 @@
} }
.item-category__icon { .item-category__icon {
width: 14px; width: var(--space-3);
height: 14px; height: var(--space-3);
} }
/* -------------------------------------------------------- /* --------------------------------------------------------
@@ -360,8 +360,8 @@
} }
.item-check__icon { .item-check__icon {
width: 14px; width: var(--space-3);
height: 14px; height: var(--space-3);
color: #ffffff; color: #ffffff;
display: none; display: none;
} }
public/styles/tasks.css
+6 -6
View File
@@ -110,7 +110,7 @@
background-color: var(--color-surface); background-color: var(--color-surface);
color: var(--color-text-secondary); color: var(--color-text-secondary);
transition: all var(--transition-fast); transition: all var(--transition-fast);
min-height: 34px; min-height: 32px;
} }
.filter-chip:hover:not(.filter-chip--active) { .filter-chip:hover:not(.filter-chip--active) {
@@ -227,8 +227,8 @@
/* Status-Checkbox */ /* Status-Checkbox */
.task-status-btn { .task-status-btn {
width: 22px; width: var(--space-5);
height: 22px; height: var(--space-5);
border-radius: var(--radius-full); border-radius: var(--radius-full);
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
background: none; background: none;
@@ -315,8 +315,8 @@
.priority-badge--urgent { color: var(--color-priority-urgent); background-color: var(--color-priority-urgent-bg); } .priority-badge--urgent { color: var(--color-priority-urgent); background-color: var(--color-priority-urgent-bg); }
.priority-dot { .priority-dot {
width: 6px; width: var(--space-1);
height: 6px; height: var(--space-1);
border-radius: var(--radius-full); border-radius: var(--radius-full);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -332,7 +332,7 @@
color: var(--color-text-secondary); color: var(--color-text-secondary);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 3px; gap: var(--space-1);
} }
.due-date--overdue { color: var(--color-danger); font-weight: var(--font-weight-semibold); } .due-date--overdue { color: var(--color-danger); font-weight: var(--font-weight-semibold); }
public/styles/tokens.css
+6
View File
@@ -131,6 +131,12 @@
--color-overlay: rgba(0, 0, 0, 0.45); --color-overlay: rgba(0, 0, 0, 0.45);
--color-overlay-light: rgba(0, 0, 0, 0.2); --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 * 8. Schatten
* 3 Stufen: subtle (Karten), medium (Dropdowns, Hover), * 3 Stufen: subtle (Karten), medium (Dropdowns, Hover),