aeon-ui-engine 1.0.2 → 1.1.0

package/apps/demo/src/demo-layout.css

@@ -1,293 +0,0 @@
-/* App shell layout — explicit CSS (do not rely on removed Tailwind utilities). */
-
-.demo-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--aeon-gap-sm);
-}
-
-.demo-row--loose {
-  gap: var(--aeon-gap);
-}
-
-.demo-stack {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--aeon-gap);
-}
-
-.demo-stack--tight {
-  gap: var(--aeon-gap-sm);
-}
-
-.demo-combobox {
-  width: 100%;
-  max-width: 16rem;
-}
-
-.demo-overlay-row {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--aeon-gap-lg);
-}
-
-.demo-tooltip-anchor {
-  text-decoration: underline dotted;
-  text-underline-offset: 3px;
-  cursor: help;
-}
-
-.demo-spaced-top {
-  margin-top: var(--aeon-gap);
-}
-
-.demo-spaced-bottom {
-  margin-bottom: var(--aeon-pad-md);
-}
-
-/* Machine console — track, readout, and actions as one rhythm */
-.machine-console {
-  display: flex;
-  flex-direction: column;
-  gap: var(--aeon-gap-lg);
-}
-
-.machine-console__actions {
-  align-self: flex-start;
-}
-
-/* Status readout — aliases for aeon-async readout parts (demo + hero) */
-.live-status,
-.aeon-async-readout {
-  width: 100%;
-}
-
-.live-status__rail,
-.aeon-async-readout__rail {
-  flex: 0 0 4px;
-}
-
-.live-status__body,
-.aeon-async-readout__body {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  padding: var(--aeon-pad-md);
-}
-
-.live-status__text {
-  margin: 0;
-  max-width: 100%;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--aeon-muted);
-}
-
-.live-status--idle .live-status__rail,
-.live-status--idle .aeon-async-readout__rail {
-  background: color-mix(in srgb, var(--aeon-muted) 55%, var(--aeon-border));
-}
-
-.live-status--loading .live-status__rail,
-.live-status--loading .aeon-async-readout__rail {
-  background: linear-gradient(
-    180deg,
-    var(--aeon-accent),
-    color-mix(in srgb, var(--aeon-accent) 40%, var(--aeon-surface))
-  );
-  background-size: 100% 200%;
-  animation: live-status-rail 1.8s ease-in-out infinite;
-}
-
-.live-status--loading .live-status__text {
-  color: var(--aeon-accent);
-}
-
-.live-status--success .live-status__rail,
-.live-status--success .aeon-async-readout__rail {
-  background: var(--aeon-accent);
-}
-
-.live-status--success .live-status__text {
-  color: var(--aeon-text);
-}
-
-.live-status--failure .live-status__rail,
-.live-status--failure .aeon-async-readout__rail {
-  background: var(--aeon-danger);
-}
-
-.live-status--failure .live-status__text {
-  color: var(--aeon-danger);
-}
-
-.live-status--empty .live-status__rail,
-.live-status--empty .aeon-async-readout__rail {
-  background: color-mix(in srgb, var(--aeon-muted) 45%, var(--aeon-border));
-}
-
-.live-status--empty .live-status__text {
-  color: var(--aeon-muted);
-}
-
-@keyframes live-status-rail {
-  0%,
-  100% {
-    background-position: 0% 0%;
-  }
-  50% {
-    background-position: 0% 100%;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .live-status--loading .live-status__rail {
-    animation: none;
-    background: var(--aeon-accent);
-  }
-}
-
-.playground-button-row {
-  display: inline-flex;
-  align-items: center;
-  max-width: 24rem;
-}
-
-.playground-controls {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--aeon-gap-lg);
-}
-
-.playground-controls__toggles {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--aeon-gap);
-  width: 100%;
-  max-width: 20rem;
-}
-
-.playground-controls__radio {
-  display: flex;
-  flex-direction: column;
-  gap: var(--aeon-gap-sm);
-  width: 100%;
-  max-width: 20rem;
-}
-
-.playground-controls__slider {
-  width: 100%;
-  max-width: 20rem;
-}
-
-/* State track — equal columns; scales type to container (no clipped labels) */
-.state-track {
-  --aeon-state-track-count: 5;
-  container-type: inline-size;
-  display: grid;
-  grid-template-columns: repeat(var(--aeon-state-track-count), minmax(0, 1fr));
-  align-items: stretch;
-  width: 100%;
-  max-width: 100%;
-  border: 1px solid var(--aeon-border);
-  border-radius: var(--aeon-radius-lg);
-  overflow: hidden;
-  background: var(--aeon-bg);
-  font-family: var(--aeon-mono);
-  font-size: clamp(0.5rem, 3cqi, 0.6875rem);
-  font-weight: 600;
-  letter-spacing: clamp(0.02em, 0.12cqi, 0.06em);
-  text-transform: uppercase;
-  line-height: 1.2;
-  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--aeon-text) 4%, transparent);
-}
-
-.state-track__seg {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.65rem clamp(0.15rem, 2.5cqi, 0.85rem);
-  color: var(--aeon-muted);
-  background: var(--aeon-surface);
-  border-right: 1px solid var(--aeon-border);
-  white-space: nowrap;
-  transition:
-    background 0.22s ease,
-    color 0.22s ease,
-    box-shadow 0.22s ease;
-}
-
-.state-track__seg:last-child {
-  border-right: none;
-}
-
-/* Completed steps — subtle lift, still on the rail */
-.state-track__seg--past {
-  color: color-mix(in srgb, var(--aeon-text) 72%, var(--aeon-muted));
-  background: var(--aeon-surface-raised);
-}
-
-.state-track__seg--past.state-track__seg--success {
-  color: color-mix(in srgb, var(--aeon-accent) 55%, var(--aeon-text));
-}
-
-/* Upcoming */
-.state-track__seg--future {
-  color: color-mix(in srgb, var(--aeon-muted) 85%, transparent);
-  background: var(--aeon-bg);
-}
-
-/* Active — fills the segment, flat joins to neighbors */
-.state-track__seg--active {
-  color: var(--aeon-bg);
-  background: var(--aeon-accent);
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, black 12%, transparent);
-}
-
-.state-track__seg--active.state-track__seg--loading {
-  background: linear-gradient(
-    110deg,
-    var(--aeon-accent) 0%,
-    color-mix(in srgb, var(--aeon-accent) 65%, var(--aeon-surface-raised)) 48%,
-    var(--aeon-accent) 100%
-  );
-  background-size: 200% 100%;
-  animation: state-track-flow 2.4s ease-in-out infinite;
-}
-
-.state-track__seg--active.state-track__seg--success {
-  background: var(--aeon-accent);
-}
-
-.state-track__seg--active.state-track__seg--failure {
-  background: var(--aeon-danger);
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 18%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, black 18%, transparent);
-}
-
-@keyframes state-track-flow {
-  0%,
-  100% {
-    background-position: 100% 0;
-  }
-  50% {
-    background-position: 0% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .state-track__seg--active.state-track__seg--loading {
-    animation: none;
-    background: var(--aeon-accent);
-  }
-}