@teq/ui — TEQ Design System Catalog

Principles

docs/principles.md

Monochrome色は foreground / foreground-muted / border 系のみ。アクセント色・色付き Badge・生色(#hex)は禁止
Hairline区切りは 1px 罫線。カード・影・囲み箱で区切らない
Typography見出しはサンセリフ(Helvetica 系)+トラッキング。ラベル英字は大文字+letter-spacing .08–.22em
State有効=太字 / 無効・取消=~~打ち消し線~~(色に頼らない)
Numerals数字は tabular-nums。コード類は monospace
Actionボタン箱より下線リンク

Semantic Tokens

Tier 2 — 製品が触ってよい層はここまで

右上のテーマ切替でライト/ダークが入れ替わります — 製品側でも同じく [data-theme] の切替だけで全トークンが差し替わります。エディトリアル部品が使ってよいのは Ink / Border 系のみ(Action・Status は非エディトリアル文脈用の L0 在庫)。

Surface

--background--white

--background-elevated--gray-50

--background-sunken--gray-100

Ink

--foreground--gray-900

--foreground-muted--gray-600

--foreground-subtle--gray-500

Border

--border-subtle--gray-200

--border-default--gray-300

--border-strong--gray-400

Action

--primary--midnight-500

--secondary--gray-100

--accent--olive-500

--destructive--red-600

Status

--success--green-600

--warning--yellow-500

--error--red-600

--info--blue-500

Palette — sacai Seasonal (OKLCH)

Tier 1 primitives

Midnight Navy

Espresso Leather

Dry Olive

Trench Beige

Mist Greige

Black

Warm Gray (base)

Slate / Zinc / Stone の中立スケールと Status フルスケールは teq-base.css を参照(ここでは省略)。

Type · Density · Shape

semantic 経由で使う

--font-size-2xl · 24px商品マスター Editorial

--font-size-xl · 20px見出し Subheading

--text-body · 14px本文・ボタンラベル。The quick brown fox jumps over the lazy dog.

--text-caption · 13pxキャプション・ヘルプテキスト

--text-label · 11pxLabel / Kicker Style

tabular-nums1,024 / 20,900 — ¥3,980,000

--space-gap-tight · 8px

--space-gap-normal · 16px

--space-gap-loose · 24px

--space-inset-surface · 24px

--radius-badge · 2px

--radius-interactive · 4px

--radius-surface · 8px

--radius-pill

Components — Editorial

registry:ui · copy-to-own

以下は registry 収載部品の実表示(このページ自身のヘッダ・セクション見出しにも同じ部品様式を使用)。トークンだけで描画され、テーマ切替に追従します。

EditorialPageHeader

editorial-page-header

Products

商品マスター

商品と在庫を管理します

Props kicker · title · description? Tokens --foreground --foreground-muted --font-size-2xl --text-label

EditorialSectionHeader

editorial-section-header

SKU一覧

+ Add SKU

Props label · actions?(下線リンク等) Tokens --foreground --border-default --text-label

EditorialSearchInput

editorial-search-input

Props ariaLabel · placeholder? · debounceMs?=300 · onValueChange? · onDebouncedChange? Tokens --border-default --foreground --foreground-muted --text-caption

EditorialPagination

editorial-pagination

Page 1 / 209

Props pagination: PaginationState(最小互換型を同梱) · pageLabel? · previousLabel? · nextLabel?(文言は製品側で i18n 接続) Tokens --foreground-muted --foreground --text-label

Pending — B部品

着地で収載 → v0.1.0

EditorialActionQUOTA#2783 · 下線リンク型ボタンOpen
EditorialStatusQUOTA#2784 · Badge 代替の状態表現Open
EditorialTableQUOTA#2785 · フラット表Open

Usage

copy-to-own

# テーマ(CSS変数)— 採用製品には cron が自動同期(20分毎)
registry/themes/teq-base.css → <product>/…/tokens.css

# 部品 — shadcn add で copy-to-own(取り込み後はコードを所有)
npx shadcn add editorial-page-header editorial-section-header \
  editorial-search-input editorial-pagination

# 改善は本リポへ還流 PR(silent fork しない)。pin は git tag(semver)

# 導入手順・Tailwind 配線・採用申請テンプレ →
docs/ADOPTION.md