Default theme

The default theme spreads over several categories.

spacing

space between elements and inside elements.

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

used for or usable by:

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

radius

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

used for:

• Paper
• Dialog, Modal, ..
• Button, Tooltip..

we may set the default with defaultRadius:

"defaultRadius": "sm",

breakpoints

a set of alternative thresholds that we may target to activate style conditionally.

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

The sm breakpoint targets tablets and wider devices.

we specify one or more thresholds in the styles-props alternative-values pattern.

font sizes: a set of 5 distinct sizes

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

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

• the fz style prop, on any component.

line heights

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

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"
      }
    }