@cosxai/ui 0.24.0 → 1.0.0-alpha.0

package/src/styles/chrome-ambient.css

@@ -1,235 +0,0 @@
-/* Ambient Glass chrome — component overrides.
-   Tokens.css supplies the gradient backdrop + glass surface
-   tokens + Superbar gradient. This file makes every chrome
-   surface translucent with backdrop-filter blur so the ambient
-   mesh shows through, and threads the Superbar accent into the
-   places it belongs (active list items, AI input divider). */
-
-html[data-ck-chrome="ambient"] body {
-  /* Pin the ambient mesh to the viewport so it doesn't scroll
-     with content — feels like a real desktop wallpaper. */
-  background-attachment: fixed;
-  font-weight: 400;
-}
-
-/* ===== Layout chrome: glass surfaces over the mesh ============ */
-
-html[data-ck-chrome="ambient"] [data-ck-leftnav] {
-  background: var(--ck-bg-sidebar) !important;
-  backdrop-filter: var(--ck-blur-window);
-  -webkit-backdrop-filter: var(--ck-blur-window);
-  border-right: 1px solid var(--ck-border-subtle);
-}
-
-html[data-ck-chrome="ambient"] [data-ck-topbar] {
-  background: var(--ck-bg-sidebar) !important;
-  backdrop-filter: var(--ck-blur-window);
-  -webkit-backdrop-filter: var(--ck-blur-window);
-  border-bottom: 1px solid var(--ck-border-subtle);
-}
-
-/* ===== Cards ================================================= */
-
-html[data-ck-chrome="ambient"] .ck-card {
-  background: var(--ck-bg-surface);
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 16px;
-  box-shadow: var(--ck-shadow-1);
-  backdrop-filter: var(--ck-blur-window);
-  -webkit-backdrop-filter: var(--ck-blur-window);
-}
-html[data-ck-chrome="ambient"] .ck-card__head {
-  border-bottom: 1px solid var(--ck-border-subtle);
-}
-html[data-ck-chrome="ambient"] .ck-card__foot {
-  border-top: 1px solid var(--ck-border-subtle);
-  background: transparent;
-}
-
-/* ===== Buttons — soft pills, no chunky shadow ================ */
-
-html[data-ck-chrome="ambient"] .ck-btn,
-html[data-ck-chrome="ambient"] .ck-actionbar-btn {
-  border-radius: 10px;
-  font-weight: 600;
-  letter-spacing: 0;
-  text-transform: none;
-  transition: background var(--ck-dur-fast) var(--ck-ease),
-    border-color var(--ck-dur-fast) var(--ck-ease),
-    filter var(--ck-dur-fast) var(--ck-ease);
-}
-html[data-ck-chrome="ambient"] .ck-btn--primary {
-  background: var(--ck-accent);
-  /* 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);
-}
-html[data-ck-chrome="ambient"] .ck-btn--primary:hover:not(:disabled) {
-  filter: brightness(1.08);
-}
-html[data-ck-chrome="ambient"] .ck-btn--secondary {
-  background: var(--ck-bg-surface);
-  border-color: var(--ck-border-subtle);
-  color: var(--ck-text-primary);
-  backdrop-filter: var(--ck-blur-window);
-}
-html[data-ck-chrome="ambient"] .ck-btn--ghost {
-  background: transparent;
-  border: none;
-}
-html[data-ck-chrome="ambient"] .ck-btn--ghost:hover:not(:disabled) {
-  background: var(--ck-bg-surface);
-}
-
-/* ===== Inputs / Textareas =================================== */
-
-html[data-ck-chrome="ambient"] .ck-input,
-html[data-ck-chrome="ambient"] .ck-textarea {
-  background: var(--ck-bg-muted);
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 10px;
-  color: var(--ck-text-primary);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-html[data-ck-chrome="ambient"] .ck-input:focus-visible,
-html[data-ck-chrome="ambient"] .ck-textarea:focus-visible {
-  outline: none;
-  border-color: var(--ck-accent-border) !important;
-  box-shadow: 0 0 0 3px var(--ck-accent-muted) !important;
-}
-
-/* ===== Typography =========================================== */
-
-html[data-ck-chrome="ambient"] h1,
-html[data-ck-chrome="ambient"] .ck-h1 {
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1.05;
-}
-html[data-ck-chrome="ambient"] h2,
-html[data-ck-chrome="ambient"] .ck-h2 {
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-html[data-ck-chrome="ambient"] h3,
-html[data-ck-chrome="ambient"] .ck-h3 {
-  font-weight: 600;
-}
-
-/* ===== NavItem — active gets right-edge Superbar strip ======= */
-
-html[data-ck-chrome="ambient"] [data-ck-navitem] {
-  position: relative;
-  font-weight: 500 !important;
-  color: var(--ck-text-secondary) !important;
-  transition: background var(--ck-dur-fast) var(--ck-ease),
-    color var(--ck-dur-fast) var(--ck-ease);
-}
-html[data-ck-chrome="ambient"] [data-ck-navitem]:not([data-active="true"]) {
-  background: transparent !important;
-}
-html[data-ck-chrome="ambient"] [data-ck-navitem]:not([data-active="true"]):hover {
-  background: var(--ck-bg-surface) !important;
-  color: var(--ck-text-primary) !important;
-}
-html[data-ck-chrome="ambient"] [data-ck-navitem][data-active="true"] {
-  background: var(--ck-bg-surface) !important;
-  color: var(--ck-text-primary) !important;
-  font-weight: 600 !important;
-}
-/* The Superbar right-edge strip — signature accent. 3 px wide,
-   inset 6 px top/bottom so it doesn't kiss the border-radius. */
-html[data-ck-chrome="ambient"] [data-ck-navitem][data-active="true"]::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  top: 6px;
-  bottom: 6px;
-  width: 3px;
-  background: var(--ck-superbar);
-  border-radius: 2px;
-  pointer-events: none;
-}
-
-/* ===== Search trigger ====================================== */
-
-html[data-ck-chrome="ambient"] [data-ck-search-trigger] {
-  background: var(--ck-bg-muted) !important;
-  border: 1px solid var(--ck-border-subtle) !important;
-  border-radius: 10px !important;
-  backdrop-filter: var(--ck-blur-window);
-}
-
-/* ===== Tags / badges — soft tinted pills ===================== */
-
-html[data-ck-chrome="ambient"] [data-ck-tag] {
-  border-radius: 8px !important;
-  padding: 3px 10px !important;
-  font-weight: 600 !important;
-  border: 1px solid transparent !important;
-  box-shadow: none !important;
-}
-html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="accent"] {
-  background: color-mix(in oklab, var(--ck-accent) 14%, transparent) !important;
-  color: var(--ck-accent) !important;
-}
-html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="success"] {
-  background: color-mix(in oklab, var(--ck-success) 14%, transparent) !important;
-  color: var(--ck-success) !important;
-}
-html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="warning"] {
-  background: color-mix(in oklab, var(--ck-warning) 14%, transparent) !important;
-  color: var(--ck-warning) !important;
-}
-html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="critical"] {
-  background: color-mix(in oklab, var(--ck-critical) 14%, transparent) !important;
-  color: var(--ck-critical) !important;
-}
-html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="neutral"] {
-  background: var(--ck-bg-muted) !important;
-  color: var(--ck-text-secondary) !important;
-}
-
-/* ===== Action bar — floating glass pill ===================== */
-
-html[data-ck-chrome="ambient"] [data-ck-actionbar] {
-  background: var(--ck-bg-sidebar) !important;
-  backdrop-filter: var(--ck-blur-overlay);
-  -webkit-backdrop-filter: var(--ck-blur-overlay);
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 24px;
-  box-shadow: var(--ck-shadow-2);
-}
-
-/* ===== Modal — heavy backdrop blur ========================== */
-
-html[data-ck-chrome="ambient"] [role="dialog"] > div:first-child {
-  background: rgba(0, 0, 0, 0.4) !important;
-  backdrop-filter: var(--ck-blur-overlay);
-  -webkit-backdrop-filter: var(--ck-blur-overlay);
-}
-html[data-ck-chrome="ambient"] [role="dialog"] > div > div {
-  border-radius: 20px;
-}
-
-/* ===== Reduced motion ====================================== */
-
-@media (prefers-reduced-motion: reduce) {
-  html[data-ck-chrome="ambient"] * {
-    transition: none !important;
-  }
-}
-
-html[data-ck-chrome="ambient"] .ck-actionbar-panel,
-html[data-ck-chrome="ambient"] .ck-actionbar-toast {
-  background: var(--ck-bg-sidebar);
-  backdrop-filter: var(--ck-blur-overlay);
-  -webkit-backdrop-filter: var(--ck-blur-overlay);
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 20px;
-  box-shadow: var(--ck-shadow-2);
-}

