@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/themes/mashroom/06-components/_components.video-player.scss

@@ -1,560 +0,0 @@
-/*!
- * Mashroom Theme Video Player Component
- * Trippy controls and mushroom overlay effects with psychedelic animations
- */
-
-// 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-video-player {
-  $root: &;
-
-  // Base video player container
-  position: relative;
-  width: 100%;
-  max-width: 800px;
-  margin: 2rem auto;
-  border-radius: 16px;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.9);
-  @include trippy.trippy-glow(rgba(157, 0, 255, 0.2), 10px);
-
-  // Mushroom cap curve
-  border-radius: 16px 16px 8px 8px;
-
-  // Video element
-  &__video {
-    width: 100%;
-    height: auto;
-    display: block;
-    border-radius: 16px;
-  }
-
-  // Controls container
-  &__controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(
-      to top,
-      rgba(0, 0, 0, 0.8) 0%,
-      rgba(0, 0, 0, 0.4) 50%,
-      transparent 100%
-    );
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-
-    #{$root}:hover & {
-      opacity: 1;
-    }
-  }
-
-  // Play/Pause button
-  &__play {
-    width: 48px;
-    height: 48px;
-    border: none;
-    background: linear-gradient(135deg, $purple-4, $yellow-4);
-    border-radius: 50%;
-    color: $white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 8px);
-
-    &:hover {
-      transform: scale(1.1);
-      @include trippy.trippy-glow($yellow-4, 12px);
-    }
-
-    &:active {
-      transform: scale(0.95);
-    }
-  }
-
-  // Progress bar
-  &__progress {
-    flex: 1;
-    height: 6px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 3px;
-    position: relative;
-    cursor: pointer;
-    overflow: hidden;
-  }
-
-  &__progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, $purple-4, $yellow-4, $red-4, $green-4);
-    background-size: 200% 100%;
-    border-radius: 3px;
-    transition: width 0.1s ease;
-    animation: progressShimmer 3s ease-in-out infinite;
-    @include trippy.trippy-glow($purple-4, 5px);
-  }
-
-  @keyframes progressShimmer {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  &__progress-buffer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-    transition: width 0.1s ease;
-  }
-
-  // Time display
-  &__time {
-    font-size: 0.875rem;
-    color: $white;
-    font-family: monospace;
-    min-width: 80px;
-    text-align: center;
-  }
-
-  // Volume control
-  &__volume {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-
-    &-button {
-      width: 32px;
-      height: 32px;
-      border: none;
-      background: transparent;
-      color: rgba(255, 255, 255, 0.8);
-      cursor: pointer;
-      transition: all 0.3s ease;
-
-      &:hover {
-        color: $yellow-4;
-        transform: scale(1.1);
-      }
-    }
-
-    &-slider {
-      width: 80px;
-      height: 4px;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 2px;
-      position: relative;
-      cursor: pointer;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        background: linear-gradient(90deg, $purple-4, $yellow-4);
-        border-radius: 2px;
-        transition: width 0.1s ease;
-        @include trippy.trippy-glow($purple-4, 3px);
-      }
-    }
-  }
-
-  // Settings button
-  &__settings {
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.8);
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      color: $yellow-4;
-      transform: rotate(90deg);
-    }
-  }
-
-  // Fullscreen button
-  &__fullscreen {
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.8);
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      color: $yellow-4;
-      transform: scale(1.1);
-    }
-  }
-
-  // Loading overlay
-  &__loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-
-    &--active {
-      opacity: 1;
-    }
-  }
-
-  &__spinner {
-    width: 48px;
-    height: 48px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-top: 3px solid $yellow-4;
-    border-radius: 50%;
-    animation: spinnerRotate 1s linear infinite;
-    @include trippy.trippy-glow($yellow-4, 10px);
-  }
-
-  @keyframes spinnerRotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  // Error overlay
-  &__error {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: $white;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-
-    &--active {
-      opacity: 1;
-    }
-  }
-
-  &__error-icon {
-    width: 64px;
-    height: 64px;
-    color: $red-4;
-    margin-bottom: 1rem;
-  }
-
-  &__error-message {
-    font-size: 1.125rem;
-    margin-bottom: 1rem;
-  }
-
-  &__error-retry {
-    padding: 0.5rem 1.5rem;
-    background: linear-gradient(135deg, $purple-4, $yellow-4);
-    border: none;
-    border-radius: 2rem;
-    color: $white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-  }
-
-  // Floating spore particles
-  &__spores {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    overflow: hidden;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      width: 4px;
-      height: 4px;
-      background: radial-gradient(circle, $yellow-4, transparent);
-      border-radius: 50%;
-      animation: sporeFloat 8s ease-in-out infinite;
-    }
-
-    &::before {
-      top: 20%;
-      left: 15%;
-      animation-delay: 0s;
-    }
-
-    &::after {
-      top: 70%;
-      right: 20%;
-      animation-delay: 2s;
-    }
-  }
-
-  @keyframes sporeFloat {
-    0%,
-    100% {
-      transform: translateY(0) translateX(0) scale(1);
-      opacity: 0.3;
-    }
-    50% {
-      transform: translateY(-15px) translateX(10px) scale(1.5);
-      opacity: 0.7;
-    }
-  }
-
-  // Quality selector
-  &__quality {
-    position: absolute;
-    bottom: 60px;
-    right: 1rem;
-    background: rgba(0, 0, 0, 0.8);
-    border-radius: 8px;
-    padding: 0.5rem;
-    opacity: 0;
-    transform: translateY(10px);
-    transition: all 0.3s ease;
-
-    &--active {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    &-option {
-      padding: 0.5rem 1rem;
-      color: rgba(255, 255, 255, 0.8);
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border-radius: 4px;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.3);
-        color: $white;
-      }
-
-      &--active {
-        background: $purple-4;
-        color: $white;
-      }
-    }
-  }
-
-  // Speed control
-  &__speed {
-    position: absolute;
-    bottom: 60px;
-    right: 1rem;
-    background: rgba(0, 0, 0, 0.8);
-    border-radius: 8px;
-    padding: 0.5rem;
-    opacity: 0;
-    transform: translateY(10px);
-    transition: all 0.3s ease;
-
-    &--active {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    &-option {
-      padding: 0.5rem 1rem;
-      color: rgba(255, 255, 255, 0.8);
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border-radius: 4px;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.3);
-        color: $white;
-      }
-
-      &--active {
-        background: $purple-4;
-        color: $white;
-      }
-    }
-  }
-
-  // Size variants
-  &--sm {
-    max-width: 400px;
-
-    #{$root}__controls {
-      padding: 0.5rem;
-      gap: 0.5rem;
-    }
-
-    #{$root}__play {
-      width: 36px;
-      height: 36px;
-    }
-
-    #{$root}__progress {
-      height: 4px;
-    }
-  }
-
-  &--lg {
-    max-width: 1000px;
-
-    #{$root}__controls {
-      padding: 1.5rem;
-      gap: 1.5rem;
-    }
-
-    #{$root}__play {
-      width: 56px;
-      height: 56px;
-    }
-
-    #{$root}__progress {
-      height: 8px;
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    #{$root}__controls {
-      background: linear-gradient(
-        to top,
-        rgba(157, 0, 255, 0.8) 0%,
-        rgba(255, 32, 133, 0.6) 50%,
-        transparent 100%
-      );
-    }
-
-    #{$root}__play {
-      background: linear-gradient(135deg, $purple-4, $yellow-4, $red-4, $green-4);
-      background-size: 400% 400%;
-      animation: buttonGradient 3s ease-in-out infinite;
-    }
-
-    #{$root}__progress-bar {
-      animation: psychedelicProgress 2s ease-in-out infinite;
-    }
-
-    #{$root}__spinner {
-      border-top-color: $yellow-4;
-      animation: psychedelicSpinner 1s linear infinite;
-    }
-  }
-
-  @keyframes buttonGradient {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  @keyframes psychedelicProgress {
-    0% {
-      filter: hue-rotate(0deg);
-    }
-    100% {
-      filter: hue-rotate(360deg);
-    }
-  }
-
-  @keyframes psychedelicSpinner {
-    0% {
-      transform: rotate(0deg);
-      filter: hue-rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-      filter: hue-rotate(360deg);
-    }
-  }
-
-  // Glow variant
-  &--glow {
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 20px);
-
-    #{$root}__play {
-      @include trippy.trippy-glow($yellow-4, 15px);
-    }
-
-    #{$root}__progress-bar {
-      @include trippy.trippy-glow($purple-4, 8px);
-    }
-  }
-
-  // Dark variant
-  &--dark {
-    background: rgba(0, 0, 0, 0.95);
-  }
-
-  // Light variant
-  &--light {
-    background: rgba(255, 255, 255, 0.1);
-
-    #{$root}__controls {
-      background: linear-gradient(
-        to top,
-        rgba(255, 255, 255, 0.8) 0%,
-        rgba(255, 255, 255, 0.4) 50%,
-        transparent 100%
-      );
-    }
-
-    #{$root}__time {
-      color: rgba(0, 0, 0, 0.8);
-    }
-  }
-
-  // Responsive adjustments
-  @media (max-width: 768px) {
-    #{$root}__controls {
-      flex-wrap: wrap;
-      gap: 0.5rem;
-    }
-
-    #{$root}__volume {
-      display: none;
-    }
-
-    #{$root}__settings,
-    #{$root}__fullscreen {
-      width: 28px;
-      height: 28px;
-    }
-  }
-}

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

