@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/themes/mashroom/06-components/_components.accordion.scss

@@ -0,0 +1,187 @@
+@use '../02-tools/tools.trippy-effects' as trippy;
+@use '../02-tools/tools.psychedelic-gradients' as gradients;
+@use '../01-settings/settings.colors' as colors;
+@use '../01-settings/settings.config' as config;
+
+// Psychedelic accordion animations
+@keyframes accordion-float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes accordion-glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 10px rgba(157, 0, 255, 0.5);
+  }
+  50% {
+    box-shadow:
+      0 0 20px rgba(157, 0, 255, 0.8),
+      0 0 30px rgba(255, 32, 133, 0.6),
+      0 0 40px rgba(255, 187, 0, 0.4);
+  }
+}
+
+@keyframes accordion-expand {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+.c-accordion {
+  $root: &;
+  // Apply psychedelic border with glow effect
+  @include trippy.trippy-glow(colors.$primary-6, 10px);
+
+  // Add color shift for extra psychedelic effect
+  @include trippy.color-shift();
+
+  // Add floating animation
+  @include trippy.float-animation();
+  animation-duration: 6s;
+
+  // Add pulse animation
+  animation: accordion-glow-pulse 3s infinite;
+
+  &__header {
+    @include gradients.mushroom-cap-gradient();
+
+    // Add pulse effect to header
+    @include trippy.psychedelic-pulse(colors.$primary-4);
+
+    // Add a subtle pattern
+    background-image:
+      radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+      radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+    background-size: 30px 30px;
+
+    // Add floating effect
+    @include trippy.float-animation();
+    animation-duration: 4s;
+
+    // Add psychedelic border
+    border: 1px solid rgba(157, 0, 255, 0.3);
+
+    &:hover {
+      @include gradients.psychedelic-linear-gradient(colors.$primary-6, colors.$blue-6);
+      transform: scale(1.01) rotate(1deg);
+      @include trippy.trippy-glow(colors.$red-4, 15px);
+    }
+
+    // Active state
+    &--active {
+      @include gradients.rainbow-gradient();
+      background-size: 300% 300%;
+      animation: rainbow-shift 4s ease infinite;
+      border: 1px solid rgba(255, 187, 0, 0.5);
+
+      &:hover {
+        animation: rainbow-shift 2s ease infinite;
+        @include trippy.trippy-glow(colors.$yellow-4, 20px);
+      }
+    }
+  }
+
+  &__body {
+    @include gradients.mushroom-stem-gradient();
+    border-top: 1px solid colors.$primary-3;
+
+    // Add animation when expanding
+    animation: accordion-expand 0.3s ease-out;
+
+    // Add a subtle sparkle effect
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background:
+        radial-gradient(1px 1px at 20px 30px, var(--atomix-body-color), rgba(255, 255, 255, 0)),
+        radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+      background-repeat: repeat;
+      background-size: 50px 50px;
+      animation: sparkle 3s linear infinite;
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
+    @keyframes sparkle {
+      from {
+        background-position: 0 0;
+      }
+      to {
+        background-position: 50px 50px;
+      }
+    }
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    @include gradients.rainbow-gradient();
+    background-size: 400% 400%;
+    animation: rainbow-shift 6s ease infinite;
+    border: 2px solid transparent;
+    border-radius: 10px;
+
+    #{$root}__header {
+      @include gradients.rainbow-gradient();
+      background-size: 300% 300%;
+      animation: rainbow-shift 4s ease infinite;
+      border: none;
+      border-radius: 8px 8px 0 0;
+
+      &:hover {
+        animation: rainbow-shift 2s ease infinite;
+      }
+
+      &--active {
+        @include gradients.rainbow-gradient();
+        background-size: 300% 300%;
+        animation: rainbow-shift 3s ease infinite;
+      }
+    }
+
+    #{$root}__body {
+      @include gradients.spore-gradient();
+      border-top: none;
+      border-radius: 0 0 8px 8px;
+    }
+  }
+
+  // Floating variant
+  &--floating {
+    @include trippy.float-animation();
+    animation-duration: 5s;
+
+    #{$root}__header {
+      @include trippy.float-animation();
+      animation-duration: 3s;
+    }
+  }
+
+  // Glowing variant
+  &--glow {
+    @include trippy.trippy-glow(colors.$purple-4, 20px);
+    animation: accordion-glow-pulse 2s infinite;
+
+    #{$root}__header {
+      @include trippy.trippy-glow(colors.$red-4, 15px);
+
+      &--active {
+        @include trippy.trippy-glow(colors.$yellow-4, 25px);
+      }
+    }
+  }
+}

package/src/themes/mashroom/06-components/_components.avatar-group.scss

