@shohojdhara/atomix 0.3.1 → 0.3.3

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

@@ -0,0 +1,140 @@
+@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 callout animations
+@keyframes callout-float {
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  33% {
+    transform: translateY(-10px) rotate(1deg);
+  }
+  66% {
+    transform: translateY(5px) rotate(-1deg);
+  }
+}
+
+@keyframes callout-glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 15px var(--atomix-callout-border-color);
+  }
+  50% {
+    box-shadow:
+      0 0 25px var(--atomix-callout-border-color),
+      0 0 35px rgba(157, 0, 255, 0.8),
+      0 0 45px rgba(255, 32, 133, 0.6);
+  }
+}
+
+@keyframes callout-shimmer {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
+.c-callout {
+  $root: &;
+  // Apply psychedelic background
+  @include gradients.forest-floor-gradient();
+
+  // // Add trippy glow effect
+  @include trippy.trippy-glow(var(--atomix-callout-border-color), 15px);
+
+  // // // Add color shift for extra psychedelic effect
+  @include trippy.color-shift();
+
+  // // // Add breathing effect
+  @include trippy.psychedelic-breathing();
+
+  animation:
+    color-shift 10s infinite,
+    breathe 4s ease-in-out infinite,
+    callout-float 6s ease-in-out infinite,
+    callout-glow-pulse 3s infinite;
+
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+
+  // Add a subtle pattern
+  background-image:
+    radial-gradient(circle at 10% 20%, rgba(157, 0, 255, 0.1) 1px, transparent 1px),
+    radial-gradient(circle at 20% 80%, rgba(0, 255, 157, 0.1) 1px, transparent 1px),
+    radial-gradient(circle at 80% 30%, rgba(255, 32, 133, 0.1) 1px, transparent 1px),
+    radial-gradient(circle at 60% 70%, rgba(255, 187, 0, 0.1) 1px, transparent 1px) !important;
+  background-size: 70px 70px;
+
+  // Add twinkling stars effect
+  @include trippy.twinkling-stars();
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    animation: callout-shimmer 3s infinite;
+    background-size: 200% 100%;
+  }
+
+  &__header {
+    // Add a psychedelic underline
+    &::after {
+      content: '';
+      flex: 1;
+      margin-left: 1rem;
+      height: 2px;
+      @include gradients.psychedelic-linear-gradient(var(--atomix-primary), var(--atomix-sucscess));
+      animation: callout-shimmer 2s infinite;
+      background-size: 200% 100%;
+    }
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    @include gradients.rainbow-gradient();
+    background-size: 400% 400%;
+    animation:
+      rainbow-shift 4s ease infinite,
+      callout-float 5s ease-in-out infinite;
+    border: 2px solid transparent;
+
+    &::after {
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      animation: callout-shimmer 2s infinite;
+      background-size: 200% 100%;
+    }
+
+    #{$root}__header::after {
+      @include gradients.rainbow-gradient();
+      background-size: 200% 100%;
+      animation: rainbow-shift 3s linear infinite;
+    }
+  }
+
+  // Glowing variant
+  &--glow {
+    @include trippy.trippy-glow(var(--atomix-callout-border-color), 25px);
+    animation: callout-glow-pulse 1.5s infinite;
+
+    &::after {
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+      animation: callout-shimmer 1.5s infinite;
+    }
+  }
+
+  // Floating variant
+  &--floating {
+    animation: callout-float 4s ease-in-out infinite;
+  }
+}

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

