@alpic-ai/ui 0.0.0-dev.f8c735b → 0.0.0-dev.f8dc346

package/src/styles/tokens.css

@@ -39,6 +39,9 @@
 
   --color-ring: #f22b79; /* Figma: focus-ring */
 
+  /* cta — decorative gradient accent, used with --color-primary in the CTA button ring */
+  --color-cta-accent: #6eece7; /* Figma: CTA border accent (cyan) */
+
   /* sidebar */
   --color-sidebar: #f8fafa; /* Figma: bg-secondary-subtle */
   --color-sidebar-foreground: #3a4848; /* Figma: fg-secondary */
@@ -106,6 +109,8 @@
   /* animations */
   --animate-accordion-down: accordion-down 200ms ease-out;
   --animate-accordion-up: accordion-up 200ms ease-out;
+  --animate-beacon-ring-core: beacon-ring-core 2.2s ease-in-out infinite;
+  --animate-beacon-ring-pulse: beacon-ring-pulse 2.2s ease-in-out infinite;
 }
 
 @keyframes accordion-down {
@@ -126,6 +131,186 @@
   }
 }
 
+@keyframes beacon-ring-core {
+  0%,
+  100% {
+    opacity: 0.55;
+    transform: scale(0.98);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.02);
+  }
+}
+
+@keyframes beacon-ring-pulse {
+  0%,
+  100% {
+    opacity: 0.88;
+    transform: scale(1);
+    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.02);
+    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.24));
+  }
+}
+
+/* ─── CTA button — animated conic gradient ring ───────────────────────────── */
+
+@property --cta-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 135deg;
+}
+
+@keyframes cta-rotate {
+  to {
+    --cta-angle: 495deg;
+  }
+}
+
+.button-cta {
+  position: relative;
+  isolation: isolate;
+  /* light mode: whisper-of-gradient surface tint + soft rose drop-shadow */
+  background-image: linear-gradient(
+    135deg,
+    color-mix(in oklab, var(--color-primary) 5%, transparent) 0%,
+    color-mix(in oklab, var(--color-cta-accent) 5%, transparent) 100%
+  );
+  box-shadow:
+    0 6px 24px -10px color-mix(in oklab, var(--color-primary) 38%, transparent),
+    0 2px 6px -4px color-mix(in oklab, var(--color-cta-accent) 30%, transparent);
+  transition:
+    box-shadow 400ms ease,
+    transform 300ms ease,
+    filter 300ms ease;
+}
+
+@media (hover: hover) {
+  .button-cta:hover {
+    box-shadow:
+      0 10px 30px -8px color-mix(in oklab, var(--color-primary) 52%, transparent),
+      0 3px 10px -3px color-mix(in oklab, var(--color-cta-accent) 40%, transparent);
+  }
+}
+
+/* dark mode: solid inverted surface, no tint or shadow — let the halo do the work */
+.dark .button-cta {
+  background-image: none;
+  box-shadow: none;
+}
+
+.button-cta::before,
+.button-cta::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  /* Always "running" in browser terms, but paused at rest — freezes at current
+     angle on unhover instead of snapping back. */
+  animation: cta-rotate 3.2s linear infinite;
+  animation-play-state: paused;
+}
+
+/* Gradient ring (masked so only the border shows) */
+.button-cta::before {
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--cta-angle),
+    var(--color-cta-accent) 0deg,
+    var(--color-primary) 150deg,
+    var(--color-cta-accent) 300deg,
+    var(--color-cta-accent) 360deg
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition: filter 400ms ease;
+}
+
+/* Blurred glow halo behind the button — subtle in light, bolder in dark */
+.button-cta::after {
+  z-index: -1;
+  background: conic-gradient(
+    from var(--cta-angle),
+    var(--color-cta-accent) 0deg,
+    var(--color-primary) 150deg,
+    var(--color-cta-accent) 300deg,
+    var(--color-cta-accent) 360deg
+  );
+  filter: blur(12px);
+  opacity: 0.05;
+  transition: opacity 400ms ease;
+}
+
+.dark .button-cta::after {
+  opacity: 0.14;
+}
+
+@media (hover: hover) {
+  .button-cta:hover::before,
+  .button-cta:hover::after {
+    animation-play-state: running;
+  }
+  .button-cta:hover::before {
+    filter: saturate(1.15) brightness(1.05);
+  }
+  .button-cta:hover::after {
+    opacity: 0.18;
+  }
+  .dark .button-cta:hover::after {
+    opacity: 0.32;
+  }
+}
+
+.button-cta:focus-visible::before,
+.button-cta:focus-visible::after {
+  animation-play-state: running;
+}
+
+.button-cta:disabled::before,
+.button-cta:disabled::after,
+[aria-busy="true"].button-cta::before,
+[aria-busy="true"].button-cta::after {
+  animation-play-state: paused;
+}
+.button-cta:disabled::after {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button-cta::before,
+  .button-cta::after {
+    animation: none;
+  }
+}
+
+/* Icon slide on hover (applied to [data-cta-icon-trailing]) */
+.button-cta [data-cta-icon-trailing] {
+  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@media (hover: hover) {
+  .button-cta:hover [data-cta-icon-trailing] {
+    transform: translateX(2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button-cta [data-cta-icon-trailing] {
+    transition: none;
+  }
+  .button-cta:hover [data-cta-icon-trailing] {
+    transform: none;
+  }
+}
+
 /* ─── Dark mode ───────────────────────────────────────────────────────────── */
 
 .dark {
@@ -163,6 +348,9 @@
 
   --color-ring: #f22b79; /* Figma: focus-ring */
 
+  /* cta — decorative gradient accent, used with --color-primary in the CTA button ring */
+  --color-cta-accent: #6eece7; /* Figma: CTA border accent (cyan) */
+
   /* sidebar */
   --color-sidebar: #0c1c1c; /* Figma: bg-secondary */
   --color-sidebar-foreground: #90a4a4; /* Figma: fg-secondary */
@@ -221,6 +409,14 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+:root {
+  --gradient-sidebar: linear-gradient(0deg, #c9e2e280 0%, #ffffff 70%); /* Figma: bg-nav-gradiant-light */
+}
+
+.dark {
+  --gradient-sidebar: linear-gradient(0deg, #213535 0%, #121e1e 70%); /* Figma: bg-nav-gradiant-dark */
+}
+
 @layer base {
   * {
     @apply border-border shadow-shadow;
@@ -274,6 +470,11 @@
 
 /* ─── Type preset utilities ───────────────────────────────────────────────── */
 
+@utility bg-sidebar-surface {
+  background-color: var(--color-background);
+  background-image: var(--gradient-sidebar);
+}
+
 @utility type-display-2xl {
   font-family: var(--font-display);
   font-size: var(--font-size-display-2xl);