@axzydev/axzy_ui_system 1.7.4 → 1.8.1

package/src/components/organisms/topbar/topbar.tsx

@@ -3,7 +3,7 @@ import useClickOutside from "@/hooks/useClickOutside";
 import { useRef, useState } from "react";
 import { ITTopBarProps } from "./topbar.props";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /**
@@ -73,7 +73,10 @@ export default function ITTopBar({
   showDesktopMenuButton = false,
 }: ITTopBarProps) {
   // Flat appearance: plain bar (no shadow/blur), initials avatar, name before it.
-  const flat = useITFlatAppearance();
+  // Bento: same plain structure, blended with the canvas, pill nav and round icon buttons.
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const initials = (userMenu?.userName ?? "")
     .trim()
@@ -81,6 +84,8 @@ export default function ITTopBar({
     .slice(0, 2)
     .map((word) => word.charAt(0).toUpperCase())
     .join("");
+  const userRestBg = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent";
+  const userHoverBg = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const userMenuRef = useRef<HTMLDivElement>(null);
 
@@ -90,8 +95,10 @@ export default function ITTopBar({
     <header 
       className={`sticky top-0 z-40 transition-all duration-300 ${flat ? "" : "backdrop-blur-md"}`}
       style={{
-        backgroundColor: "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
+        backgroundColor: bento
+          ? "var(--it-layout-bg, #f4f4f6)"
+          : "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
+        borderBottom: bento ? "none" : "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
         boxShadow: flat ? "none" : "var(--shadow-xs)",
       }}
     >
@@ -105,12 +112,13 @@ export default function ITTopBar({
             <button
               type="button"
               aria-label={t("common.menu")}
-              className={`${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`}
+              className={`${showDesktopMenuButton ? "" : "lg:hidden"} ${bento ? "w-10 h-10 flex items-center justify-center rounded-full" : "p-2.5 -ml-2.5 rounded-xl"} transition-colors duration-200`}
               style={{
-                 color: "var(--it-topbar-icon, #64748b)",
+                 color: bento ? "var(--it-bento-control-text, #475569)" : "var(--it-topbar-icon, #64748b)",
+                 backgroundColor: bento ? "var(--it-bento-control-bg, #f1f5f9)" : undefined,
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)"}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = "transparent"}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)"}
+              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent"}
               onClick={onToggleMobileMenu}
             >
               <FaBars className="w-[1.125rem] h-[1.125rem]" />
@@ -137,28 +145,42 @@ export default function ITTopBar({
 
           {/* Top Navigation Items (Desktop) */}
           {navItems && navItems.length > 0 && (
-            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }}>
-              {navItems.map((item) => (
-                <button
-                  key={item.id}
-                  onClick={() => onNavItemClick?.(item.id)}
-                  className="px-4 py-2 rounded-lg font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]"
-                  style={{ color: "var(--it-topbar-text, #475569)" }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.color = "var(--it-topbar-text, #0f172a)";
-                    e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.color = "var(--it-topbar-text, #475569)";
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  }}
-                >
-                  <div className="flex items-center gap-2">
-                    {item.icon && <span className="opacity-70">{item.icon}</span>}
-                    <ITText as="span">{item.label}</ITText>
-                  </div>
-                </button>
-              ))}
+            <nav
+              className={bento ? "hidden md:flex ml-4 gap-2" : "hidden md:flex ml-8 space-x-1 border-l pl-8"}
+              style={bento ? undefined : { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }}
+            >
+              {navItems.map((item) => {
+                // Resting look per appearance; the active item is the ink pill in bento.
+                const restBg = bento
+                  ? item.isActive ? "var(--it-bento-ink-bg, #0f172a)" : "var(--it-bento-control-bg, #f1f5f9)"
+                  : item.isActive ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent";
+                const restColor = bento
+                  ? item.isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)"
+                  : "var(--it-topbar-text, #475569)";
+                return (
+                  <button
+                    key={item.id}
+                    onClick={() => onNavItemClick?.(item.id)}
+                    aria-current={item.isActive ? "page" : undefined}
+                    className={`px-4 py-2 ${bento ? "rounded-full" : "rounded-lg"} font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]`}
+                    style={{ color: restColor, backgroundColor: restBg }}
+                    onMouseEnter={(e) => {
+                      if (bento && item.isActive) return;
+                      e.currentTarget.style.color = bento ? "var(--it-bento-control-text, #0f172a)" : "var(--it-topbar-text, #0f172a)";
+                      e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.color = restColor;
+                      e.currentTarget.style.backgroundColor = restBg;
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      {item.icon && <span className="opacity-70">{item.icon}</span>}
+                      <ITText as="span">{item.label}</ITText>
+                    </div>
+                  </button>
+                );
+              })}
             </nav>
           )}
         </div>
