@shohojdhara/atomix 0.3.3 → 0.3.4

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

@@ -1,358 +0,0 @@
-/*!
- * Mashroom Theme Form 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 *;
-
-.c-form {
-  $root: &;
-
-  // Base form styling
-  &__group {
-    margin-bottom: 1.5rem;
-  }
-
-  // Label styling with mushroom glow
-  &__label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.9);
-
-    // Add trippy glow effect
-    @include trippy.trippy-glow(rgba(255, 255, 255, 0.2), 5px);
-
-    &--required::after {
-      content: ' *';
-      color: $red-4;
-      @include trippy.psychedelic-pulse($red-4);
-    }
-  }
-
-  // Input styling with mushroom cap design
-  &__control {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    color: rgba(255, 255, 255, 0.9);
-    background: rgba(255, 255, 255, 0.1);
-    border: 2px solid rgba(157, 0, 255, 0.3);
-    border-radius: 1rem;
-    transition: all 0.3s ease;
-
-    // Add subtle mushroom texture
-    background-image: radial-gradient(
-      circle at 10% 10%,
-      rgba(255, 187, 0, 0.1) 0%,
-      transparent 50%
-    );
-
-    &:focus {
-      outline: none;
-      border-color: $yellow-4;
-      background: rgba(255, 255, 255, 0.15);
-
-      // Enhanced glow on focus
-      @include trippy.trippy-glow($yellow-4, 10px);
-
-      // Add mushroom cap animation
-      animation: mushroomFocus 0.5s ease;
-    }
-
-    @keyframes mushroomFocus {
-      0% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.02);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.6);
-    }
-
-    // Disabled state
-    &:disabled {
-      background: rgba(255, 255, 255, 0.05);
-      border-color: rgba(157, 0, 255, 0.1);
-      color: rgba(255, 255, 255, 0.4);
-      cursor: not-allowed;
-    }
-  }
-
-  // Textarea specific styling
-  &__control[type='textarea'] {
-    resize: vertical;
-    min-height: 100px;
-  }
-
-  // Select dropdown styling
-  &__select {
-    @extend #{$root}__control;
-    cursor: pointer;
-
-    // Custom arrow with mushroom style
-    background-image:
-      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%239d00ff' viewBox='0 0 16 16'%3e%3cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3e%3c/svg%3e"),
-      radial-gradient(circle at 10% 10%, rgba(255, 187, 0, 0.1) 0%, transparent 50%);
-    background-repeat: no-repeat;
-    background-position: right 0.75rem center;
-    background-size: 16px 12px;
-    padding-right: 2.5rem;
-  }
-
-  // Checkbox styling with mushroom cap design
-  &__check {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-
-    &-input {
-      position: absolute;
-      opacity: 0;
-
-      &:checked + #{$root}__check-label::before {
-        background: linear-gradient(45deg, $yellow-4, $red-4);
-        border-color: $yellow-4;
-        animation: mushroomCheck 0.3s ease;
-      }
-
-      &:checked + #{$root}__check-label::after {
-        content: '🍄';
-        position: absolute;
-        left: 0.25rem;
-        top: 0.25rem;
-        font-size: 0.75rem;
-      }
-
-      &:focus + #{$root}__check-label::before {
-        @include trippy.trippy-glow($yellow-4, 8px);
-      }
-    }
-
-    &-label {
-      position: relative;
-      padding-left: 2rem;
-      color: rgba(255, 255, 255, 0.9);
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 1.25rem;
-        height: 1.25rem;
-        border: 2px solid rgba(157, 0, 255, 0.5);
-        border-radius: 0.25rem;
-        background: rgba(255, 255, 255, 0.1);
-        transition: all 0.3s ease;
-      }
-    }
-
-    @keyframes mushroomCheck {
-      0% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.2);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-  }
-
-  // Radio button styling
-  &__radio {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-
-    &-input {
-      position: absolute;
-      opacity: 0;
-
-      &:checked + #{$root}__radio-label::before {
-        border-color: $yellow-4;
-        @include trippy.trippy-glow($yellow-4, 8px);
-      }
-
-      &:checked + #{$root}__radio-label::after {
-        content: '';
-        position: absolute;
-        left: 0.375rem;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 0.5rem;
-        height: 0.5rem;
-        background: radial-gradient(circle, $yellow-4, $red-4);
-        border-radius: 50%;
-        animation: mushroomRadio 0.3s ease;
-      }
-    }
-
-    &-label {
-      position: relative;
-      padding-left: 2rem;
-      color: rgba(255, 255, 255, 0.9);
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 1.25rem;
-        height: 1.25rem;
-        border: 2px solid rgba(157, 0, 255, 0.5);
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.1);
-        transition: all 0.3s ease;
-      }
-    }
-
-    @keyframes mushroomRadio {
-      0% {
-        transform: translateY(-50%) scale(0);
-      }
-      50% {
-        transform: translateY(-50%) scale(1.2);
-      }
-      100% {
-        transform: translateY(-50%) scale(1);
-      }
-    }
-  }
-
-  // Input group for combined inputs
-  &__input-group {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-
-    &-text {
-      display: flex;
-      align-items: center;
-      padding: 0.75rem 1rem;
-      font-size: 1rem;
-      font-weight: 600;
-      color: rgba(255, 255, 255, 0.9);
-      background: rgba(157, 0, 255, 0.2);
-      border: 2px solid rgba(157, 0, 255, 0.3);
-      border-radius: 1rem 0 0 1rem;
-
-      &:last-child {
-        border-radius: 0 1rem 1rem 0;
-      }
-    }
-
-    #{$root}__control {
-      &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:not(:first-child) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-left: 0;
-      }
-    }
-  }
-
-  // Validation states
-  &__control.is-valid {
-    border-color: $green-4;
-    @include trippy.trippy-glow($green-4, 8px);
-
-    &:focus {
-      border-color: $green-4;
-    }
-  }
-
-  &__control.is-invalid {
-    border-color: $red-4;
-    @include trippy.trippy-glow($red-4, 8px);
-
-    &:focus {
-      border-color: $red-4;
-    }
-  }
-
-  // Form feedback
-  &__feedback {
-    margin-top: 0.25rem;
-    font-size: 0.875rem;
-
-    &--valid {
-      color: $green-4;
-    }
-
-    &--invalid {
-      color: $red-4;
-    }
-  }
-
-  // Floating labels
-  &__floating {
-    position: relative;
-
-    #{$root}__control {
-      padding: 1.25rem 1rem 0.5rem;
-    }
-
-    #{$root}__label {
-      position: absolute;
-      top: 0.75rem;
-      left: 1rem;
-      font-size: 1rem;
-      color: rgba(255, 255, 255, 0.6);
-      transition: all 0.3s ease;
-      pointer-events: none;
-
-      &.is-focused,
-      #{$root}__control:focus ~ & {
-        top: 0.5rem;
-        font-size: 0.75rem;
-        color: $yellow-4;
-      }
-    }
-  }
-
-  // Responsive adjustments
-  @media (max-width: 768px) {
-    &__control {
-      font-size: 16px; // Prevents zoom on iOS
-    }
-
-    &__input-group {
-      flex-direction: column;
-
-      &-text {
-        border-radius: 1rem 1rem 0 0;
-        justify-content: center;
-
-        &:last-child {
-          border-radius: 0 0 1rem 1rem;
-        }
-      }
-
-      #{$root}__control {
-        border-radius: 0 0 1rem 1rem;
-        border-left: 2px solid rgba(157, 0, 255, 0.3);
-        border-top: 0;
-      }
-    }
-  }
-}

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

@@ -1,151 +0,0 @@
-/*!
- * Mashroom Theme Hero 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 *;
-
-.c-hero {
-  $root: &;
-
-  // Trippy animated background with mushroom colors
-  background: linear-gradient(
-    45deg,
-    #9d00ff 0%,
-    #ff2085 25%,
-    #00ff88 50%,
-    #ff2085 75%,
-    #9d00ff 100%
-  );
-  background-size: 400% 400%;
-  animation: mushroomPulse 8s ease-in-out infinite;
-
-  @keyframes mushroomPulse {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  // Floating mushroom spore particles effect
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
-      radial-gradient(circle at 80% 70%, rgba(255, 187, 0, 0.1) 0%, transparent 50%);
-    animation: sporeFloat 12s ease-in-out infinite;
-  }
-
-  @keyframes sporeFloat {
-    0%,
-    100% {
-      transform: translateY(0px) rotate(0deg);
-    }
-    33% {
-      transform: translateY(-20px) rotate(120deg);
-    }
-    66% {
-      transform: translateY(-10px) rotate(240deg);
-    }
-  }
-
-  // Content container
-  &__content {
-    padding: 2rem;
-    // Glass morphism effect
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(20px);
-    border-radius: 2rem;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-
-    // Add trippy glow effect
-    @include trippy.trippy-glow(rgba(255, 255, 255, 0.3), 20px);
-
-    // Floating animation
-    animation: contentFloat 6s ease-in-out infinite;
-  }
-
-  @keyframes contentFloat {
-    0%,
-    100% {
-      transform: translateY(0px);
-    }
-    50% {
-      transform: translateY(-10px);
-    }
-  }
-
-  // Title styling
-  &__title {
-    background: linear-gradient(45deg, #ffffff, #ff2085, #9d00ff, #00ff88);
-    background-size: 300% 300%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    animation: textShimmer 3s ease-in-out infinite;
-
-    @keyframes textShimmer {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-  }
-
-  // Subtitle styling
-  &__subtitle {
-    // Add subtle pulse
-    animation: subtitleGlow 4s ease-in-out infinite;
-  }
-
-  @keyframes subtitleGlow {
-    0%,
-    100% {
-      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
-    }
-    50% {
-      text-shadow: 0 0 15px rgba(255, 187, 0, 0.8);
-    }
-  }
-
-  &__cap {
-    position: absolute;
-    top: -50%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 200%;
-    height: 100%;
-    background: radial-gradient(ellipse at center, rgba(157, 0, 255, 0.1) 0%, transparent 70%);
-    animation: capPulse 10s ease-in-out infinite;
-  }
-
-  @keyframes capPulse {
-    0%,
-    100% {
-      transform: translateX(-50%) scale(1);
-      opacity: 0.3;
-    }
-    50% {
-      transform: translateX(-50%) scale(1.1);
-      opacity: 0.6;
-    }
-  }
-}

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

@@ -1,147 +0,0 @@
-/*!
- * Mashroom Theme Input 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 input animations
-@keyframes input-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-2px);
-  }
-}
-
-@keyframes input-glow-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 5px rgba($primary-6, 0.5);
-  }
-  50% {
-    box-shadow:
-      0 0 10px rgba($primary-6, 0.8),
-      0 0 20px rgba(157, 0, 255, 0.6),
-      0 0 30px rgba(255, 32, 133, 0.4);
-  }
-}
-
-@keyframes input-shimmer {
-  0% {
-    background-position: 0% 50%;
-  }
-  100% {
-    background-position: 100% 50%;
-  }
-}
-
-.c-input {
-  // Add psychedelic glow effect
-  @include trippy.trippy-glow(rgba($primary-6, 0.5), 5px);
-
-  // Add color shift for extra psychedelic effect
-  @include trippy.color-shift();
-
-  // Add psychedelic gradient border
-  border: 2px solid transparent;
-  background:
-    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
-    linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff) border-box;
-  background-size: 300% 300%;
-
-  border-radius: 8px;
-  padding: 10px 15px;
-  transition: all 0.3s ease;
-
-  // Add floating animation
-  @include trippy.float-animation();
-  animation-duration: 4s;
-
-  // Add pulse animation
-  animation: input-glow-pulse 3s infinite;
-
-  // Focus state with enhanced psychedelic effects
-  &:focus {
-    outline: none;
-    @include trippy.trippy-glow($red-4, 15px);
-    transform: scale(1.02);
-
-    // Add psychedelic pulse animation
-    @include trippy.psychedelic-pulse($primary-4);
-
-    // Speed up animations on focus
-    animation: input-glow-pulse 1s infinite;
-  }
-
-  // Hover state
-  &:hover {
-    @include trippy.trippy-glow($primary-4, 10px);
-    transform: scale(1.01) rotate(1deg);
-    animation: input-glow-pulse 2s infinite;
-  }
-
-  // Disabled state
-  &:disabled {
-    animation: none;
-    background-color: rgba($gray-3, 0.5);
-    @include trippy.trippy-glow(rgba($gray-3, 0.3), 2px);
-  }
-
-  // Placeholder styling
-  &::placeholder {
-    color: $gray-4;
-    opacity: 0.7;
-
-    // Add subtle floating effect to placeholder
-    @include trippy.float-animation();
-    animation-duration: 3s;
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    @include gradients.rainbow-gradient();
-    background-size: 400% 400%;
-    border: 2px solid transparent;
-    animation: rainbow-shift 4s ease infinite;
-
-    &:focus {
-      animation: rainbow-shift 2s ease infinite;
-      @include trippy.trippy-glow(white, 20px);
-    }
-
-    &:hover {
-      animation: rainbow-shift 3s ease infinite;
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    @include trippy.trippy-glow($purple-4, 15px);
-    animation: input-glow-pulse 2s infinite;
-
-    &:focus {
-      @include trippy.trippy-glow($red-4, 25px);
-      animation: input-glow-pulse 0.5s infinite;
-    }
-
-    &:hover {
-      @include trippy.trippy-glow($yellow-4, 20px);
-    }
-  }
-
-  // Floating variant
-  &--floating {
-    @include trippy.float-animation();
-    animation-duration: 3s;
-
-    &:focus {
-      animation: input-float 1s ease-in-out infinite;
-    }
-  }
-}