Getting Started

Karan Design Systemは、Astro + Starlight + Vanilla Extractを使用して構築された、日本語対応のデザインシステムです。型安全性とアクセシビリティを重視し、一貫したユーザー体験を提供します。

機能

• 日本語最適化: Noto Sans JPをベースとしたフォントスタック
• テーマ対応: ライトテーマとダークテーマの両方に対応
• 型安全: Vanilla Extractによる型安全なCSS-in-JS
• アクセシビリティ: WCAG準拠のコントラスト比とフォントサイズ
• 高パフォーマンス: Astroによる静的サイト生成

デザイントークン

カラーパレット

• Text Colors: Primary, Secondary, Disabled, Link, Error, Success
• Background Colors: Base, Section, Content, Accent
• Theme Support: Light/Dark テーマの自動切り替え

タイポグラフィー

• Font Family: Noto Sans JP ベースの日本語対応フォントスタック
• Font Sizes: H1(48px) から Caption(14px) までの階層的サイズ
• Font Weights: Regular(400), Medium(500), Bold(700)
• Line Heights: 読みやすさを重視した適切な行間設定

インストール

npm install @karan-monorepo/ui-core

使用方法

Vanilla Extractでのスタイリング

import { style } from '@vanilla-extract/css';
import { tokens } from '@karan-monorepo/ui-core/tokens';

export const myComponent = style({
  color: tokens.colors.text.primary.light,
  fontSize: tokens.typography.sizes.body,
  fontFamily: tokens.typography.families.sansJP,
});

Astroコンポーネントでの使用

---
import { myComponent } from './styles.css';
---

<div class={myComponent}>
  コンテンツ
</div>

Web Componentsの使用

---
import '@karan-monorepo/ui-core';
---

<kds-button variant="primary" size="md">
  ボタンテキスト
</kds-button>

次のステップ

• Colors - カラーパレットの詳細
• Typography - タイポグラフィーシステムの詳細
• Button - ボタンコンポーネント
• Card - カードコンポーネント
• Header - ヘッダーコンポーネント
• Footer - フッターコンポーネント
• Hero - ヒーローセクションコンポーネント
• SearchBar - 検索バーコンポーネント
• Tag - タグコンポーネント
• TableOfContents - 目次コンポーネント