@blockquote-web-components/blockquote-base-style-h

BlockquoteBaseStyleHelpers offers a set of helper functions for working with CSS.

There are two kinds of helps:

Shared styles between components
Document-level styles

Demo

Shared styles between components

Adaptation of the Polymer ideas so that components can share styles, using native JS modules

Using the shared styles is a two-step process:

setComponentSharedStyles
getComponentSharedStyles

setComponentSharedStyles

Define a shared-style inside a JS module.

The id attribute specifies the name you'll use to reference your shared styles, multiple shared styles can be registered using the same ID. These will be applied to the component in the order they were registered.

shared-styles

import { css } from 'lit';
import { setComponentSharedStyles } from blockquote-base-style-helpers.js;

setComponentSharedStyles('x-foo-shared-styles', css`
:host {
  background-color: red;
}
p {
  color: blue;
}
`);

getComponentSharedStyles

A component can use getComponentSharedStyles for retrieving style blocks and add it to its local styles extending or overriding it.

Component

import { LitElement, html, css } from 'lit';
import { getComponentSharedStyles } from 'blockquote-base-style-helpers';

class XFoo extends LitElement {
  static get styles() {
    return [
      css`...`,
      getComponentSharedStyles('x-foo-shared-styles)
    ];
  }
}

Document-level styles

Adaptation of the Polymer ideas so for defining styles in the main document

Define reusable design tokens

Lit provide a perfect API, adoptStyles & css for Built-in support Theming and managing tokens for a design system.

The last step in the Built-in theme support creation is to provide the CSS variables to be able to inherit, lit.dev theming

But the function adoptStyles does not preserve any existing StyleSheets added via adoptedStyleSheets.
preserveExisting option to adoptStyles

1. From tokens to CSS variables

export const theme = {
  colors: {
    ...tertiary0,
    ...tertiary1,
    ...tertiary2,
    ...neutral,
  },
  fontFace: {
    ...fontFace,
  },
  fonts: {
    main: 'Kaisei HarunoUmi, serif',
  },
};

const THEME = `
:root {
  --red-300: ${theme.colors['--red-300']};
  --red-400: ${theme.colors['--red-400']};
  --red-500: ${theme.colors['--red-500']};
  --red-600: ${theme.colors['--red-600']};
  --red-700: ${theme.colors['--red-700']};

  --green-300: ${theme.colors['--green-300']};
  --green-400: ${theme.colors['--green-400']};
  --green-500: ${theme.colors['--green-500']};
  --green-600: ${theme.colors['--green-600']};
  --green-700: ${theme.colors['--green-700']};

  --blue-300: ${theme.colors['--blue-300']};
  --blue-400: ${theme.colors['--blue-400']};
  --blue-500: ${theme.colors['--blue-500']};
  --blue-600: ${theme.colors['--blue-600']};
  --blue-700: ${theme.colors['--blue-700']};

  --neutral-300: ${theme.colors['--neutral-300']};
  --neutral-400: ${theme.colors['--neutral-400']};
  --neutral-500: ${theme.colors['--neutral-500']};
  --neutral-600: ${theme.colors['--neutral-600']};
  --neutral-700: ${theme.colors['--neutral-700']};

  font: normal medium/1.25 sans-serif;

}`;

2. Styles are injected in document, adoptedStyleSheets, or inside `<style>` tags in the document's `<head>`

// Two call (setDocumentStyles) preserves any existing StyleSheets added via adoptedStyleSheets

setDocumentStyles(css`
  ${unsafeCSS(theme.fontFace.root)}
`);

setDocumentStyles(css`
  ${unsafeCSS(THEME)}
`);

3. Themable component

// CSS var fallback from the same theme just a source of truth
import { css, unsafeCSS } from 'lit';
import { theme } from '../theme/theme.js';

export default css`
  :host {
    display: block;
    color: var(--neutral-600, ${unsafeCSS(theme.colors['--neutral-600'])});
  }
`;

Progressive Enhancement:

support browsers with native Shadow DOM but without adoptedStyleSheets
support browsers with native Shadow DOM and adoptedStyleSheets

`src/getComponentSharedStyles.js`:

Functions

Name	Description	Parameters	Return
`getComponentSharedStyles`	Get styles (as cssResult) already associated to provided ID string (using setComponentSharedStyles helper) and returns them	`id: String`

Exports

Kind	Name	Declaration	Module	Package
`js`	`README`	README	src/getComponentSharedStyles.js
`js`	`getComponentSharedStyles`	getComponentSharedStyles	src/getComponentSharedStyles.js

`src/index.js`:

Exports

Kind	Name	Declaration	Module
`js`	`setDocumentStyles`	setDocumentStyles	./setDocumentStyles.js
`js`	`adoptDocumentStyles`	adoptDocumentStyles	./setDocumentStyles.js
`js`	`setComponentSharedStyles`	setComponentSharedStyles	./setComponentSharedStyles.js
`js`	`getComponentSharedStyles`	getComponentSharedStyles	./getComponentSharedStyles.js

`src/setComponentSharedStyles.js`:

Functions

Name	Description	Parameters	Return
`setComponentSharedStyles`	Set styles (as cssResult) associated to provided ID string which can then be retrieved by components	`id: String, styles: CSSResult`

Exports

Kind	Name	Declaration	Module	Package
`js`	`setComponentSharedStyles`	setComponentSharedStyles	src/setComponentSharedStyles.js

`src/setDocumentStyles.js`:

Functions

Name	Description	Parameters	Return
`adoptDocumentStyles`	Adopts the given styles into the render root.	`renderRoot: Document \\| HTMLElement, styles: Array`
`setDocumentStyles`	Sets the document styles.	`styles: !*`