@carto/ps-react-ui 6.4.0 → 6.5.1

package/src/theme/tailwind-compile.test.ts

@@ -0,0 +1,71 @@
+import { readFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { compile } from 'tailwindcss'
+import { beforeAll, describe, expect, it } from 'vitest'
+
+const require = createRequire(import.meta.url)
+const tailwindDir = path.dirname(require.resolve('tailwindcss/package.json'))
+const themeDir = path.dirname(fileURLToPath(import.meta.url))
+
+// Same order the docs tell consumers to use.
+const ENTRY = `@layer theme, base, mui, components, utilities;
+@import 'tailwindcss';
+@import './tailwind.css';`
+
+let build: (candidates: string[]) => string
+
+beforeAll(async () => {
+  const compiler = await compile(ENTRY, {
+    base: themeDir,
+    loadStylesheet: async (id, base) => {
+      const file =
+        id === 'tailwindcss'
+          ? path.join(tailwindDir, 'index.css')
+          : path.resolve(base, id)
+      return {
+        path: file,
+        base: path.dirname(file),
+        content: await readFile(file, 'utf8'),
+      }
+    },
+  })
+  build = (candidates) => compiler.build(candidates)
+})
+
+describe('tailwind.css under Tailwind v4', () => {
+  it('compiles colour, shadow and radius utilities to MUI variables', () => {
+    const out = build([
+      'bg-primary',
+      'text-brand-navy-blue',
+      'shadow-2',
+      'rounded-theme',
+    ])
+    expect(out).toContain('background-color: var(--mui-palette-primary-main)')
+    expect(out).toContain('color: var(--mui-palette-brand-navyBlue)')
+    expect(out).toContain('--tw-shadow: var(--mui-shadows-2)')
+    expect(out).toContain('border-radius: var(--mui-shape-borderRadius)')
+  })
+
+  it('uses CARTO breakpoints over Tailwind defaults and drops 2xl', () => {
+    const out = build(['sm:bg-primary', 'md:bg-primary', '2xl:bg-primary'])
+    expect(out).toContain('@media (width >= 600px)')
+    expect(out).toContain('@media (width >= 960px)')
+    expect(out).not.toContain('40rem')
+    expect(out).not.toContain('2xl\\:bg-primary')
+  })
+
+  it('compiles responsive typography utilities', () => {
+    const out = build(['typography-h1'])
+    expect(out).toContain('font-size: 3.5rem')
+    expect(out).toContain('font-size: 6rem')
+    expect(out).toContain('letter-spacing: -1.5px')
+  })
+
+  it('derives the spacing unit from the theme', () => {
+    const out = build(['p-4'])
+    expect(out).toContain('padding: calc(var(--spacing) * 4)')
+    expect(out).toContain('--spacing: calc(var(--mui-spacing) / 2)')
+  })
+})

package/src/theme/tailwind.css

@@ -0,0 +1,373 @@
+/*
+ * Generated by generateTailwindCss() from @carto/ps-react-ui/theme.
+ * Do not edit by hand: regenerate it whenever the theme changes.
+ *
+ * Import after `tailwindcss`. Declare the cascade layer order yourself first:
+ * theme, base, mui, components, utilities (in that order).
+ */
+
+@theme inline {
+  --color-primary: var(--mui-palette-primary-main);
+  --color-primary-light: var(--mui-palette-primary-light);
+  --color-primary-dark: var(--mui-palette-primary-dark);
+  --color-primary-contrast: var(--mui-palette-primary-contrastText);
+  --color-primary-related-light: var(--mui-palette-primary-relatedLight);
+  --color-primary-related-dark: var(--mui-palette-primary-relatedDark);
+  --color-primary-background: var(--mui-palette-primary-background);
+  --color-secondary: var(--mui-palette-secondary-main);
+  --color-secondary-light: var(--mui-palette-secondary-light);
+  --color-secondary-dark: var(--mui-palette-secondary-dark);
+  --color-secondary-contrast: var(--mui-palette-secondary-contrastText);
+  --color-secondary-related-light: var(--mui-palette-secondary-relatedLight);
+  --color-secondary-related-dark: var(--mui-palette-secondary-relatedDark);
+  --color-secondary-background: var(--mui-palette-secondary-background);
+  --color-tertiary: var(--mui-palette-tertiary-main);
+  --color-tertiary-light: var(--mui-palette-tertiary-light);
+  --color-tertiary-dark: var(--mui-palette-tertiary-dark);
+  --color-tertiary-contrast: var(--mui-palette-tertiary-contrastText);
+  --color-tertiary-related-light: var(--mui-palette-tertiary-relatedLight);
+  --color-tertiary-related-dark: var(--mui-palette-tertiary-relatedDark);
+  --color-tertiary-background: var(--mui-palette-tertiary-background);
+  --color-error: var(--mui-palette-error-main);
+  --color-error-light: var(--mui-palette-error-light);
+  --color-error-dark: var(--mui-palette-error-dark);
+  --color-error-contrast: var(--mui-palette-error-contrastText);
+  --color-error-related-light: var(--mui-palette-error-relatedLight);
+  --color-error-related-dark: var(--mui-palette-error-relatedDark);
+  --color-error-background: var(--mui-palette-error-background);
+  --color-warning: var(--mui-palette-warning-main);
+  --color-warning-light: var(--mui-palette-warning-light);
+  --color-warning-dark: var(--mui-palette-warning-dark);
+  --color-warning-contrast: var(--mui-palette-warning-contrastText);
+  --color-warning-related-light: var(--mui-palette-warning-relatedLight);
+  --color-warning-related-dark: var(--mui-palette-warning-relatedDark);
+  --color-warning-background: var(--mui-palette-warning-background);
+  --color-info: var(--mui-palette-info-main);
+  --color-info-light: var(--mui-palette-info-light);
+  --color-info-dark: var(--mui-palette-info-dark);
+  --color-info-contrast: var(--mui-palette-info-contrastText);
+  --color-info-related-light: var(--mui-palette-info-relatedLight);
+  --color-info-related-dark: var(--mui-palette-info-relatedDark);
+  --color-info-background: var(--mui-palette-info-background);
+  --color-success: var(--mui-palette-success-main);
+  --color-success-light: var(--mui-palette-success-light);
+  --color-success-dark: var(--mui-palette-success-dark);
+  --color-success-contrast: var(--mui-palette-success-contrastText);
+  --color-success-related-light: var(--mui-palette-success-relatedLight);
+  --color-success-related-dark: var(--mui-palette-success-relatedDark);
+  --color-success-background: var(--mui-palette-success-background);
+  --color-neutral: var(--mui-palette-neutral-main);
+  --color-neutral-light: var(--mui-palette-neutral-light);
+  --color-neutral-dark: var(--mui-palette-neutral-dark);
+  --color-neutral-contrast: var(--mui-palette-neutral-contrastText);
+  --color-neutral-related-light: var(--mui-palette-neutral-relatedLight);
+  --color-neutral-related-dark: var(--mui-palette-neutral-relatedDark);
+  --color-neutral-background: var(--mui-palette-neutral-background);
+  --color-default: var(--mui-palette-default-main);
+  --color-default-light: var(--mui-palette-default-light);
+  --color-default-dark: var(--mui-palette-default-dark);
+  --color-default-contrast: var(--mui-palette-default-contrastText);
+  --color-default-related-light: var(--mui-palette-default-relatedLight);
+  --color-default-related-dark: var(--mui-palette-default-relatedDark);
+  --color-default-background: var(--mui-palette-default-background);
+  --color-text-primary: var(--mui-palette-text-primary);
+  --color-text-secondary: var(--mui-palette-text-secondary);
+  --color-text-disabled: var(--mui-palette-text-disabled);
+  --color-background: var(--mui-palette-background-default);
+  --color-paper: var(--mui-palette-background-paper);
+  --color-divider: var(--mui-palette-divider);
+  --color-action-active: var(--mui-palette-action-active);
+  --color-action-hover: var(--mui-palette-action-hover);
+  --color-action-disabled-background: var(--mui-palette-action-disabledBackground);
+  --color-action-disabled: var(--mui-palette-action-disabled);
+  --color-action-selected: var(--mui-palette-action-selected);
+  --color-action-focus: var(--mui-palette-action-focus);
+  --color-common-white: var(--mui-palette-common-white);
+  --color-common-black: var(--mui-palette-common-black);
+  --color-grey-50: var(--mui-palette-grey-50);
+  --color-grey-100: var(--mui-palette-grey-100);
+  --color-grey-200: var(--mui-palette-grey-200);
+  --color-grey-300: var(--mui-palette-grey-300);
+  --color-grey-400: var(--mui-palette-grey-400);
+  --color-grey-500: var(--mui-palette-grey-500);
+  --color-grey-600: var(--mui-palette-grey-600);
+  --color-grey-700: var(--mui-palette-grey-700);
+  --color-grey-800: var(--mui-palette-grey-800);
+  --color-grey-900: var(--mui-palette-grey-900);
+  --color-grey-A100: var(--mui-palette-grey-A100);
+  --color-grey-A200: var(--mui-palette-grey-A200);
+  --color-grey-A400: var(--mui-palette-grey-A400);
+  --color-grey-A700: var(--mui-palette-grey-A700);
+  --color-brand-navy-blue: var(--mui-palette-brand-navyBlue);
+  --color-brand-location-red: var(--mui-palette-brand-locationRed);
+  --color-brand-prediction-blue: var(--mui-palette-brand-predictionBlue);
+  --color-brand-soft-blue: var(--mui-palette-brand-softBlue);
+  --color-brand-app-bar-main: var(--mui-palette-brand-appBarMain);
+  --color-brand-app-bar-contrast-text: var(--mui-palette-brand-appBarContrastText);
+  --color-white-4: var(--mui-palette-white-4);
+  --color-white-8: var(--mui-palette-white-8);
+  --color-white-12: var(--mui-palette-white-12);
+  --color-white-25: var(--mui-palette-white-25);
+  --color-white-40: var(--mui-palette-white-40);
+  --color-white-60: var(--mui-palette-white-60);
+  --color-white-90: var(--mui-palette-white-90);
+  --color-black-4: var(--mui-palette-black-4);
+  --color-black-8: var(--mui-palette-black-8);
+  --color-black-12: var(--mui-palette-black-12);
+  --color-black-25: var(--mui-palette-black-25);
+  --color-black-40: var(--mui-palette-black-40);
+  --color-black-60: var(--mui-palette-black-60);
+  --color-black-90: var(--mui-palette-black-90);
+  --color-qualitative-0: var(--mui-palette-qualitative-bold-0);
+  --color-qualitative-1: var(--mui-palette-qualitative-bold-1);
+  --color-qualitative-2: var(--mui-palette-qualitative-bold-2);
+  --color-qualitative-3: var(--mui-palette-qualitative-bold-3);
+  --color-qualitative-4: var(--mui-palette-qualitative-bold-4);
+  --color-qualitative-5: var(--mui-palette-qualitative-bold-5);
+  --color-qualitative-6: var(--mui-palette-qualitative-bold-6);
+  --color-qualitative-7: var(--mui-palette-qualitative-bold-7);
+  --color-qualitative-8: var(--mui-palette-qualitative-bold-8);
+  --color-qualitative-9: var(--mui-palette-qualitative-bold-9);
+  --color-qualitative-10: var(--mui-palette-qualitative-bold-10);
+  --color-qualitative-11: var(--mui-palette-qualitative-bold-11);
+  --shadow-1: var(--mui-shadows-1);
+  --shadow-2: var(--mui-shadows-2);
+  --shadow-3: var(--mui-shadows-3);
+  --shadow-4: var(--mui-shadows-4);
+  --shadow-5: var(--mui-shadows-5);
+  --shadow-6: var(--mui-shadows-6);
+  --shadow-7: var(--mui-shadows-7);
+  --shadow-8: var(--mui-shadows-8);
+  --shadow-9: var(--mui-shadows-9);
+  --shadow-10: var(--mui-shadows-10);
+  --shadow-11: var(--mui-shadows-11);
+  --shadow-12: var(--mui-shadows-12);
+  --shadow-13: var(--mui-shadows-13);
+  --shadow-14: var(--mui-shadows-14);
+  --shadow-15: var(--mui-shadows-15);
+  --shadow-16: var(--mui-shadows-16);
+  --shadow-17: var(--mui-shadows-17);
+  --shadow-18: var(--mui-shadows-18);
+  --shadow-19: var(--mui-shadows-19);
+  --shadow-20: var(--mui-shadows-20);
+  --shadow-21: var(--mui-shadows-21);
+  --shadow-22: var(--mui-shadows-22);
+  --shadow-23: var(--mui-shadows-23);
+  --shadow-24: var(--mui-shadows-24);
+  --radius-theme: var(--mui-shape-borderRadius);
+  --radius-theme-half: calc(var(--mui-shape-borderRadius) * 0.5);
+  --radius-theme-2: calc(var(--mui-shape-borderRadius) * 2);
+  --radius-theme-3: calc(var(--mui-shape-borderRadius) * 3);
+  --radius-theme-4: calc(var(--mui-shape-borderRadius) * 4);
+  --breakpoint-xs: 320px;
+  --breakpoint-sm: 600px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1280px;
+  --breakpoint-xl: 1600px;
+  --breakpoint-2xl: initial;
+}
+
+@theme {
+  --spacing: calc(var(--mui-spacing) / 2);
+}
+
+@utility typography-h1 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 3.5rem;
+  line-height: 1.167;
+  letter-spacing: -1.5px;
+  @media (min-width:600px) {
+    font-size: 4.7129rem;
+  }
+  @media (min-width:960px) {
+    font-size: 5.3556rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 6rem;
+  }
+}
+
+@utility typography-h2 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 2.375rem;
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+  @media (min-width:600px) {
+    font-size: 2.9167rem;
+  }
+  @media (min-width:960px) {
+    font-size: 3.3333rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 3.75rem;
+  }
+}
+
+@utility typography-h3 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 1.167;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 2.5707rem;
+  }
+  @media (min-width:960px) {
+    font-size: 2.7849rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 3rem;
+  }
+}
+
+@utility typography-h4 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.8rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.8rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 2rem;
+  }
+}
+
+@utility typography-h5 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.167;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.2853rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.4996rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 1.5rem;
+  }
+}
+
+@utility typography-h6 {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 1.0625rem;
+  line-height: 1.333;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.1253rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.1253rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 1.125rem;
+  }
+}
+
+@utility typography-subtitle1 {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-subtitle2 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+}
+
+@utility typography-body1 {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-body2 {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+}
+
+@utility typography-button {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+  text-transform: inherit;
+}
+
+@utility typography-caption {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.6875rem;
+  line-height: 1.454;
+  letter-spacing: 0;
+}
+
+@utility typography-overline {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.625rem;
+  line-height: 1.2;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+@utility typography-caption-medium {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.6875rem;
+  line-height: 1.454;
+  letter-spacing: 0;
+}
+
+@utility typography-overline-delicate {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.625rem;
+  line-height: 1.2;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+@utility typography-code1 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-code2 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.428;
+  letter-spacing: 0;
+}
+
+@utility typography-code3 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0;
+}

package/src/widgets/bar/options.ts

@@ -12,6 +12,7 @@ import {
 import { ZOOM_LAYOUT } from '../actions/zoom-toggle'
 import type { OptionFactory } from '../echart'
 import { mergeOptions, resolveThemeColor } from '../utils'
+import { spacingPx } from '../utils/spacing-px'
 import { createItemColorResolver } from '../utils/item-color'
 import { positionDataZoomForLegend } from '../utils/data-zoom-layout'
 import type {
@@ -50,9 +51,9 @@ export function barOptions({
 
   return {
     grid: {
-      left: parseInt(theme.spacing(1)),
-      top: parseInt(theme.spacing(3)),
-      right: parseInt(theme.spacing(1)),
+      left: spacingPx(theme, 1),
+      top: spacingPx(theme, 3),
+      right: spacingPx(theme, 1),
       // Default: no legend. Merger bumps this when there are >1 series.
       ...buildGridConfig(false, theme),
       containLabel: true,
@@ -61,7 +62,7 @@ export function barOptions({
       trigger: 'axis',
       backgroundColor: theme.palette.grey[900],
       borderWidth: 0,
-      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
+      padding: [spacingPx(theme, 1), spacingPx(theme, 1)],
       textStyle: {
         color: theme.palette.common.white,
         fontSize: 11,
@@ -90,7 +91,7 @@ export function barOptions({
       axisTick: { show: false },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+        padding: [spacingPx(theme, 0.5), 0, 0, 0],
         margin: 0,
         // `interval: 0` makes every category label a candidate so `hideOverlap`
         // can pack the maximum number that physically fit; the category-axis
@@ -120,7 +121,7 @@ export function barOptions({
       },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         show: true,
         showMaxLabel: true,
         showMinLabel: true,

package/src/widgets/histogram/options.ts

@@ -12,6 +12,7 @@ import {
 import { ZOOM_LAYOUT } from '../actions/zoom-toggle'
 import type { OptionFactory } from '../echart'
 import { mergeOptions, resolveThemeColor } from '../utils'
+import { spacingPx } from '../utils/spacing-px'
 import { createItemColorResolver } from '../utils/item-color'
 import { getHistogramBinValue } from './bins'
 import { positionDataZoomForLegend } from '../utils/data-zoom-layout'
@@ -56,9 +57,9 @@ export function histogramOptions({
 
   return {
     grid: {
-      left: parseInt(theme.spacing(1)),
-      top: parseInt(theme.spacing(3)),
-      right: parseInt(theme.spacing(1)),
+      left: spacingPx(theme, 1),
+      top: spacingPx(theme, 3),
+      right: spacingPx(theme, 1),
       // Default: no legend. Merger bumps this when there are >1 series.
       ...buildGridConfig(false, theme),
       containLabel: true,
@@ -67,7 +68,7 @@ export function histogramOptions({
       trigger: 'axis',
       backgroundColor: theme.palette.grey[900],
       borderWidth: 0,
-      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
+      padding: [spacingPx(theme, 1), spacingPx(theme, 1)],
       textStyle: {
         color: theme.palette.common.white,
         fontSize: 11,
@@ -98,7 +99,7 @@ export function histogramOptions({
       axisTick: { show: false },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+        padding: [spacingPx(theme, 0.5), 0, 0, 0],
         margin: 0,
         // `interval: 0` makes every bin label a candidate so `hideOverlap`
         // can pack the maximum number that physically fit. The category-axis
@@ -126,7 +127,7 @@ export function histogramOptions({
       },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         show: true,
         showMaxLabel: true,
         showMinLabel: true,

package/src/widgets/markdown/style.ts

@@ -1,7 +1,47 @@
 import type { SxProps, Theme } from '@mui/material'
+import type { CSSObject } from '@mui/material/styles'
+
+/**
+ * Browser defaults that rendered Markdown relies on, restated with `revert`
+ * so a CSS reset in the app (Tailwind's preflight, for one) cannot strip
+ * them: list bullets and indent, link underline, blockquote margins, inline
+ * images, monospace fonts, `pre` margins, `sub`/`sup` placement. `revert`
+ * rolls back to the browser's own value, so pages without a reset render
+ * exactly as before.
+ *
+ * Wrapped in `:where()` so any element rule a consumer sets on top wins.
+ */
+export const markdownElementDefaults = {
+  '& :where(ul, ol)': {
+    listStyle: 'revert',
+    margin: 'revert',
+    padding: 'revert',
+  },
+  '& :where(a)': { textDecoration: 'revert' },
+  '& :where(blockquote)': { margin: 'revert' },
+  '& :where(code, kbd, samp)': { fontFamily: 'revert' },
+  '& :where(img)': {
+    display: 'revert',
+    verticalAlign: 'revert',
+    maxWidth: 'revert',
+    height: 'revert',
+  },
+  '& :where(pre)': {
+    margin: 'revert',
+    fontFamily: 'revert',
+    fontSize: 'revert',
+  },
+  '& :where(sub, sup)': {
+    fontSize: 'revert',
+    lineHeight: 'revert',
+    position: 'revert',
+    verticalAlign: 'revert',
+  },
+} satisfies CSSObject
 
 export const styles = {
   root: {
+    ...markdownElementDefaults,
     color: 'text.primary',
     '& a': { color: 'primary.main' },
     '& code': {

package/src/widgets/note/widget-note.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
 import { Box, Link, Typography } from '@mui/material'
 import type { Components } from 'react-markdown'
 import { MarkdownContent } from '../markdown/markdown-content'
+import { markdownElementDefaults } from '../markdown/style'
 import { observeResize } from '../echart/shared-resize-observer'
 import { DEFAULT_NOTE_LABELS, type NoteLabels } from './labels'
 import { styles } from './style'
@@ -107,7 +108,9 @@ function NoteBase({ lineClamp = 3, labels, children }: NoteProps) {
 function NoteMarkdown({ content, lineClamp = 3, labels }: NoteMarkdownProps) {
   return (
     <NoteShell lineClamp={lineClamp} labels={labels} dependency={content}>
-      <MarkdownContent content={content} components={NOTE_COMPONENTS} />
+      <Box sx={markdownElementDefaults}>
+        <MarkdownContent content={content} components={NOTE_COMPONENTS} />
+      </Box>
     </NoteShell>
   )
 }

package/src/widgets/pie/options.ts

@@ -12,6 +12,7 @@ import {
 } from '../utils/option-builders'
 import type { OptionFactory, OptionFactoryContext } from '../echart'
 import { mergeOptions, resolveThemeColor } from '../utils'
+import { spacingPx } from '../utils/spacing-px'
 import { createItemColorResolver } from '../utils/item-color'
 import type { WidgetSeries } from '../types'
 import type {
@@ -67,7 +68,7 @@ export function pieOptions({
       trigger: 'item',
       backgroundColor: theme.palette.grey[900],
       borderWidth: 0,
-      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
+      padding: [spacingPx(theme, 1), spacingPx(theme, 1)],
       textStyle: {
         color: theme.palette.common.white,
         fontSize: 11,
@@ -466,7 +467,7 @@ function buildMultiSeriesBarFusion(
     grid: {
       ...baseGrid,
       ...buildGridConfig(true, theme),
-      right: parseInt(theme.spacing(4)),
+      right: spacingPx(theme, 4),
       containLabel: true,
     },
     // Drop pie-specific structural keys that shouldn't render in the
@@ -511,7 +512,7 @@ function buildMultiSeriesBarFusion(
       axisLabel: {
         fontSize: theme.typography.overlineDelicate?.fontSize,
         fontFamily: theme.typography.overlineDelicate?.fontFamily,
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         showMaxLabel: true,
         showMinLabel: true,
         formatter: (value: number) => {
@@ -526,7 +527,7 @@ function buildMultiSeriesBarFusion(
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: {
-        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+        padding: [spacingPx(theme, 0.5), 0, 0, 0],
         ...(labelFormatter && {
           formatter: (value: string | number) => String(labelFormatter(value)),
         }),