@cosxai/ui 0.1.0

package/src/styles/chrome-swiss.css

@@ -0,0 +1,232 @@
+/* Swiss chrome — component overrides.
+   Tokens.css supplies the achromatic palette + red accent. This
+   file strips every primitive of decoration: cards lose fill and
+   shadows, becoming rules-only; inputs lose all borders except
+   the bottom; tags lose pill backgrounds and become dot + text;
+   headings tighten letter-spacing. */
+
+html[data-ck-chrome="swiss"] body {
+  font-weight: 400;
+  font-feature-settings: "ss01", "cv11", "tnum";
+}
+
+/* ===== Typography =========================================== */
+
+html[data-ck-chrome="swiss"] h1,
+html[data-ck-chrome="swiss"] .ck-h1 {
+  font-family: var(--ck-font-sans);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 0.98;
+}
+html[data-ck-chrome="swiss"] h2,
+html[data-ck-chrome="swiss"] .ck-h2 {
+  font-family: var(--ck-font-sans);
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  line-height: 1.1;
+}
+html[data-ck-chrome="swiss"] h3,
+html[data-ck-chrome="swiss"] .ck-h3 {
+  font-weight: 600;
+  letter-spacing: -0.005em;
+}
+
+html[data-ck-chrome="swiss"] .ck-eyebrow {
+  letter-spacing: 0.06em;
+  font-weight: 500;
+}
+
+/* ===== Buttons — small radius, no shadow ==================== */
+
+html[data-ck-chrome="swiss"] .ck-btn,
+html[data-ck-chrome="swiss"] .ck-actionbar-btn {
+  border-radius: 3px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+  box-shadow: none !important;
+}
+html[data-ck-chrome="swiss"] .ck-btn--primary {
+  background: var(--ck-text-primary);
+  color: var(--ck-bg-canvas);
+  border: none;
+}
+html[data-ck-chrome="swiss"] .ck-btn--primary:hover:not(:disabled) {
+  background: var(--ck-text-secondary);
+}
+html[data-ck-chrome="swiss"] .ck-btn--secondary {
+  background: transparent;
+  border: 1px solid var(--ck-text-primary);
+  color: var(--ck-text-primary);
+}
+html[data-ck-chrome="swiss"] .ck-btn--secondary:hover:not(:disabled) {
+  background: var(--ck-text-primary);
+  color: var(--ck-bg-canvas);
+}
+html[data-ck-chrome="swiss"] .ck-btn--ghost {
+  background: transparent;
+  color: var(--ck-text-primary);
+  border: none;
+}
+html[data-ck-chrome="swiss"] .ck-btn--ghost:hover:not(:disabled) {
+  background: var(--ck-bg-muted);
+}
+
+/* ===== Inputs — bottom-border-only (canonical Swiss form) === */
+
+html[data-ck-chrome="swiss"] .ck-input,
+html[data-ck-chrome="swiss"] .ck-textarea {
+  background: transparent !important;
+  border: none !important;
+  border-bottom: 1px solid var(--ck-border-subtle) !important;
+  border-radius: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  color: var(--ck-text-primary);
+  transition: border-bottom-color 120ms ease, border-bottom-width 120ms ease;
+}
+html[data-ck-chrome="swiss"] .ck-input:focus-visible,
+html[data-ck-chrome="swiss"] .ck-textarea:focus-visible {
+  outline: none;
+  border-bottom-color: var(--ck-text-primary) !important;
+  border-bottom-width: 2px !important;
+  box-shadow: none !important;
+}
+
+/* ===== Cards — rules-only sectioning ======================== */
+
+html[data-ck-chrome="swiss"] .ck-card {
+  background: transparent !important;
+  border: none !important;
+  border-top: 1px solid var(--ck-border-subtle) !important;
+  border-bottom: 1px solid var(--ck-border-subtle) !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+html[data-ck-chrome="swiss"] .ck-card__head {
+  border-bottom: 1px solid var(--ck-border-subtle);
+  padding: 16px 0;
+}
+html[data-ck-chrome="swiss"] .ck-card__body {
+  padding: 16px 0;
+}
+html[data-ck-chrome="swiss"] .ck-card__foot {
+  border-top: 1px solid var(--ck-border-subtle);
+  background: transparent;
+  padding: 12px 0;
+}
+
+/* ===== Tags — dot + text only, no pill ====================== */
+
+html[data-ck-chrome="swiss"] [data-ck-tag] {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  letter-spacing: 0.02em !important;
+  text-transform: none !important;
+  font-weight: 500 !important;
+  font-size: 12px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+}
+html[data-ck-chrome="swiss"] [data-ck-tag]::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+html[data-ck-chrome="swiss"] [data-ck-tag][data-tone="accent"] {
+  color: var(--ck-accent) !important;
+}
+html[data-ck-chrome="swiss"] [data-ck-tag][data-tone="success"] {
+  color: #15803D !important;
+}
+html[data-ck-chrome="swiss"] [data-ck-tag][data-tone="warning"] {
+  color: var(--ck-text-primary) !important;
+}
+html[data-ck-chrome="swiss"] [data-ck-tag][data-tone="critical"] {
+  color: var(--ck-accent) !important;
+}
+html[data-ck-chrome="swiss"] [data-ck-tag][data-tone="neutral"] {
+  color: var(--ck-text-secondary) !important;
+}
+
+/* ===== Layout chrome ======================================== */
+
+html[data-ck-chrome="swiss"] [data-ck-leftnav] {
+  background: var(--ck-bg-canvas) !important;
+  border-right: 1px solid var(--ck-border-subtle);
+}
+html[data-ck-chrome="swiss"] [data-ck-topbar] {
+  background: var(--ck-bg-canvas) !important;
+  border-bottom: 1px solid var(--ck-border-subtle);
+}
+
+/* ===== NavItem — text-only, weight change on active =========
+   Swiss nav is just a list of words; emphasis comes from weight,
+   not from background pills. Active gets weight 600. Leading
+   icons hidden. */
+html[data-ck-chrome="swiss"] [data-ck-navitem] {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important;
+  font-weight: 400 !important;
+  color: var(--ck-text-secondary) !important;
+  padding: 6px 8px !important;
+}
+html[data-ck-chrome="swiss"] [data-ck-navitem]:hover {
+  color: var(--ck-text-primary) !important;
+}
+html[data-ck-chrome="swiss"] [data-ck-navitem][data-active="true"] {
+  font-weight: 600 !important;
+  color: var(--ck-text-primary) !important;
+  background: transparent !important;
+}
+/* Hide leading icons — "no icons before nav items" per the brief. */
+html[data-ck-chrome="swiss"] [data-ck-navitem] svg,
+html[data-ck-chrome="swiss"] [data-ck-navitem] span > span:first-child {
+  display: none;
+}
+
+/* ===== Search trigger ======================================= */
+
+html[data-ck-chrome="swiss"] [data-ck-search-trigger] {
+  background: transparent !important;
+  border: 1px solid var(--ck-border-subtle) !important;
+  border-radius: 3px !important;
+  box-shadow: none !important;
+}
+
+/* ===== Action bar ========================================== */
+
+html[data-ck-chrome="swiss"] [data-ck-actionbar] {
+  background: var(--ck-bg-canvas) !important;
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 3px;
+  box-shadow: none !important;
+}
+
+/* ===== Modal =============================================== */
+
+html[data-ck-chrome="swiss"] [role="dialog"] > div:first-child {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: none;
+}
+html[data-ck-chrome="swiss"] [role="dialog"] > div > div {
+  border-radius: 3px;
+  border: 1px solid var(--ck-text-primary);
+  box-shadow: none;
+}
+
+/* ===== Links — accent underline ============================ */
+
+html[data-ck-chrome="swiss"] a {
+  color: var(--ck-accent);
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}

package/src/styles/chrome-terminal.css

@@ -0,0 +1,235 @@
+/* Terminal chrome — component overrides.
+   Tokens.css supplies the palette and forces font-display +
+   font-sans to point at font-mono. This file strips every
+   primitive of its softness: square corners, 1 px borders, no
+   shadows, monospace everywhere. */
+
+html[data-ck-chrome="terminal"] body {
+  font-family: var(--ck-font-mono);
+  font-weight: 400;
+  font-feature-settings: "tnum", "zero", "calt" 0;
+  letter-spacing: 0;
+}
+
+/* ===== Typography =========================================== */
+
+html[data-ck-chrome="terminal"] h1,
+html[data-ck-chrome="terminal"] .ck-h1 {
+  font-family: var(--ck-font-mono);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+}
+html[data-ck-chrome="terminal"] h2,
+html[data-ck-chrome="terminal"] .ck-h2 {
+  font-family: var(--ck-font-mono);
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.2;
+}
+html[data-ck-chrome="terminal"] h3,
+html[data-ck-chrome="terminal"] .ck-h3 {
+  font-family: var(--ck-font-mono);
+  font-weight: 600;
+}
+
+html[data-ck-chrome="terminal"] .ck-eyebrow,
+html[data-ck-chrome="terminal"] .ck-tag {
+  letter-spacing: 0;
+  font-family: var(--ck-font-mono);
+}
+
+html[data-ck-chrome="terminal"] code {
+  background: var(--ck-bg-surface-2);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 2px;
+  padding: 1px 6px;
+}
+html[data-ck-chrome="terminal"] pre {
+  background: var(--ck-bg-surface);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 2px;
+}
+
+/* ===== Buttons ============================================== */
+
+html[data-ck-chrome="terminal"] .ck-btn,
+html[data-ck-chrome="terminal"] .ck-actionbar-btn {
+  border-radius: 2px;
+  font-family: var(--ck-font-mono);
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+  box-shadow: none !important;
+  border: 1px solid var(--ck-border-subtle);
+}
+html[data-ck-chrome="terminal"] .ck-btn--primary {
+  background: var(--ck-text-primary);
+  color: var(--ck-bg-canvas);
+  border-color: var(--ck-text-primary);
+}
+html[data-ck-chrome="terminal"] .ck-btn--primary:hover:not(:disabled) {
+  background: var(--ck-bg-canvas);
+  color: var(--ck-text-primary);
+}
+html[data-ck-chrome="terminal"] .ck-btn--secondary {
+  background: transparent;
+  color: var(--ck-text-primary);
+  border-color: var(--ck-border-subtle);
+}
+html[data-ck-chrome="terminal"] .ck-btn--secondary:hover:not(:disabled) {
+  border-color: var(--ck-border-strong);
+  background: var(--ck-bg-surface);
+}
+html[data-ck-chrome="terminal"] .ck-btn--ghost {
+  background: transparent;
+  border: 1px solid transparent;
+}
+html[data-ck-chrome="terminal"] .ck-btn--ghost:hover:not(:disabled) {
+  border-color: var(--ck-border-subtle);
+}
+
+/* ===== Inputs ============================================== */
+
+html[data-ck-chrome="terminal"] .ck-input,
+html[data-ck-chrome="terminal"] .ck-textarea {
+  background: var(--ck-bg-surface-2);
+  border: 1px solid var(--ck-border-subtle) !important;
+  border-radius: 2px !important;
+  font-family: var(--ck-font-mono);
+  color: var(--ck-text-primary);
+}
+html[data-ck-chrome="terminal"] .ck-input:focus-visible,
+html[data-ck-chrome="terminal"] .ck-textarea:focus-visible {
+  outline: none;
+  border-color: var(--ck-border-strong) !important;
+  border-top-color: var(--ck-accent) !important;
+  box-shadow: none !important;
+}
+
+/* ===== Cards ================================================ */
+
+html[data-ck-chrome="terminal"] .ck-card {
+  background: var(--ck-bg-surface);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 2px;
+  box-shadow: none;
+}
+html[data-ck-chrome="terminal"] .ck-card__head {
+  border-bottom: 1px solid var(--ck-border-subtle);
+  padding: 12px 16px;
+}
+html[data-ck-chrome="terminal"] .ck-card__body {
+  padding: 14px 16px;
+}
+html[data-ck-chrome="terminal"] .ck-card__foot {
+  border-top: 1px solid var(--ck-border-subtle);
+  background: transparent;
+  padding: 10px 16px;
+}
+
+/* ===== Tags — bracketed text + coloured dot ================ */
+
+html[data-ck-chrome="terminal"] [data-ck-tag] {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  font-family: var(--ck-font-mono) !important;
+  font-weight: 500 !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+  font-size: 12px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+html[data-ck-chrome="terminal"] [data-ck-tag]::before {
+  content: "[● ";
+  color: currentColor;
+}
+html[data-ck-chrome="terminal"] [data-ck-tag]::after {
+  content: " ]";
+  color: var(--ck-text-secondary);
+}
+html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="accent"] {
+  color: var(--ck-term-cyan) !important;
+}
+html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="success"] {
+  color: var(--ck-term-green) !important;
+}
+html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="warning"] {
+  color: var(--ck-term-amber) !important;
+}
+html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="critical"] {
+  color: var(--ck-term-red) !important;
+}
+html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="neutral"] {
+  color: var(--ck-text-secondary) !important;
+}
+
+/* ===== Layout chrome ======================================== */
+
+html[data-ck-chrome="terminal"] [data-ck-leftnav] {
+  background: var(--ck-bg-canvas) !important;
+  border-right: 1px solid var(--ck-border-subtle);
+}
+html[data-ck-chrome="terminal"] [data-ck-topbar] {
+  background: var(--ck-bg-canvas) !important;
+  border-bottom: 1px solid var(--ck-border-subtle);
+  font-family: var(--ck-font-mono);
+}
+
+/* ===== NavItem — TUI inverted selection on active =========== */
+
+html[data-ck-chrome="terminal"] [data-ck-navitem] {
+  background: transparent !important;
+  border: 1px solid transparent !important;
+  border-radius: 2px !important;
+  font-family: var(--ck-font-mono) !important;
+  font-weight: 400 !important;
+  color: var(--ck-text-secondary) !important;
+  padding: 6px 10px !important;
+}
+html[data-ck-chrome="terminal"] [data-ck-navitem]:not([data-active="true"]):hover {
+  background: var(--ck-bg-surface) !important;
+  color: var(--ck-text-primary) !important;
+}
+/* Classic TUI selection — invert. */
+html[data-ck-chrome="terminal"] [data-ck-navitem][data-active="true"] {
+  background: var(--ck-text-primary) !important;
+  color: var(--ck-bg-canvas) !important;
+  font-weight: 500 !important;
+}
+
+/* ===== Search trigger ====================================== */
+
+html[data-ck-chrome="terminal"] [data-ck-search-trigger] {
+  background: var(--ck-bg-surface) !important;
+  border: 1px solid var(--ck-border-subtle) !important;
+  border-radius: 2px !important;
+  box-shadow: none !important;
+  font-family: var(--ck-font-mono) !important;
+}
+
+/* ===== Action bar ========================================== */
+
+html[data-ck-chrome="terminal"] [data-ck-actionbar] {
+  background: var(--ck-bg-surface) !important;
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 2px;
+  box-shadow: none !important;
+  font-family: var(--ck-font-mono);
+}
+
+/* ===== Modal =============================================== */
+
+html[data-ck-chrome="terminal"] [role="dialog"] > div:first-child {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: none;
+}
+html[data-ck-chrome="terminal"] [role="dialog"] > div > div {
+  border-radius: 2px;
+  border: 1px solid var(--ck-border-strong);
+  box-shadow: none;
+  font-family: var(--ck-font-mono);
+}

