@shohojdhara/atomix 0.3.2 → 0.3.3

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

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

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

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

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

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

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

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

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