From 059f36d2fe9dbc58a56029acd8b0d9a53de818d0 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 6 Jun 2026 14:29:48 +0200
Subject: [PATCH] refactor(words): unify radius scale (audit increment 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The small-control radius was a soup of 8 syntaxes for the same thing:
4px / var(--radius-2,4px) / 3px / even var(--space-1) (a spacing token used
as radius). Added --words-radius-xs (= --radius-sm, 4px) — the missing
small-control step under sm — and snapped all of them to the
--words-radius-{xs,sm,md,lg} scale. Micro decorative radii (1-2px) and circles
(50%) left as-is by design. Verified radius-xs=4px, editor renders, no
regression.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/uix/eidos/components/words/AUDIT.md  |  6 +++++-
 src/uix/eidos/components/words/words.css | 16 ++++++++--------
 src/uix/eidos/generated/base.css         |  1 +
 src/uix/eidos/lib/recipes/base.ts        |  4 ++++
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/uix/eidos/components/words/AUDIT.md b/src/uix/eidos/components/words/AUDIT.md
index a577ec5c1..954511683 100644
--- a/src/uix/eidos/components/words/AUDIT.md
+++ b/src/uix/eidos/components/words/AUDIT.md
@@ -63,8 +63,12 @@ verificar en navegador, y con el enfoque validado → generalizar tokens + barre
       hardcoded (120/140/100 ms → `--words-transition-duration`). Geometría (50/100 %) intacta.
       → test "declares every public var" **verde** (1 de 3 fallos de words resuelto). Editor
       verificado en navegador (sin regresión).
+- [x] **Radius unificado** (2026-06-06): nuevo `--words-radius-xs` (= `--radius-sm`, 4px) para el
+      tier de controles pequeños; snap de `4px`/`var(--radius-2,4px)`/`3px`/`var(--space-1)` (sopa de
+      8 sintaxis) → la escala `--words-radius-{xs,sm,md,lg}`. Micro decorativo (1-2px) + círculos
+      (50%) intactos por diseño. radius-xs verificado (=4px), sin regresión.
 - [ ] A — resto del vocabulario: triar los 41 huérfanos (cablear `rail-*`/`toolbar-*`/… o podar)
-- [ ] B — barrido del resto de superficies (radius a una escala, tamaños bespoke→tokens, padding `--space-*`)
+- [ ] B — resto del barrido: tamaños bespoke (swatch/checkbox/anchos/sidebar 16rem×3)→tokens, padding `--space-*`
 - [ ] C — centralizar las 3 paletas de color
 - [ ] D — fixes API (`<style>` inspector, `onMount→$effect`) → 3er test
 - [ ] E — verificación final + README
diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css
index fb292645b..44388a7e6 100644
--- a/src/uix/eidos/components/words/words.css
+++ b/src/uix/eidos/components/words/words.css
@@ -318,7 +318,7 @@
 	block-size: 1.15rem;
 	padding: 0;
 	border: 1px solid color-mix(in srgb, var(--words-content-color) var(--words-wash-soft), transparent);
-	border-radius: 4px;
+	border-radius: var(--words-radius-xs);
 	background: var(--words-swatch, var(--words-bg));
 	cursor: pointer;
 	transition: box-shadow var(--words-transition-duration) var(--words-transition-ease, ease);
@@ -498,7 +498,7 @@
 	margin: 0;
 	padding: 1px 5px;
 	border: 0;
-	border-radius: 4px;
+	border-radius: var(--words-radius-xs);
 	background: transparent;
 	color: inherit;
 	font: inherit;
@@ -669,7 +669,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
    ring shared with the text inputs. */
 [data-words-inspector] [data-number-field][data-size] {
 	border: 1px solid var(--words-border);
-	border-radius: var(--radius-2, 4px);
+	border-radius: var(--words-radius-xs);
 	background: var(--words-bg);
 	padding-inline: 2px;
 	block-size: 1.75rem;
@@ -693,7 +693,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	--_textarea-border: var(--words-border);
 	--_textarea-border-hover: var(--words-border-hover);
 	--_textarea-bg: var(--words-bg);
-	--_textarea-radius: var(--radius-2, 4px);
+	--_textarea-radius: var(--words-radius-xs);
 	--_textarea-font-size: var(--words-font-size-sm);
 }
 [data-words-inspector] [data-textarea][data-focused] [data-textarea-input] {
@@ -717,7 +717,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	border-color: transparent;
 	background: transparent;
 	color: var(--words-command-color);
-	border-radius: 3px;
+	border-radius: var(--words-radius-xs);
 }
 [data-words-inspector] [data-number-field-increment-trigger]:hover:not([data-disabled]),
 [data-words-inspector] [data-number-field-decrement-trigger]:hover:not([data-disabled]) {
@@ -795,7 +795,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	font-size: var(--words-font-size-sm);
 	padding: 4px 8px;
 	border: 1px solid var(--words-border);
-	border-radius: var(--radius-2, 4px);
+	border-radius: var(--words-radius-xs);
 	background: var(--words-bg);
 	color: var(--words-content-color);
 	transition:
@@ -929,7 +929,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	color: var(--words-content-color);
 	background: color-mix(in srgb, var(--words-content-color) var(--words-wash-faint), transparent);
 	border: 1px solid var(--words-border);
-	border-radius: var(--space-1);
+	border-radius: var(--words-radius-xs);
 	cursor: pointer;
 	overflow: hidden;
 	white-space: nowrap;
@@ -1144,7 +1144,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	min-block-size: 3em;
 	padding: 0;
 	border: 1px dashed var(--words-border);
-	border-radius: var(--radius-2, 4px);
+	border-radius: var(--words-radius-xs);
 	transition: border-color var(--words-transition-duration) var(--words-transition-ease);
 }
 [data-words-content] [data-words-block='columns'] [data-words-column]:hover,
diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css
index 1cab6564c..83c837b7f 100644
--- a/src/uix/eidos/generated/base.css
+++ b/src/uix/eidos/generated/base.css
@@ -2385,6 +2385,7 @@
 	--words-gap-sm: var(--space-2);
 	--words-gap-md: var(--space-2-5);
 	--words-gap-lg: var(--space-3);
+	--words-radius-xs: var(--radius-sm);
 	--words-radius-sm: var(--radius-md);
 	--words-radius-md: var(--radius-lg);
 	--words-radius-lg: var(--radius-xl);
diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts
index a668d9bdf..6852eb746 100644
--- a/src/uix/eidos/lib/recipes/base.ts
+++ b/src/uix/eidos/lib/recipes/base.ts
@@ -2657,6 +2657,10 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'gap-sm': 'var(--space-2)',
 		'gap-md': 'var(--space-2-5)',
 		'gap-lg': 'var(--space-3)',
+		// xs is the small-control tier (inspector fields, swatches, chips, steppers):
+		// one step under `sm`. Replaces the ad-hoc 4px / var(--radius-2,4px) / 3px /
+		// var(--space-1) soup the inspector used for the same thing.
+		'radius-xs': 'var(--radius-sm)',
 		'radius-sm': 'var(--radius-md)',
 		'radius-md': 'var(--radius-lg)',
 		'radius-lg': 'var(--radius-xl)',