136 lines
2.5 KiB
CSS
136 lines
2.5 KiB
CSS
@import "./tokens.css";
|
|
|
|
/* Reusable component utilities using tokens */
|
|
|
|
/* Base token utility helpers */
|
|
.text-primary {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.text-inverted {
|
|
color: var(--text-inverted);
|
|
}
|
|
|
|
.text-accent {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.bg-surface-base {
|
|
background-color: var(--surface-base);
|
|
}
|
|
|
|
.bg-surface-secondary {
|
|
background-color: var(--surface-secondary);
|
|
}
|
|
|
|
.bg-surface-muted {
|
|
background-color: var(--surface-muted);
|
|
}
|
|
|
|
.border-base {
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.icon-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.icon-accent {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.icon-danger-hover:hover {
|
|
color: var(--status-error);
|
|
}
|
|
|
|
.icon-accent-hover:hover {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.ring-accent-inset {
|
|
box-shadow: inset 0 0 0 2px var(--accent-primary);
|
|
}
|
|
|
|
/* Shared button + chip helpers */
|
|
:is(.button-primary,
|
|
button.button-primary,
|
|
.button-secondary,
|
|
button.button-secondary,
|
|
.button-tertiary,
|
|
button.button-tertiary) {
|
|
@apply inline-flex items-center justify-center gap-2 font-medium transition-colors rounded-md;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
:is(.button-primary,
|
|
button.button-primary,
|
|
.button-secondary,
|
|
button.button-secondary,
|
|
.button-tertiary,
|
|
button.button-tertiary):focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--focus-ring-offset), 0 0 0 4px var(--focus-ring-color);
|
|
}
|
|
|
|
:is(.button-primary,
|
|
button.button-primary,
|
|
.button-secondary,
|
|
button.button-secondary,
|
|
.button-tertiary,
|
|
button.button-tertiary):disabled {
|
|
@apply cursor-not-allowed opacity-50;
|
|
}
|
|
|
|
:is(.attachment-chip,
|
|
.neutral-badge,
|
|
.status-badge) {
|
|
@apply inline-flex items-center gap-1;
|
|
border-radius: var(--chip-radius);
|
|
}
|
|
|
|
/* Focus helpers */
|
|
.focus-ring-accent:focus {
|
|
outline: none;
|
|
border-color: transparent;
|
|
box-shadow: 0 0 0 2px var(--accent-primary);
|
|
}
|
|
|
|
/* Shared animations */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Shared layout helpers */
|
|
.status-dot {
|
|
@apply w-1 h-1 rounded-full;
|
|
}
|
|
|
|
.kbd {
|
|
@apply inline-flex items-center gap-0.5 font-mono text-xs px-1.5 py-0.5 rounded;
|
|
background-color: var(--surface-secondary);
|
|
border: 1px solid var(--border-base);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.kbd-separator {
|
|
@apply opacity-50;
|
|
}
|