@shohojdhara/atomix 0.3.3 → 0.3.5

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

@@ -1,187 +0,0 @@
-@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

@@ -1,276 +0,0 @@
-/*!
- * 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

@@ -1,114 +0,0 @@
-/*!
- * 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

@@ -1,152 +0,0 @@
-@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;
-    }
-  }
-}