Developer Guide

// 基本構造
.component {
  // 基本スタイル
}

.component-variant {
  // バリエーション（primary, secondary, success, etc.）
}

.component-size {
  // サイズ（sm, md, lg, xl）
}

.component-state {
  // 状態（active, disabled, loading）
}

// 例: Button
.btn { /* 基本 */ }
.btn-primary { /* カラー */ }
.btn-lg { /* サイズ */ }
.btn[disabled] { /* 状態 */ }

asagiri/
├── scss/
│   ├── main.scss                 # エントリーポイント
│   ├── _Normalize.scss           # リセットCSS
│   ├── _Typography.scss          # タイポグラフィ
│   ├── _Accessibility.scss       # アクセシビリティ
│   │
│   ├── Tokens/                   # デザイントークン
│   │   ├── _Token.scss           # すべてのトークン
│   │   ├── _Color.scss           # カラーシステム
│   │   ├── _Spacing.scss         # スペーシング
│   │   └── _Breakpoints.scss    # ブレークポイント
│   │
│   ├── Components/               # UIコンポーネント
│   │   ├── _Component.scss       # すべてのコンポーネント
│   │   ├── _Button.scss          # ボタン
│   │   ├── _Alert.scss           # アラート
│   │   ├── _Badge.scss           # バッジ
│   │   ├── _Card.scss            # カード
│   │   ├── _Tabs.scss            # タブ
│   │   ├── _Accordion.scss       # アコーディオン
│   │   ├── _Pagination.scss      # ページネーション
│   │   ├── _Breadcrumb.scss      # パンくず
│   │   ├── _Progress.scss        # プログレスバー
│   │   ├── _Loading.scss         # ローディング
│   │   ├── _Skeleton.scss        # スケルトン
│   │   ├── _Avatar.scss          # アバター
│   │   ├── _FormValidation.scss  # フォーム検証
│   │   └── _Dropdown.scss        # ドロップダウン
│   │
│   └── Utility/                  # ユーティリティ
│       ├── _UtilityAll.scss      # すべてのユーティリティ
│       ├── _Grid.scss            # CSS Grid
│       ├── _SpacingSystem.scss   # スペーシング
│       └── _Display.scss         # 表示制御
│
├── css/
│   └── main.css                  # コンパイル済みCSS
│
├── index.d.ts                    # TypeScript型定義
├── index.js                      # CommonJS エントリー
└── index.mjs                     # ES Module エントリー

// Level 1: Primitive Tokens (基本値)
--primary-h: 191;
--primary-s: 47%;
--primary-l: 53%;

// Level 2: Semantic Tokens (意味のあるトークン)
--color-primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 100%);

// Level 3: Component Tokens (コンポーネント固有)
.btn-primary {
  background: var(--color-primary);
}

// JavaScriptでCSS変数を取得
const root = document.documentElement;
const primaryColor = getComputedStyle(root).getPropertyValue('--color-primary');

// CSS変数を動的に変更
root.style.setProperty('--color-primary', '#ff0000');

// すべてのAsagiri CSS変数を取得
const asagiriVars = Array.from(document.styleSheets)
  .flatMap(sheet => Array.from(sheet.cssRules))
  .filter(rule => rule.selectorText === ':root')
  .flatMap(rule => Array.from(rule.style))
  .filter(prop => prop.startsWith('--color-') || prop.startsWith('--spacing-'));

import { AsagiriClass, ButtonClass, AlertClass, BadgeClass } from 'asagiri';

// すべてのAsagiriクラスの型
type AllClasses = AsagiriClass;

// 特定のコンポーネントの型
type ButtonClasses = ButtonClass;
// 'btn' | 'btn-primary' | 'btn-secondary' | 'btn-lg' | ...

// TypeSafeなクラス名使用
const className: ButtonClass = 'btn-primary'; // OK
const invalid: ButtonClass = 'invalid-class'; // Type Error

// React での使用
interface ButtonProps {
  variant?: ButtonClass;
  children: React.ReactNode;
}

function Button({ variant = 'btn', children }: ButtonProps) {
  return {children};
}

// 使用例
Click me

import { cn, asagiri } from 'asagiri';

// クラス名を結合
cn('btn', 'btn-primary', 'm-4'); // => 'btn btn-primary m-4'

// 条件付きクラス
cn('btn', isActive && 'active'); // => 'btn active' (if isActive is true)

// オブジェクト形式
cn('btn', {
  'active': isActive,
  'disabled': isDisabled
}); // => 'btn active' (if isActive is true)

// 配列形式
cn(['btn', 'btn-primary']); // => 'btn btn-primary'

// TypeScript で型安全に使用
const classes: AsagiriClass = cn('m-4', 'p-2', 'd-flex');

# リポジトリをクローン
git clone https://github.com/BoxPistols/asagiri.git
cd asagiri

# 依存関係をインストール
npm install

# 開発モード（watch）
npm run dev

# または手動でコンパイル
npx sass scss/main.scss css/main.css --watch

// custom.scss
@import 'asagiri/scss/Tokens/Token';
@import 'asagiri/scss/Normalize';

// 必要なコンポーネントだけインポート
@import 'asagiri/scss/Components/Button';
@import 'asagiri/scss/Components/Card';
@import 'asagiri/scss/Components/Alert';

// カスタムスタイルを追加
.my-custom-component {
  color: var(--color-primary);
}

// 1. 新しいSCSSファイルを作成
// scss/Components/_Tooltip.scss

.tooltip {
  position: relative;
  display: inline-block;

  &__text {
    visibility: hidden;
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius);
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);

    // ダークモード対応
    [data-theme="dark"] & {
      background-color: var(--color-light);
      color: var(--color-dark);
    }
  }

  &:hover &__text {
    visibility: visible;
  }
}

// 2. _Component.scss にインポート追加
@import "Tooltip";

// 3. TypeScript型定義を追加（index.d.ts）
export type TooltipClass =
  | 'tooltip'
  | 'tooltip__text'
  | 'tooltip-top'
  | 'tooltip-bottom'
  | 'tooltip-left'
  | 'tooltip-right';

// 4. AsagiriClassに追加
export type AsagiriClass =
  | ButtonClass
  | CardClass
  | TooltipClass  // ← 追加
  | ...;

// themes/corporate.scss
@import '../scss/Tokens/Token';

// カスタムカラーパレット
:root {
  --color-primary: #003366;      // コーポレートブルー
  --color-secondary: #6c757d;
  --color-accent: #ffc107;       // ゴールド
}

// カスタムコンポーネントスタイル
.btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.card {
  border: 2px solid var(--color-border);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

// ビルド
// npx sass themes/corporate.scss css/corporate.css