Header and blocks: shadow instead of border + shadow, 44px header controls (#5895)

* Header and blocks: shadow instead of border + shadow, 44px header controls

- New smooth-shadow-border utility: a 1px ring, a 1px lift and a 2px
  ambient layer in light mode, a single 8% white ring in dark mode. The
  header bar and page blocks use it instead of smooth-shadow-ring-sm
  (a ring plus six blur layers).
- Header controls match NEO's regular button height (44px): main-menu
  tabs are 44px capsules (scoped to #bx-toolbar), and the round header
  buttons and account avatar button go from 42px to 44px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* Header buttons: the clickable link is 44px, not just the circle

The round header buttons drew a 1px state border inside the 44px circle,
so the link (the hit area) was 42px. The hover/active edge is now an
inset ring, which takes no space, and the inner span is h-11 w-11. The
account avatar keeps 32px with a 6px transparent ring.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* Header buttons: hover is a background shade, not a ring

The round header buttons drop the inset ring. Hover and press now only
change the background: gray-100 > gray-200 > gray-300 in light mode,
gray-700/50 > gray-700 > gray-600 in dark mode (before, the light hover
was nearly invisible and the dark hover matched the resting colour).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

modules/boonex/artificer/data/template/system/menu_toolbar.html

@@ -1,11 +1,11 @@
 <ul class="bx-menu-toolbar bx-menu-object-__object__ flex items-center pr-0 md:pr-2">
     <bx_repeat:menu_items>
-        <li id="bx-menu-toolbar-item-__name__" class="bx-menu-toolbar-item bx-menu-item-__name__ group relative inline-flex items-center ltr:mr-2 ltr:last:mr-0 rtl:ml-2 rtl:last:ml-0 bx-mdr-hidden:mr-0 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full __class_add__">
+        <li id="bx-menu-toolbar-item-__name__" class="bx-menu-toolbar-item bx-menu-item-__name__ group relative inline-flex items-center ltr:mr-2 ltr:last:mr-0 rtl:ml-2 rtl:last:ml-0 bx-mdr-hidden:mr-0 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 dark:bg-gray-700/50 dark:hover:bg-gray-700 dark:active:bg-gray-600 rounded-full __class_add__">
             <a href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> class="inline-block rounded-full __class_add_a__"__attrs__>
-                <bx_if:icon><span class="relative flex items-center justify-center h-10 w-10"><i class="sys-icon __icon__"></i></span></bx_if:icon>
+                <bx_if:icon><span class="relative flex items-center justify-center h-11 w-11"><i class="sys-icon __icon__"></i></span></bx_if:icon>
                 <bx_if:icon-a><i class="sys-icon-a" data-rotate="down" data-icon="__icon-a__" data-color="#fff"></i></bx_if:icon-a>
                 <bx_if:image><img class="" src="__icon_url__" /></bx_if:image>
-                <bx_if:icon-html><span class="relative flex items-center justify-center h-10 w-10">__icon__</span></bx_if:icon-html>
+                <bx_if:icon-html><span class="relative flex items-center justify-center h-11 w-11">__icon__</span></bx_if:icon-html>
                 <bx_if:unit><div class="bx-menu-toolbar-item-unit">__unit__</div></bx_if:unit>
                 <bx_if:addon>__addonf__</bx_if:addon>
                 <bx_if:title><span class="bx-menu-toolbar-item-title sr-only">__title__</span></bx_if:title>

tailwind.smooth-shadow.js

@@ -11,6 +11,9 @@
  *    layer, for elevated surfaces (blocks, cards, popups, menus). Never pair it with `border`/`ring`.
  *  - `shadow-{color}` tints the shadow, `smooth-ring-{color}` tints the ring; both compose.
  *  - The ring is black 5% in light mode and white 18% under `.dark` / `[data-theme="dark"]`.
+ *  - `smooth-shadow-border` — a shadow in place of a border for surfaces that only need an edge (the
+ *    header bar, page blocks): a 1px ring, a 1px lift and a 2px ambient layer in light mode, and a single
+ *    white ring under `.dark`, where depth shadows don't show. Never pair it with `border`/`ring`.
  */
 const plugin = require('tailwindcss/plugin');
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
@@ -27,6 +30,9 @@ const LAYERS = {
 
 const RING = '0 0 0 var(--smooth-ring-width, 1px) var(--smooth-ring-color)';
 
+const BORDER_LIGHT = '0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04)';
+const BORDER_DARK = '0 0 0 1px oklch(1 0 0 / 0.08)';
+
 function stack(size, withRing) {
     const layers = LAYERS[size].map(([y, blur, spread, alpha]) =>
         `0 ${y}px ${blur}px ${spread}px color-mix(in srgb, var(--smooth-shadow-color) ${alpha}%, transparent)`
@@ -43,12 +49,15 @@ module.exports = plugin(function ({ addBase, addUtilities, matchUtilities, theme
         ':root': {
             '--smooth-ring-color': 'rgba(0, 0, 0, 0.05)',
             '--smooth-ring-width': '1px',
+            '--smooth-shadow-border': BORDER_LIGHT,
         },
         '.light, [data-theme="light"]': {
             '--smooth-ring-color': 'rgba(0, 0, 0, 0.05)',
+            '--smooth-shadow-border': BORDER_LIGHT,
         },
         '.dark, [data-theme="dark"]': {
             '--smooth-ring-color': 'rgba(255, 255, 255, 0.18)',
+            '--smooth-shadow-border': BORDER_DARK,
         },
     });
 
@@ -73,6 +82,11 @@ module.exports = plugin(function ({ addBase, addUtilities, matchUtilities, theme
     }
     utilities['.smooth-shadow'] = utilities['.smooth-shadow-md'];
     utilities['.smooth-shadow-ring'] = utilities['.smooth-shadow-ring-md'];
+    utilities['.smooth-shadow-border'] = {
+        '--tw-shadow': 'var(--smooth-shadow-border)',
+        '--tw-shadow-colored': 'var(--smooth-shadow-border)',
+        boxShadow: BOX_SHADOW,
+    };
 
     addUtilities(utilities);
 

template/_page_toolbar.html

@@ -1,5 +1,5 @@
 <bx_injection:top />
-<header id="bx-toolbar" class="bx-header bx-def-z-index-nav fixed top-0 w-full smooth-shadow-ring-sm bg-white/95 dark:bg-gray-800/95 backdrop-blur">
+<header id="bx-toolbar" class="bx-header bx-def-z-index-nav fixed top-0 w-full smooth-shadow-border bg-white/95 dark:bg-gray-800/95 backdrop-blur">
     <div class="bx-header-cnt __sys_header_width__ mx-auto px-3 md:px-4 lg:px-6 box-border">
         <div class="bx-toolbar-content-wrapper">
             <div id="bx-toolbar-content" class="bx-toolbar-content relative flex items-center justify-start h-16">

template/_page_toolbar_search.html

@@ -1,9 +1,9 @@
 <div id="bx-ti-search-box" class="bx-ti-search-box flex-auto flex items-start md:min-w-88 ltr:ml-2 rtl:mr-2 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
     <div class="relative w-full">__sys_site_search__</div>
 </div>
-<div class="bx-ti-search-button group relative inline-flex items-center ltr:ml-2 rtl:mr-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
+<div class="bx-ti-search-button group relative inline-flex items-center ltr:ml-2 rtl:mr-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 dark:bg-gray-700/50 dark:hover:bg-gray-700 dark:active:bg-gray-600 rounded-full">
     <button type="button" class="inline-block rounded-full" onclick="javascript:bx_site_search_show(this)" aria-expanded="false" aria-controls="bx-ti-search-box">
-        <span class="relative flex items-center justify-center h-10 w-10">
+        <span class="relative flex items-center justify-center h-11 w-11">
             <div class="bx-icon">
                 <bx_image_auto:search />
             </div>

template/css/tailwind.css

@@ -664,9 +664,9 @@
     .bx-def-color-bg-box-overflow {
         @apply bg-gradient-to-b from-transparent to-white dark:to-gray-800;
     }
-    /* Elevated surfaces: hairline ring + stacked shadow in one box-shadow (see tailwind.smooth-shadow.js), never border + shadow. */
+    /* Blocks: a shadow in place of a border (see tailwind.smooth-shadow.js), never border + shadow. */
     .bx-def-border-block {
-        @apply smooth-shadow-ring-sm;
+        @apply smooth-shadow-border;
     }
     .bx-def-box,
     .bx-popup-border {
@@ -1334,12 +1334,20 @@
 
     /* Common elements: Toolbar menu */
     .bx-artificer .bx-menu-toolbar .bx-menu-toolbar-item .bx-menu-toolbar-item-unit {
-        @apply border-4 border-transparent;
+        @apply border-[6px] border-transparent; /* 32px avatar + 2 x 6px = 44px, like the other header buttons */
     }
     .bx-artificer .bx-menu-toolbar .bx-menu-toolbar-item .bx-menu-toolbar-item-unit .bx-def-icon-size {
         @apply h-8 w-8;
     }
 
+    /* Header: the main menu's tabs are capsules at the header's control height (44px, NEO's regular button). */
+    #bx-toolbar .bx-menu-main > .bx-menu-item {
+        @apply rounded-full;
+    }
+    #bx-toolbar .bx-menu-main > .bx-menu-item > .bx-stl-mil {
+        @apply h-11 px-4 py-0 rounded-full;
+    }
+
     /* Common elements: Page Submenu */
     .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
         @apply text-gray-900 dark:text-gray-100;