@micha.bigler/ui-core-micha 2.29.2 → 2.30.0

package/dist/theme/themeCompleteness.js

@@ -0,0 +1,320 @@
+import { createTheme, getContrastRatio as getMuiContrastRatio } from '@mui/material/styles';
+import { STATUS_KEYS, TYPOGRAPHY_VARIANTS } from './tokens';
+const MUI_DEFAULT_THEME = createTheme();
+function getPath(value, path) {
+    return path.split('.').reduce((current, key) => current === null || current === void 0 ? void 0 : current[key], value);
+}
+function sameValue(left, right) {
+    if (left === right)
+        return true;
+    if (left === undefined || right === undefined)
+        return false;
+    return JSON.stringify(left) === JSON.stringify(right);
+}
+const pathSurface = (surface, path = surface) => ({
+    surface,
+    get: (theme) => getPath(theme, path),
+});
+const keyedSurface = (surface, get) => ({ surface, get });
+const STATUS_SURFACES = STATUS_KEYS.flatMap((status) => ['text', 'fill', 'fillText', 'bg'].map((token) => pathSurface(`palette.${status}.${token}`)));
+const TYPOGRAPHY_SURFACES = TYPOGRAPHY_VARIANTS.flatMap((variant) => ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing'].map((token) => pathSurface(`typography.${variant}.${token}`)));
+const componentPath = (component, path) => pathSurface(`components.${component}.${path}`);
+const componentKeyLeaf = (component, path, key, leaf) => keyedSurface(`components.${component}.${path}.${key}.${leaf}`, (theme) => { var _a, _b; return (_b = (_a = getPath(theme, `components.${component}.${path}`)) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b[leaf]; });
+const COMPONENT_SURFACES = [
+    keyedSurface('components.MuiCssBaseline.reduced-motion.transitionDuration', (theme) => {
+        var _a, _b, _c, _d, _e;
+        return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c['@media (prefers-reduced-motion: reduce)']) === null || _d === void 0 ? void 0 : _d['*, *::before, *::after']) === null || _e === void 0 ? void 0 : _e.transitionDuration;
+    }),
+    componentPath('MuiButton', 'defaultProps.disableElevation'),
+    componentPath('MuiButton', 'styleOverrides.root.minHeight'),
+    componentPath('MuiButton', 'styleOverrides.root.borderRadius'),
+    componentPath('MuiButton', 'styleOverrides.root.textTransform'),
+    componentKeyLeaf('MuiButton', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
+    componentKeyLeaf('MuiButton', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
+    componentPath('MuiButton', 'styleOverrides.contained.boxShadow'),
+    componentPath('MuiButton', 'styleOverrides.outlined.borderColor'),
+    componentPath('MuiTableCell', 'styleOverrides.root.padding'),
+    componentPath('MuiIconButton', 'styleOverrides.root.minHeight'),
+    componentPath('MuiIconButton', 'styleOverrides.root.minWidth'),
+    componentKeyLeaf('MuiIconButton', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
+    componentKeyLeaf('MuiIconButton', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
+    componentPath('MuiDivider', 'styleOverrides.root.borderColor'),
+    componentPath('MuiTooltip', 'styleOverrides.tooltip.boxShadow'),
+    componentPath('MuiTooltip', 'styleOverrides.tooltip.transitionDuration'),
+    componentPath('MuiTooltip', 'defaultProps.slotProps.transition.timeout.enter'),
+    componentPath('MuiTooltip', 'defaultProps.slotProps.transition.timeout.exit'),
+    componentPath('MuiSelect', 'defaultProps.variant'),
+    componentPath('MuiSelect', 'styleOverrides.select.minHeight'),
+    componentKeyLeaf('MuiSelect', 'styleOverrides.select', '@media (any-pointer: coarse)', 'minHeight'),
+    componentPath('MuiCheckbox', 'styleOverrides.root.color'),
+    componentKeyLeaf('MuiCheckbox', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
+    componentKeyLeaf('MuiCheckbox', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
+    componentPath('MuiFormControlLabel', 'styleOverrides.root.minHeight'),
+    componentKeyLeaf('MuiFormControlLabel', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
+    componentKeyLeaf('MuiFormControlLabel', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
+    componentPath('MuiFormControlLabel', 'styleOverrides.label.fontSize'),
+    componentPath('MuiContainer', 'styleOverrides.root.paddingLeft'),
+    componentPath('MuiContainer', 'styleOverrides.root.paddingRight'),
+    componentKeyLeaf('MuiContainer', 'styleOverrides.root', '@media (min-width:1200px)', 'paddingLeft'),
+    componentKeyLeaf('MuiContainer', 'styleOverrides.root', '@media (min-width:1200px)', 'paddingRight'),
+    componentPath('MuiPaper', 'defaultProps.elevation'),
+    componentPath('MuiPaper', 'defaultProps.variant'),
+    componentPath('MuiPaper', 'styleOverrides.root.borderRadius'),
+    componentPath('MuiPaper', 'styleOverrides.root.boxShadow'),
+    componentPath('MuiCard', 'defaultProps.elevation'),
+    componentPath('MuiCard', 'defaultProps.variant'),
+    componentPath('MuiCard', 'styleOverrides.root.borderRadius'),
+    componentPath('MuiCard', 'styleOverrides.root.boxShadow'),
+    componentPath('MuiChip', 'styleOverrides.root.height'),
+    componentPath('MuiChip', 'styleOverrides.root.borderRadius'),
+    componentPath('MuiChip', 'styleOverrides.root.fontSize'),
+    keyedSurface('components.MuiChip.styleOverrides.root.coarse-hit-area.inset', (theme) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (_f = (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiChip) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d['@media (any-pointer: coarse)']) === null || _e === void 0 ? void 0 : _e['&::after']) === null || _f === void 0 ? void 0 : _f.inset;
+    }),
+    componentPath('MuiTextField', 'defaultProps.variant'),
+    componentPath('MuiTextField', 'styleOverrides.root.minHeight'),
+    componentKeyLeaf('MuiTextField', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
+    componentKeyLeaf('MuiTextField', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
+    componentPath('MuiOutlinedInput', 'styleOverrides.root.minHeight'),
+    componentPath('MuiOutlinedInput', 'styleOverrides.root.borderRadius'),
+    keyedSurface('components.MuiOutlinedInput.variants.non-multiline-height', (theme) => {
+        var _a, _b, _c, _d, _e;
+        return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiOutlinedInput) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.find(({ props }) => (props === null || props === void 0 ? void 0 : props.multiline) === false)) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.height;
+    }),
+    componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
+    componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
+    componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '& .MuiOutlinedInput-notchedOutline', 'borderColor'),
+    componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '&:hover .MuiOutlinedInput-notchedOutline', 'borderColor'),
+    componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '&.Mui-focused .MuiOutlinedInput-notchedOutline', 'borderColor'),
+    componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '&.Mui-error .MuiOutlinedInput-notchedOutline', 'borderColor'),
+    componentPath('MuiDialog', 'defaultProps.transitionDuration.enter'),
+    componentPath('MuiDialog', 'defaultProps.transitionDuration.exit'),
+    componentPath('MuiDialog', 'styleOverrides.paper.borderRadius'),
+    componentPath('MuiDialog', 'styleOverrides.paper.boxShadow'),
+    componentPath('MuiDrawer', 'styleOverrides.paper.boxShadow'),
+    componentPath('MuiMenu', 'styleOverrides.paper.boxShadow'),
+    ...['success', 'warning', 'error', 'info'].flatMap((status) => {
+        const slot = `standard${status[0].toUpperCase()}${status.slice(1)}`;
+        return [
+            componentPath('MuiAlert', `styleOverrides.${slot}.color`),
+            componentPath('MuiAlert', `styleOverrides.${slot}.backgroundColor`),
+            componentKeyLeaf('MuiAlert', `styleOverrides.${slot}`, '& .MuiAlert-icon', 'color'),
+        ];
+    }),
+    ...['MuiOutlinedInput', 'MuiFilledInput', 'MuiInput'].flatMap((component) => [
+        componentKeyLeaf(component, 'styleOverrides.input', '&:-webkit-autofill', 'WebkitBoxShadow'),
+        componentKeyLeaf(component, 'styleOverrides.input', '&:-webkit-autofill', 'WebkitTextFillColor'),
+        componentKeyLeaf(component, 'styleOverrides.input', '&:autofill', 'boxShadow'),
+        componentKeyLeaf(component, 'styleOverrides.input', '&:autofill', 'WebkitTextFillColor'),
+    ]),
+];
+/** The versioned surface inventory used by every adopting application. */
+export const THEME_COMPLETENESS_SURFACES = [
+    pathSurface('palette.primary.main'),
+    ...STATUS_SURFACES,
+    pathSurface('palette.ink.primary'),
+    pathSurface('palette.ink.secondary'),
+    pathSurface('palette.ink.muted'),
+    pathSurface('palette.background.default'),
+    pathSurface('palette.background.paper'),
+    pathSurface('palette.divider'),
+    pathSurface('palette.controlBorder.main'),
+    pathSurface('palette.controlBorder.hover'),
+    pathSurface('palette.controlBorder.focus'),
+    pathSurface('palette.controlBorder.error'),
+    pathSurface('palette.dataSeries.categorical'),
+    pathSurface('radius.control'),
+    pathSurface('radius.card'),
+    pathSurface('typography.fontFamily'),
+    ...TYPOGRAPHY_SURFACES,
+    pathSurface('shape.borderRadius'),
+    {
+        surface: 'spacing.unit',
+        get: (theme) => (typeof theme.spacing === 'function' ? theme.spacing(1) : undefined),
+    },
+    pathSurface('breakpoints.values'),
+    pathSurface('shadow.rest'),
+    pathSurface('shadow.overlay'),
+    pathSurface('motion.duration.fast'),
+    pathSurface('motion.duration.base'),
+    pathSurface('motion.duration.overlayEnter'),
+    pathSurface('motion.duration.overlayExit'),
+    pathSurface('motion.duration.chart'),
+    pathSurface('motion.easing.enter'),
+    pathSurface('motion.easing.exit'),
+    pathSurface('motion.easing.state'),
+    pathSurface('motion.reduced'),
+    pathSurface('fontLoading.family'),
+    pathSurface('fontLoading.weights'),
+    ...COMPONENT_SURFACES,
+];
+function parseColour(colour) {
+    if (typeof colour !== 'string')
+        return null;
+    const value = colour.trim();
+    if (value.startsWith('#')) {
+        const hex = value.slice(1);
+        const expanded = hex.length === 3
+            ? hex.split('').map((part) => part + part).join('')
+            : hex;
+        if (!/^[\da-f]{6}([\da-f]{2})?$/i.test(expanded))
+            return null;
+        return {
+            r: parseInt(expanded.slice(0, 2), 16),
+            g: parseInt(expanded.slice(2, 4), 16),
+            b: parseInt(expanded.slice(4, 6), 16),
+            a: expanded.length === 8 ? parseInt(expanded.slice(6, 8), 16) / 255 : 1,
+        };
+    }
+    const match = value.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i);
+    if (!match)
+        return null;
+    return {
+        r: Number(match[1]),
+        g: Number(match[2]),
+        b: Number(match[3]),
+        a: match[4] === undefined ? 1 : Number(match[4]),
+    };
+}
+function composite(foreground, background) {
+    const alpha = foreground.a + background.a * (1 - foreground.a);
+    if (alpha === 0)
+        return { r: 0, g: 0, b: 0, a: 0 };
+    return {
+        r: (foreground.r * foreground.a + background.r * background.a * (1 - foreground.a)) / alpha,
+        g: (foreground.g * foreground.a + background.g * background.a * (1 - foreground.a)) / alpha,
+        b: (foreground.b * foreground.a + background.b * background.a * (1 - foreground.a)) / alpha,
+        a: alpha,
+    };
+}
+function luminance(colour) {
+    const channels = [colour.r, colour.g, colour.b].map((channel) => {
+        const value = channel / 255;
+        return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+    });
+    return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+}
+/** Calculates WCAG contrast, including alpha compositing over the background. */
+export function calculateContrastRatio(foreground, background) {
+    const foregroundColour = parseColour(foreground);
+    const backgroundColour = parseColour(background);
+    if (!foregroundColour || !backgroundColour) {
+        try {
+            const ratio = getMuiContrastRatio(foreground, background);
+            return Number.isFinite(ratio) ? ratio : Number.NaN;
+        }
+        catch (_a) {
+            return Number.NaN;
+        }
+    }
+    const opaqueBackground = backgroundColour.a < 1
+        ? composite(backgroundColour, { r: 255, g: 255, b: 255, a: 1 })
+        : backgroundColour;
+    const opaqueForeground = foregroundColour.a < 1
+        ? composite(foregroundColour, opaqueBackground)
+        : foregroundColour;
+    const light = Math.max(luminance(opaqueForeground), luminance(opaqueBackground));
+    const dark = Math.min(luminance(opaqueForeground), luminance(opaqueBackground));
+    return (light + 0.05) / (dark + 0.05);
+}
+function contrastFindings(theme) {
+    var _a, _b, _c, _d, _e;
+    const findings = [];
+    for (const status of STATUS_KEYS) {
+        const tokens = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a[status];
+        if (!tokens)
+            continue;
+        const textRatio = calculateContrastRatio(tokens.text, tokens.bg);
+        if (!Number.isFinite(textRatio) || textRatio < 4.5) {
+            findings.push({
+                surface: `contrast.${status}.text-on-bg`,
+                reason: Number.isFinite(textRatio)
+                    ? `Expected at least 4.5:1; received ${textRatio.toFixed(2)}:1.`
+                    : 'Contrast could not be calculated from the declared colours.',
+            });
+        }
+        const fillRatio = calculateContrastRatio(tokens.fillText, tokens.fill);
+        if (!Number.isFinite(fillRatio) || fillRatio < 4.5) {
+            findings.push({
+                surface: `contrast.${status}.fillText-on-fill`,
+                reason: Number.isFinite(fillRatio)
+                    ? `Expected at least 4.5:1; received ${fillRatio.toFixed(2)}:1.`
+                    : 'Contrast could not be calculated from the declared colours.',
+            });
+        }
+    }
+    const backgrounds = {
+        white: '#FFFFFF',
+        page: (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c.default,
+    };
+    for (const state of ['main', 'hover', 'focus', 'error']) {
+        const colour = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.controlBorder) === null || _e === void 0 ? void 0 : _e[state];
+        if (!colour)
+            continue;
+        for (const [surface, background] of Object.entries(backgrounds)) {
+            const ratio = calculateContrastRatio(colour, background);
+            if (!Number.isFinite(ratio) || ratio < 3) {
+                findings.push({
+                    surface: `contrast.controlBorder.${state}-on-${surface}`,
+                    reason: Number.isFinite(ratio)
+                        ? `Expected at least 3:1; received ${ratio.toFixed(2)}:1.`
+                        : 'Contrast could not be calculated from the declared colours.',
+                });
+            }
+        }
+    }
+    return findings;
+}
+/**
+ * Returns completeness findings. Adopting applications make this a hard CI
+ * assertion in their own suite; non-adopters may call it for reporting only.
+ */
+export function assertThemeComplete(theme, { exemptions = [] } = {}) {
+    var _a, _b;
+    const declaredExemptions = [
+        ...(((_a = theme === null || theme === void 0 ? void 0 : theme.themeCompleteness) === null || _a === void 0 ? void 0 : _a.exemptions) || []),
+        ...exemptions,
+    ];
+    const validExemptions = new Set();
+    const findings = [];
+    for (const exemption of declaredExemptions) {
+        if (!(exemption === null || exemption === void 0 ? void 0 : exemption.surface) || !((_b = exemption === null || exemption === void 0 ? void 0 : exemption.reason) === null || _b === void 0 ? void 0 : _b.trim())) {
+            findings.push({
+                surface: `exemption.${(exemption === null || exemption === void 0 ? void 0 : exemption.surface) || 'unknown'}`,
+                reason: 'A completeness exemption must name a surface and include a reason.',
+            });
+            continue;
+        }
+        validExemptions.add(exemption.surface);
+    }
+    for (const descriptor of THEME_COMPLETENESS_SURFACES) {
+        const value = descriptor.get(theme);
+        const defaultValue = descriptor.get(MUI_DEFAULT_THEME);
+        if ((value === undefined || sameValue(value, defaultValue)) && !validExemptions.has(descriptor.surface)) {
+            findings.push({
+                surface: descriptor.surface,
+                reason: value === undefined
+                    ? 'The surface is not deliberately defined.'
+                    : 'The surface still equals MUI\'s untouched default.',
+            });
+        }
+    }
+    findings.push(...contrastFindings(theme));
+    return { findings };
+}
+/** Reports adoption signals as numbers; it never changes completeness. */
+export function reportThemeAdoption(sources = []) {
+    const normalized = sources.map((entry, index) => typeof entry === 'string'
+        ? { path: `source-${index + 1}`, source: entry }
+        : { path: entry.path || `source-${index + 1}`, source: entry.source || '' });
+    const themeBypassPaths = normalized
+        .filter(({ source }) => /\bcreateTheme\s*\(/.test(source) && !/\bcreateAppTheme\s*\(/.test(source))
+        .map(({ path }) => path);
+    const inlineHexCount = normalized.reduce((count, { source }) => { var _a; return count + (((_a = source.match(/#[\da-f]{3,8}\b/gi)) === null || _a === void 0 ? void 0 : _a.length) || 0); }, 0);
+    return {
+        inlineHexCount,
+        themeBypassPathCount: themeBypassPaths.length,
+        themeBypassPaths,
+    };
+}

package/dist/theme/tokens.js

@@ -0,0 +1,325 @@
+import { darken, lighten } from '@mui/material/styles';
+// MUI's palette augmentation (createPalette -> augmentColor) only runs on the
+// FIRST argument passed to createTheme; every later argument -- which is how
+// createAppTheme layers BASELINE_PALETTE on top -- is deep-merged as a raw
+// object with no augmentation. A status entry missing `main`/`contrastText`
+// therefore silently keeps MUI's stock hue for `color="success"` etc. even
+// though `text`/`fill`/`bg` are set correctly, so every status channel MUI
+// recognises (success/warning/error/info) must carry its own explicit
+// main/light/dark/contrastText, computed the same way augmentColor would.
+const withMainShades = (main, contrastText) => ({
+    main,
+    light: lighten(main, 0.2),
+    dark: darken(main, 0.3),
+    contrastText,
+});
+export const SERIES_COLOURS = [
+    '#3D5A99',
+    '#3E80B8',
+    '#2E8F8A',
+    '#7A5FA8',
+    '#9C4F86',
+    '#8A7355',
+];
+export const STATUS_KEYS = ['success', 'warning', 'error', 'info', 'stale'];
+export const TYPOGRAPHY_VARIANTS = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'button',
+    'caption',
+    'overline',
+];
+const typeVariant = (fontSize, fontWeight, lineHeight, extra = {}) => (Object.assign({ fontSize,
+    fontWeight,
+    lineHeight, letterSpacing: 0 }, extra));
+export const BASELINE_PALETTE = {
+    ink: {
+        primary: '#212529',
+        secondary: '#5B6670',
+        muted: '#6A7178',
+    },
+    text: {
+        primary: '#212529',
+        secondary: '#5B6670',
+        disabled: '#6A7178',
+    },
+    background: {
+        default: '#FAFAFA',
+        paper: '#FFFFFF',
+    },
+    divider: 'rgba(33,37,41,.10)',
+    controlBorder: {
+        main: 'rgba(33,37,41,.50)',
+        hover: 'rgba(33,37,41,.65)',
+        error: '#BF3227',
+    },
+    success: Object.assign(Object.assign({}, withMainShades('#1B8038', '#FFFFFF')), { text: '#35794A', fill: '#1B8038', fillText: '#FFFFFF', bg: '#E5F4E9' }),
+    warning: Object.assign(Object.assign({}, withMainShades('#C08A2C', '#212529')), { text: '#976100', fill: '#C08A2C', fillText: '#212529', bg: '#FBF0DC' }),
+    error: Object.assign(Object.assign({}, withMainShades('#BF3227', '#FFFFFF')), { text: '#BF3227', fill: '#BF3227', fillText: '#FFFFFF', bg: '#FBEAE8' }),
+    // The canonical sheet introduces no new info hue. These values reuse
+    // MUI's own info.dark/main family while adding the shared status shape.
+    info: Object.assign(Object.assign({}, withMainShades('#01579B', '#FFFFFF')), { text: '#01579B', fill: '#01579B', fillText: '#FFFFFF', bg: '#E5F6FD' }),
+    stale: {
+        text: '#5B6B7D',
+        fill: '#5B6B7D',
+        fillText: '#FFFFFF',
+        bg: '#EAEDF1',
+    },
+    dataSeries: {
+        categorical: SERIES_COLOURS,
+    },
+};
+export const OVERLAY_SHADOW = '0 8px 24px rgba(20,26,31,.16), 0 2px 8px rgba(20,26,31,.08)';
+export const MOTION = {
+    duration: {
+        fast: 120,
+        base: 180,
+        overlayEnter: 220,
+        overlayExit: 180,
+        chart: 300,
+    },
+    easing: {
+        enter: 'cubic-bezier(0.0, 0, 0.2, 1)',
+        exit: 'cubic-bezier(0.4, 0, 1, 1)',
+        state: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    reduced: '0.01ms',
+};
+const coarseHitArea = {
+    '@media (any-pointer: coarse)': {
+        minHeight: 44,
+        minWidth: 44,
+    },
+};
+const autofill = {
+    '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #FFFFFF inset',
+        WebkitTextFillColor: '#212529',
+        caretColor: '#212529',
+    },
+    '&:autofill': {
+        boxShadow: '0 0 0 100px #FFFFFF inset',
+        WebkitTextFillColor: '#212529',
+        caretColor: '#212529',
+    },
+};
+export const BASELINE_STATIC = {
+    typography: {
+        fontFamily: "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        h1: typeVariant('32px', 600, 1.2),
+        h2: typeVariant('28px', 600, 1.22),
+        h3: typeVariant('24px', 600, 1.25),
+        h4: typeVariant('20px', 600, 1.3),
+        h5: typeVariant('18px', 600, 1.3),
+        h6: typeVariant('16px', 600, 1.35),
+        subtitle1: typeVariant('15px', 600, 1.4),
+        subtitle2: typeVariant('13px', 500, 1.4),
+        body1: typeVariant('14px', 400, 1.55),
+        body2: typeVariant('13px', 400, 1.55),
+        button: typeVariant('14px', 500, 1.4, { textTransform: 'none' }),
+        caption: typeVariant('12px', 400, 1.4),
+        overline: typeVariant('11px', 600, 1.4, {
+            textTransform: 'uppercase',
+            letterSpacing: '0.4px',
+        }),
+    },
+    shape: {
+        borderRadius: 3,
+    },
+    radius: {
+        control: 3,
+        card: 8,
+    },
+    spacing: 8,
+    breakpoints: {
+        values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536 },
+    },
+    density: {
+        controlHeight: 40,
+        touchTarget: 44,
+        tableCellPadding: '10px 16px',
+        chip: { height: 32, radius: 16, fontSize: 13 },
+        containerGutter: { default: 24, wide: 32 },
+    },
+    fontLoading: {
+        family: 'DM Sans',
+        weights: [400, 500, 600],
+        source: '@fontsource/dm-sans',
+    },
+    shadow: {
+        rest: 'none',
+        overlay: OVERLAY_SHADOW,
+    },
+    motion: MOTION,
+    transitions: {
+        duration: {
+            fast: MOTION.duration.fast,
+            base: MOTION.duration.base,
+            overlayEnter: MOTION.duration.overlayEnter,
+            overlayExit: MOTION.duration.overlayExit,
+            chart: MOTION.duration.chart,
+        },
+        easing: {
+            enter: MOTION.easing.enter,
+            exit: MOTION.easing.exit,
+            state: MOTION.easing.state,
+        },
+    },
+    // MUI's 25-entry shadows array is intentionally retained intact. Resting
+    // surfaces are made shadowless via the Paper/Card defaults below, while
+    // named transient surfaces receive shadow.overlay explicitly.
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                '@media (prefers-reduced-motion: reduce)': {
+                    '*, *::before, *::after': {
+                        animationDuration: '0.01ms !important',
+                        animationIterationCount: '1 !important',
+                        transitionDuration: '0.01ms !important',
+                        scrollBehavior: 'auto !important',
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            defaultProps: { disableElevation: true },
+            styleOverrides: {
+                root: Object.assign({ minHeight: 40, borderRadius: 3, textTransform: 'none', transitionDuration: '120ms' }, coarseHitArea),
+                contained: { boxShadow: 'none', '&:hover': { boxShadow: 'none' } },
+            },
+        },
+        MuiTableCell: {
+            styleOverrides: { root: { padding: '10px 16px' } },
+        },
+        MuiIconButton: {
+            styleOverrides: { root: Object.assign({ minHeight: 40, minWidth: 40 }, coarseHitArea) },
+        },
+        MuiDivider: {
+            styleOverrides: { root: { borderColor: 'rgba(33,37,41,.10)' } },
+        },
+        MuiSelect: {
+            defaultProps: { variant: 'outlined' },
+            styleOverrides: {
+                select: {
+                    minHeight: 40,
+                    boxSizing: 'border-box',
+                    '@media (any-pointer: coarse)': { minHeight: 44 },
+                },
+            },
+        },
+        MuiCheckbox: {
+            styleOverrides: { root: Object.assign({ minHeight: 40, minWidth: 40 }, coarseHitArea) },
+        },
+        MuiFormControlLabel: {
+            styleOverrides: {
+                root: Object.assign({ minHeight: 40 }, coarseHitArea),
+                label: { fontSize: '14px', lineHeight: 1.55 },
+            },
+        },
+        MuiContainer: {
+            styleOverrides: {
+                root: {
+                    paddingLeft: 24,
+                    paddingRight: 24,
+                    '@media (min-width:1200px)': { paddingLeft: 32, paddingRight: 32 },
+                },
+            },
+        },
+        MuiPaper: {
+            defaultProps: { elevation: 0, variant: 'outlined' },
+            styleOverrides: {
+                root: { borderRadius: 8, boxShadow: 'none' },
+            },
+        },
+        MuiCard: {
+            defaultProps: { elevation: 0, variant: 'outlined' },
+            styleOverrides: { root: { borderRadius: 8, boxShadow: 'none' } },
+        },
+        MuiChip: {
+            styleOverrides: {
+                root: {
+                    height: 32,
+                    borderRadius: 16,
+                    fontSize: '13px',
+                    position: 'relative',
+                    '@media (any-pointer: coarse)': {
+                        '&::after': {
+                            content: '""',
+                            position: 'absolute',
+                            inset: '-6px',
+                        },
+                    },
+                },
+            },
+        },
+        MuiTextField: {
+            defaultProps: { variant: 'outlined' },
+            styleOverrides: { root: Object.assign({ minHeight: 40 }, coarseHitArea) },
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: Object.assign({ minHeight: 40, borderRadius: 3 }, coarseHitArea),
+                input: autofill,
+            },
+            // `variants` is a sibling of `styleOverrides`, not nested inside it -
+            // MUI matches these by `props` and applies `style` independently of the
+            // styleOverrides merge, so this is the correct placement (a `variants`
+            // array embedded inside styleOverrides.root would just be inert CSS-in-JS).
+            variants: [
+                { props: { multiline: false }, style: { height: 40 } },
+            ],
+        },
+        MuiFilledInput: {
+            styleOverrides: { input: autofill },
+        },
+        MuiInput: {
+            styleOverrides: { input: autofill },
+        },
+        MuiDialog: {
+            defaultProps: { transitionDuration: { enter: 220, exit: 180 } },
+            styleOverrides: { paper: { borderRadius: 8, boxShadow: OVERLAY_SHADOW } },
+        },
+        MuiDrawer: {
+            defaultProps: { transitionDuration: { enter: 220, exit: 180 } },
+            styleOverrides: { paper: { boxShadow: OVERLAY_SHADOW } },
+        },
+        MuiMenu: {
+            defaultProps: { transitionDuration: { enter: 220, exit: 180 } },
+            styleOverrides: { paper: { boxShadow: OVERLAY_SHADOW } },
+        },
+        MuiTooltip: {
+            defaultProps: {
+                slotProps: { transition: { timeout: { enter: 220, exit: 180 } } },
+            },
+            styleOverrides: {
+                tooltip: { boxShadow: OVERLAY_SHADOW, transitionDuration: '220ms' },
+            },
+        },
+    },
+};
+export const BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS = [
+    {
+        surface: 'palette.background.paper',
+        reason: 'The canonical surface is deliberately MUI white.',
+    },
+    {
+        surface: 'spacing.unit',
+        reason: 'The canonical spacing rhythm deliberately retains MUI\'s 8px unit.',
+    },
+    {
+        surface: 'breakpoints.values',
+        reason: 'The canonical breakpoint values deliberately retain MUI\'s defaults.',
+    },
+    ...['subtitle2', 'body1', 'body2', 'button', 'caption'].map((variant) => ({
+        surface: `typography.${variant}.fontWeight`,
+        reason: `The canonical ${variant} weight deliberately equals MUI's numeric default.`,
+    })),
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.29.2",
+  "version": "2.30.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -8,6 +8,9 @@
     "url": "https://github.com/bigler-webapps/ui-core-micha"
   },
   "private": false,
+  "dependencies": {
+    "@fontsource/dm-sans": "^5.2.8"
+  },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",