MFUI Design Tokens

Design tokens for building UI styles.

• Changelog

Installation

1. Run the Installation Command

Run the following command to install the package:

npm install @moneyforward/mfui-design-tokens

Usage

This package provides the following formats of variables converted from design token JSON files using Style Dictionary:

• CSS custom properties
• Sass variables
• ES Modules constants and type definitions
• Panda CSS preset
• Tailwind CSS preset

CSS Custom Properties

@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

@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

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 for more information.

// 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.

// 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:

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.

/* 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:

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:

.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.