Skip to content

UI-04: AppShell premium reskin using shared tokens and primitives #499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Chris0Jeky merged 4 commits into from
Mar 29, 2026
Merged

UI-04: AppShell premium reskin using shared tokens and primitives #499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38c632f
reskin: replace hardcoded styles with design tokens in ShellSidebar
Chris0Jeky Mar 29, 2026
496992e
reskin: replace hardcoded styles with design tokens in ShellTopbar
Chris0Jeky Mar 29, 2026
1601204
reskin: replace hardcoded styles with design tokens in ShellCommandPa…
Chris0Jeky Mar 29, 2026
2c81771
reskin: replace hardcoded styles with design tokens in ShellKeyboardHelp
Chris0Jeky Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions frontend/taskdeck-web/src/components/shell/ShellCommandPalette.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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>
28 changes: 19 additions & 9 deletions frontend/taskdeck-web/src/components/shell/ShellKeyboardHelp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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);
}
Expand Down
46 changes: 29 additions & 17 deletions frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
34 changes: 22 additions & 12 deletions frontend/taskdeck-web/src/components/shell/ShellTopbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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);
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
Loading