@shohojdhara/atomix 0.3.2 → 0.3.3

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

@@ -0,0 +1,354 @@
+/*!
+ * Mashroom Theme Data Table Component
+ * Psychedelic mushroom-inspired table styling with trippy animated rows
+ */
+
+// Import required tools and settings
+@use '../02-tools/tools.trippy-effects' as trippy;
+@use '../02-tools/tools.psychedelic-gradients' as gradients;
+@use '../01-settings/settings.colors' as *;
+
+@keyframes table-row-float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+@keyframes table-glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 5px rgba(157, 0, 255, 0.3);
+  }
+  50% {
+    box-shadow:
+      0 0 20px rgba(157, 0, 255, 0.6),
+      0 0 30px rgba(255, 32, 133, 0.4);
+  }
+}
+
+@keyframes psychedelic-border-shift {
+  0% {
+    border-color: rgba(157, 0, 255, 0.3);
+  }
+  25% {
+    border-color: rgba(255, 32, 133, 0.4);
+  }
+  50% {
+    border-color: rgba(255, 187, 0, 0.5);
+  }
+  75% {
+    border-color: rgba(0, 255, 157, 0.4);
+  }
+  100% {
+    border-color: rgba(157, 0, 255, 0.3);
+  }
+}
+
+.c-data-table {
+  $root: &;
+
+  // Base table styling
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  border-radius: 1rem;
+  overflow: hidden;
+  border: 1px solid rgba(157, 0, 255, 0.2);
+
+  // Trippy glow effect
+  @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 15px);
+  @include trippy.color-shift();
+
+  // Add floating animation to entire table
+  @include trippy.float-animation();
+  animation-duration: 8s;
+
+  // Psychedelic border animation
+  animation: psychedelic-border-shift 4s infinite linear;
+
+  // Header styling
+  &__header {
+    background: linear-gradient(135deg, rgba(157, 0, 255, 0.2), rgba(255, 32, 133, 0.2));
+    @include gradients.rainbow-gradient();
+    background-size: 300% 300%;
+    animation: rainbow-shift 6s ease infinite;
+    position: relative;
+
+    // Add a subtle overlay for better text readability
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.3);
+      pointer-events: none;
+    }
+
+    &-cell {
+      padding: 1rem 1.5rem;
+      text-align: left;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.9);
+      border-bottom: 2px solid rgba(157, 0, 255, 0.3);
+      position: relative;
+      z-index: 1; // Above the gradient overlay
+
+      // Add psychedelic pulse to header cells
+      @include trippy.psychedelic-pulse(rgba(157, 0, 255, 0.5));
+
+      // Sort indicator
+      &--sortable {
+        cursor: pointer;
+        transition: all 0.3s ease;
+        @include trippy.float-animation();
+        animation-duration: 4s;
+
+        &:hover {
+          background: rgba(157, 0, 255, 0.1);
+          color: $white;
+          @include gradients.psychedelic-linear-gradient(
+            rgba(157, 0, 255, 0.2),
+            rgba(255, 32, 133, 0.2)
+          );
+          transform: scale(1.02);
+          @include trippy.trippy-glow($yellow-4, 10px);
+        }
+
+        &::after {
+          content: '↕';
+          position: absolute;
+          right: 1rem;
+          opacity: 0.5;
+          transition: all 0.3s ease;
+
+          // Add psychedelic color to sort indicator
+          color: $purple-4;
+          text-shadow: 0 0 5px rgba(157, 0, 255, 0.7);
+        }
+
+        &--asc::after {
+          content: '↑';
+          opacity: 1;
+          color: $yellow-4;
+          text-shadow: 0 0 10px rgba(255, 187, 0, 0.8);
+        }
+
+        &--desc::after {
+          content: '↓';
+          opacity: 1;
+          color: $red-4;
+          text-shadow: 0 0 10px rgba(255, 32, 133, 0.8);
+        }
+      }
+    }
+  }
+
+  // Body styling
+  &__body {
+    // Add subtle animation to the entire body
+    animation: table-glow-pulse 3s infinite;
+  }
+
+  // Row styling
+  &__row {
+    transition: all 0.3s ease;
+
+    // Add floating animation to rows
+    &:nth-child(even) {
+      @include trippy.float-animation();
+      animation-duration: 6s;
+    }
+
+    &:nth-child(odd) {
+      @include trippy.float-animation();
+      animation-duration: 7s;
+      animation-delay: 0.5s;
+    }
+
+    // Hover effect for rows
+    &:hover {
+      background: rgba(157, 0, 255, 0.1);
+      transform: scale(1.01);
+      @include gradients.psychedelic-linear-gradient(
+        rgba(157, 0, 255, 0.1),
+        rgba(157, 0, 255, 0.05)
+      );
+      @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 10px);
+
+      // Add color shift on hover
+      @include trippy.color-shift();
+      animation-duration: 2s;
+    }
+
+    // Striped rows
+    &:nth-child(even) {
+      background: rgba(30, 10, 50, 0.3);
+    }
+
+    // Animated variant
+    &--animated {
+      animation: table-row-float 3s ease-in-out infinite;
+
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+    }
+
+    // Highlighted row
+    &--highlight {
+      background: linear-gradient(90deg, rgba(255, 187, 0, 0.2), rgba(255, 32, 133, 0.2));
+      @include trippy.psychedelic-pulse($yellow-4);
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+        @include gradients.rainbow-gradient();
+        background-size: 300% 300%;
+        animation: rainbow-shift 3s ease infinite;
+        opacity: 0.2;
+        z-index: -1;
+      }
+    }
+  }
+
+  // Cell styling
+  &__cell {
+    padding: 1rem 1.5rem;
+    color: rgba(255, 255, 255, 0.8);
+    border-bottom: 1px solid rgba(157, 0, 255, 0.1);
+
+    // Add subtle glow to cells
+    @include trippy.trippy-glow(rgba(255, 255, 255, 0.05), 2px);
+
+    // Add color shift to cells
+    @include trippy.color-shift();
+    animation-duration: 20s;
+
+    // Numeric cells
+    &--numeric {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+      color: $yellow-3;
+    }
+
+    // Action cells
+    &--actions {
+      text-align: right;
+
+      .c-btn {
+        margin-left: 0.5rem;
+        @include trippy.float-animation();
+        animation-duration: 4s;
+      }
+    }
+  }
+
+  // Footer styling
+  &__footer {
+    background: rgba(15, 5, 30, 0.7);
+    border-top: 1px solid rgba(157, 0, 255, 0.2);
+
+    // Add psychedelic gradient to footer
+    @include gradients.psychedelic-linear-gradient(rgba(157, 0, 255, 0.1), rgba(15, 5, 30, 0.7));
+
+    // Add glow effect
+    @include trippy.trippy-glow(rgba(157, 0, 255, 0.2), 8px);
+  }
+
+  // Pagination styling
+  &__pagination {
+    padding: 1rem 1.5rem;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.5rem;
+
+    // Add psychedelic background
+    background: rgba(25, 15, 40, 0.5);
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    border: double 2px transparent;
+    border-radius: 1rem;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: -1;
+      margin: -2px;
+      border-radius: inherit;
+      @include gradients.rainbow-gradient();
+      background-size: 400% 400%;
+      animation: rainbow-shift 4s ease infinite;
+    }
+
+    #{$root}__header {
+      @include gradients.rainbow-gradient();
+      background-size: 400% 400%;
+      animation: rainbow-shift 5s ease infinite;
+
+      &-cell {
+        @include trippy.psychedelic-pulse($yellow-4);
+      }
+    }
+
+    #{$root}__row {
+      &:hover {
+        @include gradients.rainbow-gradient();
+        background-size: 200% 200%;
+        animation: rainbow-shift 2s linear infinite;
+        opacity: 0.9;
+      }
+    }
+  }
+
+  // Compact variant
+  &--compact {
+    #{$root}__cell,
+    #{$root}__header-cell {
+      padding: 0.5rem 1rem;
+    }
+  }
+
+  // Bordered variant
+  &--bordered {
+    border: 2px solid rgba(157, 0, 255, 0.3);
+
+    #{$root}__cell,
+    #{$root}__header-cell {
+      border-right: 1px solid rgba(157, 0, 255, 0.2);
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+
+    // Animate border colors
+    animation: psychedelic-border-shift 3s infinite linear;
+  }
+}

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

