# LMVZ Styles

Global LMVZ Design System styles for consuming applications.

This package provides theme files and optional global style bundles.

## Install

```bash
npm i @lmvz-ds/styles
```

## Quick Start

Import one theme as early as possible in your app:

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

Or include it directly in HTML:

```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.

```css
@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

Contributor-facing build and conventions notes are in DEVELOPMENT.md.