# <img src="https://unpkg.com/@moneyforward/mfui-design-tokens/logo_with_isolation.svg" alt="Money Forward UI"/>

# MFUI Design Tokens

Design tokens for building UI styles.

- [Changelog](https://github.com/moneyforward/mfui/blob/main/packages/design-tokens/CHANGELOG.md)

## Installation

### 1. Run the Installation Command

Run the following command to install the package:

```zsh
npm install @moneyforward/mfui-design-tokens
```

## Usage

This package provides the following formats of variables converted from design token JSON files using [Style Dictionary](https://styledictionary.com):

- CSS custom properties
- Sass variables
- ES Modules constants and type definitions
- [Panda CSS](https://panda-css.com/) preset
- [Tailwind CSS](https://tailwindcss.com/) preset

### CSS Custom Properties

```css
@import '@moneyforward/mfui-design-tokens/css';

.button {
  color: var(--mfui-color-base-inverted-content-none);
  background-color: var(--mfui-color-primary-background-none);
}
```

### Sass Variables

```scss
@use '@moneyforward/mfui-design-tokens/scss' as *;

.button {
  color: $mfui-color-base-inverted-content-none;
  background-color: $mfui-color-primary-background-none;
}
```

### ES Modules Constants

```tsx
import { MfuiColorBaseInvertedContentNone, MfuiColorPrimaryBackgroundNone } from '@moneyforward/mfui-design-tokens';

export function Button() {
  return (
    <button
      style={{
        color: MfuiColorBaseInvertedContentNone,
        backgroundColor: MfuiColorPrimaryBackgroundNone,
      }}
    >
      Label
    </button>
  );
}
```

### Panda CSS Preset

If you are using Panda CSS for your styling library, you can use a preset to use fully type-safe tokens.
See [official document](https://panda-css.com/docs/customization/presets) for more information.

```ts
// panda.config.ts
import { defineConfig } from '@pandacss/dev';
import { mfuiPandaCSSPreset } from '@moneyforward/mfui-design-tokens/presets/pandacss';

export default defineConfig({
  presets: [mfuiPandaCSSPreset],
  // Other configs...
});
```

### Tailwind CSS v3 Preset

If you are using Tailwind CSS v3 for your styling library, you can use a preset to integrate MFUI design tokens into your Tailwind theme.
All tokens are prefixed with `mfui-` to avoid conflicts with existing Tailwind tokens.

```js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@moneyforward/mfui-design-tokens/presets/tailwind')],
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    // You can extend or override the preset here
  },
  plugins: [],
};
```

Then you can use the design tokens in your CSS classes:

```tsx
export function Button() {
  return <button className="bg-mfui-primary-500 text-mfui-base-inverted-content-none">Label</button>;
}
```

### Tailwind CSS v4 Preset

For Tailwind CSS v4 projects, use the CSS-based preset with the `@theme` directive. This approach aligns with Tailwind CSS v4's CSS-first philosophy.

```css
/* app.css or main.css */
@import '@moneyforward/mfui-design-tokens/css/tailwind-v4.css';
@import 'tailwindcss';
```

The preset will make all MFUI design tokens available as Tailwind utilities with the `mfui-` prefix:

```tsx
export function Button() {
  return <button className="bg-mfui-primary-content-none text-mfui-base-inverted-content-none">Label</button>;
}
```

You can also use the tokens directly as CSS variables in custom styles:

```css
.custom-button {
  background: var(--color-mfui-primary-background-none);
  padding: var(--spacing-mfui-section-horizontal-comfort);
  border-radius: var(--radius-mfui-control-outer);
  box-shadow: var(--shadow-mfui-elevation-plus-2);
}
```

---

All company names, product and service names, and logos are trademarks or registered trademarks of their respective owners.