@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,101 @@
+@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

@@ -0,0 +1,62 @@
+@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

@@ -0,0 +1,80 @@
+@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

@@ -0,0 +1,35 @@
+@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

@@ -0,0 +1,134 @@
+@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

@@ -0,0 +1,272 @@
+@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);
+  }
+}