@shohojdhara/atomix 0.1.30 → 0.2.1

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

@@ -29,6 +29,9 @@
   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;
@@ -38,7 +41,6 @@
     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;
     cursor: pointer;
     width: 100%;

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

@@ -6,15 +6,15 @@
 @use '../02-tools/tools.rem' 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;
@@ -35,11 +35,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.callout.scss

@@ -36,7 +36,6 @@
   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);
@@ -52,6 +51,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 +68,7 @@
 
   &__message {
     display: flex;
+    width: 100%;
     flex-direction: column;
     gap: rem.rem(4px);
   }

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

@@ -40,7 +40,6 @@
   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();
 
   &__header {