@shohojdhara/atomix 0.2.3 → 0.2.5

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

@@ -88,7 +88,6 @@
     display: flex;
     opacity: 0;
     visibility: hidden;
-    transform-origin: top center;
     // Improved transitions - shorter and with better easing
     transition:
       opacity var(--#{$prefix}dropdown-animation-duration)
@@ -97,11 +96,15 @@
         var(--#{$prefix}dropdown-animation-timing),
       transform var(--#{$prefix}dropdown-animation-duration)
         var(--#{$prefix}dropdown-animation-timing);
-    transform: translateY(-15px) scale(0.95);
     pointer-events: none;
-    will-change: transform, opacity, visibility;
 
-    &.is-open {
+    &:not(.is-glass) {
+      will-change: transform, opacity, visibility;
+      transform: translateY(-15px) scale(0.95);
+      transform-origin: top center;
+    }
+
+    &.is-open:not(.is-glass) {
       opacity: 1;
       transform: translateY(0) scale(1);
       visibility: visible;
@@ -110,7 +113,13 @@
       pointer-events: auto;
     }
 
-    &:not(.is-open) {
+    &.is-open.is-glass {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    &:not(.is-open):not(.is-glass) {
       animation: #{$prefix}dropdown-fade-out var(--#{$prefix}dropdown-animation-duration)
         var(--#{$prefix}dropdown-animation-timing) forwards;
     }
@@ -177,14 +186,17 @@
     padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
     list-style: none;
     @include mb(0);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.08);
     @include dynamic-background(var(--#{$prefix}dropdown-bg));
     border-radius: var(--#{$prefix}dropdown-border-radius);
     box-shadow: var(--#{$prefix}dropdown-box-shadow);
     overflow: hidden;
 
     &--glass {
-      @include dynamic-background(var(--#{$prefix}dropdown-bg), $background-transparency-enable: true);
+      @include dynamic-background(
+        var(--#{$prefix}dropdown-bg),
+        $background-transparency-enable: true
+      );
       box-shadow: var(--#{$prefix}dropdown-box-shadow);
     }
   }

package/src/styles/06-components/_components.edge-panel.scss

@@ -349,3 +349,106 @@
     transform: translateY(100%);
   }
 }
+
+// Glass Variant Styles
+.c-edge-panel--glass {
+  position: absolute;
+  z-index: unset;
+
+  .c-edge-panel__container {
+    background: transparent;
+    box-shadow: none;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+    z-index: unset;
+    will-change: initial;
+    transform: none !important;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .c-edge-panel__glass-content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100vh;
+    padding: 0;
+    border-radius: inherit;
+    transition: opacity 0.3s ease;
+  }
+
+  .c-edge-panel__header {
+    background: transparent;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+    flex-shrink: 0;
+    padding: var(--#{$prefix}edge-panel-padding-y) var(--#{$prefix}edge-panel-padding-x);
+  }
+
+  .c-edge-panel__body {
+    background: transparent;
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--#{$prefix}edge-panel-padding-y) var(--#{$prefix}edge-panel-padding-x);
+  }
+
+  .c-edge-panel__close {
+    background: rgba(255, 255, 255, 0.05);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    &:focus-visible {
+      outline-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  .c-edge-panel__backdrop {
+    animation: fadeIn 0.3s ease forwards;
+    z-index: 0;
+
+    &.is-animating-out {
+      animation: fadeOut 0.3s ease forwards;
+    }
+  }
+
+  // Remove borders for glass variant on all positions
+  &.c-edge-panel--start .c-edge-panel__glass-wrapper {
+    animation: slideInStart 0.3s ease forwards;
+
+    &.is-animating-out {
+      animation: slideOutStart 0.3s ease forwards;
+    }
+  }
+
+  &.c-edge-panel--end .c-edge-panel__glass-wrapper {
+    animation: slideInEnd 0.3s ease forwards;
+
+    &.is-animating-out {
+      animation: slideOutEnd 0.3s ease forwards;
+    }
+  }
+
+  &.c-edge-panel--top .c-edge-panel__glass-wrapper {
+    animation: slideInTop 0.3s ease forwards;
+  }
+
+  &.c-edge-panel--bottom .c-edge-panel__glass-wrapper {
+    animation: slideInBottom 0.3s ease forwards;
+  }
+
+  &.c-edge-panel--bottom .c-edge-panel__container,
+  &.c-edge-panel--top .c-edge-panel__container {
+    width: 100vw;
+    height: auto;
+  }
+
+  &.c-edge-panel--bottom .c-edge-panel__glass-content,
+  &.c-edge-panel--top .c-edge-panel__glass-content {
+    width: 100vw;
+    height: auto;
+  }
+}

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

@@ -6,6 +6,7 @@
 @use '../01-settings/settings.maps' as maps;
 @use '../02-tools/tools.animations' as *;
 @use '../02-tools/tools.background' as *;
+@use '../02-tools/tools.to-rgb' as *;
 
 .c-footer {
   $root: &;
@@ -24,6 +25,12 @@
   --#{$prefix}footer-newsletter-padding: #{rem($footer-newsletter-padding)};
   --#{$prefix}footer-bottom-padding-top: #{rem($footer-bottom-padding-top)};
   --#{$prefix}footer-bottom-margin-top: #{rem($footer-bottom-margin-top)};
+  --#{$prefix}footer-brand-logo-margin-bottom: #{rem($footer-brand-logo-margin-bottom)};
+  --#{$prefix}footer-brand-logo-hover-opacity: #{$footer-brand-logo-hover-opacity};
+  --#{$prefix}footer-section-header-gap: #{rem($footer-section-header-gap)};
+  --#{$prefix}footer-section-toggle-padding: #{$footer-section-toggle-padding};
+  --#{$prefix}footer-bg-rgb: #{to-rgb($footer-bg)};
+  --#{$prefix}disabled-opacity: 0.6;
 
   // Base Styles
   @include dynamic-background(var(--#{$prefix}footer-bg));
@@ -32,6 +39,21 @@
   padding: var(--#{$prefix}footer-padding-y) 0;
   position: relative;
 
+  &--glass {
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+    
+    #{$root}__glass {
+      @include dynamic-background(rgba(var(--#{$prefix}footer-bg-rgb), 0.5, true));
+      color: var(--#{$prefix}footer-color);
+      border-top: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}footer-border-color);
+      padding: var(--#{$prefix}footer-padding-y) 0;
+    }
+  }
+
   &__container {
     display: flex;
     flex-direction: column;
@@ -42,28 +64,49 @@
   }
 
   &__sections {
-    display: grid;
-    gap: var(--#{$prefix}footer-section-margin-bottom);
     margin-bottom: var(--#{$prefix}footer-bottom-margin-top);
-    grid-template-columns: 1fr;
+    width: 100%;
+    max-width: var(--#{$prefix}footer-container-max-width);
+    margin-left: auto;
+    margin-right: auto;
 
-    @include media.media-up('md') {
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: clamp(2rem, 4vw, 3rem);
+    &--columns {
+      // Default grid behavior
+    }
+
+    &--centered {
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--stacked {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: clamp(1.5rem, 4vw, 2.5rem);
+      max-width: 600px;
+      margin-left: auto;
+      margin-right: auto;
     }
   }
 
   // Brand Section
   &__brand {
+    grid-area: brand;
     margin-bottom: var(--#{$prefix}footer-brand-margin-bottom);
 
+    @include media.media-up('md') {
+      margin-bottom: 0;
+    }
+
     &-logo {
       display: inline-block;
-      margin-bottom: 1rem;
+      margin-bottom: var(--#{$prefix}footer-brand-logo-margin-bottom);
       transition: opacity 0.2s ease;
 
       &:hover {
-        opacity: 0.8;
+        opacity: var(--#{$prefix}footer-brand-logo-hover-opacity);
       }
 
       img {
@@ -95,7 +138,12 @@
 
   // Section
   &__section {
-    margin-bottom: var(--#{$prefix}footer-section-margin-bottom);
+    margin-bottom: 0; // Reset margin as grid gap handles spacing
+
+    // Only add margin on mobile when not using grid areas
+    @include media.media-down('sm') {
+      margin-bottom: var(--#{$prefix}footer-section-margin-bottom);
+    }
 
     &-header {
       margin-bottom: #{$footer-section-title-margin-bottom};
@@ -103,7 +151,7 @@
       &-content {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: var(--#{$prefix}footer-section-header-gap);
       }
     }
 
@@ -112,7 +160,7 @@
       align-items: center;
       justify-content: space-between;
       width: 100%;
-      padding: 0.75rem 0;
+      padding: var(--#{$prefix}footer-section-toggle-padding);
       background: none;
       border: none;
       cursor: pointer;
@@ -134,6 +182,7 @@
 
     &-title {
       margin: 0;
+      width: 100%;
       font-size: #{$footer-section-title-font-size};
       font-weight: #{$footer-section-title-font-weight};
       color: #{$footer-section-title-color};
@@ -150,7 +199,7 @@
     &-chevron {
       font-size: 0.875rem;
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      color: var(--#{$prefix}text-muted);
+      color: var(--#{$prefix}gray-6);
     }
 
     &-content {
@@ -246,7 +295,7 @@
       color: #{$footer-link-disabled-color};
       cursor: not-allowed;
       pointer-events: none;
-      opacity: 0.6;
+      opacity: var(--#{$prefix}disabled-opacity);
     }
 
     &-icon {
@@ -296,7 +345,12 @@
         content: '';
         position: absolute;
         inset: 0;
-        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+        background: linear-gradient(
+          45deg,
+          transparent 30%,
+          rgba(255, 255, 255, 0.1) 50%,
+          transparent 70%
+        );
         transform: translateX(-100%);
         transition: transform 0.6s ease;
       }
@@ -329,7 +383,7 @@
       }
 
       &--disabled {
-        opacity: 0.5;
+        opacity: var(--#{$prefix}disabled-opacity);
         cursor: not-allowed;
         pointer-events: none;
       }
@@ -352,21 +406,41 @@
       }
 
       // Platform-specific colors with modern gradients
-      &--facebook:hover { background: linear-gradient(135deg, #1877f2, #42a5f5); }
-      &--twitter:hover { background: linear-gradient(135deg, #1da1f2, #64b5f6); }
-      &--instagram:hover { background: linear-gradient(135deg, #e4405f, #f06292, #ba68c8); }
-      &--linkedin:hover { background: linear-gradient(135deg, #0077b5, #42a5f5); }
-      &--youtube:hover { background: linear-gradient(135deg, #ff0000, #ff5722); }
-      &--github:hover { background: linear-gradient(135deg, #333, #666); }
-      &--discord:hover { background: linear-gradient(135deg, #5865f2, #7289da); }
-      &--tiktok:hover { background: linear-gradient(135deg, #000, #ff0050); }
-      &--whatsapp:hover { background: linear-gradient(135deg, #25d366, #66bb6a); }
+      &--facebook:hover {
+        background: linear-gradient(135deg, #1877f2, #42a5f5);
+      }
+      &--twitter:hover {
+        background: linear-gradient(135deg, #1da1f2, #64b5f6);
+      }
+      &--instagram:hover {
+        background: linear-gradient(135deg, #e4405f, #f06292, #ba68c8);
+      }
+      &--linkedin:hover {
+        background: linear-gradient(135deg, #0077b5, #42a5f5);
+      }
+      &--youtube:hover {
+        background: linear-gradient(135deg, #ff0000, #ff5722);
+      }
+      &--github:hover {
+        background: linear-gradient(135deg, #333, #666);
+      }
+      &--discord:hover {
+        background: linear-gradient(135deg, #5865f2, #7289da);
+      }
+      &--tiktok:hover {
+        background: linear-gradient(135deg, #000, #ff0050);
+      }
+      &--whatsapp:hover {
+        background: linear-gradient(135deg, #25d366, #66bb6a);
+      }
     }
   }
 
   // Newsletter
   &__newsletter {
-    @include dynamic-background(linear-gradient(135deg, #{$footer-newsletter-bg}, rgba(#{$footer-newsletter-bg}, 0.8)));
+    @include dynamic-background(
+      linear-gradient(135deg, #{$footer-newsletter-bg}, rgba(#{$footer-newsletter-bg}, 0.8))
+    );
     padding: #{$footer-newsletter-padding};
     border-radius: #{$footer-newsletter-border-radius};
     border: 1px solid var(--#{$prefix}border-subtle);
@@ -397,12 +471,16 @@
       color: #{$footer-newsletter-description-color};
       line-height: 1.6;
       max-width: 45ch;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     &-form {
       display: flex;
       gap: 0.75rem;
       align-items: flex-end;
+      width: 100%;
+      max-width: 100%;
 
       @include media.media-down('sm') {
         flex-direction: column;
@@ -431,6 +509,7 @@
       border-radius: #{$footer-newsletter-input-border-radius};
       outline: none;
       transition: all 0.3s ease;
+      box-sizing: border-box;
 
       &:focus {
         border-color: #{$footer-newsletter-input-focus-border-color};
@@ -439,7 +518,7 @@
       }
 
       &::placeholder {
-        color: var(--#{$prefix}text-muted);
+        color: var(--#{$prefix}gray-6);
         transition: opacity 0.3s ease;
       }
 
@@ -465,7 +544,12 @@
         content: '';
         position: absolute;
         inset: 0;
-        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
+        background: linear-gradient(
+          45deg,
+          transparent 30%,
+          rgba(255, 255, 255, 0.2) 50%,
+          transparent 70%
+        );
         transform: translateX(-100%);
         transition: transform 0.6s ease;
       }
@@ -527,24 +611,31 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1.25rem;
-    @include dynamic-background(var(--#{$prefix}surface-variant));
+    @include dynamic-background(var(--#{$prefix}secondary-bg));
     border: 1px solid var(--#{$prefix}border-subtle);
     color: #{$footer-back-to-top-color};
     font-size: #{$footer-back-to-top-font-size};
     font-weight: #{$footer-back-to-top-font-weight};
     cursor: pointer;
-    transition: #{$footer-back-to-top-transition};
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 2rem;
     position: relative;
     overflow: hidden;
+    text-decoration: none;
+    outline: none;
 
     &::before {
       content: '';
       position: absolute;
       inset: 0;
-      background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+      background: linear-gradient(
+        45deg,
+        transparent 30%,
+        rgba(255, 255, 255, 0.1) 50%,
+        transparent 70%
+      );
       transform: translateX(-100%);
-      transition: transform 0.6s ease;
+      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     &:hover,
@@ -552,8 +643,8 @@
       color: #{$footer-back-to-top-hover-color};
       @include dynamic-background(var(--#{$prefix}primary));
       border-color: var(--#{$prefix}primary);
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+      transform: translateY(-3px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
 
       &::before {
         transform: translateX(100%);
@@ -564,6 +655,11 @@
       }
     }
 
+    &:active {
+      transform: translateY(-1px);
+      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+    }
+
     &:focus-visible {
       outline: 2px solid var(--#{$prefix}primary);
       outline-offset: 2px;
@@ -572,7 +668,7 @@
     &-icon {
       font-size: 1.25em;
       font-weight: bold;
-      transition: transform 0.3s ease;
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     &-text {
@@ -593,28 +689,12 @@
 
   // Layout Variants
   &--columns {
-    #{$root}__sections {
-      @include media.media-up('md') {
-        display: grid;
-        grid-template-columns: minmax(300px, 1fr) 2fr minmax(250px, 1fr);
-        gap: clamp(2rem, 5vw, 4rem);
-        align-items: start;
-      }
-
-      @include media.media-up('lg') {
-        grid-template-columns: minmax(350px, 1fr) 3fr minmax(300px, 1fr);
-      }
-    }
+    // Removed CSS grid styles to use layout components instead
   }
 
   &--centered {
     text-align: center;
 
-    #{$root}__sections {
-      justify-content: center;
-      align-items: center;
-    }
-
     #{$root}__social {
       justify-content: center;
     }
@@ -627,6 +707,7 @@
 
   &--minimal {
     --#{$prefix}footer-padding-y: #{rem($footer-padding-sm)};
+    --#{$prefix}footer-social-gap: #{rem(0.75)};
 
     #{$root}__sections {
       margin-bottom: 1rem;
@@ -634,7 +715,7 @@
     }
 
     #{$root}__section {
-      margin-bottom: 1rem;
+      margin-bottom: 0;
     }
 
     #{$root}__newsletter {
@@ -655,17 +736,39 @@
     }
   }
 
+  &--flexible {
+    #{$root}__section-col {
+      flex: 1 1 auto;
+      min-width: 250px;
+    }
+  }
+
+  &--sidebar {
+    #{$root}__sections {
+      &--columns {
+        align-items: flex-start;
+      }
+    }
+  }
+
+  &--wide {
+    #{$root}__sections {
+      max-width: 100%;
+      padding: 0 1rem;
+    }
+  }
+
   // Size Variants
   &--sm {
     --#{$prefix}footer-padding-y: #{rem($footer-padding-sm)};
     --#{$prefix}footer-section-margin-bottom: #{rem(1.5rem)};
-    --#{$prefix}footer-brand-margin-bottom: #{rem(1rem)};
     --#{$prefix}footer-social-gap: #{rem(0.75rem)};
   }
 
   &--md {
     --#{$prefix}footer-padding-y: #{rem($footer-padding-md)};
     --#{$prefix}footer-section-margin-bottom: #{rem(2rem)};
+    --#{$prefix}footer-social-gap: #{rem(1rem)};
   }
 
   &--lg {
@@ -684,7 +787,7 @@
     &--#{$color} {
       --#{$prefix}footer-bg: var(--#{$prefix}#{$color}-bg-subtle);
       --#{$prefix}footer-border-color: var(--#{$prefix}#{$color}-border-subtle);
-      --#{$prefix}footer-color: var(--#{$prefix}#{$color}-text);
+      --#{$prefix}footer-color: var(--#{$prefix}#{$color}-text-emphasis);
 
       #{$root}__brand-name h3,
       #{$root}__section-title {
@@ -693,11 +796,11 @@
 
       #{$root}__brand-description,
       #{$root}__copyright {
-        color: var(--#{$prefix}#{$color}-text-muted);
+        color: var(--#{$prefix}gray-6);
       }
 
       #{$root}__link {
-        color: var(--#{$prefix}#{$color}-text);
+        color: var(--#{$prefix}#{$color}-text-emphasis);
 
         &:hover,
         &:focus {
@@ -710,8 +813,12 @@
       }
 
       #{$root}__newsletter {
-        background: linear-gradient(135deg, var(--#{$prefix}#{$color}-bg), rgba(var(--#{$prefix}#{$color}-bg-rgb), 0.8));
-        border-color: var(--#{$prefix}#{$color}-border);
+        background: linear-gradient(
+          135deg,
+          var(--#{$prefix}#{$color}-bg-subtle),
+          rgba(var(--#{$prefix}#{$color}-bg-subtle), 0.8)
+        );
+        border-color: var(--#{$prefix}#{$color}-border-subtle);
 
         &::before {
           background: linear-gradient(90deg, transparent, var(--#{$prefix}#{$color}), transparent);
@@ -730,32 +837,6 @@
     background-color: rgba(var(--#{$prefix}footer-bg-rgb), 0.95);
   }
 
-  // Dark Mode Support
-  @media (prefers-color-scheme: dark) {
-    --#{$prefix}footer-bg: #{$footer-bg-dark};
-    --#{$prefix}footer-color: #{$footer-color-dark};
-    --#{$prefix}footer-border-color: #{$footer-border-color-dark};
-  }
-
-  .dark-mode & {
-    --#{$prefix}footer-bg: #{$footer-bg-dark};
-    --#{$prefix}footer-color: #{$footer-color-dark};
-    --#{$prefix}footer-border-color: #{$footer-border-color-dark};
-
-    #{$root}__newsletter {
-      background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
-      border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    #{$root}__social-link {
-      background-color: rgba(255, 255, 255, 0.1);
-
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-    }
-  }
-
   // Accessibility
   @media (prefers-reduced-motion: reduce) {
     *,
@@ -822,4 +903,4 @@
       image-rendering: crisp-edges;
     }
   }
-}
+}

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

@@ -109,21 +109,20 @@
   // Glass morphism effect styles
   &--glass {
     @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
-    box-shadow: 
+    box-shadow:
       0 8px 32px rgba(0, 0, 0, 0.1),
       0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+    border-color: color-mix(in srgb, var(--#{$prefix}input-border-color) 50%, transparent);
 
     &:focus,
     &:hover {
-      @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
-      box-shadow: 
-        0 8px 32px rgba(0, 0, 0, 0.15),
-        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
-        0 0 0 2px rgba(var(--#{$prefix}primary-rgb, 122, 255, 215), 0.3);
+      @include dynamic-background(
+        var(--#{$prefix}input-bg),
+        $background-transparency-enable: true,
+        $transparency: 0.9
+      );
     }
 
-
-
     &#{$root}--textarea {
       resize: vertical;
     }
@@ -135,4 +134,4 @@
       opacity: 0.6;
     }
   }
-}
+}