This is more of a documentation suggestion (i've not tried to edit it directly as guidance may be needed)

Following this doc page I initially had trouble splitting my theme into multiple files
https://theme-ui.com/guides/merging-themes/

If I wanted a file for all my typographic stuff, one for all colors and modes, and perhaps one for all the styles I am faced with including nested objects, or even single whole objects. The guide has examples where the file itself imports a single simple object.

So if my colors file looked like this:

export default {
  colors: {
    text: "#000",
    background: "#fff",
    primary: "#07c",
    modes: {
      dark: {
        text: "#fff",
        background: "#000",
        primary: "#0cf",
      },
    },
  },
}

to import it I would need to spread the imported object like this:

import colors from "./colors"
export default {
  ...colors,
}

This might be something obvious to many people, but it wasn't to me at first. This method does suit the way that many people might organise their stylesheets, into areas of concern, rather than very simple small files.

If people think this is a useful edition into the docs I can fork and add something.