Open wdawson opened 1 year ago
This branch is running in CodeSandbox. Use the links below to review this PR faster.
Open in CodeSandbox Web Editor | VS Code | VS Code Insiders | Preview
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Updated (UTC) |
---|---|---|---|
alpine | ✅ Ready (Inspect) | Visit Preview | Jul 7, 2023 11:40pm |
Problem
Alpine leverages the @nuxt-themes/typography module, which defines the available schema.
My understanding, based on how articles are rendered, is that the
font.display
is meant for headers. However, this token does not get applied to the title on the Hero component. Additionally, the description only receives this font-family style because it is a list. If you remove the list items, it also doesn't get overridden by the token, probably also because it doesn't have an element that the typography module picks up.Solution
This is probably because there isn't an
h1
element created as part of the Hero title. Perhaps that should be fixed, however, I noticed that someone could theoretically have a list as the title, where an h1 wouldn't be relevant.Therefore I decided to add some
fontFamily
css toHero.vue
so that anything that is put in the content is appropriately tagged.Please let me know if there's a different solution that would be better. I'm happy to learn more about this ecosystem 😄
Validation
Here is a screenshot of the playground after making the following changes to
.starters/default/tokens.config.ts
:You can clearly see the monospace fonts now instead of the default sans-serif.
TODO
package.json
as part of this PR (I didn't see it in the contributing guidelines).Other Notes
The same sort of thing is happening in Article headers, though in that case there is an
h1
element that is added. I filed an issue with the typography repo to start: https://github.com/nuxt-themes/typography/issues/65Also in this PR