@shohojdhara/atomix 0.3.1 → 0.3.3

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

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

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

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

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

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

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

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

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

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

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

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