LMVZ Styles

Global LMVZ Design System styles for consuming applications.

This package provides theme files and optional global style bundles.

Install

npm i @lmvz-ds/styles

Quick Start

Import one theme as early as possible in your app:

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

Or include it directly in HTML:

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

Extensibility and Customisation

LMVZ styles use predefined CSS cascade layers so integrations get a stable and predictable cascade order.

Layer semantics:

• lmvz-ds.reset: browser reset and defensive base rules.
• lmvz-ds.theme: design tokens and theme-level styles (for example typography).
• lmvz-ds.components: global component fragments and component-level styling.
• lmvz-ds.overrides: utility or app/theme-specific overrides.

Customisation hook: import an LMVZ theme first, then place your app overrides in a later layer.

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

@layer app.overrides {
  :root {
    --lmvz-ds-color-primary: #005a9c;
  }

  button {
    border-radius: 0.375rem;
  }
}

This keeps overrides explicit and robust across updates, because you control order with layers instead of selector specificity.

Theme Strategies

Single Theme

Use one of these entry points:

• @lmvz-ds/styles/themes/light.css
• @lmvz-ds/styles/themes/dark.css

No additional configuration is required.

Runtime Theme Toggle

Import all themes:

• @lmvz-ds/styles/themes/all.css

Then switch with an HTML attribute on the root element:

• data-theme="lmvz-light"
• data-theme="lmvz-dark"

Optional Global Bundles

Import bundles only when you need global styling for native HTML elements:

• @lmvz-ds/styles/bundles/reset.css — Browser reset and defensive base rules only (for advanced use cases).
• @lmvz-ds/styles/bundles/typography.css
• @lmvz-ds/styles/bundles/buttons.css
• @lmvz-ds/styles/bundles/layout.css
• @lmvz-ds/styles/bundles/tokens.css

These bundles are optional and additive on top of themes.

Integration Notes

• Import exactly one theme source at startup: either one specific theme file or themes/all.css.
• LMVZ web components keep their own internal styling; bundle imports are for global, native DOM styling.
• Keep imports explicit and minimal to avoid unnecessary global CSS.

Reference: Public Entry Points

Themes:

• @lmvz-ds/styles/themes/light.css
• @lmvz-ds/styles/themes/dark.css
• @lmvz-ds/styles/themes/all.css

Bundles:

• @lmvz-ds/styles/bundles/reset.css
• @lmvz-ds/styles/bundles/typography.css
• @lmvz-ds/styles/bundles/buttons.css
• @lmvz-ds/styles/bundles/layout.css
• @lmvz-ds/styles/bundles/tokens.css
• @lmvz-ds/styles/bundles/router-font-inline.css

Assets:

• @lmvz-ds/styles/assets/*

Maintainer Notes

Find contributor-facing build- and conventions- notes in .instructions.md.