@cosxai/ui 0.11.0 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/actionbar/ActionBar.tsx

@@ -415,11 +415,15 @@ export function ActionBar({
         alignItems: "center",
         gap: 4,
         zIndex: 80,
-        // Subtle accent tint when admin mode is active so the bar reads
-        // as "elevated privileges on" without a full colour swap.
-        background: adminMode
-          ? "color-mix(in oklab, var(--ck-accent, #4f46e5) 8%, var(--ck-bg-surface))"
-          : "var(--ck-bg-surface)",
+        // Bar background stays constant across modes — the earlier
+        // whole-bar tint composited under the item hover overlay
+        // (cool grey on tinted warm base) produced an awkward green
+        // cast on hover, and competed with the shield toggle for
+        // signal. Border colour DOES swap to accent when admin mode
+        // is on so the elevated state reads at a glance without a
+        // heavy surface change; the shield glyph adds a second cue
+        // (outline off → filled on) at the toggle itself.
+        background: "var(--ck-bg-surface)",
         border: `1px solid ${
           adminMode
             ? "var(--ck-accent, #4f46e5)"
@@ -429,9 +433,7 @@ export function ActionBar({
         boxShadow: "var(--ck-shadow-3)",
         fontFamily: "var(--ck-font-sans)",
         color: "var(--ck-text-primary)",
-        transition:
-          "background 260ms cubic-bezier(0.34, 1.56, 0.64, 1)," +
-          "border-color 260ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+        transition: "border-color 200ms var(--ck-ease, ease)",
         ...style,
       }}
     >
@@ -481,8 +483,9 @@ export function ActionBar({
       {/* Admin-mode toggle. Only renders when at least one registered
           item has adminOnly=true. Borderless, transparent bg — same
           visual weight as the drag grip and the item icons around
-          it. Muted stroke by default, accent stroke + subtle scale
-          when active. Icon: shield (elevated privileges). */}
+          it. State polarity lives on the glyph itself: outline shield
+          (off) → filled shield (on). No background pill, no whole-bar
+          tint — the icon is the whole affordance. */}
       {hasAdminItems && (
         <button
           type="button"
@@ -508,20 +511,18 @@ export function ActionBar({
               : "var(--ck-text-secondary, #666)",
             border: "none",
             cursor: "pointer",
-            transform: adminMode ? "scale(1.06)" : "scale(1)",
-            // Spring-ish easing so the tint + scale feel connected
-            // rather than mechanical — matches ck-actionbar-enter's
-            // curve for family consistency.
-            transition:
-              "color 260ms cubic-bezier(0.34, 1.56, 0.64, 1)," +
-              "transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+            transition: "color 200ms var(--ck-ease, ease)",
           }}
         >
           <svg
             width="16"
             height="16"
             viewBox="0 0 24 24"
-            fill="none"
+            // Outline when off, filled when on. Stroke stays on in
+            // both states so the silhouette is identical — only the
+            // interior fills — which reads as "same shape, different
+            // state" instead of two distinct glyphs.
+            fill={adminMode ? "currentColor" : "none"}
             stroke="currentColor"
             strokeWidth="1.8"
             strokeLinecap="round"