@shohojdhara/atomix 0.6.2 → 0.6.3

package/src/lib/types/components.ts

@@ -299,35 +299,35 @@ export interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Phase 3: Responsive & Performance Optimization props
    */
-  
+
   /**
    * Device preset for responsive optimization
-   * 
+   *
    * Pre-configured presets that adjust glass parameters based on device capabilities
    * - 'performance': Optimized for low-end devices (reduced octaves, lower quality)
    * - 'balanced': Balanced quality and performance (default)
    * - 'quality': Maximum visual quality (high octaves, ultra quality)
-   * 
+   *
    * @default 'balanced'
    */
   devicePreset?: 'performance' | 'balanced' | 'quality';
-  
+
   /**
    * Disable responsive breakpoint system
-   * 
+   *
    * When true, disables automatic parameter adjustment based on viewport size
    * Use this when you want full manual control over all parameters
-   * 
+   *
    * @default false
    */
   disableResponsiveBreakpoints?: boolean;
 
   /**
    * Priority level for rendering and performance scheduling
-   * 
+   *
    * Controls the rendering priority of the glass effect, allowing for performance
    * optimization in complex scenes. Higher priority elements are rendered first.
-   * 
+   *
    * @default undefined
    */
   priority?: number;
@@ -361,6 +361,7 @@ export type ThemeColor =
   | 'invert'
   | 'brand'
   | 'error'
+  | 'danger'
   | 'success'
   | 'warning'
   | 'info'
@@ -370,7 +371,7 @@ export type ThemeColor =
 /**
  * Component variant including theme colors and outline variants
  */
-export type Variant = ThemeColor | `outline-${ThemeColor}` | 'link';
+export type Variant = ThemeColor | `outline-${ThemeColor}` | 'link' | 'ghost';
 
 /**
  * Base component properties interface
@@ -1204,6 +1205,17 @@ export interface SpinnerProps extends BaseComponentProps {
    */
   'aria-label'?: string;
 
+  /**
+   * ARIA live region setting
+   * @default 'polite'
+   */
+  'aria-live'?: 'off' | 'assertive' | 'polite';
+
+  /**
+   * ARIA description
+   */
+  'aria-describe'?: string;
+
   /**
    * ARIA role for the spinner
    * @default 'status'
@@ -1217,7 +1229,6 @@ export interface SpinnerProps extends BaseComponentProps {
   glass?: AtomixGlassProps | boolean;
 }
 
-
 /**
  * Icon weight/style options
  */
