wehub-resource-sync
113 lines
2.1 KiB
CSS
113 lines
2.1 KiB
CSS
/* Base styles */
|
|
.chip {
|
|
@apply inline-flex w-fit shrink-0 items-center gap-0.5 rounded-2xl px-2 py-0.5 text-xs leading-5 font-medium;
|
|
|
|
/* Default tokens */
|
|
--chip-bg: var(--default);
|
|
--chip-fg: currentColor;
|
|
|
|
background-color: var(--chip-bg);
|
|
color: var(--chip-fg);
|
|
}
|
|
|
|
.chip__label {
|
|
@apply px-0.5;
|
|
}
|
|
|
|
/* Color variants - set foreground color */
|
|
.chip--accent {
|
|
--chip-fg: var(--accent-soft-foreground);
|
|
}
|
|
|
|
.chip--danger {
|
|
--chip-fg: var(--danger-soft-foreground);
|
|
}
|
|
|
|
.chip--default {
|
|
--chip-fg: var(--default-foreground);
|
|
}
|
|
|
|
.chip--success {
|
|
--chip-fg: var(--success-soft-foreground);
|
|
}
|
|
|
|
.chip--warning {
|
|
--chip-fg: var(--warning-soft-foreground);
|
|
}
|
|
|
|
/* Variant styles */
|
|
.chip--primary {
|
|
}
|
|
|
|
.chip--secondary {
|
|
/* No additional styles for secondary variant */
|
|
}
|
|
|
|
.chip--tertiary {
|
|
--chip-bg: transparent;
|
|
}
|
|
|
|
/* Size variants */
|
|
.chip--sm {
|
|
@apply px-1 py-0 text-xs;
|
|
}
|
|
|
|
.chip--md {
|
|
@apply text-xs;
|
|
}
|
|
|
|
.chip--lg {
|
|
@apply px-3 py-1 text-sm font-medium;
|
|
}
|
|
|
|
/* ====================== */
|
|
/* = Compound variants = */
|
|
/* ====================== */
|
|
|
|
/* Primary variants - solid backgrounds */
|
|
.chip--primary.chip--accent {
|
|
--chip-bg: var(--accent);
|
|
--chip-fg: var(--accent-foreground);
|
|
}
|
|
|
|
.chip--primary.chip--success {
|
|
--chip-bg: var(--success);
|
|
--chip-fg: var(--success-foreground);
|
|
}
|
|
|
|
.chip--primary.chip--warning {
|
|
--chip-bg: var(--warning);
|
|
--chip-fg: var(--warning-foreground);
|
|
}
|
|
|
|
.chip--primary.chip--danger {
|
|
--chip-bg: var(--danger);
|
|
--chip-fg: var(--danger-foreground);
|
|
}
|
|
|
|
/* Soft variants - muted backgrounds */
|
|
.chip--accent.chip--soft {
|
|
--chip-bg: var(--accent-soft);
|
|
--chip-fg: var(--accent-soft-foreground);
|
|
}
|
|
|
|
.chip--success.chip--soft {
|
|
--chip-bg: var(--success-soft);
|
|
--chip-fg: var(--success-soft-foreground);
|
|
}
|
|
|
|
.chip--warning.chip--soft {
|
|
--chip-bg: var(--warning-soft);
|
|
--chip-fg: var(--warning-soft-foreground);
|
|
}
|
|
|
|
.chip--danger.chip--soft {
|
|
--chip-bg: var(--danger-soft);
|
|
--chip-fg: var(--danger-soft-foreground);
|
|
}
|
|
|
|
.chip--default.chip--soft {
|
|
--chip-bg: var(--default-soft);
|
|
--chip-fg: var(--default-soft-foreground);
|
|
}
|