/*
* ============================================================
* MUI Robotics — Design System CSS
* ============================================================
* Portable design tokens and component classes extracted from
* the MUI Dashboard (Tailwind-based) project.
*
* HOW TO USE:
* 1. Import this file: @import './mui-design-system.css';
* or
* 2. Add class="dark" to to enable dark mode.
* 3. Use CSS variables (--mui-*) for custom integrations.
* 4. Use .mui-* classes for pre-built components.
*
* FONT SETUP (add to your ):
*
*
* DEPENDENCIES: None — pure CSS, framework-agnostic.
* ============================================================
*/
/* ==========================================================
1. DESIGN TOKENS (CSS Custom Properties)
========================================================== */
:root {
/* ── Brand Colors ─────────────────────────────────────── */
--mui-brand-50: #eef5ff;
--mui-brand-100: #daeaff;
--mui-brand-200: #bdd8ff;
--mui-brand-300: #90beff;
--mui-brand-400: #5c9aff;
--mui-brand-500: #3575f5; /* Primary */
--mui-brand-600: #1d56ea;
--mui-brand-700: #1643d7;
--mui-brand-800: #1838ae;
--mui-brand-900: #1a3489;
--mui-brand-950: #141f52;
/* ── Surface Colors (Light Mode) ──────────────────────── */
--mui-surface-bg: #f8fafc;
--mui-surface-card: #ffffff;
--mui-surface-border: #e2e8f0;
/* ── Text Colors (Light Mode) ─────────────────────────── */
--mui-text-primary: #0f172a; /* slate-900 */
--mui-text-secondary: #64748b; /* slate-500 */
--mui-text-tertiary: #94a3b8; /* slate-400 */
--mui-text-inverse: #f1f5f9; /* slate-100 */
/* ── Status / Semantic Colors ─────────────────────────── */
--mui-status-success: #22c55e;
--mui-status-success-bg: #dcfce7;
--mui-status-success-text: #15803d;
--mui-status-warning: #eab308;
--mui-status-warning-bg: #fef9c3;
--mui-status-warning-text: #a16207;
--mui-status-danger: #ef4444;
--mui-status-danger-bg: #fee2e2;
--mui-status-danger-text: #b91c1c;
--mui-status-info: #3b82f6;
--mui-status-info-bg: #dbeafe;
--mui-status-info-text: #1d4ed8;
--mui-status-orange: #f97316;
--mui-status-orange-bg: #ffedd5;
--mui-status-orange-text: #c2410c;
--mui-status-purple: #a855f7;
--mui-status-purple-bg: #f3e8ff;
--mui-status-purple-text: #7e22ce;
--mui-status-neutral: #94a3b8;
--mui-status-neutral-bg: #f1f5f9;
--mui-status-neutral-text: #475569;
/* ── Typography ───────────────────────────────────────── */
--mui-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--mui-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
--mui-text-xs: 0.75rem; /* 12px */
--mui-text-sm: 0.875rem; /* 14px */
--mui-text-base: 1rem; /* 16px */
--mui-text-lg: 1.125rem; /* 18px */
--mui-text-xl: 1.25rem; /* 20px */
--mui-text-2xl: 1.5rem; /* 24px */
--mui-text-3xl: 1.875rem; /* 30px */
/* ── Spacing (8px grid) ───────────────────────────────── */
--mui-space-1: 0.25rem; /* 4px */
--mui-space-2: 0.5rem; /* 8px */
--mui-space-3: 0.75rem; /* 12px */
--mui-space-4: 1rem; /* 16px */
--mui-space-5: 1.25rem; /* 20px */
--mui-space-6: 1.5rem; /* 24px */
--mui-space-8: 2rem; /* 32px */
--mui-space-10: 2.5rem; /* 40px */
--mui-space-12: 3rem; /* 48px */
/* ── Borders & Radius ─────────────────────────────────── */
--mui-radius-sm: 0.375rem; /* 6px */
--mui-radius-md: 0.5rem; /* 8px */
--mui-radius-lg: 0.75rem; /* 12px */
--mui-radius-xl: 1rem; /* 16px — cards */
--mui-radius-full: 9999px; /* pills / badges */
/* ── Shadows ──────────────────────────────────────────── */
--mui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--mui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--mui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--mui-shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.15);
/* ── Transitions ──────────────────────────────────────── */
--mui-transition-fast: 150ms ease;
--mui-transition-normal: 200ms ease;
--mui-transition-slow: 300ms ease;
/* ── Focus Ring ───────────────────────────────────────── */
--mui-focus-ring: 0 0 0 2px var(--mui-brand-500);
}
/* ── Dark Mode Overrides ──────────────────────────────────── */
.dark,
[data-theme="dark"] {
--mui-surface-bg: #0f172a;
--mui-surface-card: #1e293b;
--mui-surface-border: #334155;
--mui-text-primary: #f1f5f9;
--mui-text-secondary: #94a3b8;
--mui-text-tertiary: #64748b;
--mui-text-inverse: #0f172a;
--mui-status-success-bg: rgba(34, 197, 94, 0.15);
--mui-status-success-text: #4ade80;
--mui-status-warning-bg: rgba(234, 179, 8, 0.15);
--mui-status-warning-text: #facc15;
--mui-status-danger-bg: rgba(239, 68, 68, 0.15);
--mui-status-danger-text: #f87171;
--mui-status-info-bg: rgba(59, 130, 246, 0.15);
--mui-status-info-text: #60a5fa;
--mui-status-orange-bg: rgba(249, 115, 22, 0.15);
--mui-status-orange-text: #fb923c;
--mui-status-purple-bg: rgba(168, 85, 247, 0.15);
--mui-status-purple-text: #c084fc;
--mui-status-neutral-bg: #1e293b;
--mui-status-neutral-text: #94a3b8;
--mui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
--mui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
--mui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
}
/* ==========================================================
2. BASE / RESET
========================================================== */
.mui-base {
font-family: var(--mui-font-sans);
color: var(--mui-text-primary);
background-color: var(--mui-surface-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
.mui-base *,
.mui-base *::before,
.mui-base *::after {
box-sizing: border-box;
}
/* ── Scrollbar ────────────────────────────────────────────── */
.mui-base ::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.mui-base ::-webkit-scrollbar-track {
background: transparent;
}
.mui-base ::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 9999px;
}
.mui-base ::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.dark .mui-base ::-webkit-scrollbar-thumb {
background: #475569;
}
.dark .mui-base ::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* ==========================================================
3. ANIMATIONS
========================================================== */
@keyframes mui-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mui-slide-up {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes mui-pulse-slow {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes mui-spin {
to { transform: rotate(360deg); }
}
.mui-animate-fade-in { animation: mui-fade-in 0.4s ease-out; }
.mui-animate-slide-up { animation: mui-slide-up 0.3s ease-out; }
.mui-animate-pulse { animation: mui-pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.mui-animate-spin { animation: mui-spin 1s linear infinite; }
/* ==========================================================
4. COMPONENT: Card
========================================================== */
.mui-card {
background: var(--mui-surface-card);
border: 1px solid var(--mui-surface-border);
border-radius: var(--mui-radius-xl);
box-shadow: var(--mui-shadow-sm);
transition: all var(--mui-transition-normal);
}
.mui-card--hover:hover {
box-shadow: var(--mui-shadow-md);
border-color: var(--mui-brand-300);
cursor: pointer;
}
.dark .mui-card--hover:hover {
border-color: var(--mui-brand-600);
}
.mui-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: var(--mui-space-5) var(--mui-space-5) var(--mui-space-3);
}
.mui-card__title {
font-size: var(--mui-text-sm);
font-weight: 600;
color: var(--mui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
.dark .mui-card__title {
color: #e2e8f0;
}
.mui-card__subtitle {
font-size: var(--mui-text-xs);
color: var(--mui-text-secondary);
margin-top: 2px;
}
.mui-card__body {
padding: 0 var(--mui-space-5) var(--mui-space-5);
}
/* ==========================================================
5. COMPONENT: Badge
========================================================== */
.mui-badge {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: var(--mui-radius-full);
padding: 2px 10px;
font-size: var(--mui-text-xs);
font-weight: 500;
font-family: var(--mui-font-sans);
line-height: 1.5;
white-space: nowrap;
}
/* Badge dot indicator */
.mui-badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
/* ── Badge Variants ───────────────────────────────────────── */
.mui-badge--green {
background: var(--mui-status-success-bg);
color: var(--mui-status-success-text);
}
.mui-badge--green .mui-badge__dot { background: var(--mui-status-success); }
.mui-badge--yellow {
background: var(--mui-status-warning-bg);
color: var(--mui-status-warning-text);
}
.mui-badge--yellow .mui-badge__dot { background: var(--mui-status-warning); }
.mui-badge--orange {
background: var(--mui-status-orange-bg);
color: var(--mui-status-orange-text);
}
.mui-badge--orange .mui-badge__dot { background: var(--mui-status-orange); }
.mui-badge--red {
background: var(--mui-status-danger-bg);
color: var(--mui-status-danger-text);
}
.mui-badge--red .mui-badge__dot { background: var(--mui-status-danger); }
.mui-badge--blue {
background: var(--mui-status-info-bg);
color: var(--mui-status-info-text);
}
.mui-badge--blue .mui-badge__dot { background: var(--mui-status-info); }
.mui-badge--purple {
background: var(--mui-status-purple-bg);
color: var(--mui-status-purple-text);
}
.mui-badge--purple .mui-badge__dot { background: var(--mui-status-purple); }
.mui-badge--slate {
background: var(--mui-status-neutral-bg);
color: var(--mui-status-neutral-text);
}
.mui-badge--slate .mui-badge__dot { background: var(--mui-status-neutral); }
/* ==========================================================
6. COMPONENT: Form Controls
========================================================== */
/* ── Select ───────────────────────────────────────────────── */
.mui-select {
height: 2rem;
border-radius: var(--mui-radius-lg);
border: 1px solid var(--mui-surface-border);
background: var(--mui-surface-card);
padding: 0 var(--mui-space-3);
font-size: var(--mui-text-sm);
font-family: var(--mui-font-sans);
color: var(--mui-text-primary);
cursor: pointer;
transition: border-color var(--mui-transition-fast),
box-shadow var(--mui-transition-fast);
outline: none;
appearance: auto;
}
.mui-select:focus {
box-shadow: var(--mui-focus-ring);
border-color: var(--mui-brand-500);
}
/* ── Input ────────────────────────────────────────────────── */
.mui-input {
height: 2.25rem;
border-radius: var(--mui-radius-lg);
border: 1px solid var(--mui-surface-border);
background: var(--mui-surface-card);
padding: 0 var(--mui-space-3);
font-size: var(--mui-text-sm);
font-family: var(--mui-font-sans);
color: var(--mui-text-primary);
transition: border-color var(--mui-transition-fast),
box-shadow var(--mui-transition-fast);
outline: none;
width: 100%;
}
.mui-input:focus {
box-shadow: var(--mui-focus-ring);
border-color: var(--mui-brand-500);
}
.mui-input::placeholder {
color: var(--mui-text-tertiary);
}
/* ── Label ────────────────────────────────────────────────── */
.mui-label {
font-size: var(--mui-text-xs);
font-weight: 500;
color: var(--mui-text-secondary);
margin-bottom: var(--mui-space-1);
display: block;
}
/* ==========================================================
7. COMPONENT: Button
========================================================== */
.mui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mui-space-2);
border-radius: var(--mui-radius-lg);
font-size: var(--mui-text-sm);
font-weight: 500;
font-family: var(--mui-font-sans);
padding: var(--mui-space-2) var(--mui-space-4);
cursor: pointer;
border: 1px solid transparent;
transition: all var(--mui-transition-fast);
outline: none;
line-height: 1.25;
}
.mui-btn:focus-visible {
box-shadow: var(--mui-focus-ring);
}
.mui-btn--primary {
background: var(--mui-brand-600);
color: #ffffff;
}
.mui-btn--primary:hover {
background: var(--mui-brand-700);
}
.mui-btn--secondary {
background: transparent;
color: var(--mui-text-primary);
border-color: var(--mui-surface-border);
}
.mui-btn--secondary:hover {
background: var(--mui-surface-bg);
}
.mui-btn--ghost {
background: transparent;
color: var(--mui-text-secondary);
border: none;
}
.mui-btn--ghost:hover {
background: var(--mui-surface-bg);
color: var(--mui-text-primary);
}
.mui-btn--danger {
background: var(--mui-status-danger);
color: #ffffff;
}
.mui-btn--danger:hover {
background: #dc2626;
}
.mui-btn--sm {
font-size: var(--mui-text-xs);
padding: var(--mui-space-1) var(--mui-space-3);
}
.mui-btn--lg {
font-size: var(--mui-text-base);
padding: var(--mui-space-3) var(--mui-space-6);
}
/* ==========================================================
8. COMPONENT: Loading Spinner
========================================================== */
.mui-spinner {
display: inline-block;
border: 2px solid var(--mui-surface-border);
border-top-color: var(--mui-brand-500);
border-radius: 50%;
animation: mui-spin 0.75s linear infinite;
}
.mui-spinner--sm { width: 1rem; height: 1rem; }
.mui-spinner--md { width: 1.5rem; height: 1.5rem; }
.mui-spinner--lg { width: 2.5rem; height: 2.5rem; }
/* ==========================================================
9. LAYOUT UTILITIES
========================================================== */
/* ── Sidebar Shell ────────────────────────────────────────── */
.mui-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 14rem; /* 224px — matches w-56 */
background: var(--mui-surface-card);
border-right: 1px solid var(--mui-surface-border);
z-index: 40;
transition: width var(--mui-transition-slow);
overflow-y: auto;
}
.mui-sidebar--collapsed {
width: 4rem; /* 64px — icon only */
}
/* ── Header Bar ───────────────────────────────────────────── */
.mui-header {
position: sticky;
top: 0;
z-index: 30;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--mui-space-5);
background: var(--mui-surface-card);
border-bottom: 1px solid var(--mui-surface-border);
backdrop-filter: blur(8px);
}
/* ── Content Area ─────────────────────────────────────────── */
.mui-content {
padding: var(--mui-space-6);
max-width: 90rem;
margin: 0 auto;
}
/* ==========================================================
10. TYPOGRAPHY HELPERS
========================================================== */
.mui-heading-lg {
font-size: var(--mui-text-2xl);
font-weight: 700;
color: var(--mui-text-primary);
line-height: 1.3;
}
.mui-heading-md {
font-size: var(--mui-text-lg);
font-weight: 600;
color: var(--mui-text-primary);
line-height: 1.4;
}
.mui-heading-sm {
font-size: var(--mui-text-sm);
font-weight: 600;
color: var(--mui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mui-text-body {
font-size: var(--mui-text-sm);
color: var(--mui-text-primary);
line-height: 1.5;
}
.mui-text-caption {
font-size: var(--mui-text-xs);
color: var(--mui-text-secondary);
}
.mui-text-mono {
font-family: var(--mui-font-mono);
font-size: var(--mui-text-sm);
}
/* ==========================================================
11. KPI / METRIC CARD (Dashboard pattern)
========================================================== */
.mui-kpi {
display: flex;
flex-direction: column;
gap: var(--mui-space-1);
}
.mui-kpi__label {
font-size: var(--mui-text-xs);
font-weight: 500;
color: var(--mui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mui-kpi__value {
font-size: var(--mui-text-2xl);
font-weight: 700;
color: var(--mui-text-primary);
line-height: 1.2;
}
.mui-kpi__trend {
font-size: var(--mui-text-xs);
font-weight: 500;
}
.mui-kpi__trend--up { color: var(--mui-status-success); }
.mui-kpi__trend--down { color: var(--mui-status-danger); }
.mui-kpi__trend--flat { color: var(--mui-text-tertiary); }
/* ==========================================================
12. TABLE
========================================================== */
.mui-table {
width: 100%;
border-collapse: collapse;
font-size: var(--mui-text-sm);
font-family: var(--mui-font-sans);
}
.mui-table th {
text-align: left;
font-size: var(--mui-text-xs);
font-weight: 600;
color: var(--mui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--mui-space-3) var(--mui-space-4);
border-bottom: 1px solid var(--mui-surface-border);
}
.mui-table td {
padding: var(--mui-space-3) var(--mui-space-4);
border-bottom: 1px solid var(--mui-surface-border);
color: var(--mui-text-primary);
}
.mui-table tr:hover td {
background: var(--mui-surface-bg);
}
/* ==========================================================
13. RESPONSIVE BREAKPOINTS (reference)
==========================================================
These match the Tailwind defaults used in the dashboard:
sm: 640px
md: 768px — sidebar collapses
lg: 1024px — sidebar expands
xl: 1280px
2xl: 1536px
========================================================== */