@@ -1,55 +0,0 @@
-/*!
- * Mashroom Theme Components Index
- * Psychedelic mushroom-inspired theme with trippy visuals
- */
-
-// Component styles for the mashroom theme
-@forward 'components.accordion';
-@forward 'components.avatar';
-@forward 'components.avatar-group';
-@forward 'components.badge';
-@forward 'components.breadcrumb';
-@forward 'components.btn-group';
-@forward 'components.button';
-@forward 'components.callout';
-@forward 'components.card';
-@forward 'components.checkbox';
-@forward 'components.color-mode-toggle';
-@forward 'components.countdown';
-@forward 'components.data-table';
-@forward 'components.datepicker';
-@forward 'components.dropdown';
-@forward 'components.edge-panel';
-@forward 'components.form';
-@forward 'components.form-group';
-@forward 'components.hero';
-@forward 'components.input';
-@forward 'components.list';
-@forward 'components.list-group';
-@forward 'components.menu';
-@forward 'components.messages';
-@forward 'components.modal';
-@forward 'components.nav';
-@forward 'components.navbar';
-@forward 'components.pagination';
-@forward 'components.popover';
-@forward 'components.product-review';
-@forward 'components.progress';
-@forward 'components.rating';
-@forward 'components.river';
-@forward 'components.sectionintro';
-@forward 'components.select';
-@forward 'components.side-menu';
-@forward 'components.skeleton';
-@forward 'components.slider';
-@forward 'components.spinner';
-@forward 'components.steps';
-@forward 'components.tabs';
-@forward 'components.testimonials';
-// @forward 'components.todo';
-@forward 'components.toggle';
-@forward 'components.tooltip';
-@forward 'components.upload';
-@forward 'components.video-player';
-@forward 'components.photoviewer';
-// @forward 'components.image-gallery';

