@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/themes/esrar/06-components/_components.image-gallery.scss

@@ -1,29 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-image-gallery {
-  @include animations(
-    'slow-fade-in' 'color-shift',
-    $duration: 2s,
-    $timing: ease-out,
-    $iteration-count: 1
-  );
-}
-
-.c-image-gallery__item {
-  @include animations(
-    'float' 'color-pulse',
-    $duration: 5s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-
-  &:hover {
-    @include animations(
-      'pulse-slow' 'chill-rainbow',
-      $duration: 1s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}

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

@@ -1,91 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../../../styles/02-tools/tools.component' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-input {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-
-  // Subtle breathing effect when idle
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'hypnotic-breathe',
-      $duration: 6s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &:focus {
-    @include focus-ring(var(--#{config.$prefix}primary-5));
-    border-color: var(--#{config.$prefix}primary-5);
-    box-shadow:
-      0 0 0 3px rgba(16, 185, 129, 0.2),
-      0 0 15px rgba(16, 185, 129, 0.3);
-
-    @include animations('trippy-wave', $duration: 2s, $timing: ease-in-out, $iteration-count: 2);
-    filter: saturate(1.3) brightness(1.1);
-  }
-
-  &:hover:not(:focus) {
-    border-color: var(--#{config.$prefix}primary-3);
-    filter: brightness(1.05) saturate(1.1) hue-rotate(10deg);
-    @include animations('stoned-drift', $duration: 3s, $timing: ease-in-out, $iteration-count: 2);
-  }
-
-  // Enhanced focus for accessibility
-  &:focus-visible {
-    outline: 2px solid var(--#{config.$prefix}primary-5);
-    outline-offset: 1px;
-    @include animations(
-      'psychedelic-pulse',
-      $duration: 1.5s,
-      $timing: ease-in-out,
-      $iteration-count: 1
-    );
-  }
-
-  // Add subtle background glow
-  &::before {
-    content: '';
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    right: -1px;
-    bottom: -1px;
-    background: linear-gradient(
-      45deg,
-      transparent,
-      rgba(16, 185, 129, 0.05),
-      transparent,
-      rgba(16, 185, 129, 0.05),
-      transparent
-    );
-    opacity: 0;
-    z-index: -1;
-    border-radius: inherit;
-    transition: opacity 0.3s ease;
-  }
-
-  &:focus::before {
-    opacity: 1;
-    animation: #{config.$prefix}chill-spin 4s linear infinite;
-  }
-}
-
-// Reduced motion support
-@media (prefers-reduced-motion: reduce) {
-  .c-input {
-    &,
-    &:focus,
-    &:hover {
-      animation: none !important;
-      transform: none !important;
-    }
-
-    &::before {
-      animation: none !important;
-    }
-  }
-}

package/src/themes/esrar/06-components/_components.list-group.scss

@@ -1,26 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-list-group {
-  @include animations('slow-fade-in-up', $duration: 0.6s, $timing: ease-out, $iteration-count: 1);
-}
-
-.c-list-group__item {
-  &:hover {
-    @include animations(
-      'color-wave',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &.is-active {
-    @include animations(
-      'pulse-slow',
-      $duration: 1s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}

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

@@ -1,148 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../../../styles/02-tools/tools.component' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-modal {
-  &__backdrop {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
-    opacity: 0;
-    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-
-    // Hypnotic swirling background
-    background:
-      radial-gradient(ellipse at 30% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
-      radial-gradient(ellipse at 70% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
-      conic-gradient(
-        from 0deg at 50% 50%,
-        rgba(16, 185, 129, 0.05),
-        transparent,
-        rgba(16, 185, 129, 0.08),
-        transparent,
-        rgba(16, 185, 129, 0.05)
-      ),
-      rgba(0, 0, 0, 0.7);
-
-    @media (prefers-reduced-motion: no-preference) {
-      animation: #{config.$prefix}chill-rainbow 20s linear infinite;
-    }
-
-    &--visible {
-      opacity: 1;
-    }
-  }
-
-  &__content {
-    @include animations('slow-zoom-in', $duration: 0.5s, $timing: ease-out, $iteration-count: 1);
-
-    position: relative;
-    border: 2px solid rgba(16, 185, 129, 0.3);
-    box-shadow:
-      0 0 30px rgba(16, 185, 129, 0.2),
-      0 0 60px rgba(16, 185, 129, 0.1),
-      inset 0 0 20px rgba(16, 185, 129, 0.05);
-    overflow: hidden;
-
-    // Subtle breathing effect
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations(
-        'hypnotic-breathe',
-        $duration: 6s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -100%;
-      z-index: -1;
-
-      background: conic-gradient(
-        var(--#{config.$prefix}primary-1),
-        var(--#{config.$prefix}primary-3),
-        var(--#{config.$prefix}primary-5),
-        var(--#{config.$prefix}primary-7),
-        var(--#{config.$prefix}primary-5),
-        var(--#{config.$prefix}primary-3),
-        var(--#{config.$prefix}primary-1)
-      );
-      opacity: 0.08;
-      z-index: -1;
-      border-radius: inherit;
-      animation: #{config.$prefix}chill-spin 12s linear infinite reverse;
-    }
-  }
-
-  &__header {
-    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
-    position: relative;
-
-    // Subtle wave effect
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations(
-        'stoned-drift',
-        $duration: 8s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-
-  &__close {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-
-    &:hover {
-      @include animations(
-        'psychedelic-pulse',
-        $duration: 1.5s,
-        $timing: ease-in-out,
-        $iteration-count: 3
-      );
-      filter: brightness(1.3) saturate(1.4) hue-rotate(30deg);
-      transform: scale(1.1) rotate(5deg);
-    }
-
-    &:focus-visible {
-      @include focus-ring(var(--#{config.$prefix}primary-5));
-      @include animations('trippy-wave', $duration: 1s, $timing: ease-in-out, $iteration-count: 2);
-    }
-
-    &:active {
-      transform: scale(0.95) rotate(-5deg);
-    }
-  }
-}
-
-// Accessibility and reduced motion support
-@media (prefers-reduced-motion: reduce) {
-  .c-modal {
-    &__backdrop {
-      animation: none !important;
-    }
-
-    &__content {
-      animation: none !important;
-      transform: none !important;
-
-      &::before {
-        animation: none !important;
-      }
-    }
-
-    &__header {
-      animation: none !important;
-    }
-
-    &__close:hover {
-      animation: none !important;
-      transform: none !important;
-    }
-  }
-}

package/src/themes/esrar/06-components/_components.notification.scss

@@ -1,80 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-notification {
-  @include animations('slow-fade-in', $duration: 0.3s, $timing: ease-in-out, $iteration-count: 1);
-
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -10px;
-    left: -10px;
-    right: -10px;
-    bottom: -10px;
-    background: conic-gradient(
-      var(--#{config.$prefix}primary-1),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-5),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-1)
-    );
-    animation: #{config.$prefix}chill-spin 8s linear infinite reverse;
-    opacity: 0.05;
-    z-index: -1;
-  }
-
-  &__content {
-    @include animations(
-      'pulse-slow',
-      $duration: 3s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &__title {
-    @include animations('float', $duration: 2s, $timing: ease-in-out, $iteration-count: infinite);
-  }
-
-  &__close {
-    &:hover {
-      @include animations(
-        'chill-rainbow' 'wobble-chill',
-        $duration: 0.5s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-
-  &--success {
-    @include animations(
-      'color-wave',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &--warning {
-    @include animations(
-      'pulse-slow',
-      $duration: 1s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &--error {
-    @include animations(
-      'chill-rainbow',
-      $duration: 1s,
-      $timing: linear,
-      $iteration-count: infinite
-    );
-  }
-}

package/src/themes/esrar/06-components/_components.pagination.scss

@@ -1,84 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-pagination {
-  @include animations(
-    'pulse-slow',
-    $duration: 3s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: conic-gradient(
-      var(--#{config.$prefix}primary-1),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-5),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-1)
-    );
-    animation: #{config.$prefix}chill-spin 10s linear infinite reverse;
-    opacity: 0.03;
-    z-index: -1;
-  }
-
-  &__list {
-    @include animations('float', $duration: 2s, $timing: ease-in-out, $iteration-count: infinite);
-  }
-
-  &__item {
-    &:hover {
-      @include animations(
-        'chill-rainbow',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-
-  &__link {
-    @include animations(
-      'wobble-chill',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-
-    &:hover {
-      @include animations(
-        'float' 'color-pulse',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-
-    &--active {
-      @include animations(
-        'chill-rainbow',
-        $duration: 2s,
-        $timing: linear,
-        $iteration-count: infinite
-      );
-    }
-  }
-
-  &__ellipsis {
-    @include animations(
-      'pulse-slow',
-      $duration: 1s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}

package/src/themes/esrar/06-components/_components.popover.scss

@@ -1,10 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-popover {
-  @include animations('slow-zoom-in', $duration: 0.3s, $timing: ease-out, $iteration-count: 1);
-}
-
-.c-popover__content {
-  @include animations('slow-fade-in', $duration: 0.3s, $timing: ease-out, $iteration-count: 1);
-}

package/src/themes/esrar/06-components/_components.progress.scss

@@ -1,64 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-progress {
-  @include animations(
-    'pulse-slow',
-    $duration: 2s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -10px;
-    left: -10px;
-    right: -10px;
-    bottom: -10px;
-    background: conic-gradient(
-      var(--#{config.$prefix}primary-1),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-5),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-1)
-    );
-    animation: #{config.$prefix}chill-spin 10s linear infinite reverse;
-    opacity: 0.05;
-    z-index: -1;
-  }
-
-  &__bar {
-    @include animations(
-      'chill-rainbow',
-      $duration: 3s,
-      $timing: linear,
-      $iteration-count: infinite
-    );
-
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: conic-gradient(
-        var(--#{config.$prefix}primary-3),
-        var(--#{config.$prefix}primary-5),
-        var(--#{config.$prefix}primary-7),
-        var(--#{config.$prefix}primary-5),
-        var(--#{config.$prefix}primary-3)
-      );
-      animation: #{config.$prefix}chill-spin 5s linear infinite;
-      opacity: 0.2;
-      z-index: -1;
-    }
-  }
-}

package/src/themes/esrar/06-components/_components.rating.scss

@@ -1,26 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-rating {
-  @include animations('slow-fade-in', $duration: 0.6s, $timing: ease-out, $iteration-count: 1);
-
-  &__item {
-    &:hover {
-      @include animations(
-        'chill-spin',
-        $duration: 0.8s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-
-    &.is-active {
-      @include animations(
-        'pulse-slow',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-}

package/src/themes/esrar/06-components/_components.skeleton.scss

@@ -1,15 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-skeleton {
-  @include animations(
-    'pulse-slow',
-    $duration: 1.5s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-}
-
-.c-skeleton--wave {
-  @include animations('color-wave', $duration: 3s, $timing: linear, $iteration-count: infinite);
-}

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

@@ -1,90 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-slider {
-  @include animations(
-    'pulse-slow',
-    $duration: 3s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: -100%;
-
-    background: conic-gradient(
-      var(--#{config.$prefix}primary-1),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-5),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-1)
-    );
-    animation: #{config.$prefix}chill-spin 12s linear infinite reverse;
-    opacity: 0.03;
-    z-index: -1;
-  }
-
-  &__track {
-    @include animations('float', $duration: 4s, $timing: ease-in-out, $iteration-count: infinite);
-  }
-
-  &__fill {
-    @include animations(
-      'chill-rainbow',
-      $duration: 3s,
-      $timing: linear,
-      $iteration-count: infinite
-    );
-
-    position: relative;
-    overflow: hidden;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: -5px;
-      left: -5px;
-      right: -5px;
-      bottom: -5px;
-      background: conic-gradient(
-        var(--#{config.$prefix}primary-1),
-        var(--#{config.$prefix}primary-3),
-        var(--#{config.$prefix}primary-5),
-        var(--#{config.$prefix}primary-7),
-        var(--#{config.$prefix}primary-5),
-        var(--#{config.$prefix}primary-3),
-        var(--#{config.$prefix}primary-1)
-      );
-      animation: #{config.$prefix}chill-spin 6s linear infinite reverse;
-      opacity: 0.1;
-      z-index: -1;
-    }
-  }
-
-  &__thumb {
-    @include animations('float', $duration: 2s, $timing: ease-in-out, $iteration-count: infinite);
-
-    &:hover {
-      @include animations(
-        'chill-rainbow' 'pulse-slow',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-
-    &:active {
-      @include animations(
-        'color-wave',
-        $duration: 0.5s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-}