@shohojdhara/atomix 0.3.3 → 0.3.4

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

@@ -1,414 +0,0 @@
-/*!
- * Mashroom Theme Slider Component
- * Mushroom-shaped handles and trippy track 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 *;
-
-.c-slider {
-  $root: &;
-
-  // Base slider container
-  position: relative;
-  width: 100%;
-  margin: 2rem 0;
-
-  // Track styling
-  &__track {
-    position: relative;
-    height: 8px;
-    background: linear-gradient(
-      90deg,
-      rgba(157, 0, 255, 0.3),
-      rgba(255, 187, 0, 0.3),
-      rgba(255, 32, 133, 0.3),
-      rgba(0, 255, 136, 0.3)
-    );
-    border-radius: 4px;
-    overflow: hidden;
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.2), 5px);
-
-    // Animated background
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-      animation: trackShimmer 3s ease-in-out infinite;
-    }
-
-    @keyframes trackShimmer {
-      0% {
-        transform: translateX(-100%);
-      }
-      100% {
-        transform: translateX(100%);
-      }
-    }
-  }
-
-  // Fill styling
-  &__fill {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background: linear-gradient(90deg, $purple-4, $yellow-4, $red-4, $green-4);
-    background-size: 200% 100%;
-    border-radius: 4px;
-    animation: fillGradient 4s ease-in-out infinite;
-    @include trippy.trippy-glow($purple-4, 8px);
-  }
-
-  @keyframes fillGradient {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  // Handle styling (mushroom-shaped)
-  &__handle {
-    position: absolute;
-    top: 50%;
-    width: 24px;
-    height: 24px;
-    background: linear-gradient(135deg, $purple-4, $yellow-4);
-    border-radius: 50% 50% 20% 20%;
-    transform: translate(-50%, -50%);
-    cursor: grab;
-    @include trippy.trippy-glow($purple-4, 10px);
-    transition: all 0.3s ease;
-
-    // Mushroom cap shape
-    border-radius: 50% 50% 30% 30%;
-
-    // Stem effect
-    &::before {
-      content: '';
-      position: absolute;
-      top: 60%;
-      left: 50%;
-      width: 8px;
-      height: 12px;
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
-      border-radius: 0 0 50% 50%;
-      transform: translateX(-50%);
-    }
-
-    // Dot patterns
-    &::after {
-      content: '';
-      position: absolute;
-      top: 20%;
-      left: 30%;
-      width: 3px;
-      height: 3px;
-      background: rgba(255, 255, 255, 0.6);
-      border-radius: 50%;
-      box-shadow:
-        6px 2px 0 rgba(255, 255, 255, 0.4),
-        3px 6px 0 rgba(255, 255, 255, 0.4);
-    }
-
-    &:hover {
-      transform: translate(-50%, -50%) scale(1.2);
-      @include trippy.trippy-glow($yellow-4, 15px);
-    }
-
-    &:active {
-      cursor: grabbing;
-      transform: translate(-50%, -50%) scale(1.1);
-    }
-
-    // Focus state
-    &:focus {
-      outline: none;
-      @include trippy.trippy-glow($yellow-4, 20px);
-    }
-  }
-
-  // Tick marks
-  &__ticks {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: space-between;
-    margin-top: 0.5rem;
-  }
-
-  &__tick {
-    position: relative;
-    font-size: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-
-    // Tick line
-    &::before {
-      content: '';
-      position: absolute;
-      top: -8px;
-      left: 50%;
-      width: 1px;
-      height: 4px;
-      background: rgba(255, 255, 255, 0.3);
-      transform: translateX(-50%);
-    }
-  }
-
-  // Labels
-  &__label {
-    font-size: 0.875rem;
-    color: rgba(255, 255, 255, 0.7);
-    margin-bottom: 0.5rem;
-
-    &--min,
-    &--max {
-      position: absolute;
-      top: 100%;
-      font-size: 0.75rem;
-      color: rgba(255, 255, 255, 0.5);
-    }
-
-    &--min {
-      left: 0;
-    }
-
-    &--max {
-      right: 0;
-    }
-  }
-
-  // Value display
-  &__value {
-    position: absolute;
-    top: -40px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.8);
-    color: $white;
-    padding: 0.25rem 0.75rem;
-    border-radius: 1rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 5px);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-
-    #{$root}__handle:hover + &,
-    #{$root}__handle:focus + & {
-      opacity: 1;
-    }
-  }
-
-  // Range slider (dual handles)
-  &--range {
-    #{$root}__handle {
-      &--min {
-        background: linear-gradient(135deg, $green-4, $yellow-4);
-        @include trippy.trippy-glow($green-4, 8px);
-      }
-
-      &--max {
-        background: linear-gradient(135deg, $red-4, $yellow-4);
-        @include trippy.trippy-glow($red-4, 8px);
-      }
-    }
-  }
-
-  // Vertical slider
-  &--vertical {
-    height: 200px;
-    width: 8px;
-
-    #{$root}__track {
-      height: 100%;
-      width: 8px;
-      background: linear-gradient(
-        180deg,
-        rgba(157, 0, 255, 0.3),
-        rgba(255, 187, 0, 0.3),
-        rgba(255, 32, 133, 0.3),
-        rgba(0, 255, 136, 0.3)
-      );
-    }
-
-    #{$root}__fill {
-      width: 100%;
-      height: auto;
-      top: auto;
-      bottom: 0;
-      background: linear-gradient(180deg, $purple-4, $yellow-4, $red-4, $green-4);
-      background-size: 100% 200%;
-    }
-
-    #{$root}__handle {
-      left: 50%;
-      transform: translate(-50%, 50%);
-    }
-
-    #{$root}__ticks {
-      flex-direction: column;
-      top: 0;
-      bottom: 0;
-      right: -40px;
-      left: auto;
-      width: 30px;
-    }
-
-    #{$root}__label--min,
-    #{$root}__label--max {
-      top: auto;
-      bottom: auto;
-      left: 100%;
-      margin-left: 10px;
-    }
-
-    #{$root}__label--min {
-      bottom: 0;
-    }
-
-    #{$root}__label--max {
-      top: 0;
-    }
-  }
-
-  // Size variants
-  &--sm {
-    #{$root}__track {
-      height: 4px;
-    }
-
-    #{$root}__handle {
-      width: 16px;
-      height: 16px;
-
-      &::before {
-        width: 6px;
-        height: 8px;
-      }
-    }
-  }
-
-  &--lg {
-    #{$root}__track {
-      height: 12px;
-    }
-
-    #{$root}__handle {
-      width: 32px;
-      height: 32px;
-
-      &::before {
-        width: 10px;
-        height: 16px;
-      }
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    #{$root}__track {
-      background: linear-gradient(
-        90deg,
-        rgba(157, 0, 255, 0.2),
-        rgba(255, 32, 133, 0.2),
-        rgba(0, 255, 136, 0.2),
-        rgba(255, 187, 0, 0.2),
-        rgba(157, 0, 255, 0.2)
-      );
-      background-size: 400% 100%;
-      animation: psychedelicTrack 6s ease-in-out infinite;
-    }
-
-    #{$root}__fill {
-      animation: psychedelicFill 3s ease-in-out infinite;
-    }
-
-    #{$root}__handle {
-      animation: psychedelicHandle 2s ease-in-out infinite;
-    }
-  }
-
-  @keyframes psychedelicTrack {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  @keyframes psychedelicFill {
-    0% {
-      filter: hue-rotate(0deg);
-    }
-    100% {
-      filter: hue-rotate(360deg);
-    }
-  }
-
-  @keyframes psychedelicHandle {
-    0% {
-      filter: hue-rotate(0deg) brightness(1);
-    }
-    50% {
-      filter: hue-rotate(180deg) brightness(1.2);
-    }
-    100% {
-      filter: hue-rotate(360deg) brightness(1);
-    }
-  }
-
-  // Glow variant
-  &--glow {
-    #{$root}__track {
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 10px);
-    }
-
-    #{$root}__fill {
-      @include trippy.trippy-glow($yellow-4, 15px);
-    }
-
-    #{$root}__handle {
-      @include trippy.trippy-glow($purple-4, 20px);
-    }
-  }
-
-  // Disabled state
-  &--disabled {
-    opacity: 0.5;
-    pointer-events: none;
-
-    #{$root}__handle {
-      cursor: not-allowed;
-    }
-  }
-
-  // Responsive adjustments
-  @media (max-width: 768px) {
-    #{$root}__ticks {
-      font-size: 0.625rem;
-    }
-
-    #{$root}__label--min,
-    #{$root}__label--max {
-      font-size: 0.625rem;
-    }
-  }
-}

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

@@ -1,198 +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;
-@use '../01-settings/settings.spinner' as spinner;
-@use '../01-settings/settings.design-tokens' as maps;
-@use 'sass:map';
-
-// Psychedelic spinner animations
-@keyframes spinner {
-  to {
-    transform: rotate(360deg) #{'/* rtl:ignore */'};
-  }
-}
-
-@keyframes psychedelic-spinner {
-  0% {
-    transform: rotate(0deg) scale(1);
-    filter: hue-rotate(0deg);
-  }
-  25% {
-    transform: rotate(90deg) scale(1.1);
-    filter: hue-rotate(90deg);
-  }
-  50% {
-    transform: rotate(180deg) scale(1);
-    filter: hue-rotate(180deg);
-  }
-  75% {
-    transform: rotate(270deg) scale(0.9);
-    filter: hue-rotate(270deg);
-  }
-  100% {
-    transform: rotate(360deg) scale(1);
-    filter: hue-rotate(360deg);
-  }
-}
-
-@keyframes spinner-glow {
-  0%,
-  100% {
-    box-shadow: 0 0 10px colors.$primary-6;
-  }
-  25% {
-    box-shadow:
-      0 0 20px colors.$blue-6,
-      0 0 30px colors.$blue-6;
-  }
-  50% {
-    box-shadow: 0 0 10px colors.$green-6;
-  }
-  75% {
-    box-shadow:
-      0 0 20px colors.$red-6,
-      0 0 30px colors.$red-6;
-  }
-}
-
-@keyframes spinner-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-5px);
-  }
-}
-
-@keyframes rainbow-spinner {
-  0% {
-    background-position: 0% 50%;
-  }
-  100% {
-    background-position: 100% 50%;
-  }
-}
-
-.c-spinner {
-  --#{config.$prefix}spinner-size: #{map.get(spinner.$spinner-sizes, md)};
-  --#{config.$prefix}spinner-background-color: #{spinner.$spinner-background-color};
-  --#{config.$prefix}spinner-color: #{spinner.$spinner-color};
-  --#{config.$prefix}spinner-border-width: #{spinner.$spinner-border-width};
-  --#{config.$prefix}spinner-animation-speed: #{spinner.$spinner-animation-speed};
-
-  color: var(--#{config.$prefix}spinner-background-color);
-  position: relative;
-
-  // Use a psychedelic gradient for the spinner
-  background: conic-gradient(
-    colors.$primary-6,
-    colors.$blue-6,
-    colors.$green-6,
-    colors.$yellow-6,
-    colors.$red-6,
-    colors.$primary-6
-  );
-  border-radius: 50%;
-  animation:
-    psychedelic-spinner var(--#{config.$prefix}spinner-animation-speed) ease-in-out infinite,
-    spinner-glow var(--#{config.$prefix}spinner-animation-speed) ease infinite;
-
-  // Add a glow effect
-  @include trippy.trippy-glow(colors.$primary-6, 10px);
-
-  // Add floating animation
-  @include trippy.float-animation();
-  animation-duration: 4s;
-
-  // Add a central "hole" to make it look like a ring
-  &::before {
-    content: '';
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    right: 10%;
-    bottom: 10%;
-    background-color: colors.$black;
-    border-radius: 50%;
-  }
-
-  // Size variants
-  @each $size, $value in spinner.$spinner-sizes {
-    &--#{$size} {
-      --#{config.$prefix}spinner-size: #{$value};
-    }
-  }
-
-  // Color variants
-  @each $color, $value in maps.$theme-colors {
-    &--#{$color} {
-      @if ($color == 'secondary') {
-        --#{config.$prefix}spinner-background-color: var(--#{config.$prefix}body-bg);
-      }
-
-      --#{config.$prefix}spinner-color: var(--#{config.$prefix}#{$color});
-
-      // Apply color-specific effects
-      @if ($color == 'primary') {
-        animation:
-          psychedelic-spinner var(--#{config.$prefix}spinner-animation-speed) ease-in-out infinite,
-          spinner-glow var(--#{config.$prefix}spinner-animation-speed) ease infinite;
-      } @else {
-        // For other colors, use a simpler animation
-        animation: spinner var(--#{config.$prefix}spinner-animation-speed) linear infinite;
-      }
-    }
-  }
-
-  // Growing variant
-  &--growing {
-    animation:
-      spinner var(--#{config.$prefix}spinner-animation-speed) linear infinite,
-      spinner-grow 1s linear infinite;
-
-    @keyframes spinner-grow {
-      0%,
-      100% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.2);
-      }
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    @include gradients.rainbow-gradient();
-    background-size: 300% 300%;
-    animation:
-      rainbow-spinner 2s linear infinite,
-      spinner-glow 1s ease infinite,
-      spinner-float 3s ease-in-out infinite;
-    border-radius: 50%;
-
-    &::before {
-      background-color: rgba(colors.$black, 0.7);
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    @include trippy.trippy-glow(colors.$purple-4, 20px);
-    animation:
-      spinner-glow 0.5s ease infinite,
-      spinner-float 2s ease-in-out infinite;
-
-    &::before {
-      background-color: rgba(colors.$black, 0.5);
-    }
-  }
-
-  // Floating variant
-  &--floating {
-    @include trippy.float-animation();
-    animation-duration: 2s;
-  }
-}