@shohojdhara/atomix 0.3.1 → 0.3.3

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

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

@@ -0,0 +1,8 @@
+/*!
+ * 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

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

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

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

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

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