@cosxai/ui 0.4.1 → 0.4.3

package/package.json

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

package/src/primitives/Input.tsx

@@ -98,6 +98,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         flexDirection: "column",
         gap: 6,
         width: fit === "full" ? "100%" : undefined,
+        // minWidth: 0 lets a parent flex container shrink this
+        // wrapper past the inner addon-wrap's nowrap suffix content.
+        // Without it, a long suffix (e.g. ".meta.test.cosx.dev")
+        // sets a min-content floor that pushes the form wider than
+        // its mobile viewport. Per-page CSS workarounds in consumer
+        // apps only cover their own scope; fixing it at the primitive
+        // catches every page.
+        minWidth: 0,
       }}
     >
       {label && (

package/src/styles/index.css

@@ -117,6 +117,30 @@ html[data-ck-chrome="seamless"] .ck-card__foot {
   color: var(--ck-text-tertiary);
 }
 
+/* ---------- Input + Textarea disabled state ----------
+   Native :disabled styling is barely perceptible on a cream / dark
+   surface, which made disabled fields read as editable in
+   product-meta's settings (the email field in particular). Match
+   the .ck-btn:disabled treatment so consumers don't have to
+   reapply the same opacity / cursor pattern at every call site.
+
+   The addon-wrap variant uses :has(:disabled) so a wrapping
+   .ck-input-addon-wrap also dims when its inner <input> is disabled
+   — otherwise the slug input dims but its ".meta.test.cosx.dev"
+   suffix stays at full opacity, which looks broken. :has() is
+   supported across all evergreen browsers since 2023; pre-1.0 we
+   don't need a polyfill. */
+.ck-input:disabled,
+.ck-textarea:disabled,
+.ck-input-addon-wrap:has(:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.ck-input:disabled,
+.ck-textarea:disabled {
+  background: var(--ck-bg-muted, var(--ck-bg-surface));
+}
+
 /* ---------- Select (custom listbox — never native <select>) ----------
    The trigger LOOKS like .ck-input so chrome restyles cascade
    uniformly. Chromes that want a different vibe (terminal squared,

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