@@ -0,0 +1,349 @@
+/*!
+ * Mashroom Theme DatePicker Component
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+// Import required tools and settings
+@use '../02-tools/tools.trippy-effects' as trippy;
+@use '../02-tools/tools.psychedelic-gradients' as gradients;
+@use '../01-settings/settings.colors' as *;
+
+.c-datepicker {
+  $root: &;
+
+  // Base datepicker styling
+  position: relative;
+  display: inline-block;
+
+  // Calendar container
+  &__calendar {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(157, 0, 255, 0.3);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    min-width: 300px;
+
+    // Trippy glow effect
+    @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 20px);
+
+    // Entrance animation
+    animation: calendarPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+
+  @keyframes calendarPop {
+    from {
+      opacity: 0;
+      transform: scale(0.8) rotate(-5deg);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) rotate(0deg);
+    }
+  }
+
+  // Header
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  // Navigation buttons
+  &__nav {
+    display: flex;
+    gap: 0.5rem;
+
+    &-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(157, 0, 255, 0.3);
+      color: rgba(255, 255, 255, 0.8);
+      padding: 0.5rem;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: rgba(157, 0, 255, 0.2);
+        color: $white;
+        @include trippy.trippy-glow($yellow-4, 8px);
+      }
+    }
+  }
+
+  // Current month/year display
+  &__current {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: $white;
+    background: linear-gradient(45deg, $purple-4, $yellow-4);
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: monthColorShift 3s ease-in-out infinite;
+  }
+
+  @keyframes monthColorShift {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  // Weekday headers
+  &__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.25rem;
+    margin-bottom: 1rem;
+  }
+
+  &__weekday {
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.7);
+    padding: 0.5rem;
+  }
+
+  // Days grid
+  &__days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.25rem;
+  }
+
+  // Day cells
+  &__day {
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    color: rgba(255, 255, 255, 0.8);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+
+    &:hover {
+      background: rgba(157, 0, 255, 0.2);
+      color: $white;
+      transform: scale(1.1);
+      @include trippy.trippy-glow($yellow-4, 8px);
+    }
+
+    &--today {
+      background: rgba(255, 187, 0, 0.2);
+      color: $yellow-4;
+      font-weight: 600;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        border: 1px solid $yellow-4;
+        border-radius: 50%;
+        animation: todayGlow 2s ease-in-out infinite;
+      }
+    }
+
+    @keyframes todayGlow {
+      0%,
+      100% {
+        opacity: 0.5;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+
+    &--selected {
+      background: linear-gradient(45deg, $purple-4, $red-4);
+      color: $white;
+      font-weight: 600;
+      animation: selectedPulse 1.5s ease-in-out infinite;
+    }
+
+    @keyframes selectedPulse {
+      0%,
+      100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+    }
+
+    &--disabled {
+      color: rgba(255, 255, 255, 0.3);
+      cursor: not-allowed;
+
+      &:hover {
+        background: none;
+        transform: none;
+        @include trippy.trippy-glow(none, 0);
+      }
+    }
+
+    &--other-month {
+      color: rgba(255, 255, 255, 0.4);
+    }
+
+    &--weekend {
+      color: rgba(255, 187, 0, 0.8);
+    }
+  }
+
+  // Time picker
+  &__time {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+    &-label {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 0.875rem;
+    }
+
+    &-input {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(157, 0, 255, 0.3);
+      color: rgba(255, 255, 255, 0.9);
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+
+      &:focus {
+        outline: none;
+        border-color: $yellow-4;
+        @include trippy.trippy-glow($yellow-4, 5px);
+      }
+    }
+  }
+
+  // Input field
+  &__input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(157, 0, 255, 0.3);
+    border-radius: 1rem;
+    color: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: rgba(157, 0, 255, 0.5);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $yellow-4;
+      @include trippy.trippy-glow($yellow-4, 8px);
+    }
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  // Range picker
+  &--range {
+    #{$root}__calendar {
+      min-width: 600px;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+    }
+  }
+
+  // Inline variant
+  &--inline {
+    #{$root}__calendar {
+      position: static;
+      box-shadow: none;
+      animation: none;
+    }
+  }
+
+  // Sizes
+  &--sm {
+    #{$root}__calendar {
+      padding: 1rem;
+      min-width: 250px;
+
+      #{$root}__day {
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  &--lg {
+    #{$root}__calendar {
+      padding: 2rem;
+      min-width: 350px;
+
+      #{$root}__day {
+        font-size: 1rem;
+      }
+    }
+  }
+
+  // Psychedelic variant
+  &--psychedelic {
+    #{$root}__calendar {
+      background: linear-gradient(
+        135deg,
+        rgba(157, 0, 255, 0.1) 0%,
+        rgba(255, 32, 133, 0.1) 50%,
+        rgba(0, 255, 136, 0.1) 100%
+      );
+      border-color: rgba(157, 0, 255, 0.4);
+    }
+
+    #{$root}__day {
+      &:hover {
+        background: linear-gradient(45deg, rgba(157, 0, 255, 0.3), rgba(255, 187, 0, 0.3));
+      }
+    }
+  }
+
+  // Responsive adjustments
+  @media (max-width: 768px) {
+    #{$root}__calendar {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 90%;
+      max-width: 350px;
+    }
+
+    &--range {
+      #{$root}__calendar {
+        grid-template-columns: 1fr;
+        min-width: auto;
+      }
+    }
+  }
+}