@shohojdhara/atomix 0.3.1 → 0.3.3

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

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

@@ -0,0 +1,264 @@
+@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

@@ -0,0 +1,181 @@
+@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;
+  }
+}