Mithrl Design System

The repository for Mithrl interface foundations, design references, and reusable React components, distributed under the @mithrl namespace.

Repository structure

• tokens/foundations.tokens.json is the canonical token registry.
• docs/ contains approved meaning, usage, rationale, and exceptions.
• figma/ contains parity metadata and future Code Connect mappings; the Figma library is the design reference.
• src/tokens/ contains the CSS implementation generated or synchronized from the registry.
• src/components/ contains the production React components.
• .storybook/ and tests/ contain the review and verification layers.

Local review

Install dependencies, then start the executable Foundations reference:

npm install
npm run storybook

The first component implementation, Button, will follow in a separate pull request after the Foundations baseline is approved.

Hosted Storybook

Pull requests validate the Storybook build without publishing it. After an approved change is merged into main, GitHub Actions publishes the current Storybook to GitHub Pages for the organization.

Pull request branches publish review builds through Chromatic after the CHROMATIC_PROJECT_TOKEN repository secret is configured. See the workflow setup for the required settings.

Package use

The library build produces an installable package with React exports, types, tokens, and component styles.

npm run build
npm run check:package

import "@mithrl/design-system/styles.css";
import { ProjectLibrary } from "@mithrl/design-system";

Public package changes require a Changeset.

npm run changeset

Validation

npm run test
npm run build
npm run build-storybook