@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/themes/esrar/06-components/_components.data-table.scss

@@ -1,22 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-data-table {
-  @include animations(
-    'slow-fade-in-up' 'color-wave',
-    $duration: 2s,
-    $timing: ease-out,
-    $iteration-count: infinite
-  );
-}
-
-.c-data-table__row {
-  &:hover {
-    @include animations(
-      'color-pulse' 'float',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}

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

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

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

@@ -1,272 +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-dropdown {
-  &__toggle {
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-    // Subtle breathing effect
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations(
-        'hypnotic-breathe',
-        $duration: 5s,
-        $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 12s linear infinite reverse;
-      opacity: 0.03;
-      z-index: -1;
-      border-radius: inherit;
-    }
-
-    &:hover {
-      @include animations(
-        'psychedelic-pulse',
-        $duration: 2s,
-        $timing: ease-in-out,
-        $iteration-count: 3
-      );
-      filter: saturate(1.3) brightness(1.1) hue-rotate(15deg);
-      transform: translateY(-1px) scale(1.02);
-
-      &::before {
-        animation: #{config.$prefix}chill-rainbow 4s linear infinite;
-        opacity: 0.08;
-      }
-    }
-
-    &:focus {
-      @include focus-ring(var(--#{config.$prefix}primary-5));
-      @include animations(
-        'trippy-wave',
-        $duration: 1.5s,
-        $timing: ease-in-out,
-        $iteration-count: 2
-      );
-      box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
-    }
-
-    &--active {
-      @include animations(
-        'stoned-drift',
-        $duration: 3s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-      filter: saturate(1.2) brightness(1.05);
-    }
-  }
-
-  &__menu {
-    @include animations('slow-zoom-in', $duration: 0.4s, $timing: ease-out, $iteration-count: 1);
-
-    position: relative;
-    overflow: hidden;
-    border: 1px solid rgba(16, 185, 129, 0.2);
-    box-shadow:
-      0 10px 30px rgba(16, 185, 129, 0.15),
-      0 0 20px rgba(16, 185, 129, 0.1);
-
-    // Subtle background animation
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations(
-        'hypnotic-breathe',
-        $duration: 8s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      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.02;
-      z-index: -1;
-      border-radius: inherit;
-    }
-  }
-
-  &__item {
-    position: relative;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-    // Subtle drift effect
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations(
-        'stoned-drift',
-        $duration: 6s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-
-    &:hover {
-      @include animations('melt', $duration: 2s, $timing: ease-in-out, $iteration-count: 2);
-      filter: saturate(1.4) brightness(1.1) hue-rotate(20deg);
-      transform: translateX(3px) scale(1.01);
-
-      position: relative;
-      overflow: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);
-        animation: #{config.$prefix}chill-rainbow 1.5s linear infinite;
-        z-index: -1;
-      }
-    }
-
-    &:focus-visible {
-      @include focus-ring(var(--#{config.$prefix}primary-5));
-      @include animations('trippy-wave', $duration: 1s, $timing: ease-in-out, $iteration-count: 1);
-    }
-
-    &--active {
-      background: rgba(16, 185, 129, 0.1);
-      filter: saturate(1.2) brightness(1.05);
-
-      @media (prefers-reduced-motion: no-preference) {
-        @include animations(
-          'psychedelic-pulse',
-          $duration: 3s,
-          $timing: ease-in-out,
-          $iteration-count: infinite
-        );
-      }
-    }
-  }
-}
-
-// Special trippy dropdown variant
-.c-dropdown--trippy {
-  .c-dropdown__toggle {
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations(
-        'chill-rainbow',
-        $duration: 8s,
-        $timing: linear,
-        $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-5),
-        var(--#{config.$prefix}primary-3),
-        var(--#{config.$prefix}primary-1)
-      );
-      opacity: 0.06;
-      animation: #{config.$prefix}chill-rainbow 6s linear infinite;
-    }
-  }
-
-  .c-dropdown__menu {
-    &::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.05;
-      animation: #{config.$prefix}chill-rainbow 10s linear infinite;
-    }
-  }
-}
-
-// Reduced motion support
-@media (prefers-reduced-motion: reduce) {
-  .c-dropdown {
-    &__toggle {
-      &,
-      &:hover,
-      &:focus {
-        animation: none !important;
-        transform: none !important;
-      }
-
-      &::before {
-        animation: none !important;
-      }
-    }
-
-    &__menu {
-      animation: none !important;
-      transform: none !important;
-
-      &::before {
-        animation: none !important;
-      }
-    }
-
-    &__item {
-      &,
-      &:hover {
-        animation: none !important;
-        transform: none !important;
-      }
-
-      &::before {
-        animation: none !important;
-      }
-    }
-  }
-
-  .c-dropdown--trippy {
-    .c-dropdown__toggle {
-      animation: none !important;
-
-      &::before {
-        animation: none !important;
-      }
-    }
-
-    .c-dropdown__menu::before {
-      animation: none !important;
-    }
-  }
-}

package/src/themes/esrar/06-components/_components.edge-panel.scss

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

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

@@ -1,15 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-form-group {
-  @include animations('slow-fade-in', $duration: 0.5s, $timing: ease-out, $iteration-count: 1);
-
-  &:focus-within {
-    @include animations(
-      'color-wave',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}

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

@@ -1,66 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-form {
-  @include animations(
-    'pulse-slow',
-    $duration: 4s,
-    $timing: ease-in-out,
-    $iteration-count: infinite
-  );
-
-  position: relative;
-
-  &::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 12s linear infinite reverse;
-    opacity: 0.03;
-    z-index: -1;
-  }
-
-  &__group {
-    @include animations('float', $duration: 3s, $timing: ease-in-out, $iteration-count: infinite);
-
-    &:hover {
-      @include animations(
-        'color-pulse',
-        $duration: 2s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-  }
-
-  &__label {
-    @include animations(
-      'pulse-slow',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &__control {
-    &:focus {
-      @include animations(
-        'chill-rainbow',
-        $duration: 1s,
-        $timing: linear,
-        $iteration-count: infinite
-      );
-    }
-  }
-}

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

@@ -1,251 +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-hero {
-  position: relative;
-  overflow: hidden;
-
-  // Subtle breathing effect for the whole hero
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'hypnotic-breathe',
-      $duration: 10s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  // Multi-layered psychedelic background
-  &::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background:
-      radial-gradient(ellipse at 20% 30%, rgba(16, 185, 129, 0.15) 0%, transparent 40%),
-      radial-gradient(ellipse at 80% 70%, rgba(16, 185, 129, 0.12) 0%, transparent 40%),
-      radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
-      conic-gradient(
-        from 0deg at 30% 70%,
-        rgba(16, 185, 129, 0.1),
-        transparent,
-        rgba(16, 185, 129, 0.05),
-        transparent,
-        rgba(16, 185, 129, 0.1)
-      );
-    animation:
-      #{config.$prefix}chill-spin 25s linear infinite,
-      #{config.$prefix}color-wave 8s ease-in-out infinite;
-    opacity: 0.6;
-    z-index: -2;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: -30%;
-    left: -30%;
-    width: 160%;
-    height: 160%;
-    background: conic-gradient(
-      from 45deg at 50% 50%,
-      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-rainbow 20s linear infinite reverse;
-    opacity: 0.08;
-    z-index: -1;
-  }
-
-  &__title {
-    position: relative;
-
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations(
-        'stoned-drift',
-        $duration: 6s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-    }
-
-    // Add text glow effect
-    text-shadow:
-      0 0 10px rgba(16, 185, 129, 0.3),
-      0 0 20px rgba(16, 185, 129, 0.2),
-      0 0 30px rgba(16, 185, 129, 0.1);
-
-    &:hover {
-      @include animations(
-        'psychedelic-pulse',
-        $duration: 2s,
-        $timing: ease-in-out,
-        $iteration-count: 3
-      );
-      filter: saturate(1.3) brightness(1.1);
-    }
-  }
-
-  &__subtitle {
-    position: relative;
-
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations('float', $duration: 4s, $timing: ease-in-out, $iteration-count: infinite);
-    }
-
-    // Subtle text glow
-    text-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
-
-    &:hover {
-      @include animations(
-        'trippy-wave',
-        $duration: 1.5s,
-        $timing: ease-in-out,
-        $iteration-count: 2
-      );
-      filter: hue-rotate(20deg) saturate(1.2);
-    }
-  }
-
-  &__actions {
-    position: relative;
-
-    @media (prefers-reduced-motion: no-preference) {
-      @include animations('melt', $duration: 8s, $timing: ease-in-out, $iteration-count: infinite);
-    }
-
-    // Add subtle background glow
-    &::before {
-      content: '';
-      position: absolute;
-      top: -10px;
-      left: -10px;
-      right: -10px;
-      bottom: -10px;
-      background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
-      opacity: 0;
-      transition: opacity 0.3s ease;
-      z-index: -1;
-      border-radius: inherit;
-    }
-
-    &:hover::before {
-      opacity: 1;
-      animation: #{config.$prefix}pulse-slow 2s ease-in-out infinite;
-    }
-  }
-}
-
-// Special trippy hero variant
-.c-hero--trippy {
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'chill-rainbow',
-      $duration: 12s,
-      $timing: linear,
-      $iteration-count: infinite
-    );
-  }
-
-  &::before {
-    background:
-      radial-gradient(ellipse at 25% 25%, rgba(16, 185, 129, 0.2) 0%, transparent 30%),
-      radial-gradient(ellipse at 75% 75%, rgba(16, 185, 129, 0.18) 0%, transparent 30%),
-      radial-gradient(ellipse at 50% 10%, rgba(16, 185, 129, 0.15) 0%, transparent 40%),
-      radial-gradient(ellipse at 10% 90%, rgba(16, 185, 129, 0.12) 0%, transparent 40%),
-      conic-gradient(
-        from 90deg at 50% 50%,
-        rgba(16, 185, 129, 0.15),
-        rgba(16, 185, 129, 0.05),
-        rgba(16, 185, 129, 0.2),
-        rgba(16, 185, 129, 0.05),
-        rgba(16, 185, 129, 0.15)
-      );
-    animation:
-      #{config.$prefix}chill-rainbow 15s linear infinite,
-      #{config.$prefix}psychedelic-pulse 6s ease-in-out infinite;
-    opacity: 0.8;
-  }
-
-  &::after {
-    background: conic-gradient(
-      from 0deg at 50% 50%,
-      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)
-    );
-    animation: #{config.$prefix}chill-spin 10s linear infinite;
-    opacity: 0.12;
-  }
-
-  .c-hero__title {
-    @include animations(
-      'trippy-wave',
-      $duration: 3s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-    filter: saturate(1.5) contrast(1.1);
-  }
-
-  .c-hero__subtitle {
-    @include animations(
-      'psychedelic-pulse',
-      $duration: 4s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-}
-
-// Reduced motion support
-@media (prefers-reduced-motion: reduce) {
-  .c-hero {
-    &,
-    &__title,
-    &__subtitle,
-    &__actions {
-      animation: none !important;
-      transform: none !important;
-    }
-
-    &::before,
-    &::after {
-      animation: none !important;
-    }
-
-    &__actions::before {
-      animation: none !important;
-    }
-  }
-
-  .c-hero--trippy {
-    animation: none !important;
-
-    &::before,
-    &::after {
-      animation: none !important;
-    }
-
-    .c-hero__title,
-    .c-hero__subtitle {
-      animation: none !important;
-      transform: none !important;
-    }
-  }
-}

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

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