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

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.1",
+  "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",

package/src/components/charts/palette.js

@@ -7,11 +7,14 @@ import { useTheme } from '@mui/material/styles';
 export function getNeutralChartPalette(theme) {
   const palette = theme.palette;
   const isDark = palette.mode === 'dark';
+  const dataSeries = palette.dataSeries?.categorical;
 
   return {
-    categorical: isDark
-      ? [palette.primary.light, palette.secondary.light, palette.info.light, palette.success.light, palette.warning.light]
-      : [palette.primary.main, palette.secondary.main, palette.info.main, palette.success.main, palette.warning.main],
+    categorical: Array.isArray(dataSeries) && dataSeries.length > 0
+      ? [...dataSeries]
+      : isDark
+        ? [palette.primary.light, palette.secondary.light, palette.info.light, palette.success.light, palette.warning.light]
+        : [palette.primary.main, palette.secondary.main, palette.info.main, palette.success.main, palette.warning.main],
     sequential: isDark
       ? [palette.action.disabled, palette.text.secondary, palette.primary.light, palette.primary.main, palette.primary.dark]
       : [palette.action.disabled, palette.divider, palette.text.secondary, palette.primary.light, palette.primary.main],

package/src/i18n/authTranslations.ts

@@ -100,10 +100,10 @@ export const authTranslations = {
   },
 
   "Auth.INVITE_SENT": {
-    "de": "Die Einladung wurde versendet.",
-    "fr": "L'invitation a été envoyée.",
-    "en": "The invitation has been sent.",
-    "sw": "Mwaliko umetumwa."
+    "de": "Die Einladung wurde an {{email}} gesendet.",
+    "fr": "L'invitation a été envoyée à {{email}}.",
+    "en": "The invitation has been sent to {{email}}.",
+    "sw": "Mwaliko umetumwa kwa {{email}}."
   },
 
   "Auth.RESET_REQUEST_ACCEPTED": {

package/src/index.js

@@ -1,5 +1,14 @@
 // index.js (Entry Point deiner Library)
 
+// --- 0. Theme ---
+export {
+  createAppTheme,
+  assertThemeComplete,
+  calculateContrastRatio,
+  reportThemeAdoption,
+  THEME_COMPLETENESS_SURFACES,
+} from './theme';
+
 // --- 1. Auth Context (Essentiell für den Wrapper) ---
 export { AuthContext, AuthProvider } from './auth/AuthContext';
 export { UserMenu } from './auth/UserMenu';

package/src/pages/SignUpPage.jsx

@@ -123,14 +123,18 @@ export function SignUpPage() {
 
     setSubmitting(true);
     try {
-      await submitRegistrationRequest({
+      const res = await submitRegistrationRequest({
         email,
         mode,
         accessCode,
         registrationContextToken: mode === 'self_signup_qr' ? tokenFromUrl : null,
         turnstileToken: turnstileRequired ? turnstileToken : undefined,
       });
-      setSuccessKey('Auth.INVITE_REQUEST_SUCCESS');
+      // The backend's own response code is already mode-agnostic and accurate
+      // (Auth.INVITE_SENT). Falling back to the access-code-specific "if valid,
+      // an invite was sent" wording here was wrong for open/email-domain/QR
+      // signup, which have no code whose validity needs hiding.
+      setSuccessKey(res?.code || 'Auth.INVITE_SENT');
     } catch (err) {
       setErrorKey(err.code || 'Auth.INVITE_FAILED');
       if (turnstileRequired) {

package/src/theme/createAppTheme.js

@@ -0,0 +1,212 @@
+import '@fontsource/dm-sans/400.css';
+import '@fontsource/dm-sans/500.css';
+import '@fontsource/dm-sans/600.css';
+
+import { createTheme, darken, getContrastRatio } from '@mui/material/styles';
+
+import {
+  BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS,
+  BASELINE_PALETTE,
+  BASELINE_STATIC,
+  MOTION,
+} from './tokens';
+
+function findFunction(value, path) {
+  if (typeof value === 'function') return path;
+  if (!value || typeof value !== 'object') return null;
+
+  for (const [key, child] of Object.entries(value)) {
+    const found = findFunction(child, `${path}.${key}`);
+    if (found) return found;
+  }
+  return null;
+}
+
+function validateStyleOverrides(components = {}) {
+  for (const [componentName, component] of Object.entries(components)) {
+    if (!component?.styleOverrides) continue;
+    const slot = findFunction(
+      component.styleOverrides,
+      `components.${componentName}.styleOverrides`,
+    );
+    if (slot) {
+      throw new TypeError(
+        `createAppTheme: ${slot} must be an object, not a function. ` +
+          'Use object styleOverrides and MUI variants for prop- or state-dependent styles.',
+      );
+    }
+  }
+}
+
+function clearsContrast(colour, surfaces) {
+  return surfaces.every((surface) => getContrastRatio(colour, surface) >= 3);
+}
+
+// Darkened until it clears 3:1 against BOTH '#FFFFFF' and background.default
+// -- the exact two surfaces assertThemeComplete's contrastFindings checks --
+// so deriving against background.paper alone (which need not be white for an
+// app that overrides it) could pass here and still fail there.
+function deriveFocusColour(primary, surfaces) {
+  let focus = primary;
+  for (let coefficient = 0.05; !clearsContrast(focus, surfaces); coefficient += 0.05) {
+    focus = darken(primary, Math.min(coefficient, 0.9));
+    if (coefficient >= 0.9) break;
+  }
+  return focus;
+}
+
+function createPaletteAwareComponents(palette) {
+  const stateTransition = `border-color ${MOTION.duration.fast}ms ${MOTION.easing.state}, color ${MOTION.duration.fast}ms ${MOTION.easing.state}, background-color ${MOTION.duration.fast}ms ${MOTION.easing.state}`;
+  const autofill = {
+    '&:-webkit-autofill': {
+      WebkitBoxShadow: `0 0 0 100px ${palette.background.paper} inset`,
+      WebkitTextFillColor: palette.ink.primary,
+      caretColor: palette.ink.primary,
+    },
+    '&:autofill': {
+      boxShadow: `0 0 0 100px ${palette.background.paper} inset`,
+      WebkitTextFillColor: palette.ink.primary,
+      caretColor: palette.ink.primary,
+    },
+  };
+  const alertStyles = Object.fromEntries(
+    ['success', 'warning', 'error', 'info'].map((status) => [
+      `standard${status[0].toUpperCase()}${status.slice(1)}`,
+      {
+        color: palette[status].text,
+        backgroundColor: palette[status].bg,
+        '& .MuiAlert-icon': { color: palette[status].text },
+      },
+    ]),
+  );
+
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: { transition: stateTransition },
+        outlined: {
+          borderColor: palette.controlBorder.main,
+          '&:hover': { borderColor: palette.controlBorder.hover },
+        },
+      },
+    },
+    MuiDivider: {
+      styleOverrides: { root: { borderColor: palette.divider } },
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          color: palette.controlBorder.main,
+          transition: stateTransition,
+          '&:hover': { color: palette.controlBorder.hover },
+          '&.Mui-checked': { color: palette.primary.main },
+          '&.MuiCheckbox-indeterminate': { color: palette.primary.main },
+          '&.Mui-error': { color: palette.controlBorder.error },
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: { root: { borderColor: palette.divider } },
+    },
+    MuiCard: {
+      styleOverrides: { root: { borderColor: palette.divider } },
+    },
+    MuiChip: {
+      styleOverrides: {
+        outlined: { borderColor: palette.controlBorder.main },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          transition: stateTransition,
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: palette.controlBorder.main,
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: palette.controlBorder.hover,
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: palette.controlBorder.focus,
+            borderWidth: 2,
+          },
+          '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+            borderColor: palette.controlBorder.error,
+          },
+        },
+        input: autofill,
+      },
+    },
+    MuiFilledInput: {
+      styleOverrides: { input: autofill },
+    },
+    MuiInput: {
+      styleOverrides: { input: autofill },
+    },
+    MuiAlert: {
+      styleOverrides: alertStyles,
+    },
+  };
+}
+
+/**
+ * Builds the shared application theme while leaving app identity in primary
+ * and fontFamily. Palette resolution happens before palette-aware component
+ * objects are created, so runtime app/site overrides cannot leave stale values.
+ */
+export function createAppTheme(appConfig = {}) {
+  if (!appConfig?.palette?.primary) {
+    throw new TypeError('createAppTheme: appConfig.palette.primary is required.');
+  }
+  validateStyleOverrides(appConfig.components);
+
+  const paletteTheme = createTheme(
+    { palette: appConfig.palette },
+    { palette: BASELINE_PALETTE },
+    { palette: appConfig.palette },
+  );
+  const finalPalette = paletteTheme.palette;
+  const computedPalette = {
+    controlBorder: {
+      ...finalPalette.controlBorder,
+      focus: deriveFocusColour(finalPalette.primary.main, [
+        '#FFFFFF',
+        finalPalette.background.default,
+      ]),
+    },
+  };
+  const resolvedPalette = { ...finalPalette, ...computedPalette };
+  const fontFamily = appConfig.typography?.fontFamily || BASELINE_STATIC.typography.fontFamily;
+
+  return createTheme(
+    {
+      ...BASELINE_STATIC,
+      typography: {
+        ...BASELINE_STATIC.typography,
+        fontFamily,
+      },
+      fontLoading: {
+        ...BASELINE_STATIC.fontLoading,
+        weights: [...BASELINE_STATIC.fontLoading.weights],
+      },
+      palette: resolvedPalette,
+      themeCompleteness: {
+        baseline: true,
+        exemptions: BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS.map((exemption) => ({
+          ...exemption,
+        })),
+      },
+    },
+    {
+      components: createPaletteAwareComponents(resolvedPalette),
+    },
+    appConfig,
+    {
+      palette: {
+        dataSeries: {
+          categorical: [...resolvedPalette.dataSeries.categorical],
+        },
+      },
+    },
+  );
+}

package/src/theme/index.js

@@ -0,0 +1,7 @@
+export { createAppTheme } from './createAppTheme';
+export {
+  assertThemeComplete,
+  calculateContrastRatio,
+  reportThemeAdoption,
+  THEME_COMPLETENESS_SURFACES,
+} from './themeCompleteness';