@@ -0,0 +1,225 @@
+@use '../02-tools/tools.trippy-effects' as trippy;
+@use '../02-tools/tools.psychedelic-gradients' as gradients;
+@use '../01-settings/settings.colors' as *;
+@use '../01-settings/settings.config' as config;
+
+// Psychedelic card animations
+@keyframes card-float {
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  33% {
+    transform: translateY(-20px) rotate(2deg);
+  }
+  66% {
+    transform: translateY(10px) rotate(-1deg);
+  }
+}
+
+@keyframes card-glow-pulse {
+  0% {
+    box-shadow:
+      0 0 20px rgba(157, 0, 255, 0.5),
+      0 0 30px rgba(157, 0, 255, 0.3);
+  }
+  50% {
+    box-shadow:
+      0 0 40px rgba(157, 0, 255, 0.8),
+      0 0 60px rgba(255, 32, 133, 0.6),
+      0 0 80px rgba(255, 187, 0, 0.4);
+  }
+  100% {
+    box-shadow:
+      0 0 20px rgba(157, 0, 255, 0.5),
+      0 0 30px rgba(157, 0, 255, 0.3);
+  }
+}
+
+@keyframes card-border-shift {
+  0% {
+    border-color: rgba(157, 0, 255, 0.5);
+  }
+  25% {
+    border-color: rgba(255, 32, 133, 0.6);
+  }
+  50% {
+    border-color: rgba(255, 187, 0, 0.7);
+  }
+  75% {
+    border-color: rgba(0, 255, 157, 0.6);
+  }
+  100% {
+    border-color: rgba(157, 0, 255, 0.5);
+  }
+}
+
+.c-card {
+  $root: &;
+
+  // Apply psychedelic background with rainbow gradient
+  @include gradients.rainbow-gradient();
+  background-size: 400% 400%;
+
+  // Add floating animation for a magical effect
+  @include trippy.float-animation();
+  animation-duration: 8s;
+
+  // Add color shift for extra psychedelic effect
+  @include trippy.color-shift();
+
+  // Add trippy glow effect
+  @include trippy.trippy-glow($primary-6, 20px);
+
+  // Add psychedelic pulse animation
+  @include trippy.psychedelic-pulse($primary-4);
+
+  // Add card-specific animations
+  animation:
+    rainbow-shift 8s ease infinite,
+    card-float 6s ease-in-out infinite,
+    card-glow-pulse 3s infinite;
+
+  // Add psychedelic border
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border: double 2px transparent;
+  border-radius: 25px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    margin: -2px;
+    border-radius: inherit;
+    @include gradients.psychedelic-linear-gradient($purple-4, $red-4);
+    animation: card-border-shift 4s infinite linear;
+  }
+
+  // Add a subtle overlay for better content readability
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 23px;
+    z-index: -1;
+  }
+
+  &:hover {
+    @include gradients.psychedelic-linear-gradient(var(--atomix-primary-6), var(--atomix-info));
+
+    // Enhance effects on hover
+    @include trippy.trippy-glow(var(--atomix-primary-4), 30px);
+
+    transform: scale(1.02) rotate(1deg);
+    transition: all 0.3s ease;
+
+    // Speed up animations on hover
+    animation:
+      rainbow-shift 2s ease infinite,
+      card-float 3s ease-in-out infinite,
+      card-glow-pulse 1s infinite;
+
+    &::before {
+      @include gradients.rainbow-gradient();
+      background-size: 200% 200%;
+      animation: rainbow-shift 2s linear infinite;
+    }
+  }
+
+  &__header {
+    background: rgba($black, 0.2);
+    padding: 1rem;
+    border-bottom: 1px solid rgba($primary-4, 0.5);
+    backdrop-filter: blur(5px);
+    border-radius: 23px 23px 0 0;
+
+    // Add psychedelic effects to header
+    @include gradients.psychedelic-linear-gradient(rgba(157, 0, 255, 0.2), rgba(157, 0, 255, 0.1));
+    @include trippy.color-shift();
+    animation-duration: 10s;
+  }
+
+  &__body {
+    background: rgba($white, 0.1);
+    padding: 1rem;
+    backdrop-filter: blur(2px);
+
+    // Add subtle psychedelic effects to body
+    @include gradients.psychedelic-linear-gradient(
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0.05)
+    );
+    background-blend-mode: overlay;
+  }
+
+  &__footer {
+    background: rgba($black, 0.2);
+    padding: 1rem;
+    border-top: 1px solid rgba($primary-4, 0.5);
+    backdrop-filter: blur(5px);
+    border-radius: 0 0 23px 23px;
+
+    // Add psychedelic effects to footer
+    @include gradients.psychedelic-linear-gradient(rgba(157, 0, 255, 0.1), rgba(157, 0, 255, 0.05));
+    @include trippy.color-shift();
+    animation-duration: 12s;
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    @include gradients.rainbow-gradient();
+    background-size: 600% 600%;
+    animation: rainbow-shift 4s ease infinite;
+
+    &::before {
+      @include gradients.rainbow-gradient();
+      background-size: 600% 600%;
+      animation: rainbow-shift 4s linear infinite reverse;
+    }
+
+    &:hover {
+      animation: rainbow-shift 1s ease infinite;
+
+      &::before {
+        animation: rainbow-shift 1s linear infinite;
+      }
+    }
+  }
+
+  // Glass variant
+  &--glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+
+    &::after {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    #{$root}__header,
+    #{$root}__footer {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    #{$root}__body {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  // Floating variant
+  &--floating {
+    animation: card-float 4s ease-in-out infinite;
+
+    &:hover {
+      animation: card-float 2s ease-in-out infinite;
+    }
+  }
+}

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

