@shohojdhara/atomix 0.3.3 → 0.3.5

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

@@ -1,162 +0,0 @@
-/*!
- * Mashroom Theme Breadcrumb 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 breadcrumb animations
-@keyframes breadcrumb-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-@keyframes breadcrumb-glow-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 5px rgba(157, 0, 255, 0.5);
-  }
-  50% {
-    box-shadow:
-      0 0 15px rgba(157, 0, 255, 0.8),
-      0 0 25px rgba(255, 32, 133, 0.6);
-  }
-}
-
-@keyframes breadcrumb-item-pulse {
-  0%,
-  100% {
-    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-  }
-  50% {
-    text-shadow:
-      0 0 10px rgba(255, 255, 255, 0.8),
-      0 0 20px rgba(157, 0, 255, 0.6);
-  }
-}
-
-.c-breadcrumb {
-  $root: &;
-
-  // Apply psychedelic gradient background
-  @include gradients.rainbow-gradient();
-  background-size: 300% 300%;
-
-  // Add floating animation for a magical effect
-  @include trippy.float-animation();
-
-  // Add color shift for extra psychedelic effect
-  @include trippy.color-shift();
-
-  // Add pulse animation
-  animation:
-    rainbow-shift 4s ease infinite,
-    breadcrumb-glow-pulse 2s infinite;
-
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-
-  // Breadcrumb item
-  &__item {
-    display: inline-block;
-    color: white;
-    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-
-    // Add glow effect to breadcrumb items
-    @include trippy.trippy-glow(rgba(255, 255, 255, 0.3), 5px);
-
-    // Add pulse animation
-    animation: breadcrumb-item-pulse 3s infinite;
-
-    // Hover state
-    &:hover {
-      @include trippy.trippy-glow($red-4, 10px);
-      transform: scale(1.05) rotate(2deg);
-      transition: all 0.3s ease;
-      animation: breadcrumb-item-pulse 1s infinite;
-    }
-  }
-
-  // Separator between breadcrumb items
-  &__separator {
-    margin: 0 0.5rem;
-    color: rgba(255, 255, 255, 0.7);
-
-    // Add subtle pulse effect to separators
-    @include trippy.psychedelic-pulse(rgba(255, 255, 255, 0.5));
-
-    // Add floating effect
-    @include trippy.float-animation();
-    animation-duration: 3s;
-  }
-
-  // Active breadcrumb item
-  &__item--active {
-    color: $yellow-4;
-    font-weight: bold;
-
-    // Add stronger glow effect to active item
-    @include trippy.trippy-glow($yellow-4, 15px);
-
-    // Add pulse animation
-    animation: breadcrumb-item-pulse 1s infinite;
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    @include gradients.rainbow-gradient();
-    background-size: 400% 400%;
-    animation: rainbow-shift 2s ease infinite;
-    border: 1px solid transparent;
-
-    #{$root}__item {
-      @include gradients.rainbow-gradient();
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-      background-size: 200% 200%;
-      animation: rainbow-shift 3s linear infinite;
-
-      &:hover {
-        animation: rainbow-shift 1s linear infinite;
-        @include trippy.trippy-glow(white, 20px);
-      }
-    }
-
-    #{$root}__item--active {
-      @include gradients.rainbow-gradient();
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-      background-size: 200% 200%;
-      animation: rainbow-shift 2s linear infinite;
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    @include trippy.trippy-glow($purple-4, 20px);
-    animation: breadcrumb-glow-pulse 1s infinite;
-
-    #{$root}__item {
-      @include trippy.trippy-glow(rgba(255, 255, 255, 0.2), 10px);
-
-      &:hover {
-        @include trippy.trippy-glow($red-4, 15px);
-      }
-    }
-
-    #{$root}__item--active {
-      @include trippy.trippy-glow($yellow-4, 25px);
-    }
-  }
-}

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

@@ -1,404 +0,0 @@
-/*!
- * Mashroom Theme Button Group Component
- * Psychedelic mushroom-inspired button grouping with trippy effects
- */
-
-// 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 button group animations
-@keyframes btn-group-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-@keyframes btn-group-glow-pulse {
-  0%,
-  100% {
-    box-shadow: 0 4px 20px rgba(157, 0, 255, 0.3);
-  }
-  50% {
-    box-shadow:
-      0 4px 20px rgba(157, 0, 255, 0.5),
-      0 0 30px rgba(255, 32, 133, 0.4),
-      0 0 50px rgba(255, 187, 0, 0.3);
-  }
-}
-
-@keyframes btn-group-background-float {
-  0%,
-  100% {
-    opacity: 0.3;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.6;
-    transform: scale(1.05);
-  }
-}
-
-@keyframes btn-group-button-pulse {
-  0%,
-  100% {
-    transform: translateY(-2px) scale(1);
-  }
-  50% {
-    transform: translateY(-2px) scale(1.05);
-  }
-}
-
-.c-btn-group {
-  $root: &;
-
-  box-shadow: 0 4px 20px rgba(157, 0, 255, 0.3);
-
-  // Add floating animation
-  @include trippy.float-animation();
-  animation-duration: 5s;
-
-  // Mushroom cap curve effect
-  border-radius: 12px 12px 6px 6px;
-
-  // Animated background particles
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-      radial-gradient(circle at 20% 20%, rgba(255, 187, 0, 0.1) 0%, transparent 50%),
-      radial-gradient(circle at 80% 80%, rgba(157, 0, 255, 0.1) 0%, transparent 50%);
-    animation: btn-group-background-float 8s ease-in-out infinite;
-    pointer-events: none;
-    z-index: 0;
-  }
-
-  @keyframes btn-group-background-float {
-    0%,
-    100% {
-      opacity: 0.3;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.6;
-      transform: scale(1.05);
-    }
-  }
-
-  // Individual buttons in group
-  .c-btn {
-    position: relative;
-    border: none;
-    border-radius: 0;
-    margin: 0;
-    flex: 1;
-    transition: all 0.3s ease;
-    z-index: 1;
-
-    // Remove default button styling
-    background: transparent;
-    color: $white;
-    font-weight: 600;
-    padding: 0.75rem 1.5rem;
-
-    // Add floating animation to buttons
-    @include trippy.float-animation();
-    animation-duration: 4s;
-
-    // Mushroom stem border
-    &:not(:last-child) {
-      border-right: 1px solid rgba(157, 0, 255, 0.3);
-    }
-
-    // Hover effects
-    &:hover {
-      background: rgba(157, 0, 255, 0.2);
-      transform: translateY(-2px);
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.4), 8px);
-    }
-
-    // Active state
-    &:active,
-    &.is-active {
-      background: linear-gradient(45deg, $purple-4, $red-4);
-      color: $white;
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.6), 12px);
-      animation: btn-group-button-pulse 2s ease-in-out infinite;
-    }
-
-    @keyframes btn-group-button-pulse {
-      0%,
-      100% {
-        transform: translateY(-2px) scale(1);
-      }
-      50% {
-        transform: translateY(-2px) scale(1.05);
-      }
-    }
-
-    // Focus state
-    &:focus {
-      outline: none;
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.5), 10px);
-      z-index: 2;
-    }
-
-    // Disabled state
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      transform: none;
-      @include trippy.trippy-glow(none, 0);
-    }
-  }
-
-  // Size variants
-  &--sm {
-    .c-btn {
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-    }
-  }
-
-  &--lg {
-    .c-btn {
-      padding: 1rem 2rem;
-      font-size: 1.125rem;
-    }
-  }
-
-  // Vertical orientation
-  &--vertical {
-    flex-direction: column;
-    border-radius: 12px 6px 6px 12px;
-
-    .c-btn {
-      &:not(:last-child) {
-        border-right: none;
-        border-bottom: 1px solid rgba(157, 0, 255, 0.3);
-      }
-
-      &:hover {
-        transform: translateX(2px);
-      }
-
-      &:active,
-      &.is-active {
-        transform: translateX(2px);
-        @keyframes btn-group-button-pulse {
-          0%,
-          100% {
-            transform: translateX(2px) scale(1);
-          }
-          50% {
-            transform: translateX(2px) scale(1.05);
-          }
-        }
-      }
-    }
-  }
-
-  // Rounded variant
-  &--rounded {
-    border-radius: 50px;
-
-    .c-btn {
-      &:first-child {
-        border-top-left-radius: 50px;
-        border-bottom-left-radius: 50px;
-      }
-
-      &:last-child {
-        border-top-right-radius: 50px;
-        border-bottom-right-radius: 50px;
-      }
-    }
-
-    &--vertical {
-      border-radius: 50px;
-
-      .c-btn {
-        &:first-child {
-          border-top-left-radius: 50px;
-          border-top-right-radius: 50px;
-          border-bottom-left-radius: 0;
-        }
-
-        &:last-child {
-          border-bottom-left-radius: 50px;
-          border-bottom-right-radius: 50px;
-          border-top-right-radius: 0;
-        }
-      }
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    background: linear-gradient(135deg, $purple-4, $yellow-4, $red-4, $green-4);
-    background-size: 400% 400%;
-    animation: psychedelicShift 8s ease infinite;
-
-    .c-btn {
-      &:hover {
-        background: rgba(0, 0, 0, 0.2);
-      }
-
-      &:active,
-      &.is-active {
-        background: rgba(255, 255, 255, 0.2);
-        color: $black;
-      }
-    }
-  }
-
-  @keyframes psychedelicShift {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  // Glow variant
-  &--glow {
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 15px);
-    animation: btn-group-glow-pulse 2s infinite;
-
-    &:hover {
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.6), 20px);
-      animation: btn-group-glow-pulse 1s infinite;
-    }
-  }
-
-  // Dark variant
-  &--dark {
-    background: rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(157, 0, 255, 0.5);
-
-    .c-btn {
-      &:hover {
-        background: rgba(157, 0, 255, 0.3);
-      }
-
-      &:active,
-      &.is-active {
-        background: linear-gradient(45deg, $purple-5, $red-5);
-      }
-    }
-  }
-
-  // Light variant
-  &--light {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(157, 0, 255, 0.3);
-
-    .c-btn {
-      color: $black;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.1);
-      }
-
-      &:active,
-      &.is-active {
-        background: linear-gradient(45deg, $purple-3, $red-3);
-        color: $white;
-      }
-    }
-  }
-
-  // Floating spore particles
-  &__spore {
-    position: absolute;
-    width: 3px;
-    height: 3px;
-    background: radial-gradient(circle, $yellow-4, transparent);
-    border-radius: 50%;
-    animation: float 6s ease-in-out infinite;
-    pointer-events: none;
-    z-index: 2;
-
-    &:nth-child(odd) {
-      animation-delay: -2s;
-    }
-
-    &:nth-child(even) {
-      animation-delay: -4s;
-    }
-  }
-
-  @keyframes float {
-    0% {
-      transform: translateY(0) translateX(0) scale(0);
-      opacity: 0;
-    }
-    10% {
-      opacity: 1;
-    }
-    90% {
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(-50px) translateX(10px) scale(1);
-      opacity: 0;
-    }
-  }
-
-  // Responsive
-  @media (max-width: 768px) {
-    flex-direction: column;
-    border-radius: 12px 6px 6px 12px;
-
-    .c-btn {
-      &:not(:last-child) {
-        border-right: none;
-        border-bottom: 1px solid rgba(157, 0, 255, 0.3);
-      }
-    }
-
-    &--vertical {
-      .c-btn {
-        &:hover {
-          transform: translateX(0);
-        }
-
-        &:active,
-        &.is-active {
-          transform: translateX(0);
-        }
-      }
-    }
-  }
-
-  @media (max-width: 480px) {
-    .c-btn {
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-    }
-  }
-
-  // Floating variant
-  &--floating {
-    @include trippy.float-animation();
-    animation-duration: 3s;
-
-    .c-btn {
-      @include trippy.float-animation();
-      animation-duration: 2s;
-    }
-  }
-}

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

