From 456366006e0883456bf37c04055bfe5c82ec759a Mon Sep 17 00:00:00 2001
From: loki5512344 <mauhhhh7@gmail.com>
Date: Mon, 28 Sep 2026 13:16:59 +0200
Subject: [PATCH] feat(frontend): unify control radius on one token

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.
---
 .../features/account/components/AvatarUpload.tsx    |  2 +-
 .../src/features/configs/components/PublishForm.tsx |  4 ++--
 .../src/features/device-link/LinkDeviceForm.tsx     |  2 +-
 frontend/src/features/landing/styles/landing.css    |  5 +++--
 .../src/features/showcase/components/CopyToSlot.tsx |  2 +-
 frontend/src/features/themes/editor/ThemeEditor.tsx |  2 +-
 .../features/themes/editor/fields/ColorField.tsx    |  2 +-
 frontend/src/index.css                              |  3 +++
 frontend/src/shared/ui/Button.tsx                   | 13 ++-----------
 frontend/src/shared/ui/Notice.tsx                   |  2 +-
 frontend/src/shared/ui/TextField.tsx                |  2 +-
 11 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/frontend/src/features/account/components/AvatarUpload.tsx b/frontend/src/features/account/components/AvatarUpload.tsx
index a86545e..7b9e51a 100644
--- a/frontend/src/features/account/components/AvatarUpload.tsx
+++ b/frontend/src/features/account/components/AvatarUpload.tsx
@@ -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
diff --git a/frontend/src/features/configs/components/PublishForm.tsx b/frontend/src/features/configs/components/PublishForm.tsx
index 079c5f7..3e01832 100644
--- a/frontend/src/features/configs/components/PublishForm.tsx
+++ b/frontend/src/features/configs/components/PublishForm.tsx
@@ -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>
diff --git a/frontend/src/features/device-link/LinkDeviceForm.tsx b/frontend/src/features/device-link/LinkDeviceForm.tsx
index d19ae8e..89ec689 100644
--- a/frontend/src/features/device-link/LinkDeviceForm.tsx
+++ b/frontend/src/features/device-link/LinkDeviceForm.tsx
@@ -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>
diff --git a/frontend/src/features/landing/styles/landing.css b/frontend/src/features/landing/styles/landing.css
index e189c6b..2cb4b55 100644
--- a/frontend/src/features/landing/styles/landing.css
+++ b/frontend/src/features/landing/styles/landing.css
@@ -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);
diff --git a/frontend/src/features/showcase/components/CopyToSlot.tsx b/frontend/src/features/showcase/components/CopyToSlot.tsx
index d0a42d1..a38d7fc 100644
--- a/frontend/src/features/showcase/components/CopyToSlot.tsx
+++ b/frontend/src/features/showcase/components/CopyToSlot.tsx
@@ -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}
diff --git a/frontend/src/features/themes/editor/ThemeEditor.tsx b/frontend/src/features/themes/editor/ThemeEditor.tsx
index 65700cc..6cc214a 100644
--- a/frontend/src/features/themes/editor/ThemeEditor.tsx
+++ b/frontend/src/features/themes/editor/ThemeEditor.tsx
@@ -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>
 
diff --git a/frontend/src/features/themes/editor/fields/ColorField.tsx b/frontend/src/features/themes/editor/fields/ColorField.tsx
index 9dfe7b2..304913f 100644
--- a/frontend/src/features/themes/editor/fields/ColorField.tsx
+++ b/frontend/src/features/themes/editor/fields/ColorField.tsx
@@ -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>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4dd0087..6b1470e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -19,6 +19,9 @@
   --text-hero: 3.8125rem;
   --text-hero--line-height: 1.05;
   --radius-panel: 10px;
+  /* Buttons, inputs and their containers. The landing CTAs hard-code the same value, so one
+     control cannot land at 6px while its neighbour in the same row lands at 10px. */
+  --radius-ctl: 10px;
 }
 
 /* The page accent follows the active ClickGui theme (useActiveTheme sets it on :root);
diff --git a/frontend/src/shared/ui/Button.tsx b/frontend/src/shared/ui/Button.tsx
index d25f331..0c09e58 100644
--- a/frontend/src/shared/ui/Button.tsx
+++ b/frontend/src/shared/ui/Button.tsx
@@ -1,10 +1,10 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'
+import type { ButtonHTMLAttributes } from 'react'
 import { Link, type LinkProps } from 'react-router'
 
 type Variant = 'primary' | 'quiet' | 'danger'
 
 const BASE =
-  'inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold transition-colors'
+  'inline-flex items-center justify-center gap-2 rounded-ctl px-4 py-2 text-sm font-semibold transition-colors'
 
 const VARIANTS: Record<Variant, string> = {
   primary: 'bg-ice text-abyss hover:bg-ice/90',
@@ -35,12 +35,3 @@ export function Button({
 export function ButtonLink({ variant = 'primary', className = '', ...rest }: LinkProps & { variant?: Variant }) {
   return <Link className={`${BASE} ${VARIANTS[variant]} ${className}`} {...rest} />
 }
-
-/** Like ButtonLink but escapes to a plain <a> for external/href CTAs (e.g. GitHub downloads). */
-export function ButtonAnchor({
-  variant = 'primary',
-  className = '',
-  ...rest
-}: AnchorHTMLAttributes<HTMLAnchorElement> & { variant?: Variant }) {
-  return <a className={`${BASE} ${VARIANTS[variant]} ${className}`} {...rest} />
-}
diff --git a/frontend/src/shared/ui/Notice.tsx b/frontend/src/shared/ui/Notice.tsx
index fd66e1a..0175aba 100644
--- a/frontend/src/shared/ui/Notice.tsx
+++ b/frontend/src/shared/ui/Notice.tsx
@@ -3,7 +3,7 @@ import type { ReactNode } from 'react'
 export function Notice({ tone, children }: { tone: 'info' | 'error'; children: ReactNode }) {
   const styles = tone === 'error' ? 'border-ember/60 text-ember' : 'border-shoal text-frost'
   return (
-    <div role={tone === 'error' ? 'alert' : 'status'} className={`rounded-md border px-3 py-2 text-sm ${styles}`}>
+    <div role={tone === 'error' ? 'alert' : 'status'} className={`rounded-ctl border px-3 py-2 text-sm ${styles}`}>
       {children}
     </div>
   )
diff --git a/frontend/src/shared/ui/TextField.tsx b/frontend/src/shared/ui/TextField.tsx
index 8ac3425..c84ed69 100644
--- a/frontend/src/shared/ui/TextField.tsx
+++ b/frontend/src/shared/ui/TextField.tsx
@@ -18,7 +18,7 @@ export function TextField({
         id={id}
         aria-invalid={error ? true : undefined}
         aria-describedby={describedBy}
-        className="rounded-md border border-shoal bg-abyss px-3 py-2 text-snow placeholder:text-frost/60 focus:border-ice aria-invalid:border-ember"
+        className="rounded-ctl border border-shoal bg-abyss px-3 py-2 text-snow placeholder:text-frost/60 focus:border-ice aria-invalid:border-ember"
         {...rest}
       />
       {error ? (