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

package/src/theme/tokens.js

@@ -0,0 +1,376 @@
+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 = {}) => ({
+  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: {
+    ...withMainShades('#1B8038', '#FFFFFF'),
+    text: '#35794A',
+    fill: '#1B8038',
+    fillText: '#FFFFFF',
+    bg: '#E5F4E9',
+  },
+  warning: {
+    ...withMainShades('#C08A2C', '#212529'),
+    text: '#976100',
+    fill: '#C08A2C',
+    fillText: '#212529',
+    bg: '#FBF0DC',
+  },
+  error: {
+    ...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: {
+    ...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: {
+          minHeight: 40,
+          borderRadius: 3,
+          textTransform: 'none',
+          transitionDuration: '120ms',
+          ...coarseHitArea,
+        },
+        contained: { boxShadow: 'none', '&:hover': { boxShadow: 'none' } },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: { root: { padding: '10px 16px' } },
+    },
+    MuiIconButton: {
+      styleOverrides: { root: { 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: { minHeight: 40, minWidth: 40, ...coarseHitArea } },
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: { 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: { minHeight: 40, ...coarseHitArea } },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          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/tests/BarChart.test.jsx

@@ -26,7 +26,10 @@ describe('BarChart preset', () => {
 
     expect(props.xAxis[0].label).toBe('Year');
     expect(props.yAxis[0].label).toBe('Value (kg)');
-    expect(props.slotProps).toEqual({ tooltip: { trigger: 'axis' } });
+    expect(props.slotProps).toEqual({
+      tooltip: { trigger: 'axis' },
+      legend: { position: { vertical: 'bottom', horizontal: 'start' } },
+    });
     expect(props.hideLegend).toBe(true);
     expect(screen.getByTestId('bar-chart-container').getAttribute('style') || '').not.toContain('px');
   });

package/tests/LineChart.test.jsx

@@ -5,7 +5,7 @@ import { cleanup, render } from '@testing-library/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 const chartSpy = vi.hoisted(() => vi.fn(() => <div data-testid="mui-line-chart" />));
-vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: chartSpy }));
+vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: chartSpy, MarkElement: 'path' }));
 
 import { LineChart } from '../src/components/charts/LineChart';
 
@@ -28,6 +28,9 @@ describe('LineChart preset', () => {
     expect(props.xAxis[0].label).toBe('Date');
     expect(props.yAxis[0].label).toBe('Rate (%)');
     expect(props.hideLegend).toBe(false);
-    expect(props.slotProps).toEqual({ tooltip: { trigger: 'axis' } });
+    expect(props.slotProps).toEqual({
+      tooltip: { trigger: 'axis' },
+      legend: { position: { vertical: 'bottom', horizontal: 'start' } },
+    });
   });
 });

package/tests/chartDefaults.test.js

