@shohojdhara/atomix 0.3.1 → 0.3.3

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

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

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