@@ -0,0 +1,276 @@
+/*!
+ * Mashroom Theme Avatar Group Component
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+// Import required tools and settings
+@use '../02-tools/tools.trippy-effects' as trippy;
+@use '../02-tools/tools.psychedelic-gradients' as gradients;
+@use '../01-settings/settings.colors' as *;
+
+// Psychedelic avatar group animations
+@keyframes avatar-group-float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes avatar-group-glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 6px rgba(157, 0, 255, 0.4);
+  }
+  50% {
+    box-shadow:
+      0 0 12px rgba(157, 0, 255, 0.7),
+      0 0 24px rgba(255, 32, 133, 0.5);
+  }
+}
+
+@keyframes avatar-group-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.c-avatar-group {
+  $root: &;
+
+  // Individual avatars in group
+  .c-avatar {
+    border: 2px solid rgba(157, 0, 255, 0.3);
+    transition: all 0.3s ease;
+    @include trippy.color-shift();
+
+    // Add floating animation
+    @include trippy.float-animation();
+    animation-duration: 4s;
+
+    &:hover {
+      transform: translateY(-2px) scale(1.1);
+      z-index: 2;
+      @include trippy.trippy-glow($yellow-4, 8px);
+      @include trippy.psychedelic-pulse($yellow-4);
+      @include gradients.psychedelic-linear-gradient($purple-4, $yellow-4);
+    }
+  }
+
+  // Overlap styling
+  &--overlap {
+    .c-avatar {
+      margin-right: -1rem;
+
+      &:hover {
+        margin-right: 0;
+      }
+    }
+  }
+
+  // Spaced variant
+  &--spaced {
+    .c-avatar {
+      margin-right: 0.5rem;
+      @include trippy.float-animation();
+      animation-duration: 3s;
+    }
+  }
+
+  // Remaining count
+  &__remaining {
+    background: linear-gradient(45deg, $purple-4, $red-4);
+    border: 2px solid rgba(157, 0, 255, 0.3);
+
+    // Trippy glow effect
+    @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 6px);
+    @include trippy.color-shift();
+    @include gradients.rainbow-gradient();
+
+    // Add floating animation
+    @include trippy.float-animation();
+    animation-duration: 3s;
+
+    // Add pulse animation
+    animation: avatar-group-pulse 2s ease-in-out infinite;
+
+    &:hover {
+      transform: translateY(-2px) scale(1.1);
+      @include trippy.trippy-glow($yellow-4, 10px);
+      @include trippy.psychedelic-pulse($yellow-4);
+    }
+  }
+
+  // Floating animation
+  &--animated {
+    .c-avatar {
+      animation: avatarFloat 3s ease-in-out infinite;
+      @include trippy.color-shift();
+
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+      &:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.6s;
+      }
+    }
+
+    #{$root}__remaining {
+      animation: avatarFloat 3s ease-in-out infinite 0.8s;
+      @include trippy.color-shift();
+    }
+
+    @keyframes avatarFloat {
+      0%,
+      100% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      25% {
+        transform: translateY(-5px) rotate(2deg);
+      }
+      50% {
+        transform: translateY(-3px) rotate(0deg);
+      }
+      75% {
+        transform: translateY(-7px) rotate(-2deg);
+      }
+    }
+  }
+
+  // Hover reveal effect
+  &--hover-reveal {
+    .c-avatar {
+      opacity: 0.7;
+      transition: all 0.3s ease;
+      @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 4px);
+
+      // Add floating animation
+      @include trippy.float-animation();
+      animation-duration: 5s;
+
+      &:hover {
+        opacity: 1;
+        transform: scale(1.2) rotate(5deg);
+        z-index: 3;
+        @include gradients.psychedelic-radial-gradient($yellow-4, $red-4, $purple-4);
+        @include trippy.psychedelic-pulse($yellow-4);
+        box-shadow: 0 0 20px rgba(255, 187, 0, 0.7);
+      }
+    }
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    .c-avatar {
+      border-color: rgba(255, 187, 0, 0.4);
+      background: linear-gradient(45deg, $purple-4, $red-4, $green-4);
+      animation: psychedelicAvatar 3s ease-in-out infinite;
+      @include trippy.trippy-glow(rgba(157, 0, 255, 0.5), 6px);
+      box-shadow: 0 0 15px rgba(157, 0, 255, 0.5);
+
+      &:hover {
+        @include gradients.rainbow-gradient();
+        background-size: 400% 400%;
+        animation:
+          rainbow-shift 4s ease infinite,
+          avatarPulse 2s ease-in-out infinite;
+      }
+    }
+
+    #{$root}__remaining {
+      background: linear-gradient(45deg, $yellow-4, $purple-4, $red-4);
+      border-color: rgba(255, 187, 0, 0.4);
+      animation: psychedelicAvatar 3s ease-in-out infinite 0.5s;
+      @include trippy.trippy-glow(rgba(255, 187, 0, 0.5), 8px);
+      box-shadow: 0 0 20px rgba(255, 187, 0, 0.5);
+
+      &:hover {
+        @include gradients.rainbow-gradient();
+        background-size: 400% 400%;
+        animation:
+          rainbow-shift 4s ease infinite,
+          avatarPulse 2s ease-in-out infinite;
+      }
+    }
+
+    @keyframes psychedelicAvatar {
+      0%,
+      100% {
+        background-position: 0% 50%;
+        border-color: rgba(255, 187, 0, 0.4);
+        transform: rotate(0deg);
+      }
+      25% {
+        background-position: 50% 100%;
+        border-color: rgba(0, 255, 136, 0.4);
+        transform: rotate(2deg);
+      }
+      50% {
+        background-position: 100% 50%;
+        border-color: rgba(255, 32, 133, 0.4);
+        transform: rotate(0deg);
+      }
+      75% {
+        background-position: 50% 0%;
+        border-color: rgba(0, 255, 255, 0.4);
+        transform: rotate(-2deg);
+      }
+    }
+
+    @keyframes avatarPulse {
+      0%,
+      100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  // Glowing variant
+  &--glow {
+    .c-avatar {
+      @include trippy.trippy-glow($purple-4, 10px);
+      animation: avatar-group-glow-pulse 2s infinite;
+      border-color: rgba(157, 0, 255, 0.5);
+
+      &:hover {
+        @include trippy.trippy-glow($yellow-4, 15px);
+        animation: avatar-group-glow-pulse 0.5s infinite;
+      }
+    }
+
+    #{$root}__remaining {
+      @include trippy.trippy-glow($red-4, 12px);
+      animation: avatar-group-glow-pulse 2s infinite;
+
+      &:hover {
+        @include trippy.trippy-glow($yellow-4, 18px);
+        animation: avatar-group-glow-pulse 0.5s infinite;
+      }
+    }
+  }
+
+  // Floating variant
+  &--floating {
+    .c-avatar {
+      @include trippy.float-animation();
+      animation-duration: 3s;
+    }
+
+    #{$root}__remaining {
+      @include trippy.float-animation();
+      animation-duration: 4s;
+    }
+  }
+}

package/src/themes/mashroom/06-components/_components.avatar.scss

@@ -0,0 +1,114 @@
+/*!
+ * Mashroom Theme Avatar Component
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+// Import required tools and settings
+@use '../02-tools/tools.trippy-effects' as trippy;
+@use '../02-tools/tools.psychedelic-gradients' as gradients;
+@use '../01-settings/settings.colors' as *;
+
+// Psychedelic avatar animations
+@keyframes avatar-pulse {
+  0%,
+  100% {
+    box-shadow:
+      0 0 5px rgba(157, 0, 255, 0.5),
+      0 0 10px rgba(157, 0, 255, 0.3);
+  }
+  50% {
+    box-shadow:
+      0 0 15px rgba(157, 0, 255, 0.8),
+      0 0 25px rgba(255, 32, 133, 0.6),
+      0 0 35px rgba(255, 187, 0, 0.4);
+  }
+}
+
+@keyframes avatar-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.c-avatar {
+  // Add psychedelic glow effect
+  @include trippy.trippy-glow($primary-6, 8px);
+
+  // Add floating animation for a magical effect
+  @include trippy.float-animation();
+
+  // Add color shift for extra psychedelic effect
+  @include trippy.color-shift();
+
+  // Add subtle breathing effect
+  @include trippy.psychedelic-breathing();
+
+  // Add pulse animation
+  animation: avatar-pulse 2s infinite;
+
+  // Apply rainbow gradient border
+  border: 2px solid transparent;
+  background:
+    linear-gradient(white, white) padding-box,
+    linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff) border-box;
+  background-size: 300% 300%;
+
+  // Hover state with enhanced psychedelic effects
+  &:hover {
+    @include trippy.trippy-glow($red-4, 15px);
+    transform: scale(1.1) rotate(5deg);
+    transition: all 0.3s ease;
+    background:
+      linear-gradient(white, white) padding-box,
+      linear-gradient(90deg, #ff2085, #ffbb00, #00ff9d, #d080ff, #9d00ff, #ff2085) border-box;
+    animation:
+      avatar-pulse 0.5s infinite,
+      avatar-rotate 2s linear infinite;
+  }
+
+  // Grouped avatars
+  .c-avatar-group & {
+    border-color: rgba($black, 0.2);
+    box-shadow: 0 0 5px rgba($primary-6, 0.5);
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    @include gradients.rainbow-gradient();
+    background-size: 400% 400%;
+    border: 2px solid transparent;
+    animation:
+      rainbow-shift 3s ease infinite,
+      avatar-rotate 10s linear infinite;
+
+    &:hover {
+      animation:
+        rainbow-shift 1s ease infinite,
+        avatar-rotate 2s linear infinite;
+      @include trippy.trippy-glow(white, 20px);
+    }
+  }
+
+  // Glowing variant
+  &--glow {
+    @include trippy.trippy-glow($purple-4, 20px);
+    animation: avatar-pulse 1s infinite;
+
+    &:hover {
+      @include trippy.trippy-glow($yellow-4, 30px);
+      animation: avatar-pulse 0.3s infinite;
+    }
+  }
+
+  // Circular variant with rotation
+  &--circular {
+    border-radius: 50%;
+
+    &:hover {
+      animation: avatar-rotate 1s linear infinite;
+    }
+  }
+}

package/src/themes/mashroom/06-components/_components.badge.scss

@@ -0,0 +1,152 @@
+@use '../02-tools/tools.trippy-effects' as trippy;
+@use '../02-tools/tools.psychedelic-gradients' as gradients;
+@use '../01-settings/settings.colors' as colors;
+@use '../01-settings/settings.config' as config;
+
+// Psychedelic badge animations
+@keyframes psychedelic-badge-shift {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  25% {
+    filter: hue-rotate(90deg);
+  }
+  50% {
+    filter: hue-rotate(180deg);
+  }
+  75% {
+    filter: hue-rotate(270deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+@keyframes badge-glow-pulse {
+  0%,
+  100% {
+    box-shadow:
+      0 0 5px var(--atomix-tag-color),
+      0 0 10px rgba(157, 0, 255, 0.5);
+  }
+  50% {
+    box-shadow:
+      0 0 15px var(--atomix-tag-color),
+      0 0 30px rgba(157, 0, 255, 0.8),
+      0 0 50px rgba(255, 32, 133, 0.6);
+  }
+}
+
+@keyframes badge-float {
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-3px) rotate(1deg);
+  }
+  50% {
+    transform: translateY(2px) rotate(-1deg);
+  }
+  75% {
+    transform: translateY(-1px) rotate(0.5deg);
+  }
+}
+
+.c-badge {
+  @include gradients.psychedelic-linear-gradient(
+    var(--atomix-tag-bg-color),
+    var(--atomix-tag-color)
+  );
+  @include trippy.trippy-glow(var(--atomix-tag-color), 20px);
+  @include trippy.float-animation();
+
+  // Add psychedelic animations
+  animation:
+    psychedelic-badge-shift 4s infinite linear,
+    badge-glow-pulse 2s infinite,
+    badge-float 3s ease-in-out infinite;
+
+  border: 1px solid var(--atomix-tag-color);
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px;
+
+  &:hover {
+    @include trippy.trippy-glow(colors.$primary-6, 20px);
+    transform: scale(1.1) rotate(5deg);
+
+    // Enhance animations on hover
+    animation:
+      psychedelic-badge-shift 1s infinite linear,
+      badge-glow-pulse 0.5s infinite,
+      badge-float 1s ease-in-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -60%;
+    width: 20%;
+    height: 200%;
+    background: rgba(255, 255, 255, 0.3);
+    transform: rotate(25deg);
+    animation: shine 3s infinite linear;
+  }
+
+  @keyframes shine {
+    0% {
+      left: -60%;
+    }
+    20% {
+      left: 20%;
+    }
+    40% {
+      left: 40%;
+    }
+    60% {
+      left: 60%;
+    }
+    80% {
+      left: 80%;
+    }
+    100% {
+      left: 120%;
+    }
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    @include gradients.rainbow-gradient();
+    background-size: 300% 300%;
+    animation: rainbow-shift 3s ease infinite;
+    border: none;
+
+    &:hover {
+      animation: rainbow-shift 1s linear infinite;
+      transform: scale(1.2) rotate(10deg);
+      @include trippy.trippy-glow(white, 30px);
+    }
+  }
+
+  // Glowing variant
+  &--glow {
+    @include trippy.trippy-glow(var(--atomix-tag-bg-color), 30px);
+    animation: badge-glow-pulse 1s infinite;
+
+    &:hover {
+      @include trippy.trippy-glow(var(--atomix-tag-bg-color), 50px);
+      animation: badge-glow-pulse 0.3s infinite;
+    }
+  }
+
+  // Floating variant
+  &--floating {
+    animation: badge-float 2s ease-in-out infinite;
+
+    &:hover {
+      animation: badge-float 0.5s ease-in-out infinite;
+    }
+  }
+}