@shohojdhara/atomix 0.3.1 → 0.3.3

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

@@ -0,0 +1,71 @@
+@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-spinner {
+  @include animations('chill-spin', $duration: 1.2s, $timing: linear, $iteration-count: infinite);
+
+  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)
+  );
+  border: none;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    right: 10%;
+    bottom: 10%;
+    background: var(--#{config.$prefix}black);
+    border-radius: 50%;
+  }
+}
+
+.c-spinner--pulse {
+  @include animations(
+    'pulse-slow',
+    $duration: 1.5s,
+    $timing: ease-in-out,
+    $iteration-count: infinite
+  );
+
+  background: var(--#{config.$prefix}primary-5);
+}
+
+.c-spinner--growing {
+  @include animations('chill-spin', $duration: 0.8s, $timing: linear, $iteration-count: infinite);
+
+  background: linear-gradient(
+    45deg,
+    var(--#{config.$prefix}primary-3),
+    var(--#{config.$prefix}primary-5),
+    var(--#{config.$prefix}primary-7)
+  );
+}
+
+// Reduced motion support - spinner still needs to indicate loading
+@media (prefers-reduced-motion: reduce) {
+  .c-spinner {
+    animation-duration: 2s; // Slower, less jarring
+  }
+
+  .c-spinner--pulse {
+    @include animations(
+      'pulse-slow',
+      $duration: 2s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+  }
+
+  .c-spinner--growing {
+    animation-duration: 1.5s; // Slower spin
+  }
+}

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

@@ -0,0 +1,76 @@
+@use '../../../styles/02-tools/tools.animations' as *;
+@use '../02-tools/tools.animations' as *;
+@use '../../../styles/01-settings/settings.config' as config;
+
+.c-steps {
+  @include animations(
+    'pulse-slow',
+    $duration: 4s,
+    $timing: ease-in-out,
+    $iteration-count: infinite
+  );
+
+  position: relative;
+
+  &__item {
+    @include animations('float', $duration: 3s, $timing: ease-in-out, $iteration-count: infinite);
+
+    &:hover {
+      @include animations(
+        'color-pulse',
+        $duration: 1s,
+        $timing: ease-in-out,
+        $iteration-count: infinite
+      );
+    }
+
+    &--active {
+      @include animations(
+        'chill-rainbow',
+        $duration: 2s,
+        $timing: linear,
+        $iteration-count: infinite
+      );
+    }
+
+    &--completed {
+      @include animations(
+        'color-wave',
+        $duration: 3s,
+        $timing: ease-in-out,
+        $iteration-count: infinite
+      );
+    }
+  }
+
+  &__indicator {
+    @include animations(
+      'pulse-slow',
+      $duration: 2s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+
+    &:hover {
+      @include animations(
+        'chill-rainbow',
+        $duration: 1s,
+        $timing: linear,
+        $iteration-count: infinite
+      );
+    }
+  }
+
+  &__title {
+    @include animations('float', $duration: 2s, $timing: ease-in-out, $iteration-count: infinite);
+  }
+
+  &__description {
+    @include animations(
+      'pulse-slow',
+      $duration: 3s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+  }
+}

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

@@ -0,0 +1,58 @@
+@use '../../../styles/02-tools/tools.animations' as *;
+@use '../02-tools/tools.animations' as *;
+@use '../../../styles/01-settings/settings.config' as config;
+
+.c-tab {
+  &__nav {
+    @include animations(
+      'pulse-slow',
+      $duration: 3s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+  }
+
+  &__link {
+    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-rainbow 6s linear infinite reverse;
+      opacity: 0.05;
+      z-index: -1;
+    }
+
+    &:hover {
+      @include animations('float', $duration: 1s, $timing: ease-in-out, $iteration-count: infinite);
+    }
+
+    &--active {
+      @include animations(
+        'color-wave',
+        $duration: 2s,
+        $timing: ease-in-out,
+        $iteration-count: infinite
+      );
+
+      &::before {
+        animation: #{config.$prefix}chill-spin 3s linear infinite;
+        opacity: 0.1;
+      }
+    }
+  }
+
+  &__content {
+    @include animations('slow-fade-in', $duration: 0.5s, $timing: ease-in-out, $iteration-count: 1);
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+@use '../../../styles/02-tools/tools.animations' as *;
+@use '../02-tools/tools.animations' as *;
+
+.c-timeline {
+  @include animations('slow-fade-in', $duration: 0.8s, $timing: ease-out, $iteration-count: 1);
+}
+
+.c-timeline__item {
+  @include animations('slow-fade-in-up', $duration: 0.5s, $timing: ease-out, $iteration-count: 1);
+
+  &:hover {
+    @include animations(
+      'color-pulse',
+      $duration: 2s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+  }
+}

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

@@ -0,0 +1,91 @@
+@use '../../../styles/02-tools/tools.animations' as *;
+@use '../02-tools/tools.animations' as *;
+@use '../../../styles/01-settings/settings.config' as config;
+
+.c-toast {
+  @include animations('slow-fade-in', $duration: 0.3s, $timing: ease-in-out, $iteration-count: 1);
+
+  position: relative;
+  overflow: hidden;
+
+  &::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-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
+    );
+  }
+
+  &--info {
+    @include animations(
+      'color-pulse',
+      $duration: 2s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+  }
+}

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

@@ -0,0 +1,74 @@
+@use '../../../styles/02-tools/tools.animations' as *;
+@use '../02-tools/tools.animations' as *;
+@use '../../../styles/01-settings/settings.config' as config;
+
+.c-toggle {
+  @include animations(
+    'float' 'color-pulse',
+    $duration: 4s,
+    $timing: ease-in-out,
+    $iteration-count: infinite
+  );
+
+  &:checked {
+    @include animations(
+      'color-pulse' 'chill-rainbow',
+      $duration: 1s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+  }
+
+  &__switch {
+    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),
+      var(--#{config.$prefix}primary-1)
+    );
+    animation: #{config.$prefix}chill-rainbow 10s linear infinite reverse;
+  }
+
+  &:hover &__switch {
+    animation:
+      #{config.$prefix}chill-rainbow 2s linear infinite,
+      #{config.$prefix}pulse-slow 1s ease-in-out infinite;
+  }
+
+  &:checked &__switch {
+    animation:
+      #{config.$prefix}chill-rainbow 1s linear infinite,
+      #{config.$prefix}color-wave 2s ease-in-out infinite;
+  }
+}
+
+.c-toggle--hypnotic {
+  @include animations(
+    'color-wave',
+    $duration: 3s,
+    $timing: ease-in-out,
+    $iteration-count: infinite
+  );
+
+  .c-toggle__switch {
+    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)
+    );
+    background-size: 200% 200%;
+    animation: #{config.$prefix}chill-rainbow 3s linear infinite;
+  }
+
+  &:checked .c-toggle__switch {
+    animation:
+      #{config.$prefix}chill-rainbow 1s linear infinite,
+      #{config.$prefix}color-wave 2s ease-in-out infinite;
+  }
+}

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

@@ -0,0 +1,45 @@
+@use '../../../styles/02-tools/tools.animations' as *;
+@use '../02-tools/tools.animations' as *;
+@use '../../../styles/01-settings/settings.config' as config;
+
+.c-tooltip {
+  @include animations('float', $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-3),
+      var(--#{config.$prefix}primary-1)
+    );
+    animation: #{config.$prefix}chill-spin 8s linear infinite reverse;
+    opacity: 0.05;
+    z-index: -1;
+  }
+
+  &__inner {
+    @include animations('slow-fade-in', $duration: 0.2s, $timing: ease-in-out, $iteration-count: 1);
+  }
+
+  &:hover {
+    @include animations(
+      'color-pulse',
+      $duration: 1s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+
+    &::before {
+      animation: #{config.$prefix}chill-rainbow 3s linear infinite;
+      opacity: 0.1;
+    }
+  }
+}

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

@@ -0,0 +1,102 @@
+@use '../../../styles/02-tools/tools.animations' as *;
+@use '../02-tools/tools.animations' as *;
+@use '../../../styles/01-settings/settings.config' as config;
+
+.c-upload {
+  @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;
+  }
+
+  &__area {
+    @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
+      );
+
+      &::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-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;
+      }
+    }
+  }
+
+  &__icon {
+    @include animations(
+      'chill-rainbow',
+      $duration: 3s,
+      $timing: linear,
+      $iteration-count: infinite
+    );
+  }
+
+  &__text {
+    @include animations(
+      'pulse-slow',
+      $duration: 2s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+  }
+
+  &__button {
+    @include animations(
+      'wobble-chill',
+      $duration: 2s,
+      $timing: ease-in-out,
+      $iteration-count: infinite
+    );
+
+    &:hover {
+      @include animations(
+        'float' 'chill-rainbow',
+        $duration: 1s,
+        $timing: ease-in-out,
+        $iteration-count: infinite
+      );
+    }
+  }
+}

package/src/themes/esrar/06-components/_index.scss

@@ -0,0 +1,42 @@
+@forward 'components.button';
+@forward 'components.badge';
+@forward 'components.card';
+@forward 'components.avatar';
+@forward 'components.callout';
+@forward 'components.chart';
+@forward 'components.countdown';
+@forward 'components.accordion';
+@forward 'components.breadcrumb';
+@forward 'components.dropdown';
+@forward 'components.form';
+@forward 'components.input';
+@forward 'components.toggle';
+@forward 'components.tab';
+@forward 'components.tooltip';
+@forward 'components.modal';
+@forward 'components.progress';
+@forward 'components.spinner';
+@forward 'components.checkbox';
+@forward 'components.color-mode-toggle';
+@forward 'components.data-table';
+@forward 'components.datepicker';
+@forward 'components.edge-panel';
+@forward 'components.hero';
+@forward 'components.icon';
+@forward 'components.image-gallery';
+@forward 'components.list-group';
+@forward 'components.pagination';
+@forward 'components.popover';
+@forward 'components.slider';
+@forward 'components.steps';
+@forward 'components.btn-group';
+@forward 'components.avatar-group';
+@forward 'components.checkbox-group';
+@forward 'components.form-group';
+@forward 'components.notification';
+@forward 'components.rating';
+@forward 'components.toast';
+@forward 'components.timeline';
+@forward 'components.skeleton';
+@forward 'components.tag';
+@forward 'components.upload';

package/src/themes/esrar/index.scss

@@ -0,0 +1,30 @@
+/*!
+ * Atomix Design System theme Weed
+ * Happy, strong green theme inspired by weed colors
+ */
+
+// Import and forward local theme settings first (these override base settings)
+@use '01-settings/index' as *;
+
+// Import and forward base styles with local overrides
+@use '02-tools/index' as *;
+@use '../../styles/02-tools/index' as tools;
+
+// Intentionally using base generic styles
+// @use '03-generic/index' as *;
+@use '../../styles/03-generic/index' as generic;
+
+// Intentionally using base elements styles
+// @use '04-elements/index' as *;
+@use '../../styles/04-elements/index' as elements;
+
+// Intentionally using base objects styles
+// @use '05-objects/index' as *;
+@use '../../styles/05-objects/index' as objects;
+
+@use '06-components/index' as *;
+@use '../../styles/06-components/index' as components;
+
+// Intentionally using base utilities
+// @use '99-utilities/index' as *;
+@use '../../styles/99-utilities/index' as utilities;

package/src/themes/flashtrade/01-settings/_index.scss

@@ -0,0 +1,19 @@
+/*!
+ * Flash Trade Theme Settings Index
+ * Dark crypto trading platform settings
+ */
+
+// Modern Sass module system with namespaced imports
+@use 'settings.config' as config;
+@use 'settings.colors' as colors;
+@use 'settings.typography' as typography;
+@use 'settings.animations' as anim;
+@use 'settings.background' as bg;
+
+// Export all modules for backward compatibility
+@forward 'settings.config';
+@forward 'settings.colors';
+@forward 'settings.typography';
+@forward 'settings.animations';
+@forward 'settings.background';
+

package/src/themes/flashtrade/01-settings/_settings.animations.scss

@@ -0,0 +1,11 @@
+/*!
+ * Flash Trade Theme Animations
+ * Smooth, fast animations optimized for trading platform responsiveness
+ */
+
+@use '../../../styles/01-settings/settings.animations' with (
+  $transition-base: 0.15s ease-in-out,
+  $transition-fast: 0.1s ease-in-out,
+  $transition-slow: 0.3s ease-in-out
+);
+

package/src/themes/flashtrade/01-settings/_settings.background.scss

@@ -0,0 +1,9 @@
+/*!
+ * Flash Trade Theme Background
+ * Dark background settings for trading platform
+ */
+
+@use '../../../styles/01-settings/settings.background' with ($background-enable-gradient-overlay: true,
+  $background-transparency-enable: true,
+  $background-enable-with-shadow: true,
+  $background-transparency: 0.8);