@shohojdhara/atomix 0.3.1 → 0.3.3

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

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

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

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

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

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

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

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

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

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

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