@motion-proto/live-tokens 0.70.0 → 0.72.0

package/src/system/components/FloatingTokenTags.css

@@ -1,284 +0,0 @@
-/*
- * Decoupled from the design system: pills, knots, strings, balls, and
- * animations are hardcoded so token edits don't repaint our chrome. The
- * exceptions are intentional and ARE the demo: the central box's
- * surface/radius/border (set inline), the dropdown (rendered through
- * <MenuSelect>), elevation, which reads from the --shadow-* scale, and the
- * zap colour, which tracks --text-accent so the beam stays on-theme.
- * File is global; keep selectors `ftt-` prefixed.
- */
-
-.ftt-stage {
-  --ftt-contrast-color: var(--color-white);
-  --ftt-zap-color: var(--text-accent);
-  --ftt-string-opacity: 0.5;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  /* No overflow clipping: the bottom tag's dropdown must extend past the
-     stage edge. */
-}
-
-/* --- Central box ---------------------------------------------------------- */
-.ftt-box {
-  --ftt-box-contrast-color: var(--color-white);
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  translate: -50% -50%;
-  box-sizing: border-box;
-  padding: 0.75rem 1.5rem;
-  display: inline-flex;
-  width: 12rem;
-  align-items: center;
-  justify-content: center;
-  /* Defaults; overridden inline from the active token bindings. */
-  background: color-mix(in srgb, #264542 50%, transparent);
-  border-style: solid;
-  border-color: #52726e;
-  border-width: 2px;
-  border-radius: 0.25rem;
-  box-shadow: var(--shadow-md);
-  transition:
-    background    300ms ease,
-    border-color  300ms ease,
-    border-width  300ms ease,
-    border-radius 300ms ease;
-  z-index: 1;
-}
-
-.ftt-box-label {
-  font-family: Manrope, system-ui, -apple-system, sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--ftt-box-contrast-color);
-  white-space: nowrap;
-  user-select: none;
-  pointer-events: none;
-}
-
-.ftt-box.ftt-bloop {
-  animation: ftt-bloop 480ms ease-out;
-}
-
-@keyframes ftt-bloop {
-  0%   { scale: 1;    filter: brightness(1); }
-  30%  { scale: 1.08; filter: brightness(1.8) saturate(1.4); }
-  100% { scale: 1;    filter: brightness(1); }
-}
-
-/* --- Kite strings --------------------------------------------------------- */
-.ftt-strings {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.ftt-string {
-  stroke: var(--ftt-contrast-color);
-  stroke-width: 2;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-  opacity: var(--ftt-string-opacity);
-  transition: opacity 150ms ease, stroke 150ms ease;
-}
-
-.ftt-string.ftt-live {
-  stroke: var(--ftt-zap-color);
-  opacity: 1;
-}
-
-/* --- Anchor knots --------------------------------------------------------- */
-.ftt-knot {
-  position: absolute;
-  width: 0.625rem;
-  height: 0.625rem;
-  translate: -50% -50%;
-  border-radius: 9999px;
-  background: #c4bcb6;
-  border: 1px solid #f0eae4;
-  pointer-events: none;
-  z-index: 3;
-}
-
-/* --- Energy ball ---------------------------------------------------------- */
-/* Shares --ftt-zap-color with `.ftt-string.ftt-live` so the beam reads as a
-   continuous trail, not a colour-shifting projectile. */
-.ftt-energy-ball {
-  position: absolute;
-  width: 0.875rem;
-  height: 0.875rem;
-  translate: -50% -50%;
-  border-radius: 9999px;
-  background: var(--ftt-zap-color);
-  box-shadow:
-    0 0 8px  2px var(--ftt-zap-color),
-    0 0 18px 4px var(--ftt-zap-color);
-  pointer-events: none;
-  opacity: 0;
-  z-index: 6;
-}
-
-/* --- Floating tag wrapper ------------------------------------------------- */
-.ftt-float {
-  position: absolute;
-  translate: -50% -50%;
-  rotate: var(--ftt-rot, 0deg);
-  animation: ftt-bob var(--ftt-bob-duration, 7s) ease-in-out infinite;
-  z-index: 4;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  width: 14rem;
-}
-
-/* Lift open tag so its dropdown paints over sibling tags. */
-.ftt-float.ftt-open {
-  z-index: 20;
-}
-
-/* Bottom-placement chips mirror the top arc: chip first, eyebrow on the
-   outer (lower) side. Dropdown opens upward toward the box so the menu
-   doesn't fall off the stage. */
-.ftt-float[data-placement="bottom"] {
-  flex-direction: column-reverse;
-}
-
-/* Pivot the tilt around the chip's right semicircular cap. The chip is
-   ~1.84rem tall so the cap center sits ~0.9rem from the chip's right edge
-   and ~0.9rem above its bottom — which (since the chip is the widest, last
-   in-flow element of the wrapper) coincides with `calc(100% - 0.9rem)` on
-   both axes of the wrapper. */
-.ftt-float[data-pivot="right-cap"] {
-  transform-origin: calc(100% - 0.9rem) calc(100% - 0.9rem);
-}
-
-@keyframes ftt-bob {
-  0%, 100% { translate: -50% -50%; }
-  50%      { translate: -50% calc(-50% + var(--ftt-bob-distance, -8px)); }
-}
-
-/* --- Property label paired with each tag ---------------------------------- */
-/* Sits on the outer side of the chip: above for top-placement chips, below
-   for bottom-placement chips (see `.ftt-float[data-placement="bottom"]`). */
-.ftt-float-property {
-  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 700;
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-
-/* --- Tag pill ------------------------------------------------------------- */
-/* Hardcoded (not the Badge component) so badge-* token edits don't repaint. */
-.ftt-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.375rem 0.75rem;
-  /* Polished chrome, not brushed steel: the bands keep their spacing but sit
-     high in the scale, so the pill stays bright against a cream page. Keep
-     the darkest stop ≥ #8f9090 or the black label loses AA. */
-  background: linear-gradient(
-    135deg,
-    #fbfbfb 0%,
-    #c9cbcb 38%,
-    #eff0f0 62%,
-    #b6b8b8 100%
-  );
-  color: #000;
-  border: 1px solid rgba(86, 96, 104, 0.45);
-  border-radius: 9999px;
-  box-shadow: var(--shadow-md);
-  font-family: Manrope, system-ui, -apple-system, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.1;
-  white-space: nowrap;
-}
-
-.ftt-tag-icon {
-  display: inline-flex;
-  align-items: center;
-  font-size: 0.875em;
-}
-
-.ftt-tag-label {
-  display: inline-block;
-}
-
-/* --- Tag trigger (draggable button wrapping the pill) --------------------- */
-.ftt-tag-trigger {
-  pointer-events: auto;
-  background: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  cursor: grab;
-  touch-action: none;
-  transition: filter 150ms ease, scale 150ms ease;
-}
-.ftt-tag-trigger:hover {
-  filter: brightness(1.2);
-  scale: 1.04;
-}
-.ftt-float.ftt-dragging .ftt-tag-trigger {
-  cursor: grabbing;
-}
-.ftt-float.ftt-dragging {
-  animation: none; /* pause bob while dragging */
-  z-index: 30;
-}
-.ftt-tag-trigger:focus-visible {
-  outline: 2px solid var(--ftt-zap-color);
-  outline-offset: 3px;
-  border-radius: 9999px;
-}
-
-.ftt-float.ftt-flash .ftt-tag-trigger {
-  animation: ftt-tag-flash 500ms ease-out;
-}
-
-@keyframes ftt-tag-flash {
-  0%   { scale: 1;    filter: brightness(1)   drop-shadow(0 0 0  transparent); }
-  25%  { scale: 1.14; filter: brightness(1.8) drop-shadow(0 0 14px #fff5f0); }
-  100% { scale: 1;    filter: brightness(1)   drop-shadow(0 0 0  transparent); }
-}
-
-/* --- Chip host ------------------------------------------------------------ */
-/* Wraps the chip-trigger and (when open) the dropdown so the dropdown can
-   anchor directly to the chip's edges, not the float wrapper's. Without
-   this, `top: 100%` lands at the wrapper bottom — which is the eyebrow for
-   `data-placement="bottom"` — and the menu drifts off the chip. */
-.ftt-chip-host {
-  position: relative;
-  display: inline-flex;
-}
-
-/* --- Dropdown menu -------------------------------------------------------- */
-/* The wrap handles position/stacking only; the surface lives on
-   <MenuSelect> so menuselect-* token edits reshape the in-flight UI. */
-.ftt-dropdown-wrap {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 50%;
-  translate: -50% 0;
-  pointer-events: auto;
-  z-index: 10;
-}
-
-/* --- Reduced motion ------------------------------------------------------- */
-@media (prefers-reduced-motion: reduce) {
-  .ftt-float {
-    animation: none;
-  }
-  .ftt-box.ftt-bloop,
-  .ftt-float.ftt-flash .ftt-tag-trigger {
-    animation: none;
-  }
-}