@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/themes/esrar/01-settings/_settings.colors.scss

@@ -1,91 +0,0 @@
-@use 'sass:color';
-
-@use '../../../styles/02-tools/tools.to-rgb' as *;
-@use '../../../styles/02-tools/tools.color-functions' as *;
-
-@use '../../../styles/01-settings/settings.colors' with (
-  // Basic Colors
-  $white: #ffffff,
-  $black: #000000,
-
-  // Color contrast variables
-  $color-contrast-dark: #000000,
-  $color-contrast-light: #ffffff,
-
-  // Primitives Primary Colors (Happy Green/Weed Theme)
-  $primary-1: #f0fff8,
-  $primary-2: #d1fae5,
-  $primary-3: #a7f3d0,
-  $primary-4: #6ee7b7,
-  $primary-5: #34d399,
-  $primary-6: #10b981,
-  // Emerald green primary - happy, vibrant green
-  $primary-7: #059669,
-  $primary-8: #047857,
-  $primary-9: #065f46,
-  $primary-10: #064e3b,
-
-  // Primitives Red Colors (for contrast and errors)
-  $red-1: #fef2f2,
-  $red-2: #fee2e2,
-  $red-3: #fecaca,
-  $red-4: #fca5a5,
-  $red-5: #f87171,
-  $red-6: #ef4444,
-  // Vibrant, accessible red
-  $red-7: #dc2626,
-  $red-8: #b91c1c,
-  $red-9: #991b1b,
-  $red-10: #7f1d1d,
-
-  // Primitives Green Colors (additional greens for variety)
-  $green-1: #f0fdf4,
-  $green-2: #dcfce7,
-  $green-3: #bbf7d0,
-  $green-4: #86efac,
-  $green-5: #4ade80,
-  $green-6: #22c55e,
-  // Balanced, accessible green
-  $green-7: #16a34a,
-  $green-8: #15803d,
-  $green-9: #166534,
-  $green-10: #14532d,
-
-  // Primitives Yellow Colors (for warnings and accents)
-  $yellow-1: #fffbeb,
-  $yellow-2: #fef3c7,
-  $yellow-3: #fde68a,
-  $yellow-4: #fcd34d,
-  $yellow-5: #fbbf24,
-  $yellow-6: #f59e0b,
-  // Warm, happy yellow
-  $yellow-7: #d97706,
-  $yellow-8: #b45309,
-  $yellow-9: #92400e,
-  $yellow-10: #78350f,
-
-  // Primitives Blue Colors (for info and accents)
-  $blue-1: #eff6ff,
-  $blue-2: #dbeafe,
-  $blue-3: #bfdbfe,
-  $blue-4: #93c5fd,
-  $blue-5: #60a5fa,
-  $blue-6: #3b82f6,
-  // Balanced, accessible blue
-  $blue-7: #2563eb,
-  $blue-8: #1d4ed8,
-  $blue-9: #1e40af,
-  $blue-10: #1e3a8a,
-
-  // Primitives Gray Colors (for neutral elements)
-  $gray-1: #f9fafb,
-  $gray-2: #f3f4f6,
-  $gray-3: #e5e7eb,
-  $gray-4: #d1d5db,
-  $gray-5: #9ca3af,
-  $gray-6: #6b7280,
-  $gray-7: #4b5563,
-  $gray-8: #374151,
-  $gray-9: #1f2937,
-  $gray-10: #111827
-);

package/src/themes/esrar/02-tools/_index.scss

@@ -1,8 +0,0 @@
-/*!
- * Weed Theme Tools Index
- * Happy green theme inspired by weed
- */
-
-// Import theme-specific tools that override base tools
-
-@forward 'tools.animations';

package/src/themes/esrar/02-tools/_tools.animations.scss

