npm package: @prioticket/design-tokens-material-web
Description: Prioticket Design Tokens for Material Web Components - CSS custom properties with state layers and comprehensive token coverage
Author: Prioticket
Latest version: 1.0.1

# @prioticket/design-tokens-material-web

Prioticket Design Tokens for Material Web Components - CSS custom properties with state layers and comprehensive token coverage.

## Installation

```bash
npm install @prioticket/design-tokens-material-web
```

Public CDN access:
- https://cdn.jsdelivr.net/npm/@prioticket/design-tokens-material-web@latest/theme.css
- https://unpkg.com/@prioticket/design-tokens-material-web@latest/theme.css


## Usage

### Method 1: CSS Import (Recommended)

```css
/* In your main CSS file */
@import '@prioticket/design-tokens-material-web/theme.css';
```

### Method 2: JavaScript/TypeScript Import

```javascript
// Automatically imports CSS in bundlers like Webpack/Vite
import '@prioticket/design-tokens-material-web';

// Or access theme metadata
import { theme, applyTheme } from '@prioticket/design-tokens-material-web';

console.log(theme.tokenCount); // 305
applyTheme(); // Manually applies theme
```

### Method 3: HTML Link

```html
<!-- Manual link in HTML -->
<link rel="stylesheet" href="node_modules/@prioticket/design-tokens-material-web/theme.css">
```

## Available Tokens

This package provides **305 CSS custom properties** for Material Web Components:

### Core Colors (42 tokens)
- `--md-sys-color-primary`, `--md-sys-color-on-primary`
- `--md-sys-color-secondary`, `--md-sys-color-on-secondary`
- `--md-sys-color-surface`, `--md-sys-color-background`
- All Material Design 3 color roles

### State Layers (111 tokens)
Interactive state tokens for hover, focus, and pressed states:
- `--md-sys-color-primary-hover`
- `--md-sys-color-primary-focus` 
- `--md-sys-color-primary-pressed`
- Available for all color roles

### Typography (60 tokens)
- `--md-sys-typescale-display-large-*`
- `--md-sys-typescale-headline-*-*`
- `--md-sys-typescale-title-*-*`
- `--md-sys-typescale-body-*-*`
- `--md-sys-typescale-label-*-*`

### Layout & Shape (92 tokens)
- Spacing: `--md-sys-spacing-*`
- Padding: `--md-sys-padding-*`
- Border radius: `--md-sys-shape-corner-*`
- Border width: `--md-sys-outline-width-*`
- Elevation: `--md-sys-elevation-level*`
- Scale values: `--md-sys-scale-*`

## Example Usage

```css
.my-component {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-padding-400);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  box-shadow: var(--md-sys-elevation-level2);
}

.my-component:hover {
  background-color: var(--md-sys-color-primary-hover);
}
```

## Material Web Components Integration

These tokens are designed to work with [Material Web Components](https://github.com/material-components/material-web):

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@prioticket/design-tokens-material-web/theme.css">
</head>
<body>
  <script type="module">
    import '@material/web/button/filled-button.js';
  </script>
  
  <md-filled-button>Prioticket Button</md-filled-button>
</body>
</html>
```

## Framework Integration

### React

```jsx
import '@prioticket/design-tokens-material-web';
import '@material/web/button/filled-button.js';

function App() {
  return (
    <div className="app" style={{
      backgroundColor: 'var(--md-sys-color-background)',
      color: 'var(--md-sys-color-on-background)'
    }}>
      <md-filled-button>Click me</md-filled-button>
    </div>
  );
}
```

### Vue

```vue
<template>
  <div class="app">
    <md-filled-button>Click me</md-filled-button>
  </div>
</template>

<script>
import '@prioticket/design-tokens-material-web';
import '@material/web/button/filled-button.js';
</script>

<style>
.app {
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}
</style>
```

## Version

Current version: 1.0.0

## Repository

[GitLab Repository](https://gitlab.prioticket.dev/innovation/prioticket-design-tokens)