@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/styles/01-settings/_settings.photoviewer.scss

@@ -1,35 +1,101 @@
-// src/styles/01-settings/_settings.photoviewer.scss
-
 @use 'settings.config' as config;
+@use 'settings.colors' as *;
+@use 'settings.border-radius' as *;
+@use 'settings.box-shadow' as *;
+@use 'settings.typography' as *;
+// Component spacing and layout
+$photoviewer-component-spacing: 1.5rem !default;
+$photoviewer-component-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$photoviewer-component-background-color: var(--#{config.$prefix}body-bg) !default;
+$component-background-color: var(--#{config.$prefix}body-bg) !default;
 
-// Spacing variables
-$component-spacing: 1.25rem !default;
-$component-border-color: var(--#{config.$prefix}gray-3) !default;
-$component-background-color: transparent !default;
-
-// Modal specific variables
-$modal-background-color: var(--#{config.$prefix}gradient) !default;
-$modal-close-button-color: #fff !default;
+// Modal/backdrop variables
+$photoviewer-modal-background-color: rgba($gray-9, 0.8) !default;
+$photoviewer-modal-backdrop-blur: 12px !default;
+$photoviewer-modal-close-button-color: var(--#{config.$prefix}body-color) !default;
 
 // Panel variables
-$info-panel-width: 320px !default;
-$info-panel-background: var(--#{config.$prefix}gray-1) !default;
+$photoviewer-info-panel-width: 320px !default;
+$photoviewer-info-panel-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-info-panel-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$photoviewer-info-panel-shadow: $box-shadow-lg !default;
 
 // Thumbnail variables
-$thumbnail-active-border-color: var(--#{config.$prefix}brand-border-subtle) !default;
-$thumbnail-size: 56px !default;
-$thumbnail-size-large: 72px !default;
-$thumbnail-gap: 0.5rem !default;
+$photoviewer-thumbnail-active-border-color: var(--#{config.$prefix}primary) !default;
+$photoviewer-thumbnail-size: 64px !default;
+$photoviewer-thumbnail-size-large: 80px !default;
+$photoviewer-thumbnail-gap: 0.75rem !default;
+$photoviewer-thumbnail-border-radius: $border-radius !default;
+$photoviewer-thumbnail-shadow: $box-shadow-sm !default;
+$photoviewer-thumbnail-hover-shadow: $box-shadow-md !default;
 
 // Animation variables
 $photoviewer-transition-duration: 0.3s !default;
 $photoviewer-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$photoviewer-fast-transition: 0.15s !default;
 
 // Control variables
-$control-size: 2.75rem !default;
-$control-size-small: 2.25rem !default;
-$control-border-radius: 50% !default;
-$control-background: rgba(255, 255, 255, 0.7) !default;
-$control-background-hover: var(--#{config.$prefix}primary-2) !default;
-$control-color: var(--#{config.$prefix}brand-text-emphasis) !default;
-$control-color-hover: var(--#{config.$prefix}link-hover-color) !default;
+$photoviewer-control-size: 2.75rem !default;
+$photoviewer-control-size-small: 2.25rem !default;
+$photoviewer-control-border-radius: $border-radius-pill !default;
+$photoviewer-control-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-control-background-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$photoviewer-control-color: var(--#{config.$prefix}body-color) !default;
+$photoviewer-control-color-hover: var(--#{config.$prefix}primary) !default;
+$photoviewer-control-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$photoviewer-control-shadow: $box-shadow-sm !default;
+$photoviewer-control-shadow-hover: $box-shadow-md !default;
+
+// Header variables
+$photoviewer-header-height: 4rem !default;
+$photoviewer-header-padding: 1rem !default;
+$photoviewer-header-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-header-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$photoviewer-header-shadow: $box-shadow-xs !default;
+
+// Navigation variables
+$photoviewer-nav-button-size: 3rem !default;
+$photoviewer-nav-button-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-nav-button-color: var(--#{config.$prefix}body-color) !default;
+$photoviewer-nav-button-hover-background: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$photoviewer-nav-button-hover-color: var(--#{config.$prefix}primary) !default;
+$photoviewer-nav-button-shadow: $box-shadow-sm !default;
+$photoviewer-nav-button-hover-shadow: $box-shadow-md !default;
+
+// Counter badge variables
+$photoviewer-counter-badge-background: var(--#{config.$prefix}primary) !default;
+$photoviewer-counter-badge-color: var(--#{config.$prefix}white) !default;
+$photoviewer-counter-badge-font-size: $font-size-sm !default;
+$photoviewer-counter-badge-font-weight: $font-weight-medium !default;
+$photoviewer-counter-badge-padding: 0.25rem 0.75rem !default;
+$photoviewer-counter-badge-border-radius: $border-radius-pill !default;
+
+// Image container variables
+$photoviewer-image-container-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-image-container-border-radius: $border-radius-lg !default;
+
+// Info panel content variables
+$photoviewer-info-title-font-size: $font-size-lg !default;
+$photoviewer-info-title-font-weight: $font-weight-semibold !default;
+$photoviewer-info-title-color: var(--#{config.$prefix}body-color) !default;
+$photoviewer-info-description-font-size: $font-size-base !default;
+$photoviewer-info-description-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+$photoviewer-info-meta-font-size: $font-size-sm !default;
+$photoviewer-info-meta-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$photoviewer-info-spacing: 1rem !default;
+
+// Tag variables
+$photoviewer-tag-background: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$photoviewer-tag-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+$photoviewer-tag-hover-background: var(--#{config.$prefix}primary-bg-subtle) !default;
+$photoviewer-tag-hover-color: var(--#{config.$prefix}primary) !default;
+$photoviewer-tag-font-size: $font-size-xs !default;
+$photoviewer-tag-font-weight: $font-weight-medium !default;
+$photoviewer-tag-padding: 0.25rem 0.5rem !default;
+$photoviewer-tag-border-radius: $border-radius-sm !default;
+
+// Dark mode support
+$photoviewer-component-background-color-dark: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-modal-background-color-dark: rgba($gray-1, 0.8) !default;
+$photoviewer-control-background-dark: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-control-color-dark: var(--#{config.$prefix}body-color) !default;

package/src/styles/01-settings/_settings.slider.scss

@@ -0,0 +1,59 @@
+@use 'settings.config' as *;
+@use 'settings.colors' as *;
+@use 'settings.border-radius' as *;
+@use 'settings.spacing' as *;
+@use 'sass:map';
+
+// ============================================================================
+// SLIDER SETTINGS
+// ============================================================================
+
+// Base configuration
+$slider-height: 300px !default;
+$slider-width: 100% !default;
+$slider-speed: 300ms !default;
+$slider-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+// Navigation
+$slider-nav-size: map.get($spacing-sizes, 11) !default; // 44px
+$slider-nav-size-mobile: map.get($spacing-sizes, 9) !default; // 36px
+$slider-nav-offset: map.get($spacing-sizes, 4) !default; // 16px
+$slider-nav-offset-mobile: map.get($spacing-sizes, 2) !default; // 8px
+$slider-nav-background: var(--#{$prefix}primary-bg-subtle) !default;
+$slider-nav-background-hover: var(--#{$prefix}secondary-bg-subtle) !default;
+$slider-nav-color: var(--#{$prefix}primary-text) !default;
+$slider-nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !default;
+$slider-nav-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2) !default;
+$slider-nav-border-radius: $border-radius-pill !default;
+
+// Pagination
+$slider-pagination-offset: map.get($spacing-sizes, 4) !default; // 16px
+$slider-pagination-offset-mobile: map.get($spacing-sizes, 3) !default; // 12px
+$slider-pagination-bullet-size: map.get($spacing-sizes, 2) !default; // 8px
+$slider-pagination-bullet-gap: map.get($spacing-sizes, 2) !default; // 8px
+$slider-pagination-bullet-background: var(--#{$prefix}tertiary-bg-subtle) !default;
+$slider-pagination-bullet-background-active: var(--#{$prefix}primary) !default;
+$slider-pagination-bullet-background-hover: var(--#{$prefix}secondary-bg-subtle) !default;
+$slider-pagination-bullet-border-radius: $border-radius-pill !default;
+
+// Slide content
+$slider-content-padding: map.get($spacing-sizes, 4) !default; // 16px
+$slider-content-padding-mobile: map.get($spacing-sizes, 3) !default; // 12px
+$slider-content-background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !default;
+$slider-content-color: var(--#{$prefix}light-text) !default;
+
+// Empty state
+$slider-empty-background: var(--#{$prefix}secondary-bg-subtle) !default;
+$slider-empty-border: 2px dashed var(--#{$prefix}primary-border-subtle) !default;
+$slider-empty-message-color: var(--#{$prefix}tertiary-text) !default;
+$slider-empty-border-radius: $border-radius-md !default;
+
+// Transitions
+$slider-transition: all 0.2s $slider-easing !default;
+$slider-nav-transition: all 0.2s $slider-easing !default;
+$slider-pagination-transition: all 0.2s $slider-easing !default;
+
+// Z-index layers
+$slider-z-index-base: 1 !default;
+$slider-z-index-slide-active: 2 !default;
+$slider-z-index-controls: 10 !default;

package/src/styles/01-settings/_settings.spacing.scss

@@ -5,10 +5,16 @@ $spacing-sizes: (
   //00px
   1: 0.25rem,
   //04px
+  1.5: 0.375rem,
+  //6px
   2: 0.5rem,
   //08px
+  2.5: 0.625rem,
+  //10px
   3: 0.75rem,
   //12px
+  3.5: 0.875rem,
+  //14px
   4: 1rem,
   //16px
   5: 1.25rem,
@@ -59,10 +65,12 @@ $spacing-sizes: (
   //288px
   80: 20rem,
   //320px
-  90: 22.5rem, //360px
+  90: 22.5rem,
+  //360px
+  200: 50rem, //800px
 ) !default;
 
-$spacing-important: true !default;
-$enable-negative-margins: false;
+$spacing-important: false !default;
+$enable-negative-margins: false !default;
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;

package/src/styles/01-settings/_settings.steps.scss

@@ -14,7 +14,7 @@ $steps-item-number-color: $steps-item-color !default;
 $steps-item-number-active-color: var(--#{config.$prefix}gray-1) !default;
 $steps-item-number-size: 28px !default;
 $steps-item-number-font-size: typography.$font-size-sm !default;
-$steps-item-number-border-radius: border-radius.$border-radius-pill;
+$steps-item-number-border-radius: border-radius.$border-radius-pill !default;
 $steps-item-font-size: typography.$font-size-sm !default;
 $steps-item-content-gap: 8px !default;
 

package/src/styles/01-settings/_settings.tabs.scss

@@ -11,10 +11,10 @@ $tabs-nav-btn-font-weight: typography.$font-weight-medium !default;
 $tabs-nav-btn-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $tabs-nav-btn-active-color: var(--#{config.$prefix}body-color) !default;
 $tabs-nav-btn-disabled-color: var(--#{config.$prefix}disabled-text-emphasis) !default;
-$tabs-nav-btn-bg: var(--#{config.$prefix}body-bg);
-$tabs-nav-btn-bg-hover: var(--#{config.$prefix}secondary-bg-subtle);
-$tabs-nav-btn-bg-active: var(--#{config.$prefix}body-bg);
-$tabs-nav-btn-bg-disabled: var(--#{config.$prefix}body-bg);
+$tabs-nav-btn-bg: var(--#{config.$prefix}body-bg) !default;
+$tabs-nav-btn-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$tabs-nav-btn-bg-active: var(--#{config.$prefix}body-bg) !default;
+$tabs-nav-btn-bg-disabled: var(--#{config.$prefix}body-bg) !default;
 $tabs-nav-btn-border-radius: 0px !default;
 $tabs-nav-btn-border-width: 2px !default;
 $tabs-nav-btn-border-color: transparent !default;

package/src/styles/01-settings/_settings.toggle.scss

@@ -31,4 +31,4 @@ $toggle-switch-handle-width: $toggle-switch-handle-width-md !default;
 $toggle-switch-handle-height: $toggle-switch-handle-height-md !default;
 
 $toggle-label-font-size: typography.$font-size-base !default;
-$toggle-label-color: var(--#{config.$prefix}primary-text-emphasis);
+$toggle-label-color: var(--#{config.$prefix}primary-text-emphasis) !default;

package/src/styles/01-settings/_settings.typography.scss

@@ -49,6 +49,8 @@ $font-size-xs: $font-size-base * 0.75 !default; //12px
 $font-size-sm: $font-size-base * 0.875 !default; //14px
 $font-size-md: $font-size-base * 1.125 !default; //18px
 $font-size-lg: $font-size-base * 1.25 !default; //20px
+$font-size-xl: $font-size-base * 1.5 !default; //20px
+$font-size-2xl: $font-size-base * 2 !default; //20px
 
 $h1-font-size: $font-size-base * 2.5 !default; //40px
 $h2-font-size: $font-size-base * 2 !default; //32px

package/src/styles/01-settings/_settings.video-player.scss

@@ -0,0 +1,64 @@
+// ============================================================================
+// VIDEO PLAYER SETTINGS
+// ============================================================================
+
+// Video Player Colors
+$video-player-bg: #000 !default;
+$video-player-controls-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.8)) !default;
+$video-player-progress-bg: rgba(255, 255, 255, 0.3) !default;
+$video-player-progress-buffered: rgba(255, 255, 255, 0.5) !default;
+$video-player-progress-played: var(--atomix-color-primary) !default;
+$video-player-button-hover: rgba(255, 255, 255, 0.2) !default;
+$video-player-settings-bg: rgba(0, 0, 0, 0.9) !default;
+
+// Video Player Dimensions
+$video-player-border-radius: 8px !default;
+$video-player-controls-padding: 20px 16px 16px !default;
+$video-player-progress-height: 4px !default;
+$video-player-progress-height-hover: 6px !default;
+$video-player-button-size: 40px !default;
+$video-player-button-size-mobile: 36px !default;
+$video-player-button-size-fullscreen: 48px !default;
+$video-player-volume-width: 80px !default;
+$video-player-volume-width-mobile: 60px !default;
+$video-player-volume-height: 4px !default;
+$video-player-volume-height-hover: 6px !default;
+$video-player-volume-thumb-size: 12px !default;
+$video-player-volume-bg: rgba(255, 255, 255, 0.3) !default;
+$video-player-volume-bg-hover: rgba(255, 255, 255, 0.5) !default;
+$video-player-volume-fill: var(--atomix-color-primary) !default;
+$video-player-volume-fill-hover: var(--atomix-color-primary-light) !default;
+$video-player-volume-fill-active: var(--atomix-color-primary-dark) !default;
+
+// Video Player Typography
+$video-player-font-size: 14px !default;
+$video-player-font-size-mobile: 12px !default;
+$video-player-font-size-fullscreen: 16px !default;
+$video-player-font-weight: 500 !default;
+
+// Video Player Transitions
+$video-player-transition: all 0.3s ease !default;
+$video-player-transition-fast: all 0.2s ease !default;
+$video-player-transition-progress: width 0.1s ease !default;
+
+// Video Player Subtitles
+$video-player-subtitle-bg: rgba(0, 0, 0, 0.85) !default;
+$video-player-subtitle-color: #ffffff !default;
+$video-player-subtitle-font-size: 18px !default;
+$video-player-subtitle-font-size-mobile: 16px !default;
+$video-player-subtitle-font-size-fullscreen: 24px !default;
+$video-player-subtitle-font-weight: 500 !default;
+$video-player-subtitle-line-height: 1.5 !default;
+$video-player-subtitle-padding-y: 6px !default;
+$video-player-subtitle-padding-x: 12px !default;
+$video-player-subtitle-border-radius: 6px !default;
+$video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !default;
+$video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !default;
+
+// Video Player Z-Index
+$video-player-loading-z: 2 !default;
+$video-player-controls-z: 3 !default;
+$video-player-subtitles-z: 4 !default;
+
+// Video Player Breakpoints
+$video-player-mobile-breakpoint: 768px !default;

package/src/styles/02-tools/_index.scss

@@ -18,3 +18,4 @@
 @forward 'tools.map-loop';
 @forward 'tools.utility-api';
 @forward 'tools.utilities';
+@forward 'tools.component';

package/src/styles/02-tools/_tools.animations.scss

@@ -1,5 +1,6 @@
 @use '../01-settings/settings.animations' as animations;
 @use 'sass:list';
+@use 'sass:meta';
 @use 'tools.transition' as transition;
 @use '../01-settings/settings.config' as config;
 
@@ -17,3 +18,84 @@
     background-position: 0 50%;
   }
 }
+
+@mixin animations(
+  $names,
+  $duration: 1.4s,
+  $timing: linear,
+  $delay: 0s,
+  $iteration-count: infinite,
+  $direction: normal,
+  $fill-mode: none,
+  $play-state: running
+) {
+  $animations: ();
+
+  @if (meta.type-of($names) == 'list') {
+    @each $name in $names {
+      $animation: #{config.$prefix}#{$name}
+        $duration
+        $timing
+        $delay
+        $iteration-count
+        $direction
+        $fill-mode
+        $play-state;
+      $animations: list.append($animations, $animation, comma);
+    }
+  } @else {
+    $animations: #{config.$prefix}#{$names}
+      $duration
+      $timing
+      $delay
+      $iteration-count
+      $direction
+      $fill-mode
+      $play-state;
+  }
+
+  animation: #{$animations};
+}
+
+@mixin transition-animation(
+  $properties: all,
+  $duration: animations.$transition-duration,
+  $timing: animations.$easing,
+  $delay: 0s
+) {
+  @if (type-of($properties) == list) {
+    @each $property in $properties {
+      transition: $property $duration $timing $delay;
+    }
+  } @else {
+    transition: $properties $duration $timing $delay;
+  }
+}
+
+// Test case 1: Single animation (backward compatibility)
+// .test-single {
+//   @include animations.animations(
+//     'pulse-slow',
+//     $duration: 1.4s,
+//     $timing: linear
+//   );
+// }
+
+// Test case 2: Multiple animations
+// .test-multiple {
+//   @include animations.animations(
+//     ('pulse-slow', 'fade-in'),
+//     $duration: 1.4s,
+//     $timing: linear
+//   );
+// }
+
+// Test case 3: Multiple animations with different parameters
+// .test-multiple-different {
+//   @include animations.animations(
+//     'pulse-slow' 'fade-in' 'slide-up',
+//     $duration: 2s,
+//     $timing: ease-in-out,
+//     $iteration-count: infinite
+//   );
+// }

package/src/styles/02-tools/_tools.button.scss

@@ -24,6 +24,11 @@
     $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
   }
 
+  @if ($color == 'secondary') {
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
+  }
+
   --#{config.$prefix}btn-color: #{$btn-text-color};
   --#{config.$prefix}btn-bg: #{$background};
   --#{config.$prefix}btn-border-color: #{$border};

package/src/styles/02-tools/_tools.color-mode.scss

@@ -15,7 +15,7 @@
       }
     }
   } @else {
-    [data-#{config.$prefix}theme='#{$mode}'] {
+    [data-#{config.$prefix}color-mode='#{$mode}'] {
       @content;
     }
   }