mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-30 09:58:13 +00:00
b63e07305a
Adds the layer feature code has been missing: tokens that name a role — page surface, subtle border, danger — instead of a colour. Every one resolves to a Mantine variable rather than a literal, so they follow the colour scheme for free and cannot drift from the theme. A parallel palette of raw hexes would have recreated exactly the problem this exists to fix. Also closes three accessibility gaps that had no implementation anywhere in the codebase: no :focus-visible rule, no screen-reader-only utility, and no global prefers-reduced-motion handling. The focus work found a real bug, and nearly introduced a worse one. Mantine already rings its own controls, so the first attempt deferred to it with `outline: none` on .mantine-focus-auto. That suppressed Mantine's ring without replacing it, leaving portal buttons with no focus indicator at all — and it only showed up in one app, because which rule won depended on stylesheet order. The rules use identical values, so overlapping them is invisible and safe; opting out is not. The focus test now asserts computed outline width and style, not just pixels, since a screenshot alone would not have caught this. `status-tone.ts` establishes the six-tone vocabulary that the 48 scattered status→colour maps will eventually collapse onto. Nothing consumes it yet. No visual change: the 8 existing baselines pass unmodified. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
23 lines
745 B
TypeScript
23 lines
745 B
TypeScript
import { StrictMode } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import '@mantine/core/styles.css';
|
|
import '@mantine/dates/styles.css';
|
|
import '@mantine/notifications/styles.css';
|
|
// After Mantine's CSS (it defines the variables these tokens resolve to),
|
|
// before the app's own, which may override them. Relative because the
|
|
// @ema-platform aliases are tsconfig paths, which do not carry subpaths.
|
|
import '../../../libs/shared/src/lib/theme/semantic.css';
|
|
import './app/theme/portal.css';
|
|
|
|
import './app/i18n/config';
|
|
import { App } from './app/app';
|
|
|
|
const root = document.getElementById('root');
|
|
if (!root) throw new Error('Root element not found');
|
|
|
|
createRoot(root).render(
|
|
<StrictMode>
|
|
<App />
|
|
</StrictMode>,
|
|
);
|