@mediakind/mk-theme

Distributable package containing:

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

Installation

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:

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

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:

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

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

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:

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