@masjidhub/tokens

Design tokens for MasjidHub — colors, typography, spacing, radius, shadows, and motion for web (Next.js + Tailwind + shadcn/ui), mobile, and Android TV (React Native + Expo).

Single source of truth for the MasjidHub UI theme. See docs/UI_THEME.md and docs/BRAND_GUIDELINES.md in the main repository for the design rationale.

Install

npm install @masjidhub/tokens

Usage

Tailwind (admin-web, public-web)

// tailwind.config.ts
import { tailwind } from "@masjidhub/tokens/tailwind";

export default {
  theme: { extend: tailwind },
};

shadcn/ui (admin-web)

import { shadcnToCss, shadcnLight, shadcnDark } from "@masjidhub/tokens/shadcn";

const lightCss = shadcnToCss(shadcnLight);
const darkCss = shadcnToCss(shadcnDark);

Expo / React Native (mobile-tv)

import { createExpoTheme } from "@masjidhub/tokens/expo";

const theme = createExpoTheme("dark"); // Android TV is dark-first

Raw tokens

import { teal, gold, light, dark, spacing, radius } from "@masjidhub/tokens";

Package contents

| Entry | Exports | Consumers | | --- | --- | --- | | . | All primitives + semantic tokens | Any | | /tailwind | Tailwind config object | admin-web, public-web | | /shadcn | shadcn CSS variable themes + serializer | admin-web | | /expo | Expo/RN theme factory | mobile-tv |

Development

npm install
npm run typecheck   # tsc --noEmit
npm run build       # tsup → ESM + CJS + d.ts
npm test            # build + smoke test

Release

Publishing is automated via GitHub Actions. Tag a release to publish:

git tag v0.1.0 && git push origin v0.1.0

Set an NPM_TOKEN secret on the repository to authenticate with the npm registry.

License

MIT