@@ -1,160 +0,0 @@
-/*!
- * Mashroom Theme Button Component
- * Psychedelic mushroom-inspired theme with trippy visuals
- */
-
-// Import required tools and settings
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.button' as btn;
-@use '../02-tools/tools.trippy-effects' as trippy;
-@use '../02-tools/tools.psychedelic-gradients' as gradients;
-
-// Psychedelic button animations
-@keyframes psychedelic-button-shift {
-  0% {
-    filter: hue-rotate(0deg) brightness(1);
-  }
-  25% {
-    filter: hue-rotate(90deg) brightness(1.2);
-  }
-  50% {
-    filter: hue-rotate(180deg) brightness(1);
-  }
-  75% {
-    filter: hue-rotate(270deg) brightness(1.1);
-  }
-  100% {
-    filter: hue-rotate(360deg) brightness(1);
-  }
-}
-
-@keyframes button-3d-pulse {
-  0%,
-  100% {
-    transform: scale(1) translateZ(0);
-    box-shadow:
-      0 4px 6px rgba(0, 0, 0, 0.1),
-      0 0 10px var(--atomix-btn-border-color);
-  }
-  50% {
-    transform: scale(1.05) translateZ(10px);
-    box-shadow:
-      0 10px 20px rgba(0, 0, 0, 0.2),
-      0 0 30px var(--atomix-btn-border-color),
-      0 0 50px rgba(255, 255, 255, 0.3);
-  }
-}
-
-// Button styles with psychedelic theme
-.c-btn {
-  // Apply trippy glow effect
-  @include trippy.trippy-glow(var(--atomix-btn-border-color), 12px);
-
-  // Add float animation for a magical effect
-  @include trippy.float-animation();
-  @include trippy.color-shift();
-
-  // Add 3D pulse effect
-  animation: button-3d-pulse 3s infinite;
-
-  // Add psychedelic shifting
-  animation:
-    psychedelic-button-shift 5s infinite linear,
-    button-3d-pulse 3s infinite ease-in-out;
-
-  // Hover state with enhanced psychedelic effects
-  &:hover {
-    @include gradients.psychedelic-linear-gradient(
-      var(--atomix-btn-color),
-      var(--atomix-btn-border-color)
-    );
-    transform: scale(1.1) rotate(3deg);
-    @include trippy.psychedelic-pulse(var(--atomix-btn-bg));
-
-    // Enhance animations on hover
-    animation:
-      psychedelic-button-shift 1s infinite linear,
-      button-3d-pulse 1s infinite ease-in-out;
-  }
-
-  // Focus state
-  &:focus {
-    outline: none;
-    @include trippy.trippy-glow($yellow-4, 20px);
-    animation:
-      psychedelic-button-shift 0.5s infinite linear,
-      button-3d-pulse 0.5s infinite ease-in-out;
-  }
-
-  // Active state
-  &:active {
-    transform: scale(0.95) rotate(-3deg);
-    @include trippy.trippy-glow($red-4, 25px);
-  }
-
-  // Disabled state
-  &:disabled {
-    animation: none;
-    opacity: 0.6;
-    cursor: not-allowed;
-    @include trippy.trippy-glow(rgba(128, 128, 128, 0.3), 2px);
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    @include gradients.rainbow-gradient();
-    background-size: 300% 300%;
-    border: none;
-    animation: rainbow-shift 4s ease infinite;
-
-    &:hover {
-      animation: rainbow-shift 1s linear infinite;
-      transform: scale(1.1) rotate(5deg);
-      @include trippy.trippy-glow(white, 30px);
-    }
-
-    &:active {
-      transform: scale(0.95) rotate(-5deg);
-    }
-  }
-
-  // 3D variant
-  &--3d {
-    border-radius: 15px;
-    position: relative;
-    transform-style: preserve-3d;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: inherit;
-      filter: blur(10px);
-      opacity: 0.7;
-      z-index: -1;
-      transform: translateZ(-20px);
-    }
-
-    &:hover {
-      transform: translateZ(20px) scale(1.05);
-    }
-
-    &:active {
-      transform: translateZ(0) scale(0.95);
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    @include trippy.trippy-glow(var(--atomix-btn-bg), 20px);
-    animation: button-3d-pulse 2s infinite ease-in-out;
-
-    &:hover {
-      @include trippy.trippy-glow(var(--atomix-btn-bg), 40px);
-      animation: button-3d-pulse 0.5s infinite ease-in-out;
-    }
-  }
-}