package/src/styles/chrome-bento.css

@@ -1,192 +0,0 @@
-/* Bento chrome — component overrides.
-   Tokens.css supplies the neutral palette + generous radii + soft
-   multi-layer shadows. This file polishes existing primitives to
-   match: Apple-style large radius cards, soft pill buttons, no
-   chunky borders, hover-lift on cells. The layout primitives
-   (<BentoGrid> + <BentoCell>) do the heavy lifting elsewhere. */
-
-html[data-ck-chrome="bento"] body {
-  font-weight: 400;
-  font-feature-settings: "ss01", "cv11";
-}
-
-html[data-ck-chrome="bento"] h1,
-html[data-ck-chrome="bento"] .ck-h1 {
-  font-weight: 600;
-  letter-spacing: -0.025em;
-  line-height: 1.05;
-}
-html[data-ck-chrome="bento"] h2,
-html[data-ck-chrome="bento"] .ck-h2 {
-  font-weight: 600;
-  letter-spacing: -0.015em;
-}
-html[data-ck-chrome="bento"] h3,
-html[data-ck-chrome="bento"] .ck-h3 {
-  font-weight: 600;
-  letter-spacing: -0.005em;
-}
-
-/* Buttons */
-html[data-ck-chrome="bento"] .ck-btn,
-html[data-ck-chrome="bento"] .ck-actionbar-btn {
-  border-radius: 12px;
-  font-weight: 500;
-  letter-spacing: -0.005em;
-  text-transform: none;
-  box-shadow: var(--ck-shadow-1);
-  transition: background 160ms ease, transform 160ms ease;
-}
-html[data-ck-chrome="bento"] .ck-btn--primary {
-  background: var(--ck-text-primary);
-  color: var(--ck-bg-canvas);
-  border: none;
-}
-html[data-ck-chrome="bento"] .ck-btn--primary:hover:not(:disabled) {
-  background: color-mix(in oklab, var(--ck-text-primary), white 12%);
-}
-html[data-ck-chrome="bento"] .ck-btn--secondary {
-  background: var(--ck-bg-surface);
-  color: var(--ck-text-primary);
-  border: 1px solid var(--ck-border-subtle);
-}
-html[data-ck-chrome="bento"] .ck-btn--ghost {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-}
-html[data-ck-chrome="bento"] .ck-btn--ghost:hover:not(:disabled) {
-  background: var(--ck-bg-muted);
-}
-
-/* Inputs */
-html[data-ck-chrome="bento"] .ck-input,
-html[data-ck-chrome="bento"] .ck-textarea {
-  background: var(--ck-bg-surface);
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 12px;
-}
-html[data-ck-chrome="bento"] .ck-input:focus-visible,
-html[data-ck-chrome="bento"] .ck-textarea:focus-visible {
-  outline: none;
-  border-color: var(--ck-accent) !important;
-  box-shadow: 0 0 0 3px var(--ck-accent-muted) !important;
-}
-
-/* Cards — bento baseline */
-html[data-ck-chrome="bento"] .ck-card {
-  background: var(--ck-bg-surface);
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 22px;
-  box-shadow: var(--ck-shadow-2);
-}
-html[data-ck-chrome="bento"] .ck-card__head {
-  border-bottom: 1px solid var(--ck-border-subtle);
-  padding: 18px 24px;
-}
-html[data-ck-chrome="bento"] .ck-card__body {
-  padding: 24px;
-}
-html[data-ck-chrome="bento"] .ck-card__foot {
-  border-top: 1px solid var(--ck-border-subtle);
-  background: transparent;
-  padding: 16px 24px;
-}
-
-/* Tags — soft tinted pills */
-html[data-ck-chrome="bento"] [data-ck-tag] {
-  background: var(--ck-bg-muted) !important;
-  border-radius: 999px !important;
-  padding: 4px 10px !important;
-  font-weight: 500 !important;
-  letter-spacing: 0 !important;
-  text-transform: none !important;
-  box-shadow: none !important;
-  border: none !important;
-  font-size: 12px !important;
-}
-html[data-ck-chrome="bento"] [data-ck-tag][data-tone="accent"] {
-  background: var(--ck-accent-muted) !important;
-  color: var(--ck-accent) !important;
-}
-html[data-ck-chrome="bento"] [data-ck-tag][data-tone="success"] {
-  background: color-mix(in oklab, var(--ck-success) 12%, transparent) !important;
-  color: var(--ck-success) !important;
-}
-html[data-ck-chrome="bento"] [data-ck-tag][data-tone="warning"] {
-  background: color-mix(in oklab, var(--ck-warning) 14%, transparent) !important;
-  color: var(--ck-warning) !important;
-}
-html[data-ck-chrome="bento"] [data-ck-tag][data-tone="critical"] {
-  background: color-mix(in oklab, var(--ck-critical) 12%, transparent) !important;
-  color: var(--ck-critical) !important;
-}
-
-/* Layout chrome */
-html[data-ck-chrome="bento"] [data-ck-leftnav] {
-  background: var(--ck-bg-sidebar) !important;
-  border-right: 1px solid var(--ck-border-subtle);
-}
-html[data-ck-chrome="bento"] [data-ck-topbar] {
-  background: var(--ck-bg-canvas) !important;
-  border-bottom: 1px solid var(--ck-border-subtle);
-}
-
-/* NavItem — soft pill */
-html[data-ck-chrome="bento"] [data-ck-navitem] {
-  background: transparent !important;
-  border-radius: 10px !important;
-  font-weight: 500 !important;
-}
-html[data-ck-chrome="bento"] [data-ck-navitem]:not([data-active="true"]):hover {
-  background: var(--ck-bg-muted) !important;
-}
-html[data-ck-chrome="bento"] [data-ck-navitem][data-active="true"] {
-  background: var(--ck-bg-muted) !important;
-  color: var(--ck-text-primary) !important;
-  font-weight: 600 !important;
-}
-
-/* Search trigger */
-html[data-ck-chrome="bento"] [data-ck-search-trigger] {
-  background: var(--ck-bg-surface) !important;
-  border: 1px solid var(--ck-border-subtle) !important;
-  border-radius: 12px !important;
-  box-shadow: var(--ck-shadow-1);
-}
-
-/* Action bar */
-html[data-ck-chrome="bento"] [data-ck-actionbar] {
-  background: var(--ck-bg-surface) !important;
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 16px;
-  box-shadow: var(--ck-shadow-2);
-}
-
-/* Modal */
-html[data-ck-chrome="bento"] [role="dialog"] > div:first-child {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(8px);
-}
-html[data-ck-chrome="bento"] [role="dialog"] > div > div {
-  border-radius: 22px;
-  box-shadow: var(--ck-shadow-3);
-}
-
-/* BentoCell — hover lift signature */
-html[data-ck-chrome="bento"] [data-ck-bento-cell] {
-  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1),
-    box-shadow 240ms cubic-bezier(0.2, 0, 0, 1);
-}
-html[data-ck-chrome="bento"] [data-ck-bento-cell][data-interactive="true"]:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--ck-shadow-3);
-}
-
-html[data-ck-chrome="bento"] .ck-actionbar-panel,
-html[data-ck-chrome="bento"] .ck-actionbar-toast {
-  background: var(--ck-bg-surface);
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 16px;
-  box-shadow: var(--ck-shadow-2);
-}

