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

続けて、プロジェクトごとにテーマCSSファイルを1つだけ用意し、カラーパレットやタイポグラフィーをCSSカスタムプロパティとして宣言します。

:root {
  --kds-color-text-primary: #212121;
  --kds-color-background-base: #f3f8f6;
  --kds-color-background-section: #eff5ef;
  --kds-typography-family-sans-jp: 'Noto Sans JP', 'Inter', system-ui, sans-serif;
  --kds-typography-weight-regular: 400;
  --kds-typography-weight-bold: 700;
  /* ...必要なトークンを定義... */
}

html.dark {
  --kds-color-text-primary: #ffffff;
  --kds-color-background-base: #121212;
  --kds-color-background-section: #1e1e1e;
}

最後に、UI Coreのスタイルと先ほどのCSSファイルをアプリケーションのルートで読み込みます。

import '@karan-monorepo/ui-core/dist/ui-core.css';
import './styles/kds-theme.css';

使用方法

CSSカスタムプロパティ

kds-theme.cssに定義したカスタムプロパティを参照するだけで、アプリ全体に一貫したスタイルを適用できます。テーマを切り替えたい場合はCSSの値を変更するだけです。

Vanilla Extractでのスタイリング

import { style } from '@vanilla-extract/css';

export const myComponent = style({
  color: 'var(--kds-color-text-primary)',
  fontSize: 'var(--kds-typography-size-body)',
  fontFamily: 'var(--kds-typography-family-sans-jp)',
});

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 - 目次コンポーネント