@purpurds/popover 0.0.1

package/src/popover.module.scss

@@ -0,0 +1,315 @@
+@use "@purpurds/tokens/_index" as *;
+@use "@purpurds/tokens/breakpoint/variables" as *;
+
+$animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)
+  forwards;
+
+.purpur-popover {
+  $root: &;
+
+  // Trigger states
+  &__trigger {
+    position: relative;
+    width: fit-content;
+
+    &-highlight {
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      border-radius: var(--purpur-border-radius-sm);
+      pointer-events: none;
+
+      // State 1: Outer glow (continuously fades in/out)
+      &--state1 {
+        border: var(--purpur-border-radius-xs) solid
+          var(--purpur-color-border-interactive-expressive);
+        box-shadow: 0 0 0 4px rgba(153, 10, 227, 0.5);
+
+        @media (prefers-reduced-motion: no-preference) {
+          animation: highlightState1 var(--purpur-motion-duration-1500) ease-out 3;
+          animation-fill-mode: forwards;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          opacity: 0;
+        }
+
+        // Negative variant (light purple)
+        &.purpur-popover__trigger-highlight--negative {
+          border-color: var(--purpur-color-purple-200);
+          box-shadow: 0 0 0 4px rgba(228, 182, 251, 0.5);
+        }
+      }
+
+      // State 2: Inner border (always visible)
+      &--state2 {
+        border: var(--purpur-border-radius-xs) solid
+          var(--purpur-color-border-interactive-expressive);
+        opacity: 1;
+
+        @media (prefers-reduced-motion: reduce) {
+          opacity: 1;
+        }
+
+        // Negative variant (light purple)
+        &.purpur-popover__trigger-highlight--negative {
+          border-color: var(--purpur-color-purple-200);
+        }
+      }
+    }
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-100);
+    align-self: stretch;
+  }
+
+  // Content container
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-300);
+    width: 288px; // Hardcoded to 288px
+    padding: var(--purpur-spacing-200);
+    border-radius: var(--purpur-border-radius-md);
+    box-shadow: var(--purpur-shadow-lg);
+    z-index: var(--popover-z-index);
+
+    @media (prefers-reduced-motion: no-preference) {
+      // Animate based on position (data-side from Radix)
+      &[data-state="open"] {
+        animation: fadeIn $animation-settings;
+
+        &[data-side="top"] {
+          animation: fadeIn $animation-settings, slideFromTop $animation-settings;
+        }
+        &[data-side="bottom"] {
+          animation: fadeIn $animation-settings, slideFromBottom $animation-settings;
+        }
+        &[data-side="left"] {
+          animation: fadeIn $animation-settings, slideFromLeft $animation-settings;
+        }
+        &[data-side="right"] {
+          animation: fadeIn $animation-settings, slideFromRight $animation-settings;
+        }
+      }
+
+      &[data-state="closed"] {
+        animation: fadeOut $animation-settings;
+
+        &[data-side="top"] {
+          animation: fadeOut $animation-settings, slideToTop $animation-settings;
+        }
+        &[data-side="bottom"] {
+          animation: fadeOut $animation-settings, slideToBottom $animation-settings;
+        }
+        &[data-side="left"] {
+          animation: fadeOut $animation-settings, slideToLeft $animation-settings;
+        }
+        &[data-side="right"] {
+          animation: fadeOut $animation-settings, slideToRight $animation-settings;
+        }
+      }
+    }
+
+    @media (min-width: $purpur-breakpoint-md) {
+      width: 400px; // Hardcoded to 400px
+    }
+
+    // Default theme colors
+    background: var(--purpur-color-background-tone-on-tone-primary);
+
+    #{$root}__arrow {
+      fill: var(--purpur-color-background-tone-on-tone-primary);
+    }
+
+    #{$root}__body,
+    #{$root}__icon,
+    #{$root}__steps,
+    #{$root}__title {
+      color: var(--purpur-color-text-tone-on-tone-primary);
+    }
+
+    // Negative theme
+    &--negative {
+      background: var(--purpur-color-background-tone-on-tone-secondary);
+
+      #{$root}__arrow {
+        fill: var(--purpur-color-background-tone-on-tone-secondary);
+      }
+
+      #{$root}__body,
+      #{$root}__icon,
+      #{$root}__steps,
+      #{$root}__title {
+        color: var(--purpur-color-text-tone-on-tone-secondary);
+      }
+    }
+  }
+
+  // Header
+  &__header-content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-100);
+    align-self: stretch;
+    padding-right: var(--purpur-spacing-300); // was 28px, 300 is 24px but closest token
+
+    #{$root}__icon {
+      display: flex;
+      padding-top: var(--purpur-spacing-25);
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  // Close button - increased specificity to ensure position absolute is applied
+  &__content &__close {
+    position: absolute;
+    top: 6.26px;
+    right: 6.26px;
+  }
+
+  // Footer
+  &__footer {
+    display: flex;
+    text-align: center;
+    gap: var(--purpur-spacing-150);
+    align-self: stretch;
+    align-items: center;
+
+    flex-direction: column-reverse;
+
+    @media (min-width: $purpur-breakpoint-md) {
+      flex-direction: row;
+    }
+
+    &-button-group {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: var(--purpur-spacing-200);
+      flex: 1 0 0;
+    }
+  }
+
+  &__steps {
+    flex-shrink: 0;
+    color: var(--purpur-color-text-tone-on-tone-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Animations
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+// Slide from top (popover is above trigger, beak pointing down)
+@keyframes slideFromTop {
+  from {
+    transform: translateY(-8px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideToTop {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-8px);
+  }
+}
+
+// Slide from bottom (popover is below trigger, beak pointing up)
+@keyframes slideFromBottom {
+  from {
+    transform: translateY(8px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideToBottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(8px);
+  }
+}
+
+// Slide from left (popover is to the left of trigger, beak pointing right)
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(-8px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideToLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-8px);
+  }
+}
+
+// Slide from right (popover is to the right of trigger, beak pointing left)
+@keyframes slideFromRight {
+  from {
+    transform: translateX(8px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideToRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(8px);
+  }
+}
+
+@keyframes highlightState1 {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}