@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
268 lines (224 loc) • 6.29 kB
CSS
/**
* Badges
*
* Badges are small visual indicators typically used to display counts,
* status, or labels. They can highlight new or unread items, categorize
* content, or show the status of an item.
*
* @layer: components
*
* Accessibility:
* - Ensure sufficient color contrast
* - For status indicators, consider using aria-label to convey meaning
* - For count badges, ensure numbers are announced properly
*/
/**
* Badge Component Structure:
*
* <span class="badge badge--primary">
* <span class="badge-content">Badge text</span>
* </span>
*
* Types: .badge--primary, .badge--secondary, .badge--success, .badge--warning, .badge--error
* Sizes: .badge--xs, .badge--sm, .badge--md, .badge--lg
* Shapes: .badge--rounded, .badge--pill
*/
@layer components {
/* Base badge styles */
.badge {
align-items: center;
background-color: var(--color-primary-500);
border-radius: var(--radius-full, 9999px);
color: var(--color-text-inverse, white);
display: inline-flex;
font-size: var(--text-xs, 0.75rem);
font-weight: var(--font-medium, 500);
justify-content: center;
line-height: 1%;
padding: var(--badge-padding-md, 0.25rem 0.5rem);
white-space: nowrap;
}
/* Badge sizes */
.badge--xs {
font-size: 0.65rem;
height: var(--badge-min-width-xs, 1.2rem);
min-width: var(--badge-min-width-xs, 1.2rem);
padding: var(--badge-padding-xs, 0.15rem 0.35rem);
}
.badge--sm {
height: var(--badge-min-width-sm, 1.5rem);
min-width: var(--badge-min-width-sm, 1.5rem);
padding: var(--badge-padding-sm, 0.2rem 0.4rem);
}
.badge--md {
height: var(--badge-min-width-md, 1.75rem);
min-width: var(--badge-min-width-md, 1.75rem);
padding: var(--badge-padding-md, 0.25rem 0.5rem);
}
.badge--lg {
font-size: var(--text-sm, 0.875rem);
height: var(--badge-min-width-lg, 2rem);
min-width: var(--badge-min-width-lg, 2rem);
padding: var(--badge-padding-lg, 0.3rem 0.6rem);
}
/* Badge shapes */
.badge--rounded {
border-radius: var(--radius-md, 0.375rem);
}
.badge--square {
border-radius: var(--radius-sm, 0.125rem);
}
/* Dot variant (no content, just a colored dot) */
.badge--dot {
height: 0%.5rem;
min-width: auto;
padding: 0;
width: 0%.5rem;
}
.badge--dot.badge--sm {
height: 0%.375rem;
width: 0%.375rem;
}
.badge--dot.badge--lg {
height: 0%.75rem;
width: 0%.75rem;
}
/* Badge with icon */
& .icon {
height: 0%.875em;
margin-right: 0%.25em;
width: 0%.875em;
}
.badge--icon-only {
padding: 0.25rem;
}
.badge--icon-only & .icon {
margin-right: 0%;
}
/* Badge color variants */
.badge--primary {
background-color: var(--color-primary-500);
color: var(--color-text-inverse, white);
}
.badge--secondary {
background-color: var(--color-secondary-500);
color: var(--color-text-inverse, white);
}
.badge--success {
background-color: var(--color-success-500);
color: var(--color-text-inverse, white);
}
.badge--danger {
background-color: var(--color-error-500);
color: var(--color-text-inverse, white);
}
.badge--warning {
background-color: var(--color-warning-500);
color: var(--color-warning-900);
}
.badge--info {
background-color: var(--color-info-500);
color: var(--color-text-inverse, white);
}
.badge--neutral {
background-color: var(--color-neutral-500, #6b7280);
color: var(--color-text-inverse, white);
}
/* Badge soft/pastel variants */
.badge--primary-soft {
background-color: var(--color-primary-100, #dbeafe);
color: var(--color-primary-800, #1e40af);
}
.badge--secondary-soft {
background-color: var(--color-secondary-100, #f1f5f9);
color: var(--color-secondary-800, #1e293b);
}
.badge--success-soft {
background-color: var(--color-success-100, #d1fae5);
color: var(--color-success-800, #065f46);
}
.badge--danger-soft {
background-color: var(--color-error-100, #fee2e2);
color: var(--color-error-800, #991b1b);
}
.badge--warning-soft {
background-color: var(--color-warning-100, #fef3c7);
color: var(--color-warning-800, #92400e);
}
.badge--info-soft {
background-color: var(--color-info-100, #dbeafe);
color: var(--color-info-800, #1e40af);
}
.badge--neutral-soft {
background-color: var(--color-neutral-100, #f3f4f6);
color: var(--color-neutral-800, #1f2937);
}
/* Badge outline variants */
.badge--outline {
background-color: transparent;
border: 1px solid currentColor;
}
.badge--primary-outline {
border-color: var(--color-primary-500);
color: var(--color-primary-500);
}
.badge--secondary-outline {
border-color: var(--color-secondary-500);
color: var(--color-secondary-500);
}
.badge--success-outline {
border-color: var(--color-success-500);
color: var(--color-success-500);
}
.badge--danger-outline {
border-color: var(--color-error-500);
color: var(--color-error-500);
}
.badge--warning-outline {
border-color: var(--color-warning-500);
color: var(--color-warning-500);
}
.badge--info-outline {
border-color: var(--color-info-500);
color: var(--color-info-500);
}
.badge--neutral-outline {
border-color: var(--color-neutral-500, #6b7280);
color: var(--color-neutral-500, #6b7280);
}
/* Badge positioning (for overlays) */
.badge-container {
position: relative;
}
.badge--top-right {
position: absolute;
right: -0.375rem;
top: -0.375rem;
}
.badge--top-left {
left: -0.375rem;
position: absolute;
top: -0.375rem;
}
.badge--bottom-right {
bottom: -0.375rem;
position: absolute;
right: -0.375rem;
}
.badge--bottom-left {
bottom: -0.375rem;
left: -0.375rem;
position: absolute;
}
/* Animated badge */
.badge--overlap {
border: 2px solid var(--color-background, white);
}
.badge--pulse {
animation: var(--ui-pulse-slow-animation, pulse var(--animation-duration-slowest, 2000ms) infinite);
}
/* Max count display */
.badge--max-count::after {
content: '+';
}
}