Theme-ui: Guide request for breaking longer theme files into separate components

[ehowey]

Hello!

Amazing to see the docs expand and all the content you have created for this since it launched! Thank-you for the hard work on this - it makes using theme-ui so much better. As my theme-ui index.js file gets longer and more complicated with variants and styles I have tried a few times to split it into separate files using deepmerge. I keep hitting errors when I do this and just revert back to my big index.js file as this works fine for me with no problems. My hope in breaking it into smaller pieces is to make it easier to shadow in gatsby themes and also just to make it simpler for editing/management going forward...ignore the fact that I haven't setup typography.js yet, I really should be using that instead of a bunch of fontSizes, fontWeights, etc.

My index.js file when broken down looks something like this:

import merge from "deepmerge"
import colors from "./colors"
import fonts from "./fonts"
import fontSizes from "./fontSizes"
import fontWeights from "./fontWeights"
import lineHeights from "./lineHeights"
import spaces from "./spaces"
import sizes from "./sizes"
import breakpoints from "./breakpoints"
import styles from "./styles"
import variants from "./variants"

export default merge(
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  spaces,
  sizes,
  breakpoints,
  styles,
  variants
)

This seems to work with deepmerge but then the following code, which was working fine before with one big index.js starts failing...using the sx={{}} object.

gridTemplateRows: [
          theme => theme.sizes.headerHeight,
          theme => theme.sizes.headerHeightTablet,
          theme => theme.sizes.headerHeightLaptop,
        ],

It no longer seems to be able to reader those values which is odd to me. I am sure there is a reasonably easy way to do this and I imagine other gatsby theme others are thinking similar things as their variants usage starts to expand and grow leading to big index.js files.

[jxnblk]

Unless the individual modules here are exporting a different shape than I imagine, I don't think you need to merge the scales together into a flat object. E.g. I'd tend to use something more like this:

import merge from "deepmerge"
import colors from "./colors"
import fonts from "./fonts"
import fontSizes from "./fontSizes"
import fontWeights from "./fontWeights"
import lineHeights from "./lineHeights"
import spaces from "./spaces"
import sizes from "./sizes"
import breakpoints from "./breakpoints"
import styles from "./styles"
import variants from "./variants"

export default {
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  spaces,
  sizes,
  breakpoints,
  styles,
  variants
}

[ehowey]

Thanks - I was looking at gatsby-theme-blog and they were using deepmerge so I assumed I needed that as well. The work on this is amazing keep it up!

[jxnblk]

Going to keep this open since I think a guide for how to do this would be a helpful addition to the docs

[ehowey]

Just commenting to say that I think this topic, along with some more docs on how to properly merge themes together would be a useful addition. I am toying around with plugging in the tailwind presets but then it is a bit more of a headache than I anticipated. I would write it up for you but I don't think I know enough/have the pattern right to write those docs.

[ehowey]

So the way I ended up doing this changed - took a page from how @johno organized his themes in the doc theme. I like that the end user is kept away from src/gatsby-plugin-theme-ui/index.js and instead modifies src/gatsby-theme-name/theme.js Using presets ended up also being much easier as it cut down on the complexity of the file significantly for someone who might want to just change a few design tokens. Let me know if it would be a help to make a more formal write up...

index.js

export { default } from "../theme"

theme.js

// See https://theme-ui.com/ for more info and also https://www.gatsbyjs.org/docs/theme-ui/
// Try changing some of the colors below to see what happens.
import { tailwind, baseColors } from "@theme-ui/preset-tailwind"

export default {
  ...tailwind,
  breakpoints: ["480px", "768px", "1024px", "1440px"],
  fonts: {
    ...tailwind.fonts,
    siteTitle: "inherit", // Font for main site title
    navLinks: "inherit", // Font for the nav menu links
    alt: "inherit", //An alternate font style if needed.
  },
  colors: {
    ...tailwind.colors,
    primary: baseColors.pink[9],
    secondary: baseColors.pink[6],
    accent: baseColors.gray[2],
    textWhite: baseColors.gray[1],
    header: {
      background: "transparent",
      backgroundOpen: baseColors.pink[9],
      text: baseColors.gray[8],
      textOpen: baseColors.gray[1],
      icons: baseColors.gray[8],
      iconsHover: baseColors.pink[6],
      iconsOpen: "#ffffff",
    },
    footer: {
      background: baseColors.gray[2],
      text: baseColors.gray[1],
      links: baseColors.gray[1],
      icons: baseColors.gray[1],
    },
  },
  sizes: {
    ...tailwind.sizes,
    maxPageWidth: "1440px", // Sets the max width of elements like the header/footer on really large screens
    maxContentWidth: "720px", // Sets the container size on larger screens, e.g. tablets and laptops
    contentWidth: "90vw", // Sets the container width on smaller screens, results in a 5vw margin on the left and right
    headerHeight: "auto", // Provides fallback setting to control header height
    logoWidthSmall: "40px", // Logo width on small screens, up to 768px
    logoWidthMedium: "50px", // Logo width on medium screens, 768px - 1024px
    logoWidthLarge: "60px", // Logo width on large screens, above 1024px
    logoHeightSmall: "40px", // Logo height on small screens, up to 768px
    logoHeightMedium: "50px", // Logo width on medium screens, 768px - 1024px
    logoHeightLarge: "60px", // Logo width on large screens, above 1024px
    iconsFooter: "32px", // Sets the icons size for the footer
    iconsHeader: "20px", // Sets the icons size for the header
  },
  styles: {
    ...tailwind.styles,
    Layout: {
      backgroundColor: "background",
      color: "text",
      fontFamily: "body",
      fontWeight: "body",
      lineHeight: "body",
      fontSize: 2,
    },
    blockquote: {
      bg: "muted",
      p: 3,
      borderLeft: "5px solid",
      borderColor: "primary",
    },
    inlineCode: {
      fontFamily: "monospace",
      backgroundColor: "muted",
      p: 1,
      fontSize: 2,
    },
    pre: {
      fontFamily: "monospace",
      fontSize: 2,
      overflowX: "auto",
      bg: "muted",
      p: 3,
      border: "1px solid",
      borderColor: "grey",
      borderRadius: "0.25rem",
      code: {
        color: "inherit",
        p: 0,
      },
    },
  },
}

[cobraz]

Hi! 👋

I am doing some of the same in @tabetalt/kit and if you guys agree with that approach, I can take a stab at making some documentation describing that. Current pull request for this change: tabetalt/kit#24

[cobraz]

Should I add a PR for it?