From fad66abec4cfced788da741cc74ffb007480a2f1 Mon Sep 17 00:00:00 2001 From: George Date: Tue, 13 Oct 2026 20:05:32 -0500 Subject: [PATCH] refactor(web): esquinas como variables del tema (--radius) Los radios estaban escritos en cada componente. Ahora salen de --radius (campos), --radius-lg (botones), --radius-pill (insignias) y --radius-panel (tablas y ventanas, 0 por defecto). Sin cambio visual: un tema nuevo puede redondear la interfaz sin tocar componentes. Co-Authored-By: Claude Sonnet 5.5 --- apps/web/README.md | 4 +++- apps/web/src/app/core/theme/theme-switcher.ts | 2 +- apps/web/src/app/features/home/home.page.ts | 2 +- apps/web/src/app/features/login/login.page.css | 4 ++-- apps/web/src/app/layout/main-layout.css | 2 +- apps/web/src/app/shared/list/data-table.css | 3 ++- apps/web/src/app/shared/list/filter-bar.css | 2 +- apps/web/src/app/shared/value-help/value-help.css | 2 ++ apps/web/src/styles/base.css | 6 ++++++ apps/web/src/styles/forms.css | 6 +++--- 10 files changed, 22 insertions(+), 11 deletions(-) diff --git a/apps/web/README.md b/apps/web/README.md index 5bce5c5..b889f7a 100644 --- a/apps/web/README.md +++ b/apps/web/README.md @@ -27,7 +27,9 @@ Agregar un tema: 2. `@import` en `src/styles.css`. 3. Una entrada en `src/app/core/theme/themes.ts`. -Tokens: `--app --shell --shell-ink --shell-quiet --win --panel --line --line-soft --ink --quiet --field --field-ro --field-b --focus --gold --grid-head --row-sel --row-alt --ok --ok-bg --warn --warn-bg --err --err-bg --btn --btn-b --btn-h --overlay --shadow-pop`. +Forma: `--radius` (campos, 2 px), `--radius-lg` (botones, 3 px), `--radius-pill` (insignias) y `--radius-panel` (tablas, ventanas y diálogos; 0 = esquinas rectas como SBO). Un tema puede redondear sin tocar componentes. + +Tokens de color: `--app --shell --shell-ink --shell-quiet --win --panel --line --line-soft --ink --quiet --field --field-ro --field-b --focus --gold --grid-head --row-sel --row-alt --ok --ok-bg --warn --warn-bg --err --err-bg --btn --btn-b --btn-h --overlay --shadow-pop`. ## Tipos compartidos diff --git a/apps/web/src/app/core/theme/theme-switcher.ts b/apps/web/src/app/core/theme/theme-switcher.ts index f24c73d..5d785e0 100644 --- a/apps/web/src/app/core/theme/theme-switcher.ts +++ b/apps/web/src/app/core/theme/theme-switcher.ts @@ -26,7 +26,7 @@ import { ThemeService } from './theme.service'; background: transparent; color: var(--shell-ink); border: 1px solid var(--shell-quiet); - border-radius: 3px; + border-radius: var(--radius-lg); padding: 1px 4px; } option { diff --git a/apps/web/src/app/features/home/home.page.ts b/apps/web/src/app/features/home/home.page.ts index b46970b..f94c63e 100644 --- a/apps/web/src/app/features/home/home.page.ts +++ b/apps/web/src/app/features/home/home.page.ts @@ -26,7 +26,7 @@ import { MenuService } from '../../core/menu/menu.service'; .sub { margin: 2px 0 16px; color: var(--quiet); } h2 { margin: 12px 0 6px; font-size: 13px; color: var(--quiet); text-transform: uppercase; letter-spacing: .4px; } .links { display: flex; flex-wrap: wrap; gap: 6px; } - a { padding: 4px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); text-decoration: none; } + a { padding: 4px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; } a:hover { background: var(--row-sel); border-color: var(--focus); } `, }) diff --git a/apps/web/src/app/features/login/login.page.css b/apps/web/src/app/features/login/login.page.css index ef0330e..4c52258 100644 --- a/apps/web/src/app/features/login/login.page.css +++ b/apps/web/src/app/features/login/login.page.css @@ -52,7 +52,7 @@ label { width: 100%; padding: 2px 8px; border: 1px solid var(--field-b); - border-radius: 2px; + border-radius: var(--radius); background: var(--field); } .in:focus { @@ -64,7 +64,7 @@ label { margin-top: 14px; height: 32px; border: 1px solid var(--btn-b); - border-radius: 3px; + border-radius: var(--radius-lg); background: var(--btn); cursor: pointer; } diff --git a/apps/web/src/app/layout/main-layout.css b/apps/web/src/app/layout/main-layout.css index 91a39cc..3c3e3e4 100644 --- a/apps/web/src/app/layout/main-layout.css +++ b/apps/web/src/app/layout/main-layout.css @@ -35,7 +35,7 @@ background: transparent; color: var(--shell-ink); border: 1px solid var(--shell-quiet); - border-radius: 3px; + border-radius: var(--radius-lg); padding: 2px 10px; cursor: pointer; } diff --git a/apps/web/src/app/shared/list/data-table.css b/apps/web/src/app/shared/list/data-table.css index d3aa513..02724f7 100644 --- a/apps/web/src/app/shared/list/data-table.css +++ b/apps/web/src/app/shared/list/data-table.css @@ -8,6 +8,7 @@ min-height: 0; overflow: auto; border: 1px solid var(--line); + border-radius: var(--radius-panel); background: var(--panel); } .tablewrap.busy { @@ -78,7 +79,7 @@ tr.none td { display: inline-block; padding: 0 8px; border: 1px solid var(--line); - border-radius: 10px; + border-radius: var(--radius-pill); font-size: 11.5px; color: var(--quiet); } diff --git a/apps/web/src/app/shared/list/filter-bar.css b/apps/web/src/app/shared/list/filter-bar.css index 5e6b4c0..48d4837 100644 --- a/apps/web/src/app/shared/list/filter-bar.css +++ b/apps/web/src/app/shared/list/filter-bar.css @@ -47,7 +47,7 @@ gap: 3px; padding: 0 4px 0 6px; border: 1px solid var(--focus); - border-radius: 2px; + border-radius: var(--radius); background: var(--row-sel); color: var(--focus); font-size: 11.5px; diff --git a/apps/web/src/app/shared/value-help/value-help.css b/apps/web/src/app/shared/value-help/value-help.css index 66f7656..184cf5e 100644 --- a/apps/web/src/app/shared/value-help/value-help.css +++ b/apps/web/src/app/shared/value-help/value-help.css @@ -16,6 +16,8 @@ min-height: 360px; background: var(--win); border: 1px solid var(--line); + border-radius: var(--radius-panel); + overflow: hidden; box-shadow: var(--shadow-pop); } header { diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css index 177a616..b084bcd 100644 --- a/apps/web/src/styles/base.css +++ b/apps/web/src/styles/base.css @@ -5,6 +5,12 @@ :root { --font: 'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif; --fs: 13px; + + /* Forma: esquinas contenidas, como SBO. Un tema puede redondear sin tocar componentes. */ + --radius: 2px; /* campos, chips */ + --radius-lg: 3px; /* botones, tarjetas pequeñas */ + --radius-pill: 10px; /* insignias */ + --radius-panel: 0; /* tablas, ventanas y diálogos */ } *, diff --git a/apps/web/src/styles/forms.css b/apps/web/src/styles/forms.css index 5a9db00..53e6d5d 100644 --- a/apps/web/src/styles/forms.css +++ b/apps/web/src/styles/forms.css @@ -10,7 +10,7 @@ min-width: 0; padding: 1px 6px; border: 1px solid var(--field-b); - border-radius: 2px; + border-radius: var(--radius); background: var(--field); } .sbo-ta { @@ -55,7 +55,7 @@ min-width: 26px; padding: 0 6px; border: 1px solid var(--field-b); - border-radius: 2px; + border-radius: var(--radius); background: var(--btn); cursor: pointer; } @@ -92,7 +92,7 @@ padding: 0 14px; background: var(--btn); border: 1px solid var(--btn-b); - border-radius: 3px; + border-radius: var(--radius-lg); cursor: pointer; } .btn:hover:not(:disabled) {