package/src/themes/mashroom/99-utilities/_index.scss

@@ -1,6 +0,0 @@
-/*!
- * Mashroom Theme Utilities Index
- * Psychedelic mushroom-inspired theme with trippy visuals
- */
-
-// Utility classes for the mashroom theme

package/src/themes/mashroom/index.scss

@@ -1,26 +0,0 @@
-/*!
- * Atomix Design System theme Mashroom
- * Psychedelic mushroom-inspired theme with trippy visuals
- */
-
-// 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;
-
-@use '03-generic/index' as *;
-@use '../../styles/03-generic/index' as generic;
-
-@use '04-elements/index' as *;
-@use '../../styles/04-elements/index' as elements;
-
-@use '05-objects/index' as *;
-@use '../../styles/05-objects/index' as objects;
-
-@use '06-components/index' as *;
-@use '../../styles/06-components/index';
-
-@use '99-utilities/index' as *;
-@use '../../styles/99-utilities/index' as utilities;

package/src/themes/shaj-default/01-settings/_index.scss

@@ -1,69 +0,0 @@
-/*!
- * Shaj Default Theme Settings Index
- * Modern design system settings for clean, aesthetic UI
- */
-
-// Base colors and variables that everything depends on
-@forward './settings.colors';
-@forward './settings.config';
-
-// Core settings that depend on colors
-@forward './settings.border';
-@forward './settings.border-radius';
-@forward './settings.box-shadow';
-@forward './settings.spacing';
-@forward './settings.breakpoints';
-@forward './settings.fonts';
-@forward './settings.typography';
-
-// Component settings - alphabetically ordered
-@forward './settings.accordion';
-@forward './settings.animations';
-@forward './settings.avatar-group';
-@forward './settings.avatar';
-@forward './settings.badge';
-@forward './settings.btn-group';
-@forward './settings.button';
-@forward './settings.callout';
-@forward './settings.card';
-@forward './settings.checkbox-group';
-@forward './settings.checkbox';
-@forward './settings.color-mode';
-@forward './settings.countdown';
-@forward './settings.data-table';
-@forward './settings.datepicker';
-@forward './settings.dropdown';
-@forward './settings.edge-panel';
-@forward './settings.form';
-@forward './settings.form-group';
-@forward './settings.grid';
-@forward './settings.hero';
-@forward './settings.input';
-@forward './settings.link';
-@forward './settings.list-group';
-@forward './settings.list';
-@forward './settings.design-tokens';
-@forward './settings.menu';
-@forward './settings.messages';
-@forward './settings.modal';
-@forward './settings.nav';
-@forward './settings.navbar';
-@forward './settings.pagination';
-@forward './settings.popover';
-@forward './settings.photoviewer';
-@forward './settings.position';
-@forward './settings.progress';
-@forward './settings.rating';
-@forward './settings.river';
-@forward './settings.sectionintro';
-@forward './settings.select';
-@forward './settings.side-menu';
-@forward './settings.skeleton';
-@forward './settings.spinner';
-@forward './settings.steps';
-@forward './settings.tabs';
-@forward './settings.testimonials';
-@forward './settings.toggle';
-@forward './settings.tooltip';
-@forward './settings.upload';
-@forward './settings.z-layers';