Thanks Ben. It’s very possible I could be misunderstanding the intention of how to work with theme.json files in sage 11.
From the jsdoc comments, it seemed like the idea is I can have a theme.json at the root of my sage theme, and the plugin will merge it with any styles defined in the @theme layer of my app.css. And that I can optionally also specify some ways that labels are mapped to styles in the @theme layer.
What I was trying to do, was use my existing theme.json from sage 10 (which was generated by bud) and have it be merged with theme styles I used to define in tailwind.config.js, but are now in the @theme layer in app.css.
I actually reuse styles in the @theme layer in both app.css and editor.css by importing them from another shared css file. That doesn’t seem to be currently supported (only theme styles directly in app.css are supported) but that’s a seprate issue.
After some extensive testing it seems to me that the Wordpress theme_file_path hook in setup.php is looking for theme.json at build/assets/theme.json, but that file only gets written when you do a vite build.
This could be a completely different direction than you intended, but to at least get myself up and running, I ended up writing a PR that watches for changes to theme.json or any of your css files and runs the same code you were using to create the “merged” file in generateBundle, but now also when running vite dev. It’s kept me going for now, but I have no idea how the approach I took fits with your plans.
You can check that out here: feat: generate theme.json during dev mode using in-memory CSS by eavonius · Pull Request #15 · roots/vite-plugin · GitHub
Below is the contents of my theme.json at the root of my theme.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "1280px",
"wideSize": "1512px"
},
"color": {
"custom": false,
"link": true,
"customDuotone": false,
"customGradient": false,
"defaultDuotone": false,
"defaultGradients": false,
"defaultPalette": false,
"duotone": [],
"palette": [
{
"slug": "primary",
"color": "#29d48d",
"name": "Primary"
},
{
"slug": "primary-border",
"color": "#2CE698",
"name": "Primary border"
},
{
"slug": "primary-hover",
"color": "#2CE698",
"name": "Primary hover"
},
{
"slug": "primary-hover-border",
"color": "#2CFF98",
"name": "Primary hover border"
},
{
"slug": "secondary",
"color": "#B83259",
"name": "Secondary"
},
{
"slug": "secondary-border",
"color": "#ca3f66",
"name": "Secondary border"
},
{
"slug": "secondary-hover",
"color": "#ca3f66",
"name": "Secondary hover"
},
{
"slug": "secondary-hover-border",
"color": "#d35f80",
"name": "Secondary hover border"
},
{
"slug": "tertiary",
"color": "#219FC4",
"name": "Tertiary"
},
{
"slug": "tertiary-border",
"color": "#2eb3dc",
"name": "Tertiary border"
},
{
"slug": "tertiary-hover",
"color": "#2eb3dc",
"name": "Tertiary hover"
},
{
"slug": "tertiary-hover-border",
"color": "#51c0e1",
"name": "Tertiary hover border"
},
{
"slug": "muted",
"color": "#555",
"name": "Muted"
},
{
"slug": "dark",
"color": "#333",
"name": "Dark"
},
{
"slug": "dark-link",
"color": "#29c1ec",
"name": "Link on dark"
},
{
"slug": "disabled",
"color": "#888",
"name": "Disabled"
},
{
"slug": "disabled-text",
"color": "#444",
"name": "Disabled text"
},
{
"slug": "black",
"color": "#111",
"name": "Black"
},
{
"slug": "Grey",
"color": "#ddd",
"name": "grey"
},
{
"slug": "white",
"color": "#fff",
"name": "White"
},
{
"slug": "off-white",
"color": "#eee",
"name": "Off white"
},
{
"slug": "gold",
"color": "#d6aa14",
"name": "Gold"
},
{
"slug": "primary-dark",
"color": "#1f8e6b",
"name": "Primary Dark"
}
]
},
"custom": {
"spacing": {},
"typography": {
"font-size": {},
"line-height": {}
}
},
"spacing": {
"blockGap": true,
"margin": true,
"padding": true,
"units": ["px", "%", "em", "rem", "vw", "vh"]
},
"typography": {
"dropCap": true,
"lineHeight": true,
"customFontSize": false,
"fontSizes": [
{
"slug": "tiny",
"size": "clamp(0.56rem, calc(0.38rem + 0.39vw), 0.69rem)",
"name": "Tiny"
},
{
"slug": "small",
"size": "clamp(0.8rem, calc(0.56rem + 0.39vw), 0.88rem)",
"name": "Small"
},
{
"slug": "normal",
"size": "clamp(1.05rem, calc(0.50rem + 0.78vw), 1.18rem)",
"name": "Normal"
},
{
"slug": "large",
"size": "clamp(1.1rem, calc(0.63rem + 0.78vw), 1.25rem)",
"name": "Large"
},
{
"slug": "x-large",
"size": "clamp(1.1rem, calc(0.75rem + 0.78vw), 1.38rem)",
"name": "Extra Large"
},
{
"slug": "xx-large",
"size": "clamp(1.3rem, calc(1.03rem + 0.98vw), 1.81rem)",
"name": "Extra Extra Large"
},
{
"slug": "heading-one",
"size": "clamp(2em, calc(1.59rem + 1.76vw), 3.00rem)",
"name": "Heading One"
},
{
"slug": "heading-two",
"size": "clamp(1.85rem, calc(1.53rem + 1.37vw), 2.63rem)",
"name": "Heading Two"
},
{
"slug": "heading-three",
"size": "clamp(1.6rem, calc(1.25rem + 1.17vw), 2.19rem)",
"name": "Heading Three"
},
{
"slug": "heading-four",
"size": "clamp(1.3rem, calc(1.03rem + 0.98vw), 1.81rem)",
"name": "Heading Four"
},
{
"slug": "heading-five",
"size": "clamp(1.1rem, calc(0.75rem + 0.78vw), 1.38rem)",
"name": "Heading Five"
},
{
"slug": "heading-six",
"size": "clamp(1.1rem, calc(0.63rem + 0.78vw), 1.25rem)",
"name": "Heading Six"
},
{
"slug": "subtitle",
"size": "clamp(1.1rem, calc(0.75rem + 0.78vw), 1.38rem)",
"name": "Subtitle"
}
],
"fontFamilies": [
{
"fontFamily": "\"Inter\", sans-serif",
"slug": "open-sans",
"name": "Open Sans"
},
{
"fontFamily": "\"Jost\", sans-serif",
"slug": "jost",
"name": "Jost"
}
]
}
},
"styles": {}
}
