@shohojdhara/atomix 0.3.1 → 0.3.3

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

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

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

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