@shohojdhara/atomix 0.1.30 → 0.2.2

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

@@ -9,10 +9,9 @@
 @use '../01-settings/settings.typography' as typography;
 @use 'sass:meta';
 
-$gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !default;
 
 :root,
-[data-#{config.$prefix}theme='light'] {
+[data-#{config.$prefix}color-mode='light'] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -33,6 +32,10 @@ $gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255
     --#{config.$prefix}gray-#{$color}: #{$value};
   }
 
+  @each $color, $value in color-maps.$primarys {
+    --#{config.$prefix}primary-#{$color}: #{$value};
+  }
+
   @each $color, $value in color-maps.$theme-colors-text {
     --#{config.$prefix}#{$color}-text-emphasis: #{$value};
   }
@@ -49,13 +52,20 @@ $gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255
     --#{config.$prefix}#{$color}-hover: #{$value};
   }
 
+  @each $color, $value in color-maps.$gradient-colors {
+    --#{config.$prefix}#{$color}-gradient: #{$value};
+  }
+
+  --#{config.$prefix}gradient: #{map-get(color-maps.$gradient-colors, light)};
+
   // Fonts
 
   // Note: Use meta.inspect for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{config.$prefix}font-sans-serif: #{meta.inspect(typography.$font-family-sans-serif)};
   --#{config.$prefix}font-monospace: #{meta.inspect(typography.$font-family-monospace)};
-  --#{config.$prefix}gradient: #{$gradient};
+
+  
 
   // Root and body
   // scss-docs-start root-body-variables
@@ -157,6 +167,12 @@ $gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255
       --#{config.$prefix}#{$color}-hover: #{$value};
     }
 
+    @each $color, $value in color-maps.$gradient-colors-dark {
+      --#{config.$prefix}#{$color}-gradient: #{$value};
+    }
+
+  --#{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};
     --#{config.$prefix}box-shadow-sm: #{box-shadow.$box-shadow-sm-dark};

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

@@ -1,4 +1,9 @@
 @use '../01-settings/settings.typography' as typography;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.background' as *;
