/* * Educreator design tokens. * Source of truth: docs/design/04-base-component-inventory.md * MudBlazor palette: LabAI.View.Shared/Theme/PalettesLabAI.cs * * Rules: * - Do NOT hard-code colors, font families, or spacing values in components. * - Consume these tokens via `var(--token-name)` or via MudBlazor palette colors. * - Keep this file in sync with the MudBlazor palette and the design docs. */ :root { /* ----- Brand & semantic colors ----- */ /* Primary intentionally matches MudBlazor palette (currently #276761). The design brief references #2B6CB0 as the original brand blue; the product adopted a deeper teal variant. Keep both in sync with PalettesLabAI.cs. */ --color-primary: #276761; --color-primary-light: #4299E1; --color-primary-dark: #2C5282; --color-primary-contrast: #FFFFFF; --color-secondary: #319795; --color-secondary-light: #81E6D9; --color-secondary-dark: #285E61; --color-secondary-contrast: #FFFFFF; --color-accent: #B7591A; --color-accent-light: #ED8936; --color-accent-dark: #C05621; --color-success: #38A169; --color-warning: #D69E2E; --color-error: #E53E3E; --color-info: #4299E1; /* ----- Neutrals ----- */ --white: #FFFFFF; --gray-50: #F7FAFC; --gray-100: #EDF2F7; --gray-200: #E2E8F0; --gray-300: #CBD5E0; --gray-400: #A0AEC0; --gray-500: #718096; --gray-600: #4A5568; --gray-700: #2D3748; --gray-800: #1A202C; --gray-900: #171923; /* ----- Surfaces ----- Bound to MudBlazor palette vars so light/dark switching is automatic (MudBlazor 8+ updates --mud-palette-* on theme toggle, but does NOT add a `.mud-theme-dark` class to ). Fallbacks are provided. */ --surface-background: var(--mud-palette-background, var(--gray-50)); --surface-card: var(--mud-palette-surface, var(--white)); --surface-muted: var(--mud-palette-background-gray, var(--gray-100)); --surface-divider: var(--mud-palette-divider, var(--gray-200)); /* ----- Text ----- WCAG AA target: body text ≥ 4.5:1, large text / UI ≥ 3:1. Bound to MudBlazor palette vars; fallbacks meet AA on white/gray-50. */ --text-primary: var(--mud-palette-text-primary, var(--gray-900)); --text-secondary: var(--mud-palette-text-secondary, var(--gray-700)); --text-disabled: var(--mud-palette-text-disabled, var(--gray-500)); --text-on-primary: var(--color-primary-contrast); /* ----- Typography ----- */ --font-heading: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif; --font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; --text-h1-size: 32px; --text-h1-line: 40px; --text-h1-weight: 700; --text-h2-size: 24px; --text-h2-line: 32px; --text-h2-weight: 600; --text-h3-size: 20px; --text-h3-line: 28px; --text-h3-weight: 600; --text-body-size: 16px; --text-body-line: 24px; --text-body-weight: 400; --text-small-size: 14px; --text-small-line: 20px; --text-small-weight: 400; --text-helper-size: 12px; --text-helper-line: 16px; --text-helper-weight: 500; /* ----- Spacing (4px base scale) ----- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ----- Radius ----- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ----- Elevation ----- */ --shadow-sm: 0 1px 2px rgba(23, 25, 35, 0.06), 0 1px 1px rgba(23, 25, 35, 0.04); --shadow-md: 0 4px 8px rgba(23, 25, 35, 0.08), 0 2px 4px rgba(23, 25, 35, 0.06); --shadow-lg: 0 12px 24px rgba(23, 25, 35, 0.12), 0 4px 8px rgba(23, 25, 35, 0.08); /* ----- Layout (App Shell) ----- */ --layout-topbar-height: 90px; --layout-sidebar-width: 340px; --layout-content-padding: 32px; } /* Dark mode: Surface and text tokens above are bound to `--mud-palette-*`, which MudThemeProvider updates automatically on theme toggle. No extra selector needed. If you ever need non-Mud elements to react to dark mode, scope overrides to `[data-mud-theme='dark']` explicitly. */ /* Global font family only. Do NOT force background-color / color on html/body — MudBlazor's MudLayout handles page background in both light and dark modes. Overriding it here breaks dark mode (body stays light while cards go dark). */ html, body { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--font-heading); } /* ----- Tables (MudTable / MudDataGrid) ----- Ensure the header band, row separators and striped rows remain visible in both light and dark mode (WCAG AA: UI separators >= 3:1). We bind everything to palette tokens so theme switching just works. */ .mud-table-container .mud-table-head .mud-table-cell, .mud-table-container .mud-table-head th { background-color: var(--surface-muted) !important; color: var(--text-primary); font-weight: 600; border-bottom: 1px solid var(--mud-palette-table-lines); } .mud-table.mud-table-bordered, .mud-table.mud-table-outlined { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; } .mud-table .mud-table-row .mud-table-cell { border-bottom: 1px solid var(--mud-palette-table-lines); } /* Striped rows: the default Mud opacity (~4%) is invisible on dark surfaces. Use a stronger surface-muted tint that follows the active theme. */ .mud-table.mud-table-striped tbody tr:nth-of-type(odd) > .mud-table-cell { background-color: color-mix(in srgb, var(--surface-muted) 60%, transparent); } /* Hover row tint scales with theme. */ .mud-table.mud-table-hover tbody tr:hover > .mud-table-cell { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); }