sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(project-editor): align nav with design-system tokens, add aria-current

Browse Source 
- use ariaCurrentWhenActive on routerLinkActive so the active tab exposes
  aria-current="page"
- restyle editor-nav-link with the same --primary-color/--bg-primary/
  --border-color/--text-primary/--space-*/--transition-fast tokens used
  across shared/ui/*

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-16 02:14:03 +04:00
parent da0f0cd4a4
commit 8021b362cf
2 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/features/project-editor/components/project-editor-nav.component.html
View File

@@ -3,6 +3,7 @@
<a <a
[routerLink]="['/edit', section.id] | langRoute" [routerLink]="['/edit', section.id] | langRoute"
routerLinkActive="active" routerLinkActive="active"
[ariaCurrentWhenActive]="'page'"
class="editor-nav-link" class="editor-nav-link"
>{{ section.label | translate }}</a> >{{ section.label | translate }}</a>
} }

49
src/app/features/project-editor/components/project-editor-nav.component.scss
View File

@@ -1,30 +1,43 @@
.editor-nav { .editor-nav {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: var(--space-sm, 10px);
} }
button,
.editor-nav-link { .editor-nav-link {
min-height: 40px; min-height: 40px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
border: 1px solid var(--border-color, #d3dad9); border: 1px solid var(--border-color, #d3dad9);
background: #fff; background: var(--bg-primary, #fff);
color: #1e3c38; color: var(--text-primary, #1e3c38);
padding: 0 14px; padding: 0 var(--space-md, 14px);
font-weight: 700; font-weight: 600;
cursor: pointer; cursor: pointer;
}
button.active,
.editor-nav-link.active {
border-color: #497671;
background: #497671;
color: #fff;
}
.editor-nav-link {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
line-height: 40px; line-height: 38px;
transition: background-color var(--transition-fast, 120ms ease),
border-color var(--transition-fast, 120ms ease),
color var(--transition-fast, 120ms ease);
&:hover {
border-color: var(--primary-color, #2f6e5d);
}
&:focus-visible {
outline: 2px solid var(--primary-color, #2f6e5d);
outline-offset: 2px;
}
&.active {
border-color: var(--primary-color, #2f6e5d);
background: var(--primary-color, #2f6e5d);
color: var(--bg-primary, #fff);
}
}
@media (prefers-reduced-motion: reduce) {
.editor-nav-link {
transition: none;
}
} }