From 38c632f88333098623f0071871bccab442faef45 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:28:39 +0100
Subject: [PATCH 1/4] reskin: replace hardcoded styles with design tokens in
 ShellSidebar

Replace raw rgba colors, px font sizes, and magic-number spacing with
design token references (--td-surface-*, --td-color-*, --td-font-*,
--td-border-*, --td-radius-*, --td-shadow-*, --td-transition-*).
Add focus-visible rings to toggle button and nav items for accessibility.
No behavior changes.
---
 .../src/components/shell/ShellSidebar.vue     | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
index 1b37bc345..ce142cd48 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
@@ -313,7 +313,7 @@ defineExpose({
   flex-direction: column;
   transition: width var(--td-transition-smooth);
   flex-shrink: 0;
-  box-shadow: 40px 0 60px -15px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--td-shadow-lg);
   z-index: 40;
 }
 
@@ -325,19 +325,19 @@ defineExpose({
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--td-space-5) var(--td-space-5);
+  padding: var(--td-space-5);
   min-height: var(--td-topbar-height);
 }
 
 .td-sidebar__brand {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--td-space-1);
 }
 
 .td-sidebar__title {
   font-family: 'Manrope', system-ui, sans-serif;
-  font-size: 1.375rem;
+  font-size: var(--td-font-xl);
   font-weight: 800;
   letter-spacing: -0.04em;
   color: var(--td-text-primary);
@@ -346,7 +346,7 @@ defineExpose({
 
 .td-sidebar__subtitle {
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 8px;
+  font-size: var(--td-font-xs);
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
@@ -359,11 +359,18 @@ defineExpose({
   color: var(--td-text-tertiary);
   cursor: pointer;
   padding: var(--td-space-2);
-  transition: color var(--td-transition-fast);
+  border-radius: var(--td-radius-md);
+  transition: color var(--td-transition-fast), background var(--td-transition-fast);
 }
 
 .td-sidebar__toggle:hover {
   color: var(--td-color-ember);
+  background: var(--td-surface-container-high);
+}
+
+.td-sidebar__toggle:focus-visible {
+  box-shadow: var(--td-focus-ring);
+  outline: none;
 }
 
 .td-sidebar__nav {
@@ -384,7 +391,7 @@ defineExpose({
 .td-sidebar__section-label {
   padding: var(--td-space-4) var(--td-space-5);
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 10px;
+  font-size: var(--td-font-xs);
   font-weight: 700;
   color: var(--td-text-tertiary);
   letter-spacing: 0.2em;
@@ -398,14 +405,14 @@ defineExpose({
   padding: var(--td-space-4) var(--td-space-5);
   color: var(--td-text-tertiary);
   text-decoration: none;
-  transition: all 200ms ease;
+  transition: all var(--td-transition-normal);
   cursor: pointer;
   border: none;
   background: transparent;
   width: 100%;
   text-align: left;
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 10px;
+  font-size: var(--td-font-xs);
   font-weight: 400;
   letter-spacing: 0.15em;
   text-transform: uppercase;
@@ -421,8 +428,13 @@ defineExpose({
   transform: translateX(2px);
 }
 
+.td-nav-item:focus-visible {
+  box-shadow: var(--td-focus-ring);
+  outline: none;
+}
+
 .td-nav-item--active {
-  background: linear-gradient(to right, rgba(255, 77, 77, 0.1), transparent);
+  background: linear-gradient(to right, var(--td-color-ember-dim), transparent);
   border-left: 4px solid var(--td-color-ember);
   color: var(--td-color-ember);
   font-weight: 700;
@@ -445,7 +457,7 @@ defineExpose({
 }
 
 .td-nav-item__icon {
-  font-size: 14px;
+  font-size: var(--td-font-base);
   flex-shrink: 0;
   width: 20px;
   text-align: center;
@@ -460,11 +472,11 @@ defineExpose({
   margin-left: auto;
   min-width: 18px;
   height: 18px;
-  padding: 0 5px;
-  border-radius: 9px;
-  background: var(--td-color-ember, #ff4d4d);
-  color: #fff;
-  font-size: 10px;
+  padding: 0 var(--td-space-2);
+  border-radius: 9999px;
+  background: var(--td-color-ember);
+  color: var(--td-text-inverse);
+  font-size: var(--td-font-xs);
   font-weight: 700;
   line-height: 18px;
   text-align: center;
@@ -473,7 +485,7 @@ defineExpose({
 
 .td-sidebar__footer {
   padding: var(--td-space-3);
-  border-top: 1px solid rgba(91, 64, 62, 0.1);
+  border-top: 1px solid var(--td-border-ghost);
   display: flex;
   flex-direction: column;
   gap: 1px;

From 496992e6e7782d440b02b44a0ef6b9220d187209 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:28:44 +0100
Subject: [PATCH 2/4] reskin: replace hardcoded styles with design tokens in
 ShellTopbar

Replace raw rgba border colors, px font sizes, and rem padding values
with design token references. Add border-radius, focus-visible ring,
and consistent transition to the palette trigger and mode select.
No behavior changes.
---
 .../src/components/shell/ShellTopbar.vue      | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/shell/ShellTopbar.vue b/frontend/taskdeck-web/src/components/shell/ShellTopbar.vue
index 7cbb6480f..93fad3659 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellTopbar.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellTopbar.vue
@@ -90,7 +90,7 @@ function handleWorkspaceModeChange(event: Event) {
 <style scoped>
 .td-topbar {
   background: var(--td-surface-base);
-  border-bottom: 1px solid rgba(91, 64, 62, 0.15);
+  border-bottom: 1px solid var(--td-border-default);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -115,7 +115,7 @@ function handleWorkspaceModeChange(event: Event) {
 
 .td-topbar__mode-label {
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 10px;
+  font-size: var(--td-font-xs);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.2em;
@@ -129,19 +129,23 @@ function handleWorkspaceModeChange(event: Event) {
 }
 
 .td-topbar__mode-select {
-  border: 0.5px solid rgba(91, 64, 62, 0.2);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-sm);
   background: var(--td-surface-container-lowest);
   color: var(--td-text-primary);
-  padding: 0.35rem 0.75rem;
+  padding: var(--td-space-2) var(--td-space-4);
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 11px;
+  font-size: var(--td-font-xs);
   letter-spacing: 0.05em;
   text-transform: uppercase;
   min-width: 120px;
+  transition: border-color var(--td-transition-fast);
 }
 
 .td-topbar__mode-select:focus {
-  border-color: var(--td-color-ember-glow);
+  border-color: var(--td-border-focus);
+  outline: none;
+  box-shadow: var(--td-focus-ring);
 }
 
 .td-topbar__mode-select option {
@@ -164,23 +168,29 @@ function handleWorkspaceModeChange(event: Event) {
   gap: var(--td-space-3);
   padding: var(--td-space-3) var(--td-space-5);
   background: var(--td-surface-container-low);
-  border: 0.5px solid rgba(91, 64, 62, 0.15);
+  border: 1px solid var(--td-border-ghost);
+  border-radius: var(--td-radius-md);
   color: var(--td-text-tertiary);
   cursor: pointer;
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 11px;
+  font-size: var(--td-font-xs);
   letter-spacing: 0.05em;
   min-width: 260px;
   width: fit-content;
-  transition: border-color var(--td-transition-fast);
+  transition: border-color var(--td-transition-fast), box-shadow var(--td-transition-fast);
 }
 
 .td-topbar__palette-trigger:hover {
   border-color: var(--td-border-focus);
 }
 
+.td-topbar__palette-trigger:focus-visible {
+  box-shadow: var(--td-focus-ring);
+  outline: none;
+}
+
 .td-topbar__search-icon {
-  font-size: 16px;
+  font-size: var(--td-font-lg);
   color: var(--td-text-tertiary);
 }
 
@@ -210,7 +220,7 @@ function handleWorkspaceModeChange(event: Event) {
 
 .td-topbar__status-label {
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 10px;
+  font-size: var(--td-font-xs);
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
@@ -219,7 +229,7 @@ function handleWorkspaceModeChange(event: Event) {
 
 .td-topbar__user {
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 11px;
+  font-size: var(--td-font-xs);
   color: var(--td-text-muted);
   font-weight: 500;
   letter-spacing: 0.05em;

From 160120461adab8edb1c083b0894979ab8d30f091 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:28:49 +0100
Subject: [PATCH 3/4] reskin: replace hardcoded styles with design tokens in
 ShellCommandPalette

Replace raw rgba borders and px font sizes with token references.
Add border-radius, use --td-glass-blur variable, upgrade shadow to xl.
Use transparent border-left for smoother active-item transition.
No behavior changes.
---
 .../components/shell/ShellCommandPalette.vue  | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/shell/ShellCommandPalette.vue b/frontend/taskdeck-web/src/components/shell/ShellCommandPalette.vue
index ceba95979..f82a3210d 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellCommandPalette.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellCommandPalette.vue
@@ -177,9 +177,10 @@ watch(filteredCommandItems, (items) => {
 
 .td-command-palette {
   background: var(--td-glass-bg);
-  backdrop-filter: blur(24px);
-  border: 0.5px solid rgba(91, 64, 62, 0.2);
-  box-shadow: var(--td-shadow-lg);
+  backdrop-filter: blur(var(--td-glass-blur));
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-lg);
+  box-shadow: var(--td-shadow-xl);
   width: 100%;
   max-width: 560px;
   overflow: hidden;
@@ -192,7 +193,7 @@ watch(filteredCommandItems, (items) => {
   font-family: 'Space Grotesk', system-ui, sans-serif;
   font-size: var(--td-font-lg);
   outline: none;
-  border-bottom: 1px solid rgba(91, 64, 62, 0.15);
+  border-bottom: 1px solid var(--td-border-default);
   background: transparent;
   color: var(--td-text-primary);
 }
@@ -209,7 +210,7 @@ watch(filteredCommandItems, (items) => {
 
 .td-command-palette__group-title {
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 9px;
+  font-size: var(--td-font-xs);
   font-weight: 700;
   color: var(--td-text-tertiary);
   text-transform: uppercase;
@@ -224,10 +225,12 @@ watch(filteredCommandItems, (items) => {
   width: 100%;
   padding: var(--td-space-3) var(--td-space-4);
   border: none;
+  border-left: 2px solid transparent;
+  border-radius: var(--td-radius-sm);
   background: transparent;
   cursor: pointer;
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 11px;
+  font-size: var(--td-font-xs);
   letter-spacing: 0.05em;
   text-transform: uppercase;
   text-align: left;
@@ -243,14 +246,14 @@ watch(filteredCommandItems, (items) => {
 .td-command-palette__item--active {
   background: var(--td-surface-bright);
   color: var(--td-color-ember);
-  border-left: 2px solid var(--td-color-ember-glow);
+  border-left-color: var(--td-color-ember-glow);
 }
 
 .td-command-palette__empty {
   padding: var(--td-space-4);
   color: var(--td-text-tertiary);
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 11px;
+  font-size: var(--td-font-xs);
   letter-spacing: 0.05em;
 }
 </style>

From 2c81771cffce8fafe1d70af0e60c1745eb826519 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:28:53 +0100
Subject: [PATCH 4/4] reskin: replace hardcoded styles with design tokens in
 ShellKeyboardHelp

Replace raw rgba borders, px font sizes, and px padding in kbd elements
with token references. Add border-radius to panel and close button,
focus-visible ring on close button, and hover background for close.
No behavior changes.
---
 .../components/shell/ShellKeyboardHelp.vue    | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/shell/ShellKeyboardHelp.vue b/frontend/taskdeck-web/src/components/shell/ShellKeyboardHelp.vue
index e30862af6..6c15c6270 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellKeyboardHelp.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellKeyboardHelp.vue
@@ -70,9 +70,10 @@ const emit = defineEmits<{
 
 .td-keyboard-help {
   background: var(--td-glass-bg);
-  backdrop-filter: blur(24px);
-  border: 0.5px solid rgba(91, 64, 62, 0.2);
-  box-shadow: var(--td-shadow-lg);
+  backdrop-filter: blur(var(--td-glass-blur));
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-lg);
+  box-shadow: var(--td-shadow-xl);
   width: 100%;
   max-width: 520px;
   max-height: 80vh;
@@ -84,7 +85,7 @@ const emit = defineEmits<{
   align-items: center;
   justify-content: space-between;
   padding: var(--td-space-5) var(--td-space-6);
-  border-bottom: 1px solid rgba(91, 64, 62, 0.15);
+  border-bottom: 1px solid var(--td-border-default);
 }
 
 .td-keyboard-help__header h2 {
@@ -98,14 +99,22 @@ const emit = defineEmits<{
 .td-keyboard-help__header button {
   background: transparent;
   border: none;
+  border-radius: var(--td-radius-md);
   font-size: var(--td-font-lg);
   cursor: pointer;
+  padding: var(--td-space-1) var(--td-space-2);
   color: var(--td-text-tertiary);
-  transition: color var(--td-transition-fast);
+  transition: color var(--td-transition-fast), background var(--td-transition-fast);
 }
 
 .td-keyboard-help__header button:hover {
   color: var(--td-color-ember);
+  background: var(--td-surface-container-high);
+}
+
+.td-keyboard-help__header button:focus-visible {
+  box-shadow: var(--td-focus-ring);
+  outline: none;
 }
 
 .td-keyboard-help__content {
@@ -118,7 +127,7 @@ const emit = defineEmits<{
 
 .td-keyboard-help__section h3 {
   font-family: 'Space Grotesk', system-ui, sans-serif;
-  font-size: 10px;
+  font-size: var(--td-font-xs);
   font-weight: 700;
   color: var(--td-color-ember);
   text-transform: uppercase;
@@ -137,10 +146,11 @@ const emit = defineEmits<{
 
 .td-shortcut-row kbd {
   background: var(--td-surface-container-highest);
-  border: 0.5px solid rgba(91, 64, 62, 0.2);
-  padding: 2px 8px;
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-sm);
+  padding: var(--td-space-1) var(--td-space-3);
   font-family: 'Space Grotesk', monospace;
-  font-size: 10px;
+  font-size: var(--td-font-xs);
   letter-spacing: 0.05em;
   color: var(--td-color-primary);
 }