feat: generate the editor's palette, type scale and radii from @theme - #2
Merged
Merged
Conversation
theme.json held the palette by hand, and @theme read it back through the presets; the two had to be kept in step, and a colour changed in app.css never reached the editor. apiary takes the other road: app.css is the source, and the build writes theme.json. Both themes now work the same way. - @theme is `static` and holds the colours, the type scale (xs to 7xl) and the radii with concrete values; wordpressThemeJson copies them into theme.json, whose base keeps no palette and no font sizes. - A :root rule points the colour utilities at the WordPress presets, so a palette edited in the Site Editor still reaches the theme. - Inter stays in theme.json: its @font-face can only be declared there, so the fonts are left out of the generation (disableTailwindFonts). The font size slugs follow Tailwind now (sm, base, 4xl…) instead of small, medium, large and x-large.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
theme.jsonheld the palette by hand and@themeread it back through the presets: two places to keep in step, and a colour changed inapp.cssnever reached the editor. apiary takes the other road (Pollora/theme-apiary#11):app.cssis the source and the build writestheme.json. Both themes now work the same way.Changes
@theme staticholds the 10 colours, the type scale (xs–7xl) and the radii (sm–2xl) with concrete values;wordpressThemeJsoncopies them into the builttheme.json. The base keeps no palette and no font sizes.@layer base :rootrule points the colour utilities at the WordPress presets, so a palette edited in the Site Editor still reaches the theme.theme.json: itsfontFacecan only be declared there, so fonts are left out of the generation (disableTailwindFonts). This is also the documented example of keeping a family out of Tailwind.The font size slugs follow Tailwind (
sm,base,4xl…) instead ofsmall,medium,large,x-large. Themes already generated are not affected; content made with a theme generated from the old template would lose those sizes.Checked
On a fresh copy of the template (placeholders replaced) built and activated on pollora-test:
white(used bytext-white), and no scale colour.--wp--preset--color--primary: #ff5334,--wp--preset--font-size--4-xl: 2.25rem,--wp--preset--font-family--inter-var,--wp--preset--border-radius--lg: .5rem; no--wp--preset--color--red-500.theme.jsonreferences (--container-xl,--text-5xl--line-height,--default-font-family,--spacing…) is still emitted.