@cosxai/ui 0.4.3 → 0.4.5

package/package.json

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

package/src/actionbar/ActionBarMenuGroup.tsx

@@ -53,6 +53,16 @@ export function ActionBarMenuGroup({
   return (
     <div
       ref={wrapperRef}
+      // ck-actionbar-group--open scopes a deeper hover tint to the
+      // children while the disclosure is open. The default
+      // .ck-actionbar-btn:hover uses --ck-bg-muted (gray) — fine when
+      // a button sits on app background, but reads muddy when stacked
+      // on top of this wrapper's --ck-accent-muted pill. The chrome
+      // sheet replaces the gray with an accent-blended overlay only
+      // for that scope so the hover signal stays in the accent hue.
+      className={
+        isOpen ? "ck-actionbar-group ck-actionbar-group--open" : "ck-actionbar-group"
+      }
       style={{
         display: "inline-flex",
         alignItems: "center",

package/src/styles/chrome-ambient.css

@@ -60,7 +60,10 @@ html[data-ck-chrome="ambient"] .ck-actionbar-btn {
 }
 html[data-ck-chrome="ambient"] .ck-btn--primary {
   background: var(--ck-accent);
-  color: #FFFFFF;
+  /* Defaults to white to pair with ambient's deep saturated accents;
+     consumer apps may stamp --ck-accent-fg when overriding
+     --ck-accent-light-override (e.g. light brand → dark text). */
+  color: var(--ck-accent-fg, #FFFFFF);
   border: none;
   box-shadow: var(--ck-shadow-1);
 }

package/src/styles/chrome-editorial.css

@@ -29,7 +29,10 @@ html[data-ck-chrome="editorial"] .ck-actionbar-btn {
 html[data-ck-chrome="editorial"] .ck-btn--primary,
 html[data-ck-chrome="editorial"] .ck-actionbar-btn--primary {
   background: var(--ck-accent);
-  color: #0F0F0F;
+  /* Defaults to near-black to pair with coral; consumer apps may
+     stamp --ck-accent-fg to a different colour when overriding
+     --ck-accent-light-override (e.g. dark brand → white text). */
+  color: var(--ck-accent-fg, #0F0F0F);
 }
 html[data-ck-chrome="editorial"] .ck-btn--primary:hover,
 html[data-ck-chrome="editorial"] .ck-actionbar-btn--primary:hover {

package/src/styles/chrome-neobrutalism.css

@@ -42,7 +42,10 @@ html[data-ck-chrome="neobrutalism"] .ck-actionbar-btn:active:not(:disabled) {
 
 html[data-ck-chrome="neobrutalism"] .ck-btn--primary {
   background: var(--ck-accent);
-  color: #000;
+  /* Defaults to black to pair with neobrutalism's saturated pastel
+     accent; consumer apps may stamp --ck-accent-fg when overriding
+     --ck-accent-light-override. */
+  color: var(--ck-accent-fg, #000);
 }
 html[data-ck-chrome="neobrutalism"] .ck-btn--primary:hover:not(:disabled) {
   background: var(--ck-accent);

package/src/styles/chrome-riso.css

@@ -86,7 +86,10 @@ html[data-ck-chrome="riso"] .ck-actionbar-btn:active:not(:disabled) {
 html[data-ck-chrome="riso"] .ck-btn--primary,
 html[data-ck-chrome="riso"] .ck-actionbar-btn--primary {
   background: var(--ck-accent);
-  color: #1A1A1A;
+  /* Defaults to near-black to pair with riso's pink ink accent;
+     consumer apps may stamp --ck-accent-fg when overriding
+     --ck-accent-light-override. */
+  color: var(--ck-accent-fg, #1A1A1A);
   box-shadow: 3px 3px 0 var(--ck-riso-blue);
 }
 html[data-ck-chrome="riso"] .ck-btn--primary:hover:not(:disabled),

package/src/styles/chrome-sketch.css

@@ -82,7 +82,10 @@ html[data-ck-chrome="sketch"] .ck-actionbar-btn:active:not(:disabled) {
 html[data-ck-chrome="sketch"] .ck-btn--primary,
 html[data-ck-chrome="sketch"] .ck-actionbar-btn--primary {
   background: var(--ck-accent);
-  color: #FFFEF9;
+  /* Defaults to paper-white to pair with sketch's blue ink accent;
+     consumer apps may stamp --ck-accent-fg when overriding
+     --ck-accent-light-override. */
+  color: var(--ck-accent-fg, #FFFEF9);
   box-shadow: 2px 3px 0 var(--ck-text-primary);
 }
 html[data-ck-chrome="sketch"] .ck-btn--primary:hover:not(:disabled) {

package/src/styles/index.css

@@ -185,6 +185,13 @@ html[data-ck-chrome="seamless"] .ck-card__foot {
 .ck-actionbar-btn:hover:not(:disabled):not(.ck-actionbar-btn--primary) {
   background: var(--ck-bg-muted);
 }
+/* Children inside an open disclosure group sit on top of the wrapper's
+   --ck-accent-muted pill. The default gray hover above reads as a hue
+   collision against the coral/indigo wrapper — swap in an accent-blended
+   overlay so the hover signal stays in the accent family. */
+.ck-actionbar-group--open .ck-actionbar-btn:hover:not(:disabled):not(.ck-actionbar-btn--primary) {
+  background: color-mix(in oklab, var(--ck-accent) 18%, transparent);
+}
 .ck-actionbar-btn--primary {
   background: var(--ck-accent);
   color: var(--ck-text-inverse);