@@ -184,15 +206,15 @@ export default function ITTopBar({
               <div className="relative">
                 <button
                   type="button"
-                  className={`flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200 ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`}
+                  className={`flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent ${bento ? "" : "hover:border-secondary-200"} ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`}
                   style={{
-                    backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent",
+                    backgroundColor: isUserMenuOpen ? userHoverBg : userRestBg,
                   }}
                   onMouseEnter={(e) => {
-                    if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
+                    if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userHoverBg;
                   }}
                   onMouseLeave={(e) => {
-                    if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
+                    if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userRestBg;
                   }}
                   onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
                 >

package/src/components/templates/layout/layout.tsx

@@ -4,7 +4,7 @@ import ITTopBar from "@/components/organisms/topbar/topbar";
 import ITSidebar from "@/components/organisms/sidebar/sidebar";
 import { ITLayoutProps } from "./layout.props";
 import { theme } from "@/theme/theme";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 
 /**
  * Main application shell with sidebar, topbar, and content area.
@@ -49,7 +49,8 @@ export default function ITLayout({
 }: ITLayoutProps) {
   const [internalCollapsed, setInternalCollapsed] = useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-  const flat = useITFlatAppearance();
+  // Bento shares the flat sidebar structure (narrow panel, no drop shadow).
+  const flat = useITAppearance() !== "soft";
 
   const isControlled = sidebar.isCollapsed !== undefined;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;

package/src/components/theme-provider/themeProvider.props.ts

@@ -58,6 +58,6 @@ export interface ITThemeProviderProps {
   radius?: number;
   /** Global shadow strength level. `0` ⇒ no shadows, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. Shadows are injected as `--shadow-*`/`.shadow-*` overrides so cards, dropdowns and dialogs follow the level. @default 2 (keeps current default when omitted) */
   shadow?: number;
-  /** Visual language of the whole system. `"soft"` keeps the current look (floating cards, tinted shadows, glass sidebar/top bar). `"flat"` switches the app shell and surfaces to flat ones: hairline borders instead of shadows on `ITCard`, a plain `ITSidebar` (no glow, no accent bar, narrower), a plain `ITTopBar` (no shadow, initials avatar) and a compact `ITPageHeader` without the icon tile. It also sets `data-it-appearance` on `<html>` so app CSS can follow it. Combine it with `shadow` and `radius` to finish the look. @default "soft" */
+  /** Visual language of the whole system. `"soft"` keeps the current look (floating cards, tinted shadows, glass sidebar/top bar). `"flat"` switches the app shell and surfaces to flat ones: hairline borders instead of shadows on `ITCard`, a plain `ITSidebar` (no glow, no accent bar, narrower), a plain `ITTopBar` (no shadow, initials avatar) and a compact `ITPageHeader` without the icon tile. It also sets `data-it-appearance` on `<html>` so app CSS can follow it. `"bento"` gives a modern pastel dashboard: light-gray canvas, borderless white cards with a diffuse shadow and 24px radius, pill buttons and inputs, an ink-pill active item in `ITTopBar` and a neutral-pill one in `ITSidebar`, a large `ITPageHeader` title and pastel tiles through `ITCard` `tone`; an explicit `radius`/`shadow` prop wins over the bento defaults. Combine it with `shadow` and `radius` to finish the look. @default "soft" */
   appearance?: ITThemeAppearance;
 }

package/src/components/theme-provider/themeProvider.tsx

@@ -83,7 +83,7 @@ const PRESET_I18N_KEY: Record<string, string> = {
 // Contexto y hooks (useITTheme / useITThemeSafe) viven en @/theme/theme-context.
 // Re-exportados desde aquí para mantener compatibilidad de la API pública.
 // eslint-disable-next-line react-refresh/only-export-components
-export { useITTheme, useITThemeSafe, useITFlatAppearance } from "@/theme/theme-context";
+export { useITTheme, useITThemeSafe, useITFlatAppearance, useITAppearance } from "@/theme/theme-context";
 
 const getNestedValue = (obj: any, path: string) => {
   return path.split(".").reduce((acc, part) => acc && acc[part], obj);
@@ -343,6 +343,59 @@ export default function ITThemeProvider({
     };
   }, [radius, shadow]);
 
+  // Tokens del lenguaje "bento": solo se inyectan con appearance="bento".
+  // Los componentes leen estos vars (con fallback al aspecto base), así que un
+  // `radius`/`shadow` explícito gana: en ese caso no se definen los vars de
+  // radio/sombra y los componentes caen a la escala global.
+  useLayoutEffect(() => {
+    const STYLE_ID = "it-theme-bento-tokens";
+    let tag = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+    if (appearance !== "bento") {
+      tag?.remove();
+      return;
+    }
+    if (!tag) {
+      tag = document.createElement("style");
+      tag.id = STYLE_ID;
+      document.head.appendChild(tag);
+    }
+    const hasRadius = typeof radius === "number" && isFinite(radius);
+    const hasShadow = shadowLevel(shadow) !== null;
+    const shapeLight = hasRadius
+      ? ""
+      : "--it-bento-card-radius:24px;--it-bento-pill-radius:9999px;--it-bento-field-radius:1rem;--it-input-radius:var(--it-bento-pill-radius);";
+    const shadowLight = hasShadow
+      ? ""
+      : "--it-bento-card-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -16px rgba(16,24,40,.10);--it-bento-card-shadow-hover:0 1px 2px rgba(16,24,40,.06),0 18px 40px -16px rgba(16,24,40,.18);";
+    const shadowDark = hasShadow
+      ? ""
+      : "--it-bento-card-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.55);--it-bento-card-shadow-hover:0 1px 2px rgba(0,0,0,.5),0 18px 40px -16px rgba(0,0,0,.7);";
+    // El item activo del sidebar sigue los tokens bento (píldora neutra, texto tinta).
+    const navTokens =
+      "--it-sidebar-active-bg:var(--it-bento-nav-active-bg);--it-sidebar-active-color:var(--it-bento-nav-active-text);--it-sidebar-active-icon:var(--it-bento-nav-active-text);";
+    const light =
+      "--it-layout-bg:#f4f4f6;--it-card-bg:#ffffff;--it-bento-card-padding:1.5rem;" +
+      "--it-input-bg:#f1f5f9;--it-input-border:transparent;" +
+      "--it-input-focus-ring:0 0 0 2px color-mix(in srgb,var(--color-primary) 50%,transparent);" +
+      "--it-bento-control-bg:#f1f5f9;--it-bento-control-bg-hover:#e2e8f0;--it-bento-control-text:#475569;" +
+      "--it-bento-ink-bg:#0f172a;--it-bento-ink-text:#ffffff;" +
+      "--it-bento-nav-active-bg:#f1f5f9;--it-bento-nav-active-text:#0f172a;" + navTokens;
+    const dark =
+      "--it-layout-bg:#020617;--it-card-bg:#0f172a;" +
+      "--it-input-bg:#1e293b;--it-input-border:transparent;" +
+      "--it-bento-control-bg:#1e293b;--it-bento-control-bg-hover:#334155;--it-bento-control-text:#cbd5e1;" +
+      "--it-bento-ink-bg:#ffffff;--it-bento-ink-text:#0f172a;" +
+      "--it-bento-nav-active-bg:#1e293b;--it-bento-nav-active-text:#ffffff;" + navTokens;
+    const A = '[data-it-appearance="bento"]';
+    tag.textContent =
+      `:root${A}{${light}${shapeLight}${shadowLight}}` +
+      `:root${A}.dark,:root${A} .dark,:root${A} [data-theme="dark"]{${dark}${shadowDark}}` +
+      `:root${A} [data-theme="light"]{${light}${shadowLight}}`;
+    return () => {
+      tag?.remove();
+    };
+  }, [appearance, radius, shadow]);
+
   // Inyectar variables CSS en el :root al cambiar la paleta o tema resuelto
   useEffect(() => {
     const injectStyles = (obj: any, prefix = "") => {

package/src/index.ts

@@ -171,7 +171,7 @@ import type { ITBadgetProps } from "./components/atoms/badget/badget.props";
 import type { ITBreadcrumbsProps, ITBreadcrumbItem } from "./components/molecules/breadcrumbs/breadcrumbs.props";
 import type { ITButtonProps } from "./components/atoms/button/button.props";
 import type { ITCalendarProps } from "./components/molecules/calendar/calendar.props";
-import type { ITCardProps } from "./components/molecules/card/card.props";
+import type { ITCardProps, ITCardTone } from "./components/molecules/card/card.props";
 import type { ITCheckboxProps } from "./components/atoms/checkbox/checkbox.props";
 import type { ITChipProps } from "./components/atoms/chip/chip.props";
 import type { ITChipInputProps } from "./components/molecules/chip-input/chip-input.props";
@@ -232,7 +232,7 @@ import ITLoader from "./components/atoms/loader/loader";
 import type { LoaderProps as ITLoaderProps } from "./components/atoms/loader/loader.props";
 import ITStepper from "./components/molecules/stepper/stepper";
 import type { ITStepperProps } from "./components/molecules/stepper/stepper.props";
-import ITThemeProvider, { useITTheme, useITThemeSafe, useITFlatAppearance } from "./components/theme-provider/themeProvider";
+import ITThemeProvider, { useITTheme, useITThemeSafe, useITFlatAppearance, useITAppearance } from "./components/theme-provider/themeProvider";
 import type { ITThemeProviderProps, ITThemePalette, ITThemeAppearance } from "./components/theme-provider/themeProvider.props";
 import ITTimePicker from "./components/molecules/time-picker/timePicker";
 import type { ITTimePickerProps } from "./components/molecules/time-picker/timePicker.props";
@@ -262,7 +262,7 @@ export {
   ITSearchTable,
   ITSegmentedControl, ITSidebar, ITSkeleton, ITSlideToggle, ITSlider, ITStack, ITStatCard, ITStepper, ITLineBarChart,
   ITTable, ITTabs, ITText, ITTextarea, ITTripleFilter, ITThemeProvider,
-  useITTheme, useITThemeSafe, useITFlatAppearance, ITTimePicker, ITToast, ITWysiwyg,
+  useITTheme, useITThemeSafe, useITFlatAppearance, useITAppearance, ITTimePicker, ITToast, ITWysiwyg,
   UploadStatus, FileTypeEnum,
   getContrastTextColor, isLightColor, resolveCssColor,
   ITI18nProvider, useITTranslation, esMessages, enMessages,
@@ -288,7 +288,7 @@ export {
     ITAlertProps, ITAvatarProps, ITBadgetProps,
     ITBreadcrumbItem, ITBreadcrumbsProps, ITButtonProps,
     ITCalendarProps,
-    ITCardProps, ITCheckboxProps, ITChipProps, ITChipInputProps, ITConfirmDialogProps,
+    ITCardProps, ITCardTone, ITCheckboxProps, ITChipProps, ITChipInputProps, ITConfirmDialogProps,
     ITDropdownMenuItem, ITDropdownMenuProps, ITFieldProps, ITMaskedInputProps, ITMultiSelectOption, ITMultiSelectProps,
     ITDataTableFetchParams, ITDataTableProps, ITDataTableResponse, ITDatePickerProps,
     ITDialogProps, ITDividerProps, ITDrawerProps,

package/src/json-renderer/catalog/axzyCatalog.ts

@@ -91,6 +91,11 @@ export const AXZY_CATALOG_ENTRIES: CatalogEntry[] = [
     summary: "Tarjeta con título, imagen y contenido.",
     props: {
       title: { kind: "string" },
+      tone: {
+        kind: "enum",
+        values: ["primary", "secondary", "ternary", "success", "info", "warning", "danger"],
+        doc: "Tinte pastel de la tarjeta (token --color-<tone>-soft).",
+      },
       image: { kind: "string", doc: "URL de la imagen de cabecera." },
       alt: { kind: "string" },
       onClick: { kind: "action" },

package/src/sandbox/axzyConfig.test.ts

@@ -16,6 +16,10 @@ describe("axzy.json", () => {
     expect(config.showFab).toBe(true);
   });
 
+  it("acepta la apariencia bento", () => {
+    expect(mergeAxzyConfig({ appearance: "bento" }).appearance).toBe("bento");
+  });
+
   it("recorta fuera de rango en vez de romper", () => {
     const config = mergeAxzyConfig({ density: 9, radius: 99, shadow: -3 });
     expect(config.density).toBe(1.5);

package/src/sandbox/axzyConfig.ts

@@ -71,7 +71,7 @@ export function mergeAxzyConfig(raw: unknown): AxzyConfig {
     density: clamp(entrada.density, 0.5, 1.5, DEFAULT_AXZY_CONFIG.density),
     radius: clamp(entrada.radius, 0, 24, DEFAULT_AXZY_CONFIG.radius, 0),
     shadow: clamp(entrada.shadow, 0, 3, DEFAULT_AXZY_CONFIG.shadow, 0),
-    appearance: entrada.appearance === "flat" || entrada.appearance === "soft" ? entrada.appearance : DEFAULT_AXZY_CONFIG.appearance,
+    appearance: entrada.appearance === "flat" || entrada.appearance === "soft" || entrada.appearance === "bento" ? entrada.appearance : DEFAULT_AXZY_CONFIG.appearance,
     showFab: typeof entrada.showFab === "boolean" ? entrada.showFab : DEFAULT_AXZY_CONFIG.showFab,
   };
 }

package/src/sandbox/i18n.ts

@@ -698,6 +698,9 @@ export const sandboxMessages: ITMessagesByLocale = {
       "Layouts de card listos para producción construidos con ITCard",
     "showcase.structure.patternCourseProgress": "Progreso del curso",
     "showcase.structure.patternPricing": "Plan de precios destacado",
+    "showcase.structure.cardToneTitle": "Tarjetas pastel (tone)",
+    "showcase.structure.cardToneSubtitle": "La prop tone tiñe el fondo con el token --color-<tone>-soft; funciona en soft, flat y bento.",
+    "showcase.structure.cardToneBody": "Fondo tintado con el token suave del color.",
     "showcase.structure.patternActivity": "Item de feed de actividad",
     "showcase.structure.patternTeamMember": "Perfil de miembro del equipo",
     "showcase.structure.textDesc":
@@ -1770,6 +1773,9 @@ export const sandboxMessages: ITMessagesByLocale = {
       "Production-ready card layouts built with ITCard",
     "showcase.structure.patternCourseProgress": "Course progress",
     "showcase.structure.patternPricing": "Featured pricing plan",
+    "showcase.structure.cardToneTitle": "Pastel cards (tone)",
+    "showcase.structure.cardToneSubtitle": "The tone prop tints the background with the --color-<tone>-soft token; it works in soft, flat and bento.",
+    "showcase.structure.cardToneBody": "Background tinted with the soft color token.",
     "showcase.structure.patternActivity": "Activity feed item",
     "showcase.structure.patternTeamMember": "Team member profile",
     "showcase.structure.textDesc":

package/src/showcases/FeedbackShowcases.tsx

@@ -362,6 +362,7 @@ export const ThemeProviderShowcase = () => {
           '<ITThemeProvider><App /></ITThemeProvider>',
           '<ITThemeProvider theme={{ primary: "#3b82f6", layout: { sidebarBg: "#0f172a" } }} showFab={false}><App /></ITThemeProvider>',
           '<ITThemeProvider density={0.9} radius={8} shadow={1} appearance="flat"><App /></ITThemeProvider>',
+          '<ITThemeProvider appearance="bento"><App /></ITThemeProvider>',
         ],
         props: [
           { name: "theme", type: "Partial<ITThemePalette>", description: "Overrides de paleta fusionados (deep merge) con el tema por defecto: `primary`, `secondary`, `ternary`, `danger`, `success`, `info`, `alert`, `warning`, `layout` y `table`." },
@@ -370,7 +371,7 @@ export const ThemeProviderShowcase = () => {
           { name: "density", type: "number", default: "1", description: "Factor de densidad global: escala el `font-size` raíz para compactar todo lo basado en `rem`. Se limita a `0.5`–`1.5`." },
           { name: "radius", type: "number", default: "—", description: "Radio global en px aplicado a toda la escala `--radius-*`; `0` deja las esquinas totalmente cuadradas." },
           { name: "shadow", type: "number", default: "—", description: "Fuerza global de sombras: `0` ninguna, `1` sutiles, `2` look actual, `3` marcadas." },
-          { name: "appearance", type: '"soft" | "flat"', default: '"soft"', description: "Lenguaje visual del sistema; `\"flat\"` usa superficies planas con bordes de 1 px y fija `data-it-appearance` en `<html>`." },
+          { name: "appearance", type: '"soft" | "flat" | "bento"', default: '"soft"', description: "Lenguaje visual del sistema; `\"flat\"` usa superficies planas con bordes de 1 px; `\"bento\"` usa lienzo gris claro, tarjetas blancas sin borde con sombra difusa y radio de 24 px, controles en píldora y navegación con píldora tinta. Fija `data-it-appearance` en `<html>`; un `radius`/`shadow` explícito gana sobre los valores bento." },
         ],
         notes: [
           "`useITTheme()` lanza error si se usa fuera del provider; `useITThemeSafe()` devuelve `undefined` en ese caso.",

package/src/showcases/StructureShowcases.tsx

@@ -372,6 +372,19 @@ export const CardShowcase = () => {
       }
       gallery={
         <ITStack spacing={8}>
+          <GallerySection
+            title={t("showcase.structure.cardToneTitle")}
+            subtitle={t("showcase.structure.cardToneSubtitle")}
+          >
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              {(["primary", "secondary", "ternary", "success", "info", "warning", "danger"] as const).map((tone) => (
+                <ITCard key={tone} tone={tone} title={tone}>
+                  {t("showcase.structure.cardToneBody")}
+                </ITCard>
+              ))}
+            </div>
+          </GallerySection>
+
           <GallerySection
             title={t("showcase.structure.galleryRealCases")}
             subtitle={t("showcase.structure.galleryCardsSubtitle")}
@@ -537,13 +550,14 @@ export const CardShowcase = () => {
       }
       doc={{
         summary: "Contenedor de tarjeta con imagen, título, cuerpo y pie de acciones opcionales; con onClick se vuelve interactivo.",
-        description: "Pieza base de composición para agrupar contenido relacionado. Borde, radio y sombra se adaptan al aspecto del tema (flat / soft).",
+        description: "Pieza base de composición para agrupar contenido relacionado. Borde, radio y sombra se adaptan al aspecto del tema (soft / flat / bento).",
         examples: [
           '<ITCard title="Ingresos del mes" actions={<ITButton label="Ver detalle" size="sm" />}>$48.230</ITCard>',
           '<ITCard title="Curso" image="/courses/ts.jpg" imageClassName="h-32" onClick={() => open(course.id)}>…</ITCard>',
           '<ITCard className="max-w-sm"><ITText muted>Tarjeta estática, sin cabecera ni acciones.</ITText></ITCard>',
         ],
         props: [
+          { name: "tone", type: '"primary" | "secondary" | "ternary" | "success" | "info" | "warning" | "danger"', default: "—", description: "Tarjeta pastel: tiñe el fondo con el token --color-<tone>-soft (sustituye al blanco). En soft/flat usa --color-<tone>-soft-border como borde; en bento sigue sin borde." },
           { name: "onClick", type: "() => void", default: "—", description: "Al recibirlo la tarjeta se vuelve clicable: cursor pointer, transición de sombra y elevación en hover. Sin él es estática." },
           { name: "title", type: "string", default: "—", description: "Título de la cabecera; se renderiza como h3 mediante ITText." },
           { name: "image", type: "string", default: "—", description: "URL de la imagen superior, a ancho completo con h-48 object-cover." },
@@ -559,7 +573,8 @@ export const CardShowcase = () => {
         notes: [
           "El aspecto del tema decide borde y sombra: en flat el borde es un hairline y solo hay sombra en hover si la tarjeta es clicable; en soft flota con --shadow-sm y sube a --shadow-lg con translateY(-2px).",
           "Variables CSS: --it-card-bg, --it-card-border, --it-card-flat-border y --it-card-radius.",
-          "El padding es fijo (cuerpo 1.25rem, pie 1rem): no hay prop de tamaño.",
+          "En bento la tarjeta no tiene borde, usa --it-bento-card-shadow (más marcada en hover si es clicable, sin translateY), radio de 24 px y padding de 1.5rem; un radius/shadow explícito en el provider gana.",
+          "El padding es fijo (cuerpo 1.25rem, 1.5rem en bento; pie 1rem): no hay prop de tamaño.",
         ],
       }}
     />

package/src/theme/theme-context.ts

@@ -38,10 +38,18 @@ export const useITThemeSafe = (): ITThemeContextType | undefined => {
   return useContext(ITThemeContext);
 };
 
+/**
+ * Lenguaje visual activo (`"soft"` | `"flat"` | `"bento"`).
+ * Fuera de un ITThemeProvider devuelve `"soft"` (aspecto por defecto).
+ */
+export const useITAppearance = (): ITThemeAppearance => {
+  return useContext(ITThemeContext)?.appearance ?? "soft";
+};
+
 /**
  * `true` cuando el provider pide el lenguaje visual plano (`appearance="flat"`).
  * Fuera de un ITThemeProvider devuelve `false` (aspecto por defecto).
  */
 export const useITFlatAppearance = (): boolean => {
-  return useContext(ITThemeContext)?.appearance === "flat";
-};
+  return useITAppearance() === "flat";
+};

package/src/theme/theme.ts

@@ -322,7 +322,7 @@ export const components = {
   input: {
     backgroundColor: 'var(--it-input-bg, #ffffff)',
     borderColor: `var(--it-input-border, ${semanticColors.gray[300]})`,
-    borderRadius: 'var(--radius-md)',
+    borderRadius: 'var(--it-input-radius, var(--radius-md))',
     focus: {
       borderColor: `var(--it-input-focus-border, ${semanticColors.primary[500]})`,
       ring: `var(--it-input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`,

package/src/theme/theme.types.ts

@@ -16,8 +16,9 @@ export type ColorScale = {
  * Visual language of the whole system.
  * - `"soft"`: soft depth — floating cards, tinted shadows, glass sidebar and top bar (default).
  * - `"flat"`: flat surfaces — hairline borders instead of shadows, plain sidebar and top bar, compact page headers.
+ * - `"bento"`: modern pastel "bento" dashboards — light-gray canvas, borderless white cards with a diffuse shadow and 24px radius, pill controls (buttons, inputs), ink-pill navigation and pastel tiles via `ITCard` `tone`.
  */
-export type ITThemeAppearance = "soft" | "flat";
+export type ITThemeAppearance = "soft" | "flat" | "bento";
 
 export interface ITThemePalette {
   /** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */