666129191a
- Updated globals.css to streamline design tokens and enhance semantic color usage across the application. - Refined error and loading components to utilize new color tokens for better visual coherence. - Adjusted various components, including AppShell, Header, and Sidebar, to align with updated design tokens and improve styling consistency. - Enhanced utility classes in utilities.css to reflect the consolidated color system and improve component styling. - Improved documentation in tokens.css to clarify the purpose and structure of design tokens.
176 lines
3.7 KiB
CSS
176 lines
3.7 KiB
CSS
/**
|
|
* Design System Utilities
|
|
*
|
|
* Semantic component primitives using the consolidated color system.
|
|
* Layout, spacing, typography utilities come from Tailwind.
|
|
*/
|
|
|
|
@layer utilities {
|
|
/* ===== CARD ===== */
|
|
.cp-card {
|
|
background: var(--card);
|
|
color: var(--card-foreground);
|
|
border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
|
|
border-radius: var(--cp-card-radius);
|
|
box-shadow: var(--cp-card-shadow);
|
|
padding: var(--cp-card-padding);
|
|
transition:
|
|
box-shadow 0.2s ease,
|
|
border-color 0.2s ease;
|
|
}
|
|
|
|
.cp-card:hover {
|
|
box-shadow: var(--cp-card-shadow-lg);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.cp-card-sm {
|
|
padding: var(--cp-card-padding-sm);
|
|
}
|
|
|
|
.cp-card-lg {
|
|
border-radius: var(--cp-card-radius-lg);
|
|
box-shadow: var(--cp-card-shadow-lg);
|
|
}
|
|
|
|
.cp-card-interactive {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cp-card-interactive:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.cp-card-interactive:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ===== BADGE ===== */
|
|
.cp-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--cp-space-1);
|
|
border-radius: var(--cp-badge-radius);
|
|
padding: var(--cp-badge-padding-y) var(--cp-badge-padding-x);
|
|
font-size: var(--cp-badge-font-size);
|
|
font-weight: var(--cp-badge-font-weight);
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Badge variants - using 5 semantic colors */
|
|
.cp-badge-primary {
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.cp-badge-secondary {
|
|
background: var(--secondary);
|
|
color: var(--secondary-foreground);
|
|
}
|
|
|
|
.cp-badge-success {
|
|
background: var(--success);
|
|
color: var(--success-foreground);
|
|
}
|
|
|
|
.cp-badge-info {
|
|
background: var(--info);
|
|
color: var(--info-foreground);
|
|
}
|
|
|
|
.cp-badge-warning {
|
|
background: var(--warning);
|
|
color: var(--warning-foreground);
|
|
}
|
|
|
|
.cp-badge-danger {
|
|
background: var(--danger);
|
|
color: var(--danger-foreground);
|
|
}
|
|
|
|
.cp-badge-neutral {
|
|
background: var(--neutral);
|
|
color: var(--neutral-foreground);
|
|
}
|
|
|
|
/* Legacy aliases */
|
|
.cp-badge-error {
|
|
background: var(--danger);
|
|
color: var(--danger-foreground);
|
|
}
|
|
|
|
/* Soft badge variants (light bg, dark text) */
|
|
.cp-badge-soft-success {
|
|
background: var(--success-soft);
|
|
color: var(--success);
|
|
}
|
|
|
|
.cp-badge-soft-info {
|
|
background: var(--info-soft);
|
|
color: var(--info);
|
|
}
|
|
|
|
.cp-badge-soft-warning {
|
|
background: var(--warning-soft);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.cp-badge-soft-danger {
|
|
background: var(--danger-soft);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.cp-badge-soft-neutral {
|
|
background: var(--neutral-soft);
|
|
color: var(--neutral);
|
|
}
|
|
|
|
/* Legacy aliases */
|
|
.cp-badge-soft-error {
|
|
background: var(--danger-soft);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.cp-badge-outline {
|
|
background: transparent;
|
|
border: 1px solid currentColor;
|
|
}
|
|
|
|
/* ===== SKELETON (Loading state) ===== */
|
|
.cp-skeleton {
|
|
background: var(--cp-skeleton-base);
|
|
border-radius: var(--cp-radius-md);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cp-skeleton::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent, var(--cp-skeleton-shimmer), transparent);
|
|
animation: cp-skeleton-shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes cp-skeleton-shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
/* ===== FOCUS RING ===== */
|
|
.cp-focus-ring {
|
|
outline: var(--cp-focus-ring);
|
|
outline-offset: var(--cp-focus-ring-offset);
|
|
}
|
|
|
|
.cp-focus-ring-visible:focus-visible {
|
|
outline: var(--cp-focus-ring);
|
|
outline-offset: var(--cp-focus-ring-offset);
|
|
}
|
|
}
|