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

- 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

View File

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

View File

@@ -1,30 +1,43 @@
.editor-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
gap: var(--space-sm, 10px);
}
button,
.editor-nav-link {
min-height: 40px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
border: 1px solid var(--border-color, #d3dad9);
background: #fff;
color: #1e3c38;
padding: 0 14px;
font-weight: 700;
background: var(--bg-primary, #fff);
color: var(--text-primary, #1e3c38);
padding: 0 var(--space-md, 14px);
font-weight: 600;
cursor: pointer;
}
button.active,
.editor-nav-link.active {
border-color: #497671;
background: #497671;
color: #fff;
}
.editor-nav-link {
text-decoration: none;
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;
}
}