@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,100 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.avatar' as *;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.border-radius' as *;
-@use '../02-tools/tools.object-fit' as *;
-@use '../02-tools/tools.size' as *;
-@use '../02-tools/tools.animations' as *;
-
-// 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};
-
-    // 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)};
-        }
-    }
-
-    // Shape variant
-    &--circle {
-        --#{$prefix}avatar-border-radius: var(--#{$prefix}avatar-border-circle-radius);
-    }
-
-    // Interactive states
-    &[role="button"] {
-        cursor: pointer;
-
-        &:hover {
-            opacity: var(--#{$prefix}avatar-hover-opacity);
-        }
-
-        &:focus-visible {
-            outline: var(--#{$prefix}avatar-focus-ring-width) solid var(--#{$prefix}avatar-focus-ring-color);
-            outline-offset: 1px;
-        }
-    }
-
-    &.is-disabled,
-    &[aria-disabled="true"] {
-        opacity: var(--#{$prefix}avatar-disabled-opacity);
-        pointer-events: none;
-    }
-
-    // Avatar content elements
-    &__image {
-        width: 100%;
-        height: 100%;
-        @include object-fit(var(--#{$prefix}avatar-fit));
-    }
-
-    &__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

@@ -1,62 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.badge' as *;
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
-@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)};
-
-    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);
-        fill: var(--#{$prefix}tag-color);
-    }
-
-    &--sm{
-        --#{$prefix}tag-padding-y: #{$tag-padding-y-sm};
-    }
-
-    &--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);
-            }
-        }
-    }
-}

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

@@ -1,81 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.breadcrumb' as *;
-@use '../01-settings/settings.typography' as *;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-breadcrumb {
-    --#{$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)};
-
-    $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);
-
-        &+& {
-            &::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);
-            }
-
-            #{$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;
-
-        @include basic-transition();
-
-        &:focus-visible {
-            outline: none;
-            border-color:  var(--#{$prefix}focus-border-color);
-        }
-
-        &:hover{
-            color: var(--#{$prefix}breadcrumb-hover-color);
-        }
-    }
-}

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

@@ -1,35 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.btn-group' as *;
-@use '../02-tools/tools.rem' as *;
-
-.c-btn-group {
-    --#{$prefix}btn-group-gap: #{$btn-group-gap};
-
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-
-    .c-btn {
-        flex: 1 1 auto;
-        position: relative;
-
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0px;
-        }
-
-        &:first-child:not(:last-child) {
-            border-top-right-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
-
-        &: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);
-    }
-}

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

