boba/LoVisual
1
0
Fork 0
Code Issues Pull requests Releases 1 Wiki Activity Actions

feat(frontend): unify control radius on one token

Browse source 
Buttons and inputs in the kit used rounded-md (6px) while the landing CTAs
hard-coded 0.6rem (9.6px), so a form row could mix three different corners.
Add --radius-ctl (10px, matching --radius-panel), point every interactive
control at it via rounded-ctl and make the CTAs consume the same variable.

Drop the unused ButtonAnchor helper.
This commit is contained in:
loki5512344 2026-09-28 13:16:59 +02:00
parent 7bb981b58e
commit 456366006e
Signed by: boba
GPG key ID: 253067914055423B
11 changed files with 17 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/features/account/components/AvatarUpload.tsx
View file

@ -32,7 +32,7 @@ export function AvatarUpload() {
<div className="flex flex-col items-center gap-2">
<label
htmlFor={id}
className="cursor-pointer rounded-md border border-shoal px-3 py-1.5 text-sm text-snow hover:border-frost"
className="cursor-pointer rounded-ctl border border-shoal px-3 py-1.5 text-sm text-snow hover:border-frost"
>
{t('avatar.change')}
<input

4
frontend/src/features/configs/components/PublishForm.tsx
View file

@ -39,7 +39,7 @@ export function PublishForm({
}
return (
<div className="flex flex-col gap-3 rounded-md border border-shoal bg-abyss/60 p-3">
<div className="flex flex-col gap-3 rounded-ctl border border-shoal bg-abyss/60 p-3">
<TextField
label={t('publishForm.title')}
value={title}
@ -56,7 +56,7 @@ export function PublishForm({
value={description}
onChange={(e) => setDescription(e.target.value.slice(0, MAX_DESCRIPTION))}
rows={3}
className="rounded-md border border-shoal bg-abyss px-3 py-2 text-snow focus:border-ice"
className="rounded-ctl border border-shoal bg-abyss px-3 py-2 text-snow focus:border-ice"
/>
<span className="self-end text-xs text-frost">{t('publishForm.counter', { count: description.length })}</span>
</div>

2
frontend/src/features/device-link/LinkDeviceForm.tsx
View file

@ -33,7 +33,7 @@ export function LinkDeviceForm() {
<label htmlFor="device-code" className="text-sm text-frost">
{t('form.codeLabel')}
</label>
<div className="flex items-center gap-2 rounded-md border border-shoal bg-abyss px-3 py-2 focus-within:border-ice">
<div className="flex items-center gap-2 rounded-ctl border border-shoal bg-abyss px-3 py-2 focus-within:border-ice">
<span aria-hidden="true" className="font-code text-ice">
%
</span>

5
frontend/src/features/landing/styles/landing.css
View file

@ -44,7 +44,8 @@
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1.4rem;
border-radius: 0.6rem;
/* Same corner as every control on the site (kit buttons, inputs, panels). */
border-radius: var(--radius-ctl, 10px);
font-weight: 700;
font-size: 1rem;
color: var(--color-abyss);
@ -71,7 +72,7 @@
justify-content: center;
gap: 0.6rem;
padding: 1.1rem 2rem;
border-radius: 0.6rem;
border-radius: var(--radius-ctl, 10px);
font-weight: 600;
font-size: 1.125rem;
color: var(--color-snow);

2
frontend/src/features/showcase/components/CopyToSlot.tsx
View file

@ -56,7 +56,7 @@ export function CopyToSlot({ listingId }: { listingId: string }) {
</Notice>
) : null}
{error ? <Notice tone="error">{error}</Notice> : null}
<div role="group" aria-label={t('copy.heading')} className="inline-flex overflow-hidden rounded-md border border-shoal">
<div role="group" aria-label={t('copy.heading')} className="inline-flex overflow-hidden rounded-ctl border border-shoal">
{SLOTS.map((slot) => (
<button
key={slot}

2
frontend/src/features/themes/editor/ThemeEditor.tsx
View file

@ -103,7 +103,7 @@ export function ThemeEditor({ initial, intro }: { initial: ThemeEntry; intro?: R
<input
value={draft.name}
onChange={(e) => set({ ...draft, name: e.target.value, id: nameToId(e.target.value) })}
className="rounded-md border border-white/15 bg-black/40 px-3 py-2 text-snow"
className="rounded-ctl border border-white/15 bg-black/40 px-3 py-2 text-snow"
/>
</label>

2
frontend/src/features/themes/editor/fields/ColorField.tsx
View file

@ -60,7 +60,7 @@ export function ColorField({ label, value, onChange }: Props) {
onChange={(e) => setEditing({ value, text: e.target.value })}
onBlur={commitText}
onKeyDown={(e) => e.key === 'Enter' && commitText()}
className="lv-hex-input w-[6.25rem] shrink-0 rounded-md border border-white/15 bg-black/40 px-2 py-1 font-code text-xs text-snow"
className="lv-hex-input w-[6.25rem] shrink-0 rounded-ctl border border-white/15 bg-black/40 px-2 py-1 font-code text-xs text-snow"
/>
</span>
</span>