@shohojdhara/atomix 0.3.3 → 0.3.4

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

@@ -1,277 +0,0 @@
-/*!
- * Mashroom Theme Messages 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-messages {
-  $root: &;
-
-  // Message item styling
-  &__item {
-    position: relative;
-    margin-bottom: 0.75rem;
-    padding: 1rem 1.5rem;
-    border-radius: 1rem;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: rgba(255, 255, 255, 0.9);
-
-    // Mushroom cap notification shape
-    &::before {
-      content: '';
-      position: absolute;
-      top: -3px;
-      left: 20px;
-      width: 15px;
-      height: 6px;
-      background: inherit;
-      border: inherit;
-      border-bottom: none;
-      border-radius: 15px 15px 0 0;
-    }
-
-    // Trippy glow effect
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 10px);
-
-    // Entrance animation
-    animation: messageSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-
-    @keyframes messageSlideIn {
-      from {
-        opacity: 0;
-        transform: translateX(100%) scale(0.8);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(0) scale(1);
-      }
-    }
-  }
-
-  // Message content
-  &__content {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-
-  // Icon styling
-  &__icon {
-    flex-shrink: 0;
-    font-size: 1.25rem;
-    animation: iconBounce 2s ease-in-out infinite;
-  }
-
-  @keyframes iconBounce {
-    0%,
-    100% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.1);
-    }
-  }
-
-  // Text container
-  &__text {
-    flex: 1;
-
-    &-title {
-      font-weight: 600;
-      margin-bottom: 0.25rem;
-    }
-
-    &-body {
-      font-size: 0.875rem;
-      line-height: 1.4;
-      opacity: 0.9;
-    }
-  }
-
-  // Close button
-  &__close {
-    background: none;
-    border: none;
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 1.25rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      color: $white;
-      transform: rotate(90deg);
-      @include trippy.trippy-glow(rgba(255, 255, 255, 0.3), 8px);
-    }
-  }
-
-  // Progress bar for auto-dismiss
-  &__progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 3px;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 0 0 1rem 1rem;
-    animation: progressShrink 5s linear forwards;
-
-    @keyframes progressShrink {
-      from {
-        width: 100%;
-      }
-      to {
-        width: 0%;
-      }
-    }
-  }
-
-  // Message variants with mushroom colors
-  &__item--info {
-    background: rgba(0, 123, 255, 0.15);
-    border-color: rgba(0, 123, 255, 0.3);
-    @include trippy.trippy-glow(rgba(0, 123, 255, 0.3), 10px);
-
-    #{$root}__icon {
-      color: #00bfff;
-    }
-
-    #{$root}__text-title {
-      color: #00bfff;
-    }
-  }
-
-  &__item--success {
-    background: rgba(40, 167, 69, 0.15);
-    border-color: rgba(40, 167, 69, 0.3);
-    @include trippy.trippy-glow(rgba(40, 167, 69, 0.3), 10px);
-
-    #{$root}__icon {
-      color: #28a745;
-    }
-
-    #{$root}__text-title {
-      color: #28a745;
-    }
-  }
-
-  &__item--warning {
-    background: rgba(255, 193, 7, 0.15);
-    border-color: rgba(255, 193, 7, 0.3);
-    @include trippy.trippy-glow(rgba(255, 193, 7, 0.3), 10px);
-
-    #{$root}__icon {
-      color: #ffc107;
-    }
-
-    #{$root}__text-title {
-      color: #ffc107;
-    }
-  }
-
-  &__item--error {
-    background: rgba(220, 53, 69, 0.15);
-    border-color: rgba(220, 53, 69, 0.3);
-    @include trippy.trippy-glow(rgba(220, 53, 69, 0.3), 10px);
-
-    #{$root}__icon {
-      color: #dc3545;
-    }
-
-    #{$root}__text-title {
-      color: #dc3545;
-    }
-  }
-
-  // Psychedelic variant
-  &__item--psychedelic {
-    background: linear-gradient(
-      135deg,
-      rgba(157, 0, 255, 0.15) 0%,
-      rgba(255, 32, 133, 0.15) 50%,
-      rgba(0, 255, 136, 0.15) 100%
-    );
-    border-color: rgba(157, 0, 255, 0.4);
-
-    // Animated psychedelic border
-    &::after {
-      content: '';
-      position: absolute;
-      inset: -1px;
-      background: linear-gradient(45deg, #9d00ff, #ff2085, #00ff88, #ff2085, #9d00ff);
-      border-radius: 1rem;
-      z-index: -1;
-      animation: psychedelicBorder 2s linear infinite;
-    }
-
-    @keyframes psychedelicBorder {
-      0% {
-        opacity: 0.5;
-      }
-      50% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0.5;
-      }
-    }
-
-    #{$root}__icon {
-      background: linear-gradient(45deg, #ff2085, #9d00ff, #00ff88);
-      background-size: 200% 200%;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      animation: iconColorShift 2s ease-in-out infinite;
-    }
-
-    #{$root}__text-title {
-      background: linear-gradient(45deg, #ff2085, #9d00ff);
-      background-size: 200% 200%;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      animation: titleColorShift 3s ease-in-out infinite;
-    }
-
-    @keyframes iconColorShift {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-
-    @keyframes titleColorShift {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-  }
-
-  // Exit animation
-  &__item--exiting {
-    animation: messageSlideOut 0.3s ease forwards;
-  }
-
-  @keyframes messageSlideOut {
-    to {
-      opacity: 0;
-      transform: translateX(100%) scale(0.8);
-    }
-  }
-}

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

@@ -1,264 +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;
-
-// Psychedelic modal animations
-@keyframes modal-float {
-  0%,
-  100% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  33% {
-    transform: translateY(-20px) rotate(2deg);
-  }
-  66% {
-    transform: translateY(10px) rotate(-1deg);
-  }
-}
-
-@keyframes modal-glow-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 20px colors.$primary-6;
-  }
-  50% {
-    box-shadow:
-      0 0 30px colors.$primary-6,
-      0 0 50px rgba(157, 0, 255, 0.8),
-      0 0 70px rgba(255, 32, 133, 0.6);
-  }
-}
-
-@keyframes modal-border-glow {
-  0%,
-  100% {
-    opacity: 0.5;
-    filter: blur(5px);
-  }
-  50% {
-    opacity: 1;
-    filter: blur(10px);
-  }
-}
-
-@keyframes modal-backdrop-move {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 100px 100px;
-  }
-}
-
-.c-modal {
-  $root: &;
-  // Add a psychedelic backdrop
-  &__backdrop {
-    background-color: rgba(colors.$black, 0.8);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-
-    // Add a subtle animated pattern
-    background-image:
-      radial-gradient(circle at 10% 20%, rgba(157, 0, 255, 0.1) 1px, transparent 1px),
-      radial-gradient(circle at 20% 80%, rgba(0, 255, 157, 0.1) 1px, transparent 1px),
-      radial-gradient(circle at 80% 30%, rgba(255, 32, 133, 0.1) 1px, transparent 1px),
-      radial-gradient(circle at 60% 70%, rgba(255, 187, 0, 0.1) 1px, transparent 1px);
-    background-size: 100px 100px;
-    animation: modal-backdrop-move 20s linear infinite;
-
-    @keyframes modal-backdrop-move {
-      0% {
-        background-position: 0 0;
-      }
-      100% {
-        background-position: 100px 100px;
-      }
-    }
-
-    &--visible {
-      opacity: 1;
-    }
-  }
-
-  &__content {
-    @include gradients.forest-floor-gradient();
-    border: 2px solid colors.$primary-7;
-    border-radius: 20px;
-
-    // Add trippy glow effect
-    @include trippy.trippy-glow(colors.$primary-6, 20px);
-
-    // Add floating animation
-    @include trippy.float-animation();
-
-    // Add color shift
-    @include trippy.color-shift();
-
-    animation:
-      color-shift 10s infinite,
-      float 10s infinite,
-      modal-glow-pulse 3s infinite;
-
-    position: relative;
-    overflow: hidden;
-
-    // Add a subtle inner glow
-    &::before {
-      content: '';
-      position: absolute;
-      top: -5px;
-      left: -5px;
-      right: -5px;
-      bottom: -5px;
-      border-radius: 22px;
-      background: linear-gradient(
-        45deg,
-        rgba(colors.$primary-6, 0.5),
-        rgba(colors.$green-6, 0.5),
-        rgba(colors.$yellow-6, 0.5),
-        rgba(colors.$red-6, 0.5)
-      );
-      z-index: -1;
-      animation: modal-border-glow 3s ease infinite;
-    }
-
-    @keyframes modal-border-glow {
-      0%,
-      100% {
-        opacity: 0.5;
-        filter: blur(5px);
-      }
-      50% {
-        opacity: 1;
-        filter: blur(10px);
-      }
-    }
-  }
-
-  &__header {
-    position: relative;
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 5px;
-      @include gradients.psychedelic-linear-gradient(colors.$primary-6, colors.$blue-6);
-      animation: modal-border-glow 2s ease infinite;
-    }
-  }
-
-  &__title {
-    // Add a subtle pulse effect to the title
-    @include trippy.psychedelic-pulse(colors.$primary-4);
-
-    // Add floating effect to title
-    @include trippy.float-animation();
-    animation-duration: 4s;
-  }
-
-  &__body {
-  }
-
-  &__footer {
-    border-top: 1px solid rgba(colors.$primary-4, 0.3);
-  }
-
-  &__close {
-    // Add glow effect to close button
-    @include trippy.trippy-glow(colors.$red-6, 5px);
-
-    // Add floating effect
-    @include trippy.float-animation();
-    animation-duration: 3s;
-
-    &:hover {
-      @include gradients.psychedelic-linear-gradient(colors.$red-6, colors.$purple-6);
-      transform: rotate(90deg);
-      transition: transform 0.3s ease;
-      @include trippy.trippy-glow(colors.$yellow-4, 15px);
-    }
-  }
-
-  // Size variants
-  &--sm {
-    max-width: 300px;
-  }
-
-  &--md {
-    max-width: 500px;
-  }
-
-  &--lg {
-    max-width: 800px;
-  }
-
-  &--xl {
-    max-width: 1140px;
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    #{$root}__content {
-      @include gradients.rainbow-gradient();
-      background-size: 400% 400%;
-      animation:
-        rainbow-shift 4s ease infinite,
-        modal-float 5s ease-in-out infinite;
-      border: 2px solid transparent;
-
-      &::before {
-        background: linear-gradient(
-          45deg,
-          rgba(157, 0, 255, 0.5),
-          rgba(0, 255, 157, 0.5),
-          rgba(255, 187, 0, 0.5),
-          rgba(255, 32, 133, 0.5)
-        );
-        animation: modal-border-glow 2s ease infinite;
-      }
-    }
-
-    #{$root}__header::after {
-      @include gradients.rainbow-gradient();
-      background-size: 200% 100%;
-      animation: rainbow-shift 3s linear infinite;
-    }
-
-    #{$root}__title {
-      @include gradients.rainbow-gradient();
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-      background-size: 200% 100%;
-      animation: rainbow-shift 3s linear infinite;
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    #{$root}__content {
-      @include trippy.trippy-glow(colors.$purple-4, 30px);
-      animation: modal-glow-pulse 1.5s infinite;
-    }
-
-    #{$root}__close {
-      @include trippy.trippy-glow(colors.$red-4, 10px);
-
-      &:hover {
-        @include trippy.trippy-glow(colors.$yellow-4, 20px);
-      }
-    }
-  }
-
-  // Floating variant
-  &--floating {
-    #{$root}__content {
-      @include trippy.float-animation();
-      animation-duration: 6s;
-    }
-  }
-}

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

@@ -1,181 +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;
-
-.c-nav {
-  $root: &;
-
-  // Add a psychedelic underline effect to the whole nav
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    @include gradients.rainbow-gradient();
-    background-size: 300% 300%;
-    animation: nav-underline-shift 6s ease infinite;
-    border-radius: 3px;
-  }
-
-  @keyframes nav-underline-shift {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  &__item {
-    & + & {
-      margin-left: 1rem;
-    }
-
-    &--dropdown {
-      position: relative;
-    }
-
-    &:hover {
-      #{$root}__icon {
-        transform: rotate(-180deg);
-      }
-
-      #{$root}__dropdown-menu,
-      #{$root}__mega-menu {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-  }
-
-  &__link {
-    position: relative;
-    overflow: hidden;
-    // Add psychedelic background that activates on hover
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: -1;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-      @include gradients.psychedelic-linear-gradient(var(--atomix-primary-6), var(--atomix-info-6));
-    }
-
-    // Add glow effect
-    @include trippy.trippy-glow(transparent, 5px);
-
-    &:hover,
-    &--active {
-      color: colors.$white;
-
-      &::before {
-        opacity: 1;
-      }
-
-      // Enhance glow on hover/active
-      @include trippy.trippy-glow(colors.$primary-6, 10px);
-
-      // Add pulse effect
-      @include trippy.psychedelic-pulse(colors.$primary-4);
-    }
-
-    // Add a shine effect on hover
-    &::after {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -60%;
-      width: 20%;
-      height: 200%;
-      background: rgba(255, 255, 255, 0.3);
-      transform: rotate(25deg);
-      transition: none;
-    }
-
-    &:hover::after {
-      animation: nav-shine 1s ease;
-    }
-
-    @keyframes nav-shine {
-      0% {
-        left: -60%;
-      }
-      20% {
-        left: 20%;
-      }
-      40% {
-        left: 40%;
-      }
-      60% {
-        left: 60%;
-      }
-      80% {
-        left: 80%;
-      }
-      100% {
-        left: 120%;
-      }
-    }
-  }
-
-  // Dropdown menu styling
-  &__dropdown-menu {
-    @include gradients.forest-floor-gradient();
-    border: 1px solid colors.$primary-7;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-
-    // Add glow effect
-    @include trippy.trippy-glow(colors.$primary-6, 10px);
-
-    // Add color shift
-    @include trippy.color-shift();
-
-    position: absolute;
-    top: 100%;
-    left: 0;
-    min-width: 200px;
-    padding: 0.5rem 0;
-    visibility: hidden;
-    opacity: 0;
-    transition:
-      opacity 0.3s ease,
-      visibility 0.3s ease;
-    z-index: 1000;
-
-    &--right {
-      left: auto;
-      right: 0;
-    }
-  }
-
-  // Dropdown menu items
-  &__dropdown-item {
-    display: block;
-    padding: 0.5rem 1rem;
-    color: colors.$white;
-    text-decoration: none;
-    transition: all 0.2s ease;
-
-    &:hover {
-      @include gradients.psychedelic-linear-gradient(colors.$primary-6, colors.$blue-6);
-      padding-left: 1.25rem;
-    }
-  }
-
-  // Icon styling
-  &__icon {
-    transition: transform 0.3s ease;
-    font-size: 1.25rem;
-  }
-}