npm package: @mediakind/mk-theme
Description: Mediakind design tokens and React SVG icon set.
Latest version: 1.1.0

# @mediakind/mk-theme

Distributable package containing:

- Theme tokens and MUI themes from `theme.ts`
- Reusable React SVG icons from `icons`

## Installation

```bash
npm install @mediakind/mk-theme
```

## Exports

### Package entrypoints

- `@mediakind/mk-theme` - exports both theme and icons
- `@mediakind/mk-theme/theme` - exports only theme values
- `@mediakind/mk-theme/icons` - exports only icons

---

## Theme documentation (`theme.ts`)

Import from:

```ts
import {
  lightTheme,
  darkTheme,
  lightModeColors,
  darkModeColors,
  color,
  spacing,
  sizes,
  borderRadius,
  borderWidth,
  fontSize,
  typography,
} from '@mediakind/mk-theme/theme';
```

### Available exports

- `lightTheme` - MUI light theme created with `createTheme`
- `darkTheme` - MUI dark theme created with `createTheme`
- `lightModeColors` - semantic light color tokens (button, form, table, etc.)
- `darkModeColors` - semantic dark color tokens (button, form, table, etc.)
- `color` - raw base palette (gray/blue/red/company/general/etc.)
- `spacing` - spacing scale map (e.g. `1 -> 4`, `2 -> 8`)
- `sizes` - size scale map
- `borderRadius` - radius tokens (`sm`, `md`, `lg`, `xl`, `full`)
- `borderWidth` - border width scale
- `fontSize` - font size tokens (`xs`, `sm`, `base`, `lg`, `xl`, `h1`...`h6`)
- `typography` - typography config (`sans`, `mono`)
- `default` export - `lightTheme`

### Theme usage example

```tsx
import { ThemeProvider } from '@mui/material/styles';
import { lightTheme } from '@mediakind/mk-theme/theme';

export function App() {
  return <ThemeProvider theme={lightTheme}>{/* app */}</ThemeProvider>;
}
```

---

## Icons documentation (`icons`)

Import icons from:

```tsx
import { ArrowIn, Check, WarningFilled } from '@mediakind/mk-theme/icons';
```

You can also import from `@mediakind/mk-theme` root:

```tsx
import { ArrowIn } from '@mediakind/mk-theme';
```

### Shared icon props

All icons accept standard SVG props plus:

- `size?: number` (default is usually `20`)
- `color?: string` (default is usually `currentColor`)
- `title?: string`
- `className?: string`
- `animateOnHover?: boolean`

Example:

```tsx
import { ArrowIn } from '@mediakind/mk-theme/icons';

export function Example() {
  return <ArrowIn size={24} color="#2563eb" className="my-icon" />;
}
```

## Available icons

The following icon modules are exported by `@mediakind/mk-theme/icons`:

`account-input-output`, `activity`, `archive`, `archive-filled`, `arrow-bottom-up`, `arrow-down`, `arrow-in`, `arrow-iteration`, `arrow-left`, `arrow-left-right`, `arrow-loop`, `arrow-mix`, `arrow-out`, `arrow-reply`, `arrow-right`, `arrow-right-down`, `arrow-right-up`, `arrow-up`, `arrows-rotate`, `arrows-sync`, `attachment`, `bell`, `bell-filled`, `binoculars`, `book`, `book-filled`, `bookmark`, `bookmark-filled`, `building`, `building-filled`, `calendar`, `card`, `caution`, `caution-filled`, `check`, `check-circle`, `check-circle-filled`, `check-double`, `chevron-double-down`, `chevron-double-up`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`, `circle`, `circle-filled`, `clock`, `close`, `cloud`, `cloud-download`, `cloud-upload`, `cog`, `contrat`, `credit-card`, `cursor-hand`, `database`, `database-filled`, `debt`, `description`, `description-checked`, `details-h`, `details-v`, `development`, `dialog`, `dialog-filled`, `dots-h`, `dots-v`, `draft`, `equal`, `error`, `error-filled`, `excerpt`, `eye`, `eye-closed`, `family`, `file`, `file-duplicate`, `file-duplicate-filled`, `file-pdf`, `filter`, `filter-filled`, `flash`, `folder`, `folder-filled`, `france`, `graph-bars`, `graph-donut`, `graph-lines`, `graph-pie`, `grid`, `guarantee`, `guarantee-filled`, `heart`, `heart-filled`, `history`, `image`, `image-add`, `images-set`, `income`, `info`, `info-filled`, `invoice`, `learning-board`, `learning-stand`, `letter`, `letter-open`, `link`, `list`, `location`, `location-filled`, `lock`, `login`, `logout`, `megaphone`, `megaphone-filled`, `menu`, `menu-h`, `minus`, `minus-circle`, `minus-circle-filled`, `modules`, `modules-filled`, `none`, `note`, `note-filled`, `outcome`, `paper-plane`, `paper-plane-filled`, `pen`, `people`, `people-woman`, `people-women-men`, `phone`, `phone-filled`, `plus`, `plus-circle`, `plus-circle-filled`, `propeller`, `proposal`, `resize-down`, `resize-down-horizontal`, `resize-up`, `resize-up-horizontal`, `search`, `share`, `sliders`, `souscription`, `spark`, `spark-filled`, `special-checkbox-full`, `special-checkbox-half`, `star`, `star-filled`, `sun`, `tag`, `tag-filled`, `teleoperator`, `ticket`, `trash`, `trash-filled`, `unlock`, `user`, `user-admin`, `user-admin-filled`, `user-filled`, `user-half`, `user-half-filled`, `user-location`, `user-phone`, `wallet`, `warning`, `warning-filled`, `wrench`.

Naming convention for component imports is PascalCase of the icon name:

- `arrow-in` -> `ArrowIn`
- `warning-filled` -> `WarningFilled`
- `user-admin-filled` -> `UserAdminFilled`