@shohojdhara/atomix 0.3.3 → 0.3.5

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

@@ -1,65 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-breadcrumb {
-  @include animations(
-    'pulse-slow',
-    $duration: 3s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-
-  position: relative;
-  overflow: hidden;
-
-  &::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 10s linear infinite reverse;
-    opacity: 0.05;
-    z-index: -1;
-  }
-
-  &__item {
-    @include animations('float', $duration: 2s, $timing: ease-in-out, $iteration-count: infinite);
-
-    &:hover {
-      @include animations(
-        'color-pulse',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-
-  &__link {
-    &:hover {
-      @include animations(
-        'chill-rainbow',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-
-  &__separator {
-    @include animations(
-      'pulse-slow',
-      $duration: 1.5s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}

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

@@ -1,19 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-btn-group {
-  @include animations('slow-fade-in', $duration: 0.5s, $timing: ease-out, $iteration-count: 1);
-
-  .c-btn {
-    @include animations('float', $duration: 3s, $timing: ease-in-out, $iteration-count: infinite);
-
-    &:hover {
-      @include animations(
-        'wobble-chill',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-}

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

@@ -1,224 +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-btn {
-  // Enhance base interactions with hypnotic effects
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-
-  // Subtle base breathing effect
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'hypnotic-breathe',
-      $duration: 4s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &:hover {
-    @include animations(
-      'psychedelic-pulse',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: 3
-    );
-    filter: brightness(1.2) saturate(1.3) contrast(1.1);
-    transform: translateY(-2px);
-  }
-
-  &:focus-visible {
-    @include focus-ring(var(--#{config.$prefix}primary-5));
-    @include animations('trippy-wave', $duration: 1.5s, $timing: ease-in-out, $iteration-count: 2);
-  }
-
-  &:active {
-    transform: translateY(0) scale(0.98);
-    transition: transform 0.1s ease-in-out;
-  }
-}
-
-.c-btn--psychedelic {
-  position: relative;
-  overflow: hidden;
-
-  // Constant trippy effect for psychedelic variant
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'stoned-drift',
-      $duration: 6s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &:hover {
-    @include animations(
-      'chill-rainbow',
-      $duration: 1.5s,
-      $timing: linear,
-      $iteration-count: infinite
-    );
-    filter: saturate(2) contrast(1.3) brightness(1.3);
-  }
-
-  &::before {
-    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-9),
-      var(--#{config.$prefix}primary-7),
-      var(--#{config.$prefix}primary-5),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-1)
-    );
-    opacity: 0.15;
-    z-index: -1;
-    border-radius: inherit;
-    animation: #{config.$prefix}chill-spin 8s linear infinite reverse;
-  }
-
-  &:hover::before {
-    animation: #{config.$prefix}chill-spin 1s linear infinite;
-    opacity: 0.4;
-    filter: blur(1px);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background: radial-gradient(
-      circle,
-      rgba(16, 185, 129, 0.3) 0%,
-      rgba(16, 185, 129, 0.1) 50%,
-      transparent 100%
-    );
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: all 0.6s ease-out;
-    z-index: -1;
-  }
-
-  &:hover::after {
-    width: 200%;
-    height: 200%;
-    animation: #{config.$prefix}psychedelic-pulse 1s ease-in-out infinite;
-  }
-}
-
-.c-btn--glow {
-  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
-  position: relative;
-
-  // Pulsing glow effect
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'green-glow',
-      $duration: 3s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &:hover {
-    @include animations(
-      'psychedelic-pulse',
-      $duration: 1.5s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-    box-shadow:
-      0 0 25px rgba(16, 185, 129, 0.7),
-      0 0 50px rgba(16, 185, 129, 0.4),
-      inset 0 0 15px rgba(16, 185, 129, 0.2);
-    filter: saturate(1.5) brightness(1.2);
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    right: -3px;
-    bottom: -3px;
-    background: linear-gradient(
-      45deg,
-      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)
-    );
-    opacity: 0.1;
-    z-index: -1;
-    border-radius: inherit;
-    filter: blur(2px);
-    animation: #{config.$prefix}chill-rainbow 4s linear infinite;
-  }
-}
-
-.c-btn--floating {
-  // Constant floating with drift
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations('float', $duration: 3s, $timing: ease-in-out, $iteration-count: infinite);
-  }
-
-  &:hover {
-    @include animations(
-      'stoned-drift',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-    filter: hue-rotate(30deg) saturate(1.3);
-    transform: translateY(-5px) scale(1.02);
-  }
-}
-
-// Accessibility improvements
-@media (prefers-reduced-motion: reduce) {
-  .c-btn {
-    &,
-    &:hover,
-    &:focus {
-      animation: none !important;
-      transform: none !important;
-    }
-
-    &::before,
-    &::after {
-      animation: none !important;
-    }
-  }
-
-  .c-btn--psychedelic,
-  .c-btn--glow,
-  .c-btn--floating {
-    &,
-    &:hover,
-    &:focus {
-      animation: none !important;
-      transform: none !important;
-    }
-
-    &::before,
-    &::after {
-      animation: none !important;
-    }
-  }
-}

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

@@ -1,51 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-callout {
-  @include animations(
-    'color-pulse',
-    $duration: 4s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -20px;
-    left: -20px;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(
-      circle at center,
-      var(--#{config.$prefix}primary-5) 0%,
-      var(--#{config.$prefix}primary-3) 30%,
-      var(--#{config.$prefix}primary-1) 60%,
-      transparent 100%
-    );
-    animation:
-      #{config.$prefix}chill-spin 15s linear infinite,
-      #{config.$prefix}pulse-slow 3s ease-in-out infinite;
-    opacity: 0.1;
-    z-index: -1;
-  }
-
-  &:hover {
-    @include animations(
-      'float' 'chill-rainbow',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-
-    &::before {
-      animation:
-        #{config.$prefix}chill-spin 5s linear infinite reverse,
-        #{config.$prefix}pulse-slow 1s ease-in-out infinite;
-    }
-  }
-}

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

@@ -1,134 +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-card {
-  position: relative;
-  overflow: hidden;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-
-  // Subtle breathing effect
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'hypnotic-breathe',
-      $duration: 8s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &::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 15s linear infinite reverse;
-    opacity: 0.03;
-    z-index: -1;
-    border-radius: inherit;
-  }
-
-  &:hover {
-    @include animations('melt', $duration: 3s, $timing: ease-in-out, $iteration-count: 2);
-    filter: saturate(1.3) brightness(1.05) hue-rotate(20deg);
-    transform: translateY(-3px) scale(1.01);
-    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
-
-    &::before {
-      animation: #{config.$prefix}chill-rainbow 3s linear infinite;
-      opacity: 0.08;
-    }
-  }
-
-  // Add ripple effect on click
-  &:active {
-    transform: translateY(-1px) scale(0.99);
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-      animation: #{config.$prefix}psychedelic-pulse 0.6s ease-out;
-      pointer-events: none;
-    }
-  }
-}
-
-// Special trippy card variant
-.c-card--trippy {
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'stoned-drift',
-      $duration: 5s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &::before {
-    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-9),
-      var(--#{config.$prefix}primary-7),
-      var(--#{config.$prefix}primary-5),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-1)
-    );
-    opacity: 0.06;
-    animation: #{config.$prefix}chill-rainbow 8s linear infinite;
-  }
-
-  &:hover {
-    @include animations(
-      'trippy-wave',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-    filter: saturate(2) contrast(1.2) brightness(1.2) hue-rotate(45deg);
-  }
-}
-
-// Reduced motion support
-@media (prefers-reduced-motion: reduce) {
-  .c-card {
-    &,
-    &:hover {
-      animation: none !important;
-      transform: none !important;
-    }
-
-    &::before,
-    &::after {
-      animation: none !important;
-    }
-  }
-
-  .c-card--trippy {
-    &,
-    &:hover {
-      animation: none !important;
-      transform: none !important;
-    }
-
-    &::before {
-      animation: none !important;
-    }
-  }
-}

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

@@ -1,24 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-chart {
-  @include animations('slow-zoom-in', $duration: 1s, $timing: ease-out, $iteration-count: 1);
-}
-
-.c-chart--animated {
-  @include animations(
-    'color-wave' 'chill-rainbow',
-    $duration: 4s,
-    $timing: linear,
-    $iteration-count: infinite
-  );
-
-  &:hover {
-    @include animations(
-      'pulse-slow' 'chill-spin',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}

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

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

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

@@ -1,71 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-checkbox {
-  &__input {
-    &:checked + &__label::before {
-      @include animations(
-        'chill-rainbow',
-        $duration: 2s,
-        $timing: linear,
-        $iteration-count: infinite
-      );
-
-      position: relative;
-
-      &::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-3),
-          var(--#{config.$prefix}primary-1)
-        );
-        animation: #{config.$prefix}chill-spin 4s linear infinite reverse;
-        opacity: 0.1;
-        z-index: -1;
-        border-radius: inherit;
-      }
-    }
-
-    &:focus + &__label::before {
-      @include animations(
-        'color-wave',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-
-  &__label {
-    @include animations(
-      'pulse-slow',
-      $duration: 3s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-
-    position: relative;
-
-    &::before {
-      @include animations('float', $duration: 2s, $timing: ease-in-out, $iteration-count: infinite);
-    }
-
-    &:hover {
-      @include animations(
-        'wobble-chill',
-        $duration: 1s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-}

package/src/themes/esrar/06-components/_components.color-mode-toggle.scss

@@ -1,29 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-color-mode-toggle {
-  @include animations(
-    'float' 'color-pulse',
-    $duration: 4s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-
-  &:hover {
-    @include animations(
-      'chill-spin' 'chill-rainbow',
-      $duration: 1.5s,
-      $timing: linear,
-      $iteration-count: infinite
-    );
-  }
-
-  &.is-active {
-    @include animations(
-      'color-wave' 'pulse-slow',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}

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

@@ -1,67 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-countdown {
-  &__item {
-    @include animations(
-      'pulse-slow',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-
-    position: relative;
-    overflow: hidden;
-
-    &::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-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;
-    }
-  }
-
-  &__value {
-    @include animations('float', $duration: 3s, $timing: ease-in-out, $iteration-count: infinite);
-  }
-
-  &__label {
-    @include animations(
-      'color-pulse',
-      $duration: 4s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &--warning {
-    @include animations(
-      'chill-rainbow',
-      $duration: 1s,
-      $timing: linear,
-      $iteration-count: infinite
-    );
-  }
-
-  &--critical {
-    @include animations(
-      'chill-rainbow' 'pulse-slow',
-      $duration: 0.5s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}