+@use '../01-settings/settings.colors' as *;
+@use '../02-tools/tools.background' as *;
+@use '../02-tools/tools.color-mode' as *;
 
 body {
   -webkit-font-smoothing: antialiased;
@@ -12,4 +17,23 @@ body {
   &.is-modal-open {
     overflow: hidden;
   }
+
+  @if ($background-enable-backdrop-filter) {
+    background: url('https://plus.unsplash.com/premium_photo-1685082778205-8665f65e8c2c?q=80&w=3864&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    &::after {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.7;
+      z-index: -1;
+      background: var(--#{config.$prefix}gradient) ;
+    }
+  }
 }

package/src/styles/05-objects/_index.scss

@@ -2,3 +2,4 @@
 @forward 'objects.container';
 @forward 'objects.grid';
 @forward 'objects.masonry-grid';
+@forward 'objects.block';

package/src/styles/05-objects/_objects.block.scss

@@ -0,0 +1,122 @@
+@use '../01-settings/settings.block' as settings;
+@use '../01-settings/settings.config' as *;
+@use '../02-tools/tools.breakpoints' as *;
+@use '../01-settings/settings.maps' as *;
+
+// Block Objects Styles
+// Provides flexible section layout with customizable spacing and backgrounds
+
+.o-block {
+  // CSS Custom Properties
+  --#{$prefix}block-spacing-xs: #{settings.$block-spacing-xs};
+  --#{$prefix}block-spacing-sm: #{settings.$block-spacing-sm};
+  --#{$prefix}block-spacing-md: #{settings.$block-spacing-md};
+  --#{$prefix}block-spacing-lg: #{settings.$block-spacing-lg};
+  --#{$prefix}block-spacing-xl: #{settings.$block-spacing-xl};
+
+  // Base styles
+  position: relative;
+  width: 100%;
+
+  // Spacing variants
+  &--xs {
+    padding-top: var(--#{$prefix}block-spacing-xs);
+    padding-bottom: var(--#{$prefix}block-spacing-xs);
+  }
+
+  &--sm {
+    padding-top: var(--#{$prefix}block-spacing-sm);
+    padding-bottom: var(--#{$prefix}block-spacing-sm);
+  }
+
+  &--md {
+    padding-top: var(--#{$prefix}block-spacing-md);
+    padding-bottom: var(--#{$prefix}block-spacing-md);
+  }
+
+  &--lg {
+    padding-top: var(--#{$prefix}block-spacing-lg);
+    padding-bottom: var(--#{$prefix}block-spacing-lg);
+  }
+
+  &--xl {
+    padding-top: var(--#{$prefix}block-spacing-xl);
+    padding-bottom: var(--#{$prefix}block-spacing-xl);
+  }
+
+  &--no-spacing {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // Full-width variant
+  &--full-width {
+    // Removes container constraints for edge-to-edge content
+    .o-container {
+      max-width: none;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  @each $name, $value in $theme-colors-bg-subtle {
+    &--#{$name} {
+      background-color: var(--#{$prefix}#{$name}-bg-subtle);
+    }
+  }
+
+  // Responsive adjustments
+  @include media-breakpoint-down('md') {
+    &--spacing-xs {
+      padding-top: calc(var(--#{$prefix}block-spacing-xs) * 0.75);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-xs) * 0.75);
+    }
+
+    &--spacing-sm {
+      padding-top: calc(var(--#{$prefix}block-spacing-sm) * 0.75);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-sm) * 0.75);
+    }
+
+    &--spacing-md {
+      padding-top: calc(var(--#{$prefix}block-spacing-md) * 0.75);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-md) * 0.75);
+    }
+
+    &--spacing-lg {
+      padding-top: calc(var(--#{$prefix}block-spacing-lg) * 0.75);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-lg) * 0.75);
+    }
+
+    &--spacing-xl {
+      padding-top: calc(var(--#{$prefix}block-spacing-xl) * 0.75);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-xl) * 0.75);
+    }
+  }
+
+  @include media-breakpoint-down('sm') {
+    &--spacing-xs {
+      padding-top: calc(var(--#{$prefix}block-spacing-xs) * 0.5);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-xs) * 0.5);
+    }
+
+    &--spacing-sm {
+      padding-top: calc(var(--#{$prefix}block-spacing-sm) * 0.5);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-sm) * 0.5);
+    }
+
+    &--spacing-md {
+      padding-top: calc(var(--#{$prefix}block-spacing-md) * 0.5);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-md) * 0.5);
+    }
+
+    &--spacing-lg {
+      padding-top: calc(var(--#{$prefix}block-spacing-lg) * 0.5);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-lg) * 0.5);
+    }
+
+    &--spacing-xl {
+      padding-top: calc(var(--#{$prefix}block-spacing-xl) * 0.5);
+      padding-bottom: calc(var(--#{$prefix}block-spacing-xl) * 0.5);
+    }
+  }
+}

package/src/styles/05-objects/_objects.container.scss

@@ -19,18 +19,22 @@
       max-width: $container-max-width;
     }
 
-    $extend-breakpoint: true;
-
     @each $name, $width in breakpoints.$grid-breakpoints {
-      @if ($extend-breakpoint) {
-        .o-container#{breakpoint-infix($name, breakpoints.$grid-breakpoints)} {
-          @extend %responsive-container-#{$breakpoint};
-        }
-
-        @if ($breakpoint == $name) {
-          $extend-breakpoint: false;
-        }
+      .o-container {
+        @extend %responsive-container-#{$breakpoint};
       }
     }
   }
+
+  $extend-breakpoint: true;
+
+  @if ($extend-breakpoint) {
+    .o-container-#{$breakpoint} {
+      @extend %responsive-container-#{$breakpoint};
+    }
+
+    @if ($breakpoint == $breakpoint) {
+      $extend-breakpoint: false;
+    }
+  }
 }

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

@@ -2,6 +2,8 @@
 @use '../01-settings/settings.accordion' as accordion;
 @use '../01-settings/settings.config' as config;
 @use '../02-tools/tools.animations' as *;
+@use '../01-settings/settings.background' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-accordion {
   $root: &;
@@ -29,19 +31,23 @@
   max-width: var(--#{config.$prefix}accordion-width);
   border: var(--#{config.$prefix}accordion-border-width) solid
     var(--#{config.$prefix}accordion-border-color);
+  border-radius: var(--#{config.$prefix}accordion-border-radius);
+  overflow: hidden;
 
   &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
     color: var(--#{config.$prefix}accordion-header-color);
     padding: var(--#{config.$prefix}accordion-header-padding-y)
       var(--#{config.$prefix}accordion-header-padding-x);
-    background-color: var(--#{config.$prefix}accordion-header-bg);
-    border-radius: var(--#{config.$prefix}accordion-border-radius);
     border: none;
+    outline: none;
     cursor: pointer;
-    width: 100%;
+    @include basic-transition(background);
+
+    @include dynamic-background(var(--#{config.$prefix}accordion-header-bg));
 
     &--icon-left {
       flex-direction: row-reverse;
@@ -78,9 +84,9 @@
     color: var(--#{config.$prefix}accordion-body-color);
     padding: var(--#{config.$prefix}accordion-body-padding-y)
       var(--#{config.$prefix}accordion-body-padding-x);
-    background-color: var(--#{config.$prefix}accordion-body-bg);
     border-radius: 0 0 var(--#{config.$prefix}accordion-border-radius)
       var(--#{config.$prefix}accordion-border-radius);
+    @include dynamic-background(var(--#{config.$prefix}accordion-body-bg));
   }
 
   &:focus,

package/src/styles/06-components/_components.avatar-group.scss

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.border-radius' as *;
 @use '../02-tools/tools.animations' as *;
 @use '../01-settings/settings.typography' as *;
+@use '../02-tools/tools.background' as *;
 
 // Avatar group component
 .c-avatar-group {
@@ -35,7 +36,7 @@
     color: var(--#{$prefix}avatar-group-more-color);
     font-size: var(--#{$prefix}avatar-group-more-font-size);
     font-weight: var(--#{$prefix}avatar-group-more-font-weight);
-    background-color: var(--#{$prefix}avatar-group-more-bg);
+    @include dynamic-background(var(--#{$prefix}avatar-group-more-bg));
     border: var(--#{$prefix}avatar-group-more-border-width) solid
       var(--#{$prefix}avatar-group-more-border-color);
 

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

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.object-fit' as *;
 @use '../02-tools/tools.size' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 // Avatar base component
 .c-avatar {
@@ -31,7 +32,7 @@
   justify-content: center;
   @include square(var(--#{$prefix}avatar-size));
   border-radius: var(--#{$prefix}avatar-border-radius);
-  background-color: var(--#{$prefix}avatar-bg);
+  @include dynamic-background(var(--#{$prefix}avatar-bg));
   color: var(--#{$prefix}avatar-color);
   border: var(--#{$prefix}avatar-border-width) solid var(--#{$prefix}avatar-border-color);
   overflow: hidden;

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

@@ -4,17 +4,18 @@
 @use '../01-settings/settings.colors' as *;
 @use '../01-settings/settings.maps' as maps;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-badge {
-  --#{$prefix}tag-font-size: #{$tag-font-size};
-  --#{$prefix}tag-font-weight: #{$tag-font-weight};
+  --#{$prefix}tag-font-size: #{$badge-font-size};
+  --#{$prefix}tag-font-weight: #{$badge-font-weight};
   --#{$prefix}tag-color: var(--#{$prefix}body-color);
-  --#{$prefix}tag-padding-x: #{rem($tag-padding-x)};
-  --#{$prefix}tag-padding-y: #{rem($tag-padding-y)};
-  --#{$prefix}tag-border-radius: #{$tag-border-radius};
+  --#{$prefix}tag-padding-x: #{rem($badge-padding-x)};
+  --#{$prefix}tag-padding-y: #{rem($badge-padding-y)};
+  --#{$prefix}tag-border-radius: #{$badge-border-radius};
   --#{$prefix}tag-bg-color: var(--#{$prefix}body-bg);
-  --#{$prefix}tag-icon-size: #{rem($tag-icon-size)};
-  --#{$prefix}tag-inner-items-gap: #{rem($tag-inner-items-gap)};
+  --#{$prefix}tag-icon-size: #{rem($badge-icon-size)};
+  --#{$prefix}tag-inner-items-gap: #{rem($badge-inner-items-gap)};
 
   display: inline-flex;
   align-items: center;
@@ -25,7 +26,7 @@
   line-height: 1;
   padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-x);
   border-radius: var(--#{$prefix}tag-border-radius);
-  background-color: var(--#{$prefix}tag-bg-color);
+  @include dynamic-background(var(--#{$prefix}tag-bg-color));
   user-select: none;
 
   &__icon {
@@ -35,11 +36,11 @@
   }
 
   &--sm {
-    --#{$prefix}tag-padding-y: #{$tag-padding-y-sm};
+    --#{$prefix}tag-padding-y: #{$badge-padding-y-sm};
   }
 
   &--lg {
-    --#{$prefix}tag-padding-y: #{$tag-padding-y-lg};
+    --#{$prefix}tag-padding-y: #{$badge-padding-y-lg};
   }
 
   @each $color, $value in maps.$theme-colors {

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

@@ -5,6 +5,7 @@
 @use '../01-settings/settings.typography' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-breadcrumb {
   --#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
@@ -30,7 +31,7 @@
   list-style: none;
   padding-left: 0px;
   margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
-  background-color: var(--#{$prefix}breadcrumb-bg);
+  @include dynamic-background(var(--#{$prefix}breadcrumb-bg));
 
   &__item {
     display: flex;

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

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.border-radius' as *;
 @use '../02-tools/tools.button' as *;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-btn {
   $root: &;
@@ -43,7 +44,7 @@
   text-decoration: if(colors.$link-decoration == none, null, none);
   white-space: button.$btn-white-space;
   vertical-align: middle;
-  background-color: var(--#{config.$prefix}btn-bg);
+  @include dynamic-background(var(--#{config.$prefix}btn-bg));
   cursor: if(button.$enable-button-pointers, pointer, null);
   user-select: none;
   border: var(--#{config.$prefix}btn-border-width) solid var(--#{config.$prefix}btn-border-color);
@@ -57,7 +58,7 @@
   &:hover {
     color: var(--#{config.$prefix}btn-hover-color);
     text-decoration: if(colors.$link-hover-decoration == underline, none, null);
-    background-color: var(--#{config.$prefix}btn-hover-bg);
+    @include dynamic-background(var(--#{config.$prefix}btn-hover-bg));
     border-color: var(--#{config.$prefix}btn-hover-border-color);
   }
 
@@ -126,7 +127,7 @@
   fieldset:disabled & {
     color: var(--#{config.$prefix}btn-disabled-color);
     pointer-events: none;
-    background-color: var(--#{config.$prefix}btn-disabled-bg);
+    @include dynamic-background(var(--#{config.$prefix}btn-disabled-bg));
     background-image: if(button.$enable-gradients, none, null);
     border-color: var(--#{config.$prefix}btn-disabled-border-color);
     opacity: var(--#{config.$prefix}btn-disabled-opacity);

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

@@ -3,6 +3,7 @@
 @use '../01-settings/settings.maps' as maps;
 @use '../01-settings/settings.callout' as callout;
 @use '../02-tools/tools.rem' as rem;
+@use '../02-tools/tools.background' as *;
 
 .c-callout {
   $root: &;
@@ -36,12 +37,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  flex-wrap: wrap;
   width: 100%;
   max-width: var(--#{config.$prefix}callout-width);
   gap: var(--#{config.$prefix}callout-actions-spacer);
   padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
-  background: var(--#{config.$prefix}callout-bg);
+  @include dynamic-background(var(--#{config.$prefix}callout-bg));
   border-radius: var(--#{config.$prefix}callout-border-radius);
   border: var(--#{config.$prefix}callout-border-witdh) solid
     var(--#{config.$prefix}callout-border-color);
@@ -52,6 +52,7 @@
       var(--#{config.$prefix}callout-transition-timing);
 
   &__content {
+    width: 100%;
     display: flex;
     gap: var(--#{config.$prefix}callout-message-spacer);
     align-items: flex-start;
@@ -68,6 +69,7 @@
 
   &__message {
     display: flex;
+    width: 100%;
     flex-direction: column;
     gap: rem.rem(4px);
   }
@@ -143,7 +145,7 @@
     align-items: flex-start;
     justify-content: flex-start;
     border: none;
-    background-color: var(--#{config.$prefix}callout-toast-bg);
+    @include dynamic-background(var(--#{config.$prefix}callout-toast-bg));
     box-shadow: var(--#{config.$prefix}callout-box-shadow);
     animation: calloutToastIn 0.3s var(--#{config.$prefix}callout-transition-timing) forwards;
 

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

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.animations' as *;
 @use '../02-tools/tools.object-fit' as *;
 @use '../02-tools/tools.size' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-card {
   $root: &;
@@ -39,10 +40,10 @@
   padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
   border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
   border-radius: var(--#{$prefix}card-border-radius);
-  background-color: var(--#{$prefix}card-bg);
-  overflow: hidden;
   @include basic-transition();
 
+  @include dynamic-background(var(--#{$prefix}card-bg));
+
   &__header {
     margin-bottom: var(--#{$prefix}card-header-spacer-y);
   }
@@ -87,7 +88,7 @@
 
   @if ($card-hover == true) {
     &:hover {
-      background-color: var(--#{$prefix}card-bg-hover);
+      @include dynamic-background(var(--#{$prefix}card-bg-hover));
     }
   }