@axzydev/axzy_ui_system 1.7.4 → 1.8.0

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/atoms/button/button.tsx

@@ -9,6 +9,7 @@ import { useState } from "react";
 import { theme } from "@/theme/theme";
 import { ITButtonProps } from "./button.props";
 import ITText from "@/components/atoms/text/text";
+import { useITAppearance } from "@/theme/theme-context";
 
 /**
  * Highly configurable action button supporting 8 visual variants, theme colors, 3 sizes, icons, and hover/focus states.
@@ -37,6 +38,8 @@ export default function ITButton({
 }: ITButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
+  // Bento: pill buttons. The radius token is only defined when the provider has no explicit `radius`.
+  const bento = useITAppearance() === "bento";
 
   /** La variante `icon-only` siempre es un cuadrado con padding simétrico. */
   const isIconOnly = variant === "icon-only";
@@ -72,6 +75,10 @@ export default function ITButton({
       transition: themeConfig.transition || 'all 0.2s',
     };
 
+    if (bento) {
+      style.borderRadius = `var(--it-bento-pill-radius, ${themeConfig.borderRadius})`;
+    }
+
     if (variant === "rounded") {
       style.borderRadius = "9999px";
     }

package/src/components/atoms/input/input.tsx

@@ -91,6 +91,11 @@ export default function ITInput({
   const getStyle = () => {
     const style = inputFieldStyle(inputTheme, size);
 
+    // Textarea is multi-line: in bento it keeps a soft radius instead of the single-line pill.
+    if (isTextArea) {
+      style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
+    }
+
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;

package/src/components/atoms/segmented-control/segmented-control.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { ITSegmentedControlProps } from "./segmented-control.props";
 import ITText from "@/components/atoms/text/text";
+import { useITAppearance } from "@/theme/theme-context";
 
 const sizeMap = {
   sm: { button: "px-2.5 py-1.5 text-[11px]", container: "p-0.5" },
@@ -31,16 +32,22 @@ export default function ITSegmentedControl({
   disabled = false,
 }: ITSegmentedControlProps) {
   const { button, container } = sizeMap[size];
+  // Bento: borderless pill track with an ink pill for the selected option.
+  const bento = useITAppearance() === "bento";
 
   return (
     <div
       role="group"
       className={clsx(
-        "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
+        "inline-flex",
+        bento
+          ? "rounded-full"
+          : "rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
         container,
         disabled && "opacity-50 cursor-not-allowed",
         className
       )}
+      style={bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)" } : undefined}
     >
       {options.map((opt) => {
         const isActive = opt.value === value;
@@ -53,12 +60,22 @@ export default function ITSegmentedControl({
             disabled={disabled}
             className={clsx(
               button,
-              "rounded-lg font-semibold transition-all flex items-center gap-1.5",
-              isActive
-                ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600"
-                : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
+              "font-semibold transition-all flex items-center gap-1.5",
+              bento
+                ? "rounded-full border border-transparent"
+                : isActive
+                ? "rounded-lg bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600"
+                : "rounded-lg text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
               disabled && "pointer-events-none"
             )}
+            style={
+              bento
+                ? {
+                    backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+                    color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)",
+                  }
+                : undefined
+            }
           >
             {opt.icon && <span>{opt.icon}</span>}
             <ITText as="span">{opt.label}</ITText>

package/src/components/molecules/card/card.props.ts

@@ -1,4 +1,16 @@
+/** Pastel tint applied to a card through the `--color-<tone>-soft` token. */
+export type ITCardTone =
+  | "primary"
+  | "secondary"
+  | "ternary"
+  | "success"
+  | "info"
+  | "warning"
+  | "danger";
+
 export interface ITCardProps {
+  /** Pastel tile: tints the card background with the `--color-<tone>-soft` token of the palette, overriding the default white surface. In `soft`/`flat` appearances it also uses `--color-<tone>-soft-border` for the border; in `bento` the card stays borderless. Works in every appearance and in dark mode. Omit it for the regular surface. */
+  tone?: ITCardTone;
   /** Click handler. When provided, the card becomes interactive with hover shadow effect. */
   onClick?: () => void;
   /** Card title displayed in the header area. */

package/src/components/molecules/card/card.tsx

@@ -2,11 +2,12 @@ import clsx from "clsx";
 import { ITCardProps } from "./card.props";
 import { useState } from "react";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /**
- * Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states.
+ * Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states
+ * and pastel `tone` tiles. Follows the provider `appearance` (`soft`, `flat`, `bento`).
  *
  * @example
  * <ITCard title="Welcome" image="/hero.jpg" actions={<ITButton label="Learn more" />}>
@@ -14,12 +15,16 @@ import { useITTranslation } from "@/i18n";
  * </ITCard>
  *
  * @example
+ * <ITCard tone="success" title="Revenue">+12.4%</ITCard>
+ *
+ * @example
  * <ITCard onClick={() => {}} className="max-w-sm">
  *   Clickable card with hover shadow.
  * </ITCard>
  */
 export default function ITCard({
   title,
+  tone,
   headerActions,
   image,
   alt,
@@ -34,41 +39,66 @@ export default function ITCard({
 }: ITCardProps) {
   const { t } = useITTranslation();
   const [isHovered, setIsHovered] = useState(false);
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
   const resolvedAlt = alt ?? t("card.imageAlt");
 
   const containerStyle: React.CSSProperties = {
     backgroundColor: "var(--it-card-bg, #ffffff)",
-    borderColor: flat
-      ? "var(--it-card-flat-border, var(--color-secondary-200))"
-      : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
-    borderWidth: "1px",
+    borderColor: bento
+      ? "transparent"
+      : flat
+        ? "var(--it-card-flat-border, var(--color-secondary-200))"
+        : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
+    borderWidth: bento ? "0px" : "1px",
     borderStyle: "solid",
-    borderRadius: flat
-      ? "var(--it-card-radius, var(--radius-lg))"
-      : "var(--it-card-radius, var(--radius-2xl))",
+    borderRadius: bento
+      ? "var(--it-card-radius, var(--it-bento-card-radius, var(--radius-2xl)))"
+      : flat
+        ? "var(--it-card-radius, var(--radius-lg))"
+        : "var(--it-card-radius, var(--radius-2xl))",
     // Soft depth: every card floats a little at rest; interactive cards
     // gain visual weight on hover instead of appearing flat until clicked.
     // Flat appearance: the hairline border carries the surface, so a card
     // only gets a shadow as hover feedback when it is clickable.
-    boxShadow: flat
+    // Bento: borderless, a diffuse shadow at rest and a stronger one on hover.
+    boxShadow: bento
       ? onClick && isHovered
-        ? "var(--shadow-sm)"
-        : "none"
-      : onClick
-        ? isHovered
-          ? "var(--shadow-lg)"
-          : "var(--shadow-sm)"
-        : "var(--shadow-sm)",
+        ? "var(--it-bento-card-shadow-hover, var(--shadow-lg))"
+        : "var(--it-bento-card-shadow, var(--shadow-sm))"
+      : flat
+        ? onClick && isHovered
+          ? "var(--shadow-sm)"
+          : "none"
+        : onClick
+          ? isHovered
+            ? "var(--shadow-lg)"
+            : "var(--shadow-sm)"
+          : "var(--shadow-sm)",
     transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
-    transform: onClick && isHovered && !flat ? "translateY(-2px)" : "translateY(0)",
+    transform: onClick && isHovered && !flat && !bento ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default",
   };
 
+  // Pastel tile: the soft token is translucent, so it is layered over the
+  // regular surface (opaque tile, correct in light and dark).
+  if (tone) {
+    const soft = `var(--color-${tone}-soft)`;
+    containerStyle.backgroundImage = `linear-gradient(${soft}, ${soft})`;
+    if (!bento) containerStyle.borderColor = `var(--color-${tone}-soft-border)`;
+  }
+
   const bodyStyle: React.CSSProperties = {
-    padding: "1.25rem",
+    padding: bento ? "var(--it-bento-card-padding, 1.5rem)" : "1.25rem",
   };
 
+  const titleTypography = bento
+    ? "text-lg font-bold"
+    : flat
+      ? "text-base font-semibold"
+      : "text-xl font-semibold";
+
   return (
     <div
       onClick={onClick}
@@ -103,7 +133,7 @@ export default function ITCard({
             {title && (
               <ITText
                 as="h3"
-                className={clsx(flat ? "text-base font-semibold" : "text-xl font-semibold", titleClassName)}
+                className={clsx(titleTypography, titleClassName)}
               >
                 {title}
               </ITText>
@@ -113,7 +143,7 @@ export default function ITCard({
         ) : title ? (
           <ITText
             as="h3"
-            className={clsx(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName)}
+            className={clsx(titleTypography, flat ? "mb-3" : bento ? "mb-4" : "mb-2", titleClassName)}
           >
             {title}
           </ITText>

package/src/components/molecules/chip-input/chip-input.tsx

@@ -70,6 +70,8 @@ export default function ITChipInput({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    // Multi-line control: bento rounds it with a softer radius than the single-line pill.
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
 
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;

package/src/components/molecules/multi-select/multi-select.tsx

@@ -127,6 +127,8 @@ export default function ITMultiSelect({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    // Multi-line control: bento rounds it with a softer radius than the single-line pill.
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
 
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;

package/src/components/molecules/tabs/tabs.tsx

@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { ITTabsProps } from './tabs.props';
 import { clsx } from 'clsx';
 import ITText from "@/components/atoms/text/text";
+import { useITAppearance } from "@/theme/theme-context";
 
 /**
  * Tabbed navigation component with "line" and "pill" visual variants.
  * Manages its own active state internally via a defaultActiveId.
+ * With `appearance="bento"` the "pill" variant becomes a rounded track with an ink active pill.
  *
  * @example
  * <ITTabs
@@ -25,6 +27,7 @@ const ITTabs: React.FC<ITTabsProps> = ({
   className = '',
   containerClassName = ''
 }) => {
+  const bento = useITAppearance() === "bento" && variant === 'pill';
   const [activeId, setActiveId] = useState(defaultActiveId || items[0]?.id);
 
   const handleTabClick = (id: string, disabled?: boolean) => {
@@ -40,9 +43,10 @@ const ITTabs: React.FC<ITTabsProps> = ({
       {/* HEADER */}
       <div className={clsx(
         "flex border-secondary-200 mb-4",
-        variant === 'line' ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
+        variant === 'line' ? "border-b" : bento ? "gap-2 p-1 rounded-full w-fit" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
         className
-      )}>
+      )}
+      style={bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", borderColor: "transparent" } : undefined}>
         {items.map((item) => {
           const isActive = item.id === activeId;
           
@@ -61,14 +65,24 @@ const ITTabs: React.FC<ITTabsProps> = ({
                     : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300",
                 ],
                 // PILL VARIANT
-                variant === 'pill' && [
-                  "rounded-md",
-                  isActive 
-                    ? "bg-white text-primary-600 shadow-sm" 
-                    : "text-secondary-500 hover:text-secondary-700",
-                ],
+                variant === 'pill' && (bento
+                  ? "rounded-full"
+                  : [
+                      "rounded-md",
+                      isActive
+                        ? "bg-white text-primary-600 shadow-sm"
+                        : "text-secondary-500 hover:text-secondary-700",
+                    ]),
                 item.disabled && "opacity-50 cursor-not-allowed"
               )}
+              style={
+                bento
+                  ? {
+                      backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+                      color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)",
+                    }
+                  : undefined
+              }
             >
               {item.icon && <span className="w-4 h-4">{item.icon}</span>}
               <ITText as="span">{item.label}</ITText>

package/src/components/organisms/page-header/page-header.tsx

@@ -2,7 +2,7 @@ import { FaChevronLeft } from "react-icons/fa";
 import { ITPageHeaderProps } from "./page-header.props";
 import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /**
@@ -33,7 +33,10 @@ export default function ITPageHeader({
   const { t } = useITTranslation();
   const showTopRow = breadcrumbs?.length || backAction;
   // Flat appearance: compact title, no decorative icon tile.
-  const flat = useITFlatAppearance();
+  // Bento: no icon tile either, but a larger tight title and a borderless round back button.
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
 
   return (
     <div className={`${className} space-y-3`}>
@@ -44,7 +47,16 @@ export default function ITPageHeader({
             {backAction && (
               <button
                 onClick={backAction}
-                className="flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0"
+                className={
+                  bento
+                    ? "flex items-center justify-center w-10 h-10 rounded-full hover:opacity-80 transition-opacity duration-200 flex-shrink-0"
+                    : "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0"
+                }
+                style={
+                  bento
+                    ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", color: "var(--it-bento-control-text, #475569)" }
+                    : undefined
+                }
                 aria-label={t("pageHeader.back")}
               >
                 <FaChevronLeft size={14} />
@@ -65,7 +77,7 @@ export default function ITPageHeader({
       {/* Fila principal: icono + título + descripción + (acciones si no hay top row) */}
       <div className="flex items-start justify-between gap-6">
         <div className="flex items-start gap-4 min-w-0">
-          {icon && !flat && (
+          {icon && !flat && !bento && (
             <div
               className="flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm"
               style={iconColor ? { color: iconColor } : undefined}
@@ -77,7 +89,9 @@ export default function ITPageHeader({
             <ITText
               as="h1"
               className={
-                flat
+                bento
+                  ? "text-3xl font-bold text-slate-900 dark:text-white tracking-tighter leading-tight"
+                  : flat
                   ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight"
                   : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight"
               }
@@ -88,7 +102,9 @@ export default function ITPageHeader({
               <ITText
                 as="p"
                 className={
-                  flat
+                  bento
+                    ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed"
+                    : flat
                     ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed"
                     : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed"
                 }

package/src/components/organisms/sidebar/sidebar.tsx

@@ -10,7 +10,7 @@ import {
 } from "./sidebar.props";
 import ITBadget from "@/components/atoms/badget/badget";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /** Narrows a submenu entry to a titled group. */
@@ -95,7 +95,10 @@ export default function ITSidebar({
   expandOnHover = true,
 }: ITSidebarProps) {
   // Flat appearance: plain surface, no glow/accent bar, narrower panel.
-  const flat = useITFlatAppearance();
+  // Bento shares that structure; its tokens make the active item a neutral pill with bold ink text.
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
   const [isHovering, setIsHovering] = useState(false);
@@ -202,7 +205,7 @@ export default function ITSidebar({
           color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
           backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
           fontSize: flat ? '0.84rem' : '0.78rem',
-          fontWeight: subitem.isActive ? 600 : 500,
+          fontWeight: subitem.isActive ? (bento ? 700 : 600) : 500,
           letterSpacing: '0.01em',
           marginLeft: subitemConnector === '|' ? '-1px' : '0',
         }}
@@ -365,7 +368,7 @@ export default function ITSidebar({
       style={{
         zIndex: 50,
         backgroundColor: "var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
+        borderRight: bento ? "none" : "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
         ...(flat ? {} : { WebkitBackdropFilter: 'blur(12px)', backdropFilter: 'blur(12px)' }),
       }}
     >
@@ -480,7 +483,7 @@ export default function ITSidebar({
                       style={{
                         color: active ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
                         fontSize: flat ? '0.875rem' : '0.8rem',
-                        fontWeight: active ? '600' : '500'
+                        fontWeight: active ? (bento ? '700' : '600') : '500'
                       }}
                     >
                       {item.label}

package/src/components/organisms/topbar/topbar.props.ts

@@ -7,6 +7,8 @@ export interface ITTopBarNavItem {
   label: string;
   /** Optional icon element rendered beside the label. */
   icon?: any;
+  /** Marks the item as the current one. Sets `aria-current="page"`; with `appearance="bento"` it renders as the ink pill (dark fill, white text), in the other appearances as a subtle highlight. @default false */
+  isActive?: boolean;
   /** Click handler for this navigation item (legacy, prefer onNavItemClick). */
   action: () => void;
 }

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;