@@ -1,126 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.button' as button;
-@use '../01-settings/settings.colors' as colors;
-@use '../01-settings/settings.maps' as color-maps;
-@use '../01-settings/settings.border-radius' as border-radius;
-@use '../02-tools/tools.border-radius' as *;
-@use '../02-tools/tools.button' as *;
-@use '../02-tools/tools.rem' as *;
-
-.c-btn {
-    $root: &; 
-  
-    --#{config.$prefix}btn-padding-x: #{button.$btn-padding-x};
-    --#{config.$prefix}btn-padding-y: #{button.$btn-padding-y};
-    --#{config.$prefix}btn-font-family: #{button.$btn-font-family};
-    --#{config.$prefix}btn-font-size: #{button.$btn-font-size};
-    --#{config.$prefix}btn-font-weight: #{button.$btn-font-weight};
-    --#{config.$prefix}btn-line-height: #{button.$btn-line-height};
-    --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size)};
-    --#{config.$prefix}btn-color: #{button.$btn-color};
-    --#{config.$prefix}btn-bg: transparent;
-    --#{config.$prefix}btn-border-width: #{button.$btn-border-width};
-    --#{config.$prefix}btn-border-color: transparent;
-    --#{config.$prefix}btn-border-radius: #{button.$btn-border-radius};
-    --#{config.$prefix}btn-hover-border-color: transparent;
-    --#{config.$prefix}btn-box-shadow: #{button.$btn-box-shadow};
-    --#{config.$prefix}btn-disabled-opacity: #{button.$btn-disabled-opacity};
-    --#{config.$prefix}btn-focus-box-shadow: 0 0 0 #{button.$btn-focus-width} rgba(var(--#{config.$prefix}btn-focus-shadow-rgb), 0.5);
-    --#{config.$prefix}btn-inner-gap: #{rem(button.$btn-inner-gap)};
-  
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--#{config.$prefix}btn-inner-gap);
-    padding: var(--#{config.$prefix}btn-padding-y) var(--#{config.$prefix}btn-padding-x);
-    font-family: var(--#{config.$prefix}btn-font-family);
-    font-size: var(--#{config.$prefix}btn-font-size);
-    font-weight: var(--#{config.$prefix}btn-font-weight);
-    line-height: var(--#{config.$prefix}btn-line-height);
-    color: var(--#{config.$prefix}btn-color);
-    text-align: center;
-    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);
-    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);
-    border-radius: var(--#{config.$prefix}btn-border-radius);
-    transition: button.$btn-transition;
-  
-    &__icon {
-      font-size: var(--#{config.$prefix}btn-icon-size);
-    }
-  
-    &: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);
-      border-color: var(--#{config.$prefix}btn-hover-border-color);
-    }
-  
-  
-    @each $color, $value in color-maps.$theme-colors {
-      &--#{$color} {
-          @include btn-variant($color, $value);
-      }
-    }
-  
-    @each $color, $value in color-maps.$theme-colors {
-      &--outline-#{$color} {
-        @include btn-outline-variant($color);
-      }
-    }
-  
-    &--lg {
-      @include btn-size(button.$btn-padding-y-lg, button.$btn-padding-x-lg, button.$btn-font-size-lg, button.$btn-border-radius-lg);
-  
-      #{$root}__icon {
-        --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size-lg)};
-      }
-    }
-  
-    &--sm {
-      @include btn-size(button.$btn-padding-y-sm, button.$btn-padding-x-sm, button.$btn-font-size-sm, button.$btn-border-radius-sm);
-  
-      #{$root}__icon {
-        --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size-sm)};
-      }
-    }
-  
-    &--rounded {
-      --#{config.$prefix}btn-border-radius: #{border-radius.$border-radius-pill};
-    }
-  
-    &--link {
-      --#{config.$prefix}btn-color: #{button.$btn-link-color};
-      --#{config.$prefix}btn-color-hover: #{button.$btn-link-color-hover};
-      --#{config.$prefix}btn-font-weight: #{button.$btn-link-font-weight};
-  
-      border-radius: 0px;
-      border-bottom: var(--#{config.$prefix}btn-border-width) solid button.$btn-link-border-color;
-  
-      &:hover {
-        border-bottom: var(--#{config.$prefix}btn-border-width) solid button.$btn-link-border-color-hover;
-      }
-    }
-  
-    &--icon {
-      --#{config.$prefix}btn-padding-x: var(--#{config.$prefix}btn-padding-y);
-    }
-  
-    &:disabled,
-    &--disabled,
-    fieldset:disabled & {
-      color: var(--#{config.$prefix}btn-disabled-color);
-      pointer-events: none;
-      background-color: 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

@@ -1,266 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
-@use '../01-settings/settings.callout' as callout;
-@use '../02-tools/tools.rem' as rem;
-
-.c-callout {
-  $root: &;
-
-  --#{config.$prefix}callout-width: #{callout.$callout-width};
-  --#{config.$prefix}callout-padding-x: #{rem.rem(callout.$callout-padding-x)};
-  --#{config.$prefix}callout-padding-y: #{rem.rem(callout.$callout-padding-y)};
-  --#{config.$prefix}callout-tost-padding-x: #{rem.rem(callout.$callout-tost-padding-x)};
-  --#{config.$prefix}callout-tost-padding-y: #{rem.rem(callout.$callout-tost-padding-y)};
-  --#{config.$prefix}callout-bg: #{callout.$callout-bg};
-  --#{config.$prefix}callout-border-radius: #{callout.$callout-border-radius};
-  --#{config.$prefix}callout-border-color: #{callout.$callout-border-color};
-  --#{config.$prefix}callout-border-witdh: #{callout.$callout-border-width};
-  --#{config.$prefix}callout-title-font-size: #{callout.$callout-title-font-size};
-  --#{config.$prefix}callout-title-font-weight: #{callout.$callout-title-font-weight};
-  --#{config.$prefix}callout-title-color: #{callout.$callout-title-color};
-  --#{config.$prefix}callout-text-font-size: #{callout.$callout-text-font-size};
-  --#{config.$prefix}callout-text-font-weight: #{callout.$callout-text-font-weight};
-  --#{config.$prefix}callout-text-color: #{callout.$callout-text-color};
-  --#{config.$prefix}callout-message-spacer: #{rem.rem(callout.$callout-message-spacer)};
-  --#{config.$prefix}callout-icon-size: #{callout.$callout-icon-size};
-  --#{config.$prefix}callout-icon-color: #{callout.$callout-icon-color};
-  --#{config.$prefix}callout-close-btn-size: #{callout.$callout-close-btn-size};
-  --#{config.$prefix}callout-actions-spacer: #{rem.rem(callout.$callout-actions-spacer)};
-  --#{config.$prefix}callout-actions-spacer-y: #{rem.rem(callout.$callout-actions-spacer-y)};
-  --#{config.$prefix}callout-toast-bg: #{callout.$callout-toast-bg};
-  --#{config.$prefix}callout-box-shadow: #{callout.$callout-box-shadow};
-  --#{config.$prefix}callout-transition-duration: 0.3s;
-  --#{config.$prefix}callout-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
-
-  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);
-  border-radius: var(--#{config.$prefix}callout-border-radius);
-  border: var(--#{config.$prefix}callout-border-witdh) solid
-    var(--#{config.$prefix}callout-border-color);
-  transition: 
-    opacity var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing),
-    transform var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing);
-
-  &__content {
-    display: flex;
-    gap: var(--#{config.$prefix}callout-message-spacer);
-    align-items: flex-start;
-  }
-
-  &__icon {
-    color: var(--#{config.$prefix}callout-icon-color);
-    font-size: var(--#{config.$prefix}callout-icon-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  &__message {
-    display: flex;
-    flex-direction: column;
-    gap: rem.rem(4px);
-  }
-
-  &__title {
-    color: var(--#{config.$prefix}callout-title-color);
-    font-size: var(--#{config.$prefix}callout-title-font-size);
-    font-weight: var(--#{config.$prefix}callout-title-font-weight);
-  }
-
-  &__text {
-    color: var(--#{config.$prefix}callout-text-color);
-    font-size: var(--#{config.$prefix}callout-text-font-size);
-    font-weight: var(--#{config.$prefix}callout-text-font-weight);
-    line-height: 1.5;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--#{config.$prefix}callout-actions-spacer);
-    margin-left: auto;
-  }
-
-  &__close-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--#{config.$prefix}callout-title-color);
-    border: none;
-    outline: none;
-    background: none;
-    padding: rem.rem(4px);
-    font-size: var(--#{config.$prefix}callout-close-btn-size);
-    cursor: pointer;
-    border-radius: rem.rem(4px);
-    transition: background-color 0.2s ease, transform 0.2s ease;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: scale(0.95);
-    }
-
-    &:focus-visible {
-      box-shadow: 0 0 0 2px var(--#{config.$prefix}callout-border-color);
-    }
-  }
-
-  &--oneline {
-    #{$root} {
-      &__message {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--#{config.$prefix}callout-message-spacer);
-      }
-    }
-  }
-
-  &--toast {
-    position: relative;
-    max-width: rem.rem(350px);
-    width: 100%;
-    padding: var(--#{config.$prefix}callout-tost-padding-y) var(--#{config.$prefix}callout-tost-padding-x);
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    border: none;
-    background-color: 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;
-
-    #{$root} {
-      &__content {
-        align-items: flex-start;
-        width: 100%;
-      }
-
-      &__actions {
-        padding-left: calc(var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer));
-        margin-top: var(--#{config.$prefix}callout-actions-spacer-y);
-      }
-
-      &__close-btn {
-        position: absolute;
-        top: var(--#{config.$prefix}callout-tost-padding-y);
-        right: var(--#{config.$prefix}callout-tost-padding-x);
-      }
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--#{config.$prefix}callout-border-color);
-      outline-offset: 2px;
-    }
-  }
-
-  @each $color, $value in maps.$theme-colors {
-    &--#{$color} {
-      @if($color == 'primary') {
-        --#{config.$prefix}callout-bg: var(--#{config.$prefix}brand-bg-subtle);
-        --#{config.$prefix}callout-border-color: var(--#{config.$prefix}brand-border-subtle);
-        --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}brand-text-emphasis);
-      } @else if($color == 'light') {
-        --#{config.$prefix}callout-title-color: var(--#{config.$prefix}dark);
-        --#{config.$prefix}callout-text-color: var(--#{config.$prefix}dark);
-        --#{config.$prefix}callout-bg: var(--#{config.$prefix}light);
-        --#{config.$prefix}callout-border-color: var(--#{config.$prefix}primary-border-subtle);
-        --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}tertiary-text-emphasis);
-      }@else if($color == 'dark') {
-        --#{config.$prefix}callout-title-color: var(--#{config.$prefix}light);
-        --#{config.$prefix}callout-text-color: #{$gray-4};
-        --#{config.$prefix}callout-bg: var(--#{config.$prefix}dark);
-        --#{config.$prefix}callout-border-color: var(--#{config.$prefix}primary-border-subtle);
-        --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}light);
-      } @else {
-        --#{config.$prefix}callout-bg: var(--#{config.$prefix}#{$color}-bg-subtle);
-        --#{config.$prefix}callout-border-color: var(--#{config.$prefix}#{$color}-border-subtle);
-        --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}#{$color}-text-emphasis);
-      }      
-    }
-  }
-
-  &.is-hide {
-    opacity: 0;
-    transform: translateY(-10px);
-    pointer-events: none;
-  }
-}
-
-// Toast container styles
-.c-callout-container {
-  position: fixed;
-  z-index: callout.$callout-toast-z-index;
-  display: flex;
-  flex-direction: column;
-  gap: rem.rem(8px);
-  max-width: 100%;
-  pointer-events: none; // Allow clicking through the container
-  
-  // Make toasts clickable
-  .c-callout--toast {
-    pointer-events: auto;
-  }
-  
-  // Position variants
-  @each $position, $props in callout.$callout-toast-positions {
-    &--#{$position} {
-      @each $prop, $value in $props {
-        #{$prop}: $value;
-      }
-    }
-  }
-  
-  // Animation variants by position
-  &--top-right,
-  &--top-left,
-  &--top-center {
-    .c-callout--toast {
-      animation-name: calloutToastInTop;
-    }
-  }
-  
-  &--bottom-right,
-  &--bottom-left,
-  &--bottom-center {
-    .c-callout--toast {
-      animation-name: calloutToastInBottom;
-    }
-  }
-}
-
-// Toast animations
-@keyframes calloutToastInTop {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes calloutToastInBottom {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}