From 1d98d356be398fec12cd433187db17f65d85e8cc Mon Sep 17 00:00:00 2001 From: Johannes Millan Date: Mon, 20 Apr 2026 01:26:52 +0200 Subject: [PATCH] style: replace hardcoded styles with design tokens (#7281) Mechanical sweep replacing hardcoded values with documented design tokens per docs/styling-guide.md. No visual regressions intended; transition durations align to nearest token bucket (0.1s -> --transition-fast 90ms, 0.3s/200ms -> --transition-duration-m 225ms). - Transitions/animations: done-toggle, heatmap, progress-circle, task, add-task-bar, main-header - Colors: #fff -> --card-bg in task time-badge, #333 -> --text-color in work-view no-tasks-label - Spacing: 4px/16px -> --s-half/--s2 in help-box, add-task-bar; -12px -> calc(var(--s) * -1.5) in dialog-deadline Note: lint not run locally (node_modules unavailable in env); changes are 1:1 token substitutions matching existing indentation. Co-authored-by: Claude --- src/app/core-ui/main-header/main-header.component.scss | 2 +- .../tasks/add-task-bar/add-task-bar.component.scss | 10 +++++----- .../dialog-deadline/dialog-deadline.component.scss | 2 +- src/app/features/tasks/task/_task-controls.scss | 2 +- src/app/features/tasks/task/task.component.scss | 4 ++-- src/app/features/work-view/work-view.component.scss | 2 +- src/app/ui/done-toggle/done-toggle.component.scss | 4 ++-- src/app/ui/heatmap/heatmap.component.scss | 2 +- src/app/ui/help-box/help-box.component.scss | 8 ++++---- .../ui/progress-circle/progress-circle.component.scss | 2 +- 10 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/app/core-ui/main-header/main-header.component.scss b/src/app/core-ui/main-header/main-header.component.scss index 4195ec252d..86baa521cf 100644 --- a/src/app/core-ui/main-header/main-header.component.scss +++ b/src/app/core-ui/main-header/main-header.component.scss @@ -79,7 +79,7 @@ &:has(page-title [aria-expanded='true']) ::ng-deep .current-task-title { opacity: 0; pointer-events: none; - transition: opacity 0.3s ease-out; + transition: opacity var(--transition-duration-m) ease-out; } } diff --git a/src/app/features/tasks/add-task-bar/add-task-bar.component.scss b/src/app/features/tasks/add-task-bar/add-task-bar.component.scss index 7ea6f7e42c..68dd4c800e 100644 --- a/src/app/features/tasks/add-task-bar/add-task-bar.component.scss +++ b/src/app/features/tasks/add-task-bar/add-task-bar.component.scss @@ -15,8 +15,8 @@ @include mq(xs, max) { transform: translateX(0) !important; - left: 4px; - right: 4px; + left: var(--s-half); + right: var(--s-half); } @include mq(xs) { @@ -34,7 +34,7 @@ :host-context(.isTouchOnly).global { top: auto; bottom: calc(var(--keyboard-height) + var(--s)); - transition: bottom 0.3s ease-out; + transition: bottom var(--transition-duration-m) ease-out; } .add-task-container { @@ -147,7 +147,7 @@ } .spinner { - animation: 200ms fadeIn; + animation: var(--transition-duration-m) fadeIn; position: absolute; right: 50%; bottom: 2px; @@ -171,7 +171,7 @@ //// Autocomplete panel styles ::ng-deep .isTouchPrimary .add-task-bar-panel { top: auto; - bottom: 4px; + bottom: var(--s-half); } ::ng-deep .add-task-bar-panel { diff --git a/src/app/features/tasks/dialog-deadline/dialog-deadline.component.scss b/src/app/features/tasks/dialog-deadline/dialog-deadline.component.scss index 7847d774ae..aae7fb7a46 100644 --- a/src/app/features/tasks/dialog-deadline/dialog-deadline.component.scss +++ b/src/app/features/tasks/dialog-deadline/dialog-deadline.component.scss @@ -67,7 +67,7 @@ mat-dialog-content { z-index: 11; box-shadow: var(--whiteframe-shadow-1dp); border-radius: 8px; - margin-top: -12px; + margin-top: calc(var(--s) * -1.5); white-space: nowrap; transform: translateX(-50%); diff --git a/src/app/features/tasks/task/_task-controls.scss b/src/app/features/tasks/task/_task-controls.scss index f25e315901..f981bf10ca 100644 --- a/src/app/features/tasks/task/_task-controls.scss +++ b/src/app/features/tasks/task/_task-controls.scss @@ -410,7 +410,7 @@ done-toggle { @include extraBorder(); border-radius: var(--card-border-radius); white-space: nowrap; - background: #fff; + background: var(--card-bg); // avoid affecting done toggle pointer-events: none; diff --git a/src/app/features/tasks/task/task.component.scss b/src/app/features/tasks/task/task.component.scss index fa9244daf5..72e95c72ce 100644 --- a/src/app/features/tasks/task/task.component.scss +++ b/src/app/features/tasks/task/task.component.scss @@ -7,8 +7,8 @@ background: var(--bg-lighter); box-shadow: var(--whiteframe-shadow-8dp); transition: - background 150ms ease-out, - box-shadow 150ms ease-out; + background var(--transition-duration-s) ease-out, + box-shadow var(--transition-duration-s) ease-out; .box { box-shadow: none; diff --git a/src/app/features/work-view/work-view.component.scss b/src/app/features/work-view/work-view.component.scss index 3cf43f1eb9..acd692560f 100644 --- a/src/app/features/work-view/work-view.component.scss +++ b/src/app/features/work-view/work-view.component.scss @@ -224,7 +224,7 @@ finish-day-btn, @include center; text-align: center; font-weight: 400; - color: #333; + color: var(--text-color); @include darkTheme() { color: var(--text-color-most-intense); diff --git a/src/app/ui/done-toggle/done-toggle.component.scss b/src/app/ui/done-toggle/done-toggle.component.scss index 9bad0557cd..0eb71d3d3d 100644 --- a/src/app/ui/done-toggle/done-toggle.component.scss +++ b/src/app/ui/done-toggle/done-toggle.component.scss @@ -45,7 +45,7 @@ $check-len: 18; .done-toggle-svg { width: 22px; height: 22px; - transition: transform 150ms ease; + transition: transform var(--transition-duration-s) ease; } &.is-scale-up .done-toggle-svg { @@ -86,7 +86,7 @@ $check-len: 18; .done-check { opacity: 0.5; - animation: draw-check 150ms ease-out forwards; + animation: draw-check var(--transition-duration-s) ease-out forwards; } } diff --git a/src/app/ui/heatmap/heatmap.component.scss b/src/app/ui/heatmap/heatmap.component.scss index 8d7b9c374c..4b39a61c31 100644 --- a/src/app/ui/heatmap/heatmap.component.scss +++ b/src/app/ui/heatmap/heatmap.component.scss @@ -107,7 +107,7 @@ height: 12px; border-radius: 2px; cursor: pointer; - transition: all 0.1s ease; + transition: var(--transition-fast); flex-shrink: 0; &.empty { diff --git a/src/app/ui/help-box/help-box.component.scss b/src/app/ui/help-box/help-box.component.scss index f0f2cf1ab4..f1bee5cc93 100644 --- a/src/app/ui/help-box/help-box.component.scss +++ b/src/app/ui/help-box/help-box.component.scss @@ -1,7 +1,7 @@ :host { display: block; position: sticky; - top: 16px; + top: var(--s2); background: var(--bg); z-index: 200; margin: var(--s); @@ -18,8 +18,8 @@ .close-btn { position: absolute; - top: 4px; - right: 4px; + top: var(--s-half); + right: var(--s-half); } //.help-box-content {} @@ -27,7 +27,7 @@ :host-context([dir='rtl']) { .close-btn { right: unset; - left: 4px; + left: var(--s-half); } } } diff --git a/src/app/ui/progress-circle/progress-circle.component.scss b/src/app/ui/progress-circle/progress-circle.component.scss index fc08205403..4590d2c763 100644 --- a/src/app/ui/progress-circle/progress-circle.component.scss +++ b/src/app/ui/progress-circle/progress-circle.component.scss @@ -23,7 +23,7 @@ .progress-circle__progress { stroke: currentColor; - transition: stroke-dashoffset 0.3s ease; + transition: stroke-dashoffset var(--transition-duration-m) ease; } .progress-circle__pulse {