LMVZ Styles

This package contains all global design system styles for export (i.e. themes and style bundles).

See Conventions at the bottom, before editing!

Usage in your project

Always import one of the available themes as early in your application as possible, e.g. in your main CSS file

@import '@lmvz-ds/styles/themes/light.css';

... or in your HTML

<link rel="stylesheet" href=".../@lmvz-ds/styles/themes/light.css" />

Optionally, you can then import available style/-Packages:

• @lmvz-ds/styles/bundles/typography.css
• @lmvz-ds/styles/bundles/button.css

These will provide styles in the global CSS scope and target native DOM elements.

Structure & Concepts

Trade-Offs and Constraints

• The full set of (base) variables must only be bundled along with themes, as a singular import.
• Themes must be provided in singular and plural forms: When a website includes only one, it must be "active" without further configuration; when a toggle is to be implemented, all themes can be imported at once and switched (using an html attribute "data-theme-lmvz-[theme]").

Internal Abstractions

Internal abstractions are defined in ./internal. Layering is allowed here, but be conscious about it.

Bundles

These bundle abstractions and Fragments onto layers, for import into a consuming app. Bundles may provide global Component styles as Constructable Style Sheets

Themes

The primary function of Themes is to provide a pre-built set of Design Tokens (from the packages/design-tokens package) to consuming apps. They are built and exposed just like any other style Bundle.

Tech Setup

Styles are bundled using postcss (integrated via vite -> rollup -> postcss).

Conventions

• Be careful not to bloat Themes too much (e.g. by importing other Bundles), to allow for selective imports.
• Layers are not to be exposed separately, but only as part of Themes.
• Always import the Layers definition before layering your own styles.
• Only layer styles that are being exported as part of a Bundle or Theme, to otherwise allow generic re-use!
• Prefer (Component-) local style definitions over global ones.

TODOs

• [ ] Setup stylelint with the given Conventions