@mihcm/theme

Theme integration for the MiHCM Design System.

This package turns raw tokens from @mihcm/tokens into consumable CSS variables, Tailwind 4 theme mappings, reset styles, animation styles, and React Native theme helpers.

Current release

Current published version: 0.2.10.

This release adds the NATIVE_PLACEHOLDER_COLOR constant so React Native form fields share a single muted-foreground placeholder colour, exposes shadow-mi-input through globals.css and the Tailwind preset, keeps current date UI on the shared DayPicker v10 path, and preserves datepicker.css only as a legacy compatibility import.

Install

pnpm add @mihcm/theme @mihcm/tokens

Web usage

Import globals once in the app root:

import '@mihcm/theme/globals.css';

Date UI now uses the MiHCM Calendar and DatePicker primitives backed by @daypicker/react v10. No separate react-datepicker CSS import is required for current MiHCM date, date-time, time-only, or range pickers.

Tailwind usage

Use the preset when a project needs explicit Tailwind configuration:

import mihcmPreset from '@mihcm/theme/tailwind.preset';

export default {
  presets: [mihcmPreset],
};

Tailwind classes should use MiHCM semantic tokens and standard utilities:

<section className="bg-background text-foreground border border-border shadow-mi-card" />

What is included

• globals.css: token variables, reset styles, base typography, light/dark theme surfaces, and component CSS hooks.
• datepicker.css: legacy compatibility layer for older consumers that still import it. Current MiHCM DatePicker styling lives in component-level token classes and globals.css.
• tailwind.preset: Tailwind 4 mapping for color, type, spacing, radius, shadow, and motion tokens.
• React Native theme helpers exported from the package root.

Recent additions and fixes

• Exposes NATIVE_PLACEHOLDER_COLOR so React Native form fields (Combobox, CheckboxGrid, TransferList) share one muted-foreground placeholder colour instead of inlining hex literals per component.
• Exposes the latest 60/30/10 composition token aliases through globals.css and the Tailwind preset.
• Added CSS reset coverage for app surfaces that Tailwind does not fully normalize.
• Normalized form field background, border, and reduced shadow-mi-input styles across first-party and React Select controls.
• Added date picker trigger/clear-slot spacing fixes and calendar-friendly date picker theme overrides.
• Current DatePicker styling follows the shared DayPicker v10 Calendar component, so new apps should not add react-datepicker styling.
• Added smoother shared motion variables for disclosure, sheet, toast, and overlay animation.
• Added TopBar dark-mode token support through fixed component-level variables.

Maintainer checklist

When changing theme behavior:

1. Confirm the change is token-driven and not a raw one-off value.
2. Check light mode and dark mode.
3. Check form fields, overlays, and app-shell examples because they rely heavily on shared globals.
4. Run docs and Storybook visual verification where the changed CSS appears.
5. Add a changeset before publishing.

Build

cd src
pnpm -F @mihcm/theme build
pnpm -F @mihcm/theme typecheck

Related docs

• src/apps/docs/app/tokens/
• docs/CONVENTIONS.md
• docs/security-playbook.md