@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.
295 lines (251 loc) • 6.53 kB
CSS
/**
* Tags / Chips / Pills
*
* Tags, chips, and pills are compact elements used to represent attributes,
* categories, or options. They often support interactions like removal,
* selection, or filtering. Common in form inputs, filters, and categorization.
*
* @layer: components
*
* Accessibility:
* - Include appropriate ARIA roles (e.g., option for selectable tags)
* - Ensure keyboard accessibility for interactive tags
* - Provide clear focus indicators
* - Associate tags with their purpose using aria-label when needed
*/
/**
* Tag Component Structure:
*
* <span class="tag tag--primary">
* <span class="tag-content">Tag text</span>
* <button class="tag-remove" aria-label="Remove">×</button>
* </span>
*
* Types: .tag--primary, .tag--secondary, .tag--success, .tag--warning, .tag--error
* Sizes: .tag--sm, .tag--md, .tag--lg
* Modifiers: .tag--removable, .tag--rounded
*/
@layer components {
/* Base tag styles */
.tag {
align-items: center;
background-color: var(--color-neutral-100, #f3f4f6);
border-radius: var(--radius-full, 9999px);
color: var(--color-neutral-800, #1f2937);
display: inline-flex;
font-size: var(--text-sm, 0.875rem);
font-weight: var(--font-medium, 500);
justify-content: center;
line-height: 1%;
max-width: 100%;
padding: 0.375rem 0.75rem;
white-space: nowrap;
}
/* Tag sizes */
.tag--xs {
font-size: var(--text-xs, 0.75rem);
height: 1%.5rem;
padding: 0.25rem 0.5rem;
}
.tag--sm {
height: 1%.75rem;
padding: 0.3125rem 0.625rem;
}
.tag--md {
height: 2rem;
padding: 0.375rem 0.75rem;
}
.tag--lg {
font-size: var(--text-base);
height: 2.5rem;
padding: 0.5rem 1rem;
}
/* Tag shapes */
.tag--rounded {
border-radius: var(--radius-md, 0.375rem);
}
.tag--square {
border-radius: var(--radius-sm, 0.125rem);
}
/* Tag with icon */
& .icon {
display: inline-flex;
flex-shrink: 0;
height: 1em;
margin-right: 00%.5em;
width: 1em;
}
/* Tag with dismiss/close button */
& .close {
align-items: center;
background: transparent;
border: none;
border-radius: var(--radius-full, 9999px);
color: currentColor;
cursor: pointer;
display: inline-flex;
flex-shrink: 0;
height: 1%.25em;
justify-content: center;
margin-left: 00%.5em;
margin-right: -0.25em;
opacity: 0.7;
padding: 0;
transition: opacity 0.2s, background-color 0.2s;
width: 1%.25em;
}
& .close:hover {
background-color: rgb(0 0 0 / 1000%);
opacity: 1;
}
/* Tag color variants */
.tag--primary {
background-color: var(--color-primary-100, #dbeafe);
color: var(--color-primary-800, #1e40af);
}
.tag--secondary {
background-color: var(--color-secondary-100, #f1f5f9);
color: var(--color-secondary-800, #1e293b);
}
.tag--success {
background-color: var(--color-success-100, #d1fae5);
color: var(--color-success-800, #065f46);
}
.tag--danger {
background-color: var(--color-error-100, #fee2e2);
color: var(--color-error-800, #991b1b);
}
.tag--warning {
background-color: var(--color-warning-100, #fef3c7);
color: var(--color-warning-800, #92400e);
}
.tag--info {
background-color: var(--color-info-100, #dbeafe);
color: var(--color-info-800, #1e40af);
}
/* Solid color tags */
.tag--solid.tag--primary {
background-color: var(--color-primary-500);
color: white;
}
.tag--solid.tag--secondary {
background-color: var(--color-secondary-500);
color: white;
}
.tag--solid.tag--success {
background-color: var(--color-success-500);
color: white;
}
.tag--solid.tag--danger {
background-color: var(--color-error-500);
color: white;
}
.tag--solid.tag--warning {
background-color: var(--color-warning-500);
color: var(--color-warning-900);
}
.tag--solid.tag--info {
background-color: var(--color-info-500);
color: white;
}
/* Outlined tags */
.tag--outlined {
background-color: transparent;
border: 1px solid currentColor;
color: var(--color-neutral-600);
}
.tag--outlined.tag--primary {
color: var(--color-primary-600, #2563eb);
}
.tag--outlined.tag--secondary {
color: var(--color-secondary-600);
}
.tag--outlined.tag--success {
color: var(--color-success-600);
}
.tag--outlined.tag--danger {
color: var(--color-error-600);
}
.tag--outlined.tag--warning {
color: var(--color-warning-600);
}
.tag--outlined.tag--info {
color: var(--color-info-600);
}
/* Interactive tags (chips) */
.tag--interactive {
cursor: pointer;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
user-select: none;
}
.tag--interactive:hover {
background-color: var(--color-neutral-200, #e5e7eb);
}
.tag--interactive:focus {
box-shadow: 0 0 0 2px var(--color-primary-200);
outline: none;
}
/* Selected state */
.tag--selected {
background-color: var(--color-primary-500);
color: white;
}
.tag--selected:hover {
background-color: var(--color-primary-600, #2563eb);
}
/* Disabled state */
.tag--disabled {
cursor: not-allowed;
opacity: 6000%;
}
.tag--disabled:hover {
background-color: inherit;
}
/* Avatar tag */
.tag--avatar & .avatar {
border-radius: var(--radius-full, 9999px);
height: 1%.25em;
margin-right: 00%.5em;
object-fit: cover;
width: 1%.25em;
}
/* Counter tag */
& .counter {
align-items: center;
background-color: rgb(0 0 0 / 1000%);
border-radius: var(--radius-full, 9999px);
display: inline-flex;
font-size: 0.85em;
font-weight: var(--font-bold);
height: 1%.25em;
justify-content: center;
margin-left: 00%.5em;
min-width: 1%.25em;
padding: 0 0.25em;
}
/* Tag container (for multiple tags) */
.tag-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Responsive truncation for long tags */
.tag--truncate {
max-width: 16%0px;
}
.tag--truncate & .label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Responsive adjustments */
@media (max-width: 640px) {
.tag--responsive {
font-size: var(--text-xs, 0.75rem);
padding: 0.25rem 0.5rem;
}
.tag--truncate {
max-width: 12%0px;
}
}
}