@mosaic-media/sdui-react 0.1.0

package/dist/styles/components.css

@@ -0,0 +1,772 @@
+/* SPDX-License-Identifier: AGPL-3.0-only */
+/* SPDX-FileCopyrightText: 2026 the Mosaic authors */
+
+/*
+ * Skin for the native primitives and the app chrome only. Every *component* is
+ * a definition that styles itself inline from tokens (sdui/style.ts), so this
+ * file covers just: the interactive primitives whose native elements need CSS
+ * (inputs, tabs, menu, slider, rating, progress, seasons), the Pressable/
+ * placeholder helpers, the shell chrome, overlays/toasts, and the gallery.
+ * Nothing here reaches past a --token.
+ */
+
+/* ───────────────────────── icon ───────────────────────── */
+.msc-icon {
+  display: inline-block;
+  flex: none;
+  vertical-align: -0.15em;
+}
+
+/* ─────────────────────── primitives ─────────────────────── */
+/* Box/Text/Image/Icon/Spacer style themselves inline from tokens; only the
+   Pressable primitive and the Image placeholder need CSS here. */
+.msc-pressable {
+  border: none;
+  margin: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.msc-pressable:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.msc-pressable--lift {
+  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
+}
+.msc-pressable--lift:hover:not(:disabled) {
+  transform: translateY(-4px);
+}
+.msc-prim-placeholder {
+  color: var(--color-text-faint);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: linear-gradient(140deg, var(--color-surface-raised), var(--color-surface-overlay));
+}
+
+/* ─────────────────────── app chrome ─────────────────────── */
+.msc-app {
+  display: grid;
+  grid-template-columns: 248px 1fr;
+  min-height: 100vh;
+}
+
+.msc-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  padding: var(--space-5) var(--space-4);
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+.msc-sidebar__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0 var(--space-2);
+}
+.msc-sidebar__logo {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: conic-gradient(from 210deg, var(--color-accent), #8b5cf6, #22d3ee, var(--color-accent));
+  box-shadow: var(--shadow-1);
+}
+.msc-sidebar__name {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.02em;
+}
+.msc-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.msc-sidebar__sep {
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--space-3) var(--space-2);
+}
+.msc-navitem {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-3);
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: var(--text-md);
+  font-weight: var(--weight-medium);
+  text-align: left;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.msc-navitem .msc-icon {
+  font-size: 1.2em;
+}
+.msc-navitem:hover {
+  background: var(--color-surface-raised);
+  color: var(--color-text);
+}
+.msc-navitem.is-active {
+  background: var(--color-accent-quiet);
+  color: var(--color-accent);
+}
+.msc-sidebar__foot {
+  margin-top: auto;
+  padding: 0 var(--space-2);
+}
+.msc-sidebar__version {
+  font-size: var(--text-xs);
+  color: var(--color-text-faint);
+}
+
+.msc-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.msc-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--shell-gutter);
+  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--color-border);
+}
+.msc-topbar__left,
+.msc-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.msc-topbar__crumb {
+  font-weight: var(--weight-medium);
+  color: var(--color-text-muted);
+}
+.msc-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-pill);
+  display: grid;
+  place-items: center;
+  background: var(--color-accent);
+  color: var(--color-text-on-accent);
+  font-weight: var(--weight-bold);
+  font-size: var(--text-sm);
+}
+.msc-content {
+  flex: 1;
+  padding: var(--space-6) var(--shell-gutter) var(--space-8);
+  max-width: var(--shell-max);
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* ──────────── interactive primitives (native elements) ──────────── */
+.msc-tabs__list {
+  display: flex;
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--color-border);
+}
+.msc-tabs__tab {
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  padding: var(--space-3) var(--space-4);
+  cursor: pointer;
+  font-weight: var(--weight-medium);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.msc-tabs__tab:hover {
+  color: var(--color-text);
+}
+.msc-tabs__tab.is-active {
+  color: var(--color-text);
+  border-bottom-color: var(--color-accent);
+}
+.msc-tabs__panel {
+  padding-top: var(--space-4);
+}
+
+.msc-iconbtn {
+  display: inline-grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.msc-iconbtn--ghost {
+  background: transparent;
+  color: var(--color-text-muted);
+}
+.msc-iconbtn--ghost:hover:not(:disabled) {
+  background: var(--color-surface-raised);
+  color: var(--color-text);
+}
+.msc-iconbtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.msc-menu {
+  position: relative;
+  display: inline-block;
+}
+.msc-menu__list {
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--space-1));
+  min-width: 180px;
+  background: var(--color-surface-overlay);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-2);
+  padding: var(--space-1);
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+}
+.msc-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  background: transparent;
+  color: var(--color-text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--text-sm);
+}
+.msc-menu__item:hover {
+  background: var(--color-surface-raised);
+}
+.msc-menu__item.is-danger {
+  color: var(--color-danger);
+}
+
+.msc-search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-pill);
+  padding: var(--space-3) var(--space-4);
+  max-width: 560px;
+}
+.msc-search:focus-within {
+  border-color: var(--color-accent);
+}
+.msc-search__icon {
+  color: var(--color-text-faint);
+  font-size: 1.2em;
+}
+.msc-search__input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+.msc-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.msc-field__label {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--color-text-muted);
+}
+.msc-field__input {
+  width: 100%;
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  outline: none;
+  transition: border-color var(--dur-fast) var(--ease);
+}
+.msc-field__input:focus {
+  border-color: var(--color-accent);
+}
+
+.msc-select {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.msc-select__el {
+  appearance: none;
+  width: 100%;
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
+  outline: none;
+  cursor: pointer;
+}
+.msc-select__el:focus {
+  border-color: var(--color-accent);
+}
+.msc-select__chevron {
+  position: absolute;
+  right: var(--space-3);
+  pointer-events: none;
+  color: var(--color-text-faint);
+}
+
+.msc-toggle__track {
+  position: relative;
+  width: 44px;
+  height: 26px;
+  border-radius: var(--radius-pill);
+  border: none;
+  background: var(--color-progress-track);
+  cursor: pointer;
+  transition: background var(--dur-med) var(--ease);
+  flex: none;
+}
+.msc-toggle__track.is-on {
+  background: var(--color-accent);
+}
+.msc-toggle__thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  background: #fff;
+  box-shadow: var(--shadow-1);
+  transition: transform var(--dur-med) var(--ease);
+}
+.msc-toggle__track.is-on .msc-toggle__thumb {
+  transform: translateX(18px);
+}
+
+.msc-slider__label {
+  display: flex;
+  justify-content: space-between;
+}
+.msc-slider__value {
+  color: var(--color-accent);
+  font-variant-numeric: tabular-nums;
+}
+.msc-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--color-progress-track);
+  outline: none;
+}
+.msc-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+  cursor: pointer;
+  border: 3px solid var(--color-bg);
+}
+.msc-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+  cursor: pointer;
+  border: 3px solid var(--color-bg);
+}
+
+.msc-rating {
+  display: inline-flex;
+  gap: var(--space-1);
+}
+.msc-rating__star {
+  border: none;
+  background: transparent;
+  color: var(--color-text-faint);
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 2px;
+}
+.msc-rating__star.is-filled {
+  color: var(--color-rating);
+}
+
+.msc-progress {
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--color-progress-track);
+  overflow: hidden;
+  width: 100%;
+}
+.msc-progress__fill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--color-accent);
+  transition: width var(--dur-med) var(--ease);
+}
+.msc-progress__fill--success {
+  background: var(--color-success);
+}
+.msc-progress__fill--warning {
+  background: var(--color-warning);
+}
+.msc-progress__fill--danger {
+  background: var(--color-danger);
+}
+
+.msc-seasons {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.msc-seasons__pill {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-raised);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+}
+.msc-seasons__pill.is-active {
+  background: var(--color-accent);
+  color: var(--color-text-on-accent);
+  border-color: transparent;
+}
+
+/* ──────────── computed / animated primitives ──────────── */
+.msc-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.msc-skeleton-group--rail {
+  flex-direction: row;
+}
+.msc-skeleton {
+  background: linear-gradient(
+    100deg,
+    var(--color-surface-raised) 30%,
+    var(--color-surface-overlay) 50%,
+    var(--color-surface-raised) 70%
+  );
+  background-size: 200% 100%;
+  animation: msc-shimmer 1.4s linear infinite;
+  border-radius: var(--radius-md);
+}
+.msc-skeleton--poster {
+  width: 150px;
+  aspect-ratio: 2 / 3;
+  flex: none;
+}
+.msc-skeleton--line {
+  height: 12px;
+  border-radius: var(--radius-pill);
+}
+.msc-skeleton--block {
+  height: 120px;
+}
+.msc-skeleton--circle {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-pill);
+}
+@keyframes msc-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+/* ──────────── Unknown fallback ──────────── */
+.msc-unknown {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  border: 1px dashed var(--color-border-strong);
+  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
+  font-size: var(--text-xs);
+}
+.msc-unknown__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-warning);
+}
+.msc-unknown__type {
+  font-family: var(--font-mono);
+  color: var(--color-text);
+}
+.msc-unknown__hint {
+  color: var(--color-text-faint);
+}
+
+/* ──────────────────────── host ──────────────────────── */
+.msc-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: flex;
+}
+.msc-overlay__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--color-scrim);
+  backdrop-filter: blur(2px);
+}
+.msc-overlay__panel {
+  position: relative;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-3);
+  overflow: auto;
+  animation: msc-pop var(--dur-med) var(--ease);
+}
+.msc-overlay__content {
+  padding: var(--space-6);
+}
+.msc-overlay__close {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius-pill);
+  border: none;
+  background: var(--color-surface-raised);
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+.msc-overlay--modal {
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-5);
+}
+.msc-overlay--modal .msc-overlay__panel {
+  width: min(560px, 100%);
+  max-height: 86vh;
+  border-radius: var(--radius-lg);
+}
+.msc-overlay--sheet {
+  align-items: flex-end;
+  justify-content: center;
+}
+.msc-overlay--sheet .msc-overlay__panel {
+  width: 100%;
+  max-width: var(--shell-max);
+  max-height: 80vh;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+.msc-overlay--drawer {
+  justify-content: flex-end;
+}
+.msc-overlay--drawer .msc-overlay__panel {
+  width: min(420px, 100%);
+  height: 100%;
+}
+@keyframes msc-pop {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.msc-toasts {
+  position: fixed;
+  bottom: var(--space-5);
+  right: var(--space-5);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-width: min(380px, calc(100vw - 2 * var(--space-5)));
+}
+.msc-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-overlay);
+  border: 1px solid var(--color-border-strong);
+  box-shadow: var(--shadow-2);
+  animation: msc-pop var(--dur-med) var(--ease);
+}
+.msc-toast__message {
+  flex: 1;
+  font-size: var(--text-sm);
+}
+.msc-toast__close {
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+.msc-toast--accent {
+  border-left: 3px solid var(--color-accent);
+}
+.msc-toast--success {
+  border-left: 3px solid var(--color-success);
+}
+.msc-toast--warning {
+  border-left: 3px solid var(--color-warning);
+}
+.msc-toast--danger {
+  border-left: 3px solid var(--color-danger);
+}
+.msc-toast--info {
+  border-left: 3px solid var(--color-info);
+}
+
+/* ──────────────────────── gallery ──────────────────────── */
+.msc-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-7);
+}
+.msc-gallery__intro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.msc-gallery__intro h1 {
+  font-size: var(--text-2xl);
+  font-weight: var(--weight-bold);
+}
+.msc-gallery__intro p {
+  color: var(--color-text-muted);
+}
+.msc-gallery__types {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.msc-gallery__type {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-raised);
+  color: var(--color-text-muted);
+}
+.msc-gallery__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.msc-gallery__grouphead h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--weight-bold);
+}
+.msc-gallery__grouphead p {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+.msc-gallery__demos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--space-4);
+}
+.msc-gallery__demo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+.msc-gallery__demo--wide {
+  grid-column: 1 / -1;
+}
+.msc-gallery__demoname {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-text-faint);
+}
+.msc-gallery__stage {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+}
+.msc-gallery__stage > * {
+  min-width: 0;
+}
+
+/* ──────────────────────── responsive ──────────────────────── */
+@media (max-width: 860px) {
+  .msc-app {
+    grid-template-columns: 1fr;
+  }
+  .msc-sidebar {
+    position: fixed;
+    bottom: 0;
+    top: auto;
+    left: 0;
+    right: 0;
+    height: auto;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-2);
+    border-right: none;
+    border-top: 1px solid var(--color-border);
+    padding: var(--space-2);
+    z-index: 50;
+    overflow-x: auto;
+  }
+  .msc-sidebar__brand,
+  .msc-sidebar__foot,
+  .msc-sidebar__sep {
+    display: none;
+  }
+  .msc-sidebar__nav {
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-around;
+  }
+  .msc-navitem span:not(.msc-icon) {
+    display: none;
+  }
+  .msc-content {
+    padding-bottom: var(--space-8);
+  }
+}