# @mark/tokens

> Design tokens for the Mark Design System

## Installation

```bash
# npm
npm install @mark/tokens

# pnpm
pnpm add @mark/tokens

# yarn
yarn add @mark/tokens
```

## Usage

### JavaScript/TypeScript

```javascript
// Import default theme
import tokens from '@mark/tokens';

// Use tokens
element.style.color = tokens.mColorBrand;
element.style.padding = tokens.mSpaceM;
```

### CSS

```javascript
// Import CSS Custom Properties
import '@mark/tokens/css';
```

Then use in your CSS:

```css
.element {
  color: var(--m-color-brand);
  padding: var(--m-space-m);
}
```

### SCSS

```scss
@import '@mark/tokens/scss';

.element {
  color: $m-color-brand;
  padding: $m-space-m;
}
```

## Token Categories

### Colors

- Brand colors
- Text colors
- Background colors
- Border colors
- Status colors

### Typography

- Font families
- Font sizes
- Font weights
- Line heights

### Spacing

- Padding/margin scales
- Layout spacing
- Component spacing

### Borders

- Border widths
- Border radii
- Border styles

### Other

- Shadows
- Z-indices
- Transitions
- Breakpoints

## Themes

The tokens package supports multiple themes:

```javascript
// Light theme (default)
import '@mark/tokens/themes/light/css';

// Dark theme
import '@mark/tokens/themes/dark/css';
```

## Development

### Token Management

Tokens are managed through Figma using the [Grade Variables plugin](https://bitbucket.fcg.fi/projects/DSG/repos/figma-plugin-grade-variables/browse).

### Building

```bash
turbo build
```

This generates:

- JavaScript/TypeScript exports
- CSS Custom Properties
- SCSS variables
- Type definitions

## Contributing

See our documentation in Figma for token standards:

- Token naming conventions
- Figma integration
- Version management
- Breaking changes