@shohojdhara/atomix 0.3.1 → 0.3.3

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

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

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

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