@@ -0,0 +1,177 @@
+// @vitest-environment jsdom
+import React from 'react';
+import i18next from 'i18next';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider } from '@mui/material/styles';
+
+const barSpy = vi.hoisted(() => vi.fn(() => null));
+const lineSpy = vi.hoisted(() => vi.fn(() => null));
+vi.mock('@mui/x-charts/BarChart', () => ({ BarChart: barSpy }));
+vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: lineSpy, MarkElement: 'path' }));
+
+import { BarChart } from '../src/components/charts/BarChart';
+import { LineChart } from '../src/components/charts/LineChart';
+import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
+import { createAppTheme } from '../src/theme/createAppTheme';
+
+const theme = createAppTheme({ palette: { primary: { main: '#3D5A99' } } });
+const i18n = i18next.createInstance();
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      translation: {
+        'TimeSeriesChart.RANGE_LABEL': 'Range',
+        'TimeSeriesChart.RANGE_1_DAY': '1 day',
+        'TimeSeriesChart.RANGE_1_WEEK': '1 week',
+        'TimeSeriesChart.RANGE_1_MONTH': '1 month',
+        'TimeSeriesChart.RANGE_1_YEAR': '1 year',
+        'TimeSeriesChart.SERIES_LABEL': 'Series',
+        'ChartFrame.EMPTY_DEFAULT': 'No data available.',
+        'ChartFrame.LOADING': 'Loading chart.',
+        'ChartFrame.ERROR_DEFAULT': 'The chart could not be loaded.',
+      },
+    },
+  },
+  interpolation: { escapeValue: false },
+});
+
+function withProviders(children) {
+  return React.createElement(
+    ThemeProvider,
+    { theme },
+    React.createElement(I18nextProvider, { i18n }, children),
+  );
+}
+
+function renderBar(props = {}) {
+  return render(withProviders(
+    React.createElement(BarChart, {
+      xAxisLabel: 'Month',
+      yAxisLabel: 'Cases',
+      series: [{ label: 'Cases', data: [1, 2] }],
+      ...props,
+    }),
+  ));
+}
+
+function renderLine(props = {}) {
+  return render(withProviders(
+    React.createElement(LineChart, {
+      xAxisLabel: 'Month',
+      yAxisLabel: 'Cases',
+      series: [{ label: 'Cases', data: [1, 2] }],
+      ...props,
+    }),
+  ));
+}
+
+describe('chart chrome defaults', () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('gives minimal BarChart, LineChart, and TimeSeriesChart calls the baseline ticks and horizontal grid, with line marks off', () => {
+    renderBar();
+    const barProps = barSpy.mock.calls.at(-1)[0];
+    expect(barProps.xAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(barProps.yAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(barProps.grid).toEqual({ horizontal: true });
+
+    renderLine();
+    const lineProps = lineSpy.mock.calls.at(-1)[0];
+    expect(lineProps.xAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(lineProps.yAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(lineProps.grid).toEqual({ horizontal: true });
+    expect(lineProps.series[0].showMark).toBe(false);
+
+    render(withProviders(React.createElement(TimeSeriesChart, {
+      title: 'Activity',
+      xAxisLabel: 'Day',
+      yAxisLabel: 'Cases',
+      data: {
+          xLabels: ['Mon', 'Tue'],
+          series: [{ key: 'cases', label: 'Cases', data: [1, 2] }],
+      },
+      skipAnimation: true,
+    })));
+    const timeSeriesProps = barSpy.mock.calls.at(-1)[0];
+    expect(timeSeriesProps.xAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(timeSeriesProps.yAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(timeSeriesProps.grid).toEqual({ horizontal: true });
+    expect(timeSeriesProps.skipAnimation).toBe(true);
+  });
+
+  it('keeps caller tick font, grid, showMark, and legendPosition values instead of the defaults', () => {
+    const legendPosition = { vertical: 'top', horizontal: 'end' };
+    renderLine({
+      xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { fontSize: 17 } }],
+      grid: { horizontal: false, vertical: true },
+      series: [{ label: 'Cases', data: [1, 2], showMark: true }],
+      legendPosition,
+    });
+
+    const props = lineSpy.mock.calls.at(-1)[0];
+    expect(props.xAxis[0].tickLabelStyle.fontSize).toBe(17);
+    expect(props.grid).toEqual({ horizontal: false, vertical: true });
+    expect(props.series[0].showMark).toBe(true);
+    expect(props.slotProps.legend.position).toEqual(legendPosition);
+  });
+
+  // Found live in the dev harness (not by this mocked test, which cannot
+  // reproduce a real MUI scale computation): a caller-supplied xAxis with
+  // `data` but no `scaleType` lost the wrapper's default scaleType entirely,
+  // leaving MUI's point/band scale undefined and every rendered path NaN.
+  // This asserts the prop-level contract; the harness's "Chart defaults" /
+  // "Caller overrides" LineChart specimens are the real-render proof.
+  it('keeps the default scaleType on a caller-supplied axis that does not set one', () => {
+    renderLine({ xAxis: [{ data: ['Jan', 'Feb'] }] });
+    expect(lineSpy.mock.calls.at(-1)[0].xAxis[0].scaleType).toBe('point');
+
+    renderBar({ xAxis: [{ data: ['Jan', 'Feb'] }] });
+    expect(barSpy.mock.calls.at(-1)[0].xAxis[0].scaleType).toBe('band');
+  });
+
+  it('adds a font-and-angle-derived bottom margin only for rotated tick labels', () => {
+    renderBar({ xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { angle: -45 } }] });
+    const rotatedProps = barSpy.mock.calls.at(-1)[0];
+    expect(rotatedProps.margin.bottom).toBeGreaterThan(20);
+    expect(rotatedProps.xAxis[0].height).toBeGreaterThan(45);
+
+    cleanup();
+    renderBar({ xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { angle: 0 } }] });
+    expect(barSpy.mock.calls.at(-1)[0].margin).toBeUndefined();
+  });
+
+  it('uses the series colour as the fill when a caller opts line markers back in', () => {
+    renderLine({ series: [{ label: 'Cases', data: [1, 2], showMark: true }] });
+    const props = lineSpy.mock.calls.at(-1)[0];
+    const mark = props.slots.mark({
+      color: '#3D5A99',
+      id: 'cases',
+      dataIndex: 0,
+      shape: 'circle',
+      x: 10,
+      y: 10,
+    });
+
+    expect(mark.props.style.fill).toBe('#3D5A99');
+    expect(mark.props.style.fill).not.toBe(theme.palette.background.paper);
+  });
+
+  it('defaults legendPosition to bottom-start and lets a caller choose another MUI position', () => {
+    renderBar({ series: [{ data: [1] }, { data: [2] }] });
+    expect(barSpy.mock.calls.at(-1)[0].slotProps.legend.position).toEqual({
+      vertical: 'bottom',
+      horizontal: 'start',
+    });
+
+    cleanup();
+    const requested = { vertical: 'middle', horizontal: 'end' };
+    renderBar({ series: [{ data: [1] }, { data: [2] }], legendPosition: requested });
+    expect(barSpy.mock.calls.at(-1)[0].slotProps.legend.position).toEqual(requested);
+  });
+});

