@shohojdhara/atomix 0.2.4 → 0.2.5

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

@@ -4,21 +4,21 @@
 
 // Avatar sizes
 $avatar-size: (
-        xs: 24px,
-        sm: 32px,
-        md: 40px,
-        lg: 48px,
-        xl: 56px,
+  xs: 24px,
+  sm: 32px,
+  md: 40px,
+  lg: 48px,
+  xl: 56px,
 ) !default;
 
 // Avatar border radius
 $avatar-border-radius: (
-        xs: radius.$border-radius-sm,
-        sm: radius.$border-radius-sm,
-        md: radius.$border-radius,
-        lg: radius.$border-radius,
-        xl: radius.$border-radius,
-        circle: 50%,
+  xs: radius.$border-radius-sm,
+  sm: radius.$border-radius-sm,
+  md: radius.$border-radius,
+  lg: radius.$border-radius,
+  xl: radius.$border-radius,
+  circle: 50%,
 ) !default;
 
 // Avatar colors
@@ -31,15 +31,15 @@ $avatar-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $avatar-fit: cover !default;
 $avatar-initials-font-weight: fonts.$font-weight-medium !default;
 $avatar-initials-font-size: (
-        xs: fonts.$font-size-xs,
-        sm: fonts.$font-size-xs,
-        md: fonts.$font-size-sm,
-        lg: fonts.$font-size-base,
-        xl: fonts.$font-size-base,
+  xs: fonts.$font-size-xs,
+  sm: fonts.$font-size-xs,
+  md: fonts.$font-size-sm,
+  lg: fonts.$font-size-base,
+  xl: fonts.$font-size-base,
 ) !default;
 
 // Interactive states
 $avatar-hover-opacity: 0.8 !default;
 $avatar-focus-ring-width: calc(var(--#{config.$prefix}border-width) * 2) !default;
 $avatar-focus-ring-color: var(--#{config.$prefix}primary-border-subtle) !default;
-$avatar-disabled-opacity: 0.5 !default;
+$avatar-disabled-opacity: 0.5 !default;

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

@@ -1,10 +1,7 @@
 // Global effect toggles
-$background-enable-backdrop-filter: false !default;
 $background-enable-gradient-overlay: false !default;
 $background-transparency-enable: false !default;
 $background-enable-with-shadow: false !default;
 
 // Core transparency levels (used in dynamic-background-core defaults)
-$background-transparency: 0.5!default;
-// Core blur levels (used in dynamic-background-core defaults)
-$background-blur: 0 !default;
+$background-transparency: 0.5 !default;

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

@@ -15,4 +15,4 @@ $badge-border-radius: radius.$border-radius-pill !default;
 
 $badge-icon-size: map.get($spacing-sizes, 4) !default; //16px
 
-$badge-inner-items-gap: map.get($spacing-sizes, 1.5) !default; //6px
+$badge-inner-items-gap: map.get($spacing-sizes, 1.5) !default; //6px

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

@@ -23,4 +23,4 @@ $breadcrumb-divider-color: var(--#{config.$prefix}tertiary-text-emphasis) !defau
 $breadcrumb-divider-active-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $breadcrumb-divider: '\203A' !default; // Unicode character for '›'
 $breadcrumb-divider-size: map.get(spacing.$spacing-sizes, 4) !default;
-$breadcrumb-divider-gap: map.get(spacing.$spacing-sizes, 3) !default;
+$breadcrumb-divider-gap: map.get(spacing.$spacing-sizes, 3) !default;

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

@@ -36,4 +36,4 @@ $card-icon-color: var(--#{config.$prefix}brand-text-emphasis) !default;
 
 $card-width: 100% !default;
 
-$card-hover: false !default;
+$card-hover: false !default;

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

@@ -164,8 +164,71 @@ $chart-bar-opacity-hover: 0.85 !default;
 // Chart Candlestick
 $chart-candlestick-wick-stroke-width: 1 !default;
 $chart-candlestick-wick-opacity: 0.8 !default;
+$chart-candlestick-wick-color: var(--atomix-tertiary-text-emphasis) !default;
+$chart-candlestick-candle-border-width: 1 !default;
+$chart-candlestick-candle-border-color: var(--atomix-border-color) !default;
+$chart-candlestick-candle-border-radius: $border-radius-sm !default;
+$chart-candlestick-transition-duration: $chart-transition-duration !default;
 $chart-volume-bar-opacity: 0.3 !default;
 $chart-volume-bar-opacity-hover: 0.6 !default;
+$chart-volume-bar-spacing: map.get($spacing-sizes, 1) !default;
+
+// Chart Treemap
+$chart-treemap-node-border-width: 1 !default;
+$chart-treemap-node-border-color: var(--atomix-border-color) !default;
+$chart-treemap-node-border-radius: $border-radius-sm !default;
+$chart-treemap-node-transition-duration: $chart-transition-duration !default;
+$chart-treemap-node-hover-scale: 1.02 !default;
+$chart-treemap-node-hover-shadow: $box-shadow-md !default;
+$chart-treemap-node-selected-border-width: 2 !default;
+$chart-treemap-node-selected-border-color: var(--atomix-primary-border-subtle) !default;
+$chart-treemap-node-selected-shadow: $box-shadow-lg !default;
+$chart-treemap-label-font-size: $font-size-sm !default;
+$chart-treemap-label-font-weight: $font-weight-medium !default;
+$chart-treemap-label-color: var(--atomix-text-primary) !default;
+$chart-treemap-label-padding: map.get($spacing-sizes, 2) !default;
+$chart-treemap-label-min-size: 1000 !default; // Minimum area to show label
+
+// Chart Funnel
+$chart-funnel-segment-border-width: 1 !default;
+$chart-funnel-segment-border-color: var(--atomix-border-color) !default;
+$chart-funnel-segment-border-radius: $border-radius-sm !default;
+$chart-funnel-segment-transition-duration: $chart-transition-duration !default;
+$chart-funnel-segment-gap: map.get($spacing-sizes, 1) !default;
+$chart-funnel-segment-hover-opacity: 0.9 !default;
+$chart-funnel-segment-hover-shadow: $box-shadow-sm !default;
+$chart-funnel-label-font-size: $font-size-sm !default;
+$chart-funnel-label-font-weight: $font-weight-medium !default;
+$chart-funnel-label-color: var(--atomix-text-primary) !default;
+$chart-funnel-label-padding: map.get($spacing-sizes, 2) !default;
+$chart-funnel-conversion-font-size: $font-size-xs !default;
+$chart-funnel-conversion-font-weight: $font-weight-semibold !default;
+$chart-funnel-conversion-color: var(--atomix-secondary-text-emphasis) !default;
+$chart-funnel-conversion-spacing: map.get($spacing-sizes, 1) !default;
+
+// Chart Heatmap
+$chart-heatmap-cell-border-width: 1 !default;
+$chart-heatmap-cell-border-color: var(--atomix-border-color) !default;
+$chart-heatmap-cell-border-radius: $border-radius-sm !default;
+$chart-heatmap-cell-transition-duration: $chart-transition-duration !default;
+$chart-heatmap-cell-hover-scale: 1.05 !default;
+$chart-heatmap-cell-hover-shadow: $box-shadow-sm !default;
+$chart-heatmap-cell-hover-border-width: 2 !default;
+$chart-heatmap-cell-spacing: map.get($spacing-sizes, 1) !default;
+$chart-heatmap-label-font-size: $font-size-xs !default;
+$chart-heatmap-label-font-weight: $font-weight-normal !default;
+$chart-heatmap-label-color: var(--atomix-text-primary) !default;
+$chart-heatmap-axis-label-font-size: $font-size-xs !default;
+$chart-heatmap-axis-label-font-weight: $font-weight-medium !default;
+$chart-heatmap-axis-label-color: var(--atomix-secondary-text-emphasis) !default;
+$chart-heatmap-axis-label-spacing: map.get($spacing-sizes, 2) !default;
+$chart-heatmap-legend-title-font-size: $font-size-sm !default;
+$chart-heatmap-legend-title-font-weight: $font-weight-semibold !default;
+$chart-heatmap-legend-title-color: var(--atomix-text-primary) !default;
+$chart-heatmap-legend-label-font-size: $font-size-xs !default;
+$chart-heatmap-legend-label-font-weight: $font-weight-normal !default;
+$chart-heatmap-legend-label-color: var(--atomix-secondary-text-emphasis) !default;
+$chart-heatmap-legend-spacing: map.get($spacing-sizes, 3) !default;
 
 // Chart Scatter
 $chart-scatter-point-radius: 4 !default;
@@ -180,7 +243,7 @@ $chart-brush-selection-opacity: 0.3 !default;
 
 // Chart Animations
 $chart-animation-duration: 1s !default;
-$chart-animation-delay: 0.1s !default;
+$chart-animation-delay: 1s !default;
 $chart-animation-easing: ease-out !default;
 $chart-real-time-pulse-duration: 2s !default;
 
@@ -190,7 +253,7 @@ $chart-max-data-points: 500 !default;
 $chart-debounce-delay: 100ms !default;
 
 // Chart Accessibility
-$chart-focus-outline-width: calc(var(--#{$prefix}border-width) * 2) !default;  //2px
+$chart-focus-outline-width: calc(var(--#{$prefix}border-width) * 2) !default; //2px
 $chart-focus-outline-color: var(--atomix-focus-border-color) !default;
 $chart-keyboard-nav-highlight: var(--atomix-primary-bg-subtle) !default;
 

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

@@ -36,5 +36,5 @@ $dropdown-link-border-radius: border-radius.$border-radius !default;
 $dropdown-header-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $dropdown-header-padding: $dropdown-item-padding-y $dropdown-item-padding-x !default;
 
-$dropdown-divider-margin-y:  map.get($spacing-sizes, 2) !default; //8px
+$dropdown-divider-margin-y: map.get($spacing-sizes, 2) !default; //8px
 $dropdown-divider-bg: var(--#{config.$prefix}primary-border-subtle) !default;

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

@@ -8,10 +8,10 @@
 $footer-padding-y: 3rem !default;
 $footer-padding-x: 1rem !default;
 $footer-container-max-width: 1200px !default;
-$footer-bg: var(--#{$prefix}surface) !default;
-$footer-color: var(--#{$prefix}text) !default;
+$footer-bg: var(--#{$prefix}primary-bg) !default;
+$footer-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-border-width: 1px !default;
-$footer-border-color: var(--#{$prefix}border) !default;
+$footer-border-color: var(--#{$prefix}primary-border-subtle) !default;
 
 // 2. Footer Brand Settings
 $footer-brand-margin-bottom: 1.5rem !default;
@@ -19,28 +19,32 @@ $footer-brand-logo-max-width: 200px !default;
 $footer-brand-logo-max-height: 60px !default;
 $footer-brand-name-font-size: 1.5rem !default;
 $footer-brand-name-font-weight: 600 !default;
-$footer-brand-name-color: var(--#{$prefix}text-emphasis) !default;
+$footer-brand-name-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-brand-description-font-size: 0.875rem !default;
-$footer-brand-description-color: var(--#{$prefix}text-muted) !default;
+$footer-brand-description-color: var(--#{$prefix}secondary-text-emphasis) !default;
 $footer-brand-description-margin-top: 0.5rem !default;
+$footer-brand-logo-margin-bottom: 1rem !default;
+$footer-brand-logo-hover-opacity: 0.8 !default;
 
 // 3. Footer Section Settings
 $footer-section-margin-bottom: 2rem !default;
 $footer-section-title-font-size: 1.125rem !default;
 $footer-section-title-font-weight: 600 !default;
-$footer-section-title-color: var(--#{$prefix}text-emphasis) !default;
+$footer-section-title-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-section-title-margin-bottom: 1rem !default;
 $footer-section-content-gap: 0.5rem !default;
+$footer-section-header-gap: 0.5rem !default;
+$footer-section-toggle-padding: 0.75rem 0 !default;
 
 // 4. Footer Link Settings
-$footer-link-color: var(--#{$prefix}text) !default;
+$footer-link-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-link-hover-color: var(--#{$prefix}primary) !default;
 $footer-link-active-color: var(--#{$prefix}primary) !default;
-$footer-link-disabled-color: var(--#{$prefix}text-disabled) !default;
+$footer-link-disabled-color: var(--#{$prefix}disabled-text-emphasis) !default;
 $footer-link-text-decoration: none !default;
-$footer-link-hover-text-decoration: underline !default;
+$footer-link-hover-text-decoration: none !default;
 $footer-link-padding: 0.25rem 0 !default;
-$footer-link-transition: color 0.15s ease-in-out !default;
+$footer-link-transition: all 0.15s ease-in-out !default;
 
 // 5. Footer Social Settings
 $footer-social-gap: 0.75rem !default;
@@ -48,55 +52,55 @@ $footer-social-margin-top: 1rem !default;
 $footer-social-link-size: 2.5rem !default;
 $footer-social-link-size-sm: 2rem !default;
 $footer-social-link-size-lg: 3rem !default;
-$footer-social-link-bg: var(--#{$prefix}surface-variant) !default;
-$footer-social-link-color: var(--#{$prefix}text) !default;
+$footer-social-link-bg: var(--#{$prefix}secondary-bg-subtle) !default;
+$footer-social-link-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-social-link-hover-bg: var(--#{$prefix}primary) !default;
-$footer-social-link-hover-color: var(--#{$prefix}primary-contrast) !default;
+$footer-social-link-hover-color: var(--#{$prefix}component-active-color) !default;
 $footer-social-link-border-radius: 50% !default;
-$footer-social-link-transition: all 0.15s ease-in-out !default;
+$footer-social-link-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
 
 // 6. Footer Newsletter Settings
-$footer-newsletter-bg: var(--#{$prefix}surface-variant) !default;
+$footer-newsletter-bg: var(--#{$prefix}secondary-bg-subtle) !default;
 $footer-newsletter-padding: 1.5rem !default;
 $footer-newsletter-border-radius: 0.5rem !default;
 $footer-newsletter-title-font-size: 1.125rem !default;
 $footer-newsletter-title-font-weight: 600 !default;
-$footer-newsletter-title-color: var(--#{$prefix}text-emphasis) !default;
+$footer-newsletter-title-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-newsletter-title-margin-bottom: 0.5rem !default;
 $footer-newsletter-description-font-size: 0.875rem !default;
-$footer-newsletter-description-color: var(--#{$prefix}text-muted) !default;
+$footer-newsletter-description-color: var(--#{$prefix}secondary-text-emphasis) !default;
 $footer-newsletter-description-margin-bottom: 1rem !default;
-$footer-newsletter-input-border: 1px solid var(--#{$prefix}border) !default;
+$footer-newsletter-input-border: 1px solid var(--#{$prefix}primary-border) !default;
 $footer-newsletter-input-border-radius: 0.375rem !default;
 $footer-newsletter-input-padding: 0.75rem 1rem !default;
 $footer-newsletter-input-font-size: 0.875rem !default;
-$footer-newsletter-input-bg: var(--#{$prefix}surface) !default;
-$footer-newsletter-input-color: var(--#{$prefix}text) !default;
+$footer-newsletter-input-bg: var(--#{$prefix}primary-bg-subtle) !default;
+$footer-newsletter-input-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-newsletter-input-focus-border-color: var(--#{$prefix}primary) !default;
 $footer-newsletter-input-focus-box-shadow: 0 0 0 0.125rem rgba(var(--#{$prefix}primary-rgb), 0.25) !default;
-$footer-newsletter-button-bg: var(--#{$prefix}primary) !default;
-$footer-newsletter-button-color: var(--#{$prefix}primary-contrast) !default;
-$footer-newsletter-button-hover-bg: var(--#{$prefix}primary-hover) !default;
+$footer-newsletter-button-bg: var(--#{$prefix}brand-bg-subtle) !default;
+$footer-newsletter-button-color: var(--#{$prefix}brand-text-emphasis) !default;
+$footer-newsletter-button-hover-bg: var(--#{$prefix}secondary-bg-subtle) !default;
 $footer-newsletter-button-padding: 0.75rem 1.5rem !default;
 $footer-newsletter-button-border-radius: 0.375rem !default;
 $footer-newsletter-button-font-weight: 500 !default;
-$footer-newsletter-button-transition: background-color 0.15s ease-in-out !default;
+$footer-newsletter-button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
 
 // 7. Footer Bottom Settings
 $footer-bottom-padding-top: 1.5rem !default;
 $footer-bottom-margin-top: 2rem !default;
-$footer-bottom-border-top: 1px solid var(--#{$prefix}border) !default;
+$footer-bottom-border-top: 1px solid var(--#{$prefix}primary-border-subtle) !default;
 $footer-copyright-font-size: 0.875rem !default;
-$footer-copyright-color: var(--#{$prefix}text-muted) !default;
-$footer-back-to-top-color: var(--#{$prefix}text) !default;
-$footer-back-to-top-hover-color: var(--#{$prefix}primary) !default;
+$footer-copyright-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+$footer-back-to-top-color: var(--#{$prefix}primary-text-emphasis) !default;
+$footer-back-to-top-hover-color: var(--#{$prefix}secondary-text-emphasis) !default;
 $footer-back-to-top-font-size: 0.875rem !default;
 $footer-back-to-top-font-weight: 500 !default;
-$footer-back-to-top-transition: color 0.15s ease-in-out !default;
+$footer-back-to-top-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
 
 // 8. Footer Divider Settings
 $footer-divider-margin: 2rem 0 !default;
-$footer-divider-border: 1px solid var(--#{$prefix}border) !default;
+$footer-divider-border: 1px solid var(--#{$prefix}primary-border-subtle) !default;
 $footer-divider-opacity: 0.5 !default;
 
 // 9. Footer Size Variants
@@ -110,16 +114,5 @@ $footer-mobile-section-margin-bottom: 1.5rem !default;
 $footer-mobile-brand-margin-bottom: 1rem !default;
 
 // 11. Footer Sticky Settings
-$footer-sticky-z-index: 10 !default;
+$footer-sticky-z-index: 100 !default;
 $footer-sticky-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !default;
-
-// 12. Dark Mode Settings
-$footer-bg-dark: var(--#{$prefix}surface-dark) !default;
-$footer-color-dark: var(--#{$prefix}text-dark) !default;
-$footer-border-color-dark: var(--#{$prefix}border-dark) !default;
-$footer-brand-name-color-dark: var(--#{$prefix}text-emphasis-dark) !default;
-$footer-brand-description-color-dark: var(--#{$prefix}text-muted-dark) !default;
-$footer-section-title-color-dark: var(--#{$prefix}text-emphasis-dark) !default;
-$footer-link-color-dark: var(--#{$prefix}text-dark) !default;
-$footer-link-hover-color-dark: var(--#{$prefix}primary-dark) !default;
-$footer-copyright-color-dark: var(--#{$prefix}text-muted-dark) !default;

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

@@ -24,7 +24,7 @@ $input-padding-y-lg: map.get($spacing-sizes, 3) !default; //12px
 
 $input-border-width: var(--#{$prefix}border-width) !default;
 $input-border-color: var(--#{$prefix}primary-border-subtle) !default;
-$input-hover-border-color: var(--#{$prefix}secondary-border-subtle) !default;
+$input-hover-border-color: $input-border-color !default;
 $input-focus-border-color: $input-hover-border-color !default;
 
 $input-invalid-border-color: var(--#{$prefix}error) !default;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use './settings.spacing'as *;
+@use './settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 

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

@@ -3,7 +3,7 @@
 @use 'settings.config' as config;
 
 $rating-star-size: map.get($spacing-sizes, 8) !default; //32px
-$rating-star-size-sm:map.get($spacing-sizes, 4) !default; //16px
+$rating-star-size-sm: map.get($spacing-sizes, 4) !default; //16px
 $rating-star-size-lg: map.get($spacing-sizes, 12) !default; //48px
 $rating-star-bg: var(--#{config.$prefix}primary) !default;
 $rating-star-half-bg: $rating-star-bg !default;

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

@@ -23,7 +23,7 @@ $tabs-nav-btn-border-color: transparent !default;
 $tabs-nav-btn-border-active-color: var(--#{config.$prefix}brand-border-subtle) !default;
 $tabs-nav-btn-border-disabled-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $tabs-nav-btns-gap: 0px !default;
-$tabs-nav-btn-inner-gap:map.get($spacing-sizes, 2) !default; //8px
+$tabs-nav-btn-inner-gap: map.get($spacing-sizes, 2) !default; //8px
 $tab-nav-btn-icon-size: map.get($spacing-sizes, 5) !default; //20px
 
 $tabs-panel-padding-x: math.div(grid.$grid-gutter-width, 2) !default;

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

@@ -30,13 +30,14 @@ $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:  map.get($spacing-sizes, 2) !default; //8px
-
+$upload-title-margin-top: map.get($spacing-sizes, 2) !default; //8px
+$upload-title-margin-bottom: map.get($spacing-sizes, 2) !default; //8px
+$upload-text-opacity: 0.8 !default; //0.8 - opacity of the text
 $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:  map.get($spacing-sizes, 4) !default; //4px
-
+$upload-text-margin-top: map.get($spacing-sizes, 4) !default; //4px
+$upload-text-margin-bottom: map.get($spacing-sizes, 4) !default; //16px
 $upload-btn-margin-top: map.get($spacing-sizes, 5) !default; //20px
 $upload-btn-margin-left: map.get($spacing-sizes, 4) !default; //16px
 
@@ -46,7 +47,7 @@ $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: map.get($spacing-sizes, 2) !default; //8px
-
+$upload-helper-text-opacity: 0.7 !default; //0.7 - opacity of the helper text
 $upload-disabled-opacity: 0.5 !default;
 
 $upload-loader-padding-x: map.get($spacing-sizes, 3) !default; //12px

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

@@ -100,15 +100,14 @@
 //   );
 // }
 
-
-@keyframes backgroundMoving { 
+@keyframes backgroundMoving {
   0% {
     background-position: 0 0%;
   }
-   250% {
+  250% {
     background-position: 100% 100%;
   }
-   50% {
+  50% {
     background-position: 100% 0%;
   }
   75% {
@@ -117,4 +116,4 @@
   100% {
     background-position: 100% 100%;
   }
-} 
+}

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

@@ -10,19 +10,13 @@
 @mixin dynamic-background(
   $color,
   $transparency: $background-transparency,
-  $background-transparency-enable: $background-transparency-enable,
-  $blur: $background-blur,
-  $use-backdrop-filter: $background-enable-backdrop-filter
+  $background-transparency-enable: $background-transparency-enable
 ) {
   // 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';
-  }
-
   // Apply background based on transparency settings
   @if $background-transparency-enable and $transparency > 0 {
     @if $background-enable-gradient-overlay {
@@ -59,12 +53,6 @@
     background-color: $color;
   }
 
-  // Apply backdrop filter effects based on settings
-  @if $background-enable-backdrop-filter and ($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);
-  }
-
   @if $background-enable-with-shadow {
     box-shadow:
       var(--atomix-box-shadow-inset),

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

@@ -1 +0,0 @@
-

package/src/styles/02-tools/_tools.utility-api.scss

@@ -14,14 +14,14 @@
 
 // Default config for utilities
 $utility-defaults: (
-        responsive: true,
-        rfs: false,
-        print: false,
-        dark: false,
-        class: null,
-        state: null,
-        local-vars: (),
-        rtl: true,
+  responsive: true,
+  rfs: false,
+  print: false,
+  dark: false,
+  class: null,
+  state: null,
+  local-vars: (),
+  rtl: true,
 ) !default;
 
 // Core function to generate utility classes
@@ -37,7 +37,7 @@ $utility-defaults: (
   @each $key, $value in $values {
     $properties: map.get($utility, property);
     $property-class: map.get($utility, class);
-    
+
     // Handle case where property-class is null
     @if $property-class == null and $properties {
       $property-class: if(
@@ -51,15 +51,23 @@ $utility-defaults: (
     // Create a local copy of infix to avoid affecting other utilities
     $local-infix: $infix;
     $state: map.get($utility, state);
-    $local-infix: if($state, if(meta.type-of($state) == 'string', '#{$state}#{$local-infix}', $local-infix), $local-infix);
+    $local-infix: if(
+      $state,
+      if(meta.type-of($state) == 'string', '#{$state}#{$local-infix}', $local-infix),
+      $local-infix
+    );
 
     // Escape special characters in key for valid CSS class names
     $escaped-key: if($key, _escape-key($key), null);
-    
+
     @if map.get($utility, class) == null {
       // Generate class with property name as class
-      $class-name: if($key, '#{$property-class}-#{$escaped-key}#{$local-infix}', '#{$property-class}#{$local-infix}');
-      
+      $class-name: if(
+        $key,
+        '#{$property-class}-#{$escaped-key}#{$local-infix}',
+        '#{$property-class}#{$local-infix}'
+      );
+
       .#{$class-name} {
         @if $css-var {
           // Handle CSS variable generation
@@ -77,7 +85,7 @@ $utility-defaults: (
       // Generate class with custom class name
       $base-class: map.get($utility, class);
       $modifier: if($key, '-#{$escaped-key}', '');
-      
+
       .#{$base-class}#{$local-infix}#{$modifier} {
         @if $css-var and $properties {
           // Handle CSS variable generation with properties
@@ -126,9 +134,9 @@ $utility-defaults: (
 ) {
   // Set default breakpoint infix generator if not provided
   $breakpoint-infix-generator: if(
-                  $breakpoint-infix-generator,
-                  $breakpoint-infix-generator,
-                  get-breakpoint-infix
+    $breakpoint-infix-generator,
+    $breakpoint-infix-generator,
+    get-breakpoint-infix
   );
 
   @each $utility, $config in $utilities {
@@ -138,19 +146,19 @@ $utility-defaults: (
     // Only process if the utility is not explicitly set to false
     @if map.get($config, generated) != false {
       $utility-map: (
-              property: map.get($config, property),
-              values: map.get($config, values),
-              class: map.get($config, class),
-              state: map.get($config, state),
-              rtl: map.get($config, rtl),
-              css-var: map.get($config, css-var),
-              local-vars: map.get($config, local-vars),
+        property: map.get($config, property),
+        values: map.get($config, values),
+        class: map.get($config, class),
+        state: map.get($config, state),
+        rtl: map.get($config, rtl),
+        css-var: map.get($config, css-var),
+        local-vars: map.get($config, local-vars),
       );
 
       @include generate-responsive-utilities(
-                      $utility-map,
-                      $breakpoints,
-                      $breakpoint-infix-generator
+        $utility-map,
+        $breakpoints,
+        $breakpoint-infix-generator
       );
     }
   }
@@ -182,10 +190,10 @@ $utility-defaults: (
 
   @each $key in $keys {
     $result: map.merge(
-                    $result,
-                    (
-                            $key: if($index <= list.length($values), list.nth($values, $index), null),
-                    )
+      $result,
+      (
+        $key: if($index <= list.length($values), list.nth($values, $index), null),
+      )
     );
     $index: $index + 1;
   }
@@ -196,11 +204,11 @@ $utility-defaults: (
 // Helper function to replace strings
 @function str-replace($string, $search, $replace: '') {
   $index: string.index($string, $search);
-  
+
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + 
+    @return str-slice($string, 1, $index - 1) + $replace +
       str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
   }
-  
+
   @return $string;
 }

package/src/styles/03-generic/_generic.root.scss

@@ -10,7 +10,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-
 :root,
 [data-#{config.$prefix}color-mode='light'] {
   // Note: Custom variable values only support SassScript inside `#{}`.
@@ -66,8 +65,6 @@
   --#{config.$prefix}font-sans-serif: #{meta.inspect(typography.$font-family-sans-serif)};
   --#{config.$prefix}font-monospace: #{meta.inspect(typography.$font-family-monospace)};
 
-  
-
   // Root and body
   // scss-docs-start root-body-variables
   @if typography.$font-size-root != null {
@@ -172,7 +169,7 @@
       --#{config.$prefix}#{$color}-gradient: #{$value};
     }
 
-  --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, dark)};
+    --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, dark)};
 
     --#{config.$prefix}box-shadow: #{box-shadow.$box-shadow-dark};
     --#{config.$prefix}box-shadow-xs: #{box-shadow.$box-shadow-xs-dark};

package/src/styles/04-elements/_elements.body.scss

@@ -17,5 +17,4 @@ body {
   &.is-modal-open {
     overflow: hidden;
   }
-
 }