@@ -1,342 +0,0 @@
-@use '../../../styles/01-settings/settings.animations' as animations;
-@use 'sass:list';
-@use '../../../styles/02-tools/index' as tools;
-@use '../../../styles/01-settings/settings.config' as config;
-
-// Stoner/Lazy inspired animations
-@keyframes #{config.$prefix}slow-fade-in {
-  0% {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes #{config.$prefix}slow-fade-in-up {
-  0% {
-    opacity: 0;
-    transform: translateY(40px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes #{config.$prefix}slow-fade-in-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-40px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes #{config.$prefix}slow-zoom-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes #{config.$prefix}float {
-  0% {
-    transform: translateY(0px);
-  }
-
-  50% {
-    transform: translateY(-10px);
-  }
-
-  100% {
-    transform: translateY(0px);
-  }
-}
-
-@keyframes #{config.$prefix}pulse-slow {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.02);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes #{config.$prefix}chill-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes #{config.$prefix}wobble-chill {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  25% {
-    transform: rotate(2deg);
-  }
-
-  50% {
-    transform: rotate(0deg);
-  }
-
-  75% {
-    transform: rotate(-2deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-// Color-related animations using the theme's color palette
-@keyframes #{config.$prefix}color-pulse {
-  0% {
-    filter: hue-rotate(0deg);
-  }
-
-  50% {
-    filter: hue-rotate(10deg) saturate(1.2);
-  }
-
-  100% {
-    filter: hue-rotate(0deg);
-  }
-}
-
-@keyframes #{config.$prefix}color-wave {
-  0% {
-    filter: hue-rotate(0deg) saturate(1);
-  }
-
-  25% {
-    filter: hue-rotate(5deg) saturate(1.1);
-  }
-
-  50% {
-    filter: hue-rotate(10deg) saturate(1.2);
-  }
-
-  75% {
-    filter: hue-rotate(5deg) saturate(1.1);
-  }
-
-  100% {
-    filter: hue-rotate(0deg) saturate(1);
-  }
-}
-
-@keyframes #{config.$prefix}green-glow {
-  0% {
-    filter: brightness(1) saturate(1);
-  }
-
-  50% {
-    filter: brightness(1.1) saturate(1.2);
-  }
-
-  100% {
-    filter: brightness(1) saturate(1);
-  }
-}
-
-@keyframes #{config.$prefix}color-shift {
-  0% {
-    filter: hue-rotate(0deg);
-  }
-
-  25% {
-    filter: hue-rotate(5deg);
-  }
-
-  50% {
-    filter: hue-rotate(10deg);
-  }
-
-  75% {
-    filter: hue-rotate(5deg);
-  }
-
-  100% {
-    filter: hue-rotate(0deg);
-  }
-}
-
-@keyframes #{config.$prefix}chill-rainbow {
-  0% {
-    filter: hue-rotate(0deg) saturate(1) brightness(1);
-  }
-
-  25% {
-    filter: hue-rotate(90deg) saturate(1.3) brightness(1.1);
-  }
-
-  50% {
-    filter: hue-rotate(180deg) saturate(1.5) brightness(1.2);
-  }
-
-  75% {
-    filter: hue-rotate(270deg) saturate(1.3) brightness(1.1);
-  }
-
-  100% {
-    filter: hue-rotate(360deg) saturate(1) brightness(1);
-  }
-}
-
-// Hypnotic breathing effect
-@keyframes #{config.$prefix}hypnotic-breathe {
-  0% {
-    transform: scale(1) rotate(0deg);
-    filter: hue-rotate(0deg) saturate(1) brightness(1);
-  }
-
-  25% {
-    transform: scale(1.02) rotate(1deg);
-    filter: hue-rotate(15deg) saturate(1.1) brightness(1.05);
-  }
-
-  50% {
-    transform: scale(1.05) rotate(0deg);
-    filter: hue-rotate(30deg) saturate(1.2) brightness(1.1);
-  }
-
-  75% {
-    transform: scale(1.02) rotate(-1deg);
-    filter: hue-rotate(15deg) saturate(1.1) brightness(1.05);
-  }
-
-  100% {
-    transform: scale(1) rotate(0deg);
-    filter: hue-rotate(0deg) saturate(1) brightness(1);
-  }
-}
-
-// Trippy wave effect
-@keyframes #{config.$prefix}trippy-wave {
-  0% {
-    transform: translateY(0) skewX(0deg);
-    filter: hue-rotate(0deg);
-  }
-
-  25% {
-    transform: translateY(-3px) skewX(2deg);
-    filter: hue-rotate(90deg);
-  }
-
-  50% {
-    transform: translateY(0) skewX(0deg);
-    filter: hue-rotate(180deg);
-  }
-
-  75% {
-    transform: translateY(3px) skewX(-2deg);
-    filter: hue-rotate(270deg);
-  }
-
-  100% {
-    transform: translateY(0) skewX(0deg);
-    filter: hue-rotate(360deg);
-  }
-}
-
-// Melting effect
-@keyframes #{config.$prefix}melt {
-  0% {
-    transform: scaleY(1) translateY(0);
-    border-radius: var(--#{config.$prefix}border-radius);
-  }
-
-  50% {
-    transform: scaleY(1.1) translateY(-2px);
-    border-radius: calc(var(--#{config.$prefix}border-radius) * 1.5);
-  }
-
-  100% {
-    transform: scaleY(1) translateY(0);
-    border-radius: var(--#{config.$prefix}border-radius);
-  }
-}
-
-// Psychedelic pulse
-@keyframes #{config.$prefix}psychedelic-pulse {
-  0% {
-    transform: scale(1);
-    filter: hue-rotate(0deg) saturate(1) contrast(1);
-    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
-  }
-
-  25% {
-    transform: scale(1.03);
-    filter: hue-rotate(90deg) saturate(1.4) contrast(1.2);
-    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
-  }
-
-  50% {
-    transform: scale(1.05);
-    filter: hue-rotate(180deg) saturate(1.6) contrast(1.3);
-    box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
-  }
-
-  75% {
-    transform: scale(1.03);
-    filter: hue-rotate(270deg) saturate(1.4) contrast(1.2);
-    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
-  }
-
-  100% {
-    transform: scale(1);
-    filter: hue-rotate(360deg) saturate(1) contrast(1);
-    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
-  }
-}
-
-// Stoned drift effect
-@keyframes #{config.$prefix}stoned-drift {
-  0% {
-    transform: translateX(0) translateY(0) rotate(0deg);
-  }
-
-  20% {
-    transform: translateX(2px) translateY(-1px) rotate(0.5deg);
-  }
-
-  40% {
-    transform: translateX(-1px) translateY(2px) rotate(-0.3deg);
-  }
-
-  60% {
-    transform: translateX(3px) translateY(1px) rotate(0.8deg);
-  }
-
-  80% {
-    transform: translateX(-2px) translateY(-2px) rotate(-0.5deg);
-  }
-
-  100% {
-    transform: translateX(0) translateY(0) rotate(0deg);
-  }
-}

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

@@ -1,49 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-accordion {
-  &__header {
-    @include animations(
-      'pulse-slow',
-      $duration: 3s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-
-    position: relative;
-    overflow: hidden;
-
-    &:hover {
-      @include animations(
-        'float' 'color-pulse',
-        $duration: 1.5s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-
-      &::before {
-        animation: #{config.$prefix}chill-spin 4s linear infinite;
-        opacity: 0.1;
-      }
-    }
-
-    &--active {
-      @include animations(
-        'color-wave',
-        $duration: 2s,
-        $timing: ease-in-out,
-        $iteration-count: infinite
-      );
-
-      &::before {
-        animation: #{config.$prefix}chill-rainbow 3s linear infinite;
-        opacity: 0.1;
-      }
-    }
-  }
-
-  &__body {
-    @include animations('slow-fade-in', $duration: 0.3s, $timing: ease-in-out, $iteration-count: 1);
-  }
-}

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

@@ -1,14 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-avatar-group {
-  @include animations('slow-fade-in', $duration: 0.6s, $timing: ease-out, $iteration-count: 1);
-
-  .c-avatar {
-    @include animations('float', $duration: 2s, $timing: ease-in-out, $iteration-count: infinite);
-
-    &:hover {
-      @include animations('chill-spin', $duration: 1s, $timing: linear, $iteration-count: infinite);
-    }
-  }
-}

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

@@ -1,61 +0,0 @@
-@use '../../../styles/02-tools/tools.animations' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../../../styles/01-settings/settings.config' as config;
-
-.c-avatar {
-  @include animations('float', $duration: 4s, $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;
-  }
-
-  &:hover {
-    @include animations(
-      'chill-rainbow' 'pulse-slow',
-      $duration: 1s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-
-    &::before {
-      animation: #{config.$prefix}chill-spin 2s linear infinite;
-      opacity: 0.2;
-    }
-  }
-
-  &--pulse {
-    @include animations(
-      'pulse-slow',
-      $duration: 1.5s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &--glow {
-    box-shadow: 0 0 10px var(--#{config.$prefix}primary-5);
-
-    &:hover {
-      box-shadow:
-        0 0 20px var(--#{config.$prefix}primary-7),
-        0 0 30px var(--#{config.$prefix}primary-3);
-    }
-  }
-}

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

@@ -1,117 +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-badge {
-  position: relative;
-  overflow: hidden;
-
-  // Subtle breathing effect for badges
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'hypnotic-breathe',
-      $duration: 5s,
-      $timing: ease-in-out,
-      $iteration-count: infinite
-    );
-  }
-
-  &:hover {
-    @include animations(
-      'psychedelic-pulse',
-      $duration: 2s,
-      $timing: ease-in-out,
-      $iteration-count: 3
-    );
-    filter: saturate(1.4) brightness(1.1) hue-rotate(15deg);
-  }
-
-  // Subtle glow effect on focus for accessibility
-  &:focus-visible {
-    @include focus-ring(var(--#{config.$prefix}primary-5));
-    @include animations('trippy-wave', $duration: 1s, $timing: ease-in-out, $iteration-count: 2);
-    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
-  }
-
-  // Add subtle background effect
-  &::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)
-    );
-    opacity: 0.05;
-    z-index: -1;
-    border-radius: inherit;
-    animation: #{config.$prefix}chill-spin 12s linear infinite reverse;
-  }
-
-  &:hover::before {
-    opacity: 0.15;
-    animation: #{config.$prefix}chill-spin 3s linear infinite;
-  }
-}
-
-// Special hypnotic badge variant
-.c-badge--hypnotic {
-  @media (prefers-reduced-motion: no-preference) {
-    @include animations(
-      'stoned-drift',
-      $duration: 4s,
-      $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-5),
-      var(--#{config.$prefix}primary-3),
-      var(--#{config.$prefix}primary-1)
-    );
-    opacity: 0.1;
-    animation: #{config.$prefix}chill-rainbow 6s linear infinite;
-  }
-
-  &:hover {
-    @include animations('melt', $duration: 2s, $timing: ease-in-out, $iteration-count: 2);
-    filter: saturate(2) contrast(1.2) brightness(1.2);
-  }
-}
-
-// Reduced motion support
-@media (prefers-reduced-motion: reduce) {
-  .c-badge {
-    &,
-    &:hover {
-      animation: none !important;
-      transform: none !important;
-    }
-
-    &::before {
-      animation: none !important;
-    }
-  }
-
-  .c-badge--hypnotic {
-    &,
-    &:hover {
-      animation: none !important;
-      transform: none !important;
-    }
-
-    &::before {
-      animation: none !important;
-    }
-  }
-}