@shohojdhara/atomix 0.1.30 → 0.2.2

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

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.border-radius' as borderRadius;
@@ -6,54 +8,54 @@ $upload-width: 500px !default;
 $upload-width-sm: 400px !default;
 $upload-width-large: 700px !default;
 
-$upload-padding-x: 0px !default;
-$upload-padding-y: 0px !default;
+$upload-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$upload-padding-y: map.get($spacing-sizes, 0) !default; //0px
 
-$upload-inner-padding-x: 12px !default;
-$upload-inner-padding-y: 12px !default;
+$upload-inner-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$upload-inner-padding-y: map.get($spacing-sizes, 3) !default; //12px
 
-$upload-large-inner-padding-x: 20px !default;
-$upload-large-inner-padding-y: 22px !default;
+$upload-large-inner-padding-x: map.get($spacing-sizes, 5) !default; //20px
+$upload-large-inner-padding-y: map.get($spacing-sizes, 5.5) !default; //22px
 
 $upload-border-radius: borderRadius.$border-radius !default;
-$upload-border-width: 1px !default;
+$upload-border-width: var(--#{config.$prefix}border-width) !default;
 $upload-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $upload-bg: var(--#{config.$prefix}body-bg) !default;
 $upload-hover-bg: null !default;
 
-$upload-icon-size: 32px !default;
-$upload-icon-padding: 0px !default;
+$upload-icon-size: map.get($spacing-sizes, 8) !default; //32px
+$upload-icon-padding: map.get($spacing-sizes, 0) !default; //0px
 $upload-icon-bg: var(--#{config.$prefix}body-bg) !default;
 
 $upload-title-font-size: typography.$font-size-lg !default;
 $upload-title-font-weight: typography.$headings-font-weight !default;
 $upload-title-color: var(--#{config.$prefix}body-color) !default;
-$upload-title-margin-top: 8px !default;
+$upload-title-margin-top:  map.get($spacing-sizes, 2) !default; //8px
 
 $upload-text-font-size: typography.$font-size-sm !default;
 $upload-text-font-weight: typography.$font-weight-normal !default;
 $upload-text-color: var(--#{config.$prefix}body-color) !default;
-$upload-text-margin-top: 4px !default;
+$upload-text-margin-top:  map.get($spacing-sizes, 4) !default; //4px
 
-$upload-btn-margin-top: 20px !default;
-$upload-btn-margin-left: 16px !default;
+$upload-btn-margin-top: map.get($spacing-sizes, 5) !default; //20px
+$upload-btn-margin-left: map.get($spacing-sizes, 4) !default; //16px
 
-$upload-content-margin-left: 16px !default;
+$upload-content-margin-left: map.get($spacing-sizes, 4) !default; //16px
 
 $upload-helper-text-font-size: typography.$font-size-sm !default;
 $upload-helper-text-font-weight: typography.$font-weight-normal !default;
 $upload-helper-text-color: var(--#{config.$prefix}body-color) !default;
-$upload-helper-text-margin-top: 8px !default;
+$upload-helper-text-margin-top: map.get($spacing-sizes, 2) !default; //8px
 
 $upload-disabled-opacity: 0.5 !default;
 
-$upload-loader-padding-x: 12px !default;
-$upload-loader-padding-y: 12px !default;
+$upload-loader-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$upload-loader-padding-y: map.get($spacing-sizes, 3) !default; //12px
 $upload-loader-bg-opacity: 1 !default;
 $upload-loader-border-radius: $upload-border-radius !default;
 $upload-loader-border-width: $upload-border-width !default;
 $upload-loader-border-color: $upload-border-color !default;
-$upload-loader-margin-top: 20px !default;
+$upload-loader-margin-top: map.get($spacing-sizes, 5) !default; //20px
 $upload-loader-title-color: var(--#{config.$prefix}body-color) !default;
 $upload-loader-title-font-size: typography.$font-size-sm !default;
 $upload-loader-title-font-weight: typography.$font-weight-normal !default;
@@ -61,8 +63,8 @@ $upload-loader-text-color: var(--#{config.$prefix}tertiary-text-emphasis) !defau
 $upload-loader-text-font-size: typography.$font-size-sm !default;
 $upload-loader-text-margin-top: 5px !default;
 $upload-loader-bar-height: 10px !default;
-$upload-loader-bar-margin-top: 10px !default;
-$upload-loader-control-icon-size: 20px !default;
+$upload-loader-bar-margin-top: map.get($spacing-sizes, 2.5) !default; //10px
+$upload-loader-control-icon-size: map.get($spacing-sizes, 5) !default; //20px
 $upload-loader-contorl-color: var(--#{config.$prefix}body-color) !default;
 
 $upload-loader-progress-color: var(--#{config.$prefix}primary) !default;

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.background.scss

@@ -0,0 +1,85 @@
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:map';
+@use '../01-settings/settings.background' as *;
+@use '../01-settings/settings.config' as *;
+@use '../02-tools/tools.to-rgb' as *;
+
+@mixin dynamic-background(
+  $color,
+  $transparency: $background-transparency,
+  $blur: $background-blur,
+  $use-backdrop-filter: $background-enable-backdrop-filter
+) {
+  // Validate inputs
+  @if $transparency < 0 or $transparency > 1 {
+    @error 'Transparency must be between 0 and 1, got #{$transparency}';
+  }
+
+  @if $blur < 0 {
+    @error 'Blur value must be non-negative, got #{$blur}px';
+  }
+
+  @if $transparency > 0 {
+    @if $background-enable-gradient-overlay {
+      background:
+    // Top highlight layer
+        linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0.15) 0%,
+          rgba(255, 255, 255, 0.05) 25%,
+          transparent 50%
+        ),
+        // Main liquid glass layer
+        linear-gradient(
+            to bottom,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency * 1.2)}, transparent) 0%,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency)}, transparent) 35%,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.8)}, transparent) 65%,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency * 1.1)}, transparent) 100%
+          ),
+        // Bottom shadow layer
+        radial-gradient(
+            ellipse at bottom,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.3)}, transparent) 0%,
+            transparent 70%
+          );
+          
+    } @else {
+      background-color: color-mix(
+        in srgb,
+        #{$color} #{math.percentage($transparency)},
+        transparent
+      );
+    }
+  } @else {
+    background-color: $color;
+  }
+  // Apply backdrop filter with browser support
+  @if $blur > 0 or $use-backdrop-filter {
+    backdrop-filter:  blur(#{$blur}px) saturate(1.5) contrast(1.2) brightness(1.1);
+    -webkit-backdrop-filter: blur(#{$blur}px) saturate(1.2) contrast(1.2) brightness(1.1);;
+    box-shadow:
+      var(--atomix-box-shadow-inset),
+      // Inner glow
+      inset
+        0
+        1px
+        0
+        rgba(255, 255, 255, 0.25),
+      inset 0 -1px 0 color-mix(in srgb, #{$color} 10%, transparent),
+      // Outer depth
+      4px
+        8px
+        32px
+        color-mix(in srgb, #{$color} 20%, transparent),
+      0 1px 2px rgba(0, 0, 0, 0.1),
+      0
+        8px
+        20px
+        color-mix(in srgb, #{$color} 20%, transparent),
+      0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+}

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;
     }
   }