@@ -0,0 +1,186 @@
+/*!
+ * Mashroom Theme Checkbox 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 checkbox animations
+@keyframes checkbox-float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes checkbox-glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 5px $primary-6;
+  }
+  50% {
+    box-shadow:
+      0 0 10px $primary-6,
+      0 0 20px rgba(157, 0, 255, 0.8),
+      0 0 30px rgba(255, 32, 133, 0.6);
+  }
+}
+
+@keyframes checkbox-check-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
+  }
+  50% {
+    box-shadow:
+      0 0 6px rgba(255, 255, 255, 0.9),
+      0 0 12px rgba(255, 187, 0, 0.8);
+  }
+}
+
+.c-checkbox {
+  $root: &;
+  // Hide the default checkbox
+  &__input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  // Create a custom checkbox
+  &__checkmark {
+    position: relative;
+    height: 20px;
+    width: 20px;
+    background-color: #eee;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+
+    // Add psychedelic glow effect
+    @include trippy.trippy-glow($primary-6, 5px);
+
+    // Add color shift for extra psychedelic effect
+    @include trippy.color-shift();
+
+    // Add floating animation
+    @include trippy.float-animation();
+    animation-duration: 3s;
+
+    // Add pulse animation
+    animation: checkbox-glow-pulse 2s infinite;
+  }
+
+  // On mouse-over, add a psychedelic glow
+  &:hover &__checkmark {
+    @include trippy.trippy-glow($red-4, 10px);
+    transform: scale(1.1) rotate(5deg);
+    animation: checkbox-glow-pulse 0.5s infinite;
+  }
+
+  // When the checkbox is checked
+  &__input:checked + &__checkmark {
+    background-color: $primary-6;
+
+    // Add enhanced psychedelic pulse
+    @include trippy.psychedelic-pulse($primary-4);
+
+    // Add psychedelic gradient
+    @include gradients.psychedelic-linear-gradient($primary-6, $red-4);
+
+    // Add floating effect when checked
+    animation: checkbox-float 2s ease-in-out infinite;
+  }
+
+  // Create the checkmark/indicator (hidden when not checked)
+  &__checkmark:after {
+    content: '';
+    position: absolute;
+    display: none;
+  }
+
+  // Show the checkmark when checked
+  &__input:checked + &__checkmark:after {
+    display: block;
+  }
+
+  // Style the checkmark/indicator
+  &__checkmark:after {
+    left: 7px;
+    top: 3px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    transform: rotate(45deg);
+
+    // Add a subtle glow to the checkmark
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
+    animation: checkbox-check-pulse 2s infinite;
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    #{$root}__checkmark {
+      @include gradients.rainbow-gradient();
+      background-size: 300% 300%;
+      animation:
+        rainbow-shift 3s ease infinite,
+        checkbox-glow-pulse 1s infinite;
+      border: 1px solid transparent;
+
+      &:hover {
+        animation:
+          rainbow-shift 1s ease infinite,
+          checkbox-glow-pulse 0.3s infinite;
+      }
+    }
+
+    #{$root}__input:checked + #{$root}__checkmark {
+      @include gradients.rainbow-gradient();
+      background-size: 300% 300%;
+      animation: rainbow-shift 2s ease infinite;
+
+      &::after {
+        animation: checkbox-check-pulse 1s infinite;
+      }
+    }
+  }
+
+  // Glowing variant
+  &--glow {
+    #{$root}__checkmark {
+      @include trippy.trippy-glow($purple-4, 15px);
+      animation: checkbox-glow-pulse 1s infinite;
+
+      &:hover {
+        @include trippy.trippy-glow($red-4, 20px);
+        animation: checkbox-glow-pulse 0.3s infinite;
+      }
+    }
+
+    #{$root}__input:checked + #{$root}__checkmark {
+      @include trippy.trippy-glow($yellow-4, 25px);
+      animation: checkbox-glow-pulse 0.5s infinite;
+    }
+  }
+
+  // Floating variant
+  &--floating {
+    #{$root}__checkmark {
+      @include trippy.float-animation();
+      animation-duration: 4s;
+    }
+
+    #{$root}__input:checked + #{$root}__checkmark {
+      animation: checkbox-float 1s ease-in-out infinite;
+    }
+  }
+}