Default theme

The default theme (v7 or v8) spreads over several categories.

spacing

Space between elements and space inside elements. It is used for:

• gap, for Group, Flex, Stack.
• padding props.
• margin props, for example for Divider
• width and height props such as w and h, for example for Space.

xs: 10px
sm: 12px
md: 16px
lg: 20px
xl: 32p

radius

Border radius used for:

• Paper
• Dialog and Modal
• Button and Tooltip

default radius:

"defaultRadius": "sm"

actual values:

xs: 2px
sm: 4px // (d)
md: 8px
lg: 16px
xl: 32px

breakpoints

A set of thresholds, that we target to activate style conditionally. We should keep those thresholds as-is:

  "breakpoints": {
    "xs": "36em", // 576px
    "sm": "48em", // 768px
    "md": "62em",
    "lg": "75em",
    "xl": "88em"
  },

The sm breakpoint targets tablets and wider devices.

We use those thresholds in styles props to provide alternative values.

font sizes

A set of 5 sizes:

"fontSizes": {
    "xs": 12px
    "sm": 14px
    "md": 16px,
    "lg": 18px
    "xl": 20px
  },

Those sizes do not affect headings. We use them in:

• the fz style prop.

line heights

  "lineHeights": {
    xs: 1.4,
    sm: 1.45,
    md: 1.55, // (d)
    lg: 1.6,
    xl: 1.65
  },

defaults to 1.55

--mantine-line-height: 1.55;

headings

family, weight and wrap behavior:

"headings": {
    "fontFamily": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",
    "fontWeight": "700",
    "textWrap": "wrap",
  },

size and line height:

  "sizes": {
      "h1": {
        "fontSize": "calc(2.125rem * var(--mantine-scale))",
        "lineHeight": "1.3"
      },
      "h2": {
        "fontSize": "calc(1.625rem * var(--mantine-scale))",
        "lineHeight": "1.35"
      },
      "h3": {
        "fontSize": "calc(1.375rem * var(--mantine-scale))",
        "lineHeight": "1.4"
      },
      "h4": {
        "fontSize": "calc(1.125rem * var(--mantine-scale))",
        "lineHeight": "1.45"
      },
      "h5": {
        "fontSize": "calc(1rem * var(--mantine-scale))",
        "lineHeight": "1.5"
      },
      "h6": {
        "fontSize": "calc(0.875rem * var(--mantine-scale))",
        "lineHeight": "1.5"
      }
    }