@shohojdhara/atomix 0.3.3 → 0.3.5

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

@@ -1,231 +0,0 @@
-/*!
- * Mashroom Theme Toggle 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 toggle animations
-@keyframes toggle-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),
-      0 0 35px rgba(255, 187, 0, 0.4);
-  }
-}
-
-@keyframes toggle-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-@keyframes psychedelic-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-toggle {
-  $root: &;
-
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-
-  // Add floating animation to the whole toggle
-  @include trippy.float-animation();
-  animation-duration: 4s;
-
-  // Hide default checkbox
-  &__input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  // Toggle slider
-  &__slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(128, 128, 128, 0.2);
-    transition: 0.4s;
-    border-radius: 34px;
-
-    // Add psychedelic glow
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 5px);
-
-    // Add color shift effect
-    @include trippy.color-shift();
-
-    // Add pulse animation
-    animation: toggle-pulse 2s infinite;
-
-    // Slider round element
-    &::before {
-      position: absolute;
-      content: '';
-      height: 26px;
-      width: 26px;
-      left: 4px;
-      bottom: 4px;
-      background-color: white;
-      transition: 0.4s;
-      border-radius: 50%;
-
-      // Add glow to the slider round element
-      @include trippy.trippy-glow(rgba(255, 255, 255, 0.5), 3px);
-
-      // Add floating effect to the slider
-      @include trippy.float-animation();
-      animation-duration: 3s;
-    }
-  }
-
-  // Checked state
-  &__input:checked + &__slider {
-    background: linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff);
-    background-size: 400% 400%;
-    animation: rainbow-shift 4s ease infinite;
-
-    &::before {
-      transform: translateX(26px);
-      background-color: $yellow-4;
-
-      // Add stronger glow when checked
-      @include trippy.trippy-glow($yellow-4, 8px);
-
-      // Add psychedelic pulse when checked
-      @include trippy.psychedelic-pulse($yellow-4);
-    }
-  }
-
-  // Hover state
-  &:hover &__input:not(:disabled) + &__slider {
-    @include trippy.trippy-glow($red-4, 10px);
-    transform: scale(1.05) rotate(2deg);
-
-    // Speed up animations on hover
-    animation: toggle-pulse 0.5s infinite;
-
-    &::before {
-      @include trippy.trippy-glow($red-4, 12px);
-    }
-  }
-
-  // Focus state
-  &__input:focus + &__slider {
-    @include trippy.trippy-glow($purple-4, 15px);
-    animation: toggle-pulse 0.3s infinite;
-  }
-
-  // Disabled state
-  &__input:disabled + &__slider {
-    opacity: 0.5;
-    cursor: not-allowed;
-    animation: none;
-
-    &::before {
-      animation: none;
-    }
-  }
-
-  // Large variant
-  &--lg {
-    width: 70px;
-    height: 40px;
-
-    #{$root}__slider::before {
-      height: 32px;
-      width: 32px;
-    }
-
-    #{$root}__input:checked + #{$root}__slider::before {
-      transform: translateX(30px);
-    }
-  }
-
-  // Small variant
-  &--sm {
-    width: 50px;
-    height: 28px;
-
-    #{$root}__slider::before {
-      height: 22px;
-      width: 22px;
-    }
-
-    #{$root}__input:checked + #{$root}__slider::before {
-      transform: translateX(22px);
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    #{$root}__slider {
-      @include gradients.rainbow-gradient();
-      background-size: 300% 300%;
-      animation: rainbow-shift 3s ease infinite;
-      border: 1px solid transparent;
-
-      &::before {
-        @include gradients.psychedelic-linear-gradient($white, $yellow-4);
-      }
-    }
-
-    #{$root}__input:checked + #{$root}__slider {
-      @include gradients.rainbow-gradient();
-      background-size: 400% 400%;
-      animation: rainbow-shift 2s ease infinite;
-
-      &::before {
-        @include gradients.rainbow-gradient();
-        background-size: 200% 200%;
-        animation: rainbow-shift 2s linear infinite;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    #{$root}__slider {
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.5), 15px);
-      animation: toggle-pulse 1s infinite;
-    }
-
-    #{$root}__input:checked + #{$root}__slider {
-      @include trippy.trippy-glow($yellow-4, 20px);
-      animation: toggle-pulse 0.5s infinite;
-    }
-  }
-}

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

@@ -1,167 +0,0 @@
-/*!
- * Mashroom Theme Tooltip 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 *;
-@use '../01-settings/settings.config' as *;
-
-.c-tooltip {
-  $root: &;
-
-  // CSS Variables with psychedelic theme
-  --#{$prefix}tooltip-max-width: 200px;
-  --#{$prefix}tooltip-padding-x: 0.75rem;
-  --#{$prefix}tooltip-padding-y: 0.5rem;
-  --#{$prefix}tooltip-bg: #{rgba(25, 15, 40, 0.95)};
-  --#{$prefix}tooltip-font-size: 0.875rem;
-  --#{$prefix}tooltip-font-weight: 500;
-  --#{$prefix}tooltip-color: #{$white};
-  --#{$prefix}tooltip-border-radius: 0.5rem;
-  --#{$prefix}tooltip-border-width: 1px;
-  --#{$prefix}tooltip-border-color: transparent;
-  --#{$prefix}tooltip-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  --#{$prefix}tooltip-arrow-size: 0.5rem;
-
-  position: absolute;
-  z-index: 1070;
-  display: block;
-  padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-  font-size: var(--#{$prefix}tooltip-font-size);
-  font-weight: var(--#{$prefix}tooltip-font-weight);
-  color: var(--#{$prefix}tooltip-color);
-  text-align: center;
-  text-decoration: none;
-  word-wrap: break-word;
-  max-width: var(--#{$prefix}tooltip-max-width);
-  background: var(--#{$prefix}tooltip-bg);
-  border-radius: var(--#{$prefix}tooltip-border-radius);
-  box-shadow: var(--#{$prefix}tooltip-box-shadow);
-  opacity: 0;
-
-  // Add psychedelic gradient border
-  border: var(--#{$prefix}tooltip-border-width) solid var(--#{$prefix}tooltip-border-color);
-  background:
-    linear-gradient(25deg, rgba(25, 15, 40, 0.95), rgba(25, 15, 40, 0.95)) padding-box,
-    linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff) border-box;
-
-  // Add floating animation
-  @include trippy.float-animation();
-
-  // Add color shift effect
-  @include trippy.color-shift();
-
-  // Add pulse animation
-  @include trippy.psychedelic-pulse(rgba(157, 0, 255, 0.3));
-
-  // Show animation
-  &--show {
-    opacity: 1;
-    animation: fadeInScale 0.3s ease forwards;
-
-    @keyframes fadeInScale {
-      from {
-        opacity: 0;
-        transform: scale(0.8) rotate(-5deg);
-      }
-      to {
-        opacity: 1;
-        transform: scale(1) rotate(0deg);
-      }
-    }
-  }
-
-  // Hide animation
-  &--hide {
-    opacity: 0;
-    animation: fadeOutScale 0.3s ease forwards;
-
-    @keyframes fadeOutScale {
-      from {
-        opacity: 1;
-        transform: scale(1) rotate(0deg);
-      }
-      to {
-        opacity: 0;
-        transform: scale(0.8) rotate(5deg);
-      }
-    }
-  }
-
-  // Tooltip arrow
-  &__arrow {
-    position: absolute;
-    width: var(--#{$prefix}tooltip-arrow-size);
-    height: var(--#{$prefix}tooltip-arrow-size);
-    background: inherit;
-    border: var(--#{$prefix}tooltip-border-width) solid var(--#{$prefix}tooltip-border-color);
-
-    // Add psychedelic gradient
-    background:
-      linear-gradient(25deg, rgba(25, 15, 40, 0.95), rgba(25, 15, 40, 0.95)) padding-box,
-      linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff) border-box;
-
-    &::before {
-      position: absolute;
-      content: '';
-      width: 0;
-      height: 0;
-      border: calc(var(--#{$prefix}tooltip-arrow-size) / 2) solid transparent;
-    }
-  }
-
-  // Arrow positions
-  &[data-popper-placement^='top'] .c-tooltip__arrow {
-    bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-size) / 2);
-
-    &::before {
-      border-top-color: var(--#{$prefix}tooltip-bg);
-      border-bottom: 0;
-    }
-  }
-
-  &[data-popper-placement^='right'] .c-tooltip__arrow {
-    left: calc(-1 * var(--#{$prefix}tooltip-arrow-size) / 2);
-
-    &::before {
-      border-right-color: var(--#{$prefix}tooltip-bg);
-      border-left: 0;
-    }
-  }
-
-  &[data-popper-placement^='bottom'] .c-tooltip__arrow {
-    top: calc(-1 * var(--#{$prefix}tooltip-arrow-size) / 2);
-
-    &::before {
-      border-bottom-color: var(--#{$prefix}tooltip-bg);
-      border-top: 0;
-    }
-  }
-
-  &[data-popper-placement^='left'] .c-tooltip__arrow {
-    right: calc(-1 * var(--#{$prefix}tooltip-arrow-size) / 2);
-
-    &::before {
-      border-left-color: var(--#{$prefix}tooltip-bg);
-      border-right: 0;
-    }
-  }
-
-  // Inner content
-  &__inner {
-    padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-  }
-
-  // Title
-  &__title {
-    font-weight: 600;
-    margin-bottom: 0.25rem;
-    color: $yellow-4;
-
-    // Add glow effect to title
-    @include trippy.trippy-glow($yellow-4, 5px);
-  }
-}