{"_id":"@aginix/ra-theme-kmitl","name":"@aginix/ra-theme-kmitl","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aginix/ra-theme-kmitl","description":"KMITL-branded theme for react-admin — King Mongkut's Institute of Technology Ladkrabang corporate identity (light + dark)","version":"1.0.0","engines":{"node":">=24.0.0"},"type":"module","main":"build/index.js","types":"build/index.d.ts","exports":{".":{"types":"./build/index.d.ts","default":"./build/index.js"},"./tokens":{"types":"./build/src/tokens.d.ts","default":"./build/src/tokens.js"}},"scripts":{"typecheck":"tsc --noEmit","lint":"eslint .","format":"prettier --write .","quick:test":"node --import=@poppinss/ts-exec --enable-source-maps bin/test.ts","pretest":"npm run lint","test":"c8 npm run quick:test","precompile":"npm run lint","compile":"tsdown && tsc --emitDeclarationOnly --declaration","build":"npm run compile","release":"release-it","version":"npm run build","prepublishOnly":"npm run build"},"keywords":["react-admin","theme","mui","material-ui","kmitl","admin","dashboard","branding"],"author":{"name":"n3n"},"license":"UNLICENSED","devDependencies":{"@adonisjs/eslint-config":"^3.0.0","@adonisjs/prettier-config":"^1.4.5","@adonisjs/tsconfig":"^2.0.0","@japa/assert":"^4.2.0","@japa/runner":"^5.3.0","@mui/icons-material":"^9.0.0","@mui/material":"^9.0.0","@mui/system":"^9.0.0","@poppinss/ts-exec":"^1.4.4","@release-it/conventional-changelog":"^10.0.5","@types/node":"^25.3.5","c8":"^11.0.0","eslint":"^10.0.3","prettier":"^3.8.1","react-admin":"^5.15.0","release-it":"^19.2.4","tsdown":"^0.21.0","typescript":"^5.9.3"},"peerDependencies":{"@mui/material":"^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0","react-admin":"^5.0.0"},"peerDependenciesMeta":{"react-admin":{"optional":true}},"publishConfig":{"access":"public"},"tsdown":{"entry":["./index.ts","./src/kmitl_theme.ts","./src/tokens.ts"],"outDir":"./build","clean":true,"format":"esm","minify":"dce-only","fixedExtension":false,"dts":false,"treeshake":false,"sourcemaps":false,"target":"esnext","external":["react-admin","@mui/material","@mui/system","react","react-dom"]},"release-it":{"git":{"requireCleanWorkingDir":true,"requireUpstream":true,"commitMessage":"chore(ra-theme-kmitl): release ${version}","tagAnnotation":"ra-theme-kmitl-v${version}","push":true,"tagName":"ra-theme-kmitl-v${version}"},"github":{"release":true,"releaseName":"@aginix/ra-theme-kmitl ${version}"},"npm":{"publish":true,"skipChecks":true},"plugins":{"@release-it/conventional-changelog":{"preset":{"name":"angular"}}}},"c8":{"reporter":["text","html"],"exclude":["tests/**"]},"prettier":"@adonisjs/prettier-config","gitHead":"4530072f8e923208c5ac0efd7432b09417968cfb","_id":"@aginix/ra-theme-kmitl@1.0.0","_nodeVersion":"24.13.1","_npmVersion":"11.8.0","dist":{"integrity":"sha512-819S2IrDOWPvFh/hZaGxN1TOsxhdg+vuWt7QqgrZfbRFvK42Ncp5d90Mwga73N4bevV8xiEP+nWgIhLb92X8Jg==","shasum":"3ad2db04e71ea9078b56bb31afc3c60d07764831","tarball":"https://registry.npmjs.org/@aginix/ra-theme-kmitl/-/ra-theme-kmitl-1.0.0.tgz","fileCount":8,"unpackedSize":21445,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBdMOnmEPD0GERzi/YI2gc68QW0tXvsGSI98D5kD/7bBAiB+hYAwBUeer+RhLdu3q8OyFA3AYusKuwE2oHE/mG2HxQ=="}]},"_npmUser":{"name":"n3n","email":"nonpawit.tee@gmail.com"},"directories":{},"maintainers":[{"name":"n3n","email":"nonpawit.tee@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ra-theme-kmitl_1.0.0_1783788785762_0.6092001590262466"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-11T16:53:05.663Z","1.0.0":"2026-07-11T16:53:05.896Z","modified":"2026-07-11T16:53:06.062Z"},"maintainers":[{"name":"n3n","email":"nonpawit.tee@gmail.com"}],"description":"KMITL-branded theme for react-admin — King Mongkut's Institute of Technology Ladkrabang corporate identity (light + dark)","keywords":["react-admin","theme","mui","material-ui","kmitl","admin","dashboard","branding"],"author":{"name":"n3n"},"license":"UNLICENSED","readme":"# @aginix/ra-theme-kmitl\n\nA [react-admin](https://marmelab.com/react-admin/) theme in the **KMITL** (King\nMongkut's Institute of Technology Ladkrabang) corporate identity — the signature\n**สีแสด** orange on a warm, flat, border-driven neutral surface. Ships matching\n**light and dark** themes plus the raw brand tokens.\n\nBuilt to pair with [`@aginix/vulcan-data-provider`](../vulcan-data-provider) for a\ndrop-in KMITL admin panel, but works with any react-admin app.\n\n## Install\n\n```sh\npnpm add @aginix/ra-theme-kmitl\n```\n\n`react-admin` and `@mui/material` are **peer dependencies** — the theme uses your\napp's existing MUI instance (it bundles none of its own).\n\n## Usage\n\n```tsx\nimport { Admin, Resource } from 'react-admin'\nimport { kmitlLightTheme, kmitlDarkTheme } from '@aginix/ra-theme-kmitl'\n\nexport const App = () => (\n  <Admin theme={kmitlLightTheme} darkTheme={kmitlDarkTheme}>\n    <Resource name=\"courses\" /* … */ />\n  </Admin>\n)\n```\n\n## Theme variants\n\nThe AppBar has two treatments. The default (`'neutral'`) keeps the chrome quiet\nand uses orange only as an accent; `'brand'` paints a full orange portal bar.\n\n```tsx\nimport { createKmitlTheme } from '@aginix/ra-theme-kmitl'\n\nconst brandLight = createKmitlTheme('light', { appBar: 'brand' })\nconst brandDark = createKmitlTheme('dark', { appBar: 'brand' })\n\n<Admin theme={brandLight} darkTheme={brandDark}>…</Admin>\n```\n\n## Design tokens\n\nImport the raw brand values for anything outside the theme (login screen, splash,\ncustom widgets):\n\n```ts\nimport { KMITL_ORANGE, KMITL_FONT_FAMILY } from '@aginix/ra-theme-kmitl/tokens'\n```\n\n| Token | Value | Use |\n|---|---|---|\n| `KMITL_ORANGE` | `#E35205` | Brand fill (buttons, active state). Pantone 166 C. |\n| `KMITL_ORANGE_TEXT` | `#B8420A` | Orange **text/links** on light (WCAG-AA safe). |\n| `KMITL_ORANGE_LIGHT` | `#FF6A26` | Orange lifted for dark surfaces. |\n| `KMITL_ORANGE_TINT` | `rgba(227,82,5,.12)` | Active-nav / selection tint. |\n| `KMITL_GREY` | `#666666` | Official secondary neutral. |\n| `KMITL_WARNING` | `#F2A900` | Gold warning (kept off the brand orange). |\n| `KMITL_FONT_FAMILY` | `\"KMITL Go\", …` | Font stack (see below). |\n\n## Fonts\n\nThe stack leads with **`\"KMITL Go\"`** — KMITL's official CI typeface (Fontcraft,\n2019; Thai + Latin). It is distributed only through the KMITL PR office and is\n**not redistributable**, so this package does **not** ship it.\n\n- **Licensed to use it?** Self-host `KMITL Go` under that exact family name and it\n  is picked up automatically.\n- **Otherwise** the open fallback **[Anuphan](https://fonts.google.com/specimen/Anuphan)**\n  (Thai + Latin) renders cleanly. Load it once in your app shell:\n\n  ```html\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n  <link href=\"https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" />\n  ```\n\n  or `pnpm add @fontsource/anuphan` and `import '@fontsource/anuphan'`.\n\n## Accessibility\n\n- The raw brand orange `#E35205` on white is ~3.8:1 — fine for **fills** (buttons,\n  the brand AppBar) and large text, but it **fails** WCAG AA for body text. The\n  theme therefore renders orange **text and links** in `#B8420A` (~5.5:1 on white).\n- `warning` is a gold `#F2A900`, deliberately kept off the brand orange so a\n  \"warning\" never reads as a primary action.\n- Both light and dark palettes are tuned independently (dark lifts the orange to\n  `#FF6A26`). These guarantees are enforced by the test suite.\n\n## Notes\n\n- The theme is a plain, serialisable `RaThemeOptions` object with **no runtime\n  dependency on `@mui/material`** — so there is only ever one MUI instance (your\n  app's), avoiding duplicate-module styling bugs.\n- Flat by design: all elevation shadows are `none`; separation comes from 1px\n  borders (same philosophy as react-admin's `bwTheme`).\n","readmeFilename":"README.md","_rev":"1-2383e85e648e51abaec48d3aa6233c05"}