Theme Font Control

Elements Component Development
1

Can’t quite get my head round the default values of controls that tie into the theme studio.

So do I need my default to be something that exists in the theme studio?
If so, I don’t understand how I can guarantee what I set as a default exists if 3rd party’s can create themes with anything they like in there?

Or… does every theme inherit from a base thats guaranteed to hold these values?

Example from the docs:

{
	"title": "Theme Font",
	"id": "font",
	"themeFont": {
		"default": {
			"base": { "name": "body" },
			"sm": { "name": "heading" },
			"md": { "name": "quote" }
		}
	}
}
2

Okay… so that part of the docs is overdue for an update. We had talked about having a defined set of “defaults” that every theme should adhere to. These are generally what is set up in the standard Tailwind themes. See Font Size, Theme Spacing, Shadows, etc. Font Family is a little different.

The control will attempt to select what you put as a default, but if it’s not available, it should just pick the first value. So nothing will “break”.

We plan to provide a guide on creating custom themes and the required defaults. I’m now thinking we should do this sooner, rather than later :laughing:

As long as you’re using the theme UI controls, your components will work much better and get all the improvements we make :blush:

Sorry for the rambling answer, feel free to follow-up with more questions!

3

Thank’s, makes more sense.

I’d figured maybe all themes planned to inherit from some master, when I seen this generated in theme.json while exploring saving a custom theme -

 ],
  "baseThemeIdentifier" : null,

This bit may be a bug then :man_shrugging:

If I add an arbitrary font as a default, nothing is selected when a new instance of the component is created. I’d noticed this with theme spacing also, so assume it’s across the board.

{
	"title": "Font",
	"id": "font",
	"themeFont": {
		"default": {
			"base": { "name": "test" }
		}
	}
}

Results in -

CleanShot 2025-03-15 at 2 .32.48@2x
CleanShot 2025-03-15 at 2 .32.48@2x666×396 26.5 KB

4

Yup, this looks like an issue, thanks!

I’ve created a ticket for us to fix it for a coming build - stay tuned!