package/src/styles/chrome-editorial.css

@@ -1,168 +0,0 @@
-/* Editorial chrome — component overrides.
-   Token overrides live in tokens.css; this file restyles the
-   primitives' shape / feel to match the print-magazine brief.
-   Loads alongside index.css; takes effect only when
-   html[data-ck-chrome="editorial"] is set on the root. */
-
-html[data-ck-chrome="editorial"] body {
-  /* Optical kerning + ligatures for the editorial body type. */
-  font-feature-settings: "kern", "liga", "ss01";
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Buttons — fully rounded pills, no shadow ever. Primary is
-   coral fill with near-black text (the brief specifies dark text
-   on coral, not white). */
-html[data-ck-chrome="editorial"] .ck-btn,
-html[data-ck-chrome="editorial"] .ck-actionbar-btn {
-  height: 36px;
-  padding: 0 18px;
-  border-radius: 9999px;
-  font-family: var(--ck-font-sans);
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  box-shadow: none !important;
-}
-
-html[data-ck-chrome="editorial"] .ck-btn--primary,
-html[data-ck-chrome="editorial"] .ck-actionbar-btn--primary {
-  background: var(--ck-accent);
-  /* 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 {
-  background: var(--ck-accent-hover);
-}
-
-html[data-ck-chrome="editorial"] .ck-btn--secondary {
-  background: transparent;
-  border: 1px solid var(--ck-text-primary);
-  color: var(--ck-text-primary);
-}
-
-/* Cards — 1 px hairline, no shadow, slightly tighter radius.
-   Index-card feel, not glassmorphism. */
-html[data-ck-chrome="editorial"] .ck-card {
-  background: var(--ck-bg-surface);
-  border: 1px solid var(--ck-border-subtle);
-  border-radius: 16px;
-  box-shadow: none;
-}
-
-/* Eyebrow / tag — editorial uses a longer track + leading
-   em-dash. Reads as a magazine section label. */
-html[data-ck-chrome="editorial"] .ck-eyebrow,
-html[data-ck-chrome="editorial"] .ck-tag {
-  letter-spacing: 0.18em;
-  font-family: var(--ck-font-sans);
-  color: var(--ck-text-secondary);
-}
-html[data-ck-chrome="editorial"] .ck-eyebrow::before {
-  content: "— ";
-  color: var(--ck-text-tertiary);
-}
-
-/* Headings switch to serif via --ck-font-display. ck-h1/h2/h3
-   already read from --ck-font-sans by default; under editorial
-   we override at this scope so the typography stack rotates
-   without touching component code. */
-html[data-ck-chrome="editorial"] h1,
-html[data-ck-chrome="editorial"] h2,
-html[data-ck-chrome="editorial"] h3,
-html[data-ck-chrome="editorial"] .ck-h1,
-html[data-ck-chrome="editorial"] .ck-h2,
-html[data-ck-chrome="editorial"] .ck-h3 {
-  font-family: var(--ck-font-display);
-  letter-spacing: -0.012em;
-  line-height: 1.08;
-  font-weight: 500;
-}
-
-/* Italic-in-the-middle treatment for the docs h1. Wrapping
-   the italicised word in <em> is enough — the serif's italic
-   variant carries the editorial signature move. */
-html[data-ck-chrome="editorial"] h1 em,
-html[data-ck-chrome="editorial"] h2 em,
-html[data-ck-chrome="editorial"] .ck-h1 em,
-html[data-ck-chrome="editorial"] .ck-h2 em {
-  font-style: italic;
-  color: var(--ck-text-primary);
-}
-
-/* Inputs — paper feel, no inner shadow, ink-coloured borders. */
-html[data-ck-chrome="editorial"] .ck-input,
-html[data-ck-chrome="editorial"] .ck-textarea {
-  background: var(--ck-bg-surface);
-  border-color: var(--ck-border-subtle);
-  font-family: var(--ck-font-sans);
-}
-
-/* Action bar — keep the pill profile but drop the shadow. The
-   bar is just a hairline-bounded paper strip floating on cream. */
-html[data-ck-chrome="editorial"] [data-ck-actionbar] {
-  background: var(--ck-bg-surface);
-  border-color: var(--ck-border-subtle);
-  box-shadow: none;
-}
-
-/* Left rail — same cream paper, hairline divider. */
-html[data-ck-chrome="editorial"] [data-ck-leftnav] {
-  background: var(--ck-bg-canvas);
-  border-right-color: var(--ck-border-subtle);
-}
-
-/* Nav-item hover — match the actionbar / button hover token so
-   every interactive surface in the editorial chrome reads as
-   actionable on pointer enter. The sketch / ambient / riso / etc.
-   chromes have always carried this rule; editorial was the only
-   gap (consumers saw rail items as static even though they're
-   navigable). Active rows keep their accent-muted background from
-   the base NavItem inline style, so the `:not([data-active="true"])`
-   guard is the same shape the other chromes use. */
-html[data-ck-chrome="editorial"] [data-ck-navitem]:not([data-active="true"]):hover {
-  background: var(--ck-bg-muted);
-}
-
-/* Topbar — flatten to the paper, lose the bottom border (the
-   folio rule under it is the visual divider in editorial). */
-html[data-ck-chrome="editorial"] [data-ck-topbar] {
-  background: var(--ck-bg-canvas);
-  border-bottom: none;
-}
-
-/* Modal backdrop — printerly, not glassy. Cream-tinted
-   translucent overlay instead of blue-tinted blur. */
-html[data-ck-chrome="editorial"] [role="dialog"] > div:first-child {
-  background: rgba(15, 15, 15, 0.4);
-  backdrop-filter: none;
-}
-
-/* <EditorialSpotlight>: dark canvas with cream cards floating on
-   top. The wrapper sets --ck-text-primary to cream so paragraphs
-   on the dark surround read correctly — but cards inside it stay
-   cream paper, so their text needs to flip BACK to dark ink. Rebind
-   the text variables on the .ck-card scope and everything nested
-   inside (h1/h2, body copy, eyebrows, captions) reads dark again. */
-[data-ck-spotlight] .ck-card {
-  --ck-text-primary: #0F0F0F;
-  --ck-text-secondary: #6B6557;
-  --ck-text-tertiary: #A8A294;
-  color: #0F0F0F;
-}
-[data-ck-spotlight] .ck-card .ck-eyebrow,
-[data-ck-spotlight] .ck-card .ck-tag {
-  color: var(--ck-text-secondary);
-}
-
-/* ActionBar panel/toast — flat paper, hairline, no drop glow. */
-html[data-ck-chrome="editorial"] .ck-actionbar-panel,
-html[data-ck-chrome="editorial"] .ck-actionbar-toast {
-  background: var(--ck-bg-surface);
-  border-color: var(--ck-border-subtle);
-  box-shadow: var(--ck-shadow-1, 0 2px 8px rgba(0, 0, 0, 0.06));
-}