Typography / core element stylesheet

[claviska]

This is a proposal to offer an optional extension to the base stylesheet that will apply light DOM styles to core HTML elements, much like Tailwind's typography plugin.

This will give users a simple, opt-in way to achieve consistent styling throughout their app without requiring them to style everything from scratch using Shoelace's design tokens.

The proposed stylesheet will cover things like:

• Basic CSS reset
• Fonts / line heights / etc.
• Headings
• Paragraphs
• Lists
• Tables
• Form control layouts (e.g. left-aligned labels; see Issue with help texts when using horizontal label layout #968)
• Visually hidden utility class (for various uses, including hiding form labels but allowing screen readers to announce them; Instead of allowing form element labels to be blank, toggle their visibility #728)
• etc.

To emphasize — these will not be components, but a light DOM stylesheet that users can opt into. The stylesheet will set default styles for core HTML elements like this:

h1 {
  font-family: var(--sl-heading-font-family);
  font-weight: var(--sl-heading-font-weight);
  ...
}

Additional design tokens (such as the ones shown above) will be added to base.css to facilitate this objective. Actual tokens needed are TBD, as is the name of the new stylesheet.

I don't think anyone will be opposed to this, but feel free to post your thoughts below. To support the feature, use 👍 below.

[jaredcwhite]

https://giphy.com/gifs/excited-yes-agree-jErnybNlfE1lm

[DeadWisdom]

Please give me clear docs on using them in the lightDOM and shadowDOM at the same time, then yes.

[johnspurlock]

New to Shoelace, and this sounds very useful for new prototypes - is a preview version of this core element stylesheet available on a cdn somewhere?

[claviska]

There's nothing to preview just yet. It's still on the TODO list.

[erutan]

This would be great - I have a project coming up that I'm going to build with astro as it'll be mostly pre-rendered / static with a few hydrated islands in it. Having a basic elements styled css variables that tie into shoelace would be really useful for a base in building the traditional aspects site while having those styles automatically fall into any shoelace components.

If you'd want some help with this I have a little time I could put in - in the past I forked zurb's foundation and had it rolling into three different html/css prototypes as a submodule etc so thinking of well structured classic CSS is something I'm comfortable with.

Somewhat amusingly it'd be similar to the OG shoelace which I stumbled across https://davidwalsh.name/shoelace-css

[masi]

I'd like also an option with a smaller base CSS. I don't need all these shades of purple etc.