@@ -1527,8 +1538,6 @@ export interface MegaMenuLinkProps extends BaseComponentProps {
    */
   linkComponent?: React.ElementType;
 
-
-
   /**
    * Link content
    */
@@ -2189,57 +2198,6 @@ export interface TodoProps extends BaseComponentProps {
   glass?: AtomixGlassProps | boolean;
 }
 
-/**
- * Spinner component properties
- */
-export interface SpinnerProps extends BaseComponentProps {
-  /**
-   * Spinner color variant
-   * @default 'primary'
-   */
-  variant?: ThemeColor;
-
-  /**
-   * Spinner size
-   * @default 'md'
-   */
-  size?: Size;
-
-  /**
-   * Whether the spinner should be displayed fullscreen
-   */
-  fullscreen?: boolean;
-
-  /**
-   * Accessible label for screen readers
-   * @default 'Loading'
-   */
-  'aria-label'?: string;
-
-  /**
-   * ARIA live property to control how updates are announced
-   * @default 'polite'
-   */
-  'aria-live'?: 'off' | 'polite' | 'assertive';
-
-  /**
-   * ARIA descriptor property for additional description
-   */
-  'aria-describe'?: string;
-
-  /**
-   * ARIA role for the spinner
-   * @default 'status'
-   */
-  role?: 'status' | 'alert';
-
-  /**
-   * Glass morphism effect for the spinner
-   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
-   */
-  glass?: AtomixGlassProps | boolean;
-}
-
 /**
  * Icon size options
  */

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

@@ -77,4 +77,9 @@ $spacing-sizes: (
 $spacing-important: false !default;
 $enable-negative-margins: false !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;
+$negative-spacers: null !default;
+
+@if $enable-negative-margins {
+  $negative-spacers: negativify-map($spacing-sizes) !default;
+}
+

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

@@ -396,7 +396,7 @@ summary {
     min-width: 992px !important;
   }
 
-  .container {
+  .o-container {
     min-width: 992px !important;
   }
 }

package/src/styles/06-components/_components.atomix-glass.scss

@@ -51,9 +51,9 @@
   --_glass-z-content: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
 
   --atomix-glass-border-shadow:
-    0 0 0 0.5px var(--atomix-glass-border-color, rgba(255, 255, 255, 0.45)) inset,
-    0 1px 2px var(--atomix-glass-inner-shadow-color, rgba(255, 255, 255, 0.18)) inset,
-    0 2px 6px var(--atomix-glass-outer-shadow-color, rgba(0, 0, 0, 0.28));
+    0 0 0 0.5px var(--atomix-glass-border-color, #{$glass-border-color}) inset,
+    0 1px 2px var(--atomix-glass-inner-shadow-color, #{$glass-inner-shadow-color}) inset,
+    0 2px 6px var(--atomix-glass-outer-shadow-color, #{$glass-outer-shadow-color});
 
   // Base layer styles for effect layers
   &__hover-1,
@@ -93,46 +93,37 @@
   }
 
   &__hover-1 {
-    transition:
-      var(--_glass-transition),
-      background var(--atomix-transition-duration-base, 0.3s)
-        var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
     opacity: var(--atomix-glass-hover-1-opacity, 0);
     background: var(
       --atomix-glass-hover-1-gradient,
       radial-gradient(
         60% 60% at 50% 0%,
-        var(--atomix-glass-hover-1-start-color, rgba(255, 255, 255, 0.18)) 0%,
-        var(--atomix-glass-hover-1-end-color, rgba(255, 255, 255, 0)) 60%
+        var(--atomix-glass-hover-1-start-color, #{$glass-hover-1-start-color}) 0%,
+        var(--atomix-glass-hover-1-end-color, #{$glass-hover-1-end-color}) 60%
       )
     );
   }
 
   &__hover-2 {
-    transition:
-      var(--_glass-transition),
-      background var(--atomix-transition-duration-base, 0.3s)
-        var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
     opacity: var(--atomix-glass-hover-2-opacity, 0);
     background: var(
       --atomix-glass-hover-2-gradient,
       radial-gradient(
         80% 80% at 50% 100%,
-        var(--atomix-glass-hover-2-start-color, rgba(0, 0, 0, 0.12)) 0%,
-        var(--atomix-glass-hover-2-end-color, rgba(0, 0, 0, 0)) 60%
+        var(--atomix-glass-hover-2-start-color, #{$glass-hover-2-start-color}) 0%,
+        var(--atomix-glass-hover-2-end-color, #{$glass-hover-2-end-color}) 60%
       )
     );
   }
 
   &__hover-3 {
-    transition: var(--_glass-transition);
     opacity: var(--atomix-glass-hover-3-opacity, 0);
     background: var(
       --atomix-glass-hover-3-gradient,
       linear-gradient(
         180deg,
-        var(--atomix-glass-hover-3-start-color, rgba(255, 255, 255, 0.06)) 0%,
-        var(--atomix-glass-hover-3-end-color, rgba(255, 255, 255, 0)) 100%
+        var(--atomix-glass-hover-3-start-color, #{$glass-hover-3-start-color}) 0%,
+        var(--atomix-glass-hover-3-end-color, #{$glass-hover-3-end-color}) 100%
       )
     );
   }
@@ -144,8 +135,8 @@
       --atomix-glass-base-gradient,
       linear-gradient(
         180deg,
-        var(--atomix-glass-base-start-color, rgba(255, 255, 255, 0.08)) 0%,
-        var(--atomix-glass-base-end-color, rgba(255, 255, 255, 0.02)) 100%
+        var(--atomix-glass-base-start-color, #{$glass-base-start-color}) 0%,
+        var(--atomix-glass-base-end-color, #{$glass-base-end-color}) 100%
       )
     );
   }
@@ -157,8 +148,8 @@
       --atomix-glass-overlay-gradient,
       radial-gradient(
         120% 120% at 50% -10%,
-        var(--atomix-glass-overlay-start-color, rgba(255, 255, 255, 0.12)) 0%,
-        var(--atomix-glass-overlay-end-color, rgba(255, 255, 255, 0)) 40%
+        var(--atomix-glass-overlay-start-color, #{$glass-overlay-start-color}) 0%,
+        var(--atomix-glass-overlay-end-color, #{$glass-overlay-end-color}) 40%
       )
     );
   }
@@ -166,7 +157,7 @@
   &__overlay-highlight {
     position: absolute;
     inset: var(--atomix-spacing-0-5, 0.125rem);
-    
+
     pointer-events: none;
     border-radius: var(--_glass-radius);
     transform: var(--_glass-transform);
@@ -178,8 +169,8 @@
       --atomix-glass-overlay-highlight-bg,
       linear-gradient(
         180deg,
-        var(--atomix-glass-highlight-start-color, rgba(255, 255, 255, 0.24)) 0%,
-        var(--atomix-glass-highlight-end-color, rgba(255, 255, 255, 0)) 60%
+        var(--atomix-glass-highlight-start-color, #{$glass-highlight-start-color}) 0%,
+        var(--atomix-glass-highlight-end-color, #{$glass-highlight-end-color}) 60%
       )
     );
   }
@@ -221,8 +212,8 @@
   &__border-backdrop {
     mix-blend-mode: overlay;
     z-index: var(--_glass-z-border-1);
-    backdrop-filter: blur(30px) saturate(140%) brightness(110%);
-    box-shadow: var(--atomix-glass-border-shadow);
+    backdrop-filter: #{$glass-backdrop-filter};
+    // box-shadow: var(--atomix-glass-border-shadow);
   }
 
   &__border-1 {
@@ -315,11 +306,11 @@
     z-index: var(--_glass-z-background);
 
     &--dark {
-      background-color: var(--atomix-gray-9, #1f2937);
+      background-color: #{$glass-background-dark-color};
     }
 
     &--black {
-      background-color: var(--atomix-black, #000000);
+      background-color: #{$glass-background-black-color};
       mix-blend-mode: overlay;
     }
 

package/src/styles/06-components/_components.data-table.scss

@@ -3,6 +3,7 @@
 @use '../02-tools/tools.color-functions' as *;
 @use '../02-tools/tools.to-rgb' as *;
 @use '../02-tools/tools.background' as *;
+@use '../02-tools/tools.rem' as *;
 
 // Component: DataTable
 // Description: Styles for the DataTable component
@@ -84,7 +85,7 @@
   }
 
   &__column-filter {
-    width: 120px;
+    width: rem(120px);
     padding: 0.25rem 0.5rem;
     font-size: 0.875rem;
     border: 1px solid var(--#{config.$prefix}border-color);
@@ -102,7 +103,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: 4px;
+    width: rem(4px);
     height: 100%;
     cursor: col-resize;
     background-color: transparent;
@@ -159,7 +160,7 @@
 
   // Selection cell
   &__cell--selection {
-    width: 48px;
+    width: rem(48px);
     text-align: center;
     padding: data-table.$data-table-cell-padding-y 0.5rem;
   }
@@ -254,7 +255,7 @@
 
   &__input {
     // Styles are now inherited from c-input class
-    width: 240px;
+    width: rem(240px);
   }
 }
 

package/src/styles/06-components/_components.dynamic-background.scss

@@ -1,11 +1,12 @@
-@use '../../styles/01-settings/settings.colors' as *;
-@use '../../styles/01-settings/settings.background' as *;
-@use '../../styles/02-tools/tools.background' as *;
+@use '../01-settings/settings.colors' as *;
+@use '../01-settings/settings.background' as *;
+@use '../02-tools/tools.background' as *;
+@use '../02-tools/tools.rem' as *;
 
 .c-dynamic-background {
   // Base styles
-  min-height: 200px;
-  border-radius: 16px;
+  min-height: rem(200px);
+  border-radius: rem(16px);
   
   // Glass variant (default)
   &--glass {
@@ -37,9 +38,9 @@
       padding: $background-border-width;
       background: linear-gradient(
         $background-gradient-angle,
-        rgba(255, 255, 255, $background-border-opacity * 1.2) 0%,
-        rgba(255, 255, 255, $background-border-opacity * 0.6) 50%,
-        rgba(255, 255, 255, $background-border-opacity * 0.3) 100%
+        rgba($white, $background-border-opacity * 1.2) 0%,
+        rgba($white, $background-border-opacity * 0.6) 50%,
+        rgba($white, $background-border-opacity * 0.3) 100%
       );
       -webkit-mask:
         linear-gradient(#fff 0 0) content-box,

package/src/styles/06-components/_components.footer.scss

@@ -7,6 +7,7 @@
 @use '../02-tools/tools.animations' as *;
 @use '../02-tools/tools.background' as *;
 @use '../02-tools/tools.to-rgb' as *;
+@use '../01-settings/settings.colors' as *;
 
 .c-footer {
   $root: &;
@@ -85,7 +86,7 @@
       align-items: center;
       text-align: center;
       gap: clamp(1.5rem, 4vw, 2.5rem);
-      max-width: 600px;
+      max-width: rem(600px);
       margin-left: auto;
       margin-right: auto;
     }
@@ -227,7 +228,7 @@
 
         &:not(#{$root}__section--collapsed) {
           #{$root}__section-content {
-            max-height: 500px;
+            max-height: rem(500px);
           }
         }
       }
@@ -348,7 +349,7 @@
         background: linear-gradient(
           45deg,
           transparent 30%,
-          rgba(255, 255, 255, 0.1) 50%,
+          rgba($white, 0.1) 50%,
           transparent 70%
         );
         transform: translateX(-100%);
@@ -546,7 +547,7 @@
         background: linear-gradient(
           45deg,
           transparent 30%,
-          rgba(255, 255, 255, 0.2) 50%,
+          rgba($white, 0.2) 50%,
           transparent 70%
         );
         transform: translateX(-100%);
@@ -630,7 +631,7 @@
       background: linear-gradient(
         45deg,
         transparent 30%,
-        rgba(255, 255, 255, 0.1) 50%,
+        rgba($white, 0.1) 50%,
         transparent 70%
       );
       transform: translateX(-100%);
@@ -729,7 +730,7 @@
       align-items: center;
       text-align: center;
       gap: clamp(1.5rem, 4vw, 2.5rem);
-      max-width: 600px;
+      max-width: rem(600px);
       margin-left: auto;
       margin-right: auto;
     }
@@ -738,7 +739,7 @@
   &--flexible {
     #{$root}__section-col {
       flex: 1 1 auto;
-      min-width: 250px;
+      min-width: rem(250px);
     }
   }
 

package/src/styles/06-components/_components.hero.scss

@@ -91,7 +91,7 @@
 
     @include media-breakpoint-up(md) {
       font-size: var(--#{$prefix}hero-title-font-size);
-      line-height: 72px;
+      line-height: rem(72px);
     }
   }
 
@@ -111,7 +111,7 @@
   &__image {
     width: 100%;
     max-width: none;
-    height: 380px;
+    height: rem(380px);
     @include object-fit(cover);
   }
 

package/src/styles/06-components/_components.messages.scss

@@ -357,8 +357,8 @@
     // Text messages styling
     #{$root}__text {
       backdrop-filter: blur(8px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      border: 1px solid rgba($white, 0.2);
+      box-shadow: 0 1px 3px rgba($black, 0.05);
       @include dynamic-background(var(--#{config.$prefix}body-bg), $enable-transparency: true);
     }
 
@@ -387,8 +387,8 @@
     #{$root}__file {
       border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
       backdrop-filter: blur(8px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      border: 1px solid rgba($white, 0.2);
+      box-shadow: 0 1px 3px rgba($black, 0.05);
       @include dynamic-background(
         var(--#{config.$prefix}brand-bg-subtle),
         $enable-transparency: true
@@ -397,7 +397,7 @@
 
     #{$root}__file-icon {
       backdrop-filter: blur(8px);
-      border: 1px solid rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba($white, 0.15);
       @include dynamic-background(
         var(--#{config.$prefix}brand-bg-subtle),
         $enable-transparency: true
@@ -406,44 +406,44 @@
 
     // Image styling
     #{$root}__image {
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      border: 1px solid rgba($white, 0.3);
+      box-shadow: 0 2px 8px rgba($black, 0.1);
     }
 
     // Avatar styling
     #{$root}__avatar {
-      border: 2px solid rgba(255, 255, 255, 0.4);
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+      border: 2px solid rgba($white, 0.4);
+      box-shadow: 0 2px 6px rgba($black, 0.1);
     }
 
     // Name label styling
     #{$root}__name {
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      text-shadow: 0 1px 2px rgba($black, 0.1);
       font-weight: typo.$font-weight-semibold;
     }
 
     // Time label styling
     #{$root}__time {
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      text-shadow: 0 1px 2px rgba($black, 0.1);
     }
 
     // Enhanced form styling
     #{$root}__form {
       padding-top: rem.rem(12px);
-      border-top: 1px solid rgba(255, 255, 255, 0.2);
+      border-top: 1px solid rgba($white, 0.2);
       margin-top: rem.rem(16px);
     }
 
     // Input group styling
     #{$root}__input {
-      background: rgba(255, 255, 255, 0.3);
+      background: rgba($white, 0.3);
       backdrop-filter: blur(8px);
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+      border: 1px solid rgba($white, 0.3);
+      box-shadow: 0 1px 4px rgba($black, 0.05);
       color: var(--#{config.$prefix}primary-text-emphasis);
 
       &:focus {
-        background: rgba(255, 255, 255, 0.45);
+        background: rgba($white, 0.45);
         border-color: var(--#{config.$prefix}primary);
         box-shadow: 0 0 0 3px rgba(var(--#{config.$prefix}primary-rgb), 0.15);
       }

package/src/styles/06-components/_components.select.scss

@@ -71,7 +71,7 @@
     @include transition.basic-transition();
   }
 
-  &__dropdown {
+  &__body {
     position: absolute;
     width: 100%;
     height: 0px;
@@ -80,7 +80,6 @@
     border-radius: var(--#{$prefix}select-panel-border-radius);
     box-shadow: var(--#{$prefix}select-panel-box-shadow);
     overflow: hidden;
-    z-index: 99;
     @include transition.basic-transition;
     @include dynamic-background(var(--#{$prefix}select-panel-bg));
   }
@@ -116,6 +115,20 @@
     --#{$prefix}select-font-size: var(--#{$prefix}select-font-size-lg);
   }
 
+  &--glass {
+    #{$root}__selected {
+      @include dynamic-background(var(--#{$prefix}select-bg), 0.5, true);
+    }
+
+    #{$root}__body {
+      @include dynamic-background(var(--#{$prefix}select-panel-bg), 0.5, true);
+    }
+
+    #{$root}__item {
+      @include dynamic-background(var(--#{$prefix}select-item-bg), 0.2, true);
+    }
+  }
+
   &.is-open {
     --#{$prefix}select-bg: var(--#{$prefix}select-expanded-bg);
     #{$root}__toggle-icon {

package/src/styles/06-components/_components.upload.scss

@@ -187,7 +187,7 @@
 
   &__loader-progress {
     display: flex;
-    gap: 10px;
+    gap: rem(10px);
     color: var(--#{$prefix}upload-loader-text-color);
     font-size: var(--#{$prefix}upload-loader-text-font-size);
     line-height: 1.43;
@@ -222,8 +222,8 @@
   }
 
   &__loader-bar {
-    width: 22px;
-    height: 22px;
+    width: rem(22px);
+    height: rem(22px);
 
     svg {
       width: 100%;