@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -38,7 +38,7 @@
     background-color: var(--#{$prefix}avatar-group-more-bg);
     border: var(--#{$prefix}avatar-group-more-border-width) solid
       var(--#{$prefix}avatar-group-more-border-color);
-    
+
     // Inherit size and shape from avatars
     width: var(--#{$prefix}avatar-size);
     height: var(--#{$prefix}avatar-size);
@@ -50,16 +50,15 @@
     gap: 0;
 
     > * {
-      transition: transform var(--#{$prefix}avatar-group-transition-duration) var(--#{$prefix}avatar-group-transition-timing);
+      transition: transform var(--#{$prefix}avatar-group-transition-duration)
+        var(--#{$prefix}avatar-group-transition-timing);
       border: 2px solid var(--#{$prefix}avatar-group-more-bg);
     }
 
     // Position each avatar with negative margin
     @for $i from 1 through 10 {
       > *:nth-child(#{$i + 1}) {
-        transform: translateX(
-          calc((var(--#{$prefix}avatar-size) / -2) * #{$i})
-        );
+        transform: translateX(calc((var(--#{$prefix}avatar-size) / -2) * #{$i}));
       }
     }
 
@@ -68,16 +67,18 @@
       > * {
         transform: translateX(0);
       }
-      
+
       & {
         gap: var(--#{$prefix}avatar-group-stacked-hover-gap);
       }
     }
-    
+
     // More indicator in stacked layout
     .c-avatar-group__more {
       font-size: var(--#{$prefix}avatar-group-more-font-size);
-      margin-left: calc(var(--#{$prefix}avatar-size) * -1 * var(--#{$prefix}avatar-group-stacked-overlap) / 100);
+      margin-left: calc(
+        var(--#{$prefix}avatar-size) * -1 * var(--#{$prefix}avatar-group-stacked-overlap) / 100
+      );
       z-index: 1;
     }
   }

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

@@ -9,92 +9,93 @@
 
 // Avatar base component
 .c-avatar {
-    // CSS custom properties
-    --#{$prefix}avatar-fit: #{$avatar-fit};
-    --#{$prefix}avatar-size: #{rem(map.get($avatar-size, md))};
-    --#{$prefix}avatar-border-radius: #{map.get($avatar-border-radius, md)};
-    --#{$prefix}avatar-border-circle-radius: #{map.get($avatar-border-radius, 'circle')};
-    --#{$prefix}avatar-color: #{$avatar-color};
-    --#{$prefix}avatar-bg: #{$avatar-bg};
-    --#{$prefix}avatar-border-width: #{$avatar-border-width};
-    --#{$prefix}avatar-border-color: #{$avatar-border-color};
-    --#{$prefix}avatar-initials-font-size: #{map.get($avatar-initials-font-size, md)};
-    --#{$prefix}avatar-hover-opacity: #{$avatar-hover-opacity};
-    --#{$prefix}avatar-focus-ring-width: #{$avatar-focus-ring-width};
-    --#{$prefix}avatar-focus-ring-color: #{$avatar-focus-ring-color};
-    --#{$prefix}avatar-disabled-opacity: #{$avatar-disabled-opacity};
+  // CSS custom properties
+  --#{$prefix}avatar-fit: #{$avatar-fit};
+  --#{$prefix}avatar-size: #{rem(map.get($avatar-size, md))};
+  --#{$prefix}avatar-border-radius: #{map.get($avatar-border-radius, md)};
+  --#{$prefix}avatar-border-circle-radius: #{map.get($avatar-border-radius, 'circle')};
+  --#{$prefix}avatar-color: #{$avatar-color};
+  --#{$prefix}avatar-bg: #{$avatar-bg};
+  --#{$prefix}avatar-border-width: #{$avatar-border-width};
+  --#{$prefix}avatar-border-color: #{$avatar-border-color};
+  --#{$prefix}avatar-initials-font-size: #{map.get($avatar-initials-font-size, md)};
+  --#{$prefix}avatar-hover-opacity: #{$avatar-hover-opacity};
+  --#{$prefix}avatar-focus-ring-width: #{$avatar-focus-ring-width};
+  --#{$prefix}avatar-focus-ring-color: #{$avatar-focus-ring-color};
+  --#{$prefix}avatar-disabled-opacity: #{$avatar-disabled-opacity};
 
-    // Base styles
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    @include square(var(--#{$prefix}avatar-size));
-    border-radius: var(--#{$prefix}avatar-border-radius);
-    background-color: var(--#{$prefix}avatar-bg);
-    color: var(--#{$prefix}avatar-color);
-    border: var(--#{$prefix}avatar-border-width) solid var(--#{$prefix}avatar-border-color);
-    overflow: hidden;
-    user-select: none;
-    @include basic-transition(opacity);
-
-    // Size variants
-    @each $size, $value in $avatar-size {
-        &--#{$size} {
-            --#{$prefix}avatar-size: #{rem($value)};
-            --#{$prefix}avatar-border-radius: #{map.get($avatar-border-radius, $size)};
-            --#{$prefix}avatar-initials-font-size: #{map.get($avatar-initials-font-size, $size)};
-        }
-    }
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  @include square(var(--#{$prefix}avatar-size));
+  border-radius: var(--#{$prefix}avatar-border-radius);
+  background-color: var(--#{$prefix}avatar-bg);
+  color: var(--#{$prefix}avatar-color);
+  border: var(--#{$prefix}avatar-border-width) solid var(--#{$prefix}avatar-border-color);
+  overflow: hidden;
+  user-select: none;
+  @include basic-transition(opacity);
 
-    // Shape variant
-    &--circle {
-        --#{$prefix}avatar-border-radius: var(--#{$prefix}avatar-border-circle-radius);
+  // Size variants
+  @each $size, $value in $avatar-size {
+    &--#{$size} {
+      --#{$prefix}avatar-size: #{rem($value)};
+      --#{$prefix}avatar-border-radius: #{map.get($avatar-border-radius, $size)};
+      --#{$prefix}avatar-initials-font-size: #{map.get($avatar-initials-font-size, $size)};
     }
+  }
 
-    // Interactive states
-    &[role="button"] {
-        cursor: pointer;
+  // Shape variant
+  &--circle {
+    --#{$prefix}avatar-border-radius: var(--#{$prefix}avatar-border-circle-radius);
+  }
 
-        &:hover {
-            opacity: var(--#{$prefix}avatar-hover-opacity);
-        }
+  // Interactive states
+  &[role='button'] {
+    cursor: pointer;
 
-        &:focus-visible {
-            outline: var(--#{$prefix}avatar-focus-ring-width) solid var(--#{$prefix}avatar-focus-ring-color);
-            outline-offset: 1px;
-        }
+    &:hover {
+      opacity: var(--#{$prefix}avatar-hover-opacity);
     }
 
-    &.is-disabled,
-    &[aria-disabled="true"] {
-        opacity: var(--#{$prefix}avatar-disabled-opacity);
-        pointer-events: none;
+    &:focus-visible {
+      outline: var(--#{$prefix}avatar-focus-ring-width) solid
+        var(--#{$prefix}avatar-focus-ring-color);
+      outline-offset: 1px;
     }
+  }
 
-    // Avatar content elements
-    &__image {
-        width: 100%;
-        height: 100%;
-        @include object-fit(var(--#{$prefix}avatar-fit));
-    }
+  &.is-disabled,
+  &[aria-disabled='true'] {
+    opacity: var(--#{$prefix}avatar-disabled-opacity);
+    pointer-events: none;
+  }
 
-    &__initials {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        font-size: var(--#{$prefix}avatar-initials-font-size);
-        font-weight: $avatar-initials-font-weight;
-        text-transform: uppercase;
-    }
+  // Avatar content elements
+  &__image {
+    width: 100%;
+    height: 100%;
+    @include object-fit(var(--#{$prefix}avatar-fit));
+  }
 
-    &__icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-    }
-}
+  &__initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: var(--#{$prefix}avatar-initials-font-size);
+    font-weight: $avatar-initials-font-weight;
+    text-transform: uppercase;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -6,57 +6,57 @@
 @use '../02-tools/tools.rem' as *;
 
 .c-badge {
-    --#{$prefix}tag-font-size: #{$tag-font-size};
-    --#{$prefix}tag-font-weight: #{$tag-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-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-font-size: #{$tag-font-size};
+  --#{$prefix}tag-font-weight: #{$tag-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-bg-color: var(--#{$prefix}body-bg);
+  --#{$prefix}tag-icon-size: #{rem($tag-icon-size)};
+  --#{$prefix}tag-inner-items-gap: #{rem($tag-inner-items-gap)};
 
-    display: inline-flex;
-    align-items: center;
-    gap: var(--#{$prefix}tag-inner-items-gap);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--#{$prefix}tag-inner-items-gap);
+  color: var(--#{$prefix}tag-color);
+  font-size: var(--#{$prefix}tag-font-size);
+  font-weight: var(--#{$prefix}tag-font-weight);
+  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);
+  user-select: none;
+
+  &__icon {
+    font-size: var(--#{$prefix}tag-icon-size);
     color: var(--#{$prefix}tag-color);
-    font-size: var(--#{$prefix}tag-font-size);
-    font-weight: var(--#{$prefix}tag-font-weight);
-    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);
-    user-select: none;
+    fill: var(--#{$prefix}tag-color);
+  }
 
-    &__icon {
-        font-size: var(--#{$prefix}tag-icon-size);
-        color: var(--#{$prefix}tag-color);
-        fill: var(--#{$prefix}tag-color);
-    }
+  &--sm {
+    --#{$prefix}tag-padding-y: #{$tag-padding-y-sm};
+  }
 
-    &--sm{
-        --#{$prefix}tag-padding-y: #{$tag-padding-y-sm};
-    }
-
-    &--lg {
-        --#{$prefix}tag-padding-y: #{$tag-padding-y-lg};
-    }
+  &--lg {
+    --#{$prefix}tag-padding-y: #{$tag-padding-y-lg};
+  }
 
-    @each $color, $value in maps.$theme-colors  {
-        &--#{$color} {
-            @if($color == 'primary') {
-                --#{$prefix}tag-bg-color: var(--#{$prefix}brand-bg-subtle);
-                --#{$prefix}tag-color: var(--#{$prefix}brand-text-emphasis);
-            } @else if ($color == 'dark') {
-                --#{$prefix}tag-bg-color: var(--#{$prefix}dark);
-                --#{$prefix}tag-color: var(--#{$prefix}light);
-            }@else if ($color == 'light') {
-                --#{$prefix}tag-bg-color: var(--#{$prefix}light);
-                --#{$prefix}tag-color: var(--#{$prefix}dark);
-            }@else {
-                --#{$prefix}tag-bg-color: var(--#{$prefix}#{$color}-bg-subtle);
-                --#{$prefix}tag-color: var(--#{$prefix}#{$color}-text-emphasis);
-            }
-        }
+  @each $color, $value in maps.$theme-colors {
+    &--#{$color} {
+      @if ($color == 'primary') {
+        --#{$prefix}tag-bg-color: var(--#{$prefix}brand-bg-subtle);
+        --#{$prefix}tag-color: var(--#{$prefix}brand-text-emphasis);
+      } @else if ($color == 'dark') {
+        --#{$prefix}tag-bg-color: var(--#{$prefix}dark);
+        --#{$prefix}tag-color: var(--#{$prefix}light);
+      } @else if ($color == 'light') {
+        --#{$prefix}tag-bg-color: var(--#{$prefix}light);
+        --#{$prefix}tag-color: var(--#{$prefix}dark);
+      } @else {
+        --#{$prefix}tag-bg-color: var(--#{$prefix}#{$color}-bg-subtle);
+        --#{$prefix}tag-color: var(--#{$prefix}#{$color}-text-emphasis);
+      }
     }
-}
+  }
+}

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

@@ -7,75 +7,74 @@
 @use '../02-tools/tools.animations' as *;
 
 .c-breadcrumb {
-    --#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
+  --#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
 
-    --#{$prefix}breadcrumb-link-padding-y: #{rem($breadcrumb-link-padding-y)};
-    --#{$prefix}breadcrumb-link-padding-x: #{rem($breadcrumb-link-padding-x)};
-    --#{$prefix}breadcrumb-link-border-width: #{rem($breadcrumb-link-border-width)};
-    --#{$prefix}breadcrumb-items-gap: #{rem($breadcrumb-items-gap)};
-    --#{$prefix}breadcrumb-margin-bottom: #{rem($breadcrumb-margin-bottom)};
-    --#{$prefix}breadcrumb-color: #{$breadcrumb-color};
-    --#{$prefix}breadcrumb-hover-color: #{$breadcrumb-hover-color};
-    --#{$prefix}breadcrumb-active-color: #{$breadcrumb-active-color};
-    --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
-    --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
-    --#{$prefix}breadcrumb-divider-active-color: #{$breadcrumb-divider-active-color};
-    --#{$prefix}breadcrumb-divider-size: #{rem($breadcrumb-divider-size)};
-    --#{$prefix}breadcrumb-divider-gap: #{rem($breadcrumb-divider-gap)};
+  --#{$prefix}breadcrumb-link-padding-y: #{rem($breadcrumb-link-padding-y)};
+  --#{$prefix}breadcrumb-link-padding-x: #{rem($breadcrumb-link-padding-x)};
+  --#{$prefix}breadcrumb-link-border-width: #{rem($breadcrumb-link-border-width)};
+  --#{$prefix}breadcrumb-items-gap: #{rem($breadcrumb-items-gap)};
+  --#{$prefix}breadcrumb-margin-bottom: #{rem($breadcrumb-margin-bottom)};
+  --#{$prefix}breadcrumb-color: #{$breadcrumb-color};
+  --#{$prefix}breadcrumb-hover-color: #{$breadcrumb-hover-color};
+  --#{$prefix}breadcrumb-active-color: #{$breadcrumb-active-color};
+  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+  --#{$prefix}breadcrumb-divider-active-color: #{$breadcrumb-divider-active-color};
+  --#{$prefix}breadcrumb-divider-size: #{rem($breadcrumb-divider-size)};
+  --#{$prefix}breadcrumb-divider-gap: #{rem($breadcrumb-divider-gap)};
 
-    $root: &;
+  $root: &;
 
+  display: flex;
+  gap: var(--#{$prefix}breadcrumb-items-gap);
+  list-style: none;
+  padding-left: 0px;
+  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
+  background-color: var(--#{$prefix}breadcrumb-bg);
+
+  &__item {
     display: flex;
+    align-items: center;
     gap: var(--#{$prefix}breadcrumb-items-gap);
-    list-style: none;
-    padding-left: 0px;
-    margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
-    background-color: var(--#{$prefix}breadcrumb-bg);
-    
-
-    &__item {
-        display: flex;
-        align-items: center;
-        gap: var(--#{$prefix}breadcrumb-items-gap);
 
-        &+& {
-            &::before {
-                content: $breadcrumb-divider;
-                color: var(--#{$prefix}breadcrumb-divider-color);
-                font-size: var(--#{$prefix}breadcrumb-divider-size);
-                margin-right: var(--#{$prefix}breadcrumb-divider-gap);
-            }
-        }
+    & + & {
+      &::before {
+        content: $breadcrumb-divider;
+        color: var(--#{$prefix}breadcrumb-divider-color);
+        font-size: var(--#{$prefix}breadcrumb-divider-size);
+        margin-right: var(--#{$prefix}breadcrumb-divider-gap);
+      }
+    }
 
-        &.is-active {
-            &::before {
-                color: var(--#{$prefix}breadcrumb-divider-active-color);
-            }
+    &.is-active {
+      &::before {
+        color: var(--#{$prefix}breadcrumb-divider-active-color);
+      }
 
-            #{$root}__link{
-                color: var(--#{$prefix}breadcrumb-active-color);
-                font-weight: $font-weight-medium;
-            }
-        }
+      #{$root}__link {
+        color: var(--#{$prefix}breadcrumb-active-color);
+        font-weight: $font-weight-medium;
+      }
     }
+  }
 
-    &__link {
-        display: flex;
-        align-items: center;
-        gap: calc(var(--#{$prefix}breadcrumb-items-gap) / 2);
-        color: var(--#{$prefix}breadcrumb-color);
-        padding: var(--#{$prefix}breadcrumb-link-padding-y) var(--#{$prefix}breadcrumb-link-padding-x);
-        border: var(--#{$prefix}breadcrumb-link-border-width) solid transparent;
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--#{$prefix}breadcrumb-items-gap) / 2);
+    color: var(--#{$prefix}breadcrumb-color);
+    padding: var(--#{$prefix}breadcrumb-link-padding-y) var(--#{$prefix}breadcrumb-link-padding-x);
+    border: var(--#{$prefix}breadcrumb-link-border-width) solid transparent;
 
-        @include basic-transition();
+    @include basic-transition();
 
-        &:focus-visible {
-            outline: none;
-            border-color:  var(--#{$prefix}focus-border-color);
-        }
+    &:focus-visible {
+      outline: none;
+      border-color: var(--#{$prefix}focus-border-color);
+    }
 
-        &:hover{
-            color: var(--#{$prefix}breadcrumb-hover-color);
-        }
+    &:hover {
+      color: var(--#{$prefix}breadcrumb-hover-color);
     }
-}
+  }
+}

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

@@ -4,32 +4,32 @@
 @use '../02-tools/tools.rem' as *;
 
 .c-btn-group {
-    --#{$prefix}btn-group-gap: #{$btn-group-gap};
+  --#{$prefix}btn-group-gap: #{$btn-group-gap};
 
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-
-    .c-btn {
-        flex: 1 1 auto;
-        position: relative;
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
 
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0px;
-        }
+  .c-btn {
+    flex: 1 1 auto;
+    position: relative;
 
-        &:first-child:not(:last-child) {
-            border-top-right-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0px;
+    }
 
-        &:last-child:not(:first-child) {
-            border-top-left-radius: 0px;
-            border-bottom-left-radius: 0px;
-        }
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
     }
 
-    .c-btn+.c-btn {
-        margin-left: calc(var(--#{$prefix}btn-border-width) * -1);
+    &:last-child:not(:first-child) {
+      border-top-left-radius: 0px;
+      border-bottom-left-radius: 0px;
     }
-}
+  }
+
+  .c-btn + .c-btn {
+    margin-left: calc(var(--#{$prefix}btn-border-width) * -1);
+  }
+}