04b5e70a53
Mantine's `--mantine-color-error` defaults to `red-6` in light and `red-8` in dark. Both fail the 4.5:1 AA threshold that applies at the 12px size it renders input error text: 4.48:1 on white, and 1.93:1 on our charcoal body. Override to `red-7` (5.72:1) and `red-4` (6.44:1) — the latter matching the one-to-two-step lift App.css already applies to the semantic status/log reds for dark. Surfaced by the JsonObjectInput stories, which are the first in the repo to render an input error state and so the first to put this in front of the Storybook a11y gate. It is app-wide, not specific to that component — every form error in the Inspector was affected. It has to go through `cssVariablesResolver`: MantineProvider injects these variables into a `<style>` block appended after the stylesheet imports, so a `:root` rule in App.css loses to it on source order at equal specificity. That resolver was duplicated in main.tsx and .storybook/preview.tsx and missing from renderWithMantine, so the three could drift on any token they set. Extract one `theme/cssVariables.ts` and use it at all three sites. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0177mPHAdECD18nLLCTwR5rh Signed-off-by: cliffhall <cliff@futurescale.com>
23 lines
715 B
TypeScript
23 lines
715 B
TypeScript
import { StrictMode } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { MantineProvider } from "@mantine/core";
|
|
import { Notifications } from "@mantine/notifications";
|
|
import "@mantine/core/styles.css";
|
|
import "@mantine/notifications/styles.css";
|
|
import "./App.css";
|
|
import { theme } from "./theme/theme";
|
|
import { cssVariablesResolver } from "./theme/cssVariables";
|
|
import App from "./App";
|
|
|
|
createRoot(document.getElementById("root")!).render(
|
|
<StrictMode>
|
|
<MantineProvider
|
|
theme={theme}
|
|
defaultColorScheme="auto"
|
|
cssVariablesResolver={cssVariablesResolver}
|
|
>
|
|
<Notifications position="bottom-right" />
|
|
<App />
|
|
</MantineProvider>
|
|
</StrictMode>,
|
|
);
|