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.

[mariohamann]

Often it makes sense to seperate semantics and appearance especially for headlines.

If you're going to provide this in the future, it would therefore be interesting to offer e. g. headings as CSS class (e. g. .h6) in addition. The Swiss Post does this as well: https://next.design-system.post.ch/?path=/docs/utilities-heading--docs

This makes it possible to do:
<h6 class="h3">Heading level 6 with h3 styles...</h6>

In general: Are there any plans to proceed in any direction? Is there anything what could be done from community side?

[damooo]

It would be great if considered. Perticularly for those who are not into typography to get started quickly.

[flieks]

Also highly interested. We made our own lit based table now (shadowdom) with just this stuff:

<bt-table ?striped=${args.striped} ?responsive=${args.responsive}>
        <bt-tablerow slot="header">
          <bt-tablecell grid-cols="6">Firstname</bt-tablecell>
          <bt-tablecell grid-cols="6">Lastname</bt-tablecell>
          <bt-tablecell grid-cols="6">Email</bt-tablecell>
          <bt-tablecell grid-cols="6">ZipCode</bt-tablecell>
        </bt-tablerow>
</bt-table>

But we want simple sorting and pagination.

[edimoldovan]

I was looking for something exactly like the propose reset. i will probably use Shoelace in handover.zip but I already have my CSS setup which doesn't match Shoelace's at all. What I am planning to do is to restyle the components I use one by one to get what I need. I could share if I indeed go that direction, if that is helpful in any way.

[claviska]

Closing as this has been implemented in Web Awesome and will be available in WA free.