package/src/styles/fonts.css

@@ -0,0 +1,22 @@
+/* @font-face declarations for the kit's default sans + mono.
+   Consumer projects supply the OTF/WOFF2 files under /fonts/ (the
+   library's public/fonts/ directory is a reference copy for when
+   the kit is consumed standalone). Swap out for your own brand
+   stack by overriding --ck-font-sans / --ck-font-mono after
+   importing this file. */
+
+@font-face {
+  font-family: "Geist";
+  src: url("/fonts/Geist-Regular.otf") format("opentype");
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("/fonts/GeistMono-Regular.otf") format("opentype");
+  font-weight: 400 600;
+  font-style: normal;
+  font-display: swap;
+}

package/src/styles/index.css

@@ -0,0 +1,198 @@
+/* @cosxai/ui — single stylesheet consumers import.
+   Order matters: fonts → tokens → base → component CSS →
+   chrome variants. Each chrome-* file is scoped to a
+   `html[data-ck-chrome="<name>"]` selector so it's a no-op
+   until that chrome is selected. */
+
+@import "./fonts.css";
+@import "./tokens.css";
+@import "./base.css";
+@import "./chrome-editorial.css";
+@import "./chrome-neobrutalism.css";
+@import "./chrome-ambient.css";
+@import "./chrome-swiss.css";
+@import "./chrome-terminal.css";
+@import "./chrome-bento.css";
+@import "./chrome-frutiger.css";
+@import "./chrome-riso.css";
+@import "./chrome-sketch.css";
+
+/* ---------- Button (Phase 0 bootstrap — Phase 3 will replace
+              this with full variant + size + loading-state styles
+              keyed off the tokens block). ---------- */
+
+.ck-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: var(--ck-radius-sm);
+  font: 500 13px/1 var(--ck-font-sans);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ck-text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--ck-dur-fast) var(--ck-ease), border-color var(--ck-dur-fast) var(--ck-ease);
+}
+
+.ck-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.ck-btn--primary {
+  background: var(--ck-accent);
+  color: var(--ck-text-inverse);
+}
+.ck-btn--primary:hover { background: var(--ck-accent-hover); }
+
+.ck-btn--secondary {
+  background: var(--ck-bg-surface);
+  color: var(--ck-text-primary);
+  border-color: var(--ck-border-strong);
+}
+.ck-btn--secondary:hover { background: var(--ck-bg-muted); }
+
+.ck-btn--ghost {
+  background: transparent;
+  color: var(--ck-text-primary);
+}
+.ck-btn--ghost:hover { background: var(--ck-bg-muted); }
+
+.ck-btn--icon {
+  background: transparent;
+  color: var(--ck-text-secondary);
+  width: 32px;
+  padding: 0;
+  justify-content: center;
+}
+.ck-btn--icon:hover {
+  background: var(--ck-bg-muted);
+  color: var(--ck-text-primary);
+}
+
+/* ---------- Card ---------- */
+.ck-card {
+  background: var(--ck-bg-surface);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: var(--ck-radius-md);
+  overflow: hidden;
+}
+html[data-ck-chrome="seamless"] .ck-card {
+  border-color: transparent;
+  border-radius: 14px;
+  box-shadow: var(--ck-shadow-1);
+}
+.ck-card__head {
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--ck-border-subtle);
+}
+html[data-ck-chrome="seamless"] .ck-card__head {
+  border-bottom-color: transparent;
+  padding-bottom: 8px;
+}
+.ck-card__body {
+  padding: 20px;
+}
+.ck-card__foot {
+  padding: 12px 20px;
+  border-top: 1px solid var(--ck-border-subtle);
+  background: var(--ck-bg-surface-2);
+}
+html[data-ck-chrome="seamless"] .ck-card__foot {
+  border-top-color: transparent;
+  background: transparent;
+}
+
+/* ---------- Input + Textarea focus state ---------- */
+.ck-input:focus-visible,
+.ck-textarea:focus-visible {
+  border-color: var(--ck-accent) !important;
+  box-shadow: 0 0 0 3px var(--ck-accent-muted);
+}
+.ck-input::placeholder,
+.ck-textarea::placeholder {
+  color: var(--ck-text-tertiary);
+}
+
+/* ---------- ActionBar — button row inside <ActionBar> ---------- */
+.ck-actionbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ck-text-primary);
+  font: 500 13px/1 var(--ck-font-sans);
+  border-radius: 999px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--ck-dur-fast) var(--ck-ease), color var(--ck-dur-fast) var(--ck-ease);
+}
+.ck-actionbar-btn:hover:not(:disabled):not(.ck-actionbar-btn--primary) {
+  background: var(--ck-bg-muted);
+}
+.ck-actionbar-btn--primary {
+  background: var(--ck-accent);
+  color: var(--ck-text-inverse);
+}
+.ck-actionbar-btn--primary:hover:not(:disabled) {
+  background: var(--ck-accent-hover);
+}
+.ck-actionbar-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Hide labels below 768 px (the standard md breakpoint).
+   Icons + tooltips remain — the bar's still informative on phones. */
+@media (max-width: 767px) {
+  .ck-actionbar-label {
+    display: none;
+  }
+}
+
+/* Spring entry from the left edge — only applied when the bar
+   sits at its default centred position. A dragged custom position
+   doesn't replay this on mount. Back-out easing overshoots ~10%
+   so the bar reads as "stuck to the edge". */
+@keyframes ck-actionbar-enter {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-50% - 240px));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
+.ck-actionbar-enter {
+  animation: ck-actionbar-enter 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+/* Phone collapsed-to-handle peek-in animation. Pairs with the
+   half-pill render path in ActionBar.tsx. */
+@keyframes ck-action-handle-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-110%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.ck-action-handle-enter {
+  animation: ck-action-handle-enter 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ck-actionbar-enter,
+  .ck-action-handle-enter {
+    animation: none;
+  }
+}