Summary

• moves typography into the theme layer
• allows configuring multiple fonts per theme in the config file
• allows configuring heading/body styles to use a specific font from the theme

This is a further development of #4044. While that has no breaking changes, it only allows configuring sizing for all themes/typography.

This change will be breaking for people who have started to use typography modes (primary/secondary) since those have been removed. It will also require some changes in the Figma Core UI Kit. However, I feel this is a much better path to take for supporting multiple fonts, and not many people have used typography modes yet due to it being half-baked so far with no config support.

Details

Example designsystemet.config.json

{
  "themes": {
    "my-theme": {
      "typography": {
        "fonts": {
          "primary": {
            "fontFamily": "Inter",
            "fontWeight": {
              "regular": "Regular",
              "medium": "Medium",
              "semibold": "Semi bold"
            }
          },
          "secondary": {
            "fontFamily": "Playfair Display",
            "fontWeight": {
              "regular": "Regular",
              "medium": "Medium",
              "semibold": "SemiBold"
            },
            "size": {
              "small": { "base": 13 },
              "medium": { "base": 15 },
              "large": { "base": 18 }
            }
          }
        },
        "components": {
          "heading": {
            "font": "secondary"
          },
          "body": {
            "font": "primary"
          }
        }
      }
    },
    "second-theme" {
      "typography": {
        "fonts": {
          "playpen": {
            "fontFamily": "Playpen Sans",
            "fontWeight": {
              "regular": "Regular",
              "medium": "Medium",
              "semibold": "SemiBold"
            },
            "size": {
              "small": { "base": 14 },
              "medium": { "base": 16 },
              "large": { "base": 18 }
            }
          },
          "karantina": {
            "fontFamily": "Karantina",
            "fontWeight": {
              "regular": "Light",
              "medium": "Regular",
              "semibold": "Bold"
            }
          }
        },
        "components": {
          "heading": {
            "font": "karantina"
          },
          "body": {
            "font": "playpen"
          }
        }
      }
    }
  }
}

Remaining work

Further work is required before this is ready:

• Adapt CSS generation from feat: modular font-size scale #4044 to work with this new token structure
• Determine what to do about "generate config from tokens". What should it actually try to do when run on the new token structure?
• Add line-height and letter-spacing to configuration
• Figure out if it's possible to not end up with references to "ghost variables" i the Figma file. I tried with no success, and had to fix some variable references manually.
• I think it should be possible to configure typography styles in a more granular way, to e.g. adjust which font or size is used per variant. Something like this would be very simple to implement:

    "second-theme" {
      "typography": {
        "components": {
          "heading": {
            "font": "karantina"
            "2xl": {
              // "10" here refers to token second-theme.fonts.karantina.font-size.10
                "size": "10"
            },
            "2xs": {
                "font": "playpen", // second-theme.fonts.playpen.font-family
                "weight": "semibold" // second-theme.fonts.playpen.font-weight.semibold
            }
          },
          "body": {
            "font": "playpen"
          }
        }
      }
    }
  

Checks

• I have read the contribution guidelines
• I have added a changeset (run pnpm changeset if relevant)