@shohojdhara/atomix 0.3.3 → 0.3.4

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

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

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

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