package/tests/chartLabels.test.js

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  formatShortDate,
+  formatShortMonth,
+  formatShortTime,
+  formatShortYear,
+} from '../src/components/charts/chartLabels';
+import { yearTickInterval } from '../src/components/charts/yearTickInterval';
+
+// 2026-08-05 14:07, a fixed instant so assertions aren't flaky around
+// midnight/year boundaries.
+const FIXED = new Date(2026, 7, 5, 14, 7, 0);
+
+describe('chart label helpers', () => {
+  it('ports fitness-monitor short-label behaviour, including locale fallback and forced 24-hour time', () => {
+    expect(formatShortDate(FIXED, 'de-CH')).toBe('05.08.');
+    expect(formatShortDate(FIXED, 'de-CH').length).toBeLessThan(10);
+    expect(formatShortTime(FIXED, 'de-CH')).toBe('14:07');
+    expect(formatShortTime(FIXED, 'en-US')).toBe('14:07');
+    expect(formatShortMonth(FIXED, 'de-CH')).toMatch(/26$/);
+    expect(formatShortMonth(FIXED, 'de-CH').length).toBeLessThan(10);
+    expect(formatShortYear(FIXED, 'de-CH')).toBe('2026');
+    expect(formatShortYear(FIXED, 'en-US')).toBe('2026');
+    expect(formatShortDate(FIXED, 'en-US')).toBe('08/05');
+    expect(formatShortDate(FIXED)).toBe(formatShortDate(FIXED, 'de-CH'));
+  });
+
+  it('returns one tick per year and proves dense unfiltered dates produce duplicate year labels', () => {
+    const denseDates = [];
+    for (let year = 2022; year <= 2025; year += 1) {
+      for (let month = 0; month < 12; month += 1) {
+        denseDates.push(new Date(year, month, 1));
+      }
+    }
+
+    const unfilteredLabels = denseDates.map((date) => formatShortYear(date, 'de-CH'));
+    expect(new Set(unfilteredLabels).size).toBeLessThan(unfilteredLabels.length);
+
+    const ticks = yearTickInterval(denseDates);
+    expect(ticks).toHaveLength(4);
+    expect(ticks.every((date) => date.getMonth() === 0 && date.getDate() === 1)).toBe(true);
+    expect(ticks.map((date) => formatShortYear(date, 'de-CH'))).toEqual([
+      '2022',
+      '2023',
+      '2024',
+      '2025',
+    ]);
+  });
+});

package/tests/chartsPalette.test.js

@@ -36,4 +36,44 @@ describe('chart palette and formatters', () => {
     expect(formatCompact(12500, 'en-US')).toMatch(/12.5K|13K/);
     expect(createChartFormatters('fr-FR').ratio(1.5)).toContain('1');
   });
+
+  it('uses the theme categorical ramp when one is present', () => {
+    const ramp = ['series-1', 'series-2', 'series-3'];
+    const theme = {
+      palette: {
+        dataSeries: { categorical: ramp },
+        mode: 'light',
+        primary: { main: 'primary-main', light: 'primary-light' },
+        action: { disabled: 'action-disabled' },
+        text: { secondary: 'text-secondary' },
+        divider: 'divider',
+      },
+    };
+
+    expect(getNeutralChartPalette(theme).categorical).toEqual(ramp);
+  });
+
+  it('keeps the existing palette derivation when no ramp is present', () => {
+    const theme = {
+      palette: {
+        mode: 'light',
+        primary: { main: 'primary-main', light: 'primary-light' },
+        secondary: { main: 'secondary-main' },
+        info: { main: 'info-main' },
+        success: { main: 'success-main' },
+        warning: { main: 'warning-main' },
+        action: { disabled: 'action-disabled' },
+        text: { secondary: 'text-secondary' },
+        divider: 'divider',
+      },
+    };
+
+    expect(getNeutralChartPalette(theme).categorical).toEqual([
+      'primary-main',
+      'secondary-main',
+      'info-main',
+      'success-main',
+      'warning-main',
+    ]);
+  });
 });