@kanmu/popcorn-tokens

Popcorn (Vandle Design System) で使用するデザイントークン

インストール

yarn add @kanmu/popcorn-tokens

提供されるトークン

本パッケージでは、以下のデザイントークンを提供します。

色（Colors）

Primitive colors

デザインシステムの基本となる色のパレット（例: green, gray, blue, red, yellow など、各色は 100-900 の階調を持ちます）

Semantic colors

用途に応じた意味を持つ色（例: background, text, border, icon, surface など）

タイポグラフィ（Typography）

Font size

テキストサイズの定義（例: typographyFontSizeBodySmall, typographyFontSizeBodyMedium, typographyFontSizeHeadingLarge など）

Line height

行間の定義

• default - 標準の行間（1.5）
• compact - コンパクトな行間（1.25）

サイズ（Size）

Spacing

余白・間隔の定義（例: spacingSmall, spacingMedium, spacingLarge など）

Radius

角丸の定義（例: radiusSmall, radiusMedium, radiusLarge など）

Icon

アイコンサイズの定義（例: iconSmall, iconMedium, iconLarge など）

すべてのトークンは TypeScript の型定義を含み、型安全に使用できます。

使い方

基本的な使用例

import {
  colorsSemanticBackgroundGray,
  colorsSemanticTextPrimary,
  spacingMedium,
  radiusSmall,
  typographyFontSizeBodyMedium,
} from '@kanmu/popcorn-tokens';
import {View, Text, StyleSheet} from 'react-native';

function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, Popcorn Tokens!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colorsSemanticBackgroundGray,
    padding: spacingMedium.number,
    borderRadius: radiusSmall.number,
  },
  text: {
    color: colorsSemanticTextPrimary,
    fontSize: typographyFontSizeBodyMedium.number,
  },
});

Contributing

デザイントークンパッケージの開発に貢献したい方は、以下のドキュメントを参照してください。

• コントリビューションガイド - 開発環境のセットアップとワークフロー
• リリースガイド - Figma からトークンを更新してリリースする手順