SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): accent underline indicator for properties tabs

Browse source 
- Selected Design/Code/AI tab now shows an accent underline instead of
  only a weight/color change, giving a clear active affordance
- Normalize tab text to 11px to match the panel type scale
This commit is contained in:
Danila Poyarkov 2026-07-18 07:45:15 +03:00
parent 55965ac556
commit 64b7a106db
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/PropertiesPanel.vue
View file

@ -24,14 +24,14 @@ const { panels } = useI18n()
<TabsTrigger
value="design"
data-test-id="properties-tab-design"
class="rounded px-2.5 py-1 text-xs text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface"
class="relative rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
>
{{ panels.design }}
</TabsTrigger>
<TabsTrigger
value="code"
data-test-id="properties-tab-code"
class="flex items-center gap-1 rounded px-2.5 py-1 text-xs text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface"
class="relative flex items-center gap-1 rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
>
<icon-lucide-code class="size-3" />
{{ panels.code }}
@ -39,7 +39,7 @@ const { panels } = useI18n()
<TabsTrigger
value="ai"
data-test-id="properties-tab-ai"
class="flex items-center gap-1 rounded px-2.5 py-1 text-xs text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface"
class="relative flex items-center gap-1 rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
>
<icon-lucide-sparkles class="size-3" />
{{ panels.ai }}