@bedrock-layout/spacing-constants

@bedrock-layout/spacing-constants

Full docs at: bedrock-layout.dev

Spacing constants are the standard by which all spacing and layout decisions are made in the Bedrock Layout Primitives. They are the building blocks of the system and are used to create all other spacing values.

Bedrock Layout's spacing constants are based on the Open-props size scale.

Spacing constants

{
  space:{
    size000: "-.5rem",
    size00: "-.25rem",
    size1: ".25rem",
    size2: ".5rem",
    size3: "1rem",
    size4: "1.25rem",
    size5: "1.5rem",
    size6: "1.75rem",
    size7: "2rem",
    size8: "3rem",
    size9: "4rem",
    size10: "5rem",
    size11: "7.5rem",
    size12: "10rem",
    size13: "15rem",
    size14: "20rem",
    size15: "30rem",
  },
  sizes: {
    sizeContent1: "20ch",
    sizeContent2: "45ch",
    sizeContent3: "60ch",
    sizeHeader1: "20ch",
    sizeHeader2: "25ch",
    sizeHeader3: "35ch",
    sizeXxs: "240px",
    sizeXs: "360px",
    sizeSm: "480px",
    sizeMd: "768px",
    sizeLg: "1024px",
    sizeXl: "1440px",
    sizeXxl: "1920px",
  }
}

Using CSS Custom Properties

The spacing constants (e.g., size3) can be used as string values directly in the gap and padding props. Alternatively, you can use CSS custom properties by wrapping them in var(). The library provides CSS custom properties for each spacing value, with names transformed from camelCase to kebab-case (e.g., size3 → --size-3).

You can use CSS custom properties with the gap prop like this:

  <Stack gap="var(--size-3)">
    {...}
  </Stack>

Or with the padding prop:

  <Stack padding="var(--size-3)">
    {...}
  </Stack>

No spacing in your design system

In a perfect world we would only work on applications that have a well defined spacing system. However, there are many applications that do not have a well defined spacing system. For these applications, you can use any positive integer or valid CSSLength value for the spacing values.