@cosxai/ui 0.4.2 → 0.4.4

package/package.json

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

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/tokens.css

@@ -195,12 +195,18 @@ html[data-ck-chrome="editorial"] {
   --ck-text-disabled:  #C9C3B5;
   --ck-text-inverse:   #ECE6D6;
 
-  /* Coral is THE accent. Ochre lives in --ck-warning for
+  /* Coral is THE editorial accent. Ochre lives in --ck-warning for
      secondary "guest star" use (the brief says one accent only;
-     ochre repurposes the warning slot since its tone matches). */
-  --ck-accent:         #E96E50;
-  --ck-accent-hover:   #D85A3E;
-  --ck-accent-active:  #C44D34;
+     ochre repurposes the warning slot since its tone matches).
+     Runtime brand override flows through --ck-accent-light-override
+     just like the default :root chain — coral is the FALLBACK, not
+     a hardcode. hover/active derive via the same color-mix formula
+     so brand colour cascades to the full accent family. Muted /
+     border keep editorial's softer 14% / 40% (vs base 8% / 35%) so
+     the editorial "watercolour wash" feel survives a brand swap. */
+  --ck-accent:         var(--ck-accent-light-override, #E96E50);
+  --ck-accent-hover:   color-mix(in oklab, var(--ck-accent), black 10%);
+  --ck-accent-active:  color-mix(in oklab, var(--ck-accent), black 18%);
   --ck-accent-muted:   color-mix(in oklab, var(--ck-accent) 14%, transparent);
   --ck-accent-border:  color-mix(in oklab, var(--ck-accent) 40%, transparent);
   --ck-border-focus:   var(--ck-accent);
@@ -734,7 +740,7 @@ html[data-ck-chrome="riso"] {
      associates with the aesthetic. Override per-app for blue /
      yellow / orange-led palettes. */
   --ck-accent:        var(--ck-accent-light-override, #FF48B0);
-  --ck-accent-hover:  #E63A9D;
+  --ck-accent-hover:  color-mix(in oklab, var(--ck-accent), black 10%);
   --ck-accent-muted:  color-mix(in oklab, var(--ck-accent) 14%, transparent);
   --ck-accent-border: color-mix(in oklab, var(--ck-accent) 50%, transparent);
 
@@ -798,7 +804,7 @@ html[data-ck-theme="dark"][data-ck-chrome="riso"] {
   --ck-text-inverse:   #14131A;
 
   --ck-accent: var(--ck-accent-dark-override, var(--ck-accent-light-override, #FF6FBF));
-  --ck-accent-hover: #FF8FCC;
+  --ck-accent-hover: color-mix(in oklab, var(--ck-accent), white 10%);
 
   --ck-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.6);
   --ck-shadow-2: 3px 3px 0 var(--ck-riso-blue);
@@ -846,9 +852,9 @@ html[data-ck-chrome="sketch"] {
   --ck-sketch-hi-green:  rgba(111, 207, 151, 0.32);
 
   --ck-accent:        var(--ck-accent-light-override, var(--ck-sketch-blue));
-  --ck-accent-hover:  #3A78C8;
-  --ck-accent-muted:  rgba(74, 144, 226, 0.16);
-  --ck-accent-border: rgba(74, 144, 226, 0.5);
+  --ck-accent-hover:  color-mix(in oklab, var(--ck-accent), black 10%);
+  --ck-accent-muted:  color-mix(in oklab, var(--ck-accent) 16%, transparent);
+  --ck-accent-border: color-mix(in oklab, var(--ck-accent) 50%, transparent);
 
   /* Handwriting fonts — Caveat / Patrick Hand / Kalam are common
      Google Fonts; Comic Sans MS is the universal fallback that