@cosxai/ui 0.25.0 → 1.0.0-alpha.0

package/src/styles/index.css

@@ -1,343 +0,0 @@
-/* @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-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;
-  text-decoration: none;
-  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; }
-
-/* Loading spinner — rendered inside a Button when its `loading`
-   prop is true. CSS-only ring (1.5px stroke, 720ms linear spin).
-   `currentColor` inherits the variant's foreground so the spinner
-   reads on primary / secondary / ghost / icon without per-variant
-   overrides. Reduced-motion users get a slower spin instead of a
-   frozen ring (which would read as broken). */
-.ck-btn-spinner {
-  width: 0.85em;
-  height: 0.85em;
-  border: 1.5px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  vertical-align: -0.1em;
-  flex-shrink: 0;
-  animation: ck-btn-spin 720ms linear infinite;
-}
-@keyframes ck-btn-spin {
-  to { transform: rotate(360deg); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ck-btn-spinner { animation-duration: 2400ms; }
-}
-
-.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);
-}
-
-/* ---------- 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,
-   sketch hand-drawn, swiss underline-only) override at their own
-   scope. */
-.ck-select-trigger:focus-visible {
-  border-color: var(--ck-accent) !important;
-  box-shadow: 0 0 0 3px var(--ck-accent-muted);
-}
-.ck-select-trigger--disabled {
-  cursor: not-allowed !important;
-}
-.ck-select-popover {
-  animation: ck-popover-enter 140ms var(--ck-ease) both;
-  transform-origin: top center;
-}
-.ck-select-option--active {
-  /* Inline style already paints --ck-bg-muted; this class hook is
-     left for chrome overrides that want to draw a left-border or
-     other indicator on the active row. */
-}
-.ck-select-option--selected {
-  font-weight: 500;
-}
-
-/* ---------- 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);
-}
-/* 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.
-
-   30% blend (was 18% in 0.4.5): 18% layered onto an --ck-accent-muted
-   wrapper (already 8–14% accent depending on chrome) composites to
-   ~30% effective saturation. At that low saturation translucent
-   orange / coral / blue all read as washed-out salmon — the hover
-   loses its hue identity against the solid --ck-accent text right
-   beside it. 30% pushes the overlay past the "dilution reads as
-   pink" inflection so the workspace's actual brand colour is
-   recognisable.  */
-.ck-actionbar-group--open .ck-actionbar-btn:hover:not(:disabled):not(.ck-actionbar-btn--primary) {
-  background: color-mix(in oklab, var(--ck-accent) 30%, transparent);
-}
-.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;
-}
-
-/* Icon glyph wrapper — sized larger than the button's 13 px label
-   text so unicode symbols (◐ ☀ ☾ ◇) and small SVGs read clearly.
-   ActionBarButton wraps the icon prop in this span automatically;
-   callers don't need to opt in. The 1 px upward translate
-   compensates for geometric glyphs sitting about 1 px below their
-   em-box centre — flex centring otherwise leaves them looking
-   slightly low next to the heavier label text. */
-.ck-actionbar-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 1;
-  transform: translateY(-1px);
-}
-
-/* Hide labels + keyboard-shortcut hints below 768 px (the standard
-   md breakpoint). Icons + tooltips remain — the bar's still
-   informative on phones, and there's no physical keyboard so the
-   shortcut badge has nothing to advertise. */
-@media (max-width: 767px) {
-  .ck-actionbar-label,
-  .ck-actionbar-hint {
-    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;
-  }
-}
-
-/* ---------- Input bare mode + MultiCombobox inline field ----------
-   `.ck-input--bare` is an <input> whose FIELD is drawn by its host
-   (MultiCombobox inline layout: chips + input in one frame). Chrome
-   presets restyle `.ck-input` with !important at up to (0,5,1)
-   specificity, so this rule uses `:not(#\#)` to out-rank them and
-   strip every trace of field chrome back off. */
-.ck-input.ck-input--bare:not(#\#) {
-  background: transparent !important;
-  border: none !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  outline: none !important;
-  height: 28px !important;
-  padding: 0 4px !important;
-}
-
-/* The host-drawn field: looks like .ck-input, carries the focus ring
-   via :focus-within, the invalid border via :has([aria-invalid]) and
-   the disabled dim via :has(:disabled). */
-.ck-multi-combobox-field:focus-within {
-  border-color: var(--ck-accent) !important;
-  box-shadow: 0 0 0 3px var(--ck-accent-muted);
-}
-.ck-multi-combobox-field:has(.ck-input[aria-invalid="true"]) {
-  border-color: var(--ck-critical) !important;
-}
-.ck-multi-combobox-field:has(.ck-input:disabled) {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-.ck-multi-combobox-invalid-hint {
-  display: none;
-}
-.ck-multi-combobox-field:has(.ck-input[aria-invalid="true"]) + .ck-multi-combobox-invalid-hint {
-  display: block;
-}