@weeehaoooz/talos-ui 0.1.0

package/styles/_badge.scss

@@ -0,0 +1,279 @@
+/* ==========================================================================
+   Talos UI Badge Styles
+   ========================================================================== */
+
+.talos-badge-host {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  &,
+  &.talos-badge-host--has-badge,
+  &.talos-btn,
+  &.btn {
+    overflow: visible;
+  }
+}
+
+.talos-badge {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 1;
+  border-radius: var(--talos-radius-full);
+  z-index: 10;
+  pointer-events: none;
+  user-select: none;
+  box-shadow: 0 0 0 2px var(--talos-badge-border-color, var(--talos-bg-surface));
+  transition: transform var(--talos-transition),
+              opacity var(--talos-transition),
+              background-color var(--talos-transition),
+              color var(--talos-transition);
+
+  /* Hidden State */
+  &--hidden {
+    display: none !important;
+  }
+
+  /* Size Scales */
+  &--xs {
+    height: 14px;
+    min-width: 14px;
+    padding: 0 3.5px;
+    font-size: 9px;
+    letter-spacing: -0.02em;
+  }
+
+  &--sm {
+    height: 18px;
+    min-width: 18px;
+    padding: 0 5px;
+    font-size: 10.5px;
+    letter-spacing: -0.01em;
+  }
+
+  &--md {
+    height: 22px;
+    min-width: 22px;
+    padding: 0 6.5px;
+    font-size: 12px;
+  }
+
+  &--lg {
+    height: 26px;
+    min-width: 26px;
+    padding: 0 8px;
+    font-size: 13.5px;
+  }
+
+  /* Dot Mode Indicator */
+  &--dot {
+    padding: 0 !important;
+    min-width: 0 !important;
+    border-radius: 50% !important;
+
+    &.talos-badge--xs {
+      width: 6px;
+      height: 6px;
+    }
+
+    &.talos-badge--sm {
+      width: 8px;
+      height: 8px;
+    }
+
+    &.talos-badge--md {
+      width: 10px;
+      height: 10px;
+    }
+
+    &.talos-badge--lg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  /* Shapes */
+  &--circle,
+  &--pill {
+    border-radius: var(--talos-radius-full);
+  }
+
+  &--square {
+    border-radius: var(--talos-radius-sm);
+  }
+
+  /* Placement Positions (with default overlap) */
+  &--top-right {
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+
+  &--top-left {
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  &--bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: translate(50%, 50%);
+  }
+
+  &--bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, 50%);
+  }
+
+  &--top {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &--bottom {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
+  }
+
+  &--inline {
+    position: static;
+    transform: none;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+    box-shadow: none;
+  }
+
+  /* Non-overlapping placements */
+  &:not(.talos-badge--overlap) {
+    &.talos-badge--top-right {
+      top: 0;
+      right: 0;
+      transform: translate(0, 0);
+    }
+
+    &.talos-badge--top-left {
+      top: 0;
+      left: 0;
+      transform: translate(0, 0);
+    }
+
+    &.talos-badge--bottom-right {
+      bottom: 0;
+      right: 0;
+      transform: translate(0, 0);
+    }
+
+    &.talos-badge--bottom-left {
+      bottom: 0;
+      left: 0;
+      transform: translate(0, 0);
+    }
+  }
+
+  /* Visual Color Variants */
+  &--primary {
+    background-color: var(--talos-primary-solid-bg);
+    color: var(--talos-primary-solid-text);
+  }
+
+  &--secondary,
+  &--neutral {
+    background-color: var(--talos-neutral-solid-bg);
+    color: var(--talos-neutral-solid-text);
+  }
+
+  &--danger,
+  &--error {
+    background-color: var(--talos-danger-solid-bg);
+    color: var(--talos-danger-solid-text);
+  }
+
+  &--success {
+    background-color: var(--talos-success-solid-bg);
+    color: var(--talos-success-solid-text);
+  }
+
+  &--warning {
+    background-color: var(--talos-warning-solid-bg);
+    color: var(--talos-warning-solid-text);
+  }
+
+  &--info {
+    background-color: var(--talos-info-solid-bg);
+    color: var(--talos-info-solid-text);
+  }
+
+  &--subtle {
+    background-color: var(--talos-primary-subtle-bg);
+    color: var(--talos-primary-text);
+    box-shadow: 0 0 0 1px var(--talos-primary-subtle-border), 0 0 0 2px var(--talos-badge-border-color, var(--talos-bg-surface));
+  }
+
+  &--outline {
+    background-color: var(--talos-bg-surface);
+    color: var(--talos-primary);
+    border: 1px solid var(--talos-primary);
+  }
+
+  /* Pulse Animation */
+  &--pulse {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      background-color: inherit;
+      opacity: 0.75;
+      animation: talos-badge-pulse-animation 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+      z-index: -1;
+      pointer-events: none;
+    }
+  }
+}
+
+@keyframes talos-badge-pulse-animation {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+  70% {
+    transform: scale(1.75);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1.75);
+    opacity: 0;
+  }
+}
+
+/* Dark theme specific adjustments */
+[data-theme='dark'] .talos-badge,
+.dark .talos-badge {
+  --talos-badge-border-color: var(--talos-bg-surface);
+
+  &--subtle {
+    background-color: var(--talos-primary-subtle-bg);
+    color: var(--talos-primary-text);
+    box-shadow: 0 0 0 1px var(--talos-primary-subtle-border), 0 0 0 2px var(--talos-badge-border-color, var(--talos-bg-surface));
+  }
+
+  &--outline {
+    background-color: var(--talos-bg-surface);
+    color: var(--talos-primary);
+    border-color